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:
- Indeling: genereer de geometrie en positie van elk element
- Verf: teken de pixels voor elk element
- 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 color background-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 alfahsla(h, s, l, a): tint, verzadiging, lichtheid en alfa#RRGGBBAAen#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 block inline table flexbox grid 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 top bottom left, 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 top bottom left, 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 width height padding border-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.
