एचटीएमएल 5

Question

में स्टाइल कस्टम तत्व मैं एक ऑरेलिया प्रोजेक्ट बना रहा हूं और अपने विचारों के लिए कस्टम-तत्वों का उपयोग कर रहा हूं। मैंने पढ़ा है कि कस्टम तत्वों का उपयोग करने के लिए यह बेहतर अभ्यास है क्योंकि वे जिस क्षेत्र में रहते हैं, लेकिन मुझे शक है कि उन्हें सही तरीके से कैसे शैलीबद्ध किया जाए।

उदाहरण के लिए कस्टम-तत्व भरने के लिए पृष्ठभूमि-रंग प्राप्त करने के लिए, मुझे इसे display:block बनाना होगा। यह बहुत सारे तत्वों के लिए किया जाना चाहिए।

div { 
 
    background-color:green; 
 
} 
 

 
div:first-child customelement { 
 
    display:block; 
 
} 
 

 
customelement { 
 
    background-color:blue; 
 
}

<div> 
 
    <customelement> 
 
    <h1>test</h1> 
 
    </customelement> 
 
</div> 
 

 
<div> 
 
    <customelement> 
 
    <h1>test</h1> 
 
    </customelement> 
 
</div>

वहाँ यह सब कस्टम तत्वों के लिए सामान्य बनाने के लिए एक आसान तरीका है? शायद हर गैर मौजूदा एचटीएमएल 5 तत्व को लक्षित करने के लिए कोई एससीएसएस विधि?

Answer 1

डिफ़ॉल्ट रूप से HTML कस्टम तत्व span के समान undefined element के रूप में परिभाषित किए गए हैं। undefined element जो ब्राउज़र ने पहले कभी नहीं देखा है, उनके पास कोई डिफ़ॉल्ट उपयोगकर्ता एजेंट स्टाइल नहीं है और उन्हें विरासत मान दिए जाएंगे और उन्हें inline तत्व के रूप में देखा जाएगा जो कि सभी तत्वों के लिए डिफ़ॉल्ट है, जब उपयोगकर्ता एजेंट स्टाइलशीट इसे ओवरराइड करता है W3C अनुशंसित डिफ़ॉल्ट के अनुरूप।

आपका एकमात्र विकल्प वास्तव में आपके सीएसएस शैली के शीर्ष पर सभी तत्वों को block स्तर तत्व के रूप में परिभाषित करना है।

customelement, customelement2 { 
 
    display: block; 
 
} 
 
div { 
 
    background-color:green; 
 
} 
 

 
customelement { 
 
    background-color:blue; 
 
} 
 

 
customelement2 { 
 
    background-color: red; 
 
} 
 

<div> 
 
    <h1>Not Custom 
 
</div> 
 
<div> 
 
    <customelement> 
 
    <h1>Custom Element</h1> 
 
    </customelement> 
 
</div> 
 

 
<div> 
 
    <customelement2> 
 
    <h1>Custom Element 2</h1> 
 
    </customelement2> 
 
</div>

आप अधिक here (W3C Custom elements) पढ़ सकते हैं और विशेष रूप से 3 पैरा

स्क्रिप्ट लोड कर रहा है, वहीं img-viewer तत्व एक अपरिभाषित तत्व के रूप में माना जाएगा में इस लाइन, समान कर सकते हैं span पर।