Інструмент для аналізу та порівняння двох таблиць стилів CSS

Хто-небудь знає хороший інструмент, який може аналізувати та порівнювати дві таблицю стилів CSS, щоб знайти, які селектори мають різні стилі?

Я не можу використовувати стандартний інструмент порівняння, оскільки два файли CSS мають дуже різні макети. Мені потрібен інструмент, який може проаналізувати та зрозуміти CSS, а потім шукати селекторів, які насправді мають різні стилі в двох таблицях стилів.

Єдиним інструментом, який я знайшов, є CSS Comparer від Алана Харта , однак він стає заплутаним, коли існують стилі, які застосовуються до декількох селекторів.

40
@ Йосиф: Так, це буде працювати. Я спочатку шукаю існуючий інструмент, хоча :)
додано Автор Grodriguez, джерело
@BoltClock: Nop. Мені просто потрібно перевірити, чи таблиця стилів насправді еквівалентна (або що існуючі зміни призначені, а не випадкові).
додано Автор Grodriguez, джерело
Оригінальний інструмент, який я зв'язав з (CSS Comparer Alan Hart), все ще онлайн: alanhart. co.uk/tools/compare-css.php
додано Автор Grodriguez, джерело
Чи потрібно враховувати стандартні налаштування браузера та інші способи обчислення стилів?
додано Автор BoltClock, джерело
додано Автор SuperUberDuper, джерело
ось безумна ідея: ви можете завантажити обидва таблиці стилів на веб-сторінку і запустити яку-небудь яваскрипт, порівнюючи між різними таблицями стилів. Це займе чимало кодування, але я думаю, що це може бути корисним інструментом.
додано Автор Joseph Marikle, джерело
Visual Studio FTW!
додано Автор Blowsie, джерело
css-compare.com дуже зручно ..
додано Автор Patriks, джерело
css-compare.com мертвий - використовуйте github.com/mixi- inc/css-semdiff
додано Автор IVO GELOV, джерело

3 Відповіді

Ось що я в кінцевому підсумку робив, у випадку, якщо хтось ще має ту ж саму проблему:

  1. Я використав CSSTidy , щоб "нормалізувати" два таблиці стилів, які я хотів би порівняти. Нормалізація в моєму випадку означала розбиття декількох селекторів та сортування селекторів та властивостей. Онлайн-версія CSSTidy доступна тут .
  2. Після цього я використав інструмент CSS Comparer від Алана Харта щоб з'ясувати відмінності між двома таблицями стилів.

Це зробило роботу за моїми конкретними вимогами.

41
додано
Дякую, посилання оновлено.
додано Автор Grodriguez, джерело
онлайнова версія csstidy не нормалізує декілька селекторів, розділених комами. CSS Comparer працював, коли я вручну копіював кожне правило, розділене комами.
додано Автор Gordon, джерело
Ваша посилання на CssTidy в Інтернеті не працює. Це робиться: csstidyonline.com
додано Автор KingAndrew, джерело
Це питання досить старе. Але я нещодавно зіткнувся з проблемою зіставлення мінімізованої та невизначеною версії того самого css. І css-compare.com дійсно допомагає, тому я б поділився сюди, щоб це допомагало людям прийти на це питання .. Це робить його легким і швидким, нам просто потрібно скопіювати пасту
додано Автор Patriks, джерело

Я спробував використовувати CSS Порівняти . Здається, це робиться саме те, що ви шукаєте. Проте, здається, деякі проблеми з кількома селекторами. Хороша частина полягає в тому, що вона запускається за допомогою командного рядка, тому ви можете налаштувати автоматизований процес, якщо у вас багато файлів CSS або ви можете об'єднати файли CSS разом, щоб порівняти їх з одним гігантським результуючою SASS-файлом. Цей інструмент покаже вам всі відмінності, включаючи відмінності у значеннях класів.

Що було б дуже добре, якщо інструмент покаже вам, які стилі перевизначили інші стилі в тій же таблиці стилів. Багато старих сайтів мають багато багажу таким чином, і фільтрування його буде чудово. Звичайно, автоматичний інструмент може викликати проблеми, але принаймні те, що створює звіт, подібний Firebug, за винятком кожного селектора та для всієї колекції файлів CSS, буде чудово. На жаль, CSS Порівняйте не такий інструмент, і я не знаю одного :(

3
додано
Так, це (проблеми з кількома селекторами), тому я спочатку використовував CSSTidy для нормалізації таблиць стилів, а потім - CSS Comparer Алана Харта, щоб зробити фактичне порівняння.
додано Автор Grodriguez, джерело

Я завантажую веб-сторінку, використовуючи одну таблицю стилів на одній вкладці та іншу таблицю стилів на іншій вкладці. Потім використовуйте інспектор або firebug для перевірки стилю відповідних вузлів.

Очевидно, це дуже керівництво, але те, що ви просите, - такий зловмисник для розбитого процесу, який ви, напевно, не знайдете багато допомоги.

Якщо у вас є досвід програмування, ви, напевно, можете писати синтаксичний аналізатор досить легко, щоб повідомити про кожному визначеному класі та його стилі. Однак це, мабуть, більше роботи, ніж це варто.

Робіть це вручну один раз, а потім виправте проблему, перейшовши до SASS ( http://sass-lang.com/ ) та покращення організації навколо веб-сайтів.

3
додано
Приємно, що ви згадуєте "робити це вручну один раз, а потім вирішити проблему, перемістившись до SASS" біт - причина, чому мені потрібен цей інструмент, точно , оскільки ми переїхали в SASS, і мені потрібно Переконайтеся, що в процесі нічого не трапилось :)
додано Автор Grodriguez, джерело