Css Yui

YUI Reset CSS Sorunlarını Giderme: <em> İtalik ve <strong> Kalın Nasıl Korunur

Web geliştirme ile çalışırken, tarayıcılar arasında tutarlı bir başlangıç noktası için YUI’nin Reset CSS’sini kullandığınızı görebilirsiniz. Bu yararlı olsa da, metin biçimlendirmesinde beklenmedik davranışlara yol açabilir. <em> ve <strong> etiketlerinin nasıl etkilendiğiyle ilgili yaygın bir sorun ortaya çıkmaktadır; bu etiketler istenildiği gibi görünmez.

Bu blog yazısı, sorunu adım adım açıklayacak ve web içeriğinizi keskin tutmanın net bir çözümünü sağlayacaktır.

Problemi Anlamak

YUI’nin Reset CSS’si varsayılan tarayıcı stilini geçersiz kılmaktadır, bu da bazen karmaşaya yol açabilir:

Ne Oluyor?

YUI Reset CSS’de sorun yaratan özel satır şudur:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

Sonuç olarak, hem <em> hem de <strong> etiketleri varsayılan biçimlendirmelerini kaybeder:

  • İtalik olması gereken <em> etiketleri normal metin gibi görünür.
  • Kalın olması amaçlanan <strong> etiketleri de standart bir yazı tipi kalınlığında görünür.

Çatışma

Bu etiketlerin biçimlendirmesini kendi stil sayfanızda elle sıfırlama şansınız olsa da:

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

Her iki etiketi bir arada kullandığınızda problem daha da artar. Örneğin:

<strong>Bu kalın, <em>ve bu italik ama kalın değil</em></strong>

Burada, <strong> için stil kuralınız çalışsa da, Evrensel Reset CSS kuralı <em> etiketini sıfırlamakta ve italik etkisini geçersiz kılmaktadır.

Çözüm

Kendi özel stillerinizin YUI Reset CSS üzerinde öncelikli olmasını sağlamak için CSS kurallarınızı ayarlamanız gerekecektir. İşte bunu nasıl yapabileceğinize dair adımlar:

Adım 1: Özgüllüğü Artırma

Stil kurallarınızın özgüllüğünü artırmak için aşağıdaki gibi yazabilirsiniz:

strong, b, strong *, b * { 
  font-weight: bold; 
}

em, i, em *, i * { 
  font-style: italic; 
}

Bu değişiklik, yalnızca <strong> ve <b> etiketlerinin uygun şekilde stillenmesini sağlamakla kalmaz, ayrıca iç içe geçmiş tüm etiketlerin de aynı stilleri taşımasını garanti eder.

Adım 2: !important ile Stil Zorlamak

Hala IE7 gibi eski tarayıcıları destekliyorsanız, stillerinizi !important kullanarak zorlamanız gerekebilir. Bu, şu şekilde yapılabilir:

strong, b, strong *, b * { 
  font-weight: bold !important; 
}

em, i, em *, i * { 
  font-style: italic !important; 
}

Adım 3: Stillerinizi Test Edin

Bu değişiklikleri uyguladıktan sonra, stillerinizin modern ve eski tarayıcılarda doğru şekilde görüntülendiğinden emin olmak için test edin.

Denemeniz için hızlı bir örnek:

Örnek CSS

/* YUI stilleri */
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}

/* Kendi stilleriniz */
strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}

Örnek HTML

<strong>Kalın</strong> - <em>İtalik</em> - <strong>Kalın ve <em>İtalik</em></strong>

Sonuç

Bu blogda belirtilen adımları izleyerek, YUI’nin Reset CSS’si tarafından sunulan varsayılan davranışı başarıyla geçersiz kılabilir ve <em> ve <strong> etiketlerinizi doğru bir şekilde biçimlendirebilirsiniz.

Gelecekte benzer sorunlarla karşılaşırsanız, özgüllük ve !important yönergesi CSS stilleme envanterinizde güçlü araçlar olabilir.

İyi kodlamalar!