Любой инструмент, чтобы показать вам все элементы / страницы на сайте, на которые влияет определенное правило CSS?

Question

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

А как же наоборот? Существует ли какой-либо инструмент, который позволил бы вам выделить конкретное правило CSS и показать вам все страницы сайта (статические HTML-страницы или их динамические шаблоны), к которым он применяется?

Пример: я пришел работать на новом сайте, очень большом, и мне нужно отредактировать CSS на определенной странице, но при этом я не представляю, сколько других страниц на сайте также могут иметь эти имена классов и, следовательно, быть затронутым. Конечно, я могу попытаться найти весь класс по именам классов, но это может занять много времени или сложно. Этот сайт имеет класс с именем "ba", например. Угадайте, сколько неактуальных страниц будет отображаться, если я просто ищу "ба"? Так как насчет включения двойной кавычки ("ba")? Ну, это может быть в середине нескольких других классов (class = "hz ba top"), в конце (class = "hz ba") и т. Д. Подробнее таким образом, он может быть динамически подключен через серверный код, что делает его еще более трудным для поиска. Инструмент, который может каким-то образом создать пауку на вашем сайте и будет способен идентифицировать все места, на которые повлияет ваше изменение CSS, был бы великолепен.

Answer 1

Вы можете использовать регулярные выражения ..

например, в Dreamweaver в диалоговом окне поиска:

1. выберите 'Найти в: Весь текущий локальный сайт .. "
2. выберите «Поиск: Исходный код»
3. check 'Использовать регулярное выражение'
4. в текстовом поле find type class\s*?=\s*?".*?content.*?"
5. нажмите «найти все»

это же регулярное выражение можно использовать с другим программным обеспечением, которое может искать внутри файлов с помощью регулярных выражений ....
например: http://www.sowsoft.com/search.htm (не связан с ними, просто нашел его здесь ..)

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

Answer 2

не совсем так, но есть плагин firebug, который делает это для любой загруженной страницы:

http://robertnyman.com/firefinder/

Answer 3

Как насчет размещения идентификатора на теле каждой страницы и использования его для ограничения использования CSS за пределами страниц, четко указанных в CSS?

Как это:

#mypage .description,
#myotherpage . description {
}

Минусы:

• Необходимо указывать идентификатор тела на каждой странице / шаблоне.
• Необходимо указать каждую страницу, к которой должен применяться CSS. Больше кода CSS для управления.
• Делает CSS менее легким для просмотра глазами (так как строка начинается с идентификатора страницы, а не стиля CSS). Это большая проблема, если некоторые стили CSS используются на нескольких страницах (поскольку спецификация css для каждого стиля будет длинной).

Плюсы:

• Предотвращает непреднамеренное распространение изменений CSS. То есть изменение одной страницы влияет на другие неизвестные страницы.
• Посмотрите, на какие страницы повлияет изменение CSS при редактировании самого стиля CSS. Информация прямо здесь; нет необходимости искать / grep для этого.
• Заставляет разработчиков указывать, на какие страницы влияет CSS. Если бы вы просто включили эту информацию в качестве комментариев в свой CSS, некоторые люди неизбежно забыли бы обновить комментарий, когда CSS используется на новой странице.

Я согласен с этим утверждением, сделанным другом:

"Минимизируйте CSS, который используется в нескольких местах. Это не похоже на программирование; лучше с небольшим дублированием CSS, чем с неуправляемым CSS. (Страницы, например apple.com, имеют собственные таблицы стилей для каждая страница, и некоторые глобальные CSS.) " - Олав Бьёркой, оригинальный создатель фреймворка Blueprint CSS

Мне бы очень понравилось ваше мнение по этому вопросу, или если бы кто-нибудь из вас нашел лучший способ.

Answer 4

Для такого рода вещей я просто использую grep, или, что еще лучше, ack. Если вас беспокоит ложноположительный результат при поиске коротких образцов, вы можете использовать двойной фильтр: вы grep всех строк, содержащих class=, и передаете его вывод в другой grep, который только сужает результат до строк, содержащих оба class= и ваш шаблон поиска (который также может быть более точно задан с помощью регулярного выражения с использованием границ слов, таких как \bba\b, чтобы избежать совпадения bar или abba)

Answer 5

Если вы используете Mac, есть отличное условно-бесплатное приложение под названием " CSSEdit " от Indy Mac Shop в Бельгии. Лицензия на одного пользователя составляет 30 евро. Я использовал его в течение ок. три года, и я могу рекомендовать это очень. Это зрелое, стабильное приложение (хотя оно постоянно обновляется / улучшается); Широко используется среди веб-дизайнеров Mac и тех, кому не нужна, но нужна вся помощь, которую мы можем получить, которую, безусловно, предоставляет CSSEdit.

Чтобы показать элементы на html-странице в стиле данного селектора:

(i) открыть таблицу стилей и страницу разметки (страница разметки должна иметь ссылку на таблицу стилей);

(ii) выключить кнопку «Рентген» (должно быть «Неактивно» под кнопкой);

(iii) в редакторе стилей щелкните любой селектор (я щелкаю по нему так, чтобы мой курсор находился у левого поля, например, перед знаком «#» и т. Д.);

(iv) теперь нажмите «Инспектор» на странице разметки (рядом с «Рентген»).

Теперь посмотрите на вашу страницу разметки - она ​​будет иметь синий контур вокруг элементов, на которые влияет стиль, на который вы щелкнули в шаге (iii) выше.