Wyświetl Brak - co to jest? Właściwości i zastosowanie

12.03.2019

Mogą wystąpić przypadki, gdy pracujesz nad tworzeniem stron internetowych, w których musisz ukryć pewne obszary lub elementy z tego czy innego powodu. Możesz po prostu usunąć te elementy ze znaczników HTML. Ale zdarzają się sytuacje, gdy jest konieczne, aby pozostały w kodzie, ale nie były wyświetlane w oknie przeglądarki, z jakiegoś powodu. Aby zachować element w kodzie HTML, ale jednocześnie uczynić go niewidocznym, powinieneś sięgnąć po środki CSS.

Jak ukryć elementy za pomocą CSS

Istnieją dwa popularne sposoby ukrywania elementu znajdującego się w kodzie HTML. Jedną z nich jest użycie właściwości wyświetlania lub widoczności. Na pierwszy rzut oka te dwie właściwości mogą wydawać się takie same, ale każda z nich ma swoje własne cechy, o których powinieneś wiedzieć. Przyjrzyjmy się bliżej różnicom widoczności: ukrytym i wyświetlającym: brak.

wyświetlanie tekstu brak

Właściwość widoczności

Pierwsza opcja ukrywa element w przeglądarce, ale ta ukryta część kodu nadal zajmuje miejsce na stronie internetowej. Innymi słowy, czyni element niewidocznym, ale wciąż pozostaje na miejscu i zajmuje przestrzeń, którą zajmowałby, gdyby był widoczny. Jeśli umieścisz znacznik div na stronie i użyjesz CSS do ustawienia jego rozmiaru, widoczność: ukryta właściwość sprawi, że blok nie pojawi się w oknie przeglądarki, ale tekst za nim będzie zachowywał się tak, jakby blok był nadal obecny.

Dzieje się tak, ponieważ element pozostaje w strumieniu. Właściwość widoczności jest używana dość rzadko i zwykle razem z innymi ustawieniami. Jeśli używasz również innych konfiguracji CSS, takich jak pozycjonowanie, możesz najpierw użyć go do ukrycia elementu, ale możesz go zwrócić do miejsca po najechaniu kursorem. Jest to jedno możliwe użycie właściwości widoczności, ale nie jest ona dostępna zbyt często.

div wyświetla brak

Wyświetlacz: brak właściwości i jej użycie w CSS

W przeciwieństwie do właściwości widoczności, która pozostawia element w strumieniu, druga właściwość CSS, która służy do ukrywania elementów, pozwala ukryć blok, tak jakby go tam nie było. W przypadku div, display none działa tak, jakby całkowicie usunął ten element z dokumentu. Nie zajmuje żadnej przestrzeni, mimo że nadal pozostaje w kodzie źródłowym HTML. Przedmiot nie pojawi się na twojej stronie i nie będzie żadnych widocznych dowodów jego istnienia. Biorąc pod uwagę, że otaczające elementy będą uważane za puste i poruszać się, w zależności od ich właściwości. Jest tak dlatego, że wypada ze strumienia. Właściwość tę można zastosować pomyślnie lub nie, w zależności od intencji producenta. W każdym razie nie powinny być nadużywane.

Korzystanie z właściwości podczas układania

Projektanci układu często używają ekranu: brak właściwości podczas testowania strony. Zwykle dzieje się tak, gdy trzeba przez jakiś czas ukryć obszar, aby można było przetestować inne obszary strony. W takim przypadku użyj wyświetlacza: brak. Należy pamiętać, że element musi zostać zwrócony na stronę przed uruchomieniem witryny. Chodzi o to, że element, który jest usuwany ze strumienia za pomocą tej metody, staje się niewidoczny dla wyszukiwarek i czytników ekranu, nawet jeśli nadal pozostaje w kodzie HTML.

styl wyświetlania brak

W przeszłości ta metoda była używana do próby wpływania na rankingi wyszukiwarek. Ale teraz przedmioty, które nie są wyświetlane, mogą być oznaczone czerwoną flagą Google, aby zobaczyć, dlaczego to podejście jest używane. Jednym ze sposobów używania wyświetlacza: brak korzyści przy tworzeniu witryn z responsywnym wzornictwem. Podczas pisania kodu dla takich stron internetowych często konieczne jest tworzenie elementów, które są dostępne do wyświetlania tylko w określonej rozdzielczości, ale ukryte dla innych opcji. Możesz użyć display: none w CSS, aby ukryć ten element, a następnie włączyć go później. Jest to dopuszczalne użycie tej właściwości, ponieważ nie można podejrzewać, że skład ma na celu ukrycie czegoś ze względu na wpływ na wyszukiwarki.

wyświetlanie tekstu

Mapowanie właściwości JavaScript

Właściwość wyświetlania jest ważną własnością CSS, ale jest również powszechnie używana w JavaScript do ukrywania i wyświetlania elementów bez usuwania i ponownego ich tworzenia. Aby przełączyć wyświetlanie elementu div, możesz użyć nie tylko CSS, ale także JavaScript. W tym przypadku używany jest następujący kod:

. Inną opcją jest użycie biblioteki jQuery. Podobnie jak w przypadku wyświetlania CSS: none właściwość div, jQuery "hide () ukrywa również wybrane elementy. Ukryte części kodu nie będą w ogóle wyświetlane.

Czytniki ekranu i widoczność przedmiotów

Czytniki ekranu, tak zwani "czytelnicy", zmieniają swoje zachowanie, gdy znajdą w treści element ukryty przy wyświetlaniu: brak. Ukryta treść z reguły nie informuje czytelników o sobie, jeśli atrybuty etykiet nie są w niej zarejestrowane. Zdarzają się sytuacje, w których programiści mogą chcieć ukryć zawartość wizualnie, ale ujawnić ją użytkownikom ekranu. Na przykład projekt może wymagać niejednoznacznych fraz, takich jak "więcej", gdy kontekst jest wizualnie oczywisty, ale może zostać utracony dla użytkowników czytników ekranu. Aby obejść ten problem, programiści mogą wykonać następujące czynności: napisz regułę CSS z blokiem wyświetlania lub brak i dodaj znaczniki z opisem tego elementu.

stylowy wyświetlacz

Problemy z czytnikami ekranu

Problem polega na tym, że ukrywanie treści przed wyświetlaniem: żaden nie ukrywa również treści od użytkowników czytających z ekranu. Aby obejść ten problem, programiści zaczęli umieszczać zawartość za pomocą kilku metod, na przykład pozycjonowania bezwzględnego z określoną szerokością i wysokością elementu oraz przepełnienia: ukrytej właściwości. W przypadku używania znaczników z opisem w tym przypadku informacje kontekstowe nie są wyświetlane na ekranie, ale są ogłaszane użytkownikom czytników ekranu. Ale jeśli sprawdzasz strony pod kątem dostępności, najczęściej są to elementy, które są nieprawidłowo ukryte za pomocą wyświetlacza: brak właściwości. Najczęstsze przykłady to linki zaprojektowane do pomocy użytkownikom klawiatury i czytnika ekranu. Ironia polega na tym, że te dobre intencje znikają i powodują, że linki stają się bezużyteczne z powodu użycia wyświetlacza: żadnego.

Podstawowe zasady rozwiązywania problemów z dostępnością

Ze względu na problemy z wyszukiwarkami i różne opcje percepcji informacji, należy zachować ostrożność podczas korzystania z wyświetlacza: brak. To nie znaczy, że nie powinieneś w ogóle tego używać. Ta właściwość ma wiele cech, które czynią ją prawie niezbędną do niektórych operacji.

styl wyświetlania brak

Oto kilka reguł, które powinny pomóc określić, kiedy i jak ukryć elementy wizualnie:

  1. Jeśli chcesz ukryć zawartość wizualnie, ale pozostaw ją dostępną dla programów czytających, nie używaj do wyświetlania tekstu: brak.
  2. Jeśli ukryta zawartość może być przydatna tylko dla użytkowników korzystających z czytników ekranu, zastanów się, czy chcesz ją ukryć. Jeśli nadal chcesz go ukryć, upewnij się, że stanie się on widoczny podczas ustawiania ostrości.
  3. Jeśli chcesz coś tymczasowo ukryć i wyświetlić w wyniku interakcji użytkownika, wyświetl: brak może być dokładnie tym, czego potrzebujesz. Ważnym czynnikiem w tym przypadku jest to, że ponieważ zamiast tego użyjesz JavaScript, aby zawartość była widoczna poprzez zmianę wartości właściwości display, musisz pamiętać, że będziesz musiał ją również ukryć dla użytkowników, którzy nie mają JS.

Podczas pracy z wizualizacją treści wszystko sprowadza się do uświadomienia sobie, że wyświetlanie: none ukrywa zawartość przed wszystkimi, którzy używają CSS w przeglądarce.