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

Прислано: VladSavitsky

вс, 07/12/2008 - 21: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 селекторов, которые не используются.

Комментарии


Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Применить"
Опубликовано direqtor в вс, 07/12/2008 - 22:55.

В мемориз, адназначна!


Опубликовано neochief в пн, 08/12/2008 - 01:08.

Да, классная штука


Опубликовано kyky в пн, 08/12/2008 - 02:21.

Спасибо, Влад!


Опубликовано Valeratal в пн, 08/12/2008 - 06:48.

Спасибо
очень полезно для инвентаризаций CSS :)


Опубликовано HIgor1968 в пн, 08/12/2008 - 07:05.

Спасибо, как раз необходимо


Опубликовано Dimm в пн, 08/12/2008 - 08:23.

Спасиб.


Опубликовано PVasili в пн, 08/12/2008 - 08:45.

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


Опубликовано HIgor1968 в пн, 08/12/2008 - 08:56.

Для этого там есть анализ по sitemap.


Опубликовано HIgor1968 в пн, 08/12/2008 - 10:56.

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


Опубликовано Kremenetskiy в пн, 08/12/2008 - 12:10.

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


Опубликовано PVasili в пн, 08/12/2008 - 12:23.

это как? если не секрет?
Думаете в простом скрипте заложены зачатки AI?


Опубликовано VladSavitsky в пн, 08/12/2008 - 15:17.

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


Опубликовано seaji в пн, 08/12/2008 - 18:11.

О, спасибо. Давно о таком мечтал.


Опубликовано Shedko в пн, 08/12/2008 - 20:40.

Не буду оригинален, но спасибо за то что поделились знаниями =)


Опубликовано sivruk в вт, 09/12/2008 - 02:08.

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


Опубликовано alexandr.poddubsky в вт, 09/12/2008 - 02:27.

"AntonTau" написал(а):

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

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


Опубликовано jeehadina в вт, 09/12/2008 - 04:38.

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


Опубликовано Kremenetskiy в вт, 09/12/2008 - 04:48.

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


Опубликовано seaji в вт, 09/12/2008 - 10:36.

"jeehadina" написал(а):

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

В топку их :)


Опубликовано HIgor1968 в вт, 09/12/2008 - 10:39.

До кучи в тему список on-line оптимизаторов CSS
Сам пользовался Clean CSS. Сжал CSS процентов на 20 - ошибка была всего одна и то она была заранее ясна.


Опубликовано HIgor1968 в вт, 09/12/2008 - 10:44.

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

  <?php print $styles ?>


Опубликовано direqtor в вт, 09/12/2008 - 11:07.

Может так:

static $css;
$css = array();
drupal_add_css('ваш файл, сударь')


Опубликовано PVasili в вт, 09/12/2008 - 11:23.

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

<?php print $styles; ?>

Добавляем:
<link href="/путь к стилю/имя файла стиля.css" rel="stylesheet" type="text/css" media="screen">


Опубликовано HIgor1968 в вт, 09/12/2008 - 11:49.

Пардон Василий;)
Я и спросил есть ли что кроме этого способа.


Опубликовано HIgor1968 в вт, 09/12/2008 - 11:50.

Спасибо


Опубликовано neochief в вт, 09/12/2008 - 12:03.

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


Опубликовано HIgor1968 в вт, 09/12/2008 - 12: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 в вт, 09/12/2008 - 12:49.

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


Опубликовано seaji в вт, 09/12/2008 - 18:07.

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


Опубликовано Valeratal в вт, 09/12/2008 - 18:10.

Однако, можно было бы сделать опцию отключения


Опубликовано direqtor в вт, 09/12/2008 - 22:25.

Неужели сработало?


Опубликовано direqtor в вт, 09/12/2008 - 22:29.

Ты, что, это ж целый чекбокс программировать...


Опубликовано HIgor1968 в ср, 10/12/2008 - 08:50.

Нет. Но вы хоть по теме ответили;)
Я решение ниже написал.


Опубликовано HIgor1968 в ср, 10/12/2008 - 08:59.

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

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

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


Опубликовано VladSavitsky в ср, 10/12/2008 - 12:15.

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


Опубликовано HIgor1968 в ср, 10/12/2008 - 13:04.

Попытался разюмировать


Новое на сайте

Ссылки партнёров