Визуализация любой таблицы стилей CSS с помощью статистики CSS

Задумывались ли вы, сколько правил CSS в таблице стилей? Или вы когда-нибудь хотели увидеть визуальное представление всех цветов, используемых в одном файле CSS? С Статистика CSSВы можете подключить любой веб-сайт и получить кучу необработанных данных CSS, чтобы удовлетворить ваше любопытство.

И это веб-приложение намного глубже, чем просто отображение всех цветов таблицы стилей. Вы можете визуализировать все значения z-index, все размеры шрифтов, все медиа-запросы и даже увидеть визуальный график специфичности,

Рекомендовано к прочтению: десять руководящих инструментов по стилю жизни для веб-дизайнеров

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Это приложение охватывает так много, что практически невозможно потреблять все за один присест. Он даст вам потрясающий обзор любого веб-сайта, просто продемонстрировав, что находится в их таблице стилей.

Чтобы начать, посетите Сайт CSS Stats и подключите любой URL, который вы хотите. Вы также можете выбрать один из предложенных сайтов, таких как Facebook, Apple и Pinterest (среди других).

На странице результатов вы увидите общий размер CSS-файла в килобайтах, а также список наиболее часто используемых свойств и объявлений. Все это выглядит как один длинный список чисел, поэтому поначалу читать его может быть сложно.

Но чем больше вы используете это приложение, тем веселее оно становится! Вот список всего, что вы найдете на странице статистики:

Общее количество свойств, селекторов и правил
Все цвета шрифтов с примерами и шестнадцатеричными кодами
Все цвета фона с примерами и шестнадцатеричными кодами
Все размеры шрифтов с примерами
Список семейств шрифтов
Список всех значений z-index
Гистограмма общих / уникальных объявлений CSS
График специфичности
Всего размер набора правил
Все медиа-запросы
Необработанный код CSS вместе с URL-ссылками на отдельные файлы CSS

CSS Stats достаточно умен, чтобы собрать все CSS-файлы и объединить эти данные. Разработчики приложили немало усилий, чтобы все заработало.

И еще одна удивительная часть полное GitHub репо с исходным кодом для всего проекта. Таким образом, вы можете скачать это и повторно разместить его на своем собственном сервере (локально или иным образом), чтобы поиграть, если вы хотите копаться в коде.
У вас есть возможность получить любой отдельный файл CSS или проанализировать все таблицы стилей в одном домене. Изучив этот инструмент, вы можете многому научиться, и он предлагает более глубокое понимание разработчикам, которые разбираются в мельчайших подробностях.

Чтобы проверить себя, просто посетите Статистика CSS и подключите сайт. Вы будете поражены тем, сколько данных доступно и сколько вы можете узнать из такого упрощенного инструмента.

Рекомендуемое чтение: 15 полезных трюков CSS, которые вы могли не заметить