使い方

2つの CSS を貼り付けて「比較 »」を押すと、共通部分と、A・B それぞれの差分が出力されます。処理はすべてブラウザ内で完結し、入力内容がサーバーに送信されることはありません。

💡 比較のルール

• ルールの対応づけ： 同じ @media の中で、同じセレクタのルールを対応させます（セレクタの順序違い・重複・空白の違いは同じとみなします）
• 宣言の突き合わせ： 対応したルールの中で、プロパティと値がどちらも同じ宣言を「共通」にします。残りは A・B それぞれの差分になります
• 同じセレクタが複数回ある場合： 1回目どうし、2回目どうしを対応させます（まとめて並べ替えることはしません）
• 片方にしかないルール： ルールごと、その側の差分に出力されます

🎯 出力の使い方

• 共通部分は常に読み込み、A・B の差分はそれぞれの条件（メディアクエリ）で、共通部分より後ろに読み込みます
• 共通と差分は同じ順序で出力されますが、同じ詳細度で同じ要素に効く別のルールがある場合は、読み込み順で結果が変わることがあります

⚠️ 注意事項

• 同じプロパティが共通と差分に分かれたとき： 元のカスケード順と変わる可能性があるため、画面下に警告を表示します
• @media などの入れ子： @media・@supports・@layer の中も、条件ごとに別々に比較します。@keyframes は中身ごとまとめて比較します
• コメント： ルールの直前にあるコメントだけを、そのルールと一緒に出力します（宣言の間のコメントは出力されません）