Khi làm việc với CSS để thiết kế và trình bày trang web, chúng ta thường gặp các trường hợp cần định dạng các phần tử dựa trên ngôn ngữ của chúng. Giả sử bạn có một trang web đa ngôn ngữ và muốn định dạng các đoạn văn khác nhau tùy thuộc vào ngôn ngữ nội dung của chúng, CSS cung cấp một pseudo-class rất hữu ích là :lang(). Đây là một công cụ mạnh mẽ giúp bạn chọn và định dạng các phần tử dựa trên thuộc tính ngôn ngữ của chúng.
Cách sử dụng :lang()
Pseudo-class :lang() được sử dụng để áp dụng các phong cách nhất định cho một phần tử hoặc nhóm phần tử có thuộc tính ngôn ngữ xác định. Cú pháp cơ bản của :lang() như sau:
selector:lang(language) {
/* CSS rules */
}
Trong đó selector là phần tử bạn muốn nhắm đến, và language là mã ngôn ngữ bạn muốn sử dụng. Ví dụ:
p:lang(en) {
color: blue;
}
p:lang(fr) {
color: red;
}
Trong ví dụ này, đoạn văn bản (<p>) có thuộc tính ngôn ngữ là tiếng Anh (en) sẽ có màu chữ xanh dương, trong khi đoạn văn bản có thuộc tính ngôn ngữ là tiếng Pháp (fr) sẽ có màu chữ đỏ.
Áp dụng :lang() trong thực tế
Giả sử bạn có một trang web với nội dung đa ngôn ngữ và bạn muốn định dạng khác nhau cho từng ngôn ngữ, bạn có thể làm như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-language Site</title>
<style>
h1:lang(en) {
font-family: Arial, sans-serif;
}
h1:lang(vi) {
font-family: "Times New Roman", serif;
}
p:lang(en) {
color: green;
}
p:lang(vi) {
color: purple;
}
</style>
</head>
<body>
<h1 lang="en">Welcome</h1>
<h1 lang="vi">Chào mừng</h1>
<p lang="en">This is an English paragraph.</p>
<p lang="vi">Đây là một đoạn văn tiếng Việt.</p>
</body>
</html>
Trong ví dụ này, mỗi đoạn văn và tiêu đề được viết bằng hai ngôn ngữ khác nhau và có phong cách định dạng khác nhau. Tiêu đề và đoạn văn tiếng Anh sẽ sử dụng phông chữ và màu sắc riêng, tương tự cho tiếng Việt.
Hỗ trợ đa ngôn ngữ với bộ chọn thuộc tính ngôn ngữ
Một cách khác để chọn phần tử dựa trên ngôn ngữ là sử dụng bộ chọn thuộc tính ngôn ngữ trực tiếp:
[lang|=en] {
font-style: italic;
}
Cú pháp [lang|=en] sẽ áp dụng cho bất kỳ phần tử nào có thuộc tính lang bắt đầu bằng "en". Điều này rất hữu ích khi bạn cần hỗ trợ các biến thể ngôn ngữ (như en-US, en-GB).
Kết hợp với các Pseudo-classes khác
Bạn cũng có thể kết hợp :lang() với các pseudo-classes khác để tạo ra các định dạng phong phú hơn:
a:lang(en):hover {
text-decoration: underline;
}
a:lang(vi):hover {
text-decoration: none;
font-weight: bold;
}
Trong trường hợp này, liên kết (<a>) khi được di chuột qua sẽ có hành vi khác nhau tùy thuộc vào ngôn ngữ của nó.
Kết luận
CSS :lang() là một công cụ mạnh mẽ giúp bạn tùy chỉnh giao diện trang web cho các ngôn ngữ khác nhau một cách dễ dàng và hiệu quả. Bằng cách tận dụng đúng cách này công cụ, bạn không chỉ cải thiện trải nghiệm người dùng mà còn tăng tính chuyên nghiệp và thẩm mỹ của trang web. Hãy luôn nhớ kiểm tra trình duyệt và các phiên bản CSS bạn đang sử dụng để đảm bảo tính tương thích và hiệu quả của các phong cách được áp dụng.
Comments