HTML5 Cara Menggunakan Tag dan
Di antara beberapa tag baru yang tersedia dalam HTML5, Spesifikasi (seperti: angka, figcaption, dan ke samping), detail dan ringkasan tag, menurut saya, adalah yang paling berguna. Dengan tag baru ini, Anda dapat menyembunyikan beberapa konten panjang dan hanya menampilkan ringkasan.
Kita sebenarnya sering melihat efek ini, tetapi kebanyakan dari mereka masih dibangun di atas JavaScript atau saudaranya: jQuery, yang kebanyakan orang tidak mengerti. Sekarang, dengan elemen-elemen baru ini - detail dan ringkasan - segalanya akan menjadi lebih mudah.
Jadi, mari kita lihat bagaimana tag bekerja dalam skenario kasus nyata.
Dalam demo ini kita akan merangkum deskripsi produk. Pertama mari kita buat tag 'detail' dan kemudian letakkan semua konten beserta tag 'ringkasan' di dalamnya, seperti dalam contoh di bawah ini:
Spesifikasi MacBook Pro
- Tampilan layar lebar glossy 13,3 inci LED-backlit dengan ujung-ke-ujung, kaca tanpa gangguan (resolusi 1280 x 800-piksel).
- 2,4 GHz prosesor Intel Core i5 dual-core dengan 3 MB shared L3 cache untuk multitasking yang luar biasa.
- Intel HD Graphics 3000 dengan 384 MB DDR3 SDRAM dibagi dengan memori utama.
- Hard drive Serial ATA 500 GB (5400 RPM)
- RAM terpasang 4 GB (1333 MHz DDR3; mendukung hingga 8 GB)
Dalam contoh itu, saya telah menambahkan detail spesifikasi MacBook Pro, dan sekarang mari kita lihat bagaimana browser membuat tag tersebut.
Saya juga telah menambahkan judul dan lebih banyak deskripsi produk di atas detail untuk membuat demo di atas lebih masuk akal bagi Anda. Jadi apa yang Anda pikirkan? Cukup mudah, benar?
Mendukung Browser
Namun, sebelum Anda tergesa-gesa menerapkan tag ini ke seluruh situs web Anda, harus dicatat bahwa detail dan tag ringkasan saat ini hanya didukung di Chrome 12 dan di atasnya.
Bahkan Firefox terbaru belum mendukung mereka.
Jadi, jika Anda ingin menerapkan tag ini, Anda harus memasukkan fungsi mundur untuk browser yang tidak didukung. Berita baiknya, itu sederhana; Anda dapat menggunakan polyfill detail ini, yang secara otomatis akan mereplikasi fungsionalitas tag untuk browser lama.
Unduh file ini dan tautkan ke dokumen html bersama dengan jQuery (minimal 1,7+) dan pastikan Anda menempatkan polyfill sebelum tag tutup tubuh.
Dan di dalam tag kepala, masukkan tag kondisional berikut untuk menyertakan HTML5shiv untuk IE8 dan sebelumnya, jika tidak, Internet Explorer tidak akan mengenali tag baru ini.
Sekarang mari kita lihat bagaimana hasilnya di Internet Explorer:
Dan sekarang berfungsi di Internet Explorer juga.
- Demo
- Sumber Unduhan
Kesimpulan
Membuat efek petak umpet dengan JavaScript atau jQuery sebenarnya relatif mudah, tetapi didukung secara native dari browser jelas merupakan solusi yang jauh lebih mudah bagi banyak orang. Apakah Anda ingin melakukannya dalam JavaScript atau dalam HTML5, itu keputusan Anda. Terima kasih telah membaca, dan saya harap Anda menikmatinya.
