Профилирование CSS селекторов
Прислано: VladSavitsky
вс, 07/12/2008 - 21:52

Для 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 селекторов, которые не используются.
- VladSavitsky's blog
- Для комментирования войдите или зарегистрируйтесь
В мемориз, адназначна!
- Для комментирования войдите или зарегистрируйтесь
Да, классная штука
- Для комментирования войдите или зарегистрируйтесь
Спасибо, Влад!
- Для комментирования войдите или зарегистрируйтесь
Спасибо
очень полезно для инвентаризаций CSS :)
- Для комментирования войдите или зарегистрируйтесь
Спасибо, как раз необходимо
- Для комментирования войдите или зарегистрируйтесь
Спасиб.
- Для комментирования войдите или зарегистрируйтесь
Решение половинчатое и применимо только на небольших сайтах.
Все селекторы невозможно проанализировать. Наверняка на сайте есть только 1 страница, которую вы не посетили и она-то не учтётся...
- Для комментирования войдите или зарегистрируйтесь
Для этого там есть анализ по sitemap.
- Для комментирования войдите или зарегистрируйтесь
Результат такогопрофилирования все равно надо проверять внимательно ручками. На сайте был скрытый DIV, который выводился аяксом. Данный плагин все его CSS оформление указал как ненужное.
- Для комментирования войдите или зарегистрируйтесь
Спасибо! Еще есть дубликаты селекторов, которые наверное тоже можно вычислить по быстрому и убрать.
- Для комментирования войдите или зарегистрируйтесь
это как? если не секрет?
Думаете в простом скрипте заложены зачатки AI?
- Для комментирования войдите или зарегистрируйтесь
Зачатки AI должны быть заложены в разработчика, а этот плагин это всего лишь программа.
И использовать её НЕ обязательно - это добровольно и на свой страх и риск.
- Для комментирования войдите или зарегистрируйтесь
О, спасибо. Давно о таком мечтал.
- Для комментирования войдите или зарегистрируйтесь
Не буду оригинален, но спасибо за то что поделились знаниями =)
- Для комментирования войдите или зарегистрируйтесь
Штука замечательная! Одно плохо из того, что сразу в глаза бросается - по внешним ссылкам при сканировании карты уходит.
- Для комментирования войдите или зарегистрируйтесь
Спасибо! Еще есть дубликаты селекторов, которые наверное тоже можно вычислить по быстрому и убрать.
Дубликаты убираются весьма просто, если брать виндовозные редакторы то тот же topstyle , делает чек и сразу выводятся все ошибки и в том числе дубляж.
- Для комментирования войдите или зарегистрируйтесь
согласен с PVasili.
скрипт интересен, но пользы от него только для небольших сайтов.
и сайтмап, как тут писали не поможет, потому, как абсолютено все страницы в сайтмап не засовывают.
вот к примеру на друпал 6.4 он показывает 300 с лишним неиспользованных селекторов, и толку?
- Для комментирования войдите или зарегистрируйтесь
Да, тот же Firebug показывает, но когда я делаю новую тему оформления, то игнорирую это, времени жалко. Хорошо бы потом их все почти автоматом убрать.
- Для комментирования войдите или зарегистрируйтесь
вот к примеру на друпал 6.4 он показывает 300 с лишним неиспользованных селекторов, и толку?
В топку их :)
- Для комментирования войдите или зарегистрируйтесь
До кучи в тему список on-line оптимизаторов CSS
Сам пользовался Clean CSS. Сжал CSS процентов на 20 - ошибка была всего одна и то она была заранее ясна.
- Для комментирования войдите или зарегистрируйтесь
как кстаи можно отключить в теме подгрузку стандартных CSS друпала, а только свои грузить?
кроме того что убрать из кода
<?php print $styles ?>
- Для комментирования войдите или зарегистрируйтесь
Может так:
static $css; $css = array(); drupal_add_css('ваш файл, сударь')
- Для комментирования войдите или зарегистрируйтесь
Ну до чего народ ленивый пошел :)
Выбрасываем:
<?php print $styles; ?>
Добавляем:
<link href="/путь к стилю/имя файла стиля.css" rel="stylesheet" type="text/css" media="screen">
- Для комментирования войдите или зарегистрируйтесь
Пардон Василий;)
Я и спросил есть ли что кроме этого способа.
- Для комментирования войдите или зарегистрируйтесь
Спасибо
- Для комментирования войдите или зарегистрируйтесь
В шестом друпале можно подменять стандартные файлы стилей своими, например стандартный system.css.
Для этого нужно добавить одноименный файл стилей в .info темы
- Для комментирования войдите или зарегистрируйтесь
Это было бы самое лучшее. только не работает.
Если тупо прописать стили, то надоесть потом стили модулей ловить.
например 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); }
- Для комментирования войдите или зарегистрируйтесь
вообще достало, что каждый модуль втыкает свой CSS куда надо и куда не надо
даже simplenews , и тот со своими стилями
- Для комментирования войдите или зарегистрируйтесь
Если бы этого не было, то разработчики модулей и предположить бы не могли во что превратятся страницы их модуля. Я их понимаю и это нормально.
Но, однако, возможность перехвата должна быть.
- Для комментирования войдите или зарегистрируйтесь
Однако, можно было бы сделать опцию отключения
- Для комментирования войдите или зарегистрируйтесь
Неужели сработало?
- Для комментирования войдите или зарегистрируйтесь
Ты, что, это ж целый чекбокс программировать...
- Для комментирования войдите или зарегистрируйтесь
Нет. Но вы хоть по теме ответили;)
Я решение ниже написал.
- Для комментирования войдите или зарегистрируйтесь
Я пока не столкнулся с тем что модули добавляли много селекторов в CSS.
system.css - много добавляет лишнего, необходимого только при администрировании, для этого на администрирование отдельную тему поставил.
defaults.css - собственно можно и не сносить, он маленький. Я отключил но мне пришлось половину его обратно вставлять. То-что ниже
** Markup free clearing ** Details: http://www.positioniseverything.net/easyclearing.html
Пока не добавил были непонятки с отображением форм в блоках.
- Для комментирования войдите или зарегистрируйтесь
Ребята, что-то я за вами не успеваю...
Обязательно опубликуйте результат работы, хорошо?
Мне тоже интересна оптимизация кода CSS, а также что можно безболезнеенно и как.
- Для комментирования войдите или зарегистрируйтесь














Комментарии