'숨겨진'속성은 눈에 띄게 약합니다

hidden 속성 : 의미 론적 신기루? 이 기사는 요소를 숨기는 HTML의 hidden 속성의 효과를 탐구하여 놀라운 약점을 드러내고 더 나은 대안을 제안합니다.

hidden 속성은 겉보기에는 간단하지만 의도 된 목적에 미치지 못합니다. 이 예를 고려하십시오 :

<div> 나는 눈에 띄었다</div>
<div hidden="">나는 숨겨져있다</div>

직관적 인 이름과 광범위한 브라우저 지원에도 불구하고 그 효과는 의문의 여지가 있습니다.

Adam Laki는 의미 론적 명확성을 높이 평가하지만 Monica Dinculescu는 중요한 결함을 지적합니다. hidden 다른 CSS 규칙에 의해 쉽게 무시되는 사용자 에이전트 스타일입니다. 간단한 div { display: block; } 아마도 "숨겨진"요소를 볼 수 있습니다.

 div {디스플레이 : 블록; }
<div hidden="">
  LOL 누가 더 이상 숨겨져 있지 않은지 추측하십시오
  힌트 : 이건 이거야
</div>

이것은 두 가지 주요 문제를 강조합니다.

1. 취약성 : hidden 속성은 거의 모든 CSS display none 에 의해 쉽게 상인되므로 신뢰성이 의심 스럽습니다. 속성이 요소를 숨기려는 의도가 있기 때문에 이것은 특히 실망 스럽습니다.

2. 과부하 된 display 속성 : display 속성의 이중 역할 (가시성 및 요소 유형 제어)은 비효율적입니다. 가시성을위한 전용 CSS 속성이 바람직하지만 뒤로 호환성이이를 방지합니다.

신뢰할 수있는 은신처를 보장하면서 hidden 이점을 활용하기 위해 Monica는이 CSS 규칙을 제안합니다.

 [숨겨진] {디스플레이 : 없음! 중요; }

이것은 CSS 재설정 또는 기본 스타일 시트에 포함될 수 있습니다.

또는 CSS 클래스를 사용하면보다 강력하고 유연한 접근 방식이 제공됩니다. 일반적인 유틸리티 클래스는 다음과 같습니다.

 .hide, .hidden {
  디스플레이 : 없음;
}

그러나 맥락이 중요합니다. 시각적 효과로 동적 가시성 변화를 위해서는 더 맞춤형 접근 방식이 종종 필요합니다.

 .menu {
   불투명도 : 0;
   가시성 : 숨겨진;
   전환 : 0.2S;
   변환 : translatex (20px);
   & [data-open] {
     불투명도 : 1;
     가시성 : 가시성;
     변환 : translatex (0);
   }
}

결론적으로, hidden 속성은 의미 론적 호소를 제공하지만, 내재 된 약점은 신중한 고려가 필요합니다. 신뢰할 수있는 요소 숨기기의 경우, CSS 클래스 또는 대상 CSS 규칙을 우선적으로 사용 hidden 것은보다 신뢰할 수있는 솔루션을 제공합니다. 최상의 접근법은 특정 컨텍스트 및 원하는 수준의 제어에 따라 다릅니다.

위 내용은 '숨겨진'속성은 눈에 띄게 약합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!