paint-order
paint-orderは、要素の描画レイヤーの順序を制御するCSSプロパティです。stroke、fill、markersの描画順を変更でき、デフォルトではfill→stroke→markersの順で描画されます。テキストにストロークを適用する際、ストロークがテキストを覆い隠す問題を解決するために特に有用で、paint-order: strokeとすることでストロークをフィルの下に描画できます。
概要
paint-orderは、要素の描画レイヤーの順序を制御するCSSプロパティです。stroke、fill、markersの描画順を変更でき、デフォルトではfill→stroke→markersの順で描画されます。テキストにストロークを適用する際、ストロークがテキストを覆い隠す問題を解決するために特に有用で、paint-order: strokeとすることでストロークをフィルの下に描画できます。
対応ブラウザ
デスクトップ
Chrome 123+
Edge 123+
Safari 12+
Firefox 66+
モバイル
Chrome Android 123+
Safari iOS 12+
Firefox Android 66+
基本構文
CSS
.outlined-text {
-webkit-text-stroke: 3px black;
paint-order: stroke fill;
color: white;
}実務での使いどころ
-
テキストアウトラインの最適化
ストロークをフィルの下に描画することで、太いアウトラインがテキストの可読性を損なわないようにします。
注意点
- マーカーの描画順序はSVGコンテンツでのみ効果があり、通常のHTML要素には影響しません。
アクセシビリティ
- 描画順序の変更はビジュアル表現のみに影響し、テキストの読み上げ順序には影響しません。