Візуалізуйте будь-яку таблицю стилів CSS зі статистикою CSS
Ви коли-небудь замислювалися, скільки правил CSS в таблиці стилів? Або ви коли-небудь хотіли бачити візуальне подання з всі кольори використовується в одному файлі CSS? С Статистика CSS, можна підключити будь-який веб-сайт і витягніть купу необроблених даних CSS щоб задовольнити вашу цікавість.
І це веб-додаток проходить набагато глибше, ніж просто відображати всі кольори для таблиці стилів. Ви можете візуалізувати всі значення z-індексу, усі розміри шрифтів, всі медіа-запити і навіть бачити графік візуальної специфічності.
Ця програма охоплює так багато, що практично неможливо споживати все за один раз. Це дасть вам величезний огляд будь-якого веб-сайту демонструючи, що в їхній таблиці стилів.
Щоб розпочати роботу, перейдіть на веб-сайт CSS Stats і підключити будь-яку URL-адресу ти бажаєш. Ви також можете вибрати з кількох запропонованих сайтів, таких як Facebook, Apple і Pinterest (серед інших).
На сторінці результатів ви побачите загальний розмір файлу CSS в кілобайтах разом зі списком найчастіше використовувані властивості & декларації. Все це виглядає як один довгий список чисел, щоб він міг заплутати читати спочатку.
Але чим більше ви використовуєте цю програму, тим більше задоволення вона отримує! Ось a список всього ви знайдете на сторінці статистики:
- Усього # з властивості, селекторів, і правила
- Все кольорів шрифту з прикладами та шістнадцятковими кодами
- Все фонові кольори з прикладами та шістнадцятковими кодами
- Все розмірів шрифту з прикладами
- Список сімей шрифтів
- Список усіх Значення z-індексу
- Лінійчатий діаграма загальні / унікальні декларації CSS
- Специфіка графіка
- Усього розмір набору правил
- Все медіа-запити
- The необроблений код CSS разом з URL-посилання до окремі файли CSS
Статистика CSS досить розумна, щоб витягти всі файли CSS і об'єднати ці дані разом. Розробники вклали багато зусиль у цю справу, щоб отримати її правильну роботу.
І, додатковий awesome частина повний GitHub репо з вихідний код для всього проекту. Отже, ви можете завантажити це і повторно розмістити його на своєму власному сервері (локально або іншим чином), щоб грати, якщо ви хочете копатися в коді.
У вас є можливість потягнувши будь-який окремий файл CSS або розбір всіх таблиць стилів на одному домені. Ви можете багато чого дізнатися від вивчення цього інструменту, і він пропонує більш глибоке розуміння для розробників, які опиняються в деталях.
Щоб перевірити себе, відвідайте статистику CSS і підключіть веб-сайт. Ви будете вражені тим, скільки даних доступно і скільки ви можете дізнатися з такого спрощеного інструменту.
