ホバーに太字...レイアウトシフトなし

フォントの重み、特に大胆に変化すると、レイアウトのシフトがトリガーされることがよくあります。これは、大胆なテキストが通常、より多くの水平スペースを占めるためです。一部のレイアウト（垂直に積み重ねられたリンクなど）では取るに足らないものですが、要素がシフトする可能性のある水平列など、他のレイアウトでは問題がある場合があります。

ライアン・マリガンはこの問題を強調し、エレガントなソリューションを提供します。

大胆なテキストからホバリングすると、特にラッピング要素を使用すると、顕著なレイアウトシフトが発生します。巧妙な回避策：テキストを反映した隠された擬似要素。

アクションを参照してください： https：//www.php.cn/link/e44956a0a9118d2bfe39f3483f57db37 pic.twitter.com/kdzbtlq0rd

- Ryan Mulligan（@hexagoncircle）2020年7月20日

マリガンのアプローチは独創的です。各リスト項目には、Boldのようにプリスタイルの同一のテキスト文字列を含む隠された擬似要素が含まれています。この目に見えない要素は、必要な幅を留保し、実際のリンクテキストがホバーで太字になったときにレイアウトシフトを防ぎます。

この手法の有効性は、レイアウト方法にもかかっています。 CSSグリッドを使用して固定数の列を強制します。特に、列の幅を超えないテキストでは、シフトの問題がなくなります。ただし、自動列ラッピングを許可すると、問題が再導入される可能性があります。

以上がホバーに太字...レイアウトシフトなしの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。