पब्लिश किया गया: 15 जनवरी, 2025
फिर से डिज़ाइन किया गया attr() फ़ंक्शन
सीएसएस 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 पर जाएं.