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




background-color (6)

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

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

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

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

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

https://code.i-harness.com


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 अनुवाद 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>


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

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

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

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

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

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


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

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

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

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

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

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


विरासत विशेषताओं पर रंगों को पार्स करने के नियमों में मौजूदा उत्तरों में उल्लिखित अतिरिक्त कदम शामिल हैं। 2 अंक भाग में छिड़काव घटक को इस प्रकार वर्णित किया गया है:

  1. पिछले 8 को छोड़कर सभी पात्रों को छोड़ दें
  2. प्रमुख शून्यों को एक-एक करके तब तक छोड़ दें जब तक कि सभी घटकों में अग्रणी शून्य न हो
  3. पहले 2 को छोड़कर सभी पात्रों को छोड़ दें

कुछ उदाहरण:

oooFoooFoooF
000F 000F 000F                <- replace, pad and chunk
0F 0F 0F                      <- leading zeros truncated
0F 0F 0F                      <- truncated to 2 characters from right

oooFooFFoFFF
000F 00FF 0FFF                <- replace, pad and chunk
00F 0FF FFF                   <- leading zeros truncated
00 0F FF                      <- truncated to 2 characters from right

ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- replace, pad and chunk
BC000000 BC000000 BC000000    <- truncated to 8 characters from left
BC BC BC                      <- truncated to 2 characters from right

AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- replace, pad and chunk
0C000000 0C000000 0C000000    <- truncated to 8 characters from left
C000000 C000000 C000000       <- leading zeros truncated
C0 C0 C0                      <- truncated to 2 characters from right

नीचे एल्गोरिदम का आंशिक कार्यान्वयन है। यह त्रुटियों या मामलों को संभाल नहीं करता है जहां उपयोगकर्ता वैध रंग में प्रवेश करता है।

function parseColor(input) {
  // todo: return error if input is ""
  input = input.trim();
  // todo: return error if input is "transparent"
  // todo: return corresponding #rrggbb if input is a named color
  // todo: return #rrggbb if input matches #rgb
  // todo: replace unicode code points greater than U+FFFF with 00
  if (input.length > 128) {
    input = input.slice(0, 128);
  }
  if (input.charAt(0) === "#") {
    input = input.slice(1);
  }
  input = input.replace(/[^0-9A-Fa-f]/g, "0");
  while (input.length === 0 || input.length % 3 > 0) {
    input += "0";
  }
  var r = input.slice(0, input.length / 3);
  var g = input.slice(input.length / 3, input.length * 2 / 3);
  var b = input.slice(input.length * 2 / 3);
  if (r.length > 8) {
    r = r.slice(-8);
    g = g.slice(-8);
    b = b.slice(-8);
  }
  while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") {
    r = r.slice(1);
    g = g.slice(1);
    b = b.slice(1);
  }
  if (r.length > 2) {
    r = r.slice(0, 2);
    g = g.slice(0, 2);
    b = b.slice(0, 2);
  }
  return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0");
}

$(function() {
  $("#input").on("change", function() {
    var input = $(this).val();
    var color = parseColor(input);
    var $cells = $("#result tbody td");
    $cells.eq(0).attr("bgcolor", input);
    $cells.eq(1).attr("bgcolor", color);

    var color1 = $cells.eq(0).css("background-color");
    var color2 = $cells.eq(1).css("background-color");
    $cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1);
    $cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2);
  });
});
body { font: medium monospace; }
input { width: 20em; }
table { table-layout: fixed; width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<p><input id="input" placeholder="Enter color e.g. chucknorris"></p>
<table id="result">
  <thead>
    <tr>
      <th>Left Color</th>
      <th>Right Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>


उत्तर:

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




background-color