Câu hỏi Tại sao HTML nghĩ "chucknorris" là một màu?


Làm thế nào đến một số chuỗi ngẫu nhiên tạo ra màu sắc khi được nhập dưới dạng màu nền trong HTML? Ví dụ:

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

... 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 chucknorri tạo ra nền màu đỏ, chucknorr tạo ra một nền màu vàng.

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


6549
2017-11-29 22:54


gốc


Lưu ý: không sử dụng bgcolor. Sử dụng CSS background. - John Dvorak
Tại sao bạn lại muốn thêm màu nền gọi là chucknorris? Màu sắc mong đợi là gì? - masterFly
@masterFly: Tôi không biết 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 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 thử nghiệm với những thứ này mọi lúc. 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 rối tung và nhìn thấy những gì đã xảy ra. Bạn không phải luôn luôn có một lý do thực tế để làm một cái gì đó, đặc biệt là một cái gì đó phù phiếm như thế này. - BoltClock♦
và <body bgcolor="stevensegal"> kiểm tra </ body> có màu xanh lục - Chris
Tuyệt quá! Tôi sẽ bắt đầu sử dụng điều này ngay bây giờ. Mỗi khi tôi thực sự cố gắng gõ đỏ nó tự động hoàn thành để rebeccapurple. PS google nó nếu bạn không biết câu chuyện. - Simon_Weaver


Các câu trả lời:


Đó 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 chỉ được hiểu 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 rant về phân tích màu của Microsoft Internet Explorer bao gồm chi tiết tuyệt vời, bao gồm độ dài các giá trị màu khác nhau, 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ững điều sau đây:

  1. Thay thế tất cả các ký tự thập lục phân không phải là giá trị bằng 0

    chucknorris becomes c00c0000000
    
  2. Đưa ra tổng số ký tự tiếp theo chia hết cho 3 (11 -> 12)

    c00c 0000 0000
    
  3. 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)
    
  4. Cắt từng đối số từ bên phải xuống hai ký tự

Cho kết quả sau:

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

Dưới đây là ví dụ minh họa bgcolor thuộ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>

Điều này cũng trả lời phần khác của câu hỏi; tại sao bgcolor="chucknorr" tạo ra màu vàng? Vâng, 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)]

Nó mang lại màu vàng nhạt. Khi chuỗi bắt đầu bằng 9 ký tự, chúng tôi giữ nguyên C lần thứ hai xung quanh do đó nó kết thúc bằng giá trị màu cuối cùng.

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


6051
2017-11-30 21:53



Lưu ý rằng, mặc dù những gì mà bài đăng blog nói, khi bạn nhận được để xử lý chuỗi 3 char, bạn bản sao mỗi ký tự, chứ không phải là tiền tố 0, tức là 0F6 trở thành #00FF66, không phải #000F06. - Aaron Dufour
@usr: HTML được xây dựng xung quanh cố ý bỏ qua đầu vào không đúng định dạng;) - Kevin Ballard
Bạn cũng có thể sử dụng chuỗi ngẫu nhiên thành màu css chuyển đổi để có được màu sắc cho một chuỗi cụ thể. Nó dựa trên 5 bước để tính toán màu chuỗi của Jeremy Goodell. - TimPietrusky
Một cơ hội tiềm ẩn cho ngữ nghĩa? Bạn có thể làm cho 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ì đó như thế, vì vậy nó không phải là gây sốc về mặt thẩm mỹ. - Theraot
@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 đè lên các màu này bằng cách sử dụng bộ chọn thuộc tính / giá trị CSS (ví dụ., td[bgcolor="chucknorris"] {...}). - megaflop


Tôi xin lỗi vì không đồng ý, nhưng theo các quy tắc phân tích giá trị màu cũ được đăng bởi @Yuhong Bao, chucknorris KHÔNG tương đương với #CC0000, nhưng đúng hơn là #C00000, màu đỏ rất giống nhưng hơi khác. Tôi đã sử dụng Tiện ích bổ sung Firefox ColorZilla để xác minh điều này.

Trạng thái quy tắc:

  • làm cho chuỗi có độ dài là bội số của 3 bằng cách thêm 0: 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: C0 00 00

Tôi đã có thể sử dụng các quy tắc này để diễn giải 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 nói rằng màu sắc là #CC0000 kể từ đó đã chỉnh sửa câu trả lời của họ để bao gồm chỉnh sửa.


829
2017-10-17 17:55



Tôi đã tìm 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" = "quảng cáo 0e 0e" - Hoàn hảo !! - Jeremy Goodell
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 trên một câu hỏi tương tự mà tôi đã đăng hôm nay: stackoverflow.com/questions/12939234/… - Jeremy Goodell
@TimPietrusky đã tạo ra công cụ demo tuyệt vời đáng kinh ngạc này cho các tên màu ngẫu nhiên. Chỉ cần vào đây: randomstringtocsscolor.com và nhấp vào hộp và nhập "chucknorris". - Jeremy Goodell
adamlevine làm việc theo jsfiddle.net/LdyZ8/2959 nhưng các chữ cái bị chặn vào ada00e000e được đệm vào ada00e000e00 nhưng sau đó giảm xuống giá trị HEX 6 chữ số điển hình của [ad]a0[0e]00[0e]00 do đó làm cho ad0e0e xuất hiện trong jsfiddle ở trên. - Martin
Sẽ tốt hơn nếu câu trả lời này chỉ có 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 và / hoặc nhận xét chỉnh sửa. - Peter Mortensen


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

ChuCknorris Dị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, cho biết Màu đỏ, màu xanh lá và Màu xanh da trời giá trị: c00c 0000 0000. Các bit phụ trong mỗi phần sẽ bị bỏ qua, kết quả cuối cùng #c00000 đó là một màu đỏ.

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


338
2017-11-29 23:01



Mặc dù tôi vẫn còn tò mò về lý do tại sao OP cho biết "trong CSS" và không "trong HTML" - Có lẽ họ đang sử dụng một trình duyệt siêu cũ, hoặc chỉ nhầm lẫn? - Mike Christensen
Vì vậy, sau đó ông là nhiều hơn khả năng sử dụng không được chấp nhận bgcolor thuộc tính. - animuson♦
Có lẽ anh ta sẽ rất tử tế khi đăng bài HTML kỳ diệu này tạo ra một màu đỏ Chuck Norris trên tất cả các trình duyệt và nền tảng. " - Mike Christensen
Ký tự không hợp lệ không bị bỏ qua, chúng được coi là 0. - phyzome
(Khi câu trả lời này có thể đã chết) gợi ý: Sử dụng màu nền thay vì để minh họa các màu sắc. Màu văn bản trên một khu vực tương đối nhỏ như vậy rất khó để thấy sự khác biệt hoặc tương đồng - Zoe


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

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

Đây có vẻ là vấn đề chủ yếu với Trình duyệt web IE và Opera (12) vì cả Chrome (31) và Firefox (26) đều bỏ qua điều này.

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

.

Trên ghi chú nhẹ hơn

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


220
2017-11-30 14:05





Thông số HTML WHATWG có thuật toán chính xác để phân tích cú pháp giá trị màu kế thừa: https://html.spec.whatwg.org/multipage/infrastructure.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 một số nguyên 32 bit mà không kiểm tra tràn. Chỉ có tám chữ số thập phân 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ố thập phân thành các số nguyên 32 bit, chúng sau đó được cắt ngắn thành các số nguyên 8 bit bằng cách chia chúng cho 16 cho đến khi chúng vừa 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 spec, nhưng sự khác biệt duy nhất 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;
}

187
2017-09-27 22:01





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.
  • c là ký tự hex hợp lệ duy nhất trong chucknorris, giá trị chuyển thành: c00c00000000(0 cho tất cả các giá trị không hợp lệ).
  • Trình duyệt sau đó chia kết quả thành 3 nhóm: Red = c00c, Green = 0000, Blue = 0000.
  • Vì 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), 2 chữ số cuối cùng được cắt ngắn từ mỗi nhóm, để lại giá trị rgb của c00000 đó là một tông màu nâu đỏ.

167
2018-05-24 05:18





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

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

Vì thế chucknorris trong định dạng thập lục phân trở thành: c00c00000000, tất cả các nhân vật khác trở thành 0 và c vẫn là nơi họ ...

Bây giờ họ được chia cho 3 cho RGB(đỏ lục lam)... R: c00c, G: 0000, B:0000...

Nhưng chúng ta biết hệ thập lục phân hợp lệ cho RGB chỉ là 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 làm tài liệu tham khảo nhanh:

Why does HTML think “chucknorris” is a color?


135
2017-07-01 04:08



Nghe như những gì bucky nói - Tushortz
@ Tushortz người là bucky? - Goku
@Goku Bucky là một anh chàng hướng dẫn ngôn ngữ lập trình vui nhộn trên Youtube mà đi theo tay cầm "thenewboston" - Tushortz


chucknorris là số liệu thống kê với c trình duyệt đọc vào giá trị thập lục phân.

bởi vì a, b, c, d, e, f là ký tự trong hệ thập lục phân

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

Sau đó c00c00000000 giá trị thập lục phân chuyển thành RGB định dạng (chia cho 3)

c00c00000000 => R:c00c,G:0000,B:0000

Trình duyệt chỉ cần 2 chữ số để cho biết màu.

R:c00c,G:0000,B:0000 => R:c0,G:00,B:00 => c00000

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

Dưới đây là ví dụ minh họa

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


4
2018-04-17 19:16