Yang baru di Chrome 133

Rachel Andrew

Berikut ini hal yang perlu Anda ketahui:

Fungsi attr() lanjutan CSS

Fitur ini menambahkan fungsi attr() yang ada, fitur yang ditentukan dalam CSS Level 5. Hal ini memungkinkan jenis selain <string> dan penggunaan di semua properti CSS (selain dukungan yang ada untuk konten pseudo-element).

Pada contoh berikut, nilai properti color untuk div menggunakan nilai dari atribut data-color. Nilai atribut ini diuraikan menjadi <color> menggunakan attr() dan type(). Nilai penggantian ditetapkan ke red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Pelajari lebih lanjut di CSS attr() mendapatkan upgrade.

Kueri penampung status scroll CSS

Gunakan kueri penampung untuk menentukan gaya turunan penampung berdasarkan status scroll-nya.

Container kueri adalah container scroll, atau elemen yang terpengaruh oleh posisi scroll container scroll. Status berikut dapat dikueri:

  • stuck: Penampung yang diposisikan tetap akan menempel di salah satu tepi kotak scroll.
  • snapped: Penampung yang disejajarkan dengan scroll snap saat ini di-snap secara horizontal atau vertikal.
  • scrollable: Apakah penampung scroll dapat di-scroll ke arah yang dikueri.

Jenis penampung baru: scroll-state memungkinkan penampung dikueri. Contoh:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Pelajari lebih lanjut dan lihat beberapa demo di kueri status scroll CSS.

CSS text-box, text-box-trim, dan text-box-edge

Properti text-box-trim menentukan sisi yang akan dipangkas, di atas atau di bawah, dan properti text-box-edge menentukan cara tepi harus dipangkas.

Properti ini memungkinkan Anda mengontrol jarak vertikal secara tepat menggunakan metrik font.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Cari tahu cara menggunakan properti baru ini di CSS text-box-trim.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Animation.overallProgressmemberi Anda representasi yang mudah dan konsisten tentang seberapa jauh animasi telah maju di seluruh iterasi dan terlepas dari sifat linimasanya.
  • Node.prototype.moveBefore memungkinkan Anda memindahkan elemen di sekitar hierarki DOM, tanpa mereset status elemen.
  • Antarmuka FileSystemObserver memberi tahu situs web tentang perubahan pada sistem file.
  • Metode PublicKeyCredential getClientCapabilities() memungkinkan Anda menentukan fitur WebAuthn mana yang didukung oleh klien pengguna.

Lihat catatan rilis Chrome 133 lengkap untuk mengetahui detail fitur ini dan banyak fitur lainnya yang Baru di Chrome.

Bacaan lebih lanjut

Hal ini hanya mencakup beberapa sorotan utama. Periksa link berikut untuk mengetahui perubahan tambahan di Chrome 133.

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Segera setelah Chrome 133 dirilis, kami akan memberi tahu Anda tentang hal-hal baru di Chrome.