Поиск неиспользованных правил в каскадных таблицах стилей CSS на примере библиотеки helium.js

10321371

Библиотека Хеллиум helium.js является инструментом для выявления неиспользованных стилей CSS на страницах вашего веб-сайта.

Инструмент Хеллиум основан на javascript и работает в браузере.

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

Примечание: Вы должны работать с скриптом Хеллиум только на локальном сайте, не доступном из вне. Если вы запустите его на общедоступном сайте, каждый посетитель будет видеть Хеллиум в тестовой среде.

Скачать библиотекуСкачать примерПример

Установка

Добавьте сценарий на каждую страницу вашего сайта которую необходимо проверить. Элемент выглядит следующим образом:

1	<script type="text/javascript" src="path/to/helium.js"> </ script>

Примечание: путь / к / helium.js должен соответствовать пути, где вы разместите файл helium.js.

Хеллиум инициируется вызовом метода «helium.init ()». Он должен быть размещен в любом месте страницы. К примеру:

1 2 3 4 5

<script type="text/javascript">     window.addEventListener('load', function(){         helium.init();     }, false); </script>

Примечание: В зависимости от стратегии загрузки JavaScript на вашем сайте, вы можете поместить «helium.init ()» сразу после загрузки скриптов.

Использование

Копируем библиотеку на наш сайт, прописываем в скриптах, открываем наш сайт и видим поле ввода.
Жмем кнопку Пуск (внизу справа). После обработки, вам будет представлен доклад,в котором будет содержаться список всех стилей URL, которые будут обнаружены.

Селекторы имеют цветовую маркировку.

Зеленый: Непревзойденная селекторы.

Они являются основным те, которые не были обнаружены, как и в использовании.

Черные: Matched селекторов, которые сгруппированы с не соответствием селекторы.

В основном это означает, что несколько селекторов были определены вместе, как «h1, h2, h3 {}». Все селекторы проверяются отдельно, поэтому они отображаются, чтобы сделать их легче найти в таблицах стилей позже.

Красный: Искаженная селекторы.

Они, вероятно, будут редкими. Это означает, что когда браузер пытался тестирование на селекторе, он не может разобрать синтаксис того, как она была написана. Это может быть как «. ClassName idname # {}» или «CSS хак» часто используется для Internet Explorer.

Синий: псевдо-селектор класса.

Эти селекторы, как «дел. Наведении» или «вход: фокус». Эти селекторы, которые требуют вмешательства пользователя для активации. В настоящее время гелий не может имитировать взаимодействие требует, чтобы увидеть, если они находятся или нет. Это ответственность разработчика для проверки их вручную.

Поддержка браузеров:

Поддерживается любой современный браузер, который поддерживает LocalStorage и document.querySelector.

Не поддерживается IE6 и IE7.

Важно:

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

Нет проверки на наличие ошибок на ваших страницах.

Нет поддержки XML карты сайта: Нужно заполнить список страниц вашего сайта.

Posted in: Javascript