Normalize.css ve Reset CSS arasındaki fark nedir?

CSS Sıfırlama'nın ne olduğunu biliyorum, ama son zamanlarda Normalize.css adlı bu yeni şeyi duydum

Normalize.css ve Reset CSS arasındaki fark nedir ?

CSS'yi normalleştirmek ve CSS'yi sıfırlamak arasındaki fark nedir?

CSS Sıfırlama için yeni bir vızıltı mı?

Normalize.css üzerinde çalışıyorum.

Temel farklar:

1. Normalize.css her şeyi "açmak" yerine yararlı varsayılanları korur. Örneğin, normalize.css ekledikten sonra supveya sub"sadece çalışır" gibi öğeler (ve aslında daha sağlam hale getirilir), reset.css eklendikten sonra normal metinden görsel olarak ayırt edilemezler. Yani, normalize.css size görsel bir başlangıç ​​noktası (homojenlik) dayatmaz. Bu herkesin zevkine uygun olmayabilir. Yapılacak en iyi şey, her ikisini de denemek ve tercihlerinizle hangi jelleri görmek.

2. Normalize.css, reset.css için kapsam dışı olan bazı yaygın hataları düzeltir. Reset.css'den daha geniş bir kapsama sahiptir ve ayrıca HTML5 öğeleri için ekran ayarları, fontform öğelerine göre kalıtım eksikliği, font-sizerenderleme düzeltmesi pre, IE9'daki SVG taşması ve buttoniOS'ta stil hatası gibi yaygın sorunlar için hata düzeltmeleri sağlar .

3. Normalize.css geliştirici araçlarınızı karıştırmaz. Reset.css kullanırken yaygın bir tahriş, tarayıcı CSS hata ayıklama araçlarında görüntülenen büyük kalıtım zinciridir. Bu, hedeflenen stiller nedeniyle normalize.css ile böyle bir sorun değildir.

4. Normalize.css daha modülerdir. Proje nispeten bağımsız bölümlere ayrılmıştır, bu da web siteniz tarafından asla gerekmeyeceklerini biliyorsanız bölümleri (form normalizasyonu gibi) potansiyel olarak kaldırmanızı kolaylaştırır.

5. Normalize.css daha iyi belgelere sahiptir. Normalize.css kodu satır içi ve GitHub Wiki'de daha kapsamlı olarak belgelenir . Bu, her kod satırının ne yaptığını, neden dahil edildiğini, tarayıcılar arasındaki farkların neler olduğunu bulabileceğiniz ve kendi testlerinizi daha kolay gerçekleştirebileceğiniz anlamına gelir. Proje, kullanıcıları tarayıcıların varsayılan olarak öğeleri nasıl oluşturdukları konusunda eğitmeye yardımcı olmayı ve iyileştirmeler sunmalarını kolaylaştırmayı amaçlamaktadır.

Normalize.css ile ilgili bir makalede bunun hakkında daha ayrıntılı olarak yazdım.

En büyük fark şudur:

• CSS sıfırlamaları, tüm yerleşik tarayıcı stilini kaldırmayı amaçlamaktadır . H1-6, p, strong, em, et cetera gibi standart unsurlar, hiçbir dekorasyona sahip olmayan bir şekilde birbirine benzemektedir. Daha sonra tüm dekorasyonları kendiniz eklemeniz gerekiyor .

• CSS'yi normalleştirmek , yerleşik tarayıcı stilini tarayıcılar arasında tutarlı hale getirmeyi amaçlar . H1-6 gibi öğeler, tarayıcılar arasında tutarlı bir şekilde kalın ve daha büyük görünecektir. Daha sonra sadece tasarımınızın ihtiyaç duyduğu dekorasyondaki farkı eklemeniz gerekir.

Tasarımınız a) tipografi ve ortak kurallara uyuyorsa ve b) Normalize.css hedef kitleniz için çalışıyorsa, CSS sıfırlama yerine Normalize.CSS kullanmak kendi CSS'nizi daha küçük ve daha hızlı yazmanızı sağlar.

Normalize.css, yazarının iyi görüneceğini düşündüğü ve tarayıcılarda tutarlı görünmesini temel alan bir stiller dizisidir. Sıfırla, temel olarak stil öğelerini şeritler halinde alır, böylece her şeyin stili üzerinde daha fazla kontrol sahibi olursunuz.

Ben ikisini de kullanıyorum.

Bazı stilleri Sıfırla, bazıları Normalize.css. Örneğin, Normalize.css dosyasında, tüm giriş öğelerinin aynı yazı tipine sahip olmadığından emin olmak için bir stil vardır (metin girişleri ve textareas arasında). Reset'in böyle bir stili yoktur, bu nedenle girişlerin normalde istenmeyen farklı yazı tipleri vardır.

Yani, temelde, iki CSS dosyasını kullanmak daha iyi bir iş yapar 'her şeyi eşitlemek';)

Saygılarımızla!

Birincisi reset.css, kullanabileceğiniz en kötü kitaplıktır, çünkü HTML'nin standart yapısını kaldırır ve kenar boşluğu dolgu ve diğer niteliklerin değerlerini atadıktan sonra yazdığınız her şeyi metin olarak görüntüler 0. Yani, örneğin <H1>, bununla aynı olacağını göreceksiniz <H6>.

Öte yandan Normalize.cssstandart yapıyı kullanır ve içinde bulunan neredeyse tüm hataları düzeltir. Örneğin, bir tarayıcıdan diğerine bir form gösterme sorununu giderir. Normalleştir, öğelerinizin tüm tarayıcılarda aynı görünmesi için bu özellikleri değiştirerek bunu düzeltir.

Açıklamasından, kullanıcı aracısının varsayılan stilini, sıfırlama gibi tüm varsayılan stilleri sıyırmak yerine tüm tarayıcılarda tutarlı hale getirmeye çalışır.

Birçok CSS sıfırlamasının aksine , yararlı varsayılanları korur.

sıfırlama, özellikle karmaşık, kaynamayan tipte olmayan tasarım projelerinde özel tasarım spesifikasyonlarını karşılamak için bir gereklilik gibi görünmektedir. Normalleştirme, tamamen web programlamayı göz önünde bulundurarak ilerlemenin iyi bir yolu gibi görünüyor, ancak çoğu zaman web siteleri, web programlama ve UI / UX tasarım kuralları arasında bir evliliktir.

Bazen en iyi çözüm her ikisini de kullanmaktır. Bazen hiçbirini kullanmamaktır. Ve bazen, birini ya da diğerini kullanmaktır. Tüm tarayıcılarda kenar boşluğu ve dolgulama da dahil olmak üzere tüm stillerin sıfırlanması için reset.css komutunu kullanın. Ardından tüm dekorasyonları ve stilleri kendiniz uygulayın. Sadece yerleşik stilleri seviyorsanız, ancak normalleştirmeler gibi daha fazla tarayıcılar arası senkronizasyon istiyorsanız, normalize.css kullanın. Ancak, hem reset.css hem de normalize.css kullanmayı seçerseniz, önce reset.css stil sayfasını ve daha sonra normalize.css stil sayfasını (hemen) bağlayın. Bazen her zaman hangisinin daha iyi olduğu meselesi değil, hangisinin ne zaman kullanılacağı, ne zaman ne zaman kullanılacağı, ne zaman ne zaman kullanılacağı. BENİM NACİZANE FİKRİME GÖRE.

Bu soru zaten birkaç kez cevaplandı, her biri için kısa bir özet yapacağım, Eylül 2019 itibariyle bir örnek ve bilgiler:

• Normalize.css - adından da anlaşılacağı gibi, tarayıcılarındaki stilleri kullanıcı aracıları için normalleştirir , yani varsayılan olarak biraz farklı olmaları nedeniyle tüm tarayıcılarda aynı yapar.

Misal : <h1>içindeki etiket <section>varsayılan olarak Google Chrome, <h1>etiketin "beklenen" boyutundan daha küçük olacaktır . Microsoft Edge ise <h1>etiketin "beklenen" boyutunu yapıyor . Normalize.css bunu tutarlı hale getirir.

Şu anki durum : npm deposu normalize.css paketinin şu anda haftada 500 binden fazla indirime sahip olduğunu gösteriyor . Deponun projesindeki GitHub yıldızları 36k'den fazladır.

• CSS'yi Sıfırla - adından da anlaşılacağı gibi, tüm stilleri sıfırlar , yani tüm tarayıcının kullanıcı aracısı stillerini kaldırır.

Örnek : aşağıdaki gibi bir şey yapar:

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

Şu anki durum : Normalize.css'den çok daha az popüler olan reset-css paketi, haftada 26 bin indirme olduğunu gösteriyor. GitHub yıldızları sadece 200'dür, çünkü projenin deposundan fark edilebilir .