attr() CSS mendapatkan upgrade

Bramus

Dipublikasikan: 15 Jan 2025

Fungsi attr() yang didesain ulang

Dengan CSS attr(), Anda dapat menggunakan nilai atribut HTML di CSS. Hingga saat ini, attr() hanya berfungsi dalam properti content elemen pseudo dan hanya dapat mengurai nilai menjadi <string> CSS.

Fungsi attr() yang didesain ulang, yang tersedia mulai Chrome 133, membuka lebih banyak kemampuan. Kini Anda dapat menggunakan attr() dengan properti CSS apa pun—termasuk properti kustom—dan properti ini dapat mengurai nilai menjadi jenis data selain <string>.

Contoh

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);
}

Dalam contoh berikutnya, properti view-transition-name ditentukan oleh atribut id elemen. Atribut akan diuraikan menjadi <custom-ident> yang merupakan jenis yang diperlukan untuk view-transition-name. Tanpa attr(), Anda harus mendeklarasikan view-transition-name untuk setiap kartu, sedangkan sekarang Anda dapat melakukannya sekaligus.

<div class="cards">
  <div class="card" id="card-1"></div>
  <div class="card" id="card-2"></div>
  <div class="card" id="card-3"></div>
  <div class="card" id="card-4"></div>
</div>

.card {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, etc. */
  view-transition-class: card;
}

Anda juga dapat mengurai nilai menjadi panjang dengan menetapkan jenis ke ID apa pun yang cocok dengan unit dimensi CSS atau karakter %. Dalam contoh berikut, atribut data-size diuraikan menjadi nilai piksel.

<div data-size="10">test</div>

div {
  font-size: attr(data-size px);
}

Saat menggunakan attr() tanpa jenis apa pun, atribut akan diuraikan ke string CSS, yang sama dengan perilaku sebelumnya.

Pelajari Lebih Lanjut

Temukan informasi selengkapnya tentang attr() di spesifikasi dan di MDN.