Tại sao chỉ định @charsetiên UTF-8 nên; trong tập tin CSS của bạn?

173

Tôi đã thấy hướng dẫn này là dòng đầu tiên của rất nhiều tệp CSS đã được chuyển cho tôi:

@charset "UTF-8";

Nó làm gì, và điều này có cần thiết không?

Ngoài ra, nếu tôi bao gồm thẻ meta này trong phần tử "head" của mình, điều đó có loại bỏ sự cần thiết phải có nó trong các tệp CSS của tôi không?

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

css character-encoding

— rsturim
nguồn

123

Nó báo cho trình duyệt đọc tệp css dưới dạng UTF-8. Điều này rất hữu ích nếu CSS của bạn chứa các ký tự unicode và không chỉ ASCII.

Sử dụng nó trong thẻ meta là tốt, nhưng chỉ đối với các trang có chứa thẻ meta đó.

Đọc về các quy tắc cho độ phân giải tập hợp ký tự của các tệp CSS tại thông số w3c cho CSS 2.

— Oded
nguồn

7

Điều quan trọng nữa là nếu bạn liên kết các tệp đó từ các trang không phải UTF-8, như, giả sử: một trang web tiếng Nhật được mã hóa dưới dạng UTF-16 cố tải CSS từ CDN sẽ nhận được nội dung không thể đọc được nếu tệp CSS không khai báo mã hóa.

— Paracetamol

147

Điều này hữu ích trong các bối cảnh nơi mã hóa không được nói cho mỗi tiêu đề HTTP hoặc dữ liệu meta khác, ví dụ: hệ thống tệp cục bộ.

Hãy tưởng tượng các biểu định kiểu sau:

[rel="external"]::after
{
    content: ' ↗';
}

Nếu một trình đọc lưu tệp vào ổ cứng và bạn bỏ qua @charsetquy tắc, hầu hết các trình duyệt sẽ đọc nó trong mã hóa ngôn ngữ của hệ điều hành, ví dụ Windows-1252 và chèn - thay vì một mũi tên.

Thật không may, bạn không thể dựa vào cơ chế này vì sự hỗ trợ khá hiếm. Và hãy nhớ rằng trên mạng, tiêu đề HTTP sẽ luôn ghi đè @charsetquy tắc.

Các quy tắc chính xác để xác định bộ ký tự của biểu định kiểu theo thứ tự ưu tiên:

Tiêu đề bộ ký tự HTTP.
Dấu hiệu đặt hàng Byte.
@charsetQuy tắc đầu tiên .
UTF-8.

Quy tắc cuối cùng là yếu nhất, nó sẽ thất bại trong một số trình duyệt.
Các charsetthuộc tính trong <link rel='stylesheet' charset='utf-8'>là lỗi thời trong HTML 5 .
Coi chừng xung đột giữa các tuyên bố khác nhau. Chúng không dễ gỡ lỗi.

Đề nghị đọc

Russ Rolfe: Khai báo mã hóa ký tự trong CSS
IANA: Tên chính thức cho các bộ ký tự - các tên khác không được phép; sử dụng tên thường gọi cho @charsetnếu có nhiều hơn một tên được đăng ký cho mã hóa tương tự.
MDN : @charset. Có một bảng hỗ trợ. Tôi không tin tưởng điều này. :)
Trường hợp thử nghiệm từ CSS WG.

— fuxia
nguồn

Bạn có nghĩa là tập tin css cần được phục vụ với content-type:text/css;charset=utf-8tiêu đề?

— Pacerier

1

@Pacerier Có, nếu đó là mã hóa của tệp HTML (nó phải như vậy).

— fuxia

Ý tôi là không phải nó đã ngụ ý rằng nếu không có bộ ký tự, bộ ký tự của tệp css có nên được hiểu giống như của tệp HTML nhúng không?

— Pacerier

1

@Pacerier Tôi quan sát thấy điều này không phải lúc nào cũng đúng.

— MatTheCat

3

Một lý do để luôn bao gồm một đặc tả bộ ký tự trên mỗi trang có chứa văn bản là để tránh các lỗ hổng kịch bản chéo trang. Trong hầu hết các trường hợp, bộ ký tự UTF-8 là lựa chọn tốt nhất cho văn bản, bao gồm các trang HTML.

— tony
nguồn

2

Nếu bạn đang đặt thẻ <meta> trong các tệp css của mình, bạn đã làm sai điều gì đó. Thẻ <meta> thuộc về tệp html của bạn và cho trình duyệt biết mã html được mã hóa như thế nào, nó không nói gì về css, đây là một tệp riêng biệt. Bạn có thể hình dung có các mã hóa hoàn toàn khác nhau cho html và css của mình, mặc dù tôi không thể tưởng tượng đây sẽ là một ý tưởng hay.

— WJS
nguồn