10 manieren om elementen in CSS te verbergen

10 manieren om elementen in CSS te verbergen

Er zijn meerdere manieren om een ​​element in CSS te verbergen, maar ze verschillen in de manier waarop ze de toegankelijkheid, lay-out, animatie, prestaties en gebeurtenisafhandeling beïnvloeden.

Animatie

Sommige CSS-verbergingsopties zijn alles of niets. Het element is ofwel volledig zichtbaar ofwel volledig onzichtbaar en er is geen tussenstaat. Anderen, zoals transparantie, kunnen een reeks waarden hebben, zodat geïnterpoleerde CSS-animaties mogelijk worden.

Toegankelijkheid

Elke hieronder beschreven methode zal een element visueel verbergen, maar het kan de inhoud wel of niet verbergen voor ondersteunende technologieën. Een schermlezer kan bijvoorbeeld nog steeds kleine transparante tekst aankondigen. Verdere CSS-eigenschappen of ARIA-attributen zoals aria-hidden="true" kan nodig zijn om de gepaste actie te beschrijven.

Pas op dat animaties bij sommige mensen ook desoriëntatie, migraine, toevallen of ander lichamelijk ongemak kunnen veroorzaken. Overweeg om een prefers-reduced-motion mediaquery om animaties uit te schakelen indien gespecificeerd in gebruikersvoorkeuren.

Afhandeling van gebeurtenissen

Verbergen zorgt ervoor dat gebeurtenissen niet meer op dat element worden geactiveerd of heeft geen effect - dat wil zeggen dat het element niet zichtbaar is, maar er nog op kan worden geklikt of andere gebruikersinteracties kan ontvangen.

Prestatie

Nadat een browser het HTML DOM- en CSS-objectmodel heeft geladen en geparseerd, wordt de pagina in drie fasen weergegeven:

  1. Indeling: genereer de geometrie en positie van elk element
  2. Verf: teken de pixels voor elk element
  3. Samenstelling: plaats elementlagen in de juiste volgorde

Een effect dat alleen maar tot compositiewijzigingen leidt, is merkbaar vloeiender dan het effect dat de lay-out beïnvloedt. In sommige gevallen kan de browser ook hardwareversnelling gebruiken.

1. opacity en filter: opacity()

De opacity: N en filter: opacity(N) eigenschappen kunnen worden doorgegeven aan een getal tussen 0 en 1, of een percentage tussen 0% en 100%, hetgeen duidt op volledig transparant en volledig ondoorzichtig dienovereenkomstig.

Zie de pen
verbergen met dekking: 0
door Zentica (@SitePoint
Aan CodePen

Er is echter weinig praktisch verschil tussen de twee in moderne browsers filter moet worden gebruikt als meerdere effecten tegelijkertijd worden toegepast (vervaging, contrast, grijswaarden enz.)

Ondoorzichtigheid kan worden geanimeerd en biedt geweldige prestaties, maar pas op dat een volledig transparant element op de pagina blijft en gebeurtenissen kan activeren.

metriek effect
browser ondersteuning goed, maar IE ondersteunt alleen opacity 0 tot 1
toegankelijkheid inhoud niet gelezen als 0 of 0% is ingesteld
layout aangetast? Nee
rendering vereist samenstelling
prestatie het beste, kan hardwareversnelling gebruiken
animatieframes mogelijk? Ja
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? Ja

2. color Alpha Transparantie

opacity beïnvloedt het hele element, maar het is ook mogelijk om de colorbackground-color, en border-color eigenschappen afzonderlijk. Een nul-alfakanaal toepassen met rgba(0,0,0,0) of vergelijkbaar maakt een item volledig transparant:

Zie de pen
verbergen met kleur alpha
door Zentica (@SitePoint
Aan CodePen

Elke eigenschap kan afzonderlijk worden geanimeerd om interessante effecten te creëren. Merk op dat transparantie niet kan worden toegepast op elementen met afbeeldingsachtergronden, tenzij ze worden gegenereerd met linear-gradient of vergelijkbaar.

Het alfakanaal kan worden ingesteld met:

  • transparent: volledig transparant (tussen animaties zijn niet mogelijk)
  • rgba(r, g, b, a): rood, groen, blauw en alfa
  • hsla(h, s, l, a): tint, verzadiging, lichtheid en alfa
  • #RRGGBBAA en #RGBA
metriek effect
browser ondersteuning goed, maar IE ondersteunt alleen transparent en rgba
toegankelijkheid inhoud nog steeds gelezen
layout aangetast? Nee
rendering vereist schilderen
prestatie goed, maar niet zo snel als opacity
animatieframes mogelijk? Ja
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? Ja

3. transform

De transform eigenschap kan worden gebruikt om een ​​element te vertalen (verplaatsen), schalen, roteren of scheeftrekken. EEN scale(0) of translate(-999px, 0px) off-screen verbergt het element:

Zie de pen
verbergen met transformatie: schaal (0);
door Zentica (@SitePoint
Aan CodePen

transform biedt uitstekende prestaties en hardwareversnelling omdat het element effectief naar een aparte laag wordt verplaatst en in 2D of 3D kan worden geanimeerd. De oorspronkelijke layoutruimte blijft zoals deze is, maar er worden geen gebeurtenissen geactiveerd door een volledig verborgen element.

metriek effect
browser ondersteuning mooi zo
toegankelijkheid inhoud nog steeds gelezen
layout aangetast? nee - de originele afmetingen blijven
rendering vereist samenstelling
prestatie het beste, kan hardwareversnelling gebruiken
animatieframes mogelijk? Ja
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? Nee

4. clip-path

De clip-path eigenschap creëert een uitknipgebied dat bepaalt welke delen van een element zichtbaar zijn. Gebruik een waarde zoals clip-path: circle(0); zal het element volledig verbergen.

Zie de pen
verbergen met clip-path
door Zentica (@SitePoint
Aan CodePen

clip-path biedt ruimte voor interessante animaties, hoewel er alleen op moet worden vertrouwd in moderne browsers.

metriek effect
browser ondersteuning alleen moderne browsers
toegankelijkheid inhoud wordt nog steeds gelezen door sommige toepassingen
layout aangetast? nee - de originele afmetingen blijven
rendering vereist verf
prestatie redelijk
animatieframes mogelijk? ja, in moderne browsers
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? Nee

5. visibility

De visibility eigenschap kan worden ingesteld op visible of hidden om een ​​element te tonen en te verbergen:

Zie de pen
verbergen met zichtbaarheid: verborgen
door Zentica (@SitePoint
Aan CodePen

De ruimte die door het element wordt gebruikt, blijft op zijn plaats tenzij a collapse waarde wordt gebruikt.

metriek effect
browser ondersteuning uitstekend
toegankelijkheid inhoud niet gelezen
layout aangetast? nee, tenzij collapse is gebruikt
rendering vereist compositie, tenzij collapse is gebruikt
prestatie mooi zo
animatieframes mogelijk? Nee
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? Nee

6. display

display is waarschijnlijk de meest gebruikte methode om elementen te verbergen. Een waarde van none verwijdert effectief het element alsof het nooit in de DOM heeft bestaan.

Zie de pen
verbergen met weergave: geen
door Zentica (@SitePoint
Aan CodePen

Het is echter mogelijk de slechtste CSS-eigenschap om in de meeste gevallen te gebruiken. Het kan niet worden geanimeerd en zal een paginalay-out activeren, tenzij het element uit de documentstroom wordt verplaatst met position: absolute of het nieuwe contain eigendom is aangenomen.

display is ook overbelast, met opties zoals blockinlinetableflexboxgrid en meer. Na terugzetten naar de juiste waarde display: none; kan problematisch zijn (hoewel unset kan helpen).

metriek effect
browser ondersteuning uitstekend
toegankelijkheid inhoud niet gelezen
layout aangetast? Ja
rendering vereist indeling
prestatie arm
animatieframes mogelijk? Nee
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? Nee

7. HTML hidden attribuut

De HTML hidden attribuut kan aan elk element worden toegevoegd:

<p hidden>
  Hidden content
</p>

om de standaardstijl van de browser toe te passen:

[hidden] 
  display: none;

Dit heeft dezelfde voordelen en gebreken als display: none, hoewel het handig kan zijn bij het gebruik van een inhoudbeheersysteem dat stijlwijzigingen niet toestaat.

8. Absoluut position

De position eigenschap staat toe dat een element van zijn standaardwaarde wordt verplaatst static positie binnen de pagina-indeling met topbottomleft, en right​ Een absolute-gepositioneerd element kan daarom met off-screen worden verplaatst left: -999px of vergelijkbaar:

Zie de pen
verbergen met positie: absoluut
door Zentica (@SitePoint
Aan CodePen

metriek effect
browser ondersteuning uitstekend, tenzij gebruikt position: sticky
toegankelijkheid inhoud nog steeds gelezen
layout aangetast? ja, als de positionering wordt gewijzigd
rendering vereist ligt eraan
prestatie redelijk als je voorzichtig bent
animatieframes mogelijk? ja, op topbottomleft, en right
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? ja, maar het kan onmogelijk zijn om te communiceren met een element buiten het scherm

9. Overlay een ander element

Een element kan visueel worden verborgen door een ander element over de bovenkant te plaatsen dat dezelfde kleur heeft als de achtergrond. In dit voorbeeld is een ::after pseudo-element wordt over elkaar heen gelegd, hoewel elk onderliggend element kan worden gebruikt:

Zie de pen
verstop je met een overlay
door Zentica (@SitePoint
Aan CodePen

Hoewel technisch mogelijk, vereiste deze optie meer code dan andere opties.

metriek effect
browser ondersteuning uitstekend
toegankelijkheid inhoud nog steeds gelezen
layout aangetast? nee, als het absoluut gepositioneerd is
rendering vereist verf
prestatie redelijk als je voorzichtig bent
animatieframes mogelijk? Ja
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? ja, wanneer een pseudo- of kindelement wordt bedekt

10. Beperk de afmetingen

Een element kan worden verborgen door de afmetingen te minimaliseren met widthheightpaddingborder-width en / of font-size​ Het kan ook nodig zijn om een ​​aanvraag in te dienen overflow: hidden; om ervoor te zorgen dat de inhoud niet wegloopt.

Zie de pen
verstop je met breedte of hoogte
door Zentica (@SitePoint
Aan CodePen

Interessante geanimeerde effecten zijn mogelijk, maar de prestaties zijn merkbaar beter transform

metriek effect
browser ondersteuning uitstekend
toegankelijkheid inhoud nog steeds gelezen
layout aangetast? Ja
rendering vereist indeling
prestatie arm
animatieframes mogelijk? Ja
gebeurtenissen die worden geactiveerd wanneer ze worden verborgen? Nee

Verborgen keuzes

display: none is al vele jaren de favoriete oplossing om elementen te verbergen, maar het is vervangen door meer flexibele, animeerbare opties. Het is nog steeds geldig, maar misschien alleen als u inhoud permanent voor alle gebruikers wilt verbergen. transform of opacity zijn betere keuzes bij het overwegen van prestaties.

Breng uw CSS-vaardigheden naar een hoger niveau met CSS Master. Leer CSS-architectuur, foutopsporing, aangepaste eigenschappen, geavanceerde lay-out- en animatietechnieken, hoe u CSS met SVG kunt gebruiken en meer.

U bent misschien ook geïnteresseerd in