Thuộc tính dữ liệu HTML5 cho phép bạn gán dữ liệu tùy chỉnh cho một phần tử. Bài viết này sẽ xem xét những điều cần biết về các thuộc tính dữ liệu HTML5, làm thế nào để sử dụng nó và cung cấp các ví dụ về khi nó sẽ được sử dụng lý tưởng.
Giới thiệu
Trước khi HTML5, chúng tôi đã phải dựa vào cách sử dụng 'đẳng cấp' hoặc 'rel' thuộc tính để lưu trữ các đoạn nhỏ của dữ liệu mà chúng ta có thể sử dụng trong các trang web của chúng tôi. Điều này đôi khi dẫn đến các vấn đề và có thể gây ra xung đột giữa kiểu dáng và chức năng của trang web. Sự ra đời của HTML5 đã giới thiệu một thuộc tính mới gọi là "dữ liệu". Trong bài viết này thiet ke web o tphcm sẽ được xem xét một số ví dụ về cách thức chúng ta sẽ sử dụng thuộc tính này cũng như cách nó phải được sử dụng đúng cách.
Như các trang web ngày càng trở nên dữ liệu điều khiển và ứng dụng giống như, họ đang bắt đầu nắm giữ nhiều dữ liệu hơn về các yếu tố cụ thể. Lấy ví dụ, nếu chúng tôi đã tạo ra một ứng dụng âm thanh. Chúng ta có thể đánh dấu tiêu chuẩn như:
1
2
3
| < âm thanh điều khiển = "điều khiển" > < nguồn src = "track1.mp3" loại = "audio / mpeg" /></ âm thanh > |
Các đá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ữ nhiều thông tin về mỗi theo dõi khác với nguồn. Ví dụ chúng ta có thể muốn có thể chỉ định theo dõi thông tin cụ thể khác như thời gian, tiến độ và nghệ sĩ. Chúng ta có thể làm điều này bằng cách chỉ định tùy chỉnh dữ liệu thuộc tính cho mỗi nguồn âm thanh như:
1
2
3
| < âm thanh điều khiển = "điều khiển" > < nguồn src = "track1.mp3" loại = "audio / mpeg" dữ liệu thời gian = "1min5secs" dữ liệu độ = "125bpm" dữ liệu-nghệ sĩ = "The Beatles" /></ âm thanh > |
Bằng cách cung cấp các thuộc tính dữ liệu tùy chỉnh sau đó chúng tôi có thể thực hiện các nhiệm vụ như tìm kiếm, lọc hay nhóm chúng trong ứng dụng của chúng tôi bởi thời gian, tiến độ hoặc nghệ sĩ sử dụng các giá trị liên quan của họ.
Làm thế nào để sử dụng các dữ liệu thuộc tính
Tên của một thuộc tính dữ liệu phải bắt đầu với chuỗi 'dữ liệu- và phải chứa ít nhất một ký tự sau dấu nối sử dụng bất kỳ quy ước đặt tên HTML .
Các đặc điểm kỹ thuật W3C cho dữ liệu thuộc tính nói rằng:
Thuộc tính tùy chỉnh dữ liệu được dùng để lưu trữ dữ liệu tùy chỉnh tới các trang hoặc ứng dụng, mà không có các thuộc tính hoặc các yếu tố 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 nội bộ trong ứng dụng của chúng tôi và nó không nên được sử dụng để hiển thị thông tin cho người dùng của chúng tôi. Nó cũng quan trọng cần lưu ý là bạn có thể gán bất kỳ số lượng các thuộc tính tùy chỉnh cho một phần tử với bất kỳ giá trị.
Khi tôi nên sử dụng các thuộc tính dữ liệu?
thiet ke web tphcm đã xem xét làm thế nào bạn có thể sử dụng các thuộc tính dữ liệu nhưng để bạn có được một sự hiểu biết rõ ràng, chúng ta hãy xem xét một vài ví dụ khác.
May mắn Webdesigntuts + đã bao phủ một số tuts chi tiết về một số trường hợp sử dụng các ví dụ tốt. Một trong những tuts nhìn vào cách bạn có thể sử dụng chúng để phong cách và thông báo hiển thị trình đơn bong bóng bằng cách chỉ định các mục thông báo trong một thẻ neo. Lần này thuộc tính của dữ liệu được sử dụng để chỉ ra giá trị bong bóng của bong bóng thông báo.
1
| < một href = "#" class = "màu hồng" dữ liệu bong bóng = "2" > Hồ sơ </ a > |
Trong một mẹo nhanh chóng , chúng tôi cũng có thể thấy nó được sử dụng như một phần của đánh dấu cho một tooltip
1
| < một href = "#" class = "tooltip" dữ liệu-tip = "này là đỉnh!" > Đây là liên kết </ a > |
Thời gian này được sử dụng để hiển thị văn bản cho tooltip.
Khi tôi không nên sử dụng các dữ liệu thuộc tính?
Chúng ta không nên sử dụng các thuộc tính dữ liệu cho bất cứ điều gì mà đã có một thuộc tính đã được thành lập hoặc thích hợp hơn. Ví dụ nó sẽ là không thích hợp để sử dụng:
1
| < khoảng dữ liệu thời gian = "20:00" > 20:00 < khoảng > |
khi chúng ta có thể sử dụng đã được xác định
datetime thuộc tính trong một thời gian yếu tố như dưới đây:
1
| < thời gian datetime = "20:00" > 20:00 </ thời gian > |
Thuộc tính dữ liệu không nên được sử dụng như là một thay thế cho siêu dữ liệu hoặc các định dạng vi mô. Định dạng Micro được thiết kế chủ yếu cho con người và đã được giới thiệu để cung cấp cho bối cảnh đánh dấu của chúng tôi. Ví dụ, nếu bạn có một vCard cung cấp thông tin liên lạc về một tổ chức cá nhân hoặc sau đó bạn sẽ cung cấp cho nó một lớp học của "vcard" để cho máy hiểu rằng đây là thông tin liên lạc.
Sử dụng các vi định dạng bạn nên sử dụng đánh dấu của bạn như
1
2
3
| < div class = "vcard" > < div class = "fn" > Aaron Lumsden </ div ></ div > |
thay vì sử dụng các dữ liệu thuộc tính như
1
2
3
| < div class = "vcard" > < khoảng dữ liệu tên = "Aaron Lumsden" > Aaron Lumsden </ div ></ div > |
Để tìm hiểu thêm về các định dạng vi bạn có thể truy cập Mircorformats.org .
Sử dụng dữ liệu thuộc tính Với CSS
Một khi chúng ta đã thực hiện các thuộc tính dữ liệu trong mã HTML của chúng tôi chúng tôi có thể nhắm mục tiêu 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 dữ liệu thuộc tính trực tiếp cho việc sử dụng các phong cách, mặc dù trong một số trường hợp, nó có thể thích hợp. Nhắm mục tiêu thuộc tính dữ liệu trong CSS cũng tương tự như nhắm mục tiêu 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:
1
2
3
| [Dữ liệu vai trò = "trang" ] { / * Styles * /} |
Nếu ví dụ bạn đang tạo trang web thân thiện với một thiết bị chéo hoặc ứng dụng thì bạn có thể muốn nhắm mục tiêu một số nội dung cụ thể mà bạn chỉ nên xem trên điện thoại di động. Hãy đánh dấu sau
1
2
3
| < div dữ liệu vai trò = "di động" >Chỉ nội dung di động</ div > |
Sử dụng CSS thì bạn có thể ẩn tất cả các chỉ trang điện thoại di động khi được xem trên một máy tính để bàn.
1
2
3
| div [dữ liệu vai trò = "di động" ] { màn hình hiển thị : không ; } |
Mặc dù nó không nên che giấu nội dung dựa trên thiết bị xem, có thể có một số trường hợp nó là thích hợp. Bạn nên căn cứ trên từng trường hợp cá nhân và trường hợp.
Nó cũng có thể sử dụng dữ liệu từ các thuộc tính và hiển thị nó thông qua CSS. Mặc dù các đặc điểm kỹ thuật nói rằng bạn không nên sử dụng các dữ liệu từ thuộc tính tùy chỉnh để hiển thị cho người dùng của bạn, nó có thể được thực hiện, và trong một số trường hợp có thể chứng minh phương pháp tốt nhất. Đây là cách nó đạt được.
1
| < div class = "test" dữ liệu nội dung = "Đây là nội dung div" > kiểm tra </ div > |
Trong CSS sau đó bạn sẽ sử dụng ': sau khi' yếu tố giả (hoặc một số nội dung phát sinh khác) và sử dụng các thuộc tính như một phần của "sau" nội dung như sau:
1
2
3
4
5
6
7
| .test { hiển thị : inline- khối ;}.test: sau khi { nội dung : attr (dữ liệu nội dung);} |
Điều này sau đó sẽ hiển thị 'Đây là nội dung div' trong div '.text.
Sử dụng dữ liệu thuộc tính Với jQuery
Bây giờ, chúng tôi đã làm thế nào bạn có thể nhắm mục tiêu các yếu tố với các thuộc tính dữ liệu sử dụng CSS, chúng ta hãy xem làm thế nào bạn có thể có được giữ của dữ liệu sử dụng jQuery.
Lưu ý: Xử lý dữ liệu là ra khỏi phạm vi của hướng dẫn này, như hướng dẫn này đặc biệt nhằm giúp các nhà phát triển trước hết và nhà thiết kế.
Có một vài cách chúng ta có thể nhận được dữ liệu từ các yếu tố sử dụng jQuery.Chúng ta hãy xem xét một số trong những người.
1
| < một href = " http://www.google.com " class = "nút" dữ liệu thông tin = "Các thế giới công cụ tìm kiếm phổ biến nhất" > Google </ a > |
Nếu chúng ta có một thẻ neo, như trên, mà đã có một thuộc tính dữ liệu của dữ liệu thông tin sau đó chúng ta có thể truy cập dữ liệu trong cùng một cách mà chúng ta nhận được bất kỳ giá trị thuộc tính khác.
1
2
3
4
5
| $ ( '.button' ) Tích vào ( chức năng (e) { e.preventDefault (); thisdata = $ ( này ) .attr ( 'dữ liệu thông tin' ); console.log (thisdata); }); |
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 thanh tra trang web của bạn, sau đó nhấn vào liên kết ..
Những điều tuyệt vời về các thuộc tính dữ liệu là chúng ta cũng có thể sử dụng nó để cung cấp dữ liệu JSON như thế này.
1
| < một href = "google" class = "nút" dữ liệu thông tin = '{"foo": "bar"}' > </ a > |
Sử dụng jQuery, chúng tôi có thể nhận được dữ liệu này sử dụng phương pháp đối tượng dữ liệu của jQuery.
1
2
3
4
5
| $ ( '.button' ) Tích vào ( chức năng (e) { e.preventDefault (); thisdata = $ ( 'div' ) .data ( 'thông tin' ) .foo; console.log (thisdata); }); |
Ví dụ trên sau đó sẽ đăng nhập "bar" trên bàn điều khiển đăng nhập.
Hỗ trợ Cross Browser
Tôi biết rằng trước khi bạn nhận được quá ham chơi về việc sử dụng thuộc tính mới này bạn sẽ muốn biết trình duyệt hỗ trợ nó và khi bạn có thể bắt đầu sử dụng nó. Cũng là tin tốt là nó cũng được hỗ trợ trong tất cả các trình duyệt hiện đại. Bất cứ điều gì có hỗ trợ HTML sẽ có thể truy cập dữ liệu thuộc tính. Nếu bạn đang sử dụng các thuộc tính cho mục đích phong cách cũng như để truy cập dữ liệu (sử dụng cẩn thận) sau đó trình duyệt sẽ cần phải hỗ trợ bộ chọn CSS3.
Nhưng sẽ tốt hơn mặc dù là tất cả các trình duyệt (IE7) cho phép bạn đã sử dụng các dữ liệu- * thuộc tính vào các yếu tố và nếu bạn đang sử dụng jQuery 1.4 hoặc cao hơn thì bạn có thể truy cập dữ liệu bằng cách sử dụng dữ liệu đối tượng jQuery. Tuy nhiên, nếu bạn chỉ sử dụng JavaScript sau đó bạn sẽ phải truy cập vào dữ liệu sử dụng phương pháp 'getAttribute' của JavaScript.
Đối với sự hỗ trợ danh sách đầy đủ các số liệu bạn có thể kiểm tra canIuse.com .
Kết luận
Như các trang web và các ứng dụng web trở nên phức tạp hơn và bắt đầu tổ chức 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 chào mừng vào hộp công cụ. Tôi đã sử dụng nó trong một vài ví dụ thế giới thực tại và đã tìm thấy nó một cách rất hữu ích để cung cấp một phản ứng nhanh hơn (nhanh hơn) trang web như là dữ liệu đó sẽ có cách khác đã phải được lấy từ máy chủ có thể được tạo ra trong đánh dấu và 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 đây, 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 của nó.
- Chỉ sử dụng nó để sử dụng nội bộ trên trang web của bạn / ứng dụng. Nó không nên, ví dụ, được sử dụng trong thức ăn chăn nuôi XML / RSS để sử dụng trên các trang web bên ngoài hoặc các ứng dụng.
- Không sử dụng nó chỉ cho CSS.
- Không sử dụng nó để thay thế một thuộc tính hiện có hoặc yếu tố đó sẽ là ngữ nghĩa nhiều hơn hoặc thích hợp.
Bây giờ bạn có một sự hiểu biết sâu sắc hơn về các thuộc tính dữ liệu HTML5 và làm thế nào nó có thể được sử dụng, tôi khuyên bạn nên bắt đầu thực hiện nó trong dự án của bạn ngày hôm nay.
Bạn đã sử dụng nó trong bất kỳ ví dụ thế giới thực? Những gì kịch bản có bạn sử dụng nó trong? Có tiết kiệm thời gian hoặc là có bất cứ điều gì mà bạn muốn xem mở rộng ra với thuộc tính này? Hãy cho tôi biết trong các ý kiến dưới đây.
Bài viết khác: thiet ke web o Ha Noi
Đăng nhận xét