Homojen Gelişim İçin Normalize.css Kullanımı

Tarayıcı uyumluluğu, web’deki erişilebilirliğin büyük bir parçasıdır. Geliştiricilerin Destek gerektiren izleyici ve tarayıcı sürümlerinin çeşitliliği. CSS sıfırlamaları bir seçenek olmasına rağmen, çoğu geliştirici, tüm modern web tarayıcılarında basitliği ve çapraz uyumluluğu nedeniyle Normalize.css'yi tercih ediyor.

Bu yazıda anlatacağım Normalize'nin temelleri ve genel CSS sıfırlamaları ile karşılaştırması. Bu karmaşık bir kütüphane değildir ve anlaşılması birkaç saatten fazla sürmemelidir. Ama Normalize etmenin anahtarı öğrenmektir. Nasıl düzgün ve makul bir şekilde uygulamak.

Tarayıcı Sıfırlama vs Normalize

Yıllardır Eric Meyer'in CSS reset'lerinin özelleştirilmiş bir versiyonunu kullandım. Bunlar benim projelerimin çoğu için yeterliydi ve herhangi bir büyük soruna neden olmadı. Ancak Normalize, CSS sıfırlamadan farklı bir şekilde çalıştığı için sıfırlama görüşümü değiştirdi. Farklılıkları anlamanız önemlidir..

Normalize etmeyi bir tüm tarayıcılara tutarlı bir şekilde uygulanan giysi, ve düşün CSS bir termonükleer patlama olarak sıfırlandı tüm tarayıcılarda.

Stilleri ve biçimleri, başlıkları, paragrafları, blok alıntıları ve ortak öğeleri normalleştirme aynı gözükmek (veya yeterince yakın) tüm desteklenen tarayıcılarda CSS tamamen sıfırlar kayrak silerek temizleyin varsayılan yok hiçbir şey için.

Bir CSS sıfırlaması ile başlıklarınız paragraflarınızla aynı görünebilir; elemanların dolgusu, kenar boşluğu veya herhangi bir şekilde boşluk bırakmaz. CSS sıfırlama ile yeni kod girmelisin tarzı geliştirmek için. Normalize ile bir olsun önceden tasarlanmış tarz üzerine inşa edilebilir.

Peki bunlardan biri diğerinden daha mı iyi? Çok tartışılan bir konu, ancak bir argüman Normalize olduğunu belirtiyor uyumluluk için daha iyi çalışır ve daha küçük dosya boyutları üretir.

“Normalleşmenin sıfırlamaktan daha iyi olduğunu iddia etmek zorunda kalacağım. Kablo boyunca daha az CSS aktarılması, UA varsayılanlarının daha iyi kullanılması ve öğelerin nasıl olduklarının daha iyi anlaşılmasıyla sonuçlanacaktır. demek göstermek.”

Normalize'e aşık olsanız veya tipik bir sıfırlamayı tercih ediyor olsanız da, en azından her iki tarafı da anlamak ve en uygun olanı seçmek önemlidir. Çok az geliştirici sıfırdan kodlamaya başlar, bu nedenle modern ön uç geliştirme için Normalize veya bir CSS sıfırlama neredeyse gereklidir.

Burada bir CSS sıfırlama denemek istiyorsanız, bazı popüler seçenekler şunlardır:

Eric Meyer'nin Sıfırları
HTML5 Sıfırlama
HTML5Doctor Sıfırlama

Normalize Yap

Normalleştiren içerik oluşturucu Nicolas Gallagher bu ifadeyle önderlik eden bir giriş yazısı yazdı:

“Normalize.css, HTML öğelerinin varsayılan stilinde daha iyi tarayıcılar arası tutarlılık sağlayan küçük bir CSS dosyasıdır. Geleneksel CSS sıfırlama işlemine modern, HTML5 için hazır bir alternatif.”

Yıllar geçtikçe, bu dünya çapında geliştiriciler tarafından kullanılan güvenilir bir kütüphaneye dönüştü. Normalize Bootstrap ve Pure CSS'de bir dereceye kadar bile kullanılıyor.

Bir projede Normalize'yi kullanmanın iki yolu vardır: kendi Normalize stil sayfanızı özelleştirmek için kaynağı düzenleyin ya da bir üs olarak kullanın ve üstüne stil ekleyin.

İlki, Normalize.css dosyasından geçtiğiniz ve kendi özel stil sayfanızı oluşturmak için ihtiyaç duymadığınız şeyleri silmek için seç ve seç stratejisidir. Dosya boyutunu düşük tutmak için proje bazında en iyisi.

Alternatif olarak, bazı geliştiriciler Normalize.css dosyasının tamamını içerir ve bunun üzerine kendi stil sayfalarını oluşturur. Normalize stil sayfasının tamamı, sıkıştırılmamış ~ 6,8 KB değerine eşit 420+ kod satırını kapsar..

Her iki yöntem de diğerinden daha iyi değildir ve her proje için en çok işe yarar olanı veya tercih ettiğiniz iş akışını izlemeye değmez.

Başlamak için ya GitHub’dan bir Normalize kopyası indirin ya da harici bir CDN’de barındırın. Normalize'nin en yeni sürümünü NPM'den şöyle çekebilirsiniz:

npm install - save normalize.css

Herhangi bir dosya indirmek istemiyorsanız, bir düğmeye tıklayarak Normalize ekleyebileceğiniz yeni bir CodePen projesi bile yapabilirsiniz..

Normalize modüler olduğundan, bölümleri geçici olarak kaldırabilir veya kendi özel Normalize oluşturunuzu oluşturabilirsiniz. Ardından, her bir projeye gömülü içerik için stilleri kaldırırken HTML5 görüntüleme öğeleri gibi belirli bölümlerle başlayabilirsiniz..

Her Normalize kuralı, ne yaptığını ve hangi sorunları / sorunlarını çözdüğünü açıklayan CSS yorumuna sahiptir. Bazı ayar gibi belirgin Ekran bloğu daha yeni HTML5 öğelerinde.

Diğerleri, Internet Explorer’da taşmayı gizleyen bu SVG kodu gibi daha az belirgin:

svg: not (: root) taşma: gizli;

Tam olarak nasıl çalıştığını görmek ve normalize etmenin projeniz için uygun olup olmadığını öğrenmek için stil sayfasını gözden geçirmenizi şiddetle tavsiye ederim..

Web Tasarımında Normalize.css

Normalize v4.0'ın en yeni sürümü, yaygın tarayıcı desteği sunuyor.

Chrome (son iki)
Kenar (son iki)
Firefox (son iki)
Firefox ESR
Internet Explorer 8+
Opera (son iki)
Safari 6+

Söyleyebileceğim kadarıyla Normalize, Firefox gibi sürekli güncellemeleri olan tarayıcıların eski sürümlerini destekleyebilir. Fakat “resmi” desteği yalnızca Chrome / Edge / FF / Opera’nın en yeni iki sürümünü içerir..

Ayrıca IE6 + ve Safari 4+, Normalize v1 ile desteklenir, ancak bu sürüm artık güncellenmez.

Tarayıcı sürümlerini Google Analytics gibi bir araçla kontrol etmeniz çok önemlidir. Bu, Normalize’in modern web tasarım çalışmaları için faydalı bir araç olup olmadığı konusunda size daha iyi bir fikir verecektir..

Ek Kaynaklar

Normalize hakkında özel olarak öğretilecek çok şey yok, bu yüzden öğrenmenin çoğu bunu yaparak oluyor.

Gerçekte, stil sayfasını okuyarak ve kodu gerektiği gibi kopyalayarak / değiştirerek açamayacağınızı açıklayacak fazla bir şey yok. Ancak diğer alakalı bilgileri arıyorsanız, aşağıda bazı bağlantılar ekledim:.

İlgili Makaleler

Nicolas Gallagher: Normalize.css Hakkında
HTML5 Boilerplate Giriş
Normalize.css vs Reset.css: Hangisini Kullanır?

Tanıtım Videoları

Normalize CSS Kullanımı
Envato ile sıfırlar ve normalleştirme
Nicolas Gallagher - Ölçeklendirilebilir CSS'in Ötesinde Düşünmek