Az attr() függvény használatával HTML elem attribútumok értékét kérhetjük le és jeleníthetjük meg CSS-ből a ::before, ::after pseudo-elemek segítségével.
A függvény használatakor mindig az éppen kijelölt elem tulajdonságaihoz férünk hozzá. A lekért érték lehet hagyományos tulajdonság, mint a href, vagy egy egyedi data-* attribútum is.
Jelenleg csak arra használható, hogy pseudo-elemekben jelenítsük meg az adatokat. Két darab hétköznapi használati eset van, amit érdemes megemlíteni.
URL megjelenítése nyomtatási nézetben
Ha valamit nyomtatni akarsz egy weboldalról a hivatkozások problémát okozhatnak. Alapvetően papíron maximum csak egy aláhúzást fogjunk látni, ahol a link van. Hogy mi az értéke az jó kérdés lesz, pedig hasznos lehet.
@media print {
a[href]::after {
content: " (" attr(href) ")";
}
}Ezt a problémát az attr() függvénnyel egyszerűen orvosolhatjuk. Hogy használhatóbb legyen a nyomtatási nézet, annyit kell tennünk csupán, hogy az <a> tagek href értékét kiíratjuk a ::after elemre.
Egyszerű tooltip megoldás
Ha egy nagyon egyszerű tooltip megoldást szeretnénk, csak CSS segítségével, akkor az attr() függvény megint csak a segítségedre lehet. A használatával könnyedén jeleníthetünk meg hover állapotra plusz információt szintén a pseudo-elemekben.
See the Pen Pure CSS Tooltip by Adam Laki (@adamlaki) on CodePen.
Értelemszerűen ez egy nagyon egyszerű megoldás, sokat ne várjunk tőle, bizonyos szituációkban hasznos lehet.
Az attr() függvény jövője
Az új CSS specifikáció szerint az attr() már többet tud, azonban ennek a támogatása nem túl nagy, mivel még nem ajánlás.
attr( <attr-name> <type-or-unit>? [, <attr-fallback> ]? )Az első paraméter a név, a második az egység, ami azt jelenti, hogy különböző értékeket kaphatunk vissza, mint a szín, hosszúság, számok. Ez azzal együtt lesz hasznos, hogy minden CSS tulajdonságon használhatjuk majd (tehát egy szöveg szín értéket lekérhetünk HTML-ből) nem csak a ::before és ::after elemen.
További információért az attr() függvényről kérlek keresd fel az MDN oldalát!
