Herhangi bir CSS Stil Sayfasını CSS İstatistikleri ile Görselleştirin
Bir stil sayfasında kaç tane CSS kuralı bulunduğunu hiç merak ettiniz mi? Ya da hiç görmek istedin mi görsel sunum arasında tüm renkler bir CSS dosyasında kullanılır? İle CSS İstatistikleri, Herhangi bir web sitesini bir sürü ham CSS verisi çekin merakını gidermek için.
Ve bu web uygulaması sadece bir stil sayfası için tüm renkleri göstermekten çok daha derine iniyor. Görselleştirebilirsin tüm z-index değerleri, tüm yazı tipi boyutları, tüm medya sorguları ve hatta bir görsel özgüllük grafiği.
Bu uygulama o kadar çok şey kapsar ki, bir oturuşta her şeyi tüketmek pratik olarak imkansızdır. Size sadece tarafından herhangi bir web sitesine büyük bir genel bakış verecek kendi stil sayfasında ne olduğunu gösterme.
Başlamak için, CSS İstatistikleri web sitesini ziyaret edin ve herhangi bir URL'yi takın dilersin. Ayrıca Facebook, Apple ve Pinterest gibi birtakım önerilen siteler arasından seçim yapabilirsiniz (diğerleri arasında)..
Sonuçlar sayfasında, toplam CSS dosya boyutu kilobayt cinsinden bir listeyle birlikte en sık kullanılan özellikler ve bildirimler. Bunların hepsi uzun bir sayı listesi olarak görünür, bu nedenle ilk başta okumak kafa karıştırıcı olabilir.
Ama bu uygulamayı ne kadar çok kullanırsanız o kadar eğlenceli olur! İşte bir her şeyin listesi istatistikler sayfasında bulacaksınız:
- Toplamı özellikleri, seçiciler, ve kurallar
- Herşey yazı tipi renkleri örnekler ve hex kodları ile
- Herşey arka plan renkleri örnekler ve hex kodları ile
- Herşey yazı tipi boyutları örneklerle
- Listesi yazı tipi aileleri
- Tümlerin listesi z endeksi değerleri
- Bir çubuk grafiği toplam / benzersiz CSS bildirimleri
- Özgüllük grafiği
- Genel Toplam kural kümesi boyutu
- Herşey medya sorguları
- ham CSS kodu ile birlikte URL bağlantıları -e bireysel CSS dosyaları
CSS İstatistikleri tüm CSS dosyalarını çekecek kadar akıllıdır ve bu verileri birleştirmek. Geliştiriciler bu işe doğru çalışması için çok çaba sarf ediyor..
Ekstra harika kısım, GitHub deposunun tamamı. tüm proje için kaynak kodu. Yani, bunu indirebilirsiniz ve yeniden barındır kendi sunucunuzda (yerel olarak veya başka bir şekilde) kod kazmak istiyorsanız dolaşmak için.
Seçeneğiniz var herhangi bir bireysel CSS dosyasını çekerek veya tüm stil sayfalarını ayrıştırma tek bir etki alanında. Bu aracı inceleyerek öğrenebileceğiniz çok şey var ve bu nitty-gritty ayrıntılarını inceleyen geliştiriciler için daha derin bir görüş sunuyor.
Kendiniz test etmek için CSS İstatistiklerini ziyaret edin ve bir web sitesi takın. Bu kadar basit bir araçtan ne kadar veri bulunduğunu ve ne kadar bilgi edinebileceğinizi görünce şaşıracaksınız.
