Tại sao "rgb (224, 226, 213)" giá trị thuộc tính không hợp lệ?

Question

Tại sao không thể trình duyệt nào áp dụng quy tắc rgb màu này?

HTML

<header> 
    <h1>Header</h1> 
</header> 

CSS

header h1 { 
    background-color: red; 
    color: rgb (224, 226, 213); 
} 

Chrome công cụ Web Developer đang nói với tôi rằng đó là một giá trị tài sản không hợp lệ, nhưng tôi không thể hiểu tại sao. Bạn có thể xem kết quả trong JSFiddle.

Answer 1

Bạn có một khoảng trống giữa rgb và (, mà không được phép:

header h1 { 
    background-color: red; 
    color: rgb(224, 226, 213); 
} 

Không, tôi nói thật đấy, nó không phải.

Không giống như nhiều ngôn ngữ lập trình, CSS rõ ràng cấm không gian trống giữa tên hàm và dấu ngoặc đơn mở. Điều này không chỉ áp dụng cho rgb() và rgba(), mà còn cho các giá trị chức năng khác như url() và attr(), cũng như các lớp giả chức năng như :nth-child(), :lang() và :not().

Tham khảo section 4.3.6 of CSS2.1, trong đó nêu:

Định dạng của giá trị RGB trong các ký hiệu chức năng là 'rgb (' theo sau là một danh sách bằng dấu phẩy trong ba giá trị số (hoặc ba giá trị số nguyên hoặc ba giá trị phần trăm) theo sau là ')'. [...] Ký tự khoảng trắng được phép xung quanh các giá trị số.

và cũng tham khảo Appendix G cho ngữ pháp, chính xác tokenization sau, rõ ràng cho thấy rằng khoảng trắng không mong đợi giữa các định danh và các dấu mở ngoặc:

{ident}"("  {return FUNCTION;} 

Answer 2

Bạn cần loại bỏ các khoảng trắng sau rgbrgb(224, 226, 213)