CSS taglarda öncelik kuralı

Hayatımıza responsive tasarımın girmesi ile birlikte CSS taglarınız ile media querry lerinizde kullandığınız taglar CSS tasarım kurallarında ki öznellik ilkesi gereği çakışabilir ve konuyu bilmiyorsanız uzun süren gereksiz ve sonuçsuz araştırmalara girebilirsiniz. Aslında cevsp çok basit. Aşağıda bunu inceleyeceğiz şimdi ;

Sorun tanımı : Media querry de kullandığım css ler ekran boyutlarını değiştirdiğim zaman çalışmıyor.

Sorununun sebebi : CSS seçicilik kuralına göre kodlarınız ilk önce standar css baz alıp media querry de uyması gereken kodları çalıştırmaz.

Sorunun çözümü : CSS kurallarında bu çakışma ile karşılaştığınızda uygulatmak istediğiniz kodu tarayıcının gözüne sokmanız gerekiyor. Kod ile açıklarsak durumu göze

Varsayalım ki ana css kodunuzda ki bir bloğun koda rengi kırmızı ve bu kod cep telefonlarında mavi olmalı. Kodları doğru yazmanıza rağmren browser istediğinizi yapmıyor.Tam browsera laf atacaksınız ki diğer tarayıcılarda aynı sorundan müzdarip :

.ana-menu {background-color:red;}

@media (max-width : 600px) {

.ana-menu{background-color:blue} //Bu kod çalışmıyor ise

body .ana-menu{background-color:blue}  // Body yi koda ekleyerek tarayıcıya tam adresi veriyorsunuz ve kodunuz doğru olarak çalışacaktır.

}