CSS Vendor Prefix Generator
Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.
CSS Properties
Enter one CSS property per line or separate with semicolons
WebKit
(Safari, Chrome)
Mozilla
(Firefox)
Microsoft
(IE, Edge)
Opera
• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones
CSSベンダープレフィックスジェネレーター の使い方
- 1
CSS を貼り付ける
flex や transition の宣言など、CSS のルールをコード入力ボックスに貼り付けます。
- 2
プレフィックスを選ぶ
サポートしたいブラウザに応じて、-webkit-、-moz-、-ms-、-o- など、追加するベンダープレフィックスを選びます。
- 3
プレフィックス付き CSS を生成する
「Generate Prefixes」をクリックすると、対応するプレフィックス付きプロパティが追加されたコードが生成されます。
- 4
結果をコピーする
出力からプレフィックス付き CSS をコピーし、スタイルシートに貼り戻します。
CSS ベンダープレフィックスの解説
ベンダープレフィックスとは実際に何か
ベンダープレフィックスとは、ブラウザのメーカーが、機能が確定する前に出荷するために、プロパティ名や値名の前に付けた短い文字列です。出会うことになる4つは、Chrome・Safari・最新の Edge を支えるエンジンのための -webkit-、Firefox のための -moz-、古い Internet Explorer と初代 Edge のための -ms-、そして古い Presto ベースの Opera のための -o- です。そのため移行期には、transition-property と -webkit-transition-property の両方を書くこともありました。プレフィックス付きのほうは早くにそれを出荷したブラウザのため、素のほうは最終標準に従うブラウザのためです。
仕組みとしては、ブラウザは認識できないプロパティを無視します。これがプレフィックスを重ねても安全な理由です。プレフィックス付きの変種を先に、標準のプロパティを最後に並べれば、各エンジンは理解できる行だけを取り、残りを読み飛ばします。
そもそもなぜプレフィックスが存在したのか
プレフィックスは、難しい問題への現実的な答えでした。グラデーション、トランスフォーム、フレックスボックスといった新機能がまだ設計中だったとき、ブラウザのベンダーは、仕様が変わるかもしれない構文を固定してしまわずに、開発者が実験できるようにしたいと考えました。機能をプレフィックスの背後で出荷することは、これは実験的でまだ動くかもしれない、と伝える方法だったのです。もし最終標準が異なれば、プレフィックスなしのプロパティが修正後のふるまいを採用できる一方、プレフィックス付きのほうは古いふるまいを保てたので、既存のページが静かに壊れることはありませんでした。
実際には、この仕組みは裏目に出ました。サイトが -webkit- 機能にあまりに大きく依存するようになり、ほかのエンジンも結局、ウェブを正しく表示するために、一部の -webkit- プレフィックス付きプロパティを自分たちで実装せざるを得なくなりました。その結末こそが、この手法全体が実験的な作業のためのフィーチャーフラグに大きく取って代わられた理由そのものです。
プレフィックス付きと標準を一緒に書く方法
ルールは単純で、順序が重要です。必要なプレフィックス付きの版をすべて書き、それから標準のプレフィックスなしのプロパティを最後に書きます。すべてが理解される場合は後の宣言が勝つので、標準の行を一番下に置くということは、完全に最新のブラウザは最終的な正しいふるまいを使い、古いブラウザは理解できるプレフィックス付きの行にフォールバックする、ということを意味します。このツールはその慣例に従い、選択したプレフィックス付きの変種を、元の標準宣言とともに出力するので、カスケードはあなたの期待どおりに解決します。
同じ考え方は、プロパティ名だけでなく値にも当てはまることがあります。いくつかの機能は値の側でもプレフィックスが付けられていたからです。安全な習慣は同じで、古いプレフィックス付きの形を用意し、それから追いついたブラウザのために標準の形でそれを上書きさせます。
最近の CSS のほとんどはもうプレフィックスを必要としない
ここは身につけておく価値のある部分です。かつてプレフィックスを必要とした大多数のプロパティは、もう必要としません。トランジション、トランスフォーム、アニメーション、box-shadow、border-radius、グラデーション、そして最新のフレックスボックス構文は、いずれも現在のブラウザでプレフィックスなしで対応されています。今日これらに -webkit-、-moz-、-ms-、-o- を加えると、スタイルシートを膨らませ、将来の読み手を混乱させ、まれにはバグのある古いふるまいを有効にしてしまいかねない、死んだコードになります。プロジェクトが現在のブラウザだけを対象にするなら、プレフィックスはおそらくまったく必要ありません。
だからこそ、考え抜かれたワークフローは、反射的にすべてにプレフィックスを付けたりはしません。実際のブラウザ対象が要求するものだけにプレフィックスを付け、それによって出力を、誰も実行しない行で膨らませるのではなく、すっきりと正直に保ちます。
プレフィックスが今も本当に重要なところ
出荷中のブラウザで今もプレフィックス専用、あるいはプレフィックス優先のままの機能がひと握りあり、そこではプレフィックスは過去の遺物ではなく現在の要件です。とりわけ -webkit- プレフィックスは、テキストを決まった行数に切り詰める line-clamp の手法、特定のバックドロップや appearance のふるまい、モバイル Safari の一部のスクロールバーやタップハイライトの調整などで今も現れます。これらでは、プレフィックスを省くと機能が単に動かなくなるので、まさにプレフィックスに手を伸ばすのが正しい場面です。
特定の利用者のために、古くても今なお現役のブラウザバージョンに対応するなら、ごく最近になって標準化されたプロパティについても、プレフィックスは再び視野に入ってきます。決め手となる問いは、プロパティがどう感じられるかではなく、あなたのサポート対象表に実際に何が含まれているか、です。
Autoprefixer と最近のビルド手法
現在のベストプラクティスは、プレフィックスを手で書くのをやめ、実データからツールに付けさせることです。ビルド工程の一部として実行される Autoprefixer は、プロジェクトが宣言したブラウザサポートリストを読み、最新の互換性データを使って、それらのブラウザが要求するプレフィックスをちょうど過不足なく挿入します。あなたはきれいな標準 CSS を書き、正しいプレフィックスがビルド時に自動で生成され、サポートリストがもう必要としなくなった瞬間に再び取り除かれます。
この変換ツールは、そのワークフローの手動版にあたります。ビルドパイプラインを動かしていないとき、スニペットに特定のプレフィックスを手早く加えたいとき、あるいはプレフィックス付きと標準の形がどう関係するかを学んでいるときに最適です。大規模なコードベースなら、Autoprefixer を組み込んでおけば、もう二度とこれについて考えずに済みます。
プレフィックスを付ける前に対応状況を確認する
プレフィックスを加える前に、それが本当に必要かどうかを、caniuse のような最新の互換性リファレンスで確認しましょう。caniuse は、プロパティごとに、どのブラウザバージョンが標準の形に対応し、どれがまだプレフィックスを要求するかを示してくれます。その確認を、プロジェクトが対応するブラウザの明確なリストと組み合わせれば、プレフィックスの付与は当てずっぽうから、根拠を持って説明できる判断に変わります。古くなったプレフィックスの保守コストは実在するので、もう必要のないものを削除することは、必要なものを加えるのと同じくらい価値があります。
よくある質問
CSS のベンダープレフィックスは何のためにありますか?
このツールはどのプレフィックスを追加できますか?
貼り付けたすべてのプロパティにプレフィックスを付けますか?
今でもベンダープレフィックスは必要ですか?
私の CSS はどこかに送信されますか?
関連ツール
こちらの便利なツールもどうぞ