web-dev-qa-db-ja.com

2つのCSSスタイルシートを解析および比較するツール

どのセレクターが異なるスタイルを持っているかを見つけるために、2つのCSSスタイルシートを解析および比較できる優れたツールを知っていますか？

2つのCSSファイルのレイアウトは非常に異なるため、標準のdiffのようなツールは使用できません。 CSSを解析して理解できるツールが必要です。次に、2つのスタイルシートで実際に異なるスタイルを持つセレクターを探します。

私が見つけた唯一のツールは Alan HartのCSS Comparer ですが、複数のセレクタに適用されるスタイルがあると混乱します。

csssemantic-diff
43
Grodriguez

他の誰かが同じ問題を抱えている場合に備えて、私がやったことは次のとおりです。

  1. CSSTidy を使用して、比較したい2つのスタイルシートを「正規化」しました。私の場合の正規化とは、複数のセレクターを分割し、セレクターとプロパティを並べ替えることを意味しました。 CSSTidyのオンラインバージョンが利用可能です here 。
  2. その後、 Alan HartのCSS比較ツール を使用して、2つのスタイルシートの違いを見つけました。

これは私の特定の要件を満たす仕事をしました。

45
Grodriguez

CSS Compare を使用してみました。まさにあなたが探していることをするようです。ただし、複数のセレクターにはいくつかの問題があるようです。ナイスな部分はコマンドライン駆動であるため、多くのCSSファイルがある場合は自動化プロセスをセットアップするか、CSSファイルを連結して1つの巨大なSASSファイルと比較できます。このツールは、クラスの値の違いを含む、すべての違いを表示します。

同じスタイルシート内の他のスタイルをオーバーライドするスタイルがツールによって示されたら、本当に素晴らしいことです。多くの古いサイトにはこのように多くの荷物があり、それを除外することは素晴らしいことです。もちろん、自動化されたツールは問題を引き起こす可能性がありますが、少なくとも、Firebugのようなレポートを生成するものは、すべてのセレクターとCSSファイルのコレクション全体を除き、素晴らしいものです。悲しいことに CSS Compare はそのようなツールではなく、私はそれを知りません:(

3
cjbarth