【CSS】ベンダープレフィックス - ブラウザの接頭辞

CSSのベンダープレフィックスをご紹介します。

CSSの動作環境

一部のCSSの定義や処理は動作環境によって異なる場合があります。

動作環境とはOSやブラウザ、またそれらのバージョンなどです。

例えば、次のテキストを装飾するtext-decorationプロパティはSafariでは表示されません。（2024/01/22 時点）

<style>
p {
    text-decoration: underline red;
}
</style>
 
<p>text text text text text</p>

主にブラウザが非対応であったり、検証段階で正式に採用されていないため、このような違いが発生します。

接頭辞

接頭辞はプロパティの前に付ける文字列です。
一般的に検証段階のプロパティは接頭辞を付けて適用させることができます。

-接頭辞-プロパティ名

接頭辞は種類があり、ブラウザによって異なります。

動作が異なる環境で同じような仕様感にするには、接頭辞で各環境ごとのコードを作成します。

先ほどのtext-decorationプロパティをSafariでも動作させるには、次のように-webkit-接頭辞を使います。

<style>
p {
    text-decoration: underline red;
    -webkit-text-decoration: underline red;
}
</style>
 
<p>text text text text text</p>

複数環境対応

現代では数多くの動作環境があり、アップデートがされ変わり続けています。
各環境の違いを全て記憶するのは困難に近いかと思われます。

そのため、AppやWEBサイトを複数環境向けにリリースする場合、開発時のプロパティ利用可否確認や動作テストを行うようにしましょう。