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.
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.
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.
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.
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.
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.
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: