テキスト装置の速記のプロパティを回避するとき

ChromeのCSS下線の問題に関する私の最近の記事は、 text-decoration-thicknessとtext-underline-offset 、強力で広くサポートされているCSS特性を強調しています。

text-decoration-thickness説明しましょう。 Ubuntuのデフォルトの下線は非常に厚いです。私たちはそれを洗練することができます：

 ：any-link {
  テキスト - 厚さの厚さ：0.08em;
}

注：私は使用しています:any-link<a></a>実際のハイパーリンクのみ（ href属性を持つもの）のみをターゲットにします。ブラウザのユーザーエージェントStyleSheetsは:any-linkも好みます。

Hover Underlines：微妙な落とし穴

多くのサイト（Google SearchやWikipediaなど）は、Hover Underlinesを使用しています。一般に、テキスト内のリンクには感謝しませんが、このアプローチは間隔を空けたリンク（ナビゲーション、フッター）に適しています。ヘッダーの例は次のとおりです。

ヘッダー：any-link {
  テキスト装置：なし;
}

ヘッダー：any-link：Hover {
  テキスト装置：下線;
}

ただし、Hoverの下線はデフォルトの厚さに戻り、以前のtext-decoration-thickness設定を無視します。なぜ？

この問題はtext-decorationが略記の財産であり、 text-decoration-thicknessその長いカウンターパートに起因しています。 text-decorationをnoneに設定するか、 underline他のテキスト装飾コンポーネント（厚さ、スタイル、色）をリセットします。 CSSテキスト装飾モジュールは、これを指定します。

ブラウザdevtoolsこれを確認します。ハイパーリンクを検査し、 text-decorationプロパティを展開してコンポーネントの値を確認します。

ホバーにカスタムの厚さを保持するには、調整が必要です。いくつかのソリューションが存在します：

• :hover状態のtext-decoration-thickness再廃止します。
• 厚さをtext-decoration速記に直接組み込みます。
• テキストtext-decorationの代わりにtext-decoration-lineを利用します。

最適なtext-decoration戦略

:hover Stateが機能しているが、それはtext-decoration-thicknessです：それは冗長です。

 / *オプションa */
ヘッダー：any-link {
  テキスト装置：なし;
}

ヘッダー：any-link：Hover {
  テキスト装置：下線;
  テキスト - 厚さの厚さ：0.08em;
}

理想的には、 text-decorationのShorthand機能を活用してください。

 / *オプションB */
ヘッダー：any-link {
  テキスト装置：なし;
}

ヘッダー：any-link：Hover {
  テキスト廃止：0.08emの下線;
}

注：この速記のアプローチは比較的新しいものです。古いCSSバージョンにはこの機能がありませんでした。 SafariのWebKitエンジンは、プレフィックス-webkit-text-decorationを使用しており、厚さのサポートがありません（WebKit Bug 230083を参照）。これにより、オプションB SAFARI-INTABTABLEをレンダリングします。

最良のアプローチでは、速記と一緒に導入されたtext-decoration-lineを使用します。

 / *オプションC */
ヘッダー：any-link {
  テキスト - デコレーションライン：なし;
}

ヘッダー：any-link：Hover {
  テキストデコレーションライン：下線;
}

これにより、 lineコンポーネントのみが変更され、以前に設定された厚さを保持します。これは、最も堅牢でクロスブラウザー互換性のあるソリューションです。

短期財産の考慮事項

覚えておいてください：ショートサンドプロパティ（ text-decoration 、 background ）は、デフォルトに省略された値をリセットします。これはbackground-repeat: no-repeatのようなスタイルが、その後のbackground: url(flower.jpg)宣言によって無効にされる理由を説明しています。詳細については、「偶発的なCSSリセット」を参照してください。

以上がテキスト装置の速記のプロパティを回避するときの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。