레이아웃 시프트없이 호버에 대담합니다

글꼴 무게, 특히 굵게 변화하면 종종 레이아웃 변화를 유발합니다. 대담한 텍스트가 일반적으로 더 많은 수평 공간을 차지하기 때문입니다. 일부 레이아웃 (예 : 수직 스택 링크)에서는 중요하지 않지만 요소가 이동할 수있는 수평 행과 같은 다른 레이아웃에서는 문제가 될 수 있습니다.

Ryan Mulligan 은이 문제를 강조하고 우아한 해결책을 제공합니다.

대담한 텍스트로 호버링하면 특히 래핑 요소가있는 눈에 띄는 레이아웃 시프트가 발생합니다. 영리한 해결 방법 : 필요한 공간을 예약하기 위해 미리 팽팽한 텍스트를 미러링하는 숨겨진 의사 요소.

https://www.php.cn/link/e44956a9118d2bfe39f3483f57db37 pic.twitter.com/kdzbtlq0rd를 참조하십시오

- Ryan Mulligan (@exagoncircle) 2020 년 7 월 20 일

멀리건의 접근 방식은 독창적입니다. 각 목록 항목에는 굵게 프리 스타일의 텍스트 문자열이 포함 된 숨겨진 의사 요소가 포함되어 있습니다. 이 보이지 않는 요소는 필요한 폭을 보유하여 실제 링크 텍스트가 호버에 굵게 표시 될 때 레이아웃이 이동하는 것을 방지합니다.

이 기술의 효과는 또한 레이아웃 방법에 달려 있습니다. CSS 그리드, 특히 열 너비를 초과하지 않는 텍스트가있는 고정 된 열 수의 열을 강제하면 이동 문제가 제거됩니다. 그러나 자동 열 포장을 허용하면 문제가 다시 발생할 수 있습니다.

위 내용은 레이아웃 시프트없이 호버에 대담합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!