Visualisasikan Semua Lembar Gaya CSS dengan Statistik CSS

Pernah bertanya-tanya berapa banyak aturan CSS dalam stylesheet? Atau pernahkah Anda ingin melihat representasi visual dari semua warna digunakan dalam satu file CSS? Dengan Statistik CSS, Anda bisa pasang di situs web apa saja dan tarik banyak data CSS mentah untuk memuaskan rasa ingin tahu Anda.

Dan aplikasi web ini jauh lebih dalam dari sekadar menampilkan semua warna untuk stylesheet. Anda bisa memvisualisasikan semua nilai indeks-z, semua ukuran font, semua pertanyaan media dan bahkan melihat a grafik spesifisitas visual.

Aplikasi ini mencakup begitu banyak sehingga hampir tidak mungkin untuk mengkonsumsi semuanya dalam satu duduk. Ini akan memberi Anda gambaran luar biasa dari situs web apa saja menampilkan apa yang ada di stylesheet mereka.

Untuk memulai, kunjungi situs web CSS Stats dan tancapkan URL apa pun Kamu berharap. Anda juga dapat memilih dari sejumlah situs yang disarankan seperti Facebook, Apple, dan Pinterest (antara lain).

Pada halaman hasil, Anda akan melihat total ukuran file CSS dalam kilobyte, bersama dengan daftar properti & deklarasi yang paling umum digunakan. Ini semua muncul sebagai satu daftar panjang angka sehingga dapat membingungkan untuk dibaca pada awalnya.

Tetapi semakin Anda menggunakan aplikasi ini, semakin menyenangkan! Ini a daftar semuanya Anda akan menemukan di halaman statistik:

Jumlah dari properti, penyeleksi, dan aturan
Semua warna font dengan contoh & kode hex
Semua warna latar belakang dengan contoh & kode hex
Semua ukuran font dengan contoh
Daftar keluarga font
Daftar semuanya nilai indeks-z
Bagan batang dari deklarasi CSS total / unik
Grafik spesifisitas
Total ukuran aturan
Semua pertanyaan media
Itu kode CSS mentah bersama Tautan URL ke file CSS individu

Statistik CSS cukup pintar untuk menarik semua file CSS dan menggabungkan data itu bersama. Pengembang melakukan banyak upaya dalam hal ini untuk membuatnya berfungsi dengan baik.

Dan, bagian ekstra yang luar biasa adalah repo GitHub lengkap dengan kode sumber untuk seluruh proyek. Jadi, Anda dapat mengunduh ini dan host-ulang itu di server Anda sendiri (lokal atau lainnya) untuk bermain-main jika Anda ingin menggali kode.

Anda memiliki opsi untuk menarik setiap file CSS atau parsing semua stylesheet pada satu domain. Ada begitu banyak yang dapat Anda pelajari dari mempelajari alat ini dan menawarkan wawasan yang lebih dalam bagi pengembang yang masuk ke detail seluk beluk.

Untuk mengujinya sendiri, cukup kunjungi Statistik CSS dan masukkan situs web. Anda akan kagum dengan banyaknya data yang tersedia dan seberapa banyak yang dapat Anda pelajari dari alat sederhana tersebut.