css - css スタイルシートの比較と削減に使用するツール

Question

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

すべてが良いです。

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

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

score 12 · Accepted Answer

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

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

score 9 · Accepted Answer

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

サイトの CSS を変更し、何を変更したかを思い出せない場合に非常に便利です (元の CSS と比較するためのバックアップを保持している限り)。

score 2 · Accepted Answer

はい、差分ツール ( DiffMergeは無料) を使用して、2 つの css ファイルの類似点を確認します。

score 2 · Accepted Answer

ファイルのレイアウトが似ている場合はDiffMerge（またはそのための差分ツール）は優れていますが、それらが非常に異なる場合（CSSがそうであると私が予想するように）、ファイル全体が1つの大きな違いとして簡単に表示される可能性があるため、まったく役に立たない。

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

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

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

このようにして、競合するスタイルがある場所を把握できます。

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

score 1 · Accepted Answer

以前にこのphpクラスを使用したことがあります-うまく機能します。

score 0 · Accepted Answer

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

ミックスに追加するだけです...同僚がFF用のWeb開発者ツールバーを推奨しました。

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

score 0 · Accepted Answer

diffchecker (オンライン) ツール。非常に便利で高速です。http://www.diffchecker.com/

score 0 · Accepted Answer

これを読んでいる可能性のあるVisual Studio 2008を使用している開発者向け:

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

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

css - css スタイル シートの比較と削減に使用するツール