text-decoration-skip-ink

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

text-decoration-skip-inktext-decoration 一括指定の一部ではありません。

構文

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

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

none
下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。
auto
既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う可能性があります。つまり、線が文字を横切ろうとするところで中断されます。
all
ブラウザーは、下線や上線が文字に触れたり近づいたりしないように必ず中断を行います。これは、 auto の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。
"text-decoration-skip-ink" の例

形式文法

auto | all | none

HTML

<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>

CSS

p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all{
  text-decoration-skip-ink: all;
}

結果

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 4
text-decoration-skip-ink の定義
草案 初回定義
初期値auto
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
text-decoration-skip-inkChrome 完全対応 64Edge 完全対応 79Firefox 完全対応 70IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0
allChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 75IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報