Mogą zdarzyć się sytuacje, w których pracujesz nad tworzeniem stron internetowych, w których musisz ukryć określone branże lub elementy z tego czy innego powodu. Możesz po prostu usunąć te elementy ze znaczników HTML. Ale są chwile, kiedy konieczne jest, aby pozostały w kodzie, ale nie były wyświetlane w oknie przeglądarki, z jakiegoś powodu. Aby zapisać element w kodzie HTML, ale aby był niewidoczny, powinieneś zajrzeć do narzędzi CSS.
Jak ukryć elementy za pomocą CSS
Istnieją dwa najczęstsze sposoby ukrywania elementów znajdujących 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 cechy, które powinieneś znać. Przyjrzyjmy się bliżej różnicom widoczności: ukrytym i wyświetlającym: brak.
Właściwość zmiany 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 swoim miejscu i zajmuje przestrzeń, którą zajmował, jeśli 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, a tekst po nim zachowa się tak, jakby ten blok był nadal obecny. Dzieje się tak, ponieważ przedmiot pozostaje w strumieniu. Właściwość wykorzystuje widoczność dość rzadko izwykle z dowolnymi innymi ustawieniami. Jeśli zastosujesz również inne konfiguracje CSS, takie jak pozycjonowanie, możesz najpierw użyć go do ukrycia elementu, ale aby móc go obrócić z powrotem do pozycji kursora. Jest to jedno z możliwych zastosowań właściwości widoczności, ale nie jest do niego zbyt często kierowane.
Wyświetlanie: 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 używana do ukrywania elementów pozwala ukryć blok, tak jakby nie był . W przypadku div, display none działa tak, jakby całkowicie usunął element z dokumentu. Nie zajmuje żadnej przestrzeni, chociaż w źródłowym kodzie HTML wciąż pozostaje. Przedmiot nie pojawi się na twojej stronie i nie będzie dowodu na jego istnienie. Z tym, że otaczające elementy uznają to za pustą przestrzeń i przesunięcie, w zależności od jej własnych właściwości. Jest tak dlatego, że wypada ze strumienia. Właściwość tę można wykorzystać z powodzeniem lub nie, w zależności od intencji plotera. W każdym razie nie powinno się go nadużywać.
Korzystanie z właściwości układu
Plotery często korzystają z wyświetlacza: brak funkcji podczas testowania strony. Zwykle ma to miejsce, jeśli jakiś obszar musi zostać ukryty przez pewien czas, aby można było przetestować inne obszary strony. W takim przypadku użyj wyświetlacza: brak. Należy pamiętać, że przedmiot powinien zostać wcześniej zwrócony na stronęfaktycznie uruchamia witrynę. Faktem jest, ż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 oceny w wyszukiwarkach. Ale teraz elementy, które nie są wyświetlane, mogą być oznaczone czerwoną flagą Google, aby zrozumieć, dlaczego to podejście jest stosowane. Jednym ze sposobów użycia wyświetlacza: żadne nie jest tworzenie adaptacyjnych witryn projektowych. Podczas pisania kodu dla takich stron często konieczne jest tworzenie elementów, które są widoczne tylko w danym rozwiązaniu, ale są 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 instalator próbuje ukryć wszystko, aby wpłynąć na ranking w wyszukiwarkach.
Wyświetlanie właściwości javascript
Właściwość wyświetlania jest ważną własnością CSS, ale zazwyczaj używa javascript do ukrywania i wyświetlania elementów bez usuwania ich 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łaściwość wyświetlania CSS: none dla div, metoda jQuery "hide () również ukrywa wybrane elementy.części kodu nie będą wyświetlane wcale.
Odczyt ekranu i widoczność elementów
Czytniki ekranu, tak zwane "czytniki", zmieniają swoje zachowanie, gdy znajdą w treści element ukryty pod wyświetlaczem: brak. Z reguły treść ukryta nie jest zgłaszana czytelnikom, chyba że zawiera atrybuty etykiet. Zdarzają się sytuacje, w których programiści mogą chcieć, aby treść była ukryta wizualnie, ale otwarta dla użytkowników na czytniku ekranu. Na przykład projekt może wymagać dwucyfrowych fraz, takich jak "więcej", gdzie kontekst jest wizualnie oczywisty, ale może zostać utracony dla użytkowników czytnika ekranu. Aby obejść ten problem, programista może wykonać następujące czynności: napisać blok wyświetlania CSS c lub żaden i dodać znacznik z opisem tego elementu.
Problemy z czytnikami ekranu
Problem polega na tym, że ukrywanie treści przed wyświetlaniem: brak również ukrywa zawartość przed czytnikami z ekranu. Aby obejść ten problem, programiści zaczęli umieszczać treść za pomocą kilku metod, na przykład pozycjonowania bezwzględnego z określoną szerokością i wysokością elementu oraz przepełnienia właściwości: ukryte. Podczas używania znacznika opisu w tym przypadku informacje kontekstowe nie są wyświetlane na ekranie, ale są ogłaszane użytkownikom czytnika ekranu. Ale jeśli przetestujesz witrynę pod kątem dostępności, najczęściej są to elementy, które nie są prawidłowo ukryte przy użyciu właściwości display: none. Najczęstszym przykładem są linki zaprojektowane dla użytkowników na klawiaturze iczytniki ekranu. Ironia polega na tym, że te dobre intencje odchodzą i powodują, że linki na próżno wynikają z użycia wyświetlacza: żadnego.
Podstawowe zasady rozwiązywania problemów związanych z dostępnością
Ze względu na problemy z wyszukiwarkami i różne postrzeganie 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ą praktycznie niezbędną do niektórych operacji.
Oto kilka reguł, które powinny pomóc w określeniu, kiedy i jak ukryć elementy wizualnie:
Jeśli chcesz ukryć zawartość wizualnie, ale zachować ją dla czytelników, nie używaj jej do wyświetlania tekstu: brak.
Jeśli ukryta zawartość może być przydatna tylko dla użytkowników korzystających z czytników ekranu, należy rozważyć jej ukrycie. Jeśli nadal chcesz go ukryć, upewnij się, że jest widoczny podczas ustawiania ostrości.
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ż im szybciej używasz javascript, aby treść była widoczna poprzez zmianę wartości właściwości display, powinieneś pamiętać, że będzie to konieczne dla użytkowników, którzy nie mają JS, aby to ukryć.
Podczas renderowania treści wszystko dochodzi do wniosku, że wyświetlanie: none ukrywa zawartość przed każdym, kto używa CSS do przeglądarki.
