HTML에서 “chucknorris”가 색상이라고 생각하는 이유는 무엇입니까? 색상을 생성합니까? 예를 들면

HTML에서 배경색으로 입력 할 때 특정 임의의 문자열이 어떻게 색상을 생성합니까? 예를 들면 다음과 같습니다.

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

… 모든 브라우저와 플랫폼에서 배경빨간색 인 문서를 생성합니다 .

흥미롭게도 chucknorri빨간색 배경도 chucknorr생성하지만 노란색 배경이 생성됩니다.

무슨 일이야?



답변

넷스케이프 시절부터 이어진 것입니다.

누락 된 숫자는 0 […]으로 처리됩니다. 잘못된 숫자는 단순히 0으로 해석됩니다. 예를 들어 값 # F0F0F0, F0F0F0, F0F0F, #FxFxFx 및 FxFxFx는 모두 동일합니다.

블로그 게시물에서 가져온 것입니다. 다양한 길이의 색상 값 등을 포함하여 Microsoft Internet Explorer의 색상 구문 분석에 대해 조금 자세히 설명합니다.

블로그 게시물에서 규칙을 차례로 적용하면 다음과 같은 결과가 나타납니다.

  1. 유효하지 않은 모든 16 진 문자를 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".


답변

나는 동의 죄송하지만,에 의해 게시 기존 색상 값 구문 분석에 대한 규칙에 따라 @Yuhong 바오를 , chucknorris동일시하지 않으며 #CC0000, 오히려에 #C00000빨간색의 매우 비슷하지만 약간 다른 색상. Firefox ColorZilla 애드온을 사용하여 이를 확인했습니다.

규칙 상태 :

  • 0을 추가하여 문자열 길이를 3의 배수로 만듭니다. chucknorris0
  • 문자열을 3 개의 동일한 길이의 문자열로 분리하십시오. chuc knor ris0
  • 각 문자열을 2 자로 자릅니다. ch kn ri
  • 16 진 값을 유지하고 필요한 경우 0을 추가하십시오. C0 00 00

이 규칙을 사용하여 다음 문자열을 올바르게 해석 할 수있었습니다.

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

업데이트 : 색상을 말한 원래 답변자 #CC0000는 수정 사항을 포함하도록 답변을 편집했습니다.


답변

대부분의 브라우저는 색상 문자열에서 16 진이 아닌 숫자를 0으로 대체하여 NON 16 진 값을 무시합니다.

ChuCknorris로 번역됩니다 c00c0000000. 이 시점에서 브라우저는 문자열을 세 개의 동일한 섹션으로 나누고 Red , GreenBlue 값을 나타냅니다 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>

답변

브라우저가 chucknorris유효한 값이 아니기 때문에 16 진 색상 코드 로 변환하려고 합니다.

  1. 에서이 chucknorris모든 것을 제외하고는 c유효한 16 진수 값이 아닙니다.
  2. 따라서로 변환됩니다 c00c00000000.
  3. 빨간색 인 # c00000 이됩니다 .

Chrome (31)과 Firefox (26)는 모두 이것을 무시하므로 Internet ExplorerOpera (12)에서 주로 문제가됩니다 .

PS 괄호 안의 숫자는 내가 테스트 한 브라우저 버전입니다.

.

가벼운 노트

척 노리스는 웹 표준을 준수하지 않습니다. 웹 표준은 그를 따릅니다. # 바다 55


답변

그 이유는 브라우저가 그것을 이해할없으며 어떻게 든 그것을 이해할 수있는 것으로 변환하려고 시도 하고이 경우 16 진수 값으로 변환하려고 시도하기 때문입니다!

chucknorrisc16 진수로 인식되는 문자로 시작하고 인식 할 수없는 모든 문자를 0! 로 변환합니다 .

따라서 chucknorris16 진수 형식이됩니다 : c00c00000000, 다른 모든 문자는 그대로 0있고 c그대로 유지됩니다 …

이제 RGB(빨강, 녹색, 파랑)에 대해 3으로 나눕니다 … R: c00c, G: 0000, B:0000

그러나 RGB에 유효한 16 진수는 2 자에 불과하다는 것을 알고 있습니다. R: c0, G: 00, B:00

실제 결과는 다음과 같습니다.

bgcolor="#c00000";

또한 이미지의 단계를 빠른 참조로 추가했습니다.


답변

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

예를 들어, 각 문자는 16 진수로 구문 분석 된 다음 overflow를 확인하지 않고 32 비트 정수로 이동됩니다 . 32 비트 정수에는 8 개의 16 진 숫자 만 들어가므로 마지막 8 자만 고려됩니다. 16 진 숫자를 32 비트 정수로 구문 분석 한 후 16 비트를 8 비트에 맞을 때까지 16으로 나누어 8 비트 정수로 잘 리므로 선행 0이 무시됩니다.

업데이트 :이 코드는 사양에 정의 된 것과 정확하게 일치하지 않지만 몇 줄의 코드가 다릅니다. Netscape 4에서 추가 된 것은 다음과 같습니다.

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

답변

대답:

  • 브라우저는 척 노리스 를 16 진수 값으로 변환하려고 시도 합니다.
  • 이 이후 c에 대해서만 유효 진수 문자 척 노리스 의 값으로 턴 : c00c00000000( 올바르지 모든 값 0 ).
  • 브라우저는 다음 3 groupds에 결과를 분할 : Red = c00c, Green = 0000, Blue = 0000.
  • html 배경에 유효한 16 진수 값은 각 색상 유형 ( r , g , b ) 에 대해 2 자리 숫자 만 포함 하므로 마지막 두 자리는 각 그룹에서 잘리고 rgb 값은 c00000벽돌색을 띤 색조입니다.