Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Tất cả những gì bạn cần biết về thuộc tính Data trong HTML5

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Using the HTML5 Download Attribute
Introducing the HTML5 “datalist” Element

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Thuộc tính data trong HTML5 cho phép bạn gán dữ liệu tuỳ biến cho một phần tử. Bài viết này sẽ xem xét cách sử dụng nó và cung cấp các ví dụ về trường hợp sử dụng lý tưởng nhất.


Giới thiệu

Trước HTML5, chúng ta đã phải dựa vào việc sử dụng các thuộc tính 'class' hoặc 'rel' để lưu trữ các đoạn dữ liệu nhỏ mà chúng ta có thể sử dụng trong các trang web của chúng ta. Điều này đôi khi dẫn đến các vấn đề và có thể gây ra xung đột giữa phong cách và chức năng của trang web. Sự xuất hiện của HTML5 đã giới thiệu một thuộc tính mới được gọi là 'data'. Trong bài viết này, tôi sẽ xem xét một số ví dụ về cách sử dụng thuộc tính này cũng như nó nên được sử dụng như thế nào cho hợp lý.

Vì các trang web đang chứa dữ liệu nhiều hơn và giống một ứng dụng hơn, nên chúng bắt đầu nắm giữ dữ liệu nhiều hơn về các phần tử cụ thể. Lấy ví dụ, nếu chúng ta đang tạo ra một ứng dụng về âm thanh. Chúng ta có thể có mã đánh dấu chuẩn như sau:

Các mã đánh dấu ở trên là hoàn toàn chấp nhận được, nhưng đôi khi chúng ta có thể muốn lưu trữ các thông tin thêm về từng bản nhạc thay vì chỉ nguồn. Ví dụ, chúng ta có thể muốn chỉ định các thông tin cụ thể khác về bản nhạc như thời lượng, nhiệp điệu và nghệ sĩ. Chúng ta có thể làm điều này bằng cách gán các thuộc tính data tuỳ biến vào mỗi nguồn âm thanh chẳng hạn như:

Bằng cách cung cấp các thuộc tính data tuỳ biến, chúng ta có thể sau đó thực hiện các tác vụ như tìm kiếm, lọc hay nhóm chúng trong ứng dụng của chúng ta theo thời gian, nhịp điệu hoặc nghệ sĩ bằng cách sử dụng các giá trị liên quan của chúng.


Cách sử dụng thuộc tính Data

Tên của một thuộc tính data phải bắt đầu với chuỗi 'data-' và phải có ít nhất một ký tự sau dấu gạch nối sử dụng bất kỳ quy ước đặt tên của HTML.

Đặc tả của W3C cho thuộc tính data phát biểu rằng:

Thuộc tính data tuỳ biến nhằm mục đích lưu trữ dữ liệu tùy biến riêng cho trang web hoặc ứng dụng, mà đối với chúng không có thuộc tính hay phần tử nào thích hợp hơn.

Điều này có nghĩa rằng chúng ta chỉ nên sử dụng dữ liệu đó trong nội bộ ứng dụng của chúng ta và nó không nên được sử dụng để hiển thị các thông tin cho người dùng. Điều quan trọng cũng cần phải lưu ý là bạn có thể chỉ định bất kỳ số lượng các thuộc tính tuỳ biến nào cho một phần tử với bất kỳ giá trị nào mà bạn muốn.


Khi nào tôi nên sử dụng thuộc tính Data?

Chúng ta đã xem xét cách bạn có thể sử dụng thuộc tính data, nhưng không vì vậy mà bạn đã thật sự hiểu rõ về nó, hãy xem một vài ví dụ khác.

May mắn thay Webdesigntuts+ đã khái quát một số hướng dẫn chi tiết trong một số trường hợp sử dụng tốt. Một trong những hướng dẫn xem xét cách bạn có thể sử dụng chúng để định phong cách và hiển thị các menu thông báo bằng cách gán phần tử thông báo trong một thẻ liên kết. Lần này, thuộc tính data được sử dụng để chỉ ra giá trị bong bóng ở trong bong bóng thông báo.

Trong một chỉ dẫn nhanh khác chúng ta cũng có thể thấy cách nó được sử dụng như một phần của mã đánh dấu cho một tooltip

Lần này được sử dụng để hiển thị văn bản cho tooltip.


Khi nào tôi không nên sử dụng thuộc tính Data?

Chúng ta không nên sử dụng thuộc tính data cho bất cứ điều gì mà đã có sẵn một thuộc tính được xác lập hoặc thích hợp hơn. Ví dụ: nó sẽ không phù hợp để sử dụng:

Khi chúng ta có thể sử dụng thuộc tính datetime đã được xác định trong một phần tử time như dưới đây:

Thuộc tính data không nên được sử dụng như là một sự thay thế cho meta data hoặc các định dạng vi mô. Các định dạng vi mô được thiết kế chủ yếu cho con người và được giới thiệu để cung cấp cho chúng ta ngữ cảnh của mã đánh dấu. Ví dụ: nếu bạn có một Vcard cung cấp thông tin liên lạc về một cá nhân hoặc tổ chức thì bạn sẽ cung cấp cho nó một lớp 'vcard' để cho máy tính hiểu rằng đây là thông tin liên lạc.

Sử dụng định dạng vi mô bạn nên sử dụng mã đánh dấu của bạn như sau

thay vì sử dụng thuộc tính data chẳng hạn như

Để tìm hiểu thêm về các định dạng vi mô bạn có thể ghé thăm trang Mircorformats.org.


Sử dụng thuộc tính Data với CSS

Một khi chúng ta đã cài đặt các thuộc tính data bên trong mã đánh dấu HTML, thì chúng ta có thể chọn chúng bằng cách sử dụng CSS. Điều quan trọng cần lưu ý là bạn không nên sử dụng các thuộc tính data trực tiếp cho việc định phong cách, mặc dù trong một số trường hợp, nó có thể thích hợp. Chọn theo thuộc tính data trong CSS tương tự như chọn theo các thuộc tính khác, bạn có thể sử dụng chúng chỉ đơn giản như thế này:

Nếu ví dụ bạn đang tạo một trang web hoặc ứng dụng đa nền tảng thì bạn có thể muốn chọn một số nội dung cụ thể mà bạn chỉ nên xem trên điện thoại di động. Lấy ví dụ mã đánh dấu sau đây

Bằng cách sử dụng CSS sau đó bạn có thể ẩn tất cả các trang chỉ dành cho điện thoại di động khi được xem trên một máy tính để bàn.

Mặc dù nó không nên ẩn nội dung dựa trên thiết bị đang xem, nhưng có thể có một số trường hợp nó là phù hợp. Bạn nên dựa trên từng hoàn cảnh và các trường hợp riêng.

Cũng có thể sử dụng dữ liệu từ thuộc tính và hiển thị nó qua CSS. Mặc dù đặc tả kỹ thuật nói rằng bạn không nên sử dụng dữ liệu từ các thuộc tính tùy biến để hiển thị cho người dùng của bạn nhưng nó có thể được thực hiện, và trong một số trường hợp có thể chứng tỏ là phương pháp tốt nhất. Đây là cách để đạt được điều này.

Trong CSS bạn sẽ sử dụng phần tử giả ':after ' (hoặc một số nội dung khác được tạo ra) và sử dụng thuộc tính như là một phần content của 'after' như sau:

Điều này sau đó sẽ hiển thị 'This is the div content' trong div '.text'.


Sử dụng thuộc tính Data với jQuery

Bây giờ chúng ta đã xem xét cách bạn có thể chọn các phần tử với thuộc tính data bằng cách sử dụng CSS, hãy xem cách bạn có thể có nắm giữ dữ liệu đó bằng cách sử dụng jQuery.

Lưu ý: Xử lý dữ liệu vượt ra khỏi phạm vi của hướng dẫn này, vì hướng dẫn này đặc biệt nhắm vào các nhà phát triển và nhà thiết kế front-end.

Có một số cách để chúng ta có thể lấy được dữ liệu từ các phần tử bằng cách sử dụng jQuery. Hãy xem xét một số cách.

Nếu chúng ta có một thẻ liên kết, giống như ở trên, mà có một thuộc tính data là data-info, thì chúng ta có thể truy cập dữ liệu đó theo cùng một cách mà chúng ta sẽ lấy được giá trị từ bất kỳ thuộc tính khác.

Bạn có thể kiểm tra điều này bằng cách mở giao diện điều khiển js trong Web Inspector của bạn, sau đó chọn liên kết...

Điều tuyệt vời về thuộc tính data đó là chúng ta cũng có thể sử dụng nó để cung cấp dữ liệu json như thế này.

Bằng cách sử dụng jQuery, chúng ta có thể lấy được dữ liệu này sử dụng phương thức data của đối tượng jQuery.

Ví dụ trên thì sẽ xuất "bar" lên console.


Trình duyệt hỗ trợ

Tôi biết rằng trước khi bạn trở nên quá ham muốn về việc sử dụng thuộc tính mới này, thì bạn sẽ muốn biết những trình duyệt hỗ trợ nó và khi nào bạn có thể bắt đầu sử dụng nó. À, tin tốt là nó cũng được hỗ trợ bởi tất cả các trình duyệt hiện đại. Bất cứ thứ gì có hỗ trợ HTML sẽ có thể truy cập thuộc tính data. Nếu bạn đang sử dụng thuộc tính cho mục đích định phong cách cũng như truy cập dữ liệu (sử dụng thận trọng) thì trình duyệt sẽ cần phải hỗ trợ CSS3 Selectors.

Tin tốt hơn là tất cả các trình duyệt (ngay cả IE7) cho phép bạn sử dụng thuộc tính data-* trên các phần tử và nếu bạn đang sử dụng jQuery 1.4 hoặc mới hơn thì bạn có thể truy cập dữ liệu bằng cách sử dụng data của đối tượng jQuery. Tuy nhiên, nếu bạn chỉ đang sử dụng JavaScript thì bạn sẽ phải truy cập dữ liệu bằng cách sử dụng phương thức 'getAttribute' của JavaScript.

Để có được danh sách đầy đủ về trình duyệt hỗ trợ bạn có thể truy cập canIuse.com.


Kết luận

Các trang và ứng dụng web trở nên phức tạp hơn và bắt đầu nắm giữ thêm thông tin và dữ liệu, thuộc tính mới này chắc chắn là một bổ sung đáng giá cho bộ công cụ của bạn. Tôi đã sử dụng nó trong một số ví dụ thực tế và thấy nó là một cách rất hữu ích để cung cấp một trang web (nhanh hơn) đáp ứng tốt hơn, khi dữ liệu thay vì kéo về từ các máy chủ thì bây giờ có thể được tạo ra trong các mã đánh dấu và được sử dụng khi cần thiết.

Tóm lại, nếu bạn dính vào ba quy tắc sau, thì bạn có thể đảm bảo rằng bạn đang sử dụng thuộc tính mới theo cách hiệu quả nhất và ngữ nghĩa nhất.

  1. Chỉ sử dụng nó cho nội bộ trên trang web/ứng dụng của bạn. Nó không nên, ví dụ, được sử dụng một XML/RSS feed cho việc sử dụng trên các trang web hoặc ứng dụng bên ngoài.
  2. Không sử dụng nó chỉ cho việc định phong cách CSS.
  3. Không sử dụng nó để thay thế một thuộc tính hiện có hoặc phần tử mà sẽ thêm ngữ nghĩa hoặc là thích hợp.

Bây giờ thì bạn có một sự hiểu biết sâu hơn về thuộc tính data trong HTML5 và làm thế nào nó có thể được sử dụng, tôi khuyến khích bạn bắt đầu thực hiện nó trong các dự án của bạn ngay hôm nay.

Bạn đã sử dụng nó trong bất kỳ ví dụ thực tế nào chưa? Bạn đã sử dụng nó trong những trường hợp nào? Nó có giúp bạn tiết kiệm thời gian, hoặc là có bất cứ điều gì mà bạn muốn nhìn thấy được mở rộng trên thuộc tính này không? Hãy cho tôi biết trong phần bình luận dưới đây nhé.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.