Jaka jest różnica między visibility: hidden a display: none?

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 taki, że nadal zajmuje miejsce.

Jedną rzeczą wartą dodania, choć nie pytano, jest to, że istnieje trzecia opcja uczynienia obiektu całkowicie przezroczystym. Consider:

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.

(Kliknij przycisk" Uruchom fragment kodu " powyżej, aby zobaczyć wynik.)

Różnica między 1 A 2 została już wskazana(mianowicie, 2 nadal zajmuje miejsce). Jednak jest różnica między 2 a 3: w przypadku 3, mysz nadal przełącza się na rękę po najechaniu kursorem na link, a użytkownik nadal można kliknąć na link, A zdarzenia Javascript nadal będą uruchamiane na link. Zazwyczaj jest tonie zachowanie, które chcesz (ale może czasami tak jest?).

Kolejna 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 dla pewnego rodzaju znaku wodnego lub jeśli chcesz ukryć informację o prawach autorskich, która pojawi się, jeśli niedbale użytkownik skopiuje / wklei Twoje zadowolona?

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

visibility:hidden ukrywa go, ale pozostawia przestrzeń.

Istnieje duża różnica, jeśli chodzi o węzły potomne. Na przykład: jeśli masz rodzic div I zagnieżdżony potomny div. Więc jeśli piszesz tak:

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

W tym przypadku żaden z div nie będzie widoczny. Ale jeśli napiszesz TAK:

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

Wtedy potomny div będzie widoczny, podczas gdy rodzic div nie będzie widoczny.

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

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

display: none usuwa element ze strony CAŁKOWICIE, a strona jest zbudowana tak, jakby elementu w ogóle nie było.

Visibility: hidden pozostawia miejsce w obiegu dokumentu, nawet jeśli nie można go już zobaczyć.

Z visibility:hidden obiekt nadal zajmuje pionową wysokość na stronie. Z display:none jest całkowicie usunięty. Jeśli masz tekst pod obrazem i wykonasz display:none, tekst ten przesunie się w górę, aby wypełnić miejsce, w którym znajdował się obraz. Jeśli zrobisz widoczność: ukryty tekst pozostanie w tym samym miejscu.

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

visibility:hidden zachowuje przestrzeń; display:none nie.

Oprócz wszystkich innych odpowiedzi, Istnieje istotna różnica dla IE8: jeśli użyjesz display:none i spróbujesz uzyskać szerokość lub Wysokość elementu, IE8 zwróci 0 (podczas gdy inne przeglądarki zwrócą rzeczywiste rozmiary). IE8 zwraca poprawną szerokość lub wysokość tylko dla visibility:hidden.

display: none; 

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

visibility: hidden; 

Ukrywa element, ale nadal zajmuje tę samą przestrzeń, co wcześniej. Element będzie ukryty, ale nadal wpływa na układ.

visibility: hidden zachowaj przestrzeń, podczas gdy display: none nie zachowuje przestrzeni.

Display None przykład: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Visibility Hidden Example : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Jeśli właściwość visibility ustawiona na "hidden", przeglądarka nadal zajmie miejsce na stronie dla zawartości, nawet jeśli jest niewidoczna.
Ale gdy ustawimy obiekt na "display:none", przeglądarka nie przydziela miejsca na stronie dla jego zawartości.

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>

Zobacz szczegóły

visibility:hidden zachowa element na stronie i zajmuje to miejsce, ale nie pokazuje się użytkownikowi.

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

Inną różnicą jest to, że visibility:hidden działa w naprawdę, naprawdę starych przeglądarkach, a display:none nie:

Https://www.w3schools.com/cssref/pr_class_visibility.asp

Https://www.w3schools.com/cssref/pr_class_display.asp

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

Efekty i skutki uboczne display: none:

Element docelowy jest usuwany z obiegu dokumentu (nie ma wpływu na układ innych elementów); [18]}dotyczy to wszystkich potomków (również nie są wyświetlane i nie mogą "otrząsnąć się" z tego dziedzictwa);
• pomiarów nie można dokonać dla elementu docelowego ani dla jego potomków – nie są oddane w ogóle, stąd ich clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), wszystkie return 0 s.

Efekty i skutki uboczne visibility: hidden:

Element docelowy jest ukryty przed widokiem, ale nie jest wyjęty 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 łańcuch.

display:none; visibility:hidden; nie wyświetli elementu, ani nie przydzieli miejsca dla elementu na stronie, podczas gdy 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ć, zapoznaj się z poniższym kodem: display: none vs visibility: hidden

Jest tu wiele szczegółowych odpowiedzi, ale pomyślałem, że powinienem dodać to do kwestii dostępności, ponieważ istnieją implikacje.

display: none; i visibility: hidden; nie mogą być odczytywane przez wszystkie programy czytnika ekranu. Należy pamiętać, czego doświadczą użytkownicy niedowidzący.

Pytanie dotyczy również synonimów. text-indent: -9999px; jest jednym innym, który jest mniej więcej równoważny. Ważną różnicą w stosunku do text-indent jest to, że często czytany jest przez czytniki ekranu. Może to być trochę złe doświadczenie jako użytkownicy nadal można zakładkę do łącza.

W odniesieniu do dostępności, to, co widzę dziś, to kombinacja stylów, aby ukryć element, będąc widocznym 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 tworzenie 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. Spraw, aby link był wizualnie Ukryty. Użytkownicy mogą po prostu nacisnąć tab, aby uzyskać dostęp do linku.

Więcej o dostępności i ukryte treści, patrz:

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/

Display: none

Usunie element z normalnego przepływu strony, umożliwiając wypełnienie innych elementów.

Element w ogóle nie pojawi się na stronie, ale nadal możemy z nim współdziałać poprzez DOM. Nie będzie dla niej miejsca między innymi elementami.

Visibility: hidden

Pozostawi element w normalnym przepływie strony taki, który nadal zajmuje przestrzeń.

Element nie jest widoczne i miejsce elementu jest przeznaczone dla niego na stronie.

Inne sposoby ukrywania elementów

Użyj z-index

#element {
   z-index: -11111;
}

Przenieś element ze strony

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

Ciekawe informacje o widoczności: Ukryta i wyświetlanie: brak właściwości

visibility: hidden i display: none będą równie wydajne, ponieważ oba ponownie uruchamiają układ, farbę i kompozycję. Jednak {[4] } jest funkcjonalnością równoważną {[2] } i nie ponownie uruchom krok układu.

I właściwość CSS-transition jest również ważną rzeczą, o którą musimy zadbać. Ponieważ przełączanie z visibility: hidden na visibility: visible pozwala na użycie CSS-transitions, podczas gdy przełączanie z display: none na display: block nie. visibility: hidden ma dodatkową zaletę, że nie przechwytuje zdarzeń JavaScript, podczas gdy opacity: 0 przechwytuje zdarzenia