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. Diğer'i tıklayın. Geliştirici Araçları'nı özelleştir ve kontrol et'i seçin > Diğer araçlar > CSS'ye Genel Bakış.

    CSS'ye Genel Bakış'ı tıklayın.

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

    Komut menüsünde CSS'ye Genel Bakış komutunu gösterin.

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.

    CSS'ye Genel Bakışı yakala.

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

    Net genel bakış.

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. Genel bakış ö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.

    Renkler.

    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.

    Rengi kullanan öğelerin listesi.

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

    Sayfadaki öğeyi vurgulamak için fareyle bir öğ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.

    Yazı tipi bilgisi'ne dokunun.

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

    Kullanılmayan beyanlar.

    Ö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.

    Medya sorguları.