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.

Enter Your CSS

CSS Properties

Enter one CSS property per line or separate with semicolons

Browser Support

WebKit

(Safari, Chrome)

Mozilla

(Firefox)

Microsoft

(IE, Edge)

Opera

Generated CSS with Vendor Prefixes

  display: flex;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 1s ease-in-out;
  -moz-animation: fade 1s ease-in-out;
  -ms-animation: fade 1s ease-in-out;
  -o-animation: fade 1s ease-in-out;
  animation: fade 1s ease-in-out;

Tips

• 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 のベンダープレフィックスは何のためにありますか?

-webkit-、-moz-、-ms-、-o- などのベンダープレフィックスは、標準化される前にブラウザエンジンが実装したプロパティを使えるようにします。これを追加することで、古いバージョンのブラウザでのクロスブラウザ互換性が向上します。

このツールはどのプレフィックスを追加できますか?

一般的な4つのプレフィックス、-webkit-(Chrome、Safari、Edge)、-moz-(Firefox)、-ms-(旧 Internet Explorer と Edge)、-o-(旧 Opera)を生成でき、どれを含めるか選べます。

貼り付けたすべてのプロパティにプレフィックスを付けますか?

歴史的にプレフィックスを必要としたプロパティにはプレフィックス付きのバリエーションを追加し、標準で完全にサポートされたプロパティはそのまま残します。そのため出力は不要な行で膨らまず、すっきりした状態を保ちます。

今でもベンダープレフィックスは必要ですか?

多くの現代的なプロパティではもう不要ですが、レガシーブラウザや特定の機能をサポートする際にはなお有用です。このツールを使えば、プロジェクトのブラウザ対象に応じて必要なときに簡単に追加できます。

私の CSS はどこかに送信されますか?

いいえ。プレフィックスの付与はすべてブラウザ内で行われるため、CSS がサーバーにアップロードされることはありません。ツールは登録不要で無料です。

CSS Vendor Prefix Generator

CSSベンダープレフィックスジェネレーター の使い方

よくある質問

関連ツール

CSSベンダープレフィックスジェネレーターの使い方