Berita Platform: garis besar bulat, animasi SVG yang dipercepatkan oleh GPU, bagaimana pembolehubah CSS diselesaikan

Dalam berita minggu ini, Firefox mendapat garis besar bulat, animasi SVG kini dipercepatkan oleh GPU di Chrome, tidak ada unit fizikal di CSS, silang kata New York Times boleh diakses, dan pembolehubah CSS diselesaikan sebelum nilai yang diwarisi.

Mari melompat dalam berita!

Garis besar bulat akan datang ke Firefox

Idea untuk mempunyai garis besar mengikuti lengkung sempadan telah wujud sejak ia menjadi mungkin untuk membuat sempadan bulat melalui harta Radius sempadan pada pertengahan 2000-an. Ia dicadangkan kepada Mozilla, WebKit, dan Chromium lebih sepuluh tahun yang lalu, dan ia juga menjadi sebahagian daripada spesifikasi CSS UI sejak 2015:

Bahagian garis besar tidak diperlukan untuk menjadi segi empat tepat. Sejauh mana garis besar mengikuti tepi sempadan, ia harus mengikuti lengkung radius sempadan .

Cepat ke hari ini pada hari ini pada tahun 2021 dan garis besar masih segi empat tepat di setiap penyemak imbas tanpa pengecualian:

Tetapi ini akhirnya mula berubah. Dalam beberapa minggu, Firefox akan menjadi pelayar pertama dengan garis besar bulat yang secara automatik mengikuti bentuk sempadan. Ini juga akan digunakan untuk fokus lalai Firefox pada butang.

Sila bintang Chromium Issue #81556 (log masuk yang diperlukan) untuk membantu mengutamakan pepijat ini dan membawa garis besar bulat ke Chrome lebih cepat daripada kemudian.

Animasi SVG kini dipercepatkan oleh GPU di Chrome

Sehingga baru-baru ini, menghidupkan elemen SVG melalui CSS akan mencetuskan pengecualian pada setiap bingkai (biasanya 60 kali sesaat) dalam pelayar berasaskan kromium. Permintaan yang berterusan itu boleh memberi kesan negatif terhadap kelancaran animasi dan prestasi halaman itu sendiri.

Versi terkini Chrome telah menghapuskan isu prestasi ini dengan membolehkan pecutan perkakasan untuk animasi SVG. Ini bermakna animasi SVG dilepaskan ke GPU dan tidak lagi berjalan pada benang utama.

Suis ke pecutan GPU secara automatik membuat animasi SVG lebih banyak prestasi dalam pelayar berasaskan kromium (Firefox melakukan ini juga), yang pasti berita baik untuk web:

Hooray untuk lebih banyak pembaca skrin-boleh diakses, animasi SVG yang dipertingkatkan secara progresif dan kanvas kurang.

Tidak ada unit fizikal sebenar di CSS

CSS mentakrifkan enam unit fizikal, termasuk dalam (inci) dan CM (sentimeter). Setiap unit fizikal berada dalam nisbah tetap dengan unit piksel, iaitu unit kanonik. Sebagai contoh, 1in sentiasa betul -betul 96px. Pada kebanyakan skrin moden, panjang ini tidak sesuai dengan 1 inci dunia nyata.

Halaman Soalan Lazim Kumpulan Kerja CSS kini menjawab soalan mengapa tidak ada unit fizikal sebenar di CSS. Ringkasnya, penyemak imbas tidak boleh selalu menentukan saiz dan resolusi tepat paparan (fikirkan projektor). Untuk laman web yang memerlukan unit dunia sebenar yang tepat, kumpulan kerja mengesyorkan penentukuran setiap peranti:

Mempunyai halaman penentukuran, di mana anda meminta pengguna untuk mengukur jarak antara dua baris yang beberapa jarak CSS selain (katakan, 10cm), dan memasukkan nilai yang mereka dapatkan. Gunakan ini untuk mencari faktor skala yang diperlukan untuk skrin tersebut (panjang CSS dibahagikan dengan panjang pengguna yang disediakan).

Faktor skala ini kemudiannya boleh ditetapkan ke harta tersuai dan digunakan untuk mengira panjang yang tepat dalam CSS:

 html {
  -S-Skala: 1.428;
}

.box {
  / * 5 sentimeter dunia nyata */
  lebar: calc (5cm * var (-skala unit, 1));
}

Times Crossword boleh diakses oleh pengguna pembaca skrin

Pasukan Terbuka NYT menulis tentang beberapa penambahbaikan ke laman web New York Times yang menjadikannya lebih mudah diakses dalam beberapa tahun kebelakangan ini. Laman web ini menggunakan HTML semantik (, , dan lain-lain), peningkatan kontras pada komponen penting (misalnya, log masuk dan pendaftaran), dan pautan melangkau-ke-kandungan yang menyesuaikan diri dengan paywall tapak.

Selain itu, pasukan permainan membuat teka -teki silang harian yang boleh diakses oleh pengguna papan kekunci dan pembaca skrin. Kata silang dilaksanakan sebagai grid elemen SVG . Apabila pengguna menavigasi melalui teka-teki, atribut ARIA-label semasa (nama yang boleh diakses) secara dinamik dikemas kini untuk menyediakan konteks tambahan.

Anda boleh memainkan kata laluan mini tanpa akaun. Cuba selesaikan teka -teki dengan papan kekunci.

Pembolehubah CSS diselesaikan sebelum nilai diwarisi

Yuan Chuan baru -baru ini berkongsi kuiz CSS kecil yang saya tidak menjawab dengan betul kerana saya tidak pasti jika pembolehubah CSS (fungsi VAR ()) diselesaikan sebelum atau selepas nilai diwarisi. Saya akan cuba menerangkan bagaimana ini berfungsi pada contoh berikut:

 html {
  --Text-color: var (-warna utama, hitam);
}

footer {
  -Main-warna: coklat;
}

p {
  warna: var (-warna teks);
}

Persoalannya: Adakah warna perenggan di footer hitam atau coklat? Terdapat dua kemungkinan. Sama ada (a) nilai-nilai yang diisytiharkan kedua-dua sifat tersuai diwarisi kepada perenggan, dan kemudian harta warna menyelesaikan kepada coklat, atau (b) harta warna -teksteksi untuk hitam secara langsung pada elemen , dan kemudian nilai ini diwarisi kepada perenggan dan diberikan kepada harta warna.

Jawapan yang betul adalah pilihan B (warna hitam). Pembolehubah CSS diselesaikan sebelum nilai diwarisi. Dalam kes ini,-warna-warna jatuh kembali ke hitam kerana-warna-warna tidak wujud pada elemen . Peraturan ini ditentukan dalam modul pembolehubah CSS:

Adalah penting untuk diperhatikan bahawa sifat tersuai menyelesaikan sebarang fungsi var () dalam nilai mereka pada masa nilai yang dikira, yang berlaku sebelum nilai diwarisi.

Atas ialah kandungan terperinci Berita Platform: garis besar bulat, animasi SVG yang dipercepatkan oleh GPU, bagaimana pembolehubah CSS diselesaikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!