- Konu sahibi
- #1
CSS reset, tarayıcıların başlık, paragraf, liste, tablo ve form öğelerine varsayılan olarak verdiği margin, padding, yazı tipi ve benzeri stilleri başlangıçta sıfırlayan CSS kurallarıdır. Amaç, farklı tarayıcıların varsayılan görünümlerine bağımlı kalmadan kendi tasarım kurallarınızı daha öngörülebilir biçimde uygulamaktır. CSS reset tasarımın kendisi değildir; yalnızca başlangıç stilini düzenler.
Tarayıcılar CSS yazılmamış öğeleri tamamen biçimsiz bırakmaz. Örneğin bir başlıkta varsayılan üst-alt boşluk, bir listede iç girinti ve madde işareti, bağlantıda renk veya form alanında tarayıcıya özgü yazı tipi bulunabilir. Reset bu davranışları kaldırabilir veya ortak bir başlangıç değerine çekebilir. Sonrasında başlık aralıklarını, liste görünümünü ve form stillerini proje ihtiyacına göre yeniden tanımlamanız gerekir.
Basit bir projede aşağıdaki kurallar yeterli bir başlangıç olabilir:
Bu kodu ana stil dosyanızın en üstüne veya HTML içinde ana tasarım kurallarından önce yerleştirin. Reset dosyası ayrıysa, onu ana CSS dosyasından önce yükleyin. Başarılı uygulamada bir
Bu örnek özellikle bilinçli olarak küçüktür. Örneğin başlıklar için yazı boyutu ve satır yüksekliği, listeler için madde işareti, düğmeler için renk ve kenarlık burada tanımlanmaz. Bu değerleri tasarım katmanında ayrıca yazın:
Her projede tüm varsayılanları kaldırmak gerekli değildir. Karar verirken reset ile varsayılanları daha tutarlı hale getiren normalize yaklaşımını birbirinden ayırın.
En yaygın hata, reset'i tamamlanmış bir tema sanmaktır. Reset yalnızca başlangıç farklarını azaltır; responsive düzen, renkler, tipografi ve bileşen aralıkları ayrıca yazılmalıdır. Bir başka hata, her projeye aynı büyük reset dosyasını eklemektir. Kullanılmayan veya aşırı geniş kurallar, sonradan stil yazma ihtiyacını artırabilir.
Ayrıca
Hayır. Küçük bir projede varsayılan stilleri doğrudan düzenlemek yeterli olabilir. Reset, özellikle çok sayıda bileşenin ve farklı tarayıcılarda tutarlı başlangıç görünümünün gerektiği projelerde zaman kazandırır.
CSS etiketi değiştirmez; ancak oluşturulan görünüm ve erişilebilirlik ağacındaki sunum etkilenebilir. Bu nedenle görsel sıfırlamayı HTML anlamının tek güvencesi saymayın. Örnekte liste işaretleri ve odak çizgileri bilerek korunmuştur.
Tarayıcılar CSS yazılmamış öğeleri tamamen biçimsiz bırakmaz. Örneğin bir başlıkta varsayılan üst-alt boşluk, bir listede iç girinti ve madde işareti, bağlantıda renk veya form alanında tarayıcıya özgü yazı tipi bulunabilir. Reset bu davranışları kaldırabilir veya ortak bir başlangıç değerine çekebilir. Sonrasında başlık aralıklarını, liste görünümünü ve form stillerini proje ihtiyacına göre yeniden tanımlamanız gerekir.
En küçük uygulanabilir reset
Basit bir projede aşağıdaki kurallar yeterli bir başlangıç olabilir:
Kod:
/* reset.css veya ana CSS dosyasının en üstü */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
margin: 0;
}
ul,
ol {
padding-inline-start: 1.25rem;
}
button,
input,
textarea,
select {
font: inherit;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}Bu kodu ana stil dosyanızın en üstüne veya HTML içinde ana tasarım kurallarından önce yerleştirin. Reset dosyası ayrıysa, onu ana CSS dosyasından önce yükleyin. Başarılı uygulamada bir
h1 veya p öğesi kendiliğinden dış boşluk taşımaz, listeler için belirlenen 1.25rem girinti uygulanır ve madde işaretleri korunur, form kontrolleri çevredeki yazı tipiyle uyumlu hale gelir. Bunlar görünmeye devam ediyorsa reset dosyası yüklenmemiş, daha sonra gelen bir kural tarafından ezilmiş veya seçici kapsamı beklediğiniz öğeyi içermiyor olabilir.Bu örnek özellikle bilinçli olarak küçüktür. Örneğin başlıklar için yazı boyutu ve satır yüksekliği, listeler için madde işareti, düğmeler için renk ve kenarlık burada tanımlanmaz. Bu değerleri tasarım katmanında ayrıca yazın:
Kod:
.prose h1 {
margin-block: 0 1rem;
font-size: 2rem;
}
.prose ul {
padding-inline-start: 1.25rem;
list-style: disc;
}Reset ile normalize yaklaşımı arasındaki fark
Her projede tüm varsayılanları kaldırmak gerekli değildir. Karar verirken reset ile varsayılanları daha tutarlı hale getiren normalize yaklaşımını birbirinden ayırın.
| Yaklaşım | Ne yapar? | Ne zaman uygun? |
|---|---|---|
| Minimal reset | Seçili boşlukları ve temel kutu davranışlarını sıfırlar. | Kendi bileşen sistemini kurduğunuz uygulamalarda. |
| Geniş reset | Daha fazla öğenin varsayılan görünümünü kaldırır. | Tasarımın tüm öğeleri açıkça tanımladığı projelerde. |
| Normalize yaklaşımı | Yararlı varsayılanları koruyup tarayıcı farklarını azaltmayı hedefler. | Uzun metin, erişilebilirlik ve yerleşik HTML anlamının önemli olduğu sitelerde. |
Uygularken dikkat edilecek kararlar
- Reset'i kapsamını bilerek seçin. Tüm öğeleri
margin: 0ile sıfırlamak hızlıdır; ancak her paragraf, başlık ve liste aralığını sonradan tek tek tanımlamanızı gerektirir. - Erişilebilir varsayılanları gereksiz yere kaldırmayın. Odak görünümünü, bağlantıların ayırt edilebilirliğini veya form alanlarının kullanılabilirliğini yok eden kurallar yazmayın.
- Liste ve başlık stillerini geri ekleyin. İçerik sayfalarında madde işaretleri ve başlık hiyerarşisi gerekli olabilir; reset bunları kaldırdıysa bileşen veya içerik sınıfında yeniden tanımlayın.
- Kapsamı test edin. Reset'in ardından bir kart, form, tablo ve uzun metin örneği açarak boşlukların ve yazı tiplerinin beklediğiniz gibi olup olmadığını kontrol edin.
Sık yapılan hatalar
En yaygın hata, reset'i tamamlanmış bir tema sanmaktır. Reset yalnızca başlangıç farklarını azaltır; responsive düzen, renkler, tipografi ve bileşen aralıkları ayrıca yazılmalıdır. Bir başka hata, her projeye aynı büyük reset dosyasını eklemektir. Kullanılmayan veya aşırı geniş kurallar, sonradan stil yazma ihtiyacını artırabilir.
Ayrıca
outline: none gibi kurallarla klavye odağını kaldırmak, görsel olarak temiz görünse bile kullanılabilirliği bozabilir. box-sizing: border-box seçimi ise genişlik ve yükseklik hesabını öngörülebilir yapar; ancak mevcut bir tasarımın ölçülerini değiştirebileceği için eski stillerle birlikte test edilmelidir.Kaynaklar
Sık sorulan sorular
CSS reset kullanmak zorunlu mudur?
Hayır. Küçük bir projede varsayılan stilleri doğrudan düzenlemek yeterli olabilir. Reset, özellikle çok sayıda bileşenin ve farklı tarayıcılarda tutarlı başlangıç görünümünün gerektiği projelerde zaman kazandırır.
Reset dosyası HTML anlamını bozar mı?
CSS etiketi değiştirmez; ancak oluşturulan görünüm ve erişilebilirlik ağacındaki sunum etkilenebilir. Bu nedenle görsel sıfırlamayı HTML anlamının tek güvencesi saymayın. Örnekte liste işaretleri ve odak çizgileri bilerek korunmuştur.
