aldiunanto.com

Apa itu Modernizr?

Helo sobat, pernah ga sih kalian nemu sebuah file javascript bernama ‘modernizr.js’ di website-website yang iseng kalian lihat source code nya?? Sepertinya di website-website modern dan keluaran baru, sudah banyak yang memakai file javascript tersebut.

Pertanyaannya, apa sih modernizr itu?
Modernizr.js adalah sebuah library javascript yang berfungsi untuk mendetek apakah browser si pengguna sudah support atau belum tag-tag HTML dan CSS terutama HTML versi terbaru yang belum lama dirilis yaitu HTML 5 dan untuk layoutnya CSS 3.

Emang kenapa kalo browser saya ga support tag-tag baru? apa dampaknya?
Tentu saja akan terjadi error dan beberapa kode pasti tidak akan bekerja seperti <video>, <aside>, <articles>, dan CSS nya : box-shadow, border-radius. Sehingga tampilan website kalian menjadi tidak terlihat sebagaimana mestinya, alias hancur!

Nah dengan menggunakan file library javascript ini, kita dapat mencegah hal itu terjadi. Modernizr bekerja sebagai penyempurnaan hal-hal tersebut yang merupakan kelemahan dari browser yang sedang dipakai.

Bagaimana cara menggunakannya?

Untuk memakai dan menginstall Modernizr, pertama download terlebih dahulu file librarynya dari official website-nya langsung Disini, setelah itu di dalam tag <head> tambahkan link untuk file tersebut yang sudah kita download tadi, contoh :

Setelah itu, tambahkanlah sebuah class bernama no-js di dalam tag <html> anda.

Mengapa ditambahkan class no-js ?
Karena itu adalah sebuah keadaan yang memang modernizr butuhkan untuk memulai kode-kode modernizr tersebut agar berfungsi. Jika javascript pada browser anda tidak berfungsi atau di non-aktifkan, maka Modernizr tidak bisa bekerja dan fitur-fitur dari website kalian pun akan tidak bekerja dengan baik. Namun ketika javascript pada browser di-aktifkan, maka dengan parameter no-js tersebut, Modernizr akan bekerja secara dinamis apa-apa saja fitur atau tag-tag pada website yang tidak support dengan browser yang sedang anda pakai. Pada suatu kasus, hasilnya setelah di render akan seperti ini :

Modernizr akan bekerja untuk ‘mengaktifkan’ tag-tag atau properti css apa saja yang sebelumnya browser tidak support. Dengan seperti itu, tampilan website anda pun akan terlihat sempurna seperti yang diinginkan tidak peduli browser apa yang user pakai, support atau tidak, tidak masalah! 😀

Sudah ngerti? sip. Semoga bermanfaat sobat!

One thought on “Apa itu Modernizr?

Leave a Reply

%d bloggers like this: