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

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

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

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.

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?

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

visibility:hidden ukrywa to, ale opuszcza przestrzeń.

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.

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.

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.

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.

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.

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.

visibility:hiddenzachowuje przestrzeń; display:nonenie.

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

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

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.

Inna różnica polega na tym, że visibility:hiddendziała w naprawdę starych przeglądarkach i display:nonenie:

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

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

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.

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

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:

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