Czy krycie: 0 ma dokładnie taki sam efekt jak widoczność: ukryta

Jeśli tak, czy faktycznie powoduje to utratę visibilitywłaściwości?

(Zdaję sobie sprawę, że Internet Explorer nie obsługuje jeszcze tej właściwości CSS2.)
Porównanie silników układu

Zobacz także: Jaka jest różnica między widocznością: ukryta a wyświetlaniem: brak

Oto zestawienie zweryfikowanych informacji z różnych odpowiedzi.

Każda z tych właściwości CSS jest unikalna. Oprócz renderowania elementu niewidocznego mają następujące dodatkowe efekty:

1. Zwija przestrzeń, którą normalnie zajmowałby element
2. Reaguje na zdarzenia (np. Kliknięcie, naciśnięcie klawisza)
3. Uczestniczy w taborze

                     zwiń zakładka zdarzeń
krycie: 0 Nie Tak Tak
widoczność: ukryta Nie Nie Nie
widoczność: zwiń Tak * Nie Nie
wyświetlacz: brak Tak Nie Nie

* Tak wewnątrz elementu tabeli, w przeciwnym razie nie.

Nie.

Elementy z nieprzezroczystością tworzą nowy kontekst układania.

Ponadto specyfikacja CSS tego nie definiuje, ale elementy z opacity:0są klikalne, a elementy z visibility:hiddennie.

Nie. Jest duża różnica. Są podobne, ponieważ możesz przejrzeć element, jeśli widoczność jest ukryta lub krycie wynosi 0

krycie: 0 : nie możesz klikać elementów za nim.

widoczność: ukryta : możesz klikać elementy za nim.

Istnieje wiele różnic między visibilityi opacity. Większość odpowiedzi wspomina o pewnych różnicach, ale oto pełna lista.

1. krycie nie dziedziczy, podczas gdy widoczność tak

2. krycie jest animowane, a widoczność nie.
   (Cóż, z technicznego punktu widzenia tak jest, ale po prostu nie ma zdefiniowanego zachowania dla, powiedzmy, „37% zwiniętego i 63% ukrytego”, więc można to uznać za brak możliwości animacji).

3. Używając krycia, nie możesz uczynić elementu potomnego bardziej nieprzezroczystym niż jego rodzic. Np. Jeśli masz ap z kolorem: czarnym i kryciem: 0,5, nie możesz uczynić żadnego z jego elementów potomnych w pełni czarnymi. Prawidłowe wartości krycia mieszczą się w zakresie od 0 do 1, a ten przykład wymagałby 2!
   W konsekwencji, zgodnie z komentarzem Martina , możesz mieć widoczne dziecko (z widocznością: widoczne) w niewidzialnym rodzicu (z widocznością: ukryte). Jest to niemożliwe w przypadku krycia; jeśli rodzic ma krycie: 0; jego dzieci są zawsze niewidoczne.

4. Odpowiedź Kornela wspomina, że ​​wartości krycia mniejsze niż 1 tworzą własny kontekst stosowy; nie ma znaczenia dla widoczności.
   (Żałuję, że nie potrafię wymyślić sposobu, aby to zademonstrować, ale nie mogę wymyślić żadnego sposobu, aby pokazać łączący się kontekst widoczności: ukryty element).

5. Zgodnie z odpowiedzią Philnasha elementy z kryciem: 0 są nadal odczytywane przez czytniki ekranu, podczas gdy są widoczne: elementy ukryte nie.

6. Zgodnie z odpowiedzią Chrisa Noe , widoczność ma więcej opcji (takich jak zwijanie), a elementy, które nie są widoczne, nie reagują już na kliknięcia i nie można ich zakładać.

(Uczynienie tego wiki społeczności, ponieważ zapożyczanie z istniejących odpowiedzi nie byłoby sprawiedliwe w innym przypadku).

Nie jestem tego do końca pewien, ale myślę, że czytniki ekranu nie czytają rzeczy, które są ustawione na ukrytą widoczność, ale mogą czytać rzeczy niezależnie od ich krycia.

To jedyna różnica, jaką przychodzi mi do głowy.

Nie jestem do końca pewien, ale tak robię przezroczystość między przeglądarkami:

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

obiekty z widocznością: ukryte nadal mają kształt, po prostu nie są widoczne. Elementy nieprzezroczystości zero można nadal klikać i reagować na inne zdarzenia.

Tworząc styl użytkownika, który wpływa na elementy w a contenteditable, zauważyłem, że jeśli ustawisz coś na visibility: hidden, to karetka wejścia tak naprawdę nie chce z tym współdziałać. Np. Jeśli masz

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

... wtedy wydaje się, że jeśli skupisz się na tym div / span, nie możesz w rzeczywistości go wpisać. Podczas opacity: 0gdy wydaje się, że możesz. Nie testowałem tego szczegółowo, ale doszedłem do wniosku, że warto o tym tutaj wspomnieć, ponieważ nikt inny na tej stronie nie mówił o wpływie na wprowadzanie tekstu. Wydaje się to jednak prawdopodobnie związane z wydarzeniami wymienionymi powyżej.

To, co mówi Phil, jest prawdą.

IE obsługuje jednak krycie:

filter:alpha(opacity=0);

Właściwości mają różne znaczenia semantyczne . Chociaż semantyczny CSS brzmi, jakby był głupi, jak wspominali inni użytkownicy, ma on wpływ na urządzenia takie jak czytniki ekranu - gdzie semantyka wpływa na dostępność strony.