Berita Platform Mingguan: The: Not () Pseudo-Class, Pertanyaan Media Video, Klip-Laluan: Laluan () Sokongan

Kemas kini penyemak imbas minggu ini dari Šime Vidas meliputi peningkatan CSS yang signifikan, kebimbangan kebolehaksesan, dan ciri CSS yang lama ditunggu-tunggu.

Sorotan minggu ini termasuk yang bertambah baik :not() kelas pseudo, menangani masalah menatal yang lancar dalam fungsi "cari di halaman" Chrome, pengendalian unik safari<video></video> Atribut media elemen, dan kedatangan fungsi path() untuk clip-path .

Dipertingkatkan :not() kelas pseudo memperluaskan keupayaan pemilih

Yang dipertingkatkan :not() kelas pseudo, kini disokong di seluruh pelayar utama, dengan ketara meningkatkan kuasa pemilih CSS. Ia kini menerima pemilih dan senarai kompleks, membolehkan penargetan yang lebih tepat. Contohnya, anda boleh memilih<p> unsur -unsur <em>tidak</em> dalam<code><article></article> :

 /* Pilih semua<p> unsur -unsur tidak dalam<article> */
P: tidak (artikel *) {
}</article></p>

Satu lagi contoh melibatkan memilih item senarai yang kelihatan pertama: manakala :nth-child(1 of :not([hidden])) adalah ideal, of tidak mempunyai sokongan yang luas. Yang dipertingkatkan :not() menyediakan penyelesaian:

 / * Pilih item senarai tidak tersembunyi pertama */
: tidak ([tersembunyi]): tidak (: tidak ([tersembunyi]) ~: tidak ([tersembunyi]))) {
}

Header Refresh HTTP: Risiko Kebolehcapaian

Header HTTP Refresh (dan setaraf<meta> tag) secara automatik memuatkan halaman secara berkala. Walaupun digunakan secara meluas (2.8% beban halaman krom), ini menimbulkan cabaran kebolehaksesan. Selang penyegaran pendek mengganggu penggunaan pembaca skrin untuk pengguna cacat penglihatan. WCAG membenarkan penggunaannya hanya dengan nilai 0 untuk pengalihan sisi klien apabila pengalihan sisi pelayan tidak boleh dilaksanakan.

Melumpuhkan menatal lancar semasa "cari di halaman" Chrome

Menatal lancar Chrome, sementara umumnya bermanfaat, mengganggu ciri "Cari pada halaman" untuk sesetengah pengguna. Penyelesaian CSS oleh Christian Schaefer melumpuhkan tatal lancar secara khusus semasa carian:

 @KeyFrames smoothScroll1 {dari, ke {scroll-behavior: smooth; }}
@KeyFrames smoothScroll2 {dari, ke {scroll-behavior: smooth; }}
html {animation: smoothscroll1 1s; }
html: fokus-within {animation-name: smoothScroll2; Tingkah laku tatal: licin; }

Sokongan berterusan Safari untuk<video></video> Atribut media

The<video></video> Atribut media elemen, yang membolehkan sumber video responsif, telah dikeluarkan dari kebanyakan pelayar kerana kebimbangan mengenai pemilihan sumber yang cekap. Walau bagaimanapun, Safari masih menyokongnya. Scott Jehl menganjurkan untuk pengembalian semula, dengan alasan kawalan yang lebih besar terhadap penghantaran video yang responsif dalam<video></video> elemen itu sendiri.

fungsi clip-path: path() sekarang disokong secara meluas

Pelaksanaan Fungsi path() baru-baru ini Chrome untuk clip-path melengkapkan sokongannya di seluruh pelayar utama. Fungsi ini, sebahagian daripada modul bentuk CSS, menggunakan rentetan laluan SVG untuk kliping elemen serba boleh, yang membolehkan hampir apa -apa bentuk.

Atas ialah kandungan terperinci Berita Platform Mingguan: The: Not () Pseudo-Class, Pertanyaan Media Video, Klip-Laluan: Laluan () Sokongan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!