HTML क्यों सोचता है कि "chucknorris" एक रंग है?

7485

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

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

स्निपेट का विस्तार करें

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

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

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

html browser background-color

— user456584
स्रोत

154

एक साइड नोट के रूप में: उपयोग न करें bgcolor। सीएसएस का उपयोग करें background।

— जॉन ड्वोरक

47

आप कभी भी पृष्ठभूमि का रंग क्यों जोड़ना चाहते हैं chucknorris? अपेक्षित रंग क्या था?

— मास्टर

106

@मास्टरली: मुझे नहीं पता कि स्वीकार किए गए उत्तर के तहत मेरी टिप्पणी "रचनात्मक नहीं" होने के लिए हटा दी गई थी, क्योंकि यह आपके प्रश्न का बहुत अच्छी तरह से उत्तर देता है: लोग हर समय इन चीजों के साथ प्रयोग करते हैं। मैं केवल 10 वर्ष का था जब मुझे यह पता चला और उस समय मैं जो कुछ कर रहा था वह चारों ओर गड़बड़ कर रहा था और यह देख रहा था कि क्या हुआ है। आपके पास हमेशा कुछ करने के लिए व्यावहारिक कारण नहीं होता है, विशेष रूप से कुछ इस तरह से तुच्छ के रूप में।

— BoltClock

49

और <body bgcolor="stevensegal">परीक्षण </ body> हरा है

— क्रिस

4

@BenDaggers एक और संपादन करने से पहले कृपया संशोधन इतिहास पढ़ें। सीएसएस टैग अप्रासंगिक है और पहले से ही दो बार हटा दिया गया है।

— ऑर्बिट

6876

यह नेटस्केप दिनों से एक पकड़ है:

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

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

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

सभी नॉनवैलिड हेक्साडेसिमल वर्णों को 0 के साथ बदलें
```
chucknorris becomes c00c0000000
```
3 (11 -> 12) द्वारा विभाज्य वर्णों की अगली कुल संख्या के लिए पैड
```
c00c 0000 0000
```
आरजीबी रंग के संबंधित रंग घटक का प्रतिनिधित्व करने वाले प्रत्येक घटक के साथ तीन समान समूहों में विभाजित करें:
```
RGB (c00c, 0000, 0000)
```
प्रत्येक तर्क को दाईं ओर से दो वर्णों तक काटें

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

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"एक पीला रंग क्यों उत्पन्न होता है ? ठीक है, अगर हम नियम लागू करते हैं, तो स्ट्रिंग है:

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

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

मैं मूल रूप से इसका सामना करता था जब कोई इंगित करता था कि आप कर सकते हैं color="crap"और, ठीक है, यह भूरा निकलता है।

— पानी का छींटा
स्रोत

174

ध्यान दें कि, के बावजूद कि ब्लॉग पोस्ट क्या कहते हैं, जब आप 3-चार तार से निपटने के लिए मिलता है, तो आप नकली यानी हर किरदार के बजाय 0. prepending से, 0F6हो जाता है #00FF66, नहीं #000F06।

— एरोन डुफूर

634

@usr: HTML जानबूझकर विकृत इनपुट को नजरअंदाज करते हुए बनाया गया है;)

— लिली

59

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

— टिमपीटरस्की

15

शब्दार्थ के लिए एक छिपा हुआ अवसर? आप इस के साथ कुछ त्रुटि पेज बना सकते हैं: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>आप एक एनोच बैकग्राउंड के साथ एक डिव या ऐसा कुछ जोड़ सकते हैं, तो ऐसा नहीं है कि सौंदर्यशास्त्र चौंकाने वाला है।

— थरोट

32

@ थरोट bgcolor="success"एक अच्छा हरा रंग है। दिलचस्प है, कोई सीएसएस विशेषता / मूल्य चयनकर्ताओं (जैसे, td[bgcolor="chucknorris"] {...}) का उपयोग करके इन रंगों को ओवरराइड कर सकता है ।

— डेसकोग

970

मैं असहमत हूं, लेकिन @Yhong नाव द्वारा पोस्ट की गई एक विरासत के रंग के मूल्य को पार्स करने के नियमों के अनुसार , chucknorrisयह समान नहीं है #CC0000, बल्कि #C00000लाल रंग की एक बहुत ही समान लेकिन थोड़ा अलग रंग है। मैंने इसे सत्यापित करने के लिए Firefox ColorZilla एड-ऑन का उपयोग किया ।

नियम राज्य:

स्ट्रिंग को एक लंबाई बनाओ जो 0 जोड़कर 3 का एक बहु है: chucknorris0
स्ट्रिंग को 3 बराबर लंबाई के तारों में अलग करें: chuc knor ris0
प्रत्येक स्ट्रिंग को 2 वर्णों में विभाजित करें: ch kn ri
हेक्स मान रखें, और आवश्यक होने पर 0 जोड़ें: C0 00 00

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

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

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

— जेरेमी गुडेल
स्रोत

86

मुझे यह समझ में आया, मैंने कुछ पार्सिंग निर्देशों की गलत व्याख्या की थी: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - बिल्कुल सही !!

— जेरेमी गुडेल

17

यदि आप रुचि रखते हैं, तो मैंने 5-चरण के एल्गोरिथ्म को UPDATE के रूप में एक समान प्रश्न पर पोस्ट किया था जिसे मैंने आज पोस्ट किया: stackoverflow.com/questions/12939234/…

— जेरेमी गुडेल

18

@TimPietrusky ने यादृच्छिक रंग नामों के लिए इस शानदार अविश्वसनीय टूल को बनाया। बस यहां जाएं: randomstringtocsscolor.com और बॉक्स में क्लिक करें और "chucknorris" टाइप करें।

— जेरेमी गुडेल

4

adamlevinejsfiddle.net/LdyZ8/2959 के अनुसार काम करता है, लेकिन अक्षरों को अवरुद्ध किया जाता है, ada00e000eजिसमें ada00e000e00लेकिन फिर [ad]a0[0e]00[0e]00उसी के ad0e0e में विशिष्ट HEX 6 अंकों के मूल्य को कम कर दिया जाता है जो ऊपर दिए गए jsfiddle में दिखाई देता है।

— मार्टिन

3

यह बेहतर होगा यदि इस उत्तर में केवल वर्तमान स्थिति शामिल है - इस उत्तर का इतिहास और अन्य उत्तर संपादित सारांश और / या टिप्पणियों में हैं।

— पीटर मोर्टेंसन

397

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

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

स्निपेट का विस्तार करें

— माइक क्रिस्टेंसन
स्रोत

7

हालांकि मैं अभी भी उत्सुक हूं कि ओपी ने "सीएसएस में" और "एचटीएमएल में" क्यों कहा - शायद वे एक सुपर पुराने ब्राउज़र का उपयोग कर रहे हैं, या गलत है?

— माइक क्रिस्टेन्सन

7

तो फिर वह पदावनत bgcolorविशेषता का उपयोग करने की संभावना से अधिक है ।

— animuson

12

अमान्य वर्णों को छोड़ नहीं दिया जाता है, उन्हें 0. मान लिया जाता है

— अपने मॉड का अच्छी तरह से इलाज करें

5

(यह उत्तर मृत क्यों हो सकता है) सुझाव: तेह रंगों को प्रदर्शित करने के बजाय पृष्ठभूमि रंग का उपयोग करें। पाठ का रंग इस तरह के एक छोटे से रिश्तेदार क्षेत्र से अधिक है, यह अंतर या समानता को देखने के लिए कठिन है

— झो

304

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

में chucknorris, सिवाय सब कुछ cएक वैध हेक्स मूल्य नहीं है।
तो यह रूपांतरित हो जाता है c00c00000000।
जो # सिंपल , रेड का शेड बन जाता है ।

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

PS कोष्ठक में संख्याएँ मेरे द्वारा परीक्षण किए गए ब्राउज़र संस्करण हैं।

।

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

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

— aWebDeveloper
स्रोत

295

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

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

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

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

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

तो असली परिणाम यह है:

bgcolor="#c00000";

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

— एलिरेज़ा
स्रोत

23

यह बहुत प्यारा विवरण है: D: D: D

— डोमिनिक Bucher

2

इतनी समझदारी और बहुत ही सरल और स्ट्रेप फॉरवर्ड स्पष्टीकरण मैंने कभी अनुभव किया है

— सौरिन वला

1

बहुत ही रचनात्मक जवाब :)

— ahmednawazbutt

222

WHATWG HTML कल्पना में विरासत का रंग मान पार्स करने के लिए सटीक एल्गोरिदम है: 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;
}

— युहोंग बाओ
स्रोत

धन्यवाद, आपने मुझे दिखाया कि पुराना नेटस्केप स्रोत कोड कहाँ है ... इसे ढूंढना इतना कठिन क्यों है?

— kb1000

202

उत्तर:

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

— Webeng
स्रोत

22

chucknorris c से शुरू होता है , और ब्राउज़र इसे एक हेक्साडेसिमल मान में पढ़ता है।

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

ब्राउज़र धर्मान्तरित chucknorris, हेक्साडेसिमल मान को C00C00000000।

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

C00C00000000 => R:C00C, G:0000, B:0000

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

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>

स्निपेट का विस्तार करें

— समान लखिष्ठा
स्रोत

15

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

अंतिम 8 को छोड़कर सभी वर्णों को छोड़ दें
प्रमुख शून्य को एक-एक करके छोड़ें जब तक कि सभी घटकों में एक अग्रणी शून्य हो
पहले 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>

स्निपेट का विस्तार करें

— सलमान ए
स्रोत