PostCSS

JavaScript で CSS を変換するためのツール

コードの可読性を向上します

Can I Use. の値を使用して CSS ルールにベンダープレフィックスを追加できます。 Autoprefixer は、現在のブラウザの普及率とプロパティのサポートに基づいてデータを使い、自動的にプレフィックスを適用します。

:fullscreen {
}
CSS 入力
:-webkit-full-screen {
}
:-ms-fullscreen {
}
:fullscreen {
}
CSS 出力

最新の CSS を今すぐ使いましょう!

PostCSS Preset Env を使えば、最新 CSS をほとんどのブラウザが理解できるように変換し、cssdb を使用してターゲットのブラウザやランタイム環境に基づいて必要なポリフィルを特定できます。

body {
  color: oklch(61% 0.2 29);
}
CSS 入力
body {
  color: rgb(225, 65, 52);
}
CSS 出力

グローバル CSS の終了

CSS Modules を使えば、名前が一般的すぎることを心配する必要がなくなります。最も意味をなすものを使用できます。

.name {
  color: gray;
}
CSS 入力
.Logo__name__SVK0g {
  color: gray;
}
CSS 出力

CSS のエラーを回避します

最新の CSS 構文や SCSS などの CSS ライクな構文をサポートする、最新 CSS linter である stylelint を使用して、スタイルシートに一貫した規約を適用し、エラーを回避できます。

a {
  color: #d3;
}
CSS 入力
app.css
2:10 Invalid hex color
コンソール出力

スポンサー

あなたの会社は PostCSS を使用していますか? このリストに参加してください!

業界リーダーによって信頼されています

コミュニティによってコミュニティのために構築されました

PostCSS は、何百人ものオープンソースの貢献者によって開発および管理されています。ファミリーの一員になりましょう — 最初の プルリクエストを送信してください!