Menggunakan Normalize.css Untuk Pembangunan Homogen

Keserasian pelayar adalah sebahagian besar aksesibiliti di web. Pemaju perlu mempertimbangkan varians penonton dan versi penyemak imbas mereka yang memerlukan sokongan. Walaupun reset CSS adalah pilihan, kebanyakan devs lebih suka Normalize.css untuk kesederhanaan dan keserasian salibnya sepanjang semua pelayar web moden.

Dalam jawatan ini saya akan tutup asas-asas Normalize dan bagaimana ia membandingkan dengan resit CSS umum. Ini bukan perpustakaan rumit dan ia tidak boleh mengambil masa lebih daripada beberapa jam untuk difahami. Tetapi kunci untuk Normalize adalah pembelajaran bagaimana untuk melaksanakan dengan betul dan bijak.

Reset Pelayar vs Normalkan

Selama bertahun-tahun saya telah menggunakan versi semula CSS Eric Meyer yang disesuaikan. Ini sudah cukup untuk kebanyakan projek saya dan tidak menyebabkan sebarang masalah utama. Walau bagaimanapun Normalize mengubah paparan semula saya kerana ia berfungsi berbeza daripada tetapan semula CSS. Penting untuk anda memahami perbezaan.

Fikirkan Normalkan sebagai pakaian digunakan secara konsisten untuk semua pelayar, dan fikirkan a Tetapkan semula CSS sebagai peletupan termonuklear merentas semua pelayar.

Menormalkan gaya dan tajuk format, perenggan, sekatan, dan elemen umum supaya mereka kelihatan serupa (atau cukup dekat) dalam semua penyemak imbas yang disokong. CSS reset sepenuhnya lap bersih sehingga ada tiada mungkir untuk apa-apa.

Dengan menetapkan semula CSS tajuk anda boleh melihat sama dengan perenggan anda; elemen tidak mempunyai padding, margin, atau jarak apa-apa jenis. Dengan tetapan semula CSS anda mesti membekalkan kod baru untuk meningkatkan gaya. Dengan Normalize anda mendapat a gaya pra-reka yang boleh dibina.

Begitu salah satu daripada yang lebih baik daripada yang lain? Ini topik hangat, walaupun satu titik argumen menyatakan bahawa Normalize berfungsi lebih baik untuk keserasian dan menghasilkan saiz fail yang lebih kecil.

“Saya perlu berhujah bahawa normalisasi adalah lebih baik daripada menetapkan semula. Ini akan menyebabkan kurang CSS dipindahkan ke seluruh wayar, menggunakan lebih baik lalai UA, dan pemahaman yang lebih baik tentang bagaimana elemen bermakna untuk mempamerkan.”

Sama ada anda jatuh cinta dengan Normalize atau memilih set semula biasa, penting untuk sekurang-kurangnya memahami kedua-dua pihak dan memilih apa yang paling sesuai. Sangat sedikit pemaju memulakan pengekodan dari awal sehingga Normalize atau seting CSS hampir diperlukan untuk pembangunan frontend moden.

Jika anda ingin mencuba tetapan CSS di sini, terdapat beberapa pilihan popular:

Resipi Eric Meyer
Reset HTML5
Reset HTML5Doctor

Configure Normal

Menormalkan pencipta Nicolas Gallagher menulis jawatan pengenalan terkemuka dengan pernyataan ini:

“Normalize.css adalah fail CSS kecil yang menyediakan konsistensi silang pelayar yang lebih baik dalam gaya lalai elemen HTML. Ia moden, HTML5-siap, alternatif kepada semula CSS tradisional.”

Selama bertahun-tahun ini telah berkembang menjadi sebuah perpustakaan yang dipercayai yang digunakan oleh pemaju di seluruh dunia. Normalisasi telah pun digunakan untuk beberapa tahap dalam Bootstrap dan CSS Tulen.

Terdapat dua cara untuk menggunakan Normalize dalam projek: edit sumber untuk menyesuaikan gaya Normalizeheet anda sendiri, atau gunakannya sebagai pangkalan dan tambah gaya di atas.

Yang pertama adalah strategi memilih-dan-pilih di mana anda pergi melalui fail Normalize.css dan memadam apa sahaja yang anda tidak perlu membuat gaya tersuai anda sendiri. Ini adalah yang terbaik pada asas per-projek untuk memastikan fail yang rendah.

Sebagai alternatif, beberapa pembangun termasuk keseluruhan fail Normalize.css dan membina lembaran gaya mereka sendiri di atasnya. Lembaran gaya Normalized penuh merangkumi 420+ barisan kod yang bersamaan dengan ~ 6.8KB tidak dikompresi.

Kaedah tidak lebih baik daripada yang lain dan ia bernilai mengikuti apa sahaja yang terbaik untuk setiap projek, atau alur kerja pilihan anda.

Untuk memulakan sama ada muat turun satu salinan Normalize dari GitHub atau hantarkannya dari CDN luaran. Anda juga boleh menarik versi terbaru Normalize dari NPM seperti:

npm install --save normalize.css

Jika anda tidak mahu memuat turun sebarang fail, anda juga boleh membuat projek CodePen baru yang boleh menambahkan Normalize pada klik butang.

Oleh kerana Normalize adalah modular, anda boleh mengalih keluar bahagian untuk sementara atau bahkan membuat custom custom anda sendiri Normalize. Kemudian anda boleh memulakan setiap projek dengan bahagian pilih seperti elemen paparan HTML5 sambil mengeluarkan gaya untuk kandungan tertanam.

Setiap aturan Normalize mempunyai komen CSS yang sama yang menerangkan apa yang dilakukannya dan isu / pepijat yang diselesaikannya. Ada yang jelas seperti setting paparan: blok pada elemen HTML5 yang lebih baru.

Lain-lain kurang jelas seperti kod SVG ini yang menyembunyikan limpahan dalam Internet Explorer:

svg: not (: root) overflow: hidden;

Saya sangat mengesyorkan skimming stylesheet untuk melihat dengan tepat bagaimana ia beroperasi dan untuk belajar jika Normalize akan sesuai untuk projek anda.

Normalize.css Dalam Reka Bentuk Web

Versi terbaru Normalize v4.0 menawarkan sokongan pelayar yang meluas.

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

Dari apa yang saya boleh katakan, Normalize mungkin menyokong versi lama pelayar dengan kemas kini tetap seperti Firefox. Tetapi “rasmi” sokongan hanya termasuk dua versi terkini Chrome / Edge / FF / Opera.

Juga IE6 + dan Safari 4+ disokong dengan Normalize v1, tetapi versi itu tidak lagi dikemas kini.

Adalah penting bahawa anda menyemak versi penyemak imbas dengan alat seperti Google Analytics. Ini akan memberi anda gambaran yang lebih baik sama ada Normalize boleh menjadi alat yang berguna untuk kerja reka bentuk web moden.

Sumber Tambahan

Tidak banyak yang khusus untuk mengajar tentang Normalize sehingga kebanyakan pembelajaran berlaku dengan melakukan.

Dan dengan jelas tidak banyak yang menjelaskan bahawa anda tidak boleh mengambil dengan membaca lembaran gaya dan menyalin / menukar kod yang diperlukan. Tetapi jika anda mencari maklumat lain yang berkaitan saya telah menambah beberapa pautan di bawah.

artikel berkaitan

Nicolas Gallagher: Mengenai Normalize.css
Pengenalan Kepada Boilerplate HTML5
Normalize.css vs Reset.css: Yang Yang Digunakan?

Video Pengenalan

Menggunakan Normalize CSS
Mengatur dan Menormalkan oleh Envato
Nicolas Gallagher - Berpikir di luar CSS Boleh Skala