Thuộc tính @charset trong CSS

• Trần Thị Vân
• 1136
• 17/07/2025

Chức năng của Thuộc tính @charset trong CSS

Thuộc tính @charset trong CSS dùng để chỉ định bộ mã hóa ký tự cho css của một trang web, loại đầy đủ nhất hiện nay là UTF-8, ngoài ra còn có ASCII, ANSI, ISO-8859-1 nhưng không đẩy đủ.

Trong một trang web thì @charset xuất hiện đầu tiên sẽ được sử dụng, mấy cái sau vô nghĩa.

Cú pháp Thuộc tính @charset trong CSS

@charset "utf-8";

Đặt ở đầu tiên trong file css.

Những lưu ý khi sử dụng charset trong CSS

Thuộc tính charset trong CSS có tác dụng xác định bảng mã được sử dụng để trình duyệt đọc nội dung của tệp CSS. Khi làm việc với website có tiếng Việt hoặc nhiều loại ký tự đặc biệt, việc khai báo đúng giúp hạn chế tình trạng trình duyệt hiểu sai nội dung.

Đặt charset đúng vị trí trong file CSS

Nếu sử dụng quy tắc @charset, khai báo này cần nằm ở vị trí đầu tiên của tệp CSS, trước các quy tắc khác. Không nên đặt khoảng trắng, comment hoặc mã CSS khác lên phía trước vì trình duyệt có thể không nhận diện khai báo theo cách mong muốn.

@charset "UTF-8";

body {
    font-family: Arial, sans-serif;
}

Trong thực tế, UTF-8 là lựa chọn phù hợp cho phần lớn website hiện nay vì có thể biểu diễn tiếng Việt và nhiều nhóm ký tự khác nhau. Việc thống nhất cách mã hóa giữa tệp CSS và các tài nguyên liên quan cũng giúp quá trình xử lý văn bản ổn định hơn.

Charset có ảnh hưởng đến tiếng Việt không?

Có. Khi tệp CSS chứa trực tiếp các ký tự tiếng Việt, bảng mã không phù hợp có thể khiến trình duyệt đọc sai dữ liệu. Lỗi thường dễ nhận thấy khi CSS sử dụng nội dung Unicode trong content, tên font hoặc các giá trị có chứa ký tự ngoài ASCII.

@charset "UTF-8";

.title::before {
    content: "Giới thiệu";
}

Tuy nhiên, cần phân biệt giữa bảng mã của tệp CSS và cách mã hóa của toàn bộ trang web. Việc khai báo @charset trong CSS không thay thế cho cấu hình mã hóa của tài liệu HTML. Vì vậy, khi website có nội dung tiếng Việt, nên duy trì UTF-8 một cách nhất quán để giảm nguy cơ xuất hiện ký tự lỗi.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính @charset trong CSS.