텍스트 결정 속성을 피할 때

Chrome의 CSS Underline 문제에 대한 최근 기사는 text-decoration-thickness 와 text-underline-offset , 강력하고 널리 지원되는 CSS 속성을 강조했습니다.

text-decoration-thickness 설명합시다. 우분투의 기본 밑줄은 상당히 두껍습니다. 우리는 그것을 개선 할 수 있습니다 :

 : 모든 링크 {
  텍스트 결정 두께 : 0.08EM;
}

참고 : 사용합니다 :any-link<a></a> 실제 하이퍼 링크 만 타겟팅합니다 ( href 속성이있는 사람). 브라우저의 사용자 에이전트 스타일 시트도 선호합니다 :any-link

호버가 밑줄 : 미묘한 함정

Google 검색 및 Wikipedia와 같은 많은 사이트는 호버를 고용합니다. 텍스트 내 링크에는 일반적으로 접지 할 수 없지만이 접근법은 간격을 둔 링크 (탐색, 바닥 글)에 적합합니다. 헤더 예는 다음과 같습니다.

 헤더 : 모든 링크 {
  텍스트 결정 : 없음;
}

헤더 : 모든 링크 : 호버 {
  텍스트 결정 : 밑줄;
}

그러나 호버 밑줄은 기본 두께로 되돌아갑니다. 초기 text-decoration-thickness 설정을 무시합니다. 왜?

이 문제는 text-decoration 속성 속성이며, text-decoration-thickness 외면과 비교할 때 비롯됩니다. text-decoration none underline 설정하면 다른 텍스트 장식 구성 요소 (두께, 스타일, 색상). CSS 텍스트 장식 모듈은 다음을 지정합니다. 생략 된 값은 초기 상태로 되돌립니다.

브라우저 DevTools는 다음과 같이 확인하십시오. 하이퍼 링크를 검사하고 text-decoration 속성을 확장하여 구성 요소 값을 확인하십시오.

호버에 맞춤 두께를 유지하려면 조정이 필요합니다. 몇 가지 솔루션이 있습니다.

• :hover 상태에서 text-decoration-thickness 다시 설명합니다.
• 두께를 text-decoration 속도에 직접 통합하십시오.
• text-decoration-line 대신 text-decoration 라인을 사용하십시오.

최적의 text-decoration 전략

:hover 스테이트 워크에서 text-decoration-thickness 반복하는 것만으로도 중복됩니다.

 / * 옵션 A */
헤더 : 모든 링크 {
  텍스트 결정 : 없음;
}

헤더 : 모든 링크 : 호버 {
  텍스트 결정 : 밑줄;
  텍스트 결정 두께 : 0.08EM;
}

이상적으로는 text-decoration 의 속기 기능을 활용합니다.

 / * 옵션 B */
헤더 : 모든 링크 {
  텍스트 결정 : 없음;
}

헤더 : 모든 링크 : 호버 {
  텍스트 결정 : 밑줄 0.08EM;
}

참고 :이 속기 접근법은 비교적 새롭습니다. 이전 CSS 버전에는이 기능이 부족했습니다. Safari의 WebKit 엔진은 여전히 ​​접두사 -webkit-text-decoration 사용하며 두께지지가 부족합니다 (WebKit Bug 230083 참조). 이것은 옵션 B Safari-Incsatible을 렌더링합니다.

최선의 접근 방식은 속기와 함께 소개 된 text-decoration-line 사용합니다.

 / * 옵션 C */
헤더 : 모든 링크 {
  텍스트-결정 라인 : 없음;
}

헤더 : 모든 링크 : 호버 {
  텍스트-장식 라인 : 밑줄;
}

이것은 이전에 설정된 두께를 보존하는 line 구성 요소 만 수정합니다. 이것은 가장 강력하고 크로스 브라우저 호환 솔루션입니다.

속성 고려 사항

기억하십시오 : 속성 속성 ( text-decoration , background 같은)은 기본값에 값을 생략했습니다. 이것은 background-repeat: no-repeat 와 같은 스타일이 후속 background: url(flower.jpg) 선언. 자세한 내용은 "우발적 인 CSS 재설정"을 참조하십시오.

위 내용은 텍스트 결정 속성을 피할 때의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!