Berita Platform Mingguan: WebKit Autofill, Menggunakan Pointer Kursor, Menangguhkan Video Autoplay

Berita Pembangunan Web minggu ini merangkumi kemas kini penting dalam pelbagai ciri penyemak imbas. Sorotan utama termasuk penyeragaman Autofill WebKit, kegunaan yang diperluaskan untuk kursor penunjuk, dan pengoptimuman penyemak imbas untuk video autoplaying. Mari kita menyelidiki butirannya.

CSS :-webkit-autofill menjadi standard

Selama bertahun-tahun, pelayar yang paling moden (tidak termasuk Firefox) menyokong :-webkit-autofill CSS Pseudo-Class untuk Styling Browser-Autofilled Fields. Ini membolehkan pemaju untuk menyesuaikan input autofill secara visual dan mengesannya melalui JavaScript:

 biarkan autofilled = document.QuerySelectorAll (":-WebKit-AutOfill");

Walaupun acara AutoFill standard masih kurang, pemaju boleh memanfaatkan acara input dan menyemak :-webkit-autofill .

Standard HTML kini secara rasmi termasuk :autofill (dengan :-webkit-autofill sebagai alias), memperluaskan fungsi ini kepada semua pelayar yang mematuhi. Firefox 86 dijangka melaksanakannya tidak lama lagi.

The :autofill dan :-webkit-autofill Pseudo-Classes Sasaran Elemen Autofilled oleh penyemak imbas, berhenti untuk memohon jika pengguna mengubah medan.

Grid CSS untuk butang dan jarak pautan

Artikel Josh W. Comeau, "Mari kita bawa Gifs Spacer kembali!", Peguambela menggunakan unsur -unsur spacer khusus untuk jarak komponen butang, dengan alasan untuk bergantung semata -mata pada margin CSS. Dia menunjukkan kekaburan untuk memberikan margin sama ada ikon atau teks.

CSS Grid menawarkan penyelesaian yang unggul. Daripada menggunakan ruang yang tidak pecah (seperti dalam surat berita CSS-Tricks), susun atur grid menyediakan kawalan jarak yang lebih tepat melalui harta gap .

Memperluas kursor pointer melebihi pautan

Modul Antara Muka Pengguna Asas CSS mentakrifkan harta cursor . Walaupun spesifikasi menyatakan bahawa cursor: pointer (kursor tangan) menunjukkan pautan, dan penyemak imbas lalai untuk memohon kepada pautan dan kursor anak panah ke butang, kebanyakan laman web (termasuk Wikipedia) memanjangkan cursor: pointer ke elemen interaktif lain seperti butang dan kotak semak untuk pengalaman pengguna yang lebih baik. The<summary></summary> elemen (untuk<details></details> ) adalah satu lagi calon yang sesuai untuk kursor penunjuk.

Pengoptimuman Video Autoplay: Kelewatan sehingga kelihatan

Untuk mengurangkan penggunaan tenaga berbanding dengan GIF, pelayar telah mengurangkan sekatan autoplay, menggalakkan penggunaan video. Walau bagaimanapun, main balik video yang tidak perlu apabila elemen itu tidak cekap. Pelayar utama yang paling besar (kecuali Firefox) kini menjeda secara automatik<video autoplay="" muted=""></video> unsur -unsur sehingga mereka dapat dilihat dalam viewport, menghapuskan keperluan untuk pengendalian manual dengan Intersection Observer .

<video autoplay=""></video> Unsur-unsur hanya bermain sekali dilihat pada skrin (contohnya, ditatal ke dalam pandangan, diturunkan melalui CSS, atau ditambah ke DOM).

(melalui Zach Leatherman)

Deskriptor @font-face baru Chrome

Metrik fon yang tidak konsisten di seluruh pelayar dan sistem pengendalian boleh membawa kepada misalignment teks menegak, terutamanya yang ketara dalam tajuk besar, dan perubahan susun atur semasa swap fon. Chrome memperkenalkan tiga deskriptor @font-face baru untuk menangani ini:

• ascent-override (ketinggian di atas garis dasar)
• descent-override (kedalaman di bawah garis dasar)
• line-gap-override

 @font-face {
  Font-Family: Roboto;
  /* Merriweather Sans mempunyai pendakian 125.875px 
   * dan keturunan 35px pada saiz fon 128px.
   */
  pendakian: Calc (125.875 / 128 * 100%);
  Descent-override: Calc (35/218 * 100%);
  SRC: Tempatan (Roboto-Regular);
}

Mengatasi metrik ini memastikan susun atur yang konsisten merentasi fon yang berbeza, mencegah perubahan susun atur.

Atas ialah kandungan terperinci Berita Platform Mingguan: WebKit Autofill, Menggunakan Pointer Kursor, Menangguhkan Video Autoplay. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!