CSS入力

プレフィックス付きCSS

CSSプレフィックスの例

ベンダープレフィックスでクロスブラウザ対応を確保します。例：

Flexboxとtransform

入力（プレフィックスなし）：

入力

プレフィックス付き出力：

出力

上のサンプルでさらにサンプルデータを読み込めます。

CSSプレフィクサーとは？

ブラウザは標準化前にベンダープレフィックスでCSS機能を実装することがあります：-webkit-（Chrome、Safari）、-moz-（Firefox）、-ms-（レガシーIE/Edge）。CSSプレフィクサーはこれらのプレフィックスを自動追加し、スタイルをブラウザ間で動作させます。W3C CSS仕様が言語を定義しています。Can I Useでブラウザサポートを確認できます。

このツールはCSSをパースして必要なベンダープレフィックスを追加します。完全にブラウザ内で動作します。サーバーには何も送信されません。モダンブラウザは以前よりプレフィックスが少なくなりましたが、一部のプロパティ（例：user-select、古いSafariのdisplay: flex）はまだ恩恵があります。フォーマットにはCSSフォーマッターを、ミニファイにはCSSミニファイアーを使用してください。

このツールの使い方

CSSを貼り付けまたはアップロード

CSSをコピーして左のエディターに貼り付けます。アップロードをクリックして.cssファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。無効なCSSはエラーを表示します。

プレフィックス付き出力を確認

右のパネルにベンダープレフィックスが追加されたCSSが表示されます。display: flex、user-select、transformなどのプロパティは古いブラウザに適したプレフィックスを取得します。

コピーまたはダウンロード

コピーまたはダウンロードを使用してください。SCSSやLessの場合は、まずSCSSをCSSにまたはLessをCSSにでコンパイルしてからプレフィックスを追加してください。検証にはCSSバリデーターを使用してください。

CSSプレフィックスが役立つ場面

古いブラウザ（Safari、古いChrome、レガシーIE）のサポートや、完全に標準化されていない新しいCSS機能の使用時に、プレフィックスで互換性を確保します。AutoprefixerやPostCSSなどのビルドツールは本番でよく処理しますが、このツールは単発ファイル、クイックチェック、ビルドステップがない場合に便利です。

メールCSS、埋め込みスタイル、CDNホストのCSSは手動プレフィックスが必要なことがあります。スタイルシートをここで通すとブラウザ対応の出力が得られます。インラインスタイルへの変換（例：メール）は、プレフィックス追加後にCSSをインラインにを使用してください。

よくある質問

2024年でもまだプレフィックスは必要ですか？

多くのプロパティはプレフィックスなしでサポートされています。古いSafari、iOS、レガシーブラウザでは、一部のプロパティ（例：-webkit-backdrop-filter）はまだプレフィックスが必要です。対象ブラウザはCan I Useで確認してください。

データはプライベートですか？

はい。プレフィックス追加は完全にブラウザ内で行われます。データはサーバーに送信されません。

Autoprefixerの代わりにこれを使う理由は？

Autoprefixerはビルドパイプラインで動作します。このツールはブラウザで動作—Node.jsやビルドステップは不要です。クイックチェック、単発ファイル、ビルドを実行できない場合に使用してください。

すべてのプロパティに対応していますか？

ツールは一般的なプロパティにプレフィックスを追加します。完全なカバレッジにはビルドでAutoprefixerを使用してください。多くの場合、このツールで十分です。

@keyframesは？

キーフレーム名は一部のコンテキストでプレフィックスが必要な場合があります。ツールは一般的なケースに対応しています。複雑なアニメーションは対象ブラウザで確認してください。

CSSプレフィクサー