SitePoint | Mefics

Istnieje wiele sposobów na ukrycie elementu w CSS, ale różnią się one sposobem w jaki wpływają na dostępność, układ, animację, wydajność i obsługę zdarzeń.

Animacja

Niektóre opcje ukrywania w CSS to wszystko albo nic. Element jest albo całkowicie widoczny albo całkowicie niewidoczny i nie ma stanu pomiędzy. Inne, takie jak przezroczystość, mogą mieć zakres wartości, więc interpolowane animacje CSS stają się możliwe.

Dostępność

Każda z metod opisanych poniżej wizualnie ukryje element, ale może, ale nie musi ukryć zawartość przed technologiami wspomagającymi. Na przykład, czytnik ekranu może nadal wyświetlać maleńki, przezroczysty tekst. Dalsze właściwości CSS lub atrybuty ARIA, takie jak aria-hidden="true" mogą być konieczne do opisania odpowiedniej akcji.

Uważaj, że animacje mogą również powodować dezorientację, migreny, drgawki lub inny fizyczny dyskomfort u niektórych osób. Rozważ użycie zapytania o media prefers-reduced-motion aby wyłączyć animacje, gdy są one określone w preferencjach użytkownika.

Obsługa zdarzeń

Ukrycie albo zatrzyma zdarzenia wywoływane na tym elemencie, albo nie będzie miało żadnego efektu – to znaczy, element nie jest widoczny, ale nadal może być klikany lub otrzymywać inne interakcje użytkownika.

Wydajność

Po załadowaniu przez przeglądarkę i przetworzeniu modelu obiektowego HTML DOM i CSS, strona jest renderowana w trzech etapach:

Układ: wygenerowanie geometrii i pozycji każdego elementu
Malowanie: rysuje piksele dla każdego elementu
Kompozycja: pozycjonuje warstwy elementów w odpowiedniej kolejności

Efekt, który powoduje tylko zmiany kompozycji, jest zauważalnie płynniejszy niż te, które wpływają na układ. W niektórych przypadkach przeglądarka może również korzystać z akceleracji sprzętowej.

przezroczystość i filtr: opacity()

Właściwości opacity: N i filter: opacity(N) mogą być przekazywane jako liczba z przedziału od 0 do 1 lub wartość procentowa z przedziału od 0% do 100% oznaczająca odpowiednio pełną przezroczystość i pełną nieprzezroczystość.

Zobacz Pen
hide with opacity: 0 by SitePoint (@SitePoint)
on CodePen.

W nowoczesnych przeglądarkach nie ma dużej różnicy praktycznej między tymi dwoma rozwiązaniami, chociaż filter powinien być używany, jeśli stosuje się wiele efektów jednocześnie (rozmycie, kontrast, skala szarości itp.)

Opacity może być animowany i oferuje świetną wydajność, ale należy uważać, że całkowicie przezroczysty element pozostaje na stronie i może wywoływać zdarzenia.

metryczny	efekt
obsługa przeglądarek
wsparcie dla przeglądarek	dobrze, ale IE obsługuje tylko `opacity` 0 do 1
dostępność	treść nie jest odczytywana, jeśli ustawiono 0 lub 0%
wpływ na układ?	nie
wymagany rendering	kompozycja
wydajność	najlepsza, może używać akceleracji sprzętowej
możliwe klatki animacji?	tak
events triggered when hidden?	yes

color Alpha Transparency

opacity wpływa na cały element, ale można też ustawić osobno właściwości colorbackground-color i border-color. Zastosowanie zerowego kanału alfa za pomocą rgba(0,0,0,0) lub podobnego powoduje, że element staje się całkowicie przezroczysty:

Zobacz Pen
hide with color alpha by SitePoint (@SitePoint)
on CodePen.

Każda właściwość może być animowana osobno, aby stworzyć interesujące efekty. Zauważ, że przezroczystość nie może być zastosowana do elementów z tłem obrazu, chyba że są one generowane przy użyciu linear-gradient lub podobnych.

Kanał alfa może być ustawiony za pomocą:

transparent: w pełni przezroczysty (animacje pomiędzy nie są możliwe)
rgba(r, g, b, a): czerwony, zielony, niebieski i alfa
hsla(h, s, l, a): odcień, nasycenie, jasność, i alfa
#RRGGBBAA i #RGBA

metric	effect
wsparcie dla przeglądarek	dobrze, ale IE obsługuje tylko `transparent` i `rgba`
dostępność	treść nadal czytana
wpływ na układ?	no
rendering required	painting
performance	dobry, ale nie tak szybki jak `opacity`
animation frames possible?	tak
zdarzenia wyzwalane przy ukrywaniu?	tak

transform

Właściwość transform może być użyta do translacji (przesuwania), skalowania, obracania lub przechylania elementu. A scale(0) lub translate(-999px, 0px) poza ekranem ukryje element:

Zobacz Pen
hide with transform: scale(0); by SitePoint (@SitePoint)
on CodePen.

transform oferuje doskonałą wydajność i akcelerację sprzętową, ponieważ element jest efektywnie przenoszony do oddzielnej warstwy i może być animowany w 2D lub 3D. Oryginalna przestrzeń układu pozostaje taka sama, ale żadne zdarzenia nie zostaną wywołane przez całkowicie ukryty element.

metric	effect
obsługa przeglądarek	dobra
dostępność	treść nadal czytana
wpływ na układ?	nie – oryginalne wymiary pozostają
wymagany rendering	kompozycja
wydajność	najlepsza, może korzystać z akceleracji sprzętowej
możliwość tworzenia klatek animacji?	tak
events triggered when hidden?	no

clip-path

Właściwość clip-path tworzy region przycinania, który określa, które części elementu są widoczne. Użycie wartości takiej jak clip-path: circle(0); spowoduje całkowite ukrycie elementu.

Zobacz Pen
hide with clip-path by SitePoint (@SitePoint)
on CodePen.

clip-path oferuje możliwości ciekawych animacji, choć należy na nim polegać tylko w nowoczesnych przeglądarkach.

metric	effect
obsługa przeglądarek	tylko nowoczesne przeglądarki
dostępność	treść nadal odczytywana przez niektóre aplikacje
wpływ na układ?	nie – oryginalne wymiary pozostają
wymagany rendering	paint
wydajność	rozsądna
możliwość stosowania ramek animacji?	tak, w nowoczesnych przeglądarkach
zdarzenia wyzwalane, gdy są ukryte?	nie

widoczność

The visibility właściwość może być ustawiona na visible lub hidden aby pokazać i ukryć element:

Zobacz pióro
ukrywanie z widocznością: hidden by SitePoint (@SitePoint)
na CodePen.

Spacja używana przez element pozostaje na swoim miejscu, chyba że użyto wartości collapse.

metric	effect
obsługa przeglądarki	doskonała
dostępność	treść nieczytelna
wpływ na układ?	nie, chyba że użyto `collapse`
wymagany rendering	kompozycja, unless `collapse` is used
performance	good
animation frames possible?	nie
zdarzenia wyzwalane przy ukrywaniu?	no

display

display jest prawdopodobnie najczęściej używaną metodą ukrywania elementów. Wartość none skutecznie usuwa element, tak jakby nigdy nie istniał w DOM.

Zobacz pióro
hide with display: none by SitePoint (@SitePoint)
on CodePen.

Jednakże, jest to prawdopodobnie najgorsza właściwość CSS do użycia w większości przypadków. Nie można jej animować i spowoduje układ strony, chyba że element zostanie przeniesiony poza obieg dokumentu za pomocą position: absolute lub zostanie przyjęta nowa właściwość contain.

display jest również przeciążony, z opcjami takimi jak blockinlinetableflexboxgrid i inne. Resetowanie z powrotem do poprawnej wartości po display: none; może być problematyczne (chociaż unset może pomóc).

metric	effect
obsługa przeglądarki	doskonała
dostępność	treść nieczytelna
wpływ na układ?	yes
rendering required	layout
performance	poor
animation frames possible?	no
events triggered when hidden?	no

Atrybut ukryty HTML

Atrybut HTML hidden może być dodany do dowolnego elementu:

<p hidden> Hidden content</p>

aby zastosować domyślny styl przeglądarki:

 { display: none;}

To ma takie same zalety i wady jak display: none, chociaż może być przydatne, gdy używamy systemu zarządzania treścią, który nie zezwala na zmiany stylu.

Pozycja bezwzględna

Własność position pozwala na przesunięcie elementu z jego domyślnej static pozycji w obrębie układu strony za pomocą topbottomleft, oraz right. Element absolute-pozycjonowany może być zatem przesunięty poza ekran za pomocą left: -999px lub podobnego:

Zobacz pióro
hide with position: absolute by SitePoint (@SitePoint)
na CodePen.

metric	effect
wsparcie dla przeglądarki	doskonałe, chyba, że użyto `position: sticky`
dostępność	treść nadal czytana
dotknięty układ?	tak, jeśli pozycjonowanie zostanie zmienione
wymagany rendering	zależy
wydajność	rozsądna, jeśli ostrożnie
możliwe ramki animacji?	tak, na `topbottomleft`, i `right`
wydarzenia wyzwalane po ukryciu?	tak, ale może być niemożliwe wchodzenie w interakcję z elementem poza ekranem

Overlay Another Element

Element może być wizualnie ukryty poprzez umieszczenie innego elementu nad nim, który ma ten sam kolor co tło. W tym przykładzie, ::after pseudoelement jest nałożony, chociaż można użyć dowolnego elementu potomnego:

Zobacz pióro
ukrycia z nakładką autorstwa SitePoint (@SitePoint)
na CodePen.

Mimo, że technicznie możliwe, ta opcja wymagała więcej kodu niż inne opcje.

metric	effect
obsługa przeglądarek	doskonała
dostępność	treść nadal czytana
wpływ na układ?	nie, jeśli absolutnie pozycjonowany
wymagany rendering	paint
wydajność	rozsądna, jeśli ostrożnie
możliwe ramki animacji?	tak
zdarzenia wyzwalane przy ukrywaniu?	tak, gdy element pseudo lub dziecko jest nałożony

Reduce Dimensions

Element może być ukryty poprzez zminimalizowanie jego wymiarów za pomocą widthheightpaddingborder-width i/lub font-size. Może być również konieczne zastosowanie overflow: hidden;, aby upewnić się, że treść nie wylewa się na zewnątrz.

Zobacz Pen
hide with width or height by SitePoint (@SitePoint)
on CodePen.

Interesujące animowane efekty są możliwe, ale wydajność jest zauważalnie lepsza z transform.

metric	effect
obsługa przeglądarek	doskonała
dostępność	treść nadal czytana
wpływ na układ?	yes
rendering required	layout
performance	poor
animation frames possible?	yes
events triggered when hidden?	no

Ukryte wybory

display: none był ulubionym rozwiązaniem do ukrywania elementów przez wiele lat, ale został wyparty przez bardziej elastyczne, animowalne opcje. Nadal jest to rozwiązanie ważne, ale chyba tylko wtedy, gdy chcesz na stałe ukryć zawartość przed wszystkimi użytkownikami. transform lub opacity są lepszym wyborem, gdy bierzesz pod uwagę wydajność.

Podnieś swoje umiejętności CSS na wyższy poziom z CSS Master. Naucz się architektury CSS, debugowania, niestandardowych właściwości, zaawansowanych technik układu i animacji, jak używać CSS z SVG, i nie tylko.

10 sposobów na ukrywanie elementów w CSS