Профилирование CSS селекторов

Главные вкладки

Аватар пользователя VladSavitsky VladSavitsky 8 декабря 2008 в 0:52

Поиск CSS селекторов, которые не используются
Для PHP-кода есть методы и средства для профилирования - поиска неиспользуемых кусков кода (функций). Это помогает избавляться от устаревшего кода и делать приложение более эффективным.
В связи с тем, что верстальщик из меня пока профессиональный не получился, - я бы очень хотел знать сколько лишнего кода у меня в таблицах стилей остается...

Понятно, что лучше аккуратно его делать, но после года-другого развития сайта уже такой "мертвый" код будет по любому. К своему удивлению нашёл отличное дополнение к Firefox Dust-Me Selectors, которое находит неиспользованные CSS-селекторы.

Описание Dust-Me Selectors

Dust-Me Selectors это расширение Firefox (1.5 и поздних), которое ищет не используемые CSS селекторы.

Извлекает все селекторы из всех таблиц стилей на странице, которую вы просматриваете, затем анализирует эту страницу, чтобы найти селекторы, которые не используются. Данные сохраняются, поэтому, при тестировании последующих страниц, селекторы могут пересечься, если они встречаются.

Вы можете тестировать страницы по одной или пройтись по всему сайту. Таким образом вы сделаете профилированием селекторов, которые нигде не используются.

Основные возможности

  • Поддерживает локальные и удаленные таблицы стилей, включая использование <link>-элементов, инструкций обработки <?xml-stylesheet?> (<?xml-stylesheet?> processing instructions) и утверждения import. (Обратите внимание: правила внутри <style> блоков, которые не являются утверждениями import и inline-аттрибуты стилей не включаются.)
  • Поддерживает таблицы стилей <link> внутри условных комментариев IE.
  • Проверяет одиночную страницу или целый сайт.
  • Понимает все селекторы CSS1 и большинство CSS2 и CSS3 селекторов (благодаря любезности великолепной base2 от Dean Edwards).
  • Обрабатывает основные хаки CSS. Например, "* html #foo" будет преобразовано в "html #foo".

Собственно - всё! Мне говорили, что это невозможно, но это реально и работает.

Возможно есть ещё какие-то варианты поиска неиспользуемых селекторов?

Оригинал обзора: Поиск CSS селекторов, которые не используются.

Комментарии

Аватар пользователя PVasili PVasili 8 декабря 2008 в 11:45

Решение половинчатое и применимо только на небольших сайтах.
Все селекторы невозможно проанализировать. Наверняка на сайте есть только 1 страница, которую вы не посетили и она-то не учтётся...

Аватар пользователя HIgor1968 HIgor1968 8 декабря 2008 в 13:56

Результат такогопрофилирования все равно надо проверять внимательно ручками. На сайте был скрытый DIV, который выводился аяксом. Данный плагин все его CSS оформление указал как ненужное.

Аватар пользователя Antoniy Antoniy 8 декабря 2008 в 15:10

Спасибо! Еще есть дубликаты селекторов, которые наверное тоже можно вычислить по быстрому и убрать.

Аватар пользователя VladSavitsky VladSavitsky 8 декабря 2008 в 18:17

Зачатки AI должны быть заложены в разработчика, а этот плагин это всего лишь программа.
И использовать её НЕ обязательно - это добровольно и на свой страх и риск.

Аватар пользователя sivruk sivruk 9 декабря 2008 в 5:08

Штука замечательная! Одно плохо из того, что сразу в глаза бросается - по внешним ссылкам при сканировании карты уходит.

Аватар пользователя alexandr.poddubsky alexandr.poddubsky 9 декабря 2008 в 5:27

"AntonTau" wrote:
Спасибо! Еще есть дубликаты селекторов, которые наверное тоже можно вычислить по быстрому и убрать.

Дубликаты убираются весьма просто, если брать виндовозные редакторы то тот же topstyle , делает чек и сразу выводятся все ошибки и в том числе дубляж.

Аватар пользователя Antoniy Antoniy 9 декабря 2008 в 7:48

Да, тот же Firebug показывает, но когда я делаю новую тему оформления, то игнорирую это, времени жалко. Хорошо бы потом их все почти автоматом убрать.

Аватар пользователя jeehadina jeehadina 9 декабря 2008 в 7:38

согласен с PVasili.
скрипт интересен, но пользы от него только для небольших сайтов.
и сайтмап, как тут писали не поможет, потому, как абсолютено все страницы в сайтмап не засовывают.
вот к примеру на друпал 6.4 он показывает 300 с лишним неиспользованных селекторов, и толку?

Аватар пользователя seaji seaji 9 декабря 2008 в 13:36

"jeehadina" wrote:
вот к примеру на друпал 6.4 он показывает 300 с лишним неиспользованных селекторов, и толку?

В топку их Smile

Аватар пользователя HIgor1968 HIgor1968 9 декабря 2008 в 13:44

как кстаи можно отключить в теме подгрузку стандартных CSS друпала, а только свои грузить?
кроме того что убрать из кода

  <?php print $styles ?>
Аватар пользователя PVasili PVasili 9 декабря 2008 в 14:23

Ну до чего народ ленивый пошел Smile
Выбрасываем:

<?php print $styles; ?>

Добавляем:

<link href="/путь к стилю/имя файла стиля.css" rel="stylesheet" type="text/css" media="screen">
Аватар пользователя neochief neochief 9 декабря 2008 в 15:03

В шестом друпале можно подменять стандартные файлы стилей своими, например стандартный system.css.
Для этого нужно добавить одноименный файл стилей в .info темы

Аватар пользователя HIgor1968 HIgor1968 9 декабря 2008 в 15:40

Это было бы самое лучшее. только не работает.
Если тупо прописать стили, то надоесть потом стили модулей ловить.
например lightbox, FCK.
Больше всего мусора от /modules/system/system.css и /modules/system/defaults.css
Достаточно только их убрать.
Собственно уже нащел решения
для друпал5 : http://blamcast.net/articles/override-default-system-css-drupal
для друпал6 : http://drupal.org/node/258756

function phptemplate_preprocess_page(&$vars)
{
$css = $vars['css'];
unset($css['all']['module']['modules/system/system.css']);
unset($css['all']['module']['modules/system/defaults.css']);
$vars['styles'] = drupal_get_css($css);
}
Аватар пользователя Valeratal Valeratal 9 декабря 2008 в 15:49

вообще достало, что каждый модуль втыкает свой CSS куда надо и куда не надо
даже simplenews , и тот со своими стилями

Аватар пользователя seaji seaji 9 декабря 2008 в 21:07

Если бы этого не было, то разработчики модулей и предположить бы не могли во что превратятся страницы их модуля. Я их понимаю и это нормально.
Но, однако, возможность перехвата должна быть.

Аватар пользователя HIgor1968 HIgor1968 10 декабря 2008 в 11:59

Я пока не столкнулся с тем что модули добавляли много селекторов в CSS.
system.css - много добавляет лишнего, необходимого только при администрировании, для этого на администрирование отдельную тему поставил.
defaults.css - собственно можно и не сносить, он маленький. Я отключил но мне пришлось половину его обратно вставлять. То-что ниже

** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html

Пока не добавил были непонятки с отображением форм в блоках.

Аватар пользователя VladSavitsky VladSavitsky 10 декабря 2008 в 15:15

Ребята, что-то я за вами не успеваю...
Обязательно опубликуйте результат работы, хорошо?
Мне тоже интересна оптимизация кода CSS, а также что можно безболезнеенно и как.