入力CSS

プレフィックス済みCSS

CSSプレフィクサーとは？

ブラウザベンダーは -webkit-、-moz-、-ms-、-o- などのプレフィックスを使って実験的なCSS機能を実装します。これらのプレフィックスがなければ、最新のCSSは古いブラウザで動作しません。このCSSプレフィクサーは必要なベンダープレフィックスを自動的にすべて追加し、CSS（カスケーディングスタイルシート）があらゆるブラウザとバージョンで動作するようにします。

MDN Web Docs によると、ベンダープレフィックスはクロスブラウザ互換性において重要です。当ツールは Can I Use データベースを参照してどのプロパティにプレフィックスが必要かを判断し、Chrome、Firefox、Safari、Edge、および古いブラウザでスタイルが確実に動作するようにします。

すべての処理はブラウザ上でローカルに実行されます。アップロード不要、サーバー不要 — CSSを貼り付けるだけで、プレフィックス付きの出力を即座に取得できます。

CSSプレフィクサーの使い方

CSSにベンダープレフィックスを追加するには以下の手順に従ってください。各手順ではこのページ上の実際のボタンとパネルを使います。

貼り付け、アップロード、またはサンプルを読み込む

左側の 入力CSS パネルにCSSを貼り付けるか、アップロード をクリックして .css ファイルを読み込みます。サンプル をクリックすると、プレフィックスが必要なプロパティを含む例が表示されます。例：

.subscriber-card {
  display: flex;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

プレフィックス済み出力を確認する

右側の プレフィックス済みCSS パネルに、必要な箇所に -webkit-、-moz-、-ms-、-o- プレフィックスが付いた出力が表示されます。flex、transform、transition などのプロパティにはクロスブラウザ対応のためすべてのプレフィックスバージョンが追加されます。

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

コピー をクリックしてクリップボードにコピーするか、ダウンロード をクリックして .css として保存します。クリア で最初からやり直せます。すべての処理はブラウザ内で実行されます。

このツールが役立つ場面

クロスブラウザ互換性

古いブラウザでも動作するサイトを構築する場合、ベンダープレフィックスを追加することでFlexboxやGridなどの最新CSS機能がどこでも動作します。レガシーブラウザをサポートするエンタープライズプロジェクトに不可欠です。

素早いプロトタイピング

複数のブラウザでCSSアニメーションやトランスフォームをテストする際は、まずコードにプレフィックスを付けてブラウザ固有の問題を回避しましょう。デザインを素早く繰り返す際の時間節約になります。

レガシープロジェクト

IE11や古いChrome版をサポートする古いプロジェクトを保守している場合、新しいCSS機能にプレフィックスを追加してからデプロイします。既存のブラウザサポートを壊さずに済みます。

CSSの学習

どのCSSプロパティにベンダープレフィックスが必要かを理解したい場合、このツールでどの機能にプレフィックスが必要かを確認できます。ブラウザ互換性を学ぶ開発者にとって教育的なツールです。

よくある質問

ベンダープレフィックスとは何ですか？

ベンダープレフィックスとは -webkit-、-moz-、-ms-、-o- のようなブラウザ固有のCSSプロパティプレフィックスです。ブラウザが実験的または非標準のCSS機能を、公式標準になる前に実装する際に使用します。

最新のブラウザでもプレフィックスが必要ですか？

最先端の機能には必要な場合があります。最新のブラウザはほとんどの標準CSSをサポートしていますが、一部の新しいプロパティや古いブラウザバージョンではまだプレフィックスが必要です。特定のプロパティのサポート状況は Can I Use で確認してください。

どのプロパティにプレフィックスが必要ですか？

一般的なものには transform、transition、animation、flex プロパティ、border-radius（古いブラウザ）、box-shadow などが含まれます。当ツールは MDN標準に基づいてこれらを自動検出します。

プレフィックス付きプロパティの順序はどうなりますか？

プレフィックス付きプロパティは標準プロパティの前に記述する必要があります。当ツールはこの慣例に従い、ベンダープレフィックス（-webkit-、-moz-、-ms-、-o-）を先に記述し、最後に標準のプレフィックスなしプロパティを記述します。

CSSファイルのサイズが大きくなりますか？

はい、ベンダープレフィックスを追加するとファイルサイズが増加します。ただし、その代償としてブラウザ互換性が得られます。本番環境では圧縮（minification）と併用し、ビルドプロセスでは Autoprefixer の使用を検討してください。

CSSデータは安全ですか？

完全に安全です。すべての処理はJavaScriptを使ってブラウザ内で行われます。CSSがコンピューターの外に出ることはなく、サーバーへのアップロードもデータの保存も一切ありません。完全にプライベートです。

CSSプレフィクサー