it-swarm.asia

لماذا تعتقد HTML أن "chucknorris" لون؟

كيف تأتي بعض السلاسل العشوائية لإنتاج ألوان عند إدخالها كألوان خلفية في HTML؟ فمثلا:

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

... ينتج وثيقة ذات خلفية حمراء عبر جميع المتصفحات والأنظمة الأساسية.

ومن المثير للاهتمام ، في حين أن chucknorri ينتج خلفية حمراء أيضًا ، فإن chucknorr ينتج خلفية صفراء.

ماذا يجري هنا؟

6985
user456584

إنها فترة توقف منذ أيام نتسكيب:

تعامل الأرقام المفقودة على أنها 0 [...]. يتم تفسير الأرقام غير الصحيحة ببساطة على أنها 0. على سبيل المثال ، القيم # F0F0F0 و F0F0F0 و F0F0F و # FxFxFx و FxFxFx كلها متماثلة.

إنه من منشور المدونةتمشدق قليلاً حول تحليل الألوان في Microsoft Internet Explorerالذي يغطيها بتفصيل كبير ، بما في ذلك أطوال مختلفة من قيم الألوان ، إلخ.

إذا طبقنا القواعد بدورها من منشور المدونة ، فسنحصل على ما يلي:

  1. استبدال جميع الأحرف السداسية عشرية غير القيمة بـ 0

    chucknorris becomes c00c0000000
    
  2. اسحب إلى العدد الإجمالي التالي من الأحرف قابلة للقسمة على 3 (11 -> 12)

    c00c 0000 0000
    
  3. انقسم إلى ثلاث مجموعات متساوية ، حيث يمثل كل مكون مكون اللون المقابل بلون RGB:

    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" لونًا أصفر؟ حسنًا ، إذا طبقنا القواعد ، تكون السلسلة هي:

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

الذي يعطي لون الذهب الأصفر الفاتح. عندما تبدأ السلسلة بـ 9 أحرف ، نحتفظ بالثانية C هذه المرة ومن ثم ينتهي بها الأمر في قيمة اللون النهائية.

لقد واجهت هذا الأمر في الأصل عندما أشار شخص ما إلى أنه يمكنك القيام بـ color="crap" ، وكذلك ، يظهر اللون بني.

6440
dash

نأسف لعدم الموافقة ، لكن وفقًا لقواعد تحليل قيمة اللون القديمة التي نشرها @ Yuhong Bao ، chucknorrisلا تساوي #CC0000 ، ولكن بدلاً من #C00000 ، تشبه إلى حد كبير ü رمز__ ، ولكنها مختلفة تمامًا عن اللون الأحمر. لقد استخدمت Firefox ColorZilla الوظيفة الإضافية للتحقق من ذلك.

تنص القواعد:

  • اجعل السلسلة بطول مضاعف 3 بإضافة 0s: chucknorris0
  • فصل السلسلة إلى 3 سلاسل متساوية الطول: chuc knor ris0
  • اقتطاع كل سلسلة إلى حرفين: ch kn ri
  • احتفظ بقيم ست عشرية ، وأضف 0 عند الضرورة: C0 00 00

تمكنت من استخدام هذه القواعد لتفسير السلاسل التالية بشكل صحيح:

  • LuckyCharmsname__
  • Luckname__
  • LuckBeALadyname__
  • LuckBeALadyTonightname__
  • GangnamStylename__

استكمال: قام المستجيبون الأصليون الذين قالوا إن اللون هو #CC0000 منذ ذلك الحين بتحرير إجاباتهم لتشمل التصحيح.

890
Jeremy Goodell

ستتجاهل معظم المتصفحات ببساطة أي قيم غير عرافة في سلسلة الألوان الخاصة بك ، مع استبدال الأرقام غير السداسية بالأصفار.

ChuCknorris يترجم إلى c00c0000000. في هذه المرحلة ، سيقسم المستعرض السلسلة إلى ثلاثة أقسام متساوية ، تشير إلى الأحمر ، الأخضر و الأزرق القيم: c00c 0000 0000. سيتم تجاهل البتات الزائدة في كل قسم ، مما يجعل النتيجة النهائية #c00000 بلون أحمر.

لاحظ أن هذا لا ينطبق على تحليل ألوان CSS ، والذي يتبع معيار CSS.

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

يحاول المستعرض تحويل chucknorris إلى رمز لون سداسي عشرية ، لأنه ليس قيمة صالحة.

  1. في chucknorris ، كل شيء ما عداcليس قيمة ست عشرية صالحة.
  2. لذلك يتم تحويلها إلىc00c00000000.
  3. الذي يصبح # c00000 ، ظل أحمر.

يبدو أن هذه مشكلة في المقام الأول مع Internet Explorer و Opera (12) حيث يتجاهل كل من Chrome (31) و Firefox (26) هذا.

P.S. الأرقام الموجودة بين قوسين هي إصدارات المتصفح التي اختبرتها.

.

على مذكرة أخف وزنا

تشاك نوريس لا يتوافق مع معايير الويب. معايير الويب تتفق معه. # BADA55

265
aWebDeveloper

تتضمن مواصفات WHATWG HTML الخوارزمية الدقيقة لتحليل قيمة اللون القديمة: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

الشفرة Netscape Classic المستخدمة في تحليل سلاسل الألوان مفتوحة المصدر: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

على سبيل المثال ، لاحظ أن كل حرف يتم تحليله كرقم سداسي عشرية ثم يتم تحويله إلى عدد صحيح 32 بت دون التحقق من تجاوز السعة . فقط ثمانية أرقام سداسية عشرية تتناسب مع عدد صحيح 32 بت ، وهذا هو السبب في اعتبار فقط 8 أحرف الأخيرة. بعد تحليل أرقام ست عشرية في أعداد صحيحة 32 بت ، يتم اقتطاعها بعد ذلك إلى أعداد صحيحة 8 بت بتقسيمها على 16 حتى يتم احتواؤها إلى 8 بت ، ولهذا السبب يتم تجاهل الأصفار البادئة.

تحديث: لا يتطابق هذا الرمز تمامًا مع ما تم تعريفه في المواصفات ، لكن الفرق الوحيد هو وجود بضعة أسطر من التعليمات البرمجية. أعتقد أنه تم إضافة هذه السطور (في Netscape 4):

if (bytes_per_val > 4)
{
      bytes_per_val = 4;
}
206
Yuhong Bao

السبب هو أن المستعرض يمكنه لا يفهم أنه ومحاولة ترجمته بطريقة أو بأخرى إلى ما يمكن أن يفهمه وفي هذه الحالة إلى قيمة ست عشرية! ...

chucknorris يبدأ بـ c وهو حرف معترف به بالسداسي عشري ، كما أنه يحول جميع الأحرف غير المعترف بها إلى 0!

بحيث يصبح chucknorris بالتنسيق الست عشري: c00c00000000 ، تصبح جميع الأحرف الأخرى 0 ويبقى c حيث تكون ...

الآن يتم تقسيمها على 3 لـ RGB (الأحمر والأخضر والأزرق) ... R: c00c, G: 0000, B:0000...

لكننا نعرف أن الرقم السداسي العشري لـ RGB هو مجرد حرفين ، يعني R: c0, G: 00, B:00

وبالتالي فإن النتيجة الحقيقية هي:

bgcolor="#c00000";

لقد أضفت أيضًا خطوات الصورة كمرجع سريع:

 Why does HTML think “chucknorris” is a color?

195
Alireza

إجابة:

  • سيحاول المستعرض تحويل chucknorris إلى قيمة ست عشرية.
  • نظرًا لأن c هو الحرف السداسي العشري الوحيد الصالح في chucknorris ، تتحول القيمة إلى: c00c00000000 ( 0 لجميع القيم التي كانت غير صالحة ).
  • ثم يقسم المتصفح النتيجة إلى 3 مجموعات: Red = c00c ، Green = 0000 ، Blue = 0000.
  • نظرًا لأن قيم ست عشرية صالحة لخلفيات html تحتوي فقط على رقمين لكل نوع من أنواع الألوان ( r ، g ، b ) ، يتم اقتطاع آخر رقمين من كل مجموعة ، مما يترك قيمة rgb بقيمة c00000 وهو لون منغم محمر.
186
Webeng

chucknorris هي الإحصائيات مع c قراءة المتصفح في قيمة ست عشرية.

لأن a ، b ، c ، d ، e ، f هي أحرف في ست عشري

يقوم المتصفح chucknorris بتحويل القيمة الست عشرية c00c00000000.

ثم c00c00000000 القيمة السداسية العشرية تحويل إلىRGBتنسيق (مقسوماً على 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>
12
sameera lakshitha

تتضمن قواعد تحليل الألوان على السمات القديمة خطوات إضافية عن تلك المذكورة في الإجابات الحالية. يوصف المكون المقتطع إلى جزءين على النحو التالي:

  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>
6
Salman A