CSSスタイルシートを比較して削減するために使用するツール

質問

cssファイル（style1.css）を参照するページ（page1.html）があります

すべてが良い。

Style2.cssをさらに参照するにはPage1.htmlが必要ですただし、参照を追加すると、Page1.htmlの一部が台無しになります。

この問題の原因となっているStyle2.cssの内容を確認するにはどうすればよいですか？いくつかの差分ツール？何らかのプロセス？

解決

Firebug は、どのルールがオーバーライドされているか、どのスタイルシートからルールが取得されているかを示します。

問題の要素を選択するだけで、適用されているルールが表示されます。その後、効果を見るためにそれらのオン/オフを切り替えることができます。

他のヒント

2つのCSSスタイルシートを直接比較して、それらの違いを即座に確認します。 http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/

サイトのCSSに変更を加えたとき、変更した内容を思い出せない場合（比較するために元のバックアップを保持している限り）、非常に便利です

はい、diffツールを使用し（ DiffMerge は無料です）、類似するものを確認します2つのcssファイル間。

DiffMerge（またはその点については任意の差分ツール）は、ファイルのレイアウトが似ている場合に適していますが、CSSのように非常に異なる場合は、ファイル全体を1つの大きな違いとして簡単に表示でき、まったく役に立たないことがわかります。

この状況で行うことは、FireFoxにdomインスペクターをインストールし、このアドオンを検査することです。

次に、2番目のスタイルシートを含めてページを表示します。

ブロックされた要素を右クリックして、「Inspect this」を選択します。次に、domインスペクターの表示モードをCSSに変更します。現在の要素に適用されているスタイルの現在のカスケードを表示し、どのファイルとどの行への参照も提供します。

これにより、スタイルが競合する場所を特定できます。

これは明らかに自動プロセスではありませんが、スタイルが99％同一でない場合、差分は機能しません。

以前にこのphpクラスを使用したことがあります-正常に動作します。

すべての良い答え....今回は正しいものを選ぶのが嫌です。

ミックスに追加するだけ...同僚がFF用のWeb Developer Toolbarを推奨しました。

CSS \ View Style Infoを使用してから、奇妙なものをクリックしました...新しいスタイルシートから、高さを根本的に変更するルールをすぐに見つけました。

Visual Studio 2008 を使用し、これを読んでいる開発者向け：

WYSIWYGデザイナーでHTML要素を選択すると、CSSプロパティウィンドウを使用して、すべてのCSSルールと、さまざまなCSSルールから継承されたカスケード設定を含む、対応する設定を表示できます。

プロパティペインでルールをクリックすると、各CSS設定のソースを特定できます。これにより、ページまたは要素が特定の方法で表示される理由を簡単に把握できます。

diffchecker（online）ツール。非常に便利で高速です。 http://www.diffchecker.com/

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow