Quy tắc @charset chỉ định mã hóa ký tự được dùng trong bảng định kiểu. @charset phải là phần tử đầu tiên của bảng định kiểu. Nếu có nhiều quy tắc @charset thì chỉ quy tắc đầu tiên được dùng. Nó không dùng được trong thẻ <style> vì mã ký tự của trang HTML liên quan.
Cú pháp:
@charset "utf-8";
Giá trị thuộc tính: Tham số này nhận một giá trị duy nhất là "charset". Nó hữu ích khi các ký tự NON-ASCII được dùng trong nội dung. Có nhiều cách để xác định mã hóa ký tự của một bảng định kiểu. Các trình duyệt tuân theo các phương pháp sau theo thứ tự nhất định.
- Giá trị của ký tự byte-order Unicode phải được đặt ở đầu file.
- Giá trị được cung cấp bởi thuộc tính charset của Content-Type: HTTP header. Hoặc tương đương trong giao thức dùng để cung cấp bảng định kiểu.
- Sử dụng mã hóa ký tự được xác định bởi tài liệu tham chiếu. Phương pháp này không được dùng trong HTML 5.
- Giả sử rằng tài liệu là UTF-8.
Lưu ý: Danh sách dưới đây mô tả mã hóa charset đúng và sai:
@charset 'iso-8859-15'; [Kiểu trích dẫn sai, không hợp lệ] @charset "UTF-8"; [Nhiều hơn một khoảng trắng không hợp lệ] @charset "UTF-8"; [Không hợp lệ, có một ký tự (khoảng trắng) trước at-rule] @charset "UTF-8"; [Đặt mã hóa của bảng định kiểu thành Unicode UTF-8]
Ví dụ: Trong ví dụ này, chúng ta sử dụng thuộc tính đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS @charset Rule</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<p>Learn</p>
<p>Contribute</p>
<p>Explore</p>
</center>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi quy tắc @charset được liệt kê dưới đây:
- Google Chrome 2.0
- Microsoft Edge 12.0
- Internet Explorer 5.5 trở lên
- Firefox 1.5
- Safari 4.0
- Opera 9.0