Apa perbedaan antara Normalize.css dan Reset CSS?

565

Saya tahu apa itu Reset CSS, tetapi baru-baru ini saya mendengar tentang hal baru ini bernama Normalize.css

Apa perbedaan antara Normalize.css dan Reset CSS ?

Apa perbedaan antara menormalkan CSS dan mengatur ulang CSS?

Apakah itu hanya kata buzz baru untuk Reset CSS?

css normalize-css Jitendra Vyas
sumber

Jawaban:

800

Saya bekerja di normalize.css.

Perbedaan utama adalah:

  1. Normalize.css mempertahankan default yang berguna alih-alih "menghapus" segalanya. Misalnya, elemen menyukai supatau sub"hanya berfungsi" setelah menyertakan normalize.css (dan sebenarnya dibuat lebih kuat) sedangkan mereka secara visual tidak dapat dibedakan dari teks normal setelah menyertakan reset.css. Jadi, normalize.css tidak memaksakan titik awal visual (homogeni) kepada Anda. Ini mungkin tidak sesuai selera semua orang. Hal terbaik untuk dilakukan adalah bereksperimen dengan keduanya dan melihat gel mana dengan preferensi Anda.

  2. Normalize.css mengoreksi beberapa bug umum yang berada di luar cakupan untuk reset.css. Ini memiliki cakupan yang lebih luas daripada reset.css, dan juga menyediakan perbaikan bug untuk masalah umum seperti: pengaturan tampilan untuk elemen HTML5, kurangnya fontpewarisan berdasarkan elemen formulir, mengoreksi font-sizerendering untuk pre, SVG overflow di IE9, dan buttonbug styling di iOS.

  3. Normalize.css tidak mengacaukan alat dev Anda. Iritasi umum saat menggunakan reset.css adalah rantai pewarisan besar yang ditampilkan dalam alat debugging browser CSS. Ini bukan masalah dengan normalize.css karena stylings yang ditargetkan.

  4. Normalize.css lebih modular. Proyek ini dipecah menjadi bagian yang relatif independen, sehingga mudah bagi Anda untuk berpotensi menghapus bagian (seperti normalisasi formulir) jika Anda tahu mereka tidak akan pernah dibutuhkan oleh situs web Anda.

  5. Normalize.css memiliki dokumentasi yang lebih baik. Kode normalize.css didokumentasikan sebaris dan lebih komprehensif dalam GitHub Wiki . Ini berarti Anda dapat mengetahui apa yang dilakukan setiap baris kode, mengapa dimasukkan, apa perbedaan di antara browser, dan lebih mudah menjalankan tes Anda sendiri. Proyek ini bertujuan untuk membantu mengedukasi orang-orang tentang bagaimana browser membuat elemen secara default, dan membuatnya lebih mudah bagi mereka untuk terlibat dalam mengirimkan perbaikan.

Saya telah menulis lebih detail tentang ini di sebuah artikel tentang normalize.css

necolas
sumber
19
Cukup sering, Anda tidak membiarkannya nol (saat menggunakan reset), jadi Anda sebenarnya menulis lebih sedikit kode. Jika Anda ingin menghapus beberapa nilai, maka gaya tersebut digabungkan ke elemen yang dimaksudkan dan harus memudahkan debugging.
necolas
8
Dan ITU adalah masalah yang signifikan dengan banyak reset, termasuk fakta bahwa mem-zero-out semuanya juga memperlambat browser.
Rob
4
Dan ITU juga merupakan keuntungan dari pengaturan ulang - menormalkan kesalahan dalam menentukan
Daniel Sokolowski
4
Apakah saya kehilangan titik ketika saya berpikir bahwa, ya, biasanya Anda tidak ingin padding dan margin menjadi nol tetapi, tidak, Anda tidak ingin default juga?
guioconnor
9
Secara pribadi saya sudah pergi Normalisasi, meskipun saya masih menggunakannya. Banyak poin di sini benar-benar berlebihan (dokumentasi yang lebih baik ...?). Normalisasi adalah pendapat, jadi itu memaksakan titik awal visual pada Anda (terlepas dari apa yang dikatakan jawaban ini). Itu juga bisa menjadi usang. Reset.css tidak akan pernah usang setelah Anda menggunakannya. Dan Anda lebih cenderung menginginkan margin dan padding menjadi 0 daripada angka lain yang dapat Anda pikirkan, jadi sebenarnya membantu jika semuanya diatur ulang saat Anda berkembang. Namun, normalisasi bagus untuk masalah browser, dan itulah alasan utama saya menggunakannya.
Chuck Le Butt
255

Perbedaan utama adalah:

  • Reset CSS bertujuan untuk menghapus semua gaya browser bawaan. Elemen standar seperti H1-6, p, kuat, em, dan lain-lain akhirnya terlihat persis sama, tidak memiliki hiasan sama sekali. Maka Anda seharusnya menambahkan semua hiasan sendiri.

  • Normalisasi CSS bertujuan untuk membuat gaya peramban bawaan secara konsisten di seluruh peramban. Elemen-elemen seperti H1-6 akan tampak berani, lebih besar dan lain-lain secara konsisten di seluruh browser. Anda kemudian seharusnya menambahkan hanya perbedaan dalam dekorasi yang dibutuhkan desain Anda.

Jika desain Anda a) mengikuti konvensi umum untuk tipografi dan lain-lain, dan b) Normalize.css bekerja untuk audiens target Anda, kemudian menggunakan Normalize.CSS sebagai ganti pengaturan ulang CSS akan membuat CSS Anda sendiri lebih kecil dan lebih cepat untuk ditulis.

Jesper M
sumber
6
@Jitendra Vyas: - benar-benar hanya ada satu cara: baca kode Normalize.CSS yang dikomentari dengan baik, dan putuskan apakah itu cocok untuk kebutuhan Anda atau tidak. github.com/necolas/normalize.css/blob/master/normalize.css
Jesper M
Catatan lain: Normalize.css bertujuan untuk tidak mengganggu mungkin, yang memungkinkan pengembang untuk menulis kode mereka lebih mudah tanpa harus melawan konflik spesifik.
zzzzBov
jadi katakanlah saya ingin menggunakan reset ketika mengembangkan. Dan setelah selesai saya ingin normalize.css atau beberapa JS yang mengambil semua hal yang belum saya ubah dan sama di browser. Atau saya telah berubah dan setelah mengubah mereka menjadi sama seperti di browser dan menghapusnya untuk sisi klien. Jadi reset akan membantu sambil mengembangkan 'program' itu di sisi klien yang lebih cepat. Keduanya bahagia. Dan cara yang jauh lebih cerdas untuk hidup.
Muhammad Umer
Dalam praktiknya, Anda akhirnya akan menimpa semua gaya Normalize. Teorinya hebat, tetapi dalam dunia OOCSS ini tidak pernah berhasil dalam praktiknya.
Chuck Le Butt
40

Normalize.css pada dasarnya adalah serangkaian gaya, berdasarkan apa yang menurut pengarangnya akan terlihat bagus, dan membuatnya terlihat konsisten di seluruh browser. Setel ulang pada dasarnya menghapus penataan dari elemen sehingga Anda memiliki kontrol lebih besar atas penataan segala sesuatu.

Saya menggunakan keduanya.

Beberapa gaya dari Reset, beberapa dari Normalize.css. Misalnya, dari Normalize.css, ada gaya untuk memastikan semua elemen input memiliki font yang sama, yang tidak terjadi (antara input teks dan textareas). Reset tidak memiliki gaya seperti itu, sehingga input memiliki font yang berbeda, yang biasanya tidak diinginkan.

Jadi pada dasarnya, menggunakan dua file CSS melakukan pekerjaan yang lebih baik 'Menyamakan' semuanya;)

salam!

ricmetalster
sumber
1
Ini adalah jawaban pragmatis yang bagus. Itu belum tentu satu atau yang lain. Ambil apa yang Anda inginkan dari masing-masing. Saya suka reset penuh, tetapi Normalizer menawarkan beberapa bit bagus yang bekerja dengan baik di atas.
Undistraction
3
@ricmetalster, jadi apakah Anda harus menulis ulang css Anda sendiri untuk menggabungkan fungsi dari reset.css dan normalize.css?
ayjay
2
Jika Anda ingin menggunakan keduanya, dapatkah Anda daftar "reset" terlebih dahulu kemudian "normalkan" kemudian tambahkan gaya Anda di atas?
Craig
Saya mengambil pendekatan "jangan over think it" dan menggunakan keduanya dan memanggil mereka sebagai termasuk dalam impor SASS saya @import '_normalize' && '_reset'
killscreen
6

Pertama reset.cssadalah perpustakaan terburuk yang dapat Anda gunakan, karena menghapus struktur standar HTML dan menampilkan semua yang Anda tulis hanya sebagai teks, setelah menetapkan nilai margin padding dan atribut lainnya 0. Jadi misalnya Anda akan menemukan itu <H1>, akan sama dengan <H6>.

Di sisi lain Normalize.cssmenggunakan struktur standar dan juga memperbaiki hampir semua kesalahan yang ada di dalamnya. Misalnya itu memperbaiki masalah dengan menampilkan formulir dari satu browser ke browser lain. Normalisasikan perbaikan ini dengan memodifikasi fitur ini sehingga elemen Anda akan ditampilkan sama di semua browser.

N.Elayed
sumber
1
Tergantung pada kasus penggunaan Anda. Mempertimbangkan contoh Anda, jika saya perlu memodifikasi gaya font dari semua tag heading untuk proyek saya, saya tidak akan benar-benar menggunakan nilai defaultnya, bukan? Seseorang seharusnya tidak memberi label perpustakaan sebagai yang "terburuk" hanya karena seseorang tidak dapat menemukan kegunaan dalam proyeknya sendiri.
Debojyoti Ghosh
Salah satu tujuan utama reset adalah untuk mengatasi masalah yang muncul dari gaya yang diterapkan browser yang sangat berguna. Saya juga berpikir itu tidak boleh dianggap sebagai perpustakaan.
Isaac Pak
@ gdebojyoti Ada beberapa kasus penggunaan, tapi saya sangat jarang ingin semua judul saya memiliki ukuran yang sama, terlepas dari gaya font masing-masing.
James Beninger
5

Yah dari deskripsinya tampaknya mencoba membuat gaya default agen pengguna konsisten di semua browser daripada menghapus semua gaya default seperti reset.

Mempertahankan standar yang bermanfaat, tidak seperti banyak pengaturan ulang CSS.

dbb
sumber
Jadi lebih baik menggunakan Normalize css over Reset?
Jitendra Vyas
3
@Jitendra Vyas - no. Alatnya berbeda, tidak lebih baik atau lebih buruk daripada satu sama lain. Pilih salah satu yang membantu Anda memecahkan masalah yang Anda miliki terbaik.
Quentin
8
Saya harus mengatakan bahwa normalisasi adalah lebih baik dari ulang. Ini akan menghasilkan lebih sedikit CSS yang ditransfer melalui kabel, penggunaan yang lebih baik dari standar UA, dan pemahaman yang lebih baik tentang bagaimana elemen dimaksudkan untuk ditampilkan.
Ryan Kinal
5

pengaturan ulang tampaknya merupakan keharusan untuk memenuhi spesifikasi desain khusus, terutama pada proyek desain jenis non-boilerplate yang kompleks. Kedengarannya seperti normalisasi adalah cara yang baik untuk melanjutkan dengan pemrograman web murni dalam pikiran, tetapi seringkali situs web adalah perkawinan antara pemrograman web dan aturan desain UI / UX.

pengguna3170099
sumber
Ini membutuhkan lebih dari 99% kasus penggunaan.
Michael
@Michael yang mana? mengatur ulang atau menormalkan? (Hanya mencoba memahami pikiran orang tentang masalah ini)
Bren
1
@ Baik reset dan normalisasi. Mengetahui nilai-nilai CSS default untuk setiap elemen adalah bagian dari menjadi pengembang front end yang baik. Saya melihatnya sebagai metode brute force yang tidak perlu.
Michael
4
@Michael> Knowing the default CSS values for each element is part of being a good front end developer- ini mirip dengan mengatakan Anda lebih suka bekerja dengan elektron daripada bahasa pemrograman, karena itulah yang membuat pengembang yang baik. Menggunakan alat secara efisien membuat seseorang menjadi pengembang yang baik, sebaliknya biasanya masuk dalam kategori fanatik yang membuang-buang waktu
nicholaswmin
1

Terkadang, solusi terbaik adalah menggunakan keduanya. Terkadang, tidak menggunakan keduanya. Dan kadang-kadang, itu menggunakan satu atau yang lain. Jika Anda ingin semua gaya, termasuk pengaturan ulang margin dan padding di semua browser, gunakan reset.css. Kemudian oleskan semua dekorasi dan styling sendiri. Jika Anda hanya menyukai styling bawaan tetapi ingin lebih banyak sinkronisasi lintas-browser yaitu normalisasi maka gunakan normalize.css. Tetapi jika Anda memilih untuk menggunakan reset.css dan normalize.css, tautkan stylesheet reset.css terlebih dahulu dan kemudian stylesheet normalize.css (segera) sesudahnya. Terkadang itu tidak selalu merupakan masalah yang lebih baik, tetapi kapan harus menggunakan mana versus kapan harus menggunakan keduanya versus kapan tidak menggunakan keduanya. MENURUT OPINI SAYA.

Sean Tank Garvey
sumber
0

Pertanyaan ini sudah dijawab beberapa kali, saya akan memberikan ringkasan singkat untuk masing-masing, contoh dan wawasan pada September 2019:

  • Normalize.css - seperti namanya, itu menormalkan gaya di browser untuk agen pengguna mereka, yaitu membuat mereka sama di semua browser karena alasan secara default mereka sedikit berbeda.

Contoh : <h1>tag di dalam <section>secara default Google Chrome akan membuat ukuran <h1>tag lebih kecil dari "yang diharapkan" . Microsoft Edge di sisi lain membuat ukuran <h1>tag "yang diharapkan" . Normalize.css akan membuatnya konsisten.

Status saat ini : repositori npm menunjukkan bahwa paket normalize.css saat ini memiliki lebih dari 500 ribu unduhan per minggu. GitHub membintangi proyek repositori lebih dari 36k.

  • Reset CSS - seperti namanya, ini me - reset semua gaya, yaitu menghapus semua gaya agen pengguna browser.

Contoh : itu akan melakukan sesuatu seperti itu di bawah ini:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Status saat ini : ini jauh kurang populer daripada Normalize.css, paket reset-css menunjukkan sekitar 26 ribu unduhan per minggu. Bintang GitHub hanya 200, karena dapat dilihat dari repositori proyek .

Daniel Danielecki
sumber