CSS attr() işlevi yenilendi

Bramus

Yayınlanma tarihi: 15 Ocak 2025

Yeniden tasarlanmış attr() işlevi

CSS attr() ile CSS'nizde bir HTML özelliğinin değerini kullanabilirsiniz. attr() şimdiye kadar yalnızca sözde öğelerin content mülkü içinde çalışıyordu ve değerleri yalnızca CSS <string> olarak ayrıştırabiliyordu.

Chrome 133'ten itibaren kullanılabilen yeniden tasarlanmış attr() işlevi daha fazla özelliğin kilidini açar. Artık attr()'ü özel özellikler dahil herhangi bir CSS özelliğiyle kullanabilirsiniz. Ayrıca, değerleri <string> dışındaki veri türlerine ayrıştırabilir.

Örnekler

Aşağıdaki örnekte, div için color mülkünün değeri data-color özelliğindeki değeri kullanır. Bu özellik değeri, attr() ve type() kullanılarak <color> olarak ayrıştırılır. Yedek değer red olarak ayarlanmıştır.

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

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

Bir sonraki örnekte view-transition-name özelliği, öğenin id özelliğine göre belirlenir. Özellik, view-transition-name için zorunlu tür olan bir <custom-ident> olarak ayrıştırılır. attr() olmadan her kart için bir view-transition-name belirtmeniz gerekirken artık bunu tek seferde yapabilirsiniz.

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

Türü, CSS boyut birimi veya % karakteriyle eşleşen herhangi bir tanımlayıcıya ayarlayarak da değerleri uzunluk olarak ayrıştırabilirsiniz. Aşağıdaki örnekte data-size özelliği bir piksel değerine ayrıştırılır.

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

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

attr() herhangi bir tür olmadan kullanıldığında, özellik önceki davranışla aynı şekilde bir CSS dizesi olarak ayrıştırılır.

Daha Fazla Bilgi

attr() hakkında daha fazla bilgiyi spesifikasyonda ve MDN'de bulabilirsiniz.