पब्लिश होने की तारीख: 15 जनवरी, 2025
सीएसएस attr() की मदद से, सीएसएस में एचटीएमएल एट्रिब्यूट की वैल्यू का इस्तेमाल किया जा सकता है. अब तक attr(), सिर्फ़ छद्म-तत्वों की content प्रॉपर्टी में काम करता था. साथ ही, यह सिर्फ़ वैल्यू को सीएसएस <string> में पार्स कर सकता था.
Chrome 133 में उपलब्ध, फिर से डिज़ाइन किए गए attr() फ़ंक्शन से ज़्यादा सुविधाएं मिलती हैं. अब attr() का इस्तेमाल, कस्टम प्रॉपर्टी के साथ-साथ किसी भी सीएसएस प्रॉपर्टी के साथ किया जा सकता है. साथ ही, यह वैल्यू को <string> के अलावा अन्य डेटा टाइप में पार्स कर सकता है.
उदाहरण
यहां दिए गए उदाहरण में, div के लिए color प्रॉपर्टी की वैल्यू, data-color एट्रिब्यूट की वैल्यू का इस्तेमाल करती है. इस एट्रिब्यूट की वैल्यू को attr() और type() का इस्तेमाल करके, <color> में पार्स किया जाता है. फ़ॉलबैक वैल्यू को red पर सेट किया जाता है.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
यहां दिए गए उदाहरण में, view-transition-name प्रॉपर्टी की वैल्यू, एलिमेंट के id एट्रिब्यूट से तय होती है. इस एट्रिब्यूट को <custom-ident> में पार्स किया जाता है. यह view-transition-name के लिए ज़रूरी टाइप है. attr() के बिना, आपको हर कार्ड के लिए view-transition-name का एलान करना पड़ता था. हालांकि, अब ऐसा एक ही बार में किया जा सकता है.
<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;
}
टाइप को ऐसे किसी आइडेंटिफ़ायर पर सेट करके भी वैल्यू को लंबाई में पार्स किया जा सकता है जो सीएसएस डाइमेंशन यूनिट या % वर्ण से मेल खाता हो. इस उदाहरण में, data-size एट्रिब्यूट को पिक्सल वैल्यू में पार्स किया गया है.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
attr() का इस्तेमाल बिना किसी टाइप के करने पर, यह एट्रिब्यूट को सीएसएस स्ट्रिंग में पार्स करता है. यह पहले की तरह ही काम करता है.
ज़्यादा जानें
attr() के बारे में ज़्यादा जानकारी, स्पेसिफ़िकेशन और MDN पर पाएं.