CSSフォーマッター
セレクター、宣言、コメント、値、at-rule 構造を保ったまま CSS を読みやすく整形します。
Make CSS easier to review
圧縮された CSS はセレクター、宣言、コメント、長い値を一行に隠します。このツールは確認しやすいレイアウトを表示します。
整形は表示を変えるだけで、CSS の妥当性、効率、アクセシビリティ、互換性を証明しません。元と diff を保存してください。
セレクター、宣言、コメント、custom property、media query、引用値を含む例を使います。
Formatting is not CSS validation
CSS はセレクター、宣言、値、コメント、at-rule、関数、custom property、ブロックで構成されます。インデントで境界が見えます。
フォーマッタは空白と token を整えますが、標準、specificity、アクセシビリティ、性能、build 互換性を検証しません。
値には文字列、URL、escape、gradient、変数、vendor 拡張が含まれるため、元を保って対象環境で試します。
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 1
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 2
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 3
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 4
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 5
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 6
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 7
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 8
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 9
CSS source の selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result を確認します。formatted output と source を比較し deployment 前に parser validator test を実行します。 10
How to format CSS
- 完全な stylesheet または対応 fragment を入力します。
- セレクター、括弧、宣言、コメント、custom property、関数、at-rule を確認します。
- プロパティ、値、引用符、URL、変数、規則順を元と比較します。
- linter、build、アクセシビリティ、ブラウザの検査を実行します。
- 私的な URL、token、ユーザーデータを削除します。
Formatting method
- セレクター、宣言、値、コメント、ブロック、関数、at-rule を読み取ります。
セレクター、宣言、値、コメント、ブロック、関数、at-rule を読み取ります。
- 改行とインデントでルールと入れ子ブロックを見やすくします。
改行とインデントでルールと入れ子ブロックを見やすくします。
- 元の値、文字列、URL、custom property、コメント、順序を保持します。
元の値、文字列、URL、custom property、コメント、順序を保持します。
parser の復旧、dialect、vendor 拡張、コメント、空白、エラーは実際の engine で確認してください。
Read the formatted result
成功結果は入力 CSS の読みやすい配置です。セレクター、宣言、値、コメント、ブロック、関数、順序を元と照合します。
失敗しても parser の対応や recovery は確定しません。
ブラウザ、linter、build の問題は別契約です。整形は最適化ではありません。
よくある間違い
インデントを検証と考えると無効な値、specificity の問題、アクセシビリティ問題を見落とします。
custom property、文字列、URL、escape、順序を変えると動作が変わります。
vendor 拡張が全 toolchain で同じだと仮定しないでください。
私的 URL、token、ユーザー用 style は情報を漏らす可能性があります。
制限と特殊なケース
この機能は CSS の表示整形です。標準、lint、アクセシビリティ、安全性、性能、互換性、minify を保証しません。
custom property、at-rule、拡張、関数、escape、コメント、大きな stylesheet は対象ツールで試験します。
ポリシーが許可しない機密 style は入力しません。
Examples
整形は CSS を検証しますか？
整形は CSS を検証しますか？
完全な stylesheet または対応 fragment を入力します。
成功結果は入力 CSS の読みやすい配置です。セレクター、宣言、値、コメント、ブロック、関数、順序を元と照合します。
cascade は変わりますか？
cascade は変わりますか？
セレクター、括弧、宣言、コメント、custom property、関数、at-rule を確認します。
失敗しても parser の対応や recovery は確定しません。
値は保持されますか？
値は保持されますか？
プロパティ、値、引用符、URL、変数、規則順を元と比較します。
ブラウザ、linter、build の問題は別契約です。整形は最適化ではありません。
コメントは保持されますか？
コメントは保持されますか？
linter、build、アクセシビリティ、ブラウザの検査を実行します。
成功結果は入力 CSS の読みやすい配置です。セレクター、宣言、値、コメント、ブロック、関数、順序を元と照合します。
media query を整形できますか？
media query を整形できますか？
私的な URL、token、ユーザーデータを削除します。
失敗しても parser の対応や recovery は確定しません。
性能は向上しますか？
性能は向上しますか？
完全な stylesheet または対応 fragment を入力します。
ブラウザ、linter、build の問題は別契約です。整形は最適化ではありません。
Frequently asked questions
整形は CSS を検証しますか？
いいえ。parser、linter、build、アクセシビリティ、ブラウザ検査を使います。
cascade は変わりますか？
通常は表示空白だけですが、順序を比較しテストします。
値は保持されますか？
例は値、文字列、URL、関数を保持します。必要なら diff を確認します。
コメントは保持されますか？
例はコメントを保持します。実入力で確認してください。
media query を整形できますか？
例は入れ子 at-rule を示します。対応を確認します。
性能は向上しますか？
いいえ。profiling と対象を絞った最適化を行います。
不正 CSS を修復しますか？
自動修復を想定せず、元を修正して検証します。
整形後は何をしますか？
diff を確認し、linter、build、アクセシビリティ、ブラウザ検査を実行します。