क्रोम और सीएसएस विशेषता चयनकर्ता

Question

मेरे पास निम्न HTML कोड है, जहां मैं सीएसएस को डेटा प्रारूप (xml से आ रहा है) के साथ प्रारूपित करना चाहता हूं जिसे बदला नहीं जा सकता है।

मुझे अलग-अलग विशेषता मान वाले तत्वों को अलग-अलग शैलियों को देना होगा। मैंने सीएसएस विशेषता चयनकर्ता का उपयोग करने के लिए सोचा।

body { 
    background-color: black 
} 
s { 
    text-decoration: none 
} 
f { 
    color: black; 
    text-decoration: none; 
    display: block; 
} 
f[type=h2] { 
    color: green 
} 
f[type=p] { 
    color: blue 
} 
f[type=speech] { 
    color: yellow 
} 
f[type=other] { 
    color: gray 
} 

<b> 
    <s> 
    <f type="h2">Title</f> 
    <f type="p">Paragraph</f> 
    <f type="speech">Dialgoue</f> 
    <f type="other" br="true">Other</f> 
    <f type="p">Paragraph</f> 
    <f type="p">Paragraph</f> 
    </s> 
</b> 

के रूप में मैं उम्मीद Firefox में पृष्ठ प्रदान की गई है (h2 हरे रंग में, p नीले रंग में, speech में yelllow और ग्रे में अन्य)। क्रोम में सब कुछ हरा है।

क्रोम में फ़ायरफ़ॉक्स परिणाम कैसे प्राप्त कर सकता हूं?

Answer 1

किसी अज्ञात कारण के लिए, क्रोम HTML टैग्स पर सख्त है, इस प्रकार सीएसएस नियम उस ब्राउज़र में अच्छी तरह से काम नहीं करेगा।

हालांकि एक सुझाव, आप style the XML क्यों नहीं करते?

Answer 2

बदलने attr नाम से आपको मदद मिलेगी, andi क्यों

 <f custom="p">Paragraph</f> 
     <f custom="speech">Dialgoue</f> 
     <f custom="other" br="true">Other</f> 
     <f custom="p">Paragraph</f> 
     <f custom="p">Paragraph</f> 


    <style type="text/css"> 
     f[custom=h2] { 
      color: green; 
     } 
     f[custom=p] { 
      color: blue; 
     } 
     f[custom=speech] { 
      color: yellow; 
     } 
     f[custom=other] { 
      color: gray; 
     } 
    </style> 

Answer 3

आपका HTML मान्य नहीं है पता नहीं है। यदि आप इसे वैधकर्ता के माध्यम से चलाते हैं तो यह त्रुटियों को थकाता है क्योंकि इसे नामित एम्बेडेड XML टैग पसंद नहीं हैं।

HTML/XML Task Force Report के अनुसार:

एक HTML5 पार्सर अपरिचित मार्कअप का सामना करना पड़ता है, यह मान लिया गया है कि इस तरह के मार्कअप एक गलत अच्छी तरह से परिभाषित एचटीएमएल 5 उत्पन्न करने के लिए प्रयास है। नतीजतन, यह त्रुटि सुधार रणनीतियों को लागू करता है जिसके परिणामस्वरूप एक डोम प्रतिनिधित्व होता है जो कि डीओएम से मूल रूप से भिन्न हो सकता है जो एक एक्सएमएल पार्सर उत्पन्न होता। विशेष रूप से, खुले तत्व समय से समाप्त हो सकते हैं और अतिरिक्त तत्व खोले जा सकते हैं।

व्यावहारिक परिणाम यह है कि एक एचटीएमएल 5 दस्तावेज़ में एक "नग्न" एक्सएमएल द्वीप विश्वसनीय रूप से डीओएम जैसा दिखता है जो एक्सएमएल द्वीप के आकस्मिक निरीक्षण से अपेक्षा करता है।

तो क्रोम यहां स्क्रू करने के अपने अधिकारों के भीतर है, 'तकनीकी रूप से आपने इसे पहले किया था। ध्यान दें कि कैसे (मेरे क्रोम ब्राउज़र में) all the elements are green (http://jsfiddle.net/qJMWg/) - जो बताता है कि किसी कारण से कि वे सभी <f type="h2"> तत्व में घोंसला रखते हैं। यह ध्यान में है क्योंकि एचटीएमएल में <b> और <s> टैग शामिल है, इसलिए <f> यह पहला अमान्य है जिसे वह सामना करता है।

If we change the styles for that f\[type=h2\] rule (http://jsfiddle.net/qJMWg/1/) यह सब कुछ प्रभावित करता है - जो इस विचार के अनुरूप है कि क्रोम इस XML संरचना को गलत तरीके से व्याख्या कर रहा है। क्रोम के सीएसएस इंजन के लिए (डेवलपर टूल हमें क्या बता रहा है) यह किसी भी तरह दिखता है:

<b> 
     <s> 
     <f type="h2">Title&lt;/f&gt; 
     &lt;f type="p"&gt;Paragraph&lt;/f&gt; 
     &lt;f type="speech"&gt;Dialgoue&lt;/f&gt; 
     &lt;f type="other" br="true"&gt;Other&lt;/f&gt; 
     &lt;f type="p"&gt;Paragraph&lt;/f&gt; 
     &lt;f type="p"&gt;Paragraph</f> 
     </s> 
    </b>