22 Mart 2025

CSS attr() İçin Yeni Yetkinlikler

CSS

CSS attr() Fonksiyonu

CSS gelişmeye, JavaScript'ten rol çalmaya devam ediyor. CSS'te attr() fonksiyonu, eskiden her zaman bir string döndürdüğü için, sadece content özelliğinde veya bazı özel metin efektlerinde kullanılabiliyordu.

div::after {
  content: attr(data-title); 
}

Örneğin, data-number="10" gibi bir değer tanımlasanız bile, CSS içinde bu değeri gerçek bir sayı olarak kullanamazsınız. Aynı şekilde, data-size="3rem" gibi bir değer de CSS tarafından gerçek bir uzunluk birimi olarak algılanmazdı.

Artık bu mümkün. Tek yapmanız gereken, hangi türde bir değer kullanacağınızı belirtmek.

attr(<attr-name> <attr-type>? , <fallback-value>?)

fallback-value değeri, özelliğin değeri yoksa kullanılacak olan değerdir, zorunlu alan değil.

div {
  font-size: attr(data-font-size type(<length>));
  grid-column-start: attr(data-column-start type(<integer>));

  /* data-color özelliği yoksa, black değerini alır. */
  color: attr(data-color type(<color>), black);
}

Geçerli Türler

<angle>
<color>
<custom-ident>
<image>
<integer>
<length>
<length-percentage>
<number>
<percentage>
<resolution>
<string>
<time>
<transform-function>
<url>

Kullanım Örneği

<div data-rotation="-3"> -3 derece çevrildim</div>
<div data-rotation="2">ve ben 2 derece</div>
<div>ben ise 1.5 derecelik yedek değeri kullanıyorum</div>

div {
  width: fit-content;
  transform-origin: 50% 50%;
  rotate: attr(data-rotation deg, 1.5deg);
}

Misal buradaki kodda CSS rotate özelliğini attr() fonksiyonu ile kullanıyoruz. data-rotation özelliği yoksa, varsayılan olarak 1.5deg değeri kullanılacak.

Çıktısı şu şekilde görünecek:

CSS attr() Fonksiyonu

CodePen kurucu ortağı Chris Coyier'ın konu ile ilgili bir kaç örneği mevcut.

attr() özelliği ile çeşitli örnekleri inceleyebilirsiniz:

CSS attr() desteği

Şimdilik sadece Chrome ve Chromium tabanlı olan Edge tarayıcılarında destekleniyor.

Mobil tarayıcılar içinde durum aynı, sadece Android Browser ve Android Chrome'da destekleniyor.

CSS attr() Fonksiyonu

Yazının kapak görseli yapay zeka tarafından üretilmiştir. 🤖

Kaynaklar