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 di CSS Level 5. Hal ini memungkinkan jenis selain <string> dan digunakan di semua properti CSS (selain dukungan yang ada untuk konten pseudo-elemen).

Dalam 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 menata gaya turunan penampung berdasarkan status scroll-nya.

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

  • stuck: Penampung yang diposisikan melekat menempel ke salah satu tepi kotak scroll.
  • snapped: Penampung yang sejajar dengan snap scroll saat ini disetel 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 spasi vertikal secara akurat 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 text-box-trim CSS.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Animation.overallProgressmemberi Anda representasi yang mudah dan konsisten tentang seberapa jauh animasi telah berkembang di seluruh iterasinya 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 tentang perubahan pada sistem file.
  • Metode PublicKeyCredential getClientCapabilities() memungkinkan Anda menentukan fitur WebAuthn 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

Bagian ini hanya membahas beberapa sorotan utama. Lihat link berikut untuk mengetahui perubahan tambahan di Chrome 133.

Langganan

Agar selalu 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 segera memberi tahu Anda tentang yang baru di Chrome.