CSSフォーマッター

CSSのスタイルシートや断片を貼り付けると、一貫したインデントで整形したり、1行に圧縮したりできます。閉じていない波かっこや宙に浮いたルールなど不完全なCSSでもエラーにならず整形されるため、すべての構文エラーを直す前に荒れたCSSをきれいにできます。

整形と圧縮はどういう仕組みですか?

整形はjs-beautifyライブラリを使っており、インデントを2スペース・4スペース・タブのいずれかに指定できます。厳密な構文解析ではなくトークン単位で処理するため、閉じ忘れた波かっこや余分なセミコロンがあってもエラーにならず、それなりに読みやすいインデントで出力されます。ブラウザの開発者ツールからコピーしたCSSや書きかけのファイルを整えたいときに役立つ挙動です。圧縮はその逆で、コメントを取り除き、空白をまとめ、{ } ; : , >の前後の不要なスペースを削除します。一方でクォートされた文字列やurl(...)の中身には手を加えないため、スペースを含むパスやフォント名もそのまま保たれます。

圧縮処理は本格的なCSSパーサーではなく正規表現の組み合わせで動いているため、いくつか既知の弱点があります。クォート引数内に閉じ括弧)をそのまま含むurl()は正しく扱えず、またコロン前のスペースを詰めると、隣接する子孫結合子と疑似クラスがつながってしまうことがあります(a :hoverがa:hoverになり、セレクタの意味が変わってしまいます)。どちらも実際のCSSではまれなケースで、このツールは崩れた入力でも決してエラーにならないことを優先してこのトレードオフを選んでいます。

CSSはどこかにアップロードされますか?

されません。整形と圧縮はバンドルされたライブラリを使ってすべてブラウザ内で完結し、サーバーには何も送信されません。社外秘のスタイルシートやクライアント案件、実データを含むスクレイピング結果も、他人に見せたくない社内コードベース由来のCSSなら手元のマシンから外に出ずに済みます。

主な用途は、view-sourceで保存した圧縮済みスタイルシートを整えたり、公開前にCSSファイルを軽くしたり、コードレビュー用にコンポーネントのスタイルを一定のインデント幅にそろえたりすることです。セレクタ・宣言・アットルールの関係についてはMDNのCSS構文リファレンスを参照してください。