Визуализация любой таблицы стилей CSS с помощью статистики CSS
Задумывались ли вы, сколько правил CSS в таблице стилей? Или вы когда-нибудь хотели увидеть Визуальное представление из все цвета используется в одном файле CSS? С Статистика CSS, Вы можете подключить любой веб-сайт и вытащить кучу необработанных данных CSS чтобы удовлетворить ваше любопытство.
И это веб-приложение намного глубже, чем просто отображение всех цветов таблицы стилей. Вы можете визуализировать все значения z-index, все размеры шрифта, все медиа-запросы и даже увидеть график визуальной специфичности.
Это приложение охватывает так много, что практически невозможно потреблять все за один присест. Это даст вам огромный обзор любого веб-сайта просто демонстрируя то, что находится в их таблице стилей.
Чтобы начать, посетите веб-сайт CSS Stats и подключите любой URL ты хочешь. Вы также можете выбрать один из предложенных сайтов, таких как Facebook, Apple и Pinterest (среди прочих).
На странице результатов вы увидите общий размер файла CSS в килобайтах вместе со списком наиболее часто используемые свойства и объявления. Все это выглядит как один длинный список чисел, так что поначалу читать его может быть сложно.
Но чем больше вы используете это приложение, тем веселее становится! Вот список всего Вы найдете на странице статистики:
- Всего свойства, селекторы, а также правила
- Все цвета шрифта с примерами и шестнадцатеричными кодами
- Все цвета фона с примерами и шестнадцатеричными кодами
- Все размеры шрифта с примерами
- Список семейства шрифтов
- Список всех значения z-index
- Гистограмма всего / уникальных CSS-объявлений
- График специфичности
- Всего размер набора правил
- Все медиа-запросы
- необработанный код CSS вместе с URL ссылки к отдельные файлы CSS
CSS Stats достаточно умен, чтобы вытащить все файлы CSS и объединить эти данные вместе. Разработчики приложили немало усилий, чтобы все заработало.
И еще одна потрясающая часть - это полное GitHub-репо с исходный код для всего проекта. Итак, вы можете скачать это и повторно принять это на вашем собственном сервере (локально или иным образом), чтобы поиграть, если вы хотите копаться в коде.
У вас есть возможность потянув любой отдельный файл CSS или же парсинг всех таблиц стилей на одном домене. Изучая этот инструмент, вы можете многому научиться, и он предлагает более глубокое понимание для разработчиков, которые разбираются в мельчайших подробностях.
Чтобы проверить себя, просто посетите CSS Stats и подключите веб-сайт. Вы будете поражены тем, сколько данных доступно и сколько вы можете узнать из такого упрощенного инструмента.
