Jaka jest różnica między widocznością: ukrytą a wyświetlaniem: brak?

1173

Reguły CSS visibility:hiddeni display:noneoba powodują, że element nie jest widoczny. Czy to są synonimy?

Chris Noe
źródło

Odpowiedzi:

1475

display:noneoznacza, że ​​dany tag w ogóle nie pojawi się na stronie (chociaż nadal możesz z nim wchodzić w interakcje za pośrednictwem domeny). Między pozostałymi tagami nie będzie przydzielone miejsce.

visibility:hiddenoznacza, że ​​w przeciwieństwie display:nonedo tagu nie widać, ale na stronie jest dla niego przydzielone miejsce. Tag jest renderowany, po prostu nie jest widoczny na stronie.

Na przykład:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Wymiana [style-tag-value]z display:nonewynikami w:

test |   | test

Wymiana [style-tag-value]z visibility:hiddenwynikami w:

test |                        | test
kemiller2002
źródło
14
Brak komentarza na temat wydajności jednego i drugiego? Jestem ciekawy, jaką metodę zastosować, aby ukryć elementy absolutnie pozycjonowane, które są często wyświetlane i ukryte.
Tomáš Zato - Przywróć Monikę
2
To całkowite przypuszczenie, że nie przeprowadziłem żadnych testów, ale sądzę, że są mniej więcej takie same. Gdy tylko coś się zmieni na ekranie, cały ekran zostanie zrenderowany (przynajmniej kiedyś), więc nie ma to większego znaczenia. Nadal zmuszasz do odmalowania ekranu. Może to jednak bardzo przeglądarki według przeglądarki, a tak naprawdę są prawdopodobnie lepsze sposoby optymalizacji kodu niż skupienie się na nich.
kemiller2002
13
@ Kevin ma w tym rację visibility: hiddeni display: nonebędzie równie wydajny, ponieważ oba układy ponownego uruchamiania , farby i kompozyty. Jest to jednak opacity: 0funkcjonalnie równoważne visibility: hiddeni nie powoduje ponownego uruchomienia kroku układu, więc radzę użyć tego, jeśli nie przeszkadza ci przydzielenie pustej przestrzeni (w przeciwnym razie użyj display: none).
jayrobin
76
Ważne jest, aby pamiętać o przejściach css, gdy mówimy o widoczności a wyświetlaniu. Na przykład przełączanie z widoczności: ukryty; do widoczności: widoczny; pozwala na użycie przejść css, podczas gdy przełączanie z wyświetlania: brak; do wyświetlenia: blok; nie. widoczność: ukryty ma tę dodatkową zaletę, że nie przechwytuje zdarzeń javascript, natomiast krycie: 0; rejestruje wydarzenia.
Michael Deal
9
opacity: 0należy zachować ostrożność podczas obchodzenia się z danymi wejściowymi lub przyciskami, ponieważ nadal istniałyby i prawdopodobnie powodowałyby dziwne interakcje użytkownika.
jacques mouette
233

Nie są synonimami.

display:none usuwa element z normalnego przepływu strony, umożliwiając wypełnienie innych elementów.

visibility:hidden pozostawia element w normalnym przepływie strony tak, że nadal zajmuje miejsce.

Wyobraź sobie, że czeka cię kolejka do wesołego miasteczka, a ktoś w kolejce robi się tak hałaśliwy, że ochrona wyrywa go z linii. Wszyscy w kolejce przesuną się następnie o jedną pozycję do przodu, aby wypełnić puste miejsce. To jest jak display:none.

Porównaj to z podobną sytuacją, ale ktoś przed tobą zakłada pelerynę niewidzialności. Podczas przeglądania linii będzie wyglądać, jakby była pusta przestrzeń, ale ludzie tak naprawdę nie mogą wypełnić tej pustej przestrzeni, ponieważ ktoś nadal tam jest. To jest jak visibility:hidden.

użytkownik22151
źródło
3
Jest jeszcze jedna duża różnica między nimi: przynajmniej w Chrome widoczność może być używana z opóźnieniem przejścia, ale wyświetlacz go ignoruje.
SapphireSun
1
Zabawny sposób na wyjaśnienie, ale interesujący. :)
Elango Paul Victor
107

Jedną z rzeczy, które warto dodać, choć nie zadawano tego pytania, jest to, że istnieje trzecia opcja uczynienia obiektu całkowicie przezroczystym. Rozważać:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(Aby zobaczyć wynik, kliknij przycisk „Uruchom fragment kodu” powyżej).

Różnica między 1 a 2 została już wskazana (a mianowicie, 2 nadal zajmuje miejsce). Istnieje jednak różnica między 2 a 3: w przypadku 3 mysz nadal przełącza się na dłoń po najechaniu kursorem na link, a użytkownik nadal może kliknąć link, a zdarzenia JavaScript nadal będą się uruchamiać na łączu. Zwykle nie jest to pożądane zachowanie (ale może czasem tak jest?).

Inna różnica polega na tym, że jeśli zaznaczysz tekst, a następnie skopiujesz / wkleisz jako zwykły tekst, otrzymasz:

1st link.
2nd  link.
3rd unseen link.

W przypadku 3 tekst zostanie skopiowany. Może byłoby to przydatne w przypadku pewnego rodzaju znaku wodnego lub chciałbyś ukryć informację o prawach autorskich, która pojawiłaby się, gdyby niedbale użytkownik skopiował / wkleił Twoje treści?

Wyrko
źródło
@greenoldman Czy możesz podać przykład? Oto jsfiddle, w którym ukryty element (próbowałem div i span), który jest jedynym elementem w kontenerze, i wciąż zajmuje miejsce: jsfiddle.net/rmb5wdLd/1
Kip
@Kip, dziwne - nie mogę tego teraz zrobić (zmieniłem też własny projekt). OK, lepiej usunę mój poprzedni komentarz, a kiedy będę miał solidną skrzynkę testową, pokażę go, przepraszam za hałas.
greenoldman
89

display:none usuwa element z przepływu układu.

visibility:hidden ukrywa to, ale opuszcza przestrzeń.

mmaibaum
źródło
70

Istnieje duża różnica, jeśli chodzi o węzły potomne. Na przykład: jeśli masz div rodzica i zagnieżdżoną div dziecka. Więc jeśli napiszesz w ten sposób:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

W takim przypadku żaden div nie będzie widoczny. Ale jeśli napiszesz w ten sposób:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Wtedy div div będzie widoczny, a div div nie zostanie pokazany.

Govinda
źródło
Dobrze, że można tego łatwo przeoczyć. display: none / block nie wyzwoli przejść, więc użycie visibility: hidden może działać, ale elementy potomne również potrzebują vilibility: ukryty w tym samym czasie
Drenai
18

Nie są synonimami - display: noneusuwa element z przepływu strony, a reszta strony płynie tak, jakby jej nie było.

visibility: hidden ukrywa element z widoku, ale nie przepływ strony, pozostawiając miejsce na stronie.

ConroyP
źródło
15

display: none usuwa element ze strony całkowicie, a strona jest budowana tak, jakby elementu w ogóle nie było.

Visibility: hidden pozostawia miejsce w obiegu dokumentów, nawet jeśli go nie widać.

To może, ale nie musi, mieć dużej różnicy w zależności od tego, co robisz.

wcm
źródło
Użycie $ („# element”). Remove () całkowicie usuwa element ze strony (DOM). Brak wyświetlania lub brak miejsca nie oznacza usunięcia go. Nadal możesz zmienić jego status za pomocą prostego $ ('# element'). Show (), więc nie jest on „całkowicie usunięty”.
foxontherock
11

Gdy visibility:hiddenobiekt nadal zajmuje pionową wysokość na stronie. Dzięki display:nonetemu jest całkowicie usuwany. Jeśli masz tekst pod obrazem i tak się dzieje display:none, tekst zostanie przesunięty w górę, aby wypełnić miejsce, w którym znajdował się obraz. Jeśli zrobisz widoczność: ukryty tekst pozostanie w tej samej lokalizacji.

Steven Williams
źródło
W przypadku ukrytego zachowana przestrzeń ma jedynie wymiar pionowy. A co z horyzontalnym?
Chris Noe,
2
Zachowany jest również wymiar poziomy.
JB Hurteaux
9

display:noneukryje element i zwinie zajmowaną przestrzeń, podczas gdy visibility:hiddenukryje element i zachowa przestrzeń elementów. display: żaden nie wpływa również na niektóre właściwości dostępne z javascript w starszych wersjach IE i Safari.

slashnick
źródło
7

Oprócz wszystkich innych odpowiedzi, istnieje istotna różnica dla IE8: Jeśli używasz display:nonei próbujesz uzyskać szerokość lub wysokość elementu, IE8 zwraca 0 (podczas gdy inne przeglądarki zwracają rzeczywiste rozmiary). IE8 zwraca poprawną szerokość lub wysokość tylko dla visibility:hidden.

szeryf
źródło
7

visibility:hiddenzachowuje przestrzeń; display:nonenie.

Perła
źródło
6
display: none; 

Nie będzie dostępny na stronie i nie zajmuje miejsca.

visibility: hidden; 

ukrywa element, ale nadal będzie zajmować taką samą przestrzeń jak poprzednio. Element zostanie ukryty, ale nadal wpływa na układ.

visibility: hiddenzachowaj przestrzeń, display: noneale nie zachowaj przestrzeni.

Wyświetl brak Przykład: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Ukryty przykład widoczności: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Anu
źródło
Odradzałbym linkowanie do w3schools ze względu na znane nieścisłości na stronie.
Skere
5

Jeśli ustawiono właściwość widoczności "hidden", przeglądarka nadal będzie zajmować miejsce na stronie, nawet jeśli jest niewidoczna.
Ale kiedy ustawimy obiekt na "display:none", przeglądarka nie przydziela miejsca na stronie na jego zawartość.

Przykład:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Pokaż szczegóły

Shubelal Kumar
źródło
4

visibility:hidden zatrzyma element na stronie i zajmie to miejsce, ale nie wyświetli się użytkownikowi.

display:none nie będzie dostępny na stronie i nie zajmuje miejsca.

Ramesh
źródło
2

Różnica wykracza poza styl i jest odzwierciedlona w tym, jak zachowują się elementy podczas manipulowania za pomocą JavaScript.

Skutki i skutki uboczne display: none:

  • element docelowy jest usuwany z obiegu dokumentów (nie wpływa na układ innych elementów);
  • dotyczy to wszystkich potomków (nie są też wyświetlane i nie mogą „wyrwać się” z tego dziedzictwa);
  • Pomiary nie może być wykonane w odniesieniu do elementu docelowego ani też jej potomstwo - nie są świadczone w ogóle, a tym samym ich clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), cały zysk 0S.

Skutki i skutki uboczne visibility: hidden:

  • element docelowy jest ukryty, ale nie jest usuwany z przepływu i wpływa na układ, zajmując jego normalną przestrzeń;
  • innerText(ale nie innerHTML) elementu docelowego i potomków zwraca pusty ciąg.
Adam Jagosz
źródło
1

display:none;nie wyświetli elementu ani nie przydzieli miejsca na element na stronie, natomiast visibility:hidden;nie wyświetli elementu na stronie, ale przydzieli miejsce na stronie. W obu przypadkach możemy uzyskać dostęp do elementu w DOM. Aby lepiej to zrozumieć, spójrz na następujący kod: display: none vs. visibility: hidden

Pritam Bohra
źródło
0

Jest tu wiele szczegółowych odpowiedzi, ale pomyślałem, że powinienem dodać to, aby rozwiązać problem dostępności, ponieważ są to implikacje.

display: none;i visibility: hidden;może nie być odczytane przez wszystkie programy do odczytu ekranu. Pamiętaj, czego doświadczą użytkownicy niedowidzący.

Pytanie dotyczy także synonimów. text-indent: -9999px;to jeden, który jest z grubsza równoważny. Ważną różnicą text-indentjest to, że często będą czytane przez czytniki ekranu. Może to być trochę nieprzyjemne, ponieważ użytkownicy mogą nadal przechodzić między zakładkami a linkiem.

Dla ułatwienia dostępu widzę dziś kombinację stylów służących do ukrywania elementu, a jednocześnie widoczną dla czytników ekranu.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Świetną praktyką jest utworzenie linku „Przejdź do treści” do kotwicy głównej treści. Użytkownicy niedowidzący prawdopodobnie nie chcą słuchać pełnego drzewa nawigacji na każdej stronie. Uczyń link wizualnie ukrytym. Użytkownicy mogą po prostu nacisnąć klawisz Tab, aby uzyskać dostęp do linku.

Aby uzyskać więcej informacji na temat dostępności i ukrytej zawartości, zobacz:

tasak
źródło