Elemen Interaktif Yang Dapat Anda Bangun dengan HTML & CSS

Elemen Interaktif Yang Dapat Anda Bangun dengan HTML & CSS

Selama bertahun-tahun, interaktivitas di web berarti menggunakan JavaScript. Baik itu vanilla JS atau library seperti jQuery atau React, bahasa ini telah menjadi pintu gerbang untuk membangun elemen yang dapat berinteraksi dengan pengguna.

Dan sementara JavaScript masih sangat berguna dalam skenario ini – itu tidak lagi menjadi persyaratan. Saat ini banyak yang dapat dicapai dengan kombinasi HTML dan CSS. Setiap standar telah diperluas untuk menyertakan fitur yang dulunya eksklusif untuk bahasa lain.

Evolusi ini membawa beberapa manfaat. Pertama, sangat mengurangi kerumitan membangun elemen-elemen ini. Anda tidak perlu memuat pustaka eksternal atau khawatir tentang penguasaan sintaksis JavaScript. Pada gilirannya, itu juga meningkatkan kinerja dan memastikan kompatibilitas browser.

Terdengar menarik? Hari ini, kami akan menunjukkan kepada Anda beberapa elemen interaktif umum yang dapat Anda buat hanya dengan HTML dan CSS.

UI akordeon

Akordeon telah lama dibuat dengan bantuan dari JavaScript. Pustaka UI jQuery bahkan termasuk elemen. Ini menyederhanakan proses pembuatan dan penataan, tetapi ini bukan kode yang paling berkinerja.

Terutama ketika Anda menganggap bahwa HTML sekarang memiliki details dan summary tag bawaan. Dengan beberapa markup dan gaya dasar, dimungkinkan untuk membuat UI yang menarik dan fungsional. Itu juga kompatibel dengan semua browser utama.

Perlu disebutkan bahwa metode ini tidak menawarkan berbagai macam efek khusus. Sebagai catatan MDN:

Sayangnya, saat ini tidak ada cara bawaan untuk menganimasikan transisi antara terbuka dan tertutup.

Minus peringatan itu, ini adalah alternatif yang sangat layak untuk memuat perpustakaan JavaScript.

Di bawah ini adalah contoh dasar dari apa yang dapat dilakukan hanya dengan beberapa baris HTML dan CSS.

Akordeon HTML Sederhana Menggunakan <details> oleh Eric Karkovac

Lihat Pena Akordeon HTML Sederhana Menggunakan

oleh Eric Karkovac

Menu Navigasi Lanjut

Membuat navigasi yang berfungsi di seluruh browser dan perangkat dulunya cukup menantang. Terutama saat membuat menu multi-level atau mega. Fitur lanjutan sering kali memerlukan penggantian agar semuanya tetap berfungsi di browser lawas.

Dan itu bahkan tidak memperhitungkan layar kecil. Menu yang sepenuhnya terpisah mungkin perlu diterapkan untuk memastikan kemudahan penggunaan pada perangkat seluler.

Syukurlah, ada banyak kemajuan di bidang ini. Dengan menggabungkan HTML nav tag, daftar tidak berurutan, dan CSS, kami dapat mendukung spektrum penuh perangkat. Tidak hanya mereka dapat terlihat sebagus menu JavaScript-berat di masa lalu, tetapi mereka juga dapat tampil lebih efisien.

Menu Mega Responsif & Menu Dropdown Hanya Menggunakan HTML & CSS oleh Muhammad Fadzrin Madu

Lihat Pena Menu Mega Responsif dan Menu Dropdown hanya menggunakan HTML & CSS oleh Muhammad Fadzrin Madu

permainan

Game berbasis web telah ada sejak lama – sejak zaman Flash (teguk!). Dan bahkan setelah platform itu runtuh, proses pembangunannya masih rumit.

Membuat animasi yang halus, memproses perhitungan matematis, dan memungkinkan input pengguna secara tradisional membutuhkan skrip dan penggunaan perpustakaan tingkat lanjut. Tapi itu belum tentu terjadi lagi.

Sekarang, CSS dapat digabungkan dengan HTML canvas, SVG, dan pernak-pernik lainnya untuk menciptakan beberapa hasil yang sangat kuat. Meskipun Anda tidak akan salah mengira game CSS murni ini sebagai judul mutakhir yang dimainkan di konsol Anda, tetap saja mereka mengesankan.

Paling tidak, mereka membuat pemborosan waktu yang menarik!

Game Hantu Bustin CSS Murni dengan Variabel CSS oleh Jhey

Lihat Pena Game hantu CSS murni dengan variabel CSS #CodePenChallenge oleh Jhey

Pemutar Media

Sama seperti game, multimedia di web pernah menjadi wilayah plugin browser. Beberapa di antaranya karena format kepemilikan, karena vendor bersaing untuk mendapatkan pangsa pasar untuk codec mereka. Penyedia konten (dan dengan demikian, desainer) terpaksa memilih satu atau lebih format untuk tersedia bagi pengguna. Dan pengguna perlu menginstal perangkat lunak yang tepat untuk memutar media. Itu berantakan.

Tetapi meskipun format seperti MP4 menjadi standar terbuka, pemutaran tetap rumit. Namun, pergeseran ke HTML5 menempatkan banyak beban fungsionalitas pada browser. Itu video dan audio elemen memanfaatkan pemutar media internal dengan berbagai fitur opsional.

Dan sementara JavaScript masih direkomendasikan untuk UI yang lebih disesuaikan, itu tidak lagi menjadi kebutuhan. Beberapa gaya dasar dapat dicapai dengan CSS. Plus, kompatibilitas browser untuk elemen asli sangat kuat.

Gaya CSS Audio HTML5 oleh Dani Castanos

Lihat Pena Gaya CSS Audio HTML5 oleh Dani Castanos

Membangun Dasar-dasar dan Selanjutnya

Kemajuan dalam CSS dan HTML telah melakukan keajaiban untuk mendorong web maju. Kita tidak lagi perlu menggunakan pustaka kode besar atau proses yang terlalu rumit untuk menghadirkan interaktivitas dasar. Staples yang didukung secara asli ini lebih dari mampu melakukan pekerjaan itu.

Itu kabar baik, karena desainer web perlu memperhitungkan berbagai perangkat yang terus berkembang. Elemen seperti navigasi dan pemutar media yang hanya berfungsi tanpa memerlukan perpustakaan pihak ketiga sangat penting untuk tujuan itu.

Tentu, JavaScript dan sejenisnya masih ada untuk membawa hal-hal ke tingkat berikutnya. Tapi sekarang mungkin untuk membangun dasar-dasar tanpa mereka.

Post Comment