CSS Genel Bakış Paneli

Chrome DevTools'ta CSS Genel Bakışı panelini Cmd+Shift+P → CSS Genel Bakışı yoluyla açın. Geçerli sayfanın tüm stil sayfasını analiz etmek için Genel bakışı yakala seçeneğine tıklayın. Panel; renkleri, yazı tiplerini, medya sorgularını ve kullanılmayan bildirimleri özetler.

Renkler bölümü, sayfanın CSS'inde kullanılan tüm renk değerlerini (onaltılık, rgb, adlandırılmış renkler ve gradyan durakları) türe göre gruplandırarak listeler. Bir renge tıklamak, onu hangi öğelerin ve özelliklerin kullandığını gösterir; böylece kasıtsız renk çeşitliliği ve paletin gereksizce büyümesi ortaya çıkar.

Yazı Tipleri bölümü, sayfaya uygulanan tüm font-family, font-size ve font-weight birleşimlerini listeler. Yazı tipi yığını geri dönüşlerini ortaya çıkarır, tutarsız tipografik ölçekleri vurgular ve her birleşimi hangi öğelerin kullandığını gösterir.

Medya Sorguları bölümü, her @media kuralını, kesme noktalarını ve içindeki bildirim sayısını listeler. Bu genel bakış, kesme noktalarındaki tutarsızlığı ortaya çıkarır; ekipler bazen bir kod tabanında birbirinden biraz farklı 15'ten fazla kesme noktası değeri biriktirir.

CSS Genel Bakışı, özgüllük çakışmaları veya eşleşmeyen seçiciler nedeniyle hiçbir zaman uygulanmayan bildirimleri işaretler. Bu durum Coverage'dan farklıdır; kullanıcı etkileşimiyle etkinleştirme gerektirmeden her zaman geçersiz kılınan kuralları yakalar.

Panel, arka planlarına karşı WCAG AA veya AAA karşıtlık oranlarını karşılamayan metin renklerini vurgular. Bir karşıtlık hatasına tıklamak, DOM içindeki öğeyi seçer; böylece ayrı araçlara gerek kalmadan erişilebilirlik sorunlarını düzeltmek kolaylaşır.

Büyük yeniden tasarımlardan sonra veya mevcut bir kod tabanına katılırken CSS Genel Bakışı'nı kullanın. Renk özeti, uygulamanın tasarım belirteçlerinden ne kadar uzaklaştığını ortaya çıkarır. Yazı tipi özeti ise kullanıcılar fark etmeden önce tipografik tutarsızlıkları gösterir.

Aynı uygulamanın birden çok sayfasında CSS Genel Bakışı'nı çalıştırın. Renk ve yazı tipi özetlerini karşılaştırmak, sayfalar arasındaki sapmayı ortaya çıkarır; bileşenler diğer sayfalardaki benzerlerinden farklı tipografi veya renkle görüntülenebilir.

Renk verilerini CSS Genel Bakışı'ndan dışa aktarın ve tasarım belirteçleri paletinizle karşılaştırın. Genel bakışta bulunup belirteç paletinde bulunmayan renkler, sabit kodlanmış değerlerdir; bunlar belirteç başvurularına dönüştürülmeli ve bağımsız değerler olarak kaldırılmalıdır.

CSS Genel Bakışı'ndaki kesme noktalarını listeleyin, yinelenenleri ve birbirine çok yakın olanları (farklı geliştiricilerden gelen 768px, 769px ve 770px gibi) belirleyin, bunları tasarım sisteminizin kesme noktası ölçeğinde birleştirin ve tüm medya sorgularını CSS özel özelliklerini veya SCSS değişkenlerini kullanacak şekilde güncelleyin.

CSS Genel Bakışı, satır içi stilleri veya CSS-in-JS çalışma zamanı stillerini değil, bağlantılı stil sayfalarını analiz eder. İlk oluşturma işleminden sonra JavaScript tarafından eklenen dinamik sınıflar görünmeyebilir. Dinamik stilleri eksiksiz biçimde kapsamak için Coverage'ı ve elle incelemeyi de kullanın.

CSS Genel Bakışı ne tür bir erişilebilirlik sorununu algılar?

CSS Genel Bakışı; renkleri, yazı tiplerini, medya sorgusu kesme noktalarını ve karşıtlık sorunlarını sayfa düzeyinde denetler. Teknik borç çözülmesi pahalı hâle gelmeden önce tasarım sapmasını, paletin gereksizce büyümesini, tipografik tutarsızlığı ve erişilebilirlik hatalarını belirlemek için kullanın.