CSS attr() işlevi yenilendi

Bramus

Yayın tarihi: 15 Ocak 2025

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

Chrome 133'ten itibaren kullanılabilen yeniden tasarlanmış attr() işlevi, daha fazla özelliği kullanmanızı sağlar. Artık attr() öğesini özel özellikler de dahil olmak üzere tüm CSS özellikleriyle birlikte kullanabilir ve değerleri <string> dışındaki veri türlerine ayrıştırabilirsiniz.

Örnekler

Aşağıdaki örnekte, div için color özelliğinin 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 ayarlanır.

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

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

Sonraki örnekte, view-transition-name özelliği, öğenin id özelliği tarafından belirlenir. Özellik, view-transition-name için gerekli tür olan <custom-ident> olarak ayrıştırılır. attr() olmadan her kart için bir view-transition-name beyan etmeniz gerekiyordu. 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;
}

Ayrıca, türü bir CSS boyut birimiyle veya % karakteriyle eşleşen herhangi bir tanımlayıcıya ayarlayarak değerleri uzunluk olarak da ayrıştırabilirsiniz. Aşağıdaki örnekte, data-size özelliği 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, özelliği CSS dizesine ayrıştırır. Bu, önceki davranışla aynıdır.

Daha fazla bilgi

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