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