opacity : 0은 visibility : hidden과 정확히 같은 효과를 갖습니까?

그렇다면 효과적으로 visibility 속성을 합니까?

(Internet Explorer가 아직이 CSS2 속성을 지원하지 않는다는 것을 알고 있습니다.)
레이아웃 엔진 비교

참고 항목 : visible : hidden 및 display : none의 차이점은 무엇입니까?

다음은 다양한 답변에서 확인 된 정보 모음입니다.

이러한 CSS 속성은 각각 고유합니다. 표시되지 않는 요소를 렌더링하는 것 외에도 다음과 같은 추가 효과가 있습니다.

1. 축소요소가 일반적으로 차지하는 공간을 합니다.
2. 이벤트에 응답 (예 : 클릭, 키 누르기)
3. 에 참여 taborder에

                     이벤트 탭 순서 축소
불투명도 : 0 아니오 예 예
가시성 : 숨김 아니오 아니오 아니오
가시성 : 축소 예 * 아니요 아니요
디스플레이 : 없음 예 아니요 아니요

* 테이블 요소 내부에 예, 그렇지 않으면 아니요.

아니.

불투명도가있는 요소는 새로운 스택 컨텍스트를 만듭니다.

또한 CSS 사양은이를 정의하지 않지만 포함 된 요소 opacity:0는 클릭 가능하고 포함 된 요소 visibility:hidden는 그렇지 않습니다.

아니 그렇지 않아. 큰 차이가 있습니다. 가시성이 숨겨져 있거나 불투명도가 0이면 요소를 통해 볼 수 있기 때문에 비슷하지만

opacity : 0 : 뒤에있는 요소를 클릭 할 수 없습니다 .

가시성 : 숨김 : 뒤에있는 요소를 클릭 할 수 있습니다 .

visibility와 사이에는 많은 차이점이 있습니다 opacity. 대부분의 답변에는 몇 가지 차이점이 언급되어 있지만 여기에 전체 목록이 있습니다.

1. 불투명도는 상속되지 않지만 가시성은 상속됩니다.

2. 불투명도는 애니메이션 가능하지만 가시성은 그렇지 않습니다.
   ( 기술적 으로는 그렇습니다. "37 % 축소 및 63 % 숨김"에 대해 정의 된 동작이 없으므로 애니메이션 불가능한 것으로 간주 할 수 있습니다.)

3. 불투명도를 사용하면 자식 요소를 부모보다 더 불투명하게 만들 수 없습니다. 예를 들어 color : black 및 opacity : 0.5의 ap가 있으면 자식을 완전히 검은 색으로 만들 수 없습니다. 불투명도의 유효한 값은 0과 1 사이이며이 예제에는 2가 필요합니다!
   결과적으로 Martin의 의견 에 따르면 보이지 않는 부모 (visibility : hidden 포함)에 보이는 자식 (visible : visible 포함)을 가질 수 있습니다. 불투명도에서는 불가능합니다. 부모의 불투명도 : 0; 그 아이들은 항상 보이지 않습니다.

4. Kornel의 답변 은 1보다 작은 불투명도 값이 자체 스택 컨텍스트를 생성한다고 언급합니다. 가시성에 대한 가치는 없습니다.
   (나는 이것을 시연하는 방법을 생각할 수 있었으면 좋겠지 만, visible : hidden 요소의 스택 컨텍스트를 보여줄 방법은 생각할 수 없습니다.)

5. philnash의 답변 에 따르면 opacity : 0 인 요소는 여전히 스크린 리더에서 읽지 만 visible : hidden 요소는 읽지 않습니다.

6. Chris Noe의 답변 에 따르면 가시성에는 더 많은 옵션 (예 : 접기)이 있으며 표시되지 않는 요소는 더 이상 클릭에 응답하지 않고 탭할 수 없습니다.

(기존 답변에서 차용하는 것은 그렇지 않으면 공정하지 않기 때문에 이것을 커뮤니티 위키로 만듭니다.)

나는 이것에 대해 완전히 확신하지 못하지만 스크린 리더는 숨겨진 가시성으로 설정된 것을 읽지 않지만 불투명도에 관계없이 읽을 수 있다고 생각합니다.

그것이 제가 생각할 수있는 유일한 차이점입니다.

완전히 확실하지는 않지만 이것이 브라우저 간 투명성을 수행하는 방법입니다.

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

Visibility : hidden이있는 개체는 여전히 모양이 있으며 표시되지 않습니다. 불투명도 0 요소는 계속 클릭 할 수 있으며 다른 이벤트에 반응 할 수 있습니다.

의 요소에 영향을 미치는 사용자 스타일을 만드는 동안으로 contenteditable설정 visibility: hidden하면 입력 캐럿이 실제로 상호 작용하고 싶지 않다는 것을 알았 습니다. 예 :

<div contenteditable><span style='visibility: hidden;'></span></div>

... 그 div / span에 초점을 맞추면 실제로 입력 할 수없는 것 같습니다. 반면에 opacity: 0당신은 할 수 있습니다. 나는 이것을 광범위하게 테스트하지는 않았지만이 페이지의 다른 누구도 텍스트 입력에 대한 영향에 대해 이야기하지 않았기 때문에 여기서 언급 할 가치가 있다고 생각했습니다. 이것은 위에서 언급 한 이벤트 와 관련된 것으로 보입니다 .

Phil이 말하는 것은 사실입니다.

IE는 불투명도를 지원합니다.

filter:alpha(opacity=0);

속성은 의미 론적 의미 가 다릅니다 . 시맨틱 CSS는 어리석은 것처럼 들리지만 다른 사용자가 언급했듯이 시맨틱이 페이지의 접근성에 영향을 미치는 화면 판독기와 같은 장치에 영향을 미칩니다.