Właściwości CSS: wyświetlanie a widoczność

Jaka jest różnica między właściwościami wyświetlania a widocznością?

visibilityNieruchomość tylko informuje przeglądarkę, czy pokazywać element lub nie. Jest albo widoczny ( visible- możesz to zobaczyć), albo niewidoczny ( hidden- nie możesz tego zobaczyć).

displayNieruchomość informuje przeglądarkę, jak rysować i pokazać element, jeśli w ogóle - czy powinny być wyświetlane jako inlineelementu (tj płynie z tekstu i innych elementów inline) lub block-level elementu (czyli ma właściwości wysokość i szerokość, które można ustawić, to floatable itp), albo inline-block(czyli działa jak pudełko bloku ale układa inline zamiast) i inni ( list-item, table, table-row, table-cell, flex, etc).

Kiedy ustawisz element na, display: blockale także ustawisz visibility: hidden, przeglądarka nadal traktuje go jako element blokowy, z wyjątkiem tego, że go po prostu nie widzisz. Trochę tak, jak układasz czerwone pudełko na niewidzialnym pudełku: czerwone pudełko wygląda tak, jakby unosiło się w powietrzu, podczas gdy w rzeczywistości znajduje się na fizycznym pudełku, którego nie widać.

Innymi słowy, oznacza to, że elementy z wartością displaynie nonebędą nadal wpływać na przepływ elementów na stronie, niezależnie od tego, czy są widoczne, czy nie. Ramki otaczające element za pomocą display: nonebędą się zachowywać tak, jakby tego elementu nigdy tam nie było (chociaż pozostanie w DOM).

widoczność: ukryta;

• element nie zostanie pomalowany ORAZ nie otrzyma zdarzeń kliknięcia / dotyku, ale zajmowana przez niego przestrzeń jest nadal zajęta
• ponieważ nadal jest tam do celów układu, możesz go zmierzyć bez widoczności
• zmiana treści nadal będzie kosztować czas ponownego przepływu / układu strony
• widoczność jest dziedziczona, więc oznacza to, że możesz sprawić, że poddzieci będą widoczne, nadając im widoczność: widoczne;

Nie wyświetla się;

• sprawi, że element nie będzie uczestniczył w przepływie / układzie
• może (w zależności od używanej przeglądarki) zabijać filmy Flash i ramki iframe (które zostaną ponownie uruchomione / załadowane po ponownym wyświetleniu), chociaż możesz temu zapobiec za pomocą ramek iframe
• element nie zajmie miejsca. dla celów układu jest tak, jakby nie istniał
• sprawi, że niektóre przeglądarki / urządzenia (takie jak iPad) będą bezpośrednio pobierać pamięć używaną przez ten element, powodując drobne problemy, jeśli przełączysz się między brakiem a inną wartością podczas animacji

dodatkowe uwagi:

• obrazy w ukrytej zawartości: we wszystkich popularnych przeglądarkach obrazy są nadal ładowane, mimo że znajdują się w jakimkolwiek elemencie z widocznością: ukryte; lub wyświetlacz: brak;
• czcionki w ukrytej zawartości: przeglądarki webkit (Chrome / Safari) mogą opóźniać ładowanie niestandardowych czcionek, które są używane tylko w ukrytych elementach, w tym przez widoczność lub wyświetlanie. Może to spowodować, że będziesz mierzyć elementy, które nadal używają czcionki zastępczej, dopóki czcionka niestandardowa nie zostanie załadowana.

display: none usuwa element z przepływu kodu HTML, podczas gdy visibility: hidden nie.

Nie wyświetla się; usunie styl wizualny / przestrzeń fizyczną elementów DOM z DOM, gdzie widoczność: ukryta; nie usunie elementu, ale po prostu go ukryje. Zatem element div zajmujący 300px pionowej przestrzeni w Twoim DOM NADAL będzie zajmował 300px pionowej szerokości po ustawieniu na visibility: hidden; ale gdy ustawione na wyświetlanie: brak; jego style wizualne i zajmowana przez nie przestrzeń są ukryte, a przestrzeń jest następnie „uwalniana” z braku lepszego słowa.

[EDYCJA] - To było jakiś czas temu, kiedy napisałem powyższe i czy nie miałem wystarczającej wiedzy, czy miałem zły dzień, nie wiem, ale w rzeczywistości element NIGDY nie jest usuwany z hierarchii DOM. Wszystkie „style” wyświetlania na poziomie bloków są całkowicie „ukryte” podczas korzystania z display: none, podczas gdy w przypadku visibility: hidden; sam element jest ukryty, ale nadal zajmuje wizualną przestrzeń w DOM. Mam nadzieję, że to wszystko wyjaśnia