CSS'de sıfırlama girintileri. CSS sıfırlama kullanmaya değer mi

Aktar

Bu makale, CSS Taming'in konusu üzerindeki döngünün ilkidir. Bugün teknolojiye bakacağız CSS sıfırlandı..

Ona neden ihtiyacın var?

Her tarayıcı, çeşitli HTML öğeleri için varsayılan stillerini ayarlar. CSS sıfırlama yardımıyla, stilleri çapraz tarayıcıyı sağlamak için bu farkı seviye yapabiliriz.

Örneğin, bir öğe kullanıyorsunuz a. Belgenizde. Çoğu tarayıcı gibi Internet Explorer. ve Firefox bağlantı ekle mavi renk ve keskin. Ancak, beş yaşında birinin yaratmaya karar verdiğini hayal edin. yeni tarayıcı (Hadi ultrabrowser diyelim). Tarayıcı geliştiricileri mavi ve rahatsız edici vurgulamadı, bu yüzden linkleri tahsis etmeye karar verdiler. kırmızı ve cesur yazı tipi. Öğe için stillerin temel değerini ayarlarsanız, buna dayanır. a., onu görmek istediğiniz gibi olduğu ve ultrabrowser'ın geliştiricilerini görüntülemek için tercih edilmediği gibi olduğu garanti edilecektir.

Ama şimdi bireysel paragraflar arasında da dahil olmak üzere hiç girintilerimiz yok! Ne yapalım? Yalan söylemeyin ve korkmayın: Deşarjımızın altında İhtiyacımız olan kuralı açıklarız. Yapılabilir hale getirin farklı yollar: Aşağıda veya paragrafın üstünde bir girinti belirtin, yüzde, piksel veya em içinde belirtin.

En önemli şey, tarayıcı şimdi kurallarımıza göre oynuyor ve buna göre değil. Bu şekilde yapmaya karar verdim:

* (Marj: 0; Dolgu: 0;) P (Marj: 5px 0 10px 0;)

Sonuç olarak, üçüncü örnekte görülebildiklerimiz vardı.

Projenizde belirli bir görevi çözerseniz, sıfırlama için kendi stillerinizi oluşturabilirsiniz. Buna rağmen, yok adım adım liderlik Kendi CSS sıfırlamanızı oluşturarak. Kendi ilkelerinize ve kendi tarzınıza tavsiye ederiz.

Bir seçim yapmanıza yardımcı olmak için, birkaç bağlantı daha vereceğim:

Daha azı daha - CSS'yi sıfırlama seçimimi (Ed Elliot).

2. CSS sıfırlamanız, tarayıcıyı görebilen ilk şeydir.

Öğeler için kendi stillerinizi kurduktan sonra stilleri sıfırla yanlış bir yaklaşımdır. Bu durumda, tarayıcı ekranını beklemek iyi bir şey yok. İlk önce CSS sıfırlamasını ve ardından diğer tüm stilleri bağladığınızı unutmayın.

Evet, çok saçma olduğunu anlıyorum, ama bu Mala'dan Mala'dan büyük geliştiricilerin en büyük hatalarından biri. Birçoğu sadece unut.

Bazıları mantıklı bir soru sorabilir: Neden devam ediyor? Cevap basittir: CSS dosyası metninin altında kaydedilen kurallar (ve hatta belgedeki bağlantılarıyla daha düşük), daha önce bildirilen kuralların üzerine yazılır.

Konudan büyük ölçüde hareket etmem ve devam edelim. Örneğimize Eric Meyer Stillerini uygulayın, ancak sonra 4 örnekte gösterildiği gibi özelliklerimizin açıklamaları. Matematik aşağıdakileri söyleyebilir: "Kanıtlamak için ne gerekiyordu."

3. CSS sıfırlama için ayrı bir CSS belgesi kullanın

Bu tavsiyenin bahsetmesi için (hayır, beni zorlamadılar). CSS RESET için ayrı bir dosya kullanmak, çok sayıda geliştirici desteğinin ortak bir uygulamasıdır.

Aslında, yaratılışın konumuna uyuyorum bir büyük css dosyası Bu yaklaşımın daha yüksek performansı nedeniyle. Ama B. bu konu Çoğu ile aynı fikirde olma eğilimindeyim: CSS sıfırlama ayrı bir dosyaya (genellikle reset.css denir) alınmalıdır. Bu durumda, diğer CSS kurallarından dallanmak için herhangi bir çaba sarf etmeden çeşitli projelerde kullanabilirsiniz.

4. Evrensel bir seçici kullanmaktan kaçınmaya çalışın

Bu konsept çalışması gerçeğine rağmen, uygulaması çoğu zaman bazı tarayıcılarla uyumsuzluk nedeniyle arzu edilmez (örneğin, bu seçici, Internet Explorer'da yanlış şekilde işlenir). Bu tekniği yalnızca basit, küçük, statik ve öngörülebilir sayfalar için kullanmalısınız (eğer yapmanız gerekiyorsa).

Bu tavsiye, özellikle CMS temaları gibi çözümler geliştirdiğinizde önemlidir. Nasıl kullanılacağını ve nasıl değiştirileceğini önceden tahmin edemezsiniz. Tüm kalemler için temel CSS kurallarını, bu öngörülemeyen (daha küçük bir hacim) bir evrensel seçicilerin bir mekanizması için kullanmaktan daha iyi tanımlamak daha iyidir.

5. CSS sıfırlama kullanılırken yedekli özelliklerden kaçının

CSS sıfırlama için ayrı bir dosya sevmememin bir başka nedeni, sonraki CSS özelliklerinin bir sonraki bildirimlerinin potansiyel fazlalığıdır. Stillerinizin bireylerinin tekrarı, tüm CSS dosyaları seti arasında bir movietone ve kaçınılmalıdır. Tabii ki, bazen stil tarzına ayak uydurmak ve bazılarını birleştirmek için çok tembeliz, ama en azından deneyin!

Eric'den CSS RESET'e dönelim. Hat yüksekliği, renk ve arka plan öğesi için varsayılan değerler ayarlar vücut. Aşağıdaki şekilde:

Vücut (Hat Yüksekliği: 1; Renk: Siyah; Arka Plan: Beyaz;)

Zaten öğenin nasıl görüneceğini zaten bildiğini varsayalım. vücut.:

arka plan rengi: #cccccc;
renk: # 996633;
Belirli bir arka plan resmini tekrarlamak için yatay olarak istiyorsunuz.

Bu durumda, özelliklerinizi tanımlamak için yeni bir seçici oluşturmaya gerek yoktur - bunları CSS sıfırlamasında etkinleştirebilirsiniz. Hadi yapalım:

Vücut (Hat Yüksekliği: 1; Renk: # 996633; Arka Plan: #CCC URL (Tilid-Image.gif) Tekrar-x üst sol;)

CSS'nin sıfırlanmasını değiştirmekten korkmayın. Kendiniz için ayarlayın, kendiniz üzerinde çalışmasını sağlayın. Özel durumunuzda ihtiyacınız olarak değiştirin, yeniden oluşturun, kaldırın ve ekleyin.

Eric Meyer bunun hakkında şöyle dedi: "Herkesin CSS sıfırlamayı değişiklik yapmadan kullanması gerektiğinde bu durum değil."

CSS'yi sıfırla. (Sıfırlama stilleri), CSS ile sıfırlanır, tarayıcıların varsayılan olarak yüklendiği HTML elemanlarının parametrelerinden bazıları. Örneğin, bu unsurlar, başlangıçta sıfır olmayan dikey alanları (CSS) sunan paragrafları (etiket) içerir. İşaretli listeler (TAG) Sadece alanı yok, aynı zamanda belirli bir tip belirteç (CSS) vb.

Şimdi bu sıfırlama CSS'ye ihtiyacınız olanı düşünelim, bize ne verebilir? Sitenizin sayfalarını yücelttiğinizi ve aynı zamanda, boyutları tamamen düzenlendiğinden, varsayılan olarak sunulan paragrafların alanlarını değiştirmediğinizi hayal edin. Ama söyle bana, lütfen, ve zaten var olan ve hala görünen, dünyanın tüm tarayıcılarının aynı boyutta alanları yaratacağına nereye karar verdiniz? Dahası, neden düzeninizi test ettiğiniz tarayıcıların onların içinde değişmeyeceğini düşünüyorsunuz? sonraki sürümleri Bu alanların boyutu tamamen tamamen kaldırılmaz mı? Ne kokuyor?

Böylece, CSS'yi atmak, ayetler bu tür yanlış anlamalardan sınırlıdır, yani ilk önce CSS özelliklerinin tüm "kritik" değerlerini sıfırlar ve sonra geri eklerler, ancak kendi boyutlarıyla birlikte. Böylece, sitenin tüm tarayıcılarda eşit görüneceğinden emin olabilirsiniz. Kesinlikle stilleri sıfırlamazsınız, ancak düzeni ayarlamak için gerekli parametreler Elementler, ancak bir yerde bir yerde kaçırılacak ve belirli bir noktada "yüzer" bir riski vardır.

Yukarıdakilere dayanarak, CSS rahatlamasının özelliklerinden biri, kullanımından sonra, birçok HTML elemanı normal görünümlerini kaybeder. Ve paragraflardaki alanların kaybı yeni başlayanlar içindir, yeni başlayanlar için beklenen bir şey, örneğin, etiketler kullanılarak oluşturulan düğmelerin veya aniden aniden olağan metneye benzer hale gelmesi gerçeği - tam bir sürprizdir. Ancak bu utanmaz olmamalıdır, çünkü bu stiller için ve sıfırlanır, böylece pedigreer daha sonra onları yenisiyle belirtmeyi unutmadı.

Stilleri sıfırlamanın çok fazla yolu var ve ne seçip seçtiğinizi - sadece size bağlıdır, ancak size bir tane söyleyebilirim - en iyi sıfırlama, deneyiminize ve alışkanlıklarınıza göre kendinizi oluşturduğunuz kişidir. Henüz böyle bir deneyime sahip değilseniz, aşağıda önerilen seçeneklerden birini kullanabilirsiniz.

Kodun başında CSS'yi sıfırlamak için her zaman stilleri belirtin, aksi takdirde parametrelerden bazıları çalışmayabilir çünkü stil öncelikleriHTML sayfasını ve CSS kodunu işlerken yüklü tarayıcılardır.

CSS'yi evrensel bir seçici ile sıfırlayın

* (Yazı Tipi-Ailesi: Miras; / * Tüm unsurlar Ebeveyn Yazı Tipi Kulaklığı * / Yazı Tipi Tarzı: Devralın; / * Tasarımın Mirası * / Yazı Tipi Ağırlığı: Miras; / * Yağın Mirası * / Dikey Hizala: Temel; / * Dikey Temel Hizalama * / Yazı Tipi Boyutu:% 100; / * Yazı Tipi Boyutu% 100 * / Arka Plan: Şeffaf; / * Tüm elemanların arka planı Şeffaf * / Sınır: 0; / * Çerçeveyi kaldır * / Anahat: 0; / * Konturları Kaldır * / Kenar Boşluğu: 0; / * Alanları çıkarın * / dolgu: 0; / * Girintileri kaldır * /)

Örnek açıklaması

Bu örnekte evrensel seçici Belirtilen stiller hemen sayfada bulunacak olan tüm HTML öğelerinde sıfırlanır. Gördüğünüz gibi, çoğu özellik emniyet ağı için, değerleri olarak tam olarak belirtilir ve böylece tarayıcıların CSS şartnamesine göre varsayılan olarak yerine geçmesi gerekir. Fakat zaten bildiğiniz gibi, pratikte, tüm bunlar tamamen farklıdır ve eğer özelliğin, tüm önde gelen tarayıcılardaki ebeveynlerinden elde edilen öğeler tarafından devralındıysa, CSS özelliği tarafından belirtilen aynı harici alanlar her zaman başlangıçta sıfıra eşit değildir.

Ancak çerçevenin (CSS) ve konturların (CSS) boyutları varsayılan olarak sıfır değildir, ancak zaten şartnameye göre. Bununla birlikte, kalınlığı sıfırlandı, böylece gösterge gerekli olacağı yerde açıkça belirtmeyi unutmaz.

Yahoo!'dan CSS'yi sıfırla

Vücut, DIV, DL, DT, DD, UL, LI, H1, H2, H3, H4, H5, H6, Önceden, Form, Fieldet, Giriş, Textarea, P, BlockQuote, TH, TD (Marj: 0; Dolgu: 0;) Fieldet, IMG, ABBR, Kısaltma (Sınır: 0;) Adres, Başlık, Cite, Kod, DFN, EM, Güçlü, Th, VaR (Yazı Tipi Stili: Normal; Yazı Tipi Ağırlığı: Normal;) Tablo (Sınır çökmesi: çöküş; / * Tablo tabloları için ortak sınırlar * / Sınır aralığı: 0; / * Hücreler arasında sıfırlama mesafesi * /) başlık, TH (metin-hizala: sol; / * Metin hizalaması sol kenara * /) OL, UL (Liste tarzı: Yok; / * Listelerin işaretleyicilerini kaldır * /) H1, H2, H3, H4, H5, H6 (Yazı tipi boyutu:% 100; Yazı tipi ağırlığı: Normal;) S: Önce, S: Sonra (İçerik: ""; / * Q * /) etiketinden alıntıları iptal ediyoruz

Örnek açıklaması

Bir seferde Yahu kendi gözüne sıfırlama sürümünü geliştirdi. Burada, belirli öğelerin özellikleri zaten değişiyor, bu da onları kontrol etmede daha fazla esneklik elde etmeyi mümkün kılar. dış türler. Örneğin, işaretçiler listelerden çıkarılır ve etiket CSS özelliğini kullanarak alıntılardır. Bu yaklaşımın avantajları açıktır, ancak eksi daha hacimli ve bazen gereksiz kod içerir. Ancak hiç kimse, herhangi bir CSS sıfırlamayı ihtiyaçlarınıza göre değiştirmeniz için sizi rahatsız etmeyin. Diyelim ki, size gereksiz bir şekilde silersiniz. tag seçicileri Ya da sadece teklifleri kaldırmayın, ancak derhal gerekli görünümü sorun.

CSS'yi Eric Meyer'den sıfırla

Html, vücut, div, yayılma, applet, nesne, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ön, a, abbr, kısaltma, adres, büyük, cite, kod, del, dfn, Em, img, ins, kbd, q, s, samp, küçük, grev, güçlü, alt, sup, tt, var, b, u, ben, merkezi, dl, dd, ol, ul, li, fieldet, Form, etiket, efsane, tablo, başlık, td, tfoot, thead, th, td, makale, bir kenara, tuval, detaylar, gömme, şekil, figcaption, altbilgisi, başlık, hgroup, menü, nav, çıktı, yakut, Bölüm, özet, zaman, işaret, ses, video (kenar boşluğu: 0; dolgu: 0; sınır: 0; yazı tipi boyutu:% 100; yazı tipi: miras; dikey hizalama: taban çizgisi;) Makale, bir kenara, detaylar, figcaption, Şekil, Altbilgi, Başlık, Hgroup, Menü, NAV, Bölüm (Ekran: / * Blok öğelerini (eski tarayıcılar için) * /) gövdesi (hat yüksekliği: 1; / * satır aralığı Metin sayfa * /) OL, UL (Liste Stili: Yok;) Blockquote: Daha önce, BlockQuote: Sonra, S: Daha önce, S: Sonra (İçerik: ""; / * Quotes Q ve Blockquote * / Contents: Yok; / * Sadakat için ekleyin * /) blockquote, q (tırnak: NOT: NOT: NOT'lar * /) tablosunu (sınır çöküşü: daraltma; sınır aralığı: 0;)

Örnek açıklaması

CSS'yi sıfırlamanın bir sonraki yolu Eric Meyer (Eric Meyer) - belirli dairelerde bilinen bir web geliştiricisi. Burada zaten HTML 5'ten gelen etiketler için bir sıfırlama, bu arada, bu makaleyi yazarken ve kendileri hala çok kötü destekleniyorlar. modern tarayıcılar. Ama her zaman perspektifte bakman gerekiyor, değil mi?

Aslında, bu makale sonsuzluğa devam edebilir, çünkü bir kez daha tekrarladığım, belirli bir noktada, her bir gösterge boşalma sürümüne gelir ya da hiç kullanmaz, dikkatini sürdürüyor.

Birçok verters sözde kullanılır CSS sıfırlandı.farklı tarayıcıların özelliklerini ortadan kaldırmaya servis edilir. Aslında, bu dosya Stilleri tüm CSS varsayılan özelliklerini sıfırlar. Bu yazıda, bu dosyanın kodunu göstereceğim ve söyleyeceğim cSS sıfırlamayı kullanmaya değer ya da değil.

Çok farklı gördüm CSS sıfırlandı.Hepsi aynıdır. Bunu kullanabilirsiniz:

Html, vücut, div, span, applet, nesne, iframe,
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE,
A, abbr, kısaltma, adres, büyük, alıntı, kod,
Del, dfn, em, yazı tipi, img, ins, kbd, q, s, samp,
Küçük, grev, güçlü, alt, sup, tt, var,
B, u, ben, merkez,
Dl, dt, gd, ol, ul, li,
Fieldet, Form, Etiket, Efsane,
Masa, başlık, thody, tfoot, thead, tr, th, td (
Arka plan: şeffaf;
Sınır: 0;
Yazı tipi boyutu:% 100;
Marj: 0;
Anahat: 0;
Dolgu: 0;
Dikey hizalama: taban çizgisi;
}
Vücut (
Hat yüksekliği: 1;
}
Ol, ul (
Liste tarzı: Yok;
}
Blockquote, Q (
Tırnaklar: Yok;
}
BlockQuote: Daha önce, blockquote: Sonra,
S: Önce, S: Sonra (
İçerik: "";
İçerik: Yok;
}
: Odak (
Anahat: 0;
}
Tablo (
Border-çöküş: çöküş;
Sınır aralığı: 0;
}

Bunun kullanımının bu kadar anlaşılabilir olduğunu düşünüyorum, ancak örneğin, neden kullanmıyorum, diğer birçok devralçı gibi, bunu söylemeye değer. İlk önce ekstra bir dosya, İkincisi, anlayış İşleme için, ama en önemlisi - varsayılan özellikleri seviyorum. Örneğin, masadaki aynı alanlar. Sonuçta, tüm varsayılan özellikler tıpkı aynı değil, en çok optimal seçenek Çeşitli elemanların gösterilmesi. Sizi temin ederim, sıfırla dolgu malzemesi. Tablonun hücreleri, büyük olasılıkla, ana dosyaya iade edeceksiniz. Ve değerin varsayılan neyden farklı olması gerçeğinden uzak. Bu yüzden ilk önce temizlediğimiz ve ardından aynı dönüş. Ve ilk eksikliklerle birlikte (ekstra bir dosya ve ekstra kod), pek çok omurga hiç kullanılmaz. CSS sıfırlandı..

Neyse, stil deşarjını kullanmak fena değilBöylece, sitenin çeşitli tarayıcıların altındaki adaptasyonunun basitleştirilmesinin sizi tamamen basitleştireceğini düşünüyorsanız, güvenle kullanabilirsiniz.

Herkesin önceden yüklenmiş kuralları ve bunlar üzerinde (kullanıcı aracısı stil sayfası) varsayılan olarak otomatik olarak bağlanan öğeleri tasarlamak için önceden yüklenmiş kuralları vardır. Bununla birlikte, yeni bir proje oluştururken vatorların çoğu özel ekler dosya sıfırlama. CSS, CSS stillerini tam olarak sıfırlayan ve geliştiricilerin "saf sayfa" ile oluşturmalarını sağlar. Neden ve nasıl her şey bitti - mevcut makaledeki elek.

Postanın resim önizlemesine bakarsanız, Safari, Chrome ve Firefox'daki normal çizginin kesinlikle görüntülendiğini göreceksiniz. farklı yollarla. Evet, bazendeki kurallar örtüşürler, örneğin, herkes başlık etiketini ekrandan gizler: Yok seçeneği, ancak, çoğu durumda, sayfadaki nesneleri oluştururken ciddi farklılıklar vardır. Müşterilerinizin bir kısmının, düzenin son hali de düzende göründüğü zaman sevmeyebileceğinden şüpheleniyorum.

Bu nedenle, bir acemi web geliştiricisiyseniz, yayın genel gelişme için açıkça faydalı olacaktır. Bu notun 2018'deki CSS sıfırlama koşullarına genel bir bakışla çevirisidir. 2019'da ve daha sonra tüm bunların hala alakalı olacağından eminim. Bu konu zaten 10 yıldan fazla olmuştur (ilk benzer çözeltinin serbest bırakılmasından itibaren).

Neden bir sıfırlama CSS ayarlarına ihtiyacınız var?

Katılımdan zaten anlaşıldıkça, Web tarayıcılarının temel stilleri arasındaki uzantıyı ortadan kaldırmanıza ve bunları bir artı-eksi standartlaştırılmış zihnine yönlendirmenize izin verir. Her zaman diğer özel gelişmelere en başında uygulayın. Erik Meyer makalesinde on yıl önce CSS'yi sıfırla hakkında, bu yaklaşımın temel nedeni, hangi yıllar hala ilgilidir:

Sorun, farklı tarayıcıların varsayılan ayarlarına sahip olması ve hepsi aynı olmadığı gerçeğinde yatmaktadır. Kodumuzun ilk sayfa tasarımını değiştirdiğini düşünüyoruz, ancak bu tamamen öyle değil ve sıfırlama dosyaları yardımıyla, bu standart türde belge türünü tüm programlar için daha fazla fındık yapabiliriz. Bu nedenle, temel mücadeleye harcamak için daha az zaman olacaktır. tesisatlar Firefox, Krom vb. Varsayılan olarak.

Ama şimdi durum düzene daha az aksine?

Evet, gerçekten, zamanımızda, kullanıcı aracısındaki birçok parametre daha benzer hale geldi. Neredeyse her yerde başlık H1 yazı tipi boyutunu 2EM ve yatay girinti 0.67EM'dir. Bununla birlikte, bunların hepsi nispeten yeni değişikliklerdir ve minimumda, bu tür bir tutarlılık olmadığı, eski programların desteğini dikkate almanız gerekir.

Ek olarak, bazı durumlarda, CSS sıfırlama türüne bağlı olarak (aşağıda bu), bu çip, sadece modern web tarayıcıları göz önünese bile, bize hala kullanışlıdır.

Ancak stillerimizi uyguluyor muyuz, Temel'i geçersiz kılar?

Bu yaklaşım, bu yaklaşımın muhaliflerinin ana özetlerinden biridir - sonunda, yine de, bunlar veya diğer parametreler kendi styl.css'leriyle değiştirilirler, bu yüzden neden başka bir ekstra dosya ekleyin ve azaltın? Bu cümlenin mantıklı olduğu gerçeğine rağmen, sıfırlama kullanımı iki anla haklı çıkarılır:

İlk olarak, daha temiz bir kod yazmanıza yardımcı olur. Bunu birkaç parçaya böleriz: Web projesinin tasarımı ve belirli tarayıcıların özellikleri altında yönlendirilmiş bir dizi kural için ayrı ayrıdır. Bu, ana CSS dosyasına her türlü Hack, vb. İle tırmanmamaktır.
İkincisi, tüm sıfırlar çok az ağırlığındadır ve indirmeleri gerektirmez Çok sayıda zaman.

Tipler CSS RESET (makaledeki bağlantıları indirebilirsiniz)

Uzak 2004'ten başlayarak, ilk bu gelişmeler ortaya çıktığında, şimdi zorlukta ve özgüllüklerinde farklı olan birçok yöntem vardır. Aslında, CSS stillerinin sıfırlanmasını çözmeye çalışan 3 gol vardır:

Kullanıcı aracısı stil sayfasında hata düzeltme.
İnternet tarayıcılarında standart dışı orijinal tasarımın iptali.
Evrensel uyumlu bir stil tabanı oluşturma.

Her üç göreve ve sadece belirli bir problemin altında keskinleşenlere karar veren seçenekler vardır.

Düzeltme / Hata Düzeltme

Yukarıda belirtilen hedeflerin ilkini düşünün. Zaten anlaşıldığınız gibi, farklı eksikliklerin ve tarayıcıların ayakkabılarının ortadan kaldırılması, eski sürümlerin desteklenmesi için en alakalıdır. Böyle bir durumun iyi örneklerinden biri - HTML5'in görünümünden sonra aynı Internet Explorer 9, doğru ekran türünü yeni nesnelere uygulamadık.

Bu nedenle, Normalize.css yazısına göre çözümlerde, tüm hatalar dikkate alınır ve işlenir:

/ ** * IE'de doğru ekranı ekleyin. * / Ana (ekran: blok;)

Bu eylemler yalnızca eski yazılımlar için gerekli olduğundan, postcss postprocessor gibi postcss postprocessor'u, yalnızca belirli tarayıcıların desteğini uygulamak için eklemek için tarayıcı listesiyle birlikte normalleştirin.

Modern web programları dahil olmak üzere uygun olan saf CSS'den başka bir kod örneği - ekran elemanlarını düzelt ve özniteliği gizleyin.

[Gizli] (Ekran: Yok! ÖNEMLİ; // iyi kullanım durumlarından biri! Önemli }

(Ekran: Yok! ÖNEMLİ; // İyi kullanım durumlarından biri! Önemli)

Tuhaf tarayıcıların tuhaf stillerini kaldırın

Bu, CSS ayarlarını sıfırlamanın ikinci nedenidir. Prensip olarak, kullanıcı aracısı stil sayfasında hangi yürütme hakkındaki görüşlerinin her biri "tuhaf" olarak kabul edilir. Yazarın orijinal notun tanımı oldukça mantıklıdır: bu, öğenin ekranının "çıplak" bir versiyonu olmayan bir stildir.. Örneğin, 2EM'deki başlıklar için girintileri (kaç tane yapar), fikir fena değildir, ancak neden 2EM, neden 4EM değil, neden 2EM değildir. Bu durumda, temel seçenek herhangi bir insidansın olmaması, yani sıfır marjı olacaktır.

En basit evrensel yaklaşımGirintileri / alan etiketlerini çıkarma:

* (Marj: 0; Dolgu: 0;)

Bu yöntem çok radikal, çünkü Beklemeyeceğiniz (aynı girişte) bile tüm nesnelere uygulanır. Alternatif olarak, Eric Meyer RESET CSS genellikle, marj / dolgu, kenarlıklar ve yazı tipi boyutunun parametrelerini (0 veya hiçbiri), mantıksal olarak haklı olduğu durumlarda kaldırır:

html, vücut, div, yayılma, applet, nesne, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ön, a, abbr, kısaltma, adres, büyük, cite, kod, del, dfn, Em, img, ins, kbd, q, s, samp, küçük, grev, güçlü, alt, sup, tt, var, b, u, ben, merkezi, dl, dd, ol, ul, li, fieldet, Form, etiket, efsane, tablo, başlık, td, tfoot, thead, th, td, makale, bir kenara, tuval, detaylar, gömme, şekil, figcaption, altbilgisi, başlık, hgroup, menü, nav, çıktı, yakut, Bölüm, Özet, Zaman, Mark, Ses, Video (Marj: 0; Dolgu: 0; Sınır: 0; Yazı Tipi Boyutu:% 100; Yazı Tipi: Miras; Dikey Hizalama: Temel;)

Stilleri geçersiz kıl

Önceki bölümün aksine, burada ana görev CSS'yi belirli nesnelerden sıfırlamak değildir, ancak bunları kendi güncel değerleriyle geçersiz kılar.

Örneğin, 1EM ve marjların tüm boyutlarını ayarlamak yerine \u003d 0 sanitize.css, diğer değerler ayarlanır:

/ ** * KROM, FIREFOX ve SAFARI'DAN GERÇEKLEŞTİRME "Bölüm" ve * `Maddesi 'içindeki H1` unsurlarını düzeltin. * / H1 (Yazı Tipi: 2EM; Marjı: 0. 67EM 0;)

/ ** * KROM, FIREFOX ve SAFARI'DAN GERÇEKLEŞTİRME "Bölüm" ve * `Maddesi 'içindeki H1` unsurlarını düzeltin. * / H1 (yazı tipi boyutu: 2EM; marjı: 0.67EM 0;)

Bootstrap'ın yeniden başlatılması, mevcut görevin başka bir gösterimini bulacaktır. Geliştiriciler biraz daha ileri gitti ve öngörülen yazı tipleri ve vücut için arka plan rengi.

// Vücut // // 1. Tüm tarayıcılardaki kenar boşluğunu çıkarın. // 2. En iyi uygulama olarak, bir varsayılan `arka plan rengi" uygulayın. // 3. Daha sonra kullanabilmemiz için açık bir ilk metin hizası değerini ayarlayın. // "miras" ni gibi şeyler	`Öğeleri. Vücut (Marj: 0; // 1 Yazı Tipi - Aile: $ Yazı Tipi - Aile - Yazı Tipi: Yazı Tipi: Yazı Tipi - Baz; Yazı Türü: $ Yazı Tipi - Ağırlık; Hat Yükseklik: $ Line - Yükseklik - Taban; Renk: $ Vücut - Renkli; Metin - Hizala: Sol; // 3 arka Renk: $ Body - BG; // 2)

// body // // 1. Tüm tarayıcılardaki kenar boşluğunu çıkarın. // 2. En iyi uygulama olarak, bir varsayılan `arka plan rengi" uygulayın. // 3. Açık bir ilk metin hizası değerini ayarlayın, böylece // "Miras" değerini ` `Öğeleri. Vücut (Marj: 0; // 1 Yazı Tipi ailesi: $ Yazı Tipi-Face-Base; Yazı Tipi Boyutu: $ Yazı Tipi-Baze; Yazı Tipi Ağırlığı: $ Yazı Tipi-Ağırlık Baz; Hat Yüksekliği: $ Hattı Yükseklik -Base; Renk: $ Vücut rengi; Metin hizası: Sol; // 3 arka plan-renk: $ Body-bg; // 2)

TOPLAM. Ne seçeceksin

Orijinal notta, karşılık gelen anketin sonucu var.

Bu yazıda stilleri sıfırlama hakkında konuşacağız ve böyle bir reset.css dosyası oluşturmanın bir örneğini düşüneceğiz.

Fırlatma stilleri fikri yaklaşık 10 yıl önce ortaya çıktı. Aslında, küçük bir CSS stillerinin yardımı ile, sayfanın tüm tarayıcılardaki görüntüsünü aynı şekilde ortaya koyduğu sonucuna varmıştır. Tabii ki her zaman işe yaramaz, ancak bazı anlar düzeltilebilir - örneğin, Sınır, yani bazı versiyonlarda nerede gerçekleştiğini anlamıyor. Veya tarlalarda mavi kontur (anahat).

Bir ön uç geliştirici için değil, tarayıcıların çok seçici ve her işlem olduğu bir sır değil hTML Elemanları Kendi yolunda, standart tarzlarınızı ekleyin.

Bu fikirler uzun süre ateş yakaladığından, zaten olması şaşırtıcı değil. hazır dosyalar Sıfırla, genellikle reset.css denir ve tüm projelere bağlanın.

Neden içinde ayrı dosya? Evet, çünkü onları projeden projeye aktarmanın daha uygun olduğu için.

İşte 2007'den itibaren örnek sıfırlama.

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Lisans: Yok (kamu alanı) * / HTML, gövde, div, yayılma, applet, nesne, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, kısaltma, adres, Büyük, cite, kod, del, dfn, em, img, ins, kbd, q, s, samp, küçük, grev, güçlü, sup, tt, var, b, u, tt, var, b, U, ben, merkezi, dl, dd, ol, ul, li, fieldet, form, etiket, efsane, tablo, başlık, td, tfoot, thead, th, td, makale, yana, tuval, detaylar, Gömün, şekil, figcaption, altbilgi, başlık, hgroup, menü, nav, çıkış, yakut, bölüm, özet, zaman, işaret, ses, video (kenar boşluğu: 0; dolgu: 0; sınır: 0; yazı tipi boyutu: 100% ; Yazı Tipi: Miras; Dikey Hizala: Temel;) / * HTML5 Eski tarayıcılar için sıfırlama sıfırlama * / Makale, bir kenara, ayrıntılar, figcaption, figure, altbilgisi, başlık, Hgroup, menü, NAV, bölüm (Ekran: blok; ) Vücut (Hat Yüksekliği: 1;) OL, UL (Liste Stili: Yok;) BlockQuote, Q (Tırnaklar: Yoktur;) BlockQuote: Daha önce, GLOTQUOTE: MESAFE, Q: Önce, S: Sonrası (İçerik: ""; İçerik: Yok;) Tablo (Border - Daralt: C. Ollapse; Sınır aralığı: 0; )

Bu, yalnızca belirli bir web geliştiricisi çemberleri tarafından alınan bu dosyanın standardıdır.

Size, deneyimli bir programcı olsanız da, sıfırlama dosyanızı geliştirmek için sadece yeni başlayanlar. Temel olarak, yukarıda açıklanan standardı alabilir, seçicileriyle takviye veya mevcut olanları değiştirebilirsiniz. İşte kendim için geliştirdiğim böyle bir dosyanın bir örneği:

giriş, TextArea, A, Düğmesi, Seç (Anahat: Yok) IMG (Sınır: Yoktur;) İK (Net: Hem; Sınır: Yok; Arka Plan: Yok;) * (Arka Plan-Tekrarlama: Hepsi;) / * HTML5 Eski tarayıcılar için görüntüleme-rol sıfırlama * / makale, bir kenara, detaylar, figcaption, figure, altbilgi, başlık, Hgroup, menü, nav, bölüm (ekran: blok;) gövde (çizgi boyu: 1;) ol, ul (liste -Style: Yok; Marj: 0; Dolgu: 0;) Blockquote, q (Tırnaklar: Yok;) Blockquote: Daha önce, GLOTQUOTE: MESAFİK, Q: önce, Q: Sonra (içerik: ""; içerik: Yok;) Tablo (Sınır çökmesi: çöküş; sınır aralığı: 0;)

Kişisel kullanım için yukarıdaki koddan herhangi birini KIP yapabilirsiniz, ancak makalelerinizde kullanırsanız, kaynağa bir bağlantı koyun.