Menggunakan Normalize.css Untuk Pengembangan Homogen

Kompatibilitas browser adalah bagian besar dari aksesibilitas di web. Pengembang perlu mempertimbangkan varian audiens dan versi peramban mereka yang membutuhkan dukungan. Meskipun pengaturan ulang CSS adalah suatu opsi, sebagian besar pengembang lebih memilih Normalize.css karena kesederhanaan dan kompatibilitas silangnya di semua peramban web modern.

Dalam posting ini saya akan membahas dasar-dasar Normalisasi dan bagaimana membandingkannya dengan reset CSS umum. Ini bukan perpustakaan yang rumit dan tidak perlu lebih dari beberapa jam untuk mengerti. Tetapi kunci untuk Normalisasi adalah belajar bagaimana untuk mengimplementasikannya dengan benar dan bijaksana.

Reset Browser vs Normalisasi

Selama bertahun-tahun saya telah menggunakan versi khusus dari reset CSS Eric Meyer. Ini sudah cukup untuk sebagian besar proyek saya dan belum menyebabkan masalah besar. Namun Normalisasi mengubah pandangan saya tentang reset karena ini bekerja secara berbeda dari reset CSS. Penting bagi Anda untuk memahami perbedaannya.

Pikirkan Normalisasi sebagai a garmen diterapkan secara konsisten ke semua browser, dan pikirkan a Reset CSS sebagai peledakan termonuklir di semua browser.

Normalisasi gaya dan format judul, paragraf, blockquote, dan elemen umum tampak identik (atau cukup dekat) di semua browser yang didukung. CSS me-reset sepenuhnya menghapus yang bersih jadi ada tidak ada default untuk apa saja.

Dengan reset CSS, judul Anda dapat terlihat sama dengan paragraf Anda; elemen tidak memiliki bantalan, margin, atau jarak apa pun. Dengan reset CSS Anda harus memberikan kode baru untuk meningkatkan gaya. Dengan Normalisasi Anda mendapatkan gaya pra-desain yang dapat dibangun di atas.

Jadi, apakah yang satu ini lebih baik dari yang lain? Ini adalah topik yang hangat diperdebatkan, meskipun satu titik argumen menyatakan bahwa Normalisasi berfungsi lebih baik untuk kompatibilitas dan menghasilkan ukuran file yang lebih kecil.

“Saya harus berpendapat bahwa normalisasi lebih baik daripada mengatur ulang. Ini akan menghasilkan lebih sedikit CSS yang ditransfer melalui kabel, lebih baik menggunakan standar UA, dan pemahaman yang lebih baik tentang bagaimana elemen dimaksud menampilkan.”

Apakah Anda jatuh cinta dengan Normalisasi atau lebih suka pengaturan ulang tipikal, penting untuk setidaknya memahami kedua sisi dan memilih apa pun yang paling cocok. Sangat sedikit pengembang mulai pengkodean dari awal sehingga Normalisasi atau reset CSS hampir diperlukan untuk pengembangan frontend modern.

Jika Anda ingin mencoba pengaturan ulang CSS di sini ada beberapa pilihan populer:

Atur Ulang Eric Meyer
Reset HTML5
Reset HTML5Doctor

Normalisasi Konfigurasi

Pembuat normalisasi, Nicolas Gallagher, menulis sebuah posting pengantar yang memimpin dengan pernyataan ini:

“Normalize.css adalah file CSS kecil yang memberikan konsistensi lintas-browser yang lebih baik dalam gaya default elemen HTML. Ini adalah alternatif modern, siap-HTML5, untuk reset CSS tradisional.”

Selama bertahun-tahun ini telah berkembang menjadi perpustakaan tepercaya yang digunakan oleh pengembang di seluruh dunia. Normalisasi bahkan telah digunakan sampai taraf tertentu dalam Bootstrap dan Pure CSS.

Ada dua cara untuk menggunakan Normalize dalam suatu proyek: edit sumber untuk menyesuaikan Normalize stylesheet Anda sendiri, atau gunakan sebagai basis dan tambahkan gaya di atas.

Yang pertama adalah strategi memilih dan memilih di mana Anda pergi melalui file Normalize.css dan menghapus apa pun yang Anda tidak perlu membuat stylesheet kustom Anda sendiri. Ini yang terbaik berdasarkan proyek untuk menjaga ukuran file tetap rendah.

Atau beberapa pengembang memasukkan seluruh file Normalize.css dan membangun stylesheet mereka sendiri di atas itu. Lembaran penuh Normalize penuh mencakup 420+ baris kode yang sama dengan ~ 6.8KB terkompresi.

Tidak ada metode yang lebih baik dari yang lain dan layak mengikuti apa pun yang bekerja terbaik untuk setiap proyek, atau alur kerja pilihan Anda.

Untuk memulai, unduh salinan Normalize dari GitHub atau host dari CDN eksternal. Anda juga dapat menarik versi Normalisasi langsung dari NPM seperti:

npm instal --simpan normalize.css

Jika Anda tidak ingin mengunduh file apa pun, Anda bahkan dapat membuat proyek CodePen baru yang dapat menambahkan Normalisasi dengan mengklik tombol.

Karena Normalize adalah modular, Anda dapat menghapus bagian untuk sementara atau bahkan membuat build sendiri dari Normalize. Kemudian Anda dapat memulai setiap proyek dengan bagian-bagian tertentu seperti elemen tampilan HTML5 sambil menghapus gaya untuk konten yang disematkan.

Setiap aturan Normalisasi memiliki komentar CSS terkait yang menjelaskan apa yang dilakukannya dan masalah / bug apa yang dipecahkannya. Beberapa jelas seperti pengaturan tampilan: blok pada elemen HTML5 yang lebih baru.

Yang lain kurang jelas seperti kode SVG ini yang menyembunyikan overflow di Internet Explorer:

svg: not (: root) overflow: hidden;

Saya sangat merekomendasikan membaca sepintas stylesheet untuk mengetahui cara kerjanya dan mengetahui apakah Normalize akan tepat untuk proyek Anda.

Normalize.css Dalam Desain Web

Versi terbaru dari Normalize v4.0 menawarkan dukungan browser yang luas.

Chrome (dua terakhir)
Edge (dua terakhir)
Firefox (dua terakhir)
ESR Firefox
Internet Explorer 8+
Opera (dua terakhir)
Safari 6+

Dari apa yang saya tahu, Normalize dapat mendukung versi browser lama dengan pembaruan konstan seperti Firefox. Tetapi “resmi” dukungan hanya mencakup dua versi terbaru Chrome / Edge / FF / Opera.

IE6 + dan Safari 4+ juga didukung dengan Normalize v1, tetapi versi itu tidak lagi diperbarui.

Sangat penting bagi Anda memeriksa versi peramban dengan alat seperti Google Analytics. Ini akan memberi Anda ide yang lebih baik apakah Normalize dapat menjadi alat yang berguna untuk pekerjaan desain web modern.

Sumber Daya Lebih Lanjut

Tidak banyak yang bisa diajarkan secara khusus tentang Normalisasi sehingga sebagian besar pembelajaran terjadi dengan melakukan.

Dan sejujurnya tidak banyak yang bisa dijelaskan bahwa Anda tidak bisa mengambil dengan membaca stylesheet dan menyalin / mengubah kode sesuai kebutuhan. Tetapi jika Anda mencari info relevan lainnya, saya telah menambahkan beberapa tautan di bawah.

Video Pengantar