text-decoration-skip-ink

CSStext-decoration-skip-ink プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

構文

/* 単一キーワード */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;

/* グローバルキーワード */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

none
下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。
auto
既定値です。 — 下線と上線は文字に接したり近づいたりしない部分にのみ引かれます。つまり、文字を横切ろうとするところで中断されます。
"text-decoration-skip: ink;" の例

形式文法

auto | none

HTML コンテンツ

<p>You should go and grab a cup of coffee.</p>

CSS コンテンツ

p {
  margin: 0;
  font-size: 2em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto;
}

結果

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 4
text-decoration-skip-ink の定義
草案 初回定義

初期値auto
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 64Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 50Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,