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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
text-decoration-skip-ink
実験的
Chrome 完全対応 64Edge 未対応 なしFirefox 完全対応 70
無効
完全対応 70
無効
無効 From version 70: this feature is behind the layout.css.text-decoration-skip-ink.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

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

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