CSS에서 물건을 숨기는 다양한 방법을 비교합니다

CSS로 컨텐츠를 숨기는 것은 간단하고 해결 된 문제라고 생각하지만 여러 솔루션이 있으며 각 솔루션은 독특합니다.

개발자는 가장 일반적으로 디스플레이를 사용합니다. 불행히도, 콘텐츠를 숨기는 이러한 방법은 방탄이 아닙니다. 이제 컨텐츠가 이제 독자가 스크린 리더가 "접근 할 수 없다". 그것을 사용하려는 유혹이지만, 특히 무언가가 시각적으로 숨겨져있는 경우에만 도달하지 마십시오.

사실 CSS에는 물건을“숨기는”방법이 여러 가지가 있으며, 각각의 장단점이 있으며, 이는 그것이 어떻게 사용되는지에 크게 의존합니다. 우리는 여기에서 각 기술을 검토하고 어떤 사용을 사용하고시기를 결정하는 데 도움이되는 요약으로 물건을 상한 할 것입니다.

기술 사이의 차이점을 발견하는 방법

콘텐츠를 숨기는 다양한 방법의 차이를 보려면 일부 메트릭을 소개해야합니다. 방법을 비교하는 데 사용할 수있는 메트릭. 나는 레이아웃, 성능 및 접근성에 영향을 미치는 4 가지 특정 영역에 중점을 둔 질문을함으로써이를 분류하기로 결정했습니다.

1. 접근성 : 숨겨진 콘텐츠가 화면 리더가 읽습니까?
2. 문서 흐름 : 숨겨진 요소가 문서 레이아웃에 영향을 미칩니 까?
3. 렌더링 : 숨겨진 요소의 박스 모델이 렌더링됩니까?
4. 이벤트 트리거 : 요소가 클릭 또는 초점을 감지합니까?

이제 우리는 기준을 벗어 났으므로 방법을 비교해 봅시다. 다시 말하지만, 우리는 CSS에 사물을 숨길 때 결정을 내릴 수있는 참조로 사용할 수있는 방식으로 모든 것을 끝까지 정리할 것입니다.

방법 1 : 디스플레이 속성

우리는 디스플레이를 사용하여 콘텐츠를 숨기는 것에 대한주의 로이 게시물을 시작했습니다. 그리고 우리가 설정 한대로, 요소를 숨기기 위해 그것을 사용한다는 것은 요소가 전혀 생성되지 않음을 의미합니다. 그것은 DOM에 있지만 실제로는 결코 렌더링되지 않았습니다.

요소는 여전히 마크 업에 표시되며 페이지를 검사하면 요소를 볼 수 있습니다. 박스 모델은 페이지에 생성되거나 나타나지 않으며 모든 어린이 에게도 적용됩니다.

또한 요소에 클릭 또는 호버를 말하면 이벤트 청취자가 있다면 전혀 등록하지 않습니다. 그리고 이미 논의한 것처럼 모든 내용은 스크린 리더가 무시됩니다. 여기에는 두 개의 가시 버튼이 있고 하나는 디스플레이가 숨겨져 있습니다. 없음. 세 버튼 모두 클릭 이벤트가 있지만 두 개의 가시 버튼 만 클릭을 렌더링하고 등록합니다.

디스플레이는 이미지 요청 발사에 영향을 미치는 유일한 속성입니다. 이미지 태그 (또는 부모 요소)에 인라인 CSS 또는 선택기를 통해 디스플레이 속성이 없음으로 설정된 경우 이미지가 다운로드됩니다 . 반면, 이미지에 배경 속성이 적용되면 다운로드되지 않습니다 .

HTML 문서가 구문 분석 될 때 구문 분석기가 CSS를 적용하지 않았고 태그가 발생하기 때문에 이런 경우입니다. 반면에, 배경 속성이있는 요소에 이미지를 적용하면 파서가 이미지가 호출되는 CSS를 적용하지 않았기 때문에 이미지가 다운로드되지 않습니다. 이 동작은 모든 최신 브라우저에서 일치합니다. 예외는 IE 11이며, 두 경우 모두 이미지를 다운로드합니다.

방법 2 : 가시성 속성

요소의 가시성 속성이 숨겨지면 요소가 "시각적으로 숨겨져 있습니다". "시각적으로 숨겨진"것은 디스플레이와 비슷하게 들립니다. 이것은 요소의 상자 모델이 존재한다는 것을 의미하므로 화면이없는 것처럼 보이지만 화면의 공간을 계속 차지하는 치수를 제공합니다.

다른 사람들에게 보이지 않는 보이지 않는 망토를 입고 있다고 상상해보십시오. 당신은 인간의 눈에 보이지 않더라도 육체적으로 거기에 있습니다.

그러나 그것이“시각적으로 숨겨진”것과“표시되지 않은”끝의 차이점이 끝납니다. 실제로 가시성과 디스플레이가 숨겨진 요소는 접근성 및 이벤트 트리거 측면에서 동일하게 작동합니다. 보이지 않는 요소는 스크린 리더가 접근 할 수 없으며 마지막 예제와 정확히 동일한 데모에서 볼 수 있듯이 이벤트를 등록하지는 않지만 단순히 디스플레이를 스왑합니다.

방법 3 : 불투명 속성

불투명 속성은 요소의 시각적 측면에만 영향을 미칩니다. 요소의 불투명도를 0으로 설정하면 요소가 완전히 투명합니다. 다시 말하지만, 그것은 가시성과 매우 흡사합니다. 숨겨져있는 곳에서 숨겨져있는 곳은 보이지 않지만 여전히 물리적으로 존재하는 요소에 보이지 않는 망토를 드리립니다.

다시 말해, 우리가 가진 것은 다른 요소와 같이 작용하는 중공적이고 투명한 요소입니다. 가시성 방법과 비슷하게 들립니다. 차이점은 완전히 투명한 요소가 여전히 화면 리더에게 액세스 할 수 있으며 다음 예에서 볼 수 있듯이 클릭과 같은 이벤트를 등록 할 수 있다는 것입니다.

방법 4 : 위치 특성

절대 포지셔닝으로 화면에서 요소를 밀어내는 것은 개발자가 종종 물건을 숨기는 또 다른 방법입니다. 상단과 왼쪽을 사용하여, 우리는 지금까지 볼 수있는 방법이 없기 때문에 요소를 화면에서 멀리 밀어 넣을 수 있습니다. 그것은 집 밖에서 쿠키 항아리를 숨기는 것과 같으므로 아이들 (또는 아마도 당신)을 찾을 수 없습니다.

"절대"가 여기서 핵심 단어입니다. 우리가 위치를 절대로 설정하면, 요소는 문서 흐름에서 벗어나 더 이상 DOM에서 자연스러운 위치를 준수하지 않는다고 말하는 방법입니다. 다시 말해, 페이지는 공간을 예약하지 않으므로 요소를 시각적으로 시각적으로 중단하여 다른 것이없는 경우 가장 가까운 위치에있는 요소에 요소를 정리하지 않습니다.

우리는 문서 흐름에서 "숨겨진"요소를 가져 와서 -9999px 값으로 왼쪽 상단으로 오프셋하여 절대 포지셔닝을 이용합니다.

 .hidden {
  위치 : 절대;
  상단 : -9999px;
  왼쪽 : -9999px;
}

숨겨진 요소에 집중 콘텐츠가 포함 된 경우 페이지가 초점이 맞춰 요소로 스크롤하여 갑자기 점프를 만듭니다.

방법 5 : "시각적으로 숨겨진"클래스

지금까지 위치 방법은 CSS에서 물건을 숨길 수있는 접근성 친화적 인 방법에 가장 가까운 방법입니다. 그러나 갑작스런 페이지 점프를 일으키는 집중 콘텐츠의 문제는 좋지 않습니다. 접근 가능한 숨기기에 대한 또 다른 접근 방식은 절대 포지셔닝, 클립 속성 및 숨겨진 오버플로를 결합합니다. Scott O'Hara는 2017 년에 다시 블로그를 작성했습니다.

 .visially-hidden : not (: focus) : not (: active) {
  클립 : rect (0 0 0 0); 
  클립 경로 : 삽입 (50%);
  높이 : 1px;
  오버플로 : 숨겨진;
  위치 : 절대;
  흰색 공간 : Nowrap; 
  너비 : 1px;
}

그것을 분해합시다.

문서 흐름에서 요소를 제거해야합니다. 이를 수행하는 가장 좋은 방법은 위치를 사용하는 것입니다 : 절대. 이렇게하면 요소가 제거되지만 화면에서 푸시하지 않습니다.

 .Visually-hidden {
  위치 : 절대;
}

너비와 높이 속성을 0으로 설정하여 요소를 숨길 수 있습니다. 불행히도 일부 스크린 리더는 폭과 높이가 0 인 요소를 무시하기 때문에 작동하지 않습니다. 우리가 할 수있는 일은 두 번째로 낮은 값인 1px로 설정하는 것입니다. 즉, 콘텐츠가 공간을 쉽게 넘어 뜨릴 수 있으므로 오버플로가 필요합니다. 숨겨져있어 시각적으로 유출되지 않도록합니다.

 .Visually-hidden {
  높이 : 1px;
  오버플로 : 숨겨진;
  위치 : 절대;
  너비 : 1px;
}

1 픽셀 사각형을 숨기려면 CSS 클리핑 속성을 사용할 수 있습니다. 스크린 리더에게 영향을 미치지 않기 때문에이 상황에 적합합니다. 내용은 있지만 다시 시각적으로 숨겨져 있습니다. 주목할만한 점은 클립이 클립 경로에 찬성하여 더 이상 사용되지 않았지만 이전 버전의 Internet Explorer를 지원 해야하는 경우에도 여전히 필요합니다.

 .Visually-hidden {
  클립 : rect (0 0 0 0);
  클립 경로 : 삽입 (50%);
  높이 : 1px;
  오버플로 : 숨겨진;
  위치 : 절대;
  너비 : 1px;
}

"시각적으로 숨겨진"클래스 퍼즐의 또 다른 부분은 스크린 오프 스크린 액세스 가능한 텍스트를 다루는 것입니다. 단어 사이의 흰색 스케aping을 제거하는 이상한 점입니다. 예를 들어,“Welcome Back Home”은“Welcomebackhome”으로 읽습니다.

이 문제에 대한 간단한 해결책은 흰색 공간을 설정하는 것입니다 : nowrap :

 .Visually-hidden {
  클립 : rect (0 0 0 0);
  클립 경로 : 삽입 (50%);
  높이 : 1px;
  오버플로 : 숨겨진;
  위치 : 절대;
  흰색 공간 : Nowrap;
  너비 : 1px;
}

그리고 마침내! 마지막으로 고려해야 할 것은 네이티브 초점과 활성 사이트가있는 특정 요소가 초점이 맞춰 질 때 표시되는 동시에 단락과 같은 다른 요소가 표시되는 것을 방지하는 것입니다. 우리는 다음을 위해 다음을 위해 사용할 수 있습니다.

 .visially-hidden : not (: focus) : not (: active) {
  클립 : rect (0 0 0 0);
  클립 경로 : 삽입 (50%);
  높이 : 1px;
  오버플로 : 숨겨진;
  위치 : 절대;
  흰색 공간 : Nowrap;
  너비 : 1px;
}

명예로운 언급

우리가 다룬 5 개보다 더 많은 방법이 있습니다. 예를 들어, 텍스트 인센트 속성은 위치 방법과 같이 화면에서 텍스트를 푸시 할 수 있습니다.

 .hidden {
  텍스트 안정 : -9999EM;
}

불행히도,이 접근법은 RTL 쓰기 모드와 함께 jive되지 않습니다. 따라서 우리가 다루었던 다른 솔루션보다 적응력이 떨어집니다.

다른 방법은 변환을 사용하여 요소를 스케일 또는 옮기는 것입니다. 불투명도처럼 시각적으로 만 동일하게 작동합니다.

 .hidden {
  변환 : 스케일 (0);
}

모든 것을합시다!

우리는 콘텐츠를 시각적으로 숨기지 만 여전히 액세스 할 수있는 솔루션을 얻었습니다. 그런 다음 디스플레이 사용을 중단해야합니까 : 없음? 아니요, 이것은 여전히 ​​요소를 완전히 (시각적으로 그리고 접근성으로) 숨기는 가장 좋은 방법입니다.

즉, 반대의 결과를 얻으려면 (화면 리더에서 무언가를 숨기고 싶다면 Aria-Hidden = "True"속성은 화면 리더로부터 내용을 숨길 수 있지만 시각적으로는 그렇지 않다고 언급 할 가치가 있습니다.

이를 통해 모든 접근 방식을 비교하는 완전한 테이블이 있습니다. 다음에 해당 상황에서 자신을 찾을 때 콘텐츠를 숨기는 방법에 대한 결정을 안내하십시오.

위 내용은 CSS에서 물건을 숨기는 다양한 방법을 비교합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!