Berita Platform Mingguan: Cincin Fokus, Skop Donat, Lebih Banyak Unit EM, dan Kawalan Privasi Global

Berita Pembangunan Web minggu ini merangkumi kemas kini penting di pelbagai platform. Sorotan utama termasuk pengendalian cincin fokus Chrome, keupayaan yang dipertingkatkan dari CSS :not() pemilih, penggunaan utama kawalan privasi global (GPC), dan hujah yang menarik untuk pertanyaan media berasaskan EM. Kami juga meneroka penyelesaian CSS untuk meningkatkan gaya pengesahan bentuk.

Tingkah laku cincin fokus Chrome berubah

Penyemak imbas Chrome, Edge, dan lain-lain yang berasaskan kromium kini memaparkan cincin fokus pada klik butang. Ini berbeza dari Safari dan Firefox, yang hanya menunjukkan cincin fokus apabila navigasi papan kekunci digunakan. Pemaju telah menggunakan penyelesaian menggunakan data-whatintent dan :focus-visible untuk menguruskan tingkah laku ini. Walau bagaimanapun, Chrome 90 akan menghapuskan keperluan untuk penyelesaian ini dengan menukar lembaran gaya ejen penggunanya untuk mengutamakan :focus-visible , dengan itu menekan cincin fokus pada klik dan paip sambil memelihara mereka untuk pengguna papan kekunci.

Memanfaatkan CSS :not() untuk pemilihan "Skop Donat"

Corak pemilih A:not(B *) membolehkan memilih A elemen yang tidak turun dari B . Memperluas ini kepada AB:not(C *) mencipta "skop donat," yang membolehkan pemilihan elemen yang tepat dalam konteks tertentu, tidak termasuk mereka dalam elemen bersarang. Sebagai contoh, article p:not(blockquote *) memilih semua perenggan dalam artikel, tidak termasuk mereka di dalam blockquotes.

Daya tarikan kawalan privasi global

Kawalan Privasi Global (GPC), isyarat privasi yang boleh dikuatkuasakan secara sah menggunakan header Sec-GPC: 1 , isyarat keutamaan pengguna terhadap perkongsian data atau penjualan. The New York Times adalah penerbit utama pertama yang menyokong sepenuhnya GPC, dengan orang lain seperti Washington Post dan sokongan iklan automatik tidak lama lagi. Apabila isyarat GPC dikesan, tapak yang mematuhi akan menghentikan data pengguna perkongsian (tidak termasuk penyedia perkhidmatan) di mana undang -undang privasi yang berkaitan.

Kelebihan pertanyaan media berasaskan EM

Laman web yang menggunakan saiz fon berasaskan piksel ( font-size: 20px ) tidak bertindak balas terhadap pelarasan saiz fon peringkat pelayar. Menggunakan unit em dan rem membolehkan responsif kepada keutamaan pengguna. Untuk tingkah laku yang konsisten, pertanyaan media juga harus menggunakan unit em (contohnya, min-width: 80em ). Ini memastikan susun atur responsif menyesuaikan dengan betul walaupun pengguna menyesuaikan saiz fon lalai mereka, mencegah isu-isu seperti garis-garis yang terlalu pendek dalam susun atur pelbagai lajur. Plugin PostCSS memudahkan penukaran dari px ke em dalam pertanyaan media.

Meningkatkan Pengesahan Pengesahan Borang Dengan :user-invalid

CSS standard :invalid mempunyai batasan dalam pengesahan bentuk. Ia mencetuskan pada setiap kekunci dan segera pada beban halaman untuk medan yang diperlukan, berpotensi menyebabkan pengalaman pengguna yang mengelirukan. The :user-invalid , yang telah disokong dalam Firefox sebagai :-moz-ui-invalid , menangani isu-isu ini dengan hanya memohon selepas interaksi pengguna yang signifikan. Usaha sedang dijalankan untuk menyeragamkan :user-invalid merentasi pelayar lain.

Atas ialah kandungan terperinci Berita Platform Mingguan: Cincin Fokus, Skop Donat, Lebih Banyak Unit EM, dan Kawalan Privasi Global. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!