この記事の概要
-webkit-transitionなど、CSSのプロパティにプレフィックスがついているのを見たことがあると思います。
しかし、昨今のCSSにはほとんど必要ありません。上記のtransitionも本来は不要です。
本来はベンダープレフィックスが必要な時期＝標準化がなされていない時期なので導入を待つべきだったそうですが、世の開発者達はガンガン使用していました。
そのため、プレフィックスではなくブラウザの設定でオンオフを制御するような流れになっています。
ということで、少なくとも2022年4月現在はほとんど不要なベンダープレフィックスですが、使うとしたら……というものを挙げてみました。
「この記事で紹介したものがすべて」というわけではなく、筆者が日頃CSSを書いている中で有用だと思うかつベンダープレフィックスが必要なプロパティをピックアップしているのみです。
appearance
buttonをボタンっぽく、checkboxをチェックボックスっぽくなど、要素にあわせた見た目を割り当てられます。
実際はユーザーエージェントのスタイルシートに記述してあるので、開発者が細かな指定をすることはあまり無いと思われます。
よく使うのはnoneを指定し規定のスタイルをリセット→オリジナルのスタイルを指定、でしょうか。
Safariの15.3以前が効かないため-webkit-を指定する必要があります。
backdrop-filter
背景をぼかしたり色を変えたりできるプロパティ。
以下の記事でも説明されています。
Safariがベンダープレフィックス付きでしか対応していません。
また、Firefoxはデフォルトでは対応しておらずユーザーが自分でフラグをオンにしないといけません。
background-clip
要素の背景をどこまで拡張するか指定するプロパティ。
以下の記事でも説明されています。
background-clipに指定できるのはborder-box, padding-box, content-box, textがありますが、このうちベンダープレフィックスが必要なのはtextのみです。
-webkit-がないとChromeやEdgeで動きません。
hyphens
ハイフネーションを行うプロパティ。
筆者はタイポグラフィに関心があるため、Webでもハイフネーションを適用したいというモチベーションがあります。
日本語だけのサイトであれば問題になることは少ないですが……一応紹介します。
Safariが対応していないため-webkit-をつける必要があります。
line-clamp, box-orient
「複数行に渡る文章を、3行目以降は省略したい」といったシチュエーションで使うプロパティ。
以下の記事でも説明されています。
Internet Explorer以外のブラウザなら使えるのですが、正式採用されているわけでもないためブラウザの種別に関わらず-webkit-をつける必要があります。
（FirefoxでもEdgeでも-webkit-です。）
最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！