お問い合わせ

ベンダープレフィックスが必要なCSS プロパティ 2025

UI開発者 佐竹

Webプラットフォームの相互運用性が向上し、ベンダープレフィックスを必要とするCSSプロパティが少なくなりつつあります。

しかし、すべてのCSSプロパティでプレフィックスが不要とまでには至っておらず、Interop 2025でもプレフィックスが必要なCSSプロパティとしてtext-decorationが挙げられていました。

そこで、2025年時点でプレフィックスが必要なCSSプロパティには何があるのか、いくつか挙げてみたいと思います。

ベンダープレフィックスの種類

まず、その前にベンダープレフィックスの種類を確認しておきたいと思います。
ベンダープレフィックスには、次のようなものがあります。

-webkit-: Chrome、Safari、新しいバージョンのOpera、iOS用のFirefoxやChromeを含むほぼすべてのiOSブラウザ、任意のWebKitまたはChromiumベースのブラウザ
-moz-: Firefox

2025年の主要ブラウザの最新バージョンであれば-webkit-、-moz-の2つで足りますが、古いバージョンのブラウザもサポートの対象とする場合は、次のものも必要になります。

-o-: 古いバージョンのOpera
-ms-: Chromiumより前のMicrosoft Edge

CSSは、後から書いたプロパティで値が上書きされていくので、対応しているブラウザが多いプレフィックスから-webkit-、次に-moz-、そして最後にプレフィックスなしのプロパティという順番で書いていきます。

プレフィックスと対応するブラウザの組み合わせがわかったところで、次からはどのプロパティにどのプレフィックスが必要なのかを見ていきます。

text-decoration

概要

text-decorationは、テキスト上の装飾的な線の外観を設定するCSSプロパティです。
text-decoration-line text-decoration-color text-decoration-styleおよびさらに新しい text-decoration-thickness プロパティをまとめて指定できるショートハンドプロパティです。

必要なプレフィックス

Safariでは、この中のtext-decoration-colorとtext-decoration-styleをサポートするためにベンダープレフィックスをつけて-webkit-text-decorationとする必要があります。

注意点

Blog作成時点では、Safariでtext-decoration-thicknessが実装されていません。
そのため、Safariでは-webkit-のプレフィックスをつけても線のサイズを変更することはできません。

実装例

.text-decoration_example {
    -webkit-text-decoration: underline red wavy;
    text-decoration: underline red wavy;
}

line-clamp

概要

line-clampは、ブロックのコンテンツを指定した行数に制限するCSSプロパティです。

必要なプレフィックス

Chrome、Edge、Firefoxではベンダープレフィックスをつけて-webkit-line-clampとする必要があります。

注意点

Chrome、Edge、Firefoxでline-clampを機能させるには、次の2つのプロパティも合わせて設定する必要があります。

  • display: -webkit-boxもしくはdisplay: -webkit-inline-box
  • -webkit-box-orient: vertical

省略記号の後のテキストを非表示にする場合は、over-flow: hiddenも設定します。

実装例

.line-clamp_example {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    over-flow: hidden;
}

box-decoration-break

概要

box-decoration-breakは、要素の断片が複数の行や段落になる場合に描画する方法を指定するCSSプロパティです。

box-decoration-breakは、次のプロパティの外観に影響を与えます。

必要なプレフィックス

Safariでは、ベンダープレフィックスをつけて-webkit-box-decoration-breakとする必要があります。

注意点

Safariでは、インライン要素でのみ機能します。

実装例

.box-decoration-break_example {
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
}

まとめ

近年の主要ブラウザベンダーの実装速度には目を見張るものがあり、ベンダープレフィックスが必要なプロパティは残りわずかとなっています。 Interop 2025の取り組みでtext-decorationが選ばれたことで、他のプレフィックスが必要なプロパティも注目されることを期待しています。

2025年の記事一覧に戻る