html - एचटीएमएल क्यों सोचता है "चकनोरिस" एक रंग है?




background-color (9)

चकनोरिस सी के साथ आँकड़े है जो ब्राउज़र को हेक्साडेसिमल मान में पढ़ा जाता है।

क्योंकि ए, बी, सी, डी, ई, एफ हेक्साडेसिमल में वर्ण हैं

ब्राउजर c00c00000000 हेक्साडेसिमल मान में परिवर्तित हो c00c00000000

फिर c00c00000000 हेक्साडेसिमल मान आरजीबी प्रारूप में परिवर्तित (3 से विभाजित)

c00c00000000 => R:c00c,G:0000,B:0000

रंग को इंगित करने के लिए ब्राउजर को केवल 2 अंक चाहिए।

R:c00c,G:0000,B:0000 => R:c0,G:00,B:00 => सी c00000

अंत में, वेब ब्राउज़र में bgcolor = c00000 दिखाएं।

यहां एक उदाहरण दिखा रहा है

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="10" width="150" align="center">chucknorris</td>
    <td bgcolor="c00c00000000" cellpadding="10" width="150" align="center">c00c00000000</td>
    <td bgcolor="c00000" cellpadding="10" width="150" align="center">c00000</td>
  </tr>
</table>

एचटीएमएल में पृष्ठभूमि रंग के रूप में दर्ज किए जाने पर कुछ यादृच्छिक तार रंग कैसे उत्पन्न करते हैं? उदाहरण के लिए:

<body bgcolor="chucknorris"> test </body>

... सभी ब्राउज़रों और प्लेटफार्मों में एक लाल पृष्ठभूमि के साथ एक दस्तावेज़ का उत्पादन करता है।

दिलचस्प बात यह है कि, जबकि chucknorri लाल पृष्ठभूमि भी उत्पन्न करता है, chucknorr पीले रंग की पृष्ठभूमि का उत्पादन करता है।

यहाँ क्या चल रहा है?


WHATWG HTML spec में एक विरासत रंग मान पार्स करने के लिए सटीक एल्गोरिदम है: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

रंग स्ट्रिंग पार्सिंग के लिए प्रयुक्त नेटस्केप क्लासिक ओपन सोर्स है: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

उदाहरण के लिए, ध्यान दें कि प्रत्येक वर्ण को हेक्स अंकों के रूप में पार्स किया जाता है और फिर अतिप्रवाह की जांच किए बिना 32-बिट पूर्णांक में स्थानांतरित किया जाता है। केवल आठ हेक्स अंक 32-बिट पूर्णांक में फिट होते हैं, यही कारण है कि केवल अंतिम 8 वर्णों पर विचार किया जाता है। हेक्स अंकों को 32-बिट पूर्णांक में पार्स करने के बाद, उन्हें 8-बिट पूर्णांक में 16 तक विभाजित करके तब तक विभाजित किया जाता है जब तक कि वे 8-बिट में फिट न हों, यही कारण है कि अग्रणी शून्य को अनदेखा किया जाता है।

अपडेट करें: यह कोड बिल्कुल सटीक रूप से मेल नहीं खाता है, लेकिन केवल अंतर में कोड की कुछ पंक्तियां हैं। मुझे लगता है कि ये लाइनें जोड़ी गई थीं (नेटस्केप 4 में):

if (bytes_per_val > 4)
{
      bytes_per_val = 4;
}

कारण यह है कि ब्राउजर इसे समझ नहीं सकता है और इसे किसी भी तरह से इसका अनुवाद करने की कोशिश कर सकता है जो इसे समझ सकता है और इस मामले में हेक्साडेसिमल मान में ...!

chucknorris c साथ शुरू होता है जो हेक्साडेसिमल में चरित्र पहचाना जाता है, यह भी सभी अपरिचित पात्रों को 0 में परिवर्तित कर रहा है!

तो हेक्साडेसिमल प्रारूप में c00c00000000 बन जाता है: c00c00000000 , अन्य सभी वर्ण 0 हो जाते हैं और c रहता है जहां वे हैं ...

अब वे RGB (लाल, हरा, नीला) के लिए 3 से विभाजित हो जाते हैं ... R: c00c, G: 0000, B:0000 ...

लेकिन हम जानते हैं कि आरजीबी के लिए वैध हेक्साडेसिमल केवल 2 अक्षर हैं, मतलब R: c0, G: 00, B:00

तो वास्तविक परिणाम यह है:

bgcolor="#c00000";

मैंने त्वरित संदर्भ के रूप में छवि में चरणों को भी जोड़ा:


ब्राउजर chucknorris को हेक्स रंग कोड में बदलने की कोशिश कर रहा है, क्योंकि यह मान्य मान नहीं है।

  1. chucknorris , c को छोड़कर सब कुछ वैध हेक्स मान नहीं है।
  2. तो यह c00c00000000 परिवर्तित हो जाता है।
  3. जो # सी 00000 , लाल रंग की छाया बन जाती है।

ऐसा लगता है कि मुख्य रूप से इंटरनेट एक्सप्लोरर और ओपेरा (12) के साथ एक मुद्दा है क्योंकि क्रोम (31) और फ़ायरफ़ॉक्स (26) दोनों ही इसे अनदेखा करते हैं।

पीएस ब्रैकेट्स में संख्याएं ब्राउज़र संस्करण हैं जिन पर मैंने परीक्षण किया था।

एक हल्का नोट पर

चक नॉरिस वेब मानकों के अनुरूप नहीं है। वेब मानकों के अनुरूप है। # BADA55


अधिकतर ब्राउज़र आपके रंग स्ट्रिंग में किसी भी गैर-हेक्स मानों को अनदेखा कर देंगे, जो शून्य के साथ गैर-हेक्स अंकों को प्रतिस्थापित कर देगा।

ChuCknorris अनुवाद c00c0000000 । इस बिंदु पर, ब्राउज़र स्ट्रिंग को तीन बराबर खंडों में विभाजित करेगा, जो लाल , हरे और नीले मानों को c00c 0000 0000 करता है: c00c 0000 0000 । प्रत्येक खंड में अतिरिक्त बिट्स को अनदेखा कर दिया जाएगा, जो अंतिम परिणाम #c00000 बनाता #c00000 जो एक लाल रंग है।

नोट, यह सीएसएस रंग पार्सिंग पर लागू नहीं होता है, जो सीएसएस मानक का पालन करता है।

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>


यह नेटस्केप दिनों से एक होल्डओवर है:

गुम अंकों को 0 के रूप में माना जाता है [...]। एक गलत अंक को 0 के रूप में आसानी से व्याख्या किया जाता है। उदाहरण के लिए मान # F0F0F0, F0F0F0, F0F0F, #FxFxFx और FxFxFx सभी समान हैं।

यह ब्लॉग पोस्ट से है माइक्रोसॉफ़्ट इंटरनेट एक्सप्लोरर के कलर पार्सिंग के बारे में थोड़ा सा रेंट जो इसे बहुत विस्तार से कवर करता है, जिसमें रंग मूल्यों की अलग-अलग लंबाई इत्यादि शामिल हैं।

यदि हम ब्लॉग पोस्ट से बदले नियम लागू करते हैं, तो हमें निम्नलिखित मिलते हैं:

  1. सभी nonvalid हेक्साडेसिमल वर्णों को 0 के साथ बदलें

    chucknorris becomes c00c0000000
    
  2. 3 (11 -> 12) द्वारा विभाजित अक्षरों की अगली कुल संख्या में पैड करें

    c00c 0000 0000
    
  3. एक आरजीबी रंग के संबंधित रंग घटक का प्रतिनिधित्व करने वाले प्रत्येक घटक के साथ तीन बराबर समूहों में विभाजित करें:

    RGB (c00c, 0000, 0000)
    
  4. दाएं से दो अक्षर तक प्रत्येक तर्क को मिटा दें

जो निम्नलिखित परिणाम देता है:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

इस "अद्भुत" रंग स्वैच का उत्पादन करने के लिए, कार्रवाई में bgcolor विशेषता का प्रदर्शन करने वाला एक उदाहरण यहां दिया गया है:

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

यह प्रश्न के दूसरे भाग का भी उत्तर देता है; bgcolor="chucknorr" पीले रंग का रंग क्यों bgcolor="chucknorr" ? खैर, अगर हम नियम लागू करते हैं, तो स्ट्रिंग है:

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

जो एक हल्का पीला सोना रंग देता है। चूंकि स्ट्रिंग 9 वर्णों के रूप में शुरू होती है, इसलिए हम इस बार दूसरी सी को रखते हैं, इसलिए यह अंतिम रंग मान में समाप्त होता है।

मुझे मूल रूप से इसका सामना करना पड़ा जब किसी ने बताया कि आप color="crap" कर सकते हैं और, ठीक है, यह ब्राउन से बाहर आता है।


उत्तर:

  • ब्राउजर चकनोरिस को हेक्साडेसिमल मान में बदलने की कोशिश करेगा।
  • चूंकि c c00c00000000 में एकमात्र वैध हेक्स चरित्र है, इसलिए मान बदल जाता है: c00c00000000 ( 0 सभी मानों के लिए अमान्य थे )।
  • ब्राउज़र तब परिणाम को 3 समूह में विभाजित करता है: Red = c00c , Green = 0000 , Blue = 0000
  • चूंकि एचटीएमएल पृष्ठभूमि के लिए वैध हेक्स मानों में केवल प्रत्येक रंग प्रकार ( आर , जी , बी ) के लिए 2 अंक होते हैं, इसलिए पिछले 2 अंकों को प्रत्येक समूह से छोटा कर दिया जाता है, जिससे सी c00000 का आरजीबी मान c00000 जो एक ईंट-रेडडिश टोन रंग होता है।

मुझे असहमत होने के लिए खेद है, लेकिन @ युहोंग बाओ द्वारा पोस्ट किए गए एक विरासत रंग मूल्य को पार्स करने के नियमों के #CC0000 , #CC0000 बराबर नहीं है, बल्कि #C00000 बजाय, लाल रंग का एक बहुत ही समान लेकिन थोड़ा अलग रंग है। मैंने इसे सत्यापित करने के लिए फ़ायरफ़ॉक्स ColorZilla ऐड-ऑन का उपयोग किया।

नियम बताते हैं:

  • स्ट्रिंग को एक लम्बाई बनाएं जो 0s जोड़कर 3 से अधिक हो: chucknorris0
  • स्ट्रिंग को 3 बराबर लंबाई तारों में अलग करें: chuc knor ris0
  • प्रत्येक स्ट्रिंग को दो अक्षरों में छोटा करें: ch kn ri
  • हेक्स मान रखें, और जहां आवश्यक हो 0 जोड़ें: C0 00 00

मैं निम्नलिखित नियमों की सही व्याख्या करने के लिए इन नियमों का उपयोग करने में सक्षम था:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

अद्यतन: मूल उत्तरदाताओं जिन्होंने रंग कहा था #CC0000 ने बाद में सुधारों को शामिल करने के लिए अपने उत्तरों को संपादित किया है।


अंत टैग वाले तत्वों को खाली टैग के रूप में जाना जाता है। एचटीएमएल 4 और एचटीएमएल 5 में, अंत टैग की आवश्यकता नहीं है और छोड़ा जा सकता है।

एक्सएचटीएमएल में, टैग बहुत सख्त हैं। इसका मतलब है कि स्टार्ट टैग से शुरू होना चाहिए और एंड टैग के साथ अंत करना चाहिए।





html background-color