{"id":32134,"date":"2025-10-18T04:40:54","date_gmt":"2025-10-18T01:40:54","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32134"},"modified":"2025-10-18T04:40:54","modified_gmt":"2025-10-18T01:40:54","slug":"css-attr-fonksiyonu-ozellik-degerlerini-stillerinize-entegre-etmenin-gucu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-attr-fonksiyonu-ozellik-degerlerini-stillerinize-entegre-etmenin-gucu\/","title":{"rendered":"CSS attr() Fonksiyonu: \u00d6zellik De\u011ferlerini Stillerinize Entegre Etmenin G\u00fcc\u00fc"},"content":{"rendered":"

<\/p>\n

CSS attr() Fonksiyonu: \u00d6zellik De\u011ferlerini Stillerinize Entegre Etmenin G\u00fcc\u00fc<\/h2>\n

Web geli\u015ftirme d\u00fcnyas\u0131nda, HTML ve CSS, i\u00e7eri\u011fi yap\u0131land\u0131rmak ve stil vermek i\u00e7in bir araya gelen iki temel dildir. Genellikle HTML i\u00e7eri\u011fi sunarken, CSS bu i\u00e7eri\u011fin nas\u0131l g\u00f6r\u00fcnece\u011fini tan\u0131mlar. Ancak bazen, HTML \u00f6\u011felerinin sahip oldu\u011fu dinamik bilgilere (\u00f6zellikler arac\u0131l\u0131\u011f\u0131yla) CSS i\u00e7inde do\u011frudan eri\u015fmek ve bu bilgilere g\u00f6re stil uygulamak isteriz. \u0130\u015fte tam bu noktada CSS attr()<\/code> fonksiyonu devreye girer. Bu makale, attr()<\/code> fonksiyonunun ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, evrimini, mevcut yeteneklerini ve pratik uygulamalar\u0131n\u0131 derinlemesine inceleyecektir.<\/p>\n

Giri\u015f: HTML \u00d6zellikleri ve CSS Aras\u0131ndaki K\u00f6pr\u00fc<\/h3>\n

HTML \u00f6\u011feleri, davran\u0131\u015flar\u0131n\u0131 veya g\u00f6r\u00fcn\u00fcmlerini de\u011fi\u015ftiren \u00f6zelliklere (attributes) sahiptir. \u00d6rne\u011fin, bir <\/code> etiketi href<\/code> \u00f6zelli\u011fine, bir <\/code> etiketi src<\/code> ve alt<\/code> \u00f6zelliklerine, veya herhangi bir \u00f6\u011fe \u00f6zel data-*<\/code> \u00f6zelliklerine sahip olabilir. Geleneksel olarak, bu \u00f6zellik de\u011ferlerini CSS i\u00e7inde kullanmak olduk\u00e7a s\u0131n\u0131rl\u0131yd\u0131. Genellikle bu t\u00fcr dinamik verileri CSS’e ta\u015f\u0131mak i\u00e7in JavaScript kullanmak gerekirdi. Ancak attr()<\/code> fonksiyonu, bu k\u0131s\u0131tlamay\u0131 a\u015farak HTML \u00f6zellik de\u011ferlerini do\u011frudan CSS’e entegre etme yetene\u011fi sunar.<\/p>\n

Ba\u015flang\u0131\u00e7ta, attr()<\/code> fonksiyonu yaln\u0131zca content<\/code> \u00f6zelli\u011fi ile birlikte kullan\u0131lmak \u00fczere tasarlanm\u0131\u015ft\u0131, bu da onun yeteneklerini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde k\u0131s\u0131tl\u0131yordu. Ancak “CSS Values and Units Module Level 4” spesifikasyonu ile birlikte, attr()<\/code> fonksiyonu \u00f6nemli \u00f6l\u00e7\u00fcde geni\u015fletildi ve art\u0131k neredeyse t\u00fcm CSS \u00f6zellikleriyle kullan\u0131labilir hale geldi. Bu geni\u015fleme, web geli\u015ftiricileri i\u00e7in yeni ve g\u00fc\u00e7l\u00fc dinamik stil uygulama olanaklar\u0131n\u0131n kap\u0131lar\u0131n\u0131 aralad\u0131.<\/p>\n

Temel Kullan\u0131m ve S\u00f6z Dizimi<\/h3>\n

attr()<\/code> fonksiyonunun temel amac\u0131, bir HTML \u00f6\u011fesinin belirli bir \u00f6zelli\u011finin de\u011ferini almakt\u0131r. En basit haliyle s\u00f6z dizimi \u015fu \u015fekildedir:<\/p>\n

attr(attribute-name)<\/code><\/pre>\n
Burada attribute-name<\/code>, de\u011feri al\u0131nacak HTML \u00f6zelli\u011finin ad\u0131d\u0131r (\u00f6rne\u011fin, href<\/code>, title<\/code>, data-tooltip<\/code>).<\/p>\n
content<\/code> \u00d6zelli\u011fi ile Klasik Kullan\u0131m<\/h4>\n
attr()<\/code> fonksiyonunun en yayg\u0131n ve eski kullan\u0131m alan\u0131, ::before<\/code> veya ::after<\/code> s\u00f6zde \u00f6\u011felerinin content<\/code> \u00f6zelli\u011fi ile birlikte \u00e7al\u0131\u015fmas\u0131d\u0131r. Bu, genellikle bir \u00f6\u011fenin metin i\u00e7eri\u011fini veya di\u011fer \u00f6zelliklerini g\u00f6rsel olarak g\u00f6r\u00fcnt\u00fclemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\u00d6rnek:<\/strong> Bir ba\u011flant\u0131n\u0131n href<\/code> de\u011ferini g\u00f6stermek:<\/p>\n
Ziyaret Et<\/a><\/code><\/pre>\n
a::after {\n  content: \" (\" attr(href) \")\";\n  font-size: 0.8em;\n  color: gray;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, her ba\u011flant\u0131n\u0131n arkas\u0131na, href<\/code> \u00f6zelli\u011finin de\u011feri parantez i\u00e7inde eklenecektir. data-info<\/code> gibi \u00f6zel \u00f6zellikler de ayn\u0131 \u015fekilde kullan\u0131labilir:<\/p>\n
a[data-info]::before {\n  content: attr(data-info) \": \";\n  font-weight: bold;\n}<\/code><\/pre>\n
Bu kullan\u0131m, attr()<\/code>‘nin temel i\u015flevselli\u011fini g\u00f6sterir: HTML’deki metinsel bir de\u011feri al\u0131p CSS’e dahil etmek. Ancak, attr()<\/code>‘nin yetenekleri bununla s\u0131n\u0131rl\u0131 de\u011fildir.<\/p>\n
attr()<\/code> Fonksiyonunun Evrimi ve Mevcut Durumu<\/h3>\n
Uzun y\u0131llar boyunca attr()<\/code> fonksiyonu, yaln\u0131zca content<\/code> \u00f6zelli\u011fi i\u00e7in \u00e7al\u0131\u015fan bir ara\u00e7 olarak bilindi. Bu durum, geli\u015ftiricilerin HTML \u00f6zelliklerindeki say\u0131sal de\u011ferleri (geni\u015flik, y\u00fckseklik), renk de\u011ferlerini veya di\u011fer birim tabanl\u0131 de\u011ferleri CSS’te do\u011frudan kullanmas\u0131n\u0131 engelliyordu. E\u011fer bir \u00f6\u011fenin data-width=\"100\"<\/code> gibi bir \u00f6zelli\u011fi varsa, bunu width: attr(data-width);<\/code> \u015feklinde kullanmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda genellikle i\u015fe yaramazd\u0131 \u00e7\u00fcnk\u00fc attr()<\/code> varsay\u0131lan olarak bir “string” (metin dizisi) d\u00f6nd\u00fcr\u00fcr ve width<\/code> \u00f6zelli\u011fi bir “length” (uzunluk) de\u011feri bekler.<\/p>\n
“CSS Values and Units Module Level 4” spesifikasyonu, bu k\u0131s\u0131tlamay\u0131 ortadan kald\u0131rarak attr()<\/code> fonksiyonunu \u00f6nemli \u00f6l\u00e7\u00fcde g\u00fc\u00e7lendirdi. Bu spesifikasyon ile attr()<\/code>, art\u0131k herhangi bir CSS \u00f6zelli\u011fi i\u00e7in kullan\u0131labilir hale geldi ve d\u00f6nd\u00fcr\u00fclecek de\u011ferin tipini belirtme yetene\u011fi kazand\u0131. Bu, bir HTML \u00f6zelli\u011findeki de\u011feri bir say\u0131, bir uzunluk, bir renk veya ba\u015fka bir CSS veri tipi olarak yorumlamas\u0131na olanak tan\u0131r.<\/p>\n
Bu geni\u015fleme, attr()<\/code>‘yi sadece metin g\u00f6sterme arac\u0131ndan, HTML’deki dinamik verileri kullanarak stil olu\u015fturma i\u00e7in \u00e7ok daha g\u00fc\u00e7l\u00fc ve esnek bir araca d\u00f6n\u00fc\u015ft\u00fcrd\u00fc. Ancak bu geni\u015fletilmi\u015f kullan\u0131m\u0131n taray\u0131c\u0131 deste\u011fi, eski content<\/code> kullan\u0131m\u0131na k\u0131yasla daha yeni ve de\u011fi\u015fkendir. Makalenin ilerleyen b\u00f6l\u00fcmlerinde taray\u0131c\u0131 deste\u011fi detaylar\u0131na de\u011finece\u011fiz.<\/p>\n
attr()<\/code> ile Hangi \u00d6zellikler Kullan\u0131labilir?<\/h3>\n
Geni\u015fletilmi\u015f attr()<\/code> fonksiyonu ile art\u0131k neredeyse t\u00fcm CSS \u00f6zelliklerinde HTML \u00f6zellik de\u011ferlerini kullanabiliriz. Ancak, d\u00f6nd\u00fcr\u00fclen de\u011ferin tipi ile CSS \u00f6zelli\u011finin bekledi\u011fi de\u011fer tipinin e\u015fle\u015fmesi veya uyumlu olmas\u0131 kritik \u00f6neme sahiptir.<\/p>\n
Metinsel De\u011ferler (String)<\/h4>\n
*   content<\/code><\/strong>: En temel ve yayg\u0131n kullan\u0131m.<\/p>\n
div::before {\n      content: attr(data-label);\n    }<\/code><\/pre>\n
*   font-family<\/code><\/strong>: E\u011fer bir HTML \u00f6zelli\u011fi font ailesi ad\u0131n\u0131 i\u00e7eriyorsa.<\/p>\n
p {\n      font-family: attr(data-font-family string, sans-serif);\n    }<\/code><\/pre>\n
Say\u0131sal De\u011ferler (Number, Integer, Percentage)<\/h4>\n
*   opacity<\/code><\/strong>:<\/p>\n
<\/div><\/code><\/pre>\n
div {\n      opacity: attr(data-opacity number, 1);\n    }<\/code><\/pre>\n
*   z-index<\/code><\/strong>:<\/p>\n
<\/div><\/code><\/pre>\n
div {\n      z-index: attr(data-z integer, 1);\n    }<\/code><\/pre>\n
*   flex-grow<\/code>, flex-shrink<\/code><\/strong>:<\/p>\n
<\/div><\/code><\/pre>\n
div {\n      flex-grow: attr(data-grow number, 1);\n    }<\/code><\/pre>\n
Uzunluk De\u011ferleri (Length)<\/h4>\n
*   width<\/code>, height<\/code>, margin<\/code>, padding<\/code>, font-size<\/code>, line-height<\/code><\/strong>: Bu t\u00fcr \u00f6zellikler genellikle birim (px, em, rem, %) gerektirir.<\/p>\n
<\/div><\/code><\/pre>\n
div {\n      width: attr(data-width length, 100px);\n      font-size: attr(data-font-size length, 1em);\n    }<\/code><\/pre>\n
Renk De\u011ferleri (Color)<\/h4>\n
*   color<\/code>, background-color<\/code>, border-color<\/code><\/strong>: HTML \u00f6zelli\u011finde bir renk kodu (hex, rgb, rgba, hsl, renk ad\u0131) tutuluyorsa.<\/p>\n
Merhaba<\/span><\/code><\/pre>\n
span {\n      color: attr(data-text-color color, black);\n      background-color: attr(data-bg-color color, white);\n    }<\/code><\/pre>\n
URL De\u011ferleri (URL)<\/h4>\n
*   background-image<\/code>, cursor<\/code><\/strong>:<\/p>\n
<\/div><\/code><\/pre>\n
div {\n      background-image: attr(data-image-url url, none);\n    }<\/code><\/pre>\n
    (Not: url()<\/code> fonksiyonunun kendisi attribute’ta olmal\u0131, yoksa attr(data-image-url string)<\/code> ile string al\u0131n\u0131p, background-image: url(attr(data-image-url string));<\/code> \u015feklinde kullan\u0131lmal\u0131, ki bu da url()<\/code> i\u00e7ine attr()<\/code> fonksiyonunun string d\u00f6nd\u00fcrmesi nedeniyle taray\u0131c\u0131 deste\u011fi konusunda sorunlar \u00e7\u0131karabilir. En g\u00fcvenlisi data-image-url=\"bg.png\"<\/code> \u015feklinde olup, CSS’te background-image: url(attr(data-image-url string));<\/code> kullanmakt\u0131r, ancak bu da standarda tam uygun olmayabilir. En iyisi attr(data-image-url url)<\/code> kullan\u0131p, HTML’de data-image-url=\"bg.png\"<\/code> \u015feklinde URL’nin kendisini vermektir. url()<\/code> fonksiyonunu attribute’un i\u00e7ine yazmak daha sa\u011flamd\u0131r.)<\/em>
\n    Do\u011fru kullan\u0131m:<\/p>\n
<\/div><\/code><\/pre>\n
div {\n      background-image: url(attr(data-image-url string)); \/ String olarak al\u0131p url() i\u00e7ine <\/em>\/\n    }<\/code><\/pre>\n
    Veya (e\u011fer destekleniyorsa):<\/p>\n
<\/div><\/code><\/pre>\n
div {\n      background-image: attr(data-image-url url); \/ Do\u011frudan URL tipinde almay\u0131 dener <\/em>\/\n    }<\/code><\/pre>\n
    \u0130kinci y\u00f6ntem, attr()<\/code> fonksiyonunun bir URL de\u011feri d\u00f6nd\u00fcrmesini bekler, bu da HTML \u00f6zelli\u011finin url(...)<\/code> format\u0131nda olmas\u0131n\u0131 gerektirebilir. \u0130lk y\u00f6ntem daha yayg\u0131n ve uyumludur.<\/p>\n
Di\u011fer De\u011fer Tipleri<\/h4>\n
*   angle<\/code>, time<\/code>, frequency<\/code>, resolution<\/code><\/strong>: Bu tipler de teorik olarak desteklenir ancak pratikte daha az kullan\u0131l\u0131r. \u00d6rne\u011fin, transform: rotate(attr(data-angle angle));<\/code>.
\n*   identifier<\/code><\/strong>: CSS anahtar kelimeleri i\u00e7in, \u00f6rne\u011fin text-align: attr(data-align identifier, left);<\/code><\/p>\n
Geli\u015fmi\u015f Kullan\u0131m ve <\/code> Parametresi<\/h3>\n
attr()<\/code> fonksiyonunun geni\u015fletilmi\u015f yeteneklerinin temelinde, d\u00f6nd\u00fcr\u00fclecek de\u011ferin tipini belirten <\/code> parametresi yatar. Bu parametre, taray\u0131c\u0131ya HTML \u00f6zelli\u011findeki metin de\u011ferini belirli bir CSS veri tipi olarak yorumlamas\u0131 talimat\u0131n\u0131 verir.<\/p>\n
S\u00f6z dizimi:<\/p>\n
attr(attribute-name )<\/code><\/pre>\n
Neden <\/code> parametresi bu kadar \u00f6nemli?<\/strong>
\nCSS \u00f6zellikleri belirli t\u00fcrde de\u011ferler bekler. \u00d6rne\u011fin, width<\/code> bir uzunluk (length) de\u011feri beklerken, color<\/code> bir renk (color) de\u011feri bekler. Bir HTML \u00f6zelli\u011fi genellikle metin (string) olarak saklan\u0131r. E\u011fer data-width=\"100px\"<\/code> \u015feklinde bir \u00f6zelli\u011finiz varsa ve bunu width: attr(data-width);<\/code> olarak kullan\u0131rsan\u0131z, attr()<\/code> varsay\u0131lan olarak “100px” metin dizisini d\u00f6nd\u00fcr\u00fcr. width<\/code> \u00f6zelli\u011fi bir metin dizisi kabul etmedi\u011fi i\u00e7in bu stil uygulanmaz.<\/p>\n
<\/code> parametresini kullanarak, taray\u0131c\u0131ya “100px” metnini bir uzunluk de\u011feri olarak i\u015flemesini s\u00f6yleyebiliriz: width: attr(data-width length);<\/code>. Bu durumda, taray\u0131c\u0131 “100px” metnini alacak, onu bir CSS uzunluk birimine d\u00f6n\u00fc\u015ft\u00fcrecek ve width<\/code> \u00f6zelli\u011fine uygulayacakt\u0131r.<\/p>\n
Kullan\u0131labilir <\/code> de\u011ferleri:<\/strong><\/p>\n
*   string<\/code><\/strong>: Varsay\u0131lan de\u011ferdir. Metin dizisi d\u00f6nd\u00fcr\u00fcr. (content<\/code> i\u00e7in ideal)
\n*   url<\/code><\/strong>: Bir URL de\u011feri d\u00f6nd\u00fcr\u00fcr.
\n*   identifier<\/code><\/strong>: Bir CSS anahtar kelimesi d\u00f6nd\u00fcr\u00fcr (\u00f6rn. left<\/code>, right<\/code>, block<\/code>, none<\/code>).
\n*   length<\/code><\/strong>: Uzunluk birimi (\u00f6rn. px<\/code>, em<\/code>, rem<\/code>, %<\/code>, vw<\/code>, vh<\/code>).
\n*   angle<\/code><\/strong>: A\u00e7\u0131 birimi (\u00f6rn. deg<\/code>, rad<\/code>, grad<\/code>).
\n*   time<\/code><\/strong>: Zaman birimi (\u00f6rn. s<\/code>, ms<\/code>).
\n*   frequency<\/code><\/strong>: Frekans birimi (\u00f6rn. Hz<\/code>, kHz<\/code>).
\n*   number<\/code><\/strong>: Ondal\u0131kl\u0131 say\u0131 (birimsiz).
\n*   integer<\/code><\/strong>: Tam say\u0131 (birimsiz).
\n*   percentage<\/code><\/strong>: Y\u00fczde de\u011feri (birimsiz, %<\/code> i\u015fareti HTML \u00f6zelli\u011finde olmal\u0131 veya calc()<\/code> ile kullan\u0131lmal\u0131).
\n*   color<\/code><\/strong>: Renk de\u011feri (\u00f6rn. red<\/code>, #FF0000<\/code>, rgb(255,0,0)<\/code>).
\n*   resolution<\/code><\/strong>: \u00c7\u00f6z\u00fcn\u00fcrl\u00fck birimi (\u00f6rn. dpi<\/code>, dpcm<\/code>).<\/p>\n
\u00d6rnekler:<\/strong><\/p>\n
\n  Dinamik Kutu\n<\/div><\/code><\/pre>\n
.box {\n  width: attr(data-width length);\n  height: attr(data-height length);\n  background-color: attr(data-bg-color color);\n  transform: rotate(attr(data-rotation angle));\n  border: 1px solid black;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, width<\/code>, height<\/code>, background-color<\/code> ve transform<\/code> gibi farkl\u0131 CSS \u00f6zelliklerine, HTML’deki data-*<\/code> \u00f6zelliklerinden al\u0131nan de\u011ferler, do\u011fru tipler belirtilerek uygulanm\u0131\u015ft\u0131r.<\/p>\n
Yedek De\u011ferler (<\/code>)<\/h3>\n
attr()<\/code> fonksiyonunun bir di\u011fer kullan\u0131\u015fl\u0131 \u00f6zelli\u011fi, bir yedek de\u011fer (fallback value<\/code>) belirtme yetene\u011fidir. Bu yedek de\u011fer, a\u015fa\u011f\u0131daki durumlarda kullan\u0131l\u0131r:<\/p>\n
1.  Belirtilen attribute-name<\/code>‘e sahip bir \u00f6zellik \u00f6\u011fede yoksa.
\n2.  \u00d6zelli\u011fin de\u011feri bo\u015fsa.
\n3.  \u00d6zelli\u011fin de\u011feri, belirtilen <\/code>‘a d\u00f6n\u00fc\u015ft\u00fcr\u00fclemiyorsa (yani ge\u00e7ersiz bir de\u011ferse).<\/p>\n
S\u00f6z dizimi:<\/p>\n
attr(attribute-name  )<\/code><\/pre>\n
E\u011fer <\/code> belirtilmezse (yani string<\/code> varsay\u0131l\u0131rsa), yedek de\u011fer sadece \u00f6zelli\u011fin bulunmamas\u0131 veya bo\u015f olmas\u0131 durumunda kullan\u0131l\u0131r.<\/p>\n
\u00d6rnekler:<\/strong><\/p>\n