Какой инструмент использовать для сравнения и сокращения таблиц стилей CSS
У меня есть страница (page1.html), которая ссылается на файл CSS (style1.css)
Все хорошо.
Мне нужен Page1.html для дополнительной ссылки на Style2.css. Однако, когда я добавляю ссылку, некоторые вещи на Page1.html портятся.
Как я могу определить, что именно с Style2.css вызывает эту проблему? Какой-нибудь инструмент сравнения? Какой-то процесс?
8 ответов
Firebug показывает вам, какие правила переопределяются и из какой таблицы стилей берутся эти правила.
Просто выберите проблемные элементы, и он покажет вам правила, примененные к нему. Затем вы можете включить / выключить их, чтобы увидеть эффект.
Непосредственно сравните две таблицы стилей CSS, чтобы сразу увидеть различия между ними: http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/
Очень удобно, когда вы вносите изменения в CSS сайта и не можете вспомнить, что вы изменили (если вы сохраняете резервную копию оригинала для сравнения)
Да, я хотел бы использовать инструмент сравнения ( DiffMerge бесплатен) и посмотреть, что схоже между двумя CSS-файлами.
DiffMerge (или любой другой инструмент для анализа) хорош, если ваши файлы имеют похожую разметку, но если они сильно отличаются (как, я полагаю, ваш CSS), они могут легко показать весь файл как одну большую разницу и, таким образом, доказать быть бесполезным вообще.
В этой ситуации я бы установил инспектор dom в FireFox и проверил это дополнение.
Затем включите вторую таблицу стилей и просмотрите страницу.
Щелкните правой кнопкой мыши на заблокированном элементе и "Осмотрите это". Затем измените режим просмотра DOM инспектора на CSS. Он покажет вам текущий каскад стилей, примененных к текущему элементу, а также даст ссылку на какой файл и какую строку.
Таким образом, вы можете выяснить, где у вас конфликтующие стили.
По общему признанию, это не автоматический процесс, но если ваши стили не будут идентичны на 99%, тогда дифференцирование не сработает.
Я использовал этот класс php раньше - работает хорошо.
http://www.phpclasses.org/package/4638-PHP-Compare-two-CSS-style-definitions.html
Диффчекер (онлайн) инструмент. Довольно полезно и быстро. http://www.diffchecker.com/
Все хорошие ответы.... Мне не хочется выбирать правильный на этот раз.
Просто чтобы добавить к смеси... Коллега порекомендовал панель инструментов веб-разработчика для FF.
Я использовал CSS\View Style Info, а затем щелкнул по странному материалу... Я быстро нашел правило в новой таблице стилей, которое радикально изменило ее высоту.
Для разработчиков, использующих Visual Studio 2008, которые могут читать это:
Когда вы выбираете элемент HTML в конструкторе WYSIWYG, вы можете использовать окно "Свойства CSS" для просмотра всех правил CSS и их соответствующих настроек, включая настройки каскадирования, унаследованные от различных правил CSS.
Нажав на правило на панели свойств, вы можете определить источник каждого параметра CSS. Это позволяет понять, почему страница или элемент выглядят определенным образом.