सीएसएस: कुछ तत्वों में सामग्री नहीं जोड़ने के बाद

Question

मुझे CSS :afterसंपत्ति के व्यवहार को समझने में परेशानी हो रही है। युक्ति के अनुसार ( यहां और यहां ):

जैसा कि उनके नाम इंगित करते हैं, :beforeऔर :afterछद्म तत्व तत्व के दस्तावेज़ के पेड़ की सामग्री से पहले और बाद में सामग्री का स्थान निर्दिष्ट करते हैं।

यह उन प्रतिबंधों को रखने के लिए प्रतीत नहीं होता है जिन पर तत्वों की संपत्ति :after(या :before) हो सकती है। हालांकि, यह केवल विशिष्ट तत्वों के साथ काम करने लगता है ... <p>काम करता है, <img>नहीं <input>करता है, नहीं <table>करता है। मैं और अधिक परीक्षण कर सकता हूं, लेकिन बिंदु बना हुआ है। ध्यान दें कि यह ब्राउज़र में बहुत सुसंगत लगता है। क्या निर्धारित करता है कि कोई वस्तु एक :beforeऔर :afterसंपत्ति को स्वीकार कर सकती है या नहीं ?

Answer 1

imgऔर inputदोनों प्रतिस्थापित तत्व हैं ।

एक प्रतिस्थापित तत्व वह तत्व है जिसका स्वरूप और आयाम बाहरी संसाधन द्वारा परिभाषित किया जाता है। उदाहरण छवियों (शामिल <img>टैग), प्लगइन्स ( <object>टैग), और फार्म तत्वों ( <button>, <textarea>, <input>, और <select>टैग)। अन्य सभी तत्वों के प्रकारों को गैर-प्रतिस्थापित तत्वों के रूप में संदर्भित किया जा सकता है।

:beforeऔर :afterकेवल गैर-प्रतिस्थापित तत्वों के साथ काम करते हैं।

से कल्पना :

ध्यान दें। यह विनिर्देश पूरी तरह से :beforeऔर :afterबदले हुए तत्वों (जैसे कि HTML में IMG) के साथ बातचीत को परिभाषित नहीं करता है । भविष्य के विनिर्देश में इसे और अधिक विस्तार से परिभाषित किया जाएगा।

इसके साथ span:before, span:after, DOM इस तरह दिखता है:

<span><before></before>Content of span<after></after></span>

जाहिर है, यह साथ काम नहीं करेगा <img src="" />।

Comments

"जेनरेट की गई सामग्री दस्तावेज़ ट्री में परिवर्तन नहीं करती है।" इसलिए मुझे आश्चर्य होगा कि क्या आप <before></before>स्रोत में " " जैसा कुछ पा सकते हैं ।

— Knu

@ कुन्नू: आप सही कह रहे हैं, मैंने इसे खराब तरीके से समझाया। तुम कभी नहीं पाओगे <before></before>। मुझे कहा जाना चाहिए "दिखावा डोम" या कुछ और। बिंदु यह दिखाना था कि तत्व के अंदर हैं :beforeऔर :afterइसके बाहर नहीं हैं।

— तीसहट

नहीं, वे छाया DOM में संग्रहीत नहीं हैं।

— टूल

कल्पना उद्धृत है कि कहना नहीं है :beforeऔर :afterप्रतिस्थापित तत्वों लिए काम नहीं करते; यह सिर्फ यह कहता है कि यह "पूरी तरह से" परिभाषित नहीं करता है कि कैसे और यह भविष्य में परिभाषित किया जाएगा (जो अब तक नहीं हुआ है)। DOM में जो होता है वह यहाँ अप्रासंगिक है। हालांकि ब्राउज़र कुछ तत्वों के लिए इन छद्म तत्वों का समर्थन नहीं करते हैं, यह ऐनक में नहीं है, बस कार्यान्वयन क्या करते हैं।

— जुक्का के। कोर्पेला

मैं तार्किक स्पष्टीकरण पर विचार करता था ::beforeऔर शून्य (खाली) तत्व के ::afterलिए काम नहीं करता था , जिसमें वास्तविक सामग्री कभी नहीं होती है, जिसके पहले / बाद में वे आवेदन कर सकते थे। लेकिन आश्चर्यजनक रूप से, वे लगभग सभी ब्राउज़रों में तत्व के लिए काम करते हैं। hr

— इल्या स्ट्रेलित्सिन

Answer 2

:beforeऔर प्रतिस्थापित तत्वों के लिए काम करने की आवश्यकता:after नहीं है , और सीएसएस विनिर्देशों निर्दिष्ट नहीं करते हैं कि वे उनके लिए कैसे काम करेंगे, और प्रतिस्थापित तत्व की अवधारणा कुछ अस्पष्ट है।

CSS 2.1 विनिर्देश स्पष्ट रूप से बताता है कि वे प्रतिस्थापित तत्वों के लिए काम कर सकते हैं, बस यह कह सकते हैं कि यह "पूरी तरह से" कैसे परिभाषित नहीं करता है। यह इस मुद्दे से संबंधित है कि एक बदले हुए तत्व की अपनी दृश्य रेंडरिंग होने की उम्मीद है, जिसे सीएसएस द्वारा नियंत्रित नहीं किया जाता है, जबकि छद्म तत्वों को तत्व की सामग्री में कुछ जोड़ना चाहिए। यह सुनिश्चित करता है कि इसे भविष्य के विनिर्देशन में "अधिक विस्तार से" परिभाषित किया जाएगा, लेकिन यह अभी तक नहीं हुआ है।

ब्राउज़र विक्रेताओं ने बस कुछ तत्वों के लिए इन छद्म तत्वों को लागू नहीं करने से समस्याओं से बचने का फैसला किया।

यह बिल्कुल स्पष्ट नहीं है कि "प्रतिस्थापित तत्व" का क्या अर्थ है, और अर्थ कुछ हद तक बदल गया है। इसे अक्सर अर्थ के रूप में खाली तत्व ( EMPTYघोषित सामग्री के साथ एक तत्व , यानी एक तत्व जिसमें कोई भी सामग्री नहीं हो सकती है) के रूप में व्याख्या की जाती है , लेकिन CSS 2.1 ही चयनकर्ता के साथ एक नमूना शैली पत्रक दिखाता है br:before(हालांकि ब्राउज़रों ने इसे अनदेखा किया है, brअपने स्वयं के कार्यान्वयन को मार्ग)। यह तर्क दिया जा सकता है कि अधिक से अधिक तत्व कम से कम भाग में सीएसएस प्रतिपादन के दायरे में चले गए हैं। उदाहरण के लिए, inputआधुनिक ब्राउज़रों में सीएसएस के साथ एक तत्व (इसके फ़ॉन्ट, रंगों आदि को शामिल करना) काफी हद तक नियंत्रण योग्य है।

मौजूदा ब्राउज़र (Firefox, IE, क्रोम) का समर्थन नहीं हैं :afterऔर :beforeअन्य की तुलना में खाली तत्वों के लिए छद्म तत्वों hr। hrIE के लिए , IE और Chrome एक बॉर्डर वाले बॉक्स के अंदर जेनरेट की गई सामग्री को रखते हैं, जिसे लागू करना है hr; सामग्री बॉक्स को लंबा बनाती है। फ़ायरफ़ॉक्स क्षैतिज नियम है कि इसके कार्यान्वयन के बाद दोनों (!) छद्म तत्वों की सामग्री रखता है hr। यह भिन्नता CSS 2.1 में संदर्भित "इंटरैक्शन" समस्याओं के प्रकार को दर्शाती है।

अक्सर यह दावा किया जाता है कि इन छद्म तत्वों का उपयोग खाली तत्वों के लिए नहीं किया जा सकता है क्योंकि उनकी HTML परिभाषाएं किसी भी सामग्री की अनुमति नहीं देती हैं। यह एक श्रेणी त्रुटि है। एक मार्कअप भाषा के वाक्यविन्यास नियम सीएसएस में आप क्या कर सकते हैं प्रतिबंधित नहीं करते हैं

निष्कर्ष निकालने के लिए, :afterऔर :beforeवर्तमान में खाली तत्वों के लिए उपयोग करने योग्य नहीं है (मामूली रूप से छोड़कर hr), लेकिन यह मुख्य रूप से कार्यान्वयन के कारण है और भविष्य में बदल सकता है।

Answer 3

जिन तत्वों में क्लोजिंग टैग नहीं है वे शून्य तत्व हैं और वे उनके अंदर सामग्री प्रदर्शित नहीं कर सकते हैं:

https://www.w3.org/TR/html5/syntax.html#void-elements

सभी ब्लिंक, वेबकिट और क्वांटम ब्राउज़र आपको चेकबॉक्स पर केवल छद्म तत्व बनाने की अनुमति देते हैं लेकिन यह विवादास्पद है क्योंकि कोई भी कल्पना इस व्यवहार की अनुमति नहीं देती है।

यहाँ एक उदाहरण: https://codepen.io/equinusocio/pen/BOBaEM/

input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}

Comments

यह सभी ब्राउज़र में काम नहीं करेगा ... और कोई विनिर्देश नहीं है जो कहता है कि अब हम कर सकते हैं .. यदि आपके पास एक है तो कृपया इसे साझा करें क्योंकि इनपुट के साथ छद्म तत्व पर विचार करना सुरक्षित नहीं है

— Temani Afif

यह IE को छोड़कर सभी ब्राउज़रों में काम करता है। यहां तक ​​कि फ्लेक्सबॉक्स IE 9 द्वारा समर्थित नहीं है इसलिए समस्या कहां है। यह समाधान सभी ब्लिंक, वेबकिट और क्वांटम ब्राउज़रों पर काम करता है और उन लोगों के लिए बहुत उपयोगी हो सकता है जो इलेक्ट्रॉन जैसे वेबकिट-केवल पर्यावरण पर काम करते हैं।

— मटिया एस्टोरिनो

जैसे आपने अपने उत्तर में कहा था, इसके लिए कोई युक्ति नहीं है, इसलिए एक दिन यह काम करना बंद कर सकता है। यह एकमात्र ऐसी चीज नहीं है जो किसी भी परिभाषित के बिना व्यवहार करती है और काम करती है लेकिन हमें कभी भी उन पर भरोसा नहीं करना चाहिए और कहना चाहिए कि वे काम करते हैं। यह मोटे टैग की तरह है, वे अभी भी काम करते हैं लेकिन हमें उनका उपयोग करना बंद कर देना चाहिए क्योंकि एक दिन वे नहीं करेंगे। तो हाँ यह लोगों के लिए उपयोगी हो सकता है और मेरी टिप्पणी लोगों को चेतावनी देने के लिए भी उपयोगी है कि उन्हें इस बात की जानकारी होनी चाहिए कि यह आधिकारिक नहीं है।

— तमनी अफीफ