HTML5 Cách sử dụng thẻ và
Trong số một số thẻ mới có sẵn trong HTML5, Thông số kỹ thuật (như: nhân vật, tượng hình, và qua một bên), chi tiết và tóm lược theo ý kiến của tôi, là hữu ích nhất. Với các thẻ mới này, bạn có thể ẩn một số nội dung dài và chỉ hiển thị tóm tắt.
Chúng tôi thực sự thường thấy hiệu ứng này xung quanh, nhưng hầu hết chúng vẫn được xây dựng dựa trên JavaScript hoặc người anh em của nó: jQuery, điều mà hầu hết mọi người không hiểu. Bây giờ, với những yếu tố mới - chi tiết và tóm lược - mọi thứ sẽ trở nên dễ dàng hơn.
Vì vậy, hãy xem cách các thẻ hoạt động trong một trường hợp thực tế.
Trong bản demo này, chúng tôi sẽ tóm tắt một mô tả sản phẩm. Trước tiên, hãy tạo thẻ 'chi tiết' và sau đó đặt tất cả nội dung cùng với thẻ 'tóm tắt' bên trong thẻ, như trong ví dụ bên dưới:
Thông số kỹ thuật MacBook Pro
- Màn hình rộng 13,3 inch LED-backlight với kính cạnh, không bị gián đoạn (độ phân giải 1280 x 800 pixel).
- Bộ xử lý lõi kép Intel Core i5 2,4 GHz với bộ nhớ cache L3 được chia sẻ 3 MB để đa nhiệm tuyệt vời.
- Đồ họa Intel HD 3000 với 384 MB DDR3 SDRAM được chia sẻ với bộ nhớ chính.
- Ổ cứng ATA 500 GB nối tiếp (5400 vòng / phút)
- RAM 4 GB được cài đặt (DDR3 1333 MHz; hỗ trợ tối đa 8 GB)
Trong ví dụ đó, tôi đã thêm chi tiết thông số kỹ thuật của MacBook Pro và bây giờ hãy xem trình duyệt hiển thị các thẻ đó như thế nào.
Tôi cũng đã thêm một tiêu đề và nhiều mô tả về sản phẩm bên trên các chi tiết để làm cho bản demo ở trên trở nên hợp lý hơn với bạn. Vậy bạn nghĩ như thế nào? Nó khá dễ, phải không?
Hỗ trợ trình duyệt
Tuy nhiên, trước khi bạn vội vàng áp dụng thẻ này cho toàn bộ trang web của mình, cần lưu ý rằng các chi tiết và thẻ tóm tắt hiện chỉ được hỗ trợ trên Chrome 12 trở lên.
Ngay cả Firefox mới nhất cũng chưa hỗ trợ chúng.
Vì vậy, nếu bạn muốn áp dụng thẻ này, bạn cần bao gồm chức năng dự phòng cho các trình duyệt không được hỗ trợ. Tin tốt là nó đơn giản; bạn có thể sử dụng polyfill chi tiết này, nó sẽ tự động sao chép chức năng thẻ cho các trình duyệt cũ.
Tải xuống tệp này và liên kết nó với tài liệu html cùng với jQuery (tối thiểu 1.7+) và đảm bảo bạn đặt polyfill trước thẻ đóng thân.
Và bên trong thẻ head, chèn thẻ có điều kiện sau để bao gồm HTML5shiv cho IE8 trở về trước, nếu không, Internet Explorer sẽ không nhận ra các thẻ mới này.
Bây giờ hãy xem cách nó bật ra trong Internet Explorer:
Và bây giờ nó cũng hoạt động trên Internet Explorer.
- Bản giới thiệu
- Tải xuống nguồn
Phần kết luận
Tạo hiệu ứng ẩn và hiển thị như vậy với JavaScript hoặc jQuery thực sự tương đối dễ dàng, nhưng việc nó được hỗ trợ từ trình duyệt chắc chắn là một giải pháp dễ dàng hơn nhiều đối với nhiều người. Cho dù bạn muốn làm điều đó bằng JavaScript hay trong HTML5, đó là quyết định của bạn. Cảm ơn đã đọc, và tôi hy vọng bạn thích nó.
