Tại sao HTML nghĩ rằng chuck chucknorris là một màu?

7488

Tại sao các chuỗi ngẫu nhiên nhất định tạo ra màu sắc khi được nhập làm màu nền trong HTML? Ví dụ:

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

Mở rộng đoạn trích

... Tạo một tài liệu với nền đỏ trên tất cả các trình duyệt và nền tảng.

Thật thú vị, trong khi chucknorritạo ra một nền đỏ là tốt, chucknorrtạo ra một nền màu vàng.

Những gì đang xảy ra ở đây?

html browser background-color

— người dùng456584
nguồn

154

Như một lưu ý phụ: không sử dụng bgcolor. Sử dụng CSS background.

— John Dvorak

47

Tại sao bạn muốn thêm một màu nền được gọi là chucknorris? Màu sắc mong đợi là gì?

— masterFly

106

@masterFly: Tôi không biết lý do tại sao bình luận của tôi dưới câu trả lời được chấp nhận bị xóa vì "không mang tính xây dựng", bởi vì nó trả lời câu hỏi của bạn khá tốt: mọi người luôn thử nghiệm những điều này. Tôi chỉ mới 10 tuổi khi tôi phát hiện ra điều này và tất cả những gì tôi đang làm lúc đó đang loay hoay và xem điều gì đã xảy ra. Bạn không phải luôn có một lý do thực tế để làm một cái gì đó, đặc biệt là một thứ phù phiếm như thế này.

— BoltClock

49

và <body bgcolor="stevensegal">kiểm tra </ body> có màu xanh lá cây

— Chris

4

@BenDaggers Vui lòng đọc lịch sử sửa đổi trước khi thực hiện chỉnh sửa khác. Các css thẻ là không thích hợp và đã được gỡ bỏ hai lần.

— Các cuộc đua nhẹ nhàng trong quỹ đạo

6879

Đó là một sự nắm giữ từ những ngày Netscape:

Các chữ số bị thiếu được coi là 0 [...]. Một chữ số không chính xác được hiểu đơn giản là 0. Ví dụ: các giá trị # F0F0F0, F0F0F0, F0F0F, #FxFxFx và FxFxFx đều giống nhau.

Đó là từ bài đăng trên blog Một chút giận dữ về phân tích màu của Microsoft Internet Explorer bao gồm nó rất chi tiết, bao gồm các độ dài khác nhau của các giá trị màu, v.v.

Nếu chúng tôi áp dụng các quy tắc lần lượt từ bài đăng trên blog, chúng tôi sẽ nhận được như sau:

Thay thế tất cả các ký tự thập lục phân không giá trị bằng 0
```
chucknorris becomes c00c0000000
```
Di chuyển đến tổng số ký tự tiếp theo chia hết cho 3 (11 -> 12)
```
c00c 0000 0000
```
Chia thành ba nhóm bằng nhau, với mỗi thành phần đại diện cho thành phần màu tương ứng của màu RGB:
```
RGB (c00c, 0000, 0000)
```
Cắt bớt từng đối số từ phải xuống thành hai ký tự

Cho kết quả như sau:

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

Dưới đây là một ví dụ minh họa bgcolorthuộc tính đang hoạt động, để tạo ra mẫu màu "tuyệt vời" này:

<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>

Mở rộng đoạn trích

Điều này cũng trả lời phần khác của câu hỏi; Tại sao không bgcolor="chucknorr"tạo ra màu vàng? Chà, nếu chúng ta áp dụng các quy tắc, chuỗi là:

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

Mà cho một màu vàng vàng nhạt. Khi chuỗi bắt đầu là 9 ký tự, chúng tôi giữ C thứ hai trong khoảng thời gian này do đó nó kết thúc ở giá trị màu cuối cùng.

Ban đầu tôi gặp phải điều này khi ai đó chỉ ra bạn có thể làm color="crap"và, tốt, nó có màu nâu.

— dấu gạch ngang
nguồn

174

Lưu ý rằng, mặc dù những gì bài đăng trên blog nói, khi bạn xử lý các chuỗi 3 char, bạn sao chép từng ký tự, thay vì trả trước 0. tức là 0F6trở thành #00FF66, không #000F06.

— Aaron Dufour

634

@usr: HTML được xây dựng xung quanh việc cố tình bỏ qua đầu vào không đúng định dạng;)

— Lily Ballard

59

Bạn cũng có thể sử dụng chuỗi ngẫu nhiên của tôi để chuyển đổi màu css để lấy màu cho một chuỗi cụ thể. Nó dựa trên 5 bước để tính màu chuỗi của Jeremy Goodell .

— TimPietrusky

15

Một cơ hội tiềm ẩn cho ngữ nghĩa? Bạn có thể tạo một số trang lỗi với điều này: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>Bạn có thể thêm một div với nền anothe hoặc một cái gì đó tương tự, vì vậy nó không gây sốc về mặt thẩm mỹ.

— Theraot

32

@Theraot bgcolor="success"cũng là một màu xanh lá cây đẹp. Thật thú vị, người ta có thể ghi đè các màu này bằng cách sử dụng các bộ chọn giá trị / thuộc tính CSS (ví dụ td[bgcolor="chucknorris"] {...}:).

— daiscog

970

Tôi xin lỗi vì không đồng ý, nhưng theo quy tắc phân tích giá trị màu kế thừa được đăng bởi @Yuhong Bao , chucknorrisKHÔNG tương đương với #CC0000, nhưng thay vào đó #C00000, một màu đỏ rất giống nhau nhưng hơi khác. Tôi đã sử dụng tiện ích Firefox ColorZilla để xác minh điều này.

Các quy tắc nêu:

làm cho chuỗi có độ dài là bội số của 3 bằng cách thêm 0s: chucknorris0
tách chuỗi thành 3 chuỗi có độ dài bằng nhau: chuc knor ris0
cắt ngắn mỗi chuỗi thành 2 ký tự: ch kn ri
giữ các giá trị hex và thêm 0 khi cần thiết: C0 00 00

Tôi đã có thể sử dụng các quy tắc này để giải thích chính xác các chuỗi sau:

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

CẬP NHẬT: Những người trả lời ban đầu cho biết màu sắc đã được #CC0000chỉnh sửa câu trả lời của họ để bao gồm chỉnh sửa.

— Jeremy Goodell
nguồn

86

Tôi đã hiểu ra, tôi đã giải thích sai một số hướng dẫn phân tích cú pháp: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - Hoàn hảo !!

— Jeremy Goodell

17

Trong trường hợp bạn quan tâm, tôi đã đăng thuật toán 5 bước dưới dạng CẬP NHẬT cho một câu hỏi tương tự tôi đã đăng ngày hôm nay: stackoverflow.com/questions/12939234/ Kẻ

— Jeremy Goodell

18

@TimPietrusky đã tạo ra công cụ demo đáng kinh ngạc này cho các tên màu ngẫu nhiên. Chỉ cần truy cập vào đây: Randomopestocsscolor.com và nhấp vào hộp và nhập "chucknorris".

— Jeremy Goodell

4

adamlevinekhông hoạt động theo jsfiddle.net/LdyZ8/2959 nhưng các chữ cái bị chặn vào ada00e000eđó được đệm vào ada00e000e00nhưng sau đó giảm xuống giá trị 6 chữ số HEX điển hình [ad]a0[0e]00[0e]00để tạo ra ad0e0e xuất hiện trong jsfiddle ở trên.

— Martin

4

Sẽ tốt hơn nếu câu trả lời này chỉ chứa trạng thái hiện tại - lịch sử của câu trả lời này và các câu trả lời khác thuộc về bản tóm tắt chỉnh sửa và / hoặc nhận xét.

— Peter Mortensen

397

Hầu hết các trình duyệt sẽ đơn giản bỏ qua mọi giá trị NON-hex trong chuỗi màu của bạn, thay thế các chữ số không hex bằng số không.

ChuCknorrisdịch sang c00c0000000. Tại thời điểm này, trình duyệt sẽ chia chuỗi thành ba phần bằng nhau, biểu thị các giá trị Đỏ , Xanh lục và Xanh lam : c00c 0000 0000. Các bit bổ sung trong mỗi phần sẽ bị bỏ qua, điều này làm cho kết quả cuối cùng #c00000có màu đỏ.

Lưu ý, điều này không áp dụng cho phân tích màu CSS, tuân theo tiêu chuẩn 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>

Mở rộng đoạn trích

— Mike Christensen
nguồn

7

Mặc dù tôi vẫn tò mò về lý do tại sao OP nói "bằng CSS" chứ không phải "bằng HTML" - Có thể họ đang sử dụng một trình duyệt siêu cũ, hoặc chỉ nhầm?

— Mike Christensen

7

Vì vậy, sau đó anh ta nhiều khả năng sử dụng bgcolorthuộc tính không dùng nữa .

— phim hoạt hình

12

Các ký tự không hợp lệ không bị bỏ qua, chúng được coi là 0.

— đối xử tốt với các mod của bạn vào

5

(Gợi ý câu trả lời này có thể đã chết): Thay vào đó, hãy sử dụng màu nền để thể hiện màu sắc. Màu văn bản trên một khu vực tương đối nhỏ như vậy thật khó để thấy sự khác biệt hoặc tương đồng

— Zoe

304

Trình duyệt đang cố gắng chuyển đổi chucknorristhành mã màu hex, vì đó không phải là giá trị hợp lệ.

Trong chucknorris, tất cả mọi thứ ngoại trừ ckhông phải là một giá trị hex hợp lệ.
Vì vậy, nó được chuyển đổi thành c00c00000000.
Mà trở thành # c00000 , một màu đỏ.

Đây dường như là một vấn đề chủ yếu với Internet Explorer và Opera (12) vì cả Chrome (31) và Firefox (26) đều bỏ qua điều này.

PS Các số trong ngoặc là phiên bản trình duyệt tôi đã thử nghiệm.

.

Trên một ghi chú nhẹ hơn

Chuck Norris không tuân thủ các tiêu chuẩn web. Tiêu chuẩn web phù hợp với anh ta. # BADA55

— nhà phát triển web
nguồn

297

Lý do là trình duyệt không thể hiểu nó và cố gắng dịch nó sang những gì nó có thể hiểu và trong trường hợp này thành giá trị thập lục phân! ...

chucknorrisbắt đầu với cký tự được nhận dạng theo hệ thập lục phân, đồng thời nó chuyển đổi tất cả các ký tự không được nhận dạng thành 0!

Vì vậy, chucknorrisở định dạng thập lục phân trở thành : c00c00000000, tất cả các ký tự khác trở thành 0và cgiữ nguyên vị trí ...

Bây giờ họ được chia cho 3 cho RGB(đỏ, xanh lá cây, xanh dương) ... R: c00c, G: 0000, B:0000...

Nhưng chúng tôi biết thập lục phân hợp lệ cho RGB chỉ có 2 ký tự, có nghĩa là R: c0, G: 00, B:00

Vì vậy, kết quả thực sự là:

bgcolor="#c00000";

Tôi cũng đã thêm các bước trong hình ảnh như một tài liệu tham khảo nhanh cho bạn:

— Alireza
nguồn

23

Đây là lời giải thích rất dễ thương: D: D: D

— Dominik Bucher

2

Thật là khôn ngoan và rất đơn giản và giải thích về phía trước mà tôi từng trải qua

— Saurin Vala

1

câu trả lời rất sáng tạo :)

— ahmednawazbutt

222

Thông số HTML WHATWG có thuật toán chính xác để phân tích giá trị màu kế thừa: https://html.spec.whatwg.org/multipage/infr kia.html#rules-for-parsing-a-legacy-colour-value

Mã Netscape Classic được sử dụng để phân tích chuỗi màu là mã nguồn mở: https://dxr.mozilla.org/ classic / source / lib / layout / layimage.c#155

Ví dụ, lưu ý rằng mỗi ký tự được phân tích cú pháp dưới dạng một chữ số hex và sau đó được chuyển thành số nguyên 32 bit mà không cần kiểm tra tràn . Chỉ có tám chữ số hex phù hợp với số nguyên 32 bit, đó là lý do tại sao chỉ 8 ký tự cuối cùng được xem xét. Sau khi phân tích các chữ số hex thành số nguyên 32 bit, sau đó chúng được cắt thành số nguyên 8 bit bằng cách chia chúng cho 16 cho đến khi chúng khớp với 8 bit, đó là lý do tại sao các số 0 đứng đầu bị bỏ qua.

Cập nhật: mã này không khớp chính xác với những gì được xác định trong thông số kỹ thuật, nhưng sự khác biệt duy nhất là có một vài dòng mã. Tôi nghĩ rằng đó là những dòng đã được thêm vào (trong Netscape 4):

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

— Vũ Bảo Bảo
nguồn

Cảm ơn, bạn đã chỉ cho tôi mã nguồn Netscape cũ ở đâu ... tại sao nó rất khó tìm?

— kb1000

202

Câu trả lời:

Trình duyệt sẽ cố gắng chuyển đổi chucknorris thành giá trị thập lục phân.
Vì clà ký tự hex hợp lệ duy nhất trong chucknorris , giá trị biến thành: c00c00000000( 0 cho tất cả các giá trị không hợp lệ ).
Sau đó trình duyệt chia kết quả thành 3 groupds: Red = c00c, Green = 0000, Blue = 0000.
Do các giá trị hex hợp lệ cho nền html chỉ chứa 2 chữ số cho mỗi loại màu ( r , g , b ), nên 2 chữ số cuối cùng được cắt bớt từ mỗi nhóm, để lại giá trị rgb c00000là màu có màu đỏ gạch.

— Webeng
nguồn

22

chucknorris bắt đầu bằng c và trình duyệt đọc nó thành một giá trị thập lục phân.

Bởi vì A, B, C, D, E và F là các ký tự trong hệ thập lục phân .

Trình duyệt chuyển đổi chucknorristhành giá trị thập lục phân , C00C00000000.

Sau đó, C00C00000000giá trị thập lục phân được chuyển đổi sang định dạng RGB (chia cho 3):

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

Trình duyệt chỉ cần hai chữ số để chỉ màu:

R:C00C, G:0000, B:0000=> R:C0, G:00, B:00=>C00000

Cuối cùng, hiển thị bgcolor = C00000trong trình duyệt web.

Đây là một ví dụ minh họa nó:

<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>

Mở rộng đoạn trích

— cùng lakshitha
nguồn

15

Các quy tắc phân tích màu trên các thuộc tính cũ bao gồm các bước bổ sung so với các quy tắc được đề cập trong các câu trả lời hiện có. Thành phần rút ngắn thành 2 chữ số được mô tả là:

Hủy tất cả các ký tự ngoại trừ 8 ký tự cuối cùng
Hủy bỏ các số 0 đứng đầu từng cái miễn là tất cả các thành phần có số 0 đứng đầu
Hủy tất cả các ký tự ngoại trừ 2 ký tự đầu tiên

Vài ví dụ:

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

Dưới đây là một phần thực hiện của thuật toán. Nó không xử lý lỗi hoặc trường hợp người dùng nhập màu hợp lệ.

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Salman A
nguồn