वेबकिट में 'img` तत्व के लिए सीएसएस की सामग्री' संपत्ति कैसे काम करती है?

Question

बहुत समय पहले CSS3 जेनरेटेड कंटेंट स्पेक का एक मसौदा था जिसने content संपत्ति for any HTML element (न केवल :: :: छद्म-तत्वों के बाद/::) को खाली या प्रतिस्थापित तत्वों के लिए औपचारिक प्रतिबंध के बिना अनुमति दी थी। इसे एक बार ओपेरा प्रेस्टो (1, 2) और कम से कम कुछ हद तक वेबकिट (3) द्वारा समर्थित किया गया था। 2011 के अंत तक, content के लिए content के वेबकिट के कार्यान्वयन को प्रभावी रूप से इसे खाली स्थान से तत्व में बदलने के लिए span (यहां तक ​​कि इसके संदर्भ मेनू को बदल दिया गया है, 'छवि को इस रूप में सहेजें ...') जैसे विकल्पों को हटाया गया है। इसने img::before जैसे छद्म तत्वों को लागू करना भी संभव बना दिया।

वर्तमान ब्लिंक (क्रोम इत्यादि) कार्यान्वयन में, content संपत्ति img तत्व पर कोई प्रभाव नहीं पड़ता है। लेकिन img तत्व स्पष्ट रूप से अलग-अलग संरचना के आधार पर अलग-अलग संरचना है या नहीं: यदि लोड किया गया है, तो यह डीओएम इंस्पेक्टर द्वारा एक साधारण खाली तत्व के रूप में दिखाया गया है, लेकिन यदि टूटा हुआ है, तो यह आंतरिक छाया डोम संरचना को इस तरह प्रकट करता है:

<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; box-sizing: border-box; padding: 1px;"> 
    <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;"> 
    <div id="alttext" style="overflow: hidden; display: block;">Alt text</div> 
</div> 

शायद क्योंकि टूटा img छाया div रों की मदद से प्रदर्शित किया जाता है, यह इस मामले केवल (4) में इसे करने के लिए छद्म तत्वों को लागू करना संभव है।

वर्तमान वेबकिट img के लिए छद्म तत्वों का समर्थन नहीं करता है। लेकिन, दिलचस्प बात यह है कि कम से कम आईओएस 9.2.1 सफारी content संपत्ति img (5) के लिए संपत्ति सेट करने के बाद उनका समर्थन करना शुरू कर देती है।

यह संपत्ति इस तरह के परिवर्तन क्यों करती है? मुझे लगता है कि यदि एक खाली तत्व को कोई सामग्री (यहां तक ​​कि जेनरेट) मिलती है, तो ब्राउज़र को इस सामग्री को प्रदर्शित करने के लिए कुछ प्रदान करना होगा, किसी तत्व के साथ प्रभावी तत्व को प्रभावी रूप से बदलना होगा (जैसे ब्लिंक की छाया div id="alttext-container"), और इस कंटेनर में हो सकता है pseudos। क्या मै गलत हु? और यह व्यवहार नवीनतम वेबकिट संस्करणों से नहीं हटाया गया था?

Answer 1

The content property as defined in CSS 2.1 इस पर लागू होता है: पहले और: केवल छद्म तत्वों के बाद। सीएसएस नियमों से, आप किसी भी तत्व के लिए किसी भी संपत्ति को निर्दिष्ट कर सकते हैं, लेकिन विनिर्देशों की सीमाएं हैं जिन पर गुण "लागू होते हैं" (यानी, प्रभाव पड़ता है) विभिन्न तत्वों पर।

CSS3 Generated and Replaced Content Module, एक वर्किंग ड्राफ्ट, सभी संपत्तियों के लिए लागू होने वाली सामग्री संपत्ति का वर्णन करता है। इसमें एक छवि द्वारा एच 1 तत्व की सामग्री को बदलने का एक उदाहरण है, और निश्चित रूप से यह एक आईएमजी तत्व के लिए किया जा सकता है।

लेकिन यह सिर्फ एक कार्यरत ड्राफ्ट है। सीएसएस कार्यान्वयन की स्थिति, QuirksMode.org सीएसएस जानकारी और Caniuse.com पर सामान्य संसाधन, स्थिति का संकेत नहीं है; वे केवल सामग्री के समर्थन का वर्णन करते हैं: पहले और बाद में (जो आईई 7 और उससे पहले को छोड़कर सार्वभौमिक है।