CSS – Attribute Selector và HTML5 Custom Data Attribute

Css - earth - world - globalNhân đọc về Attribute Selector của CSS, tôi nhận thấy rằng tính năng này có thể được ứng dụng để tạo ra các attribute mới cho các thẻ HTML. Ví dụ như các attribute có sẵn như required, title, width, height… Nhân tiện, tôi cũng giới thiệu về tính năng Custom Data Attribute của HTML5 và ứng dụng của nó.

CSS Attribute Selector

Để sử dụng attribute selector, bạn đặt tên của attribute trong cặp thẻ vuông [], và có thể thêm điều kiện so sánh nội dung của attribute với cú pháp [attribute_name=attribute_value]:

Ví dụ 1: Thêm dòng chữ “(open in new tab)” sau mỗi thẻ <a> có target=”_blank”

a[target="_blank"]:after
{
  content: " (open in new tab)";
}

Ví dụ 2: Gạch bỏ các thẻ <a> chứa liên kết không tồn tại :

a[died]{
	text-decoration: line-through;
}

Ví dụ 3: Highlight các thẻ quan trọng:

[highlighted]{
	background: #ffff00;
	color: #000000;
}

HTML5 Custom Data Attribute

Một vấn đề gặp phải là các tài liệu HTML sử dụng custom attribute như diedhighlighted trên sẽ được coi là không hợp lệ (kiểm tra tại http://validator.w3.org/). Tuy nhiên, may mắn là HTML5 hỗ trợ tạo các Custom Data Attribute. Nghĩa là bạn có thể bổ sung bất kì attribute nào cho các thẻ HTML miễn là tên của chúng có định dạng là “data-*” hay nói cách khác là các custom attribute phải tiếp đầu ngữ là “data-”. Với custom attribute này của HTML5, bạn có thể lưu trữ những dữ liệu cần thiết vào bất kì thẻ HTML nào.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Attribute Selectors</title>
<style>
a[target="_blank"]:after
{
  content: " (open in new tab)";
}
a[data-died]{
	text-decoration: line-through;
}
[data-highlighted]{
	background-color:yellow;
}
</style>
</head>

<body>
	<h2>Attribute Selectors Demo:</h2>
	<a href="https://yinyangit.wordpress.com">YinYang's Blog</a><br/>
	<a href="https://yinyangit.wordpress.com" target="_blank">YinYang's Blog</a><br/>
	<a href="http://unknown.yinyangit.com" data-died>YinYang's Blog</a><br/>
	<hr />
	<span data-highlighted>Important content</span>
	<h1><a href="#" data-highlighted data-died>Are you paying attention?</a></h1>
</body>
</html>

Kết quả:

CSS - Attribute Selectors Example

YinYang’s Programming Blog

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s