0 (850) 441 1813 Hafta içi 11:00 - 17:00 info@wpkurs.com
Divi WordPress Theme

Use efficient CSS selectors

Use efficient CSS selectors – Verimli CSS seçiciler kullanmak. Page speed eklentisinde karşımıza çıkan bu uyarı mesajının çözümü için ne yapmalıyız? CSS yazım kuralını en yalın haliyle şu şekilde  özetleyebiliriz  seçici{tanım:değer;}

Buradaki seçici; tanımlanan değerin nereye uygulanacağını belirtir. Mesela bu alana bir div ismi verilebilir. Tanım; ise ilgili alana verilecek özelliğin başlığını verir. Son olarak değer ise; tanımın hangi değeri alacağını bildirir. Bir CSS komut satırı şu şekilde dizilebilir. “#header{margin-left:10px;”

Use efficient CSS selectors uyarı mesajı aldığımız satırları incelediğimizde, aynı komut içinde birden fazla seçici kullanıldığını görebiliriz. Twenty Ten temasını analiz ettiğimizde bu konu ile ilgili bir çok uyarı vardır.

Use efficient CSS selectors örnek

Bu konuyu çok kısa bir şekilde örneklendirelim. Ama önce CSS hakkında birkaç detay daha vermek istiyorum. CSS seçicileri 3 kurala göre tanımlanabilir. Universal, “# tag” ve class. Universal seçici tüm site için geçerli bir kuraldır. “#” ismini aldığı tüm div’i etkiler. “.class” ise ismi verilen  satır için geçerli olabilir. Aşağıdaki örneği incelediğinizde konu pekişecektir.

#div4 {
border: thin dotted #0F0;
}
#div4 ul li {
font-style: normal;
color: #0CF;
}
#div4 ul ul li {
text-decoration: line-through;
color: #F00;
}

Yukarıda Use efficient CSS selectors için basit bir örnek mevcut. Soldaki CSS ile sağdaki HTML görüntüsünü alabiliyoruz. Page Speed ile analiz edildiğinde aşağıdaki uyarı mesajlarını alacağız.

  • #div4 ul li Tag key with 2 descendant selectors
  • #div4 ul ul li Tag key with 3 descendant selectors

Buradada görüldüğü gibi CSS kuralını belirleyebilmek için 3 adet seçici kullandık. Browser bu satırı okurken ve yorumlarken zaman kaybı maximum olacaktır. Bu sorunu giderebilmek için div4 içindeki ul ve li bölümleri için “.” ile class tanımlayacağız ve HTML kodları içinde ilgili alana class=”ilgili_alan” ibaresini ekleyeceğiz.

#div4{border:thin dotted #0F0;}use efficient selectors
.mor{color:#F0F;}
.blink{text-decoration:blink;}
.underline{text-decoration:underline;}
.alt_liste{text-decoration:line-through;color:#F00;}

Bu işlemden sonra HTML sayfa görüntümüzde herhangi bir değişiklik olmayacak. Ancak; CSS seçicilerini verimli bir şekilde kullandığımız için Page Speed analizinden aldığımız  “Use efficient CSS selectors” uyarısının kalktığını göreceğiz.

Benzer konular:

Parola Sıfırlama
E-posta adresinizi girin. E-posta ile yeni bir şifre alacaksınız.