CSS'ye Genel Bakış: CSS iyileştirmelerini belirleme

Jecelyn Yeen

Sayfanızın CSS'sini daha iyi anlamak ve olası iyileştirmeleri belirlemek için CSS'ye Genel Bakış panelini kullanın.

Genel Bakış

CSS'ye genel bakış paneli, web sitenizin CSS istatistikleriyle ilgili bir rapor oluşturur. Bu rapor, tüm CSS oluşumları ve hatta kullanılmayan bildirimlerle ilgili verileri toplar. CSS'ye genel bakış paneli, sayfa vurgulayarak veya Öğeler panelinde etkilenen koda doğrudan bağlantı vererek tekrarı daha ayrıntılı incelemenize yardımcı olur.

CSS Genel Bakış raporunu çalıştırma ve yeniden çalıştırma ve CSS'ye Genel Bakış raporunu anlama konularını inceleyin.

CSS'ye Genel Bakış panelini aç

1. Bu sayfa gibi herhangi bir web sayfasını açın.
2. Geliştirici Araçları'nı açın.

3. Geliştirici Araçları'nı özelleştir ve kontrol et'i seçin > Diğer araçlar > CSS'ye Genel Bakış.

   

   Alternatif olarak, CSS'ye Genel Bakış panelini açmak için Komut Menüsü'nü de kullanabilirsiniz.

   

CSS Genel Bakış raporunu çalıştırıp yeniden çalıştırmak

1. Sayfanızın CSS Genel Bakış raporunu oluşturmak için Videoya genel bakış düğmesini tıklayın.

   

2. Bir CSS Genel Bakışını yeniden çalıştırmak için Genel bakışı temizle simgesini tıklayın ve ilk adımı tekrarlayın.

   

CSS'ye Genel Bakış raporunu anlama

Rapor beş bölümden oluşur:

1. Genel bakış özeti. Sayfanızın CSS'sinin üst düzey bir özeti.

2. Renkler. Sayfanızdaki tüm renkler. Renkler, arka plan renkleri, metin renkleri gibi türlere göre gruplandırılır. Bu bölümler, düşük kontrast sorunları olan metinleri de gösterir.

   

   Her renk tıklanabilir. Örneğin, #DADCE0 kenarlık renginin sitenizin renk şemasına uymadığını varsayalım. Bu rengi kullanan öğelerin listesini almak için rengi tıklayın.

   

   Sayfadaki öğeyi vurgulamak için fareyle listedeki öğenin üzerine gelin.

   

   Öğeyi Öğeler panelinde açmak için listedeki öğeyi tıklayın.

3. Yazı tipi bilgileri. Farklı yazı tipi boyutu, yazı tipi kalınlığı ve satır yüksekliğine göre gruplandırılmış olarak sayfanızdaki tüm yazı tipleri ve geçtiği yerler. Renkler bölümüne benzer şekilde, etkilenen öğelerin listesini görüntülemek için tekrarlarını tıklayın.

   

4. Kullanılmayan beyanlar. Etkisi olmayan tüm stiller, nedene göre gruplandırılmış şekilde gösterilir.

   

   Örneğin, içerik bir satır içi öğenin yüksekliğini ve genişliğini belirlediği için yukarıdaki iki bildirim kullanılmaz. İlgili öğeleri görüntülemek için tekrarları tıklayın.

5. Medya sorguları. Sayfanızda tanımlanan tüm medya sorguları, gerçekleşme sayısına göre azalan düzende sıralanır. Etkilenen öğelerin listesini görüntülemek için tekrarlarını tıklayın.