10 modi per nascondere elementi nei CSS
Ci sono diversi modi per nascondere un elemento nei CSS, ma differiscono nel modo in cui influenzano l’accessibilità, il layout, l’animazione, le prestazioni e la gestione degli eventi.
Animazione
Alcune opzioni per nascondere i CSS sono tutto o niente. L’elemento è o completamente visibile o completamente invisibile e non c’è uno stato intermedio. Altre, come la trasparenza, possono avere una gamma di valori, così le animazioni CSS interpolate diventano possibili.
Accessibilità
Ogni metodo descritto sotto nasconderà visivamente un elemento, ma potrebbe nascondere o meno il contenuto dalle tecnologie assistive. Per esempio, uno screen reader potrebbe ancora annunciare un piccolo testo trasparente. Ulteriori proprietà CSS o attributi ARIA come aria-hidden="true" potrebbero essere necessari per descrivere l’azione appropriata.
Fate attenzione che le animazioni possono anche causare disorientamento, emicranie, convulsioni, o altri disagi fisici per alcune persone. Considerate l’uso di una query media prefers-reduced-motion per disattivare le animazioni quando specificato nelle preferenze dell’utente.
Gestione degli eventi
Nascondere fermerà gli eventi che vengono attivati su quell’elemento o non avrà alcun effetto – cioè, l’elemento non è visibile ma può ancora essere cliccato o ricevere altre interazioni dall’utente.
Performance
Dopo che un browser carica e analizza il DOM HTML e il modello di oggetto CSS, la pagina viene resa in tre fasi:
- Layout: genera la geometria e la posizione di ogni elemento
- Paint: disegna i pixel per ogni elemento
- Composizione: posiziona i livelli degli elementi nell’ordine appropriato
Un effetto che causa solo cambiamenti di composizione è notevolmente più fluido di quelli che riguardano il layout. In alcuni casi, il browser può anche utilizzare l’accelerazione hardware.
opacità e filtro: opacity()
Le proprietà opacity: N e filter: opacity(N) possono essere passate un numero tra 0 e 1, o una percentuale tra 0% e 100% denotando di conseguenza completamente trasparente e completamente opaco.
Vedi il Pen
hide with opacity: 0 di SitePoint (@SitePoint)
su CodePen.
C’è poca differenza pratica tra i due nei browser moderni, anche se filter dovrebbe essere usato se vengono applicati più effetti contemporaneamente (sfocatura, contrasto, scala di grigi ecc.)
L’opacità può essere animata e offre grandi prestazioni, ma bisogna fare attenzione al fatto che un elemento completamente trasparente rimane sulla pagina e può scatenare eventi.
| metrica | effetto | |
|---|---|---|
| supporto browser | buono, ma IE supporta solo opacity da 0 a 1 |
|
| accessibilità | contenuto non letto se è impostato 0 o 0% | |
| layout interessato? | no | |
| Rendering richiesto | composizione | |
| performance | meglio, può usare l’accelerazione hardware | |
| frame di animazione possibile? | Sì | |
| Eventi attivati quando nascosti? | sì |
color Alpha Transparency
opacity riguarda l’intero elemento, ma è anche possibile impostare le proprietà colorbackground-color, e border-color separatamente. Applicando un canale alfa nullo usando rgba(0,0,0,0) o simili si rende un elemento completamente trasparente:
Vedere la penna
nascondere con colore alfa di SitePoint (@SitePoint)
su CodePen.
Ogni proprietà può essere animata separatamente per creare effetti interessanti. Si noti che la trasparenza non può essere applicata agli elementi con sfondi di immagine a meno che non siano generati usando linear-gradient o simili.
Il canale alfa può essere impostato con:
-
transparent: completamente trasparente (non sono possibili animazioni intermedie) -
rgba(r, g, b, a): rosso, verde, blu e alfa -
hsla(h, s, l, a): tonalità, saturazione, luminosità, e alfa -
#RRGGBBAAe#RGBA
| metrica | effetto | |
|---|---|---|
| supporto browser | buono, ma IE supporta solo transparent e rgba |
|
| accessibilità | contenuto ancora letto | |
| layout interessato? | no | |
| Rendering richiesto | pittura | |
| prestazioni | buone, ma non veloci come opacity |
|
| è possibile l’animazione dei frame? | sì | |
| eventi attivati quando sono nascosti? | si |
transform
La proprietà transform può essere usata per tradurre (spostare), scalare, ruotare o inclinare un elemento. Un scale(0) o translate(-999px, 0px) fuori dallo schermo nasconderà l’elemento:
Vedi la penna
hide with transform: scale(0); di SitePoint (@SitePoint)
su CodePen.
transform offre eccellenti prestazioni e accelerazione hardware perché l’elemento viene effettivamente spostato in un livello separato e può essere animato in 2D o 3D. Lo spazio di layout originale rimane così com’è, ma nessun evento sarà attivato da un elemento completamente nascosto.
| metrica | effetto | |
|---|---|---|
| supporto browser | buono | |
| accessibilità | contenuto ancora letto | |
| layout interessato? | no – le dimensioni originali rimangono | |
| rendering richiesto | composizione | |
| prestazioni | meglio, può usare l’accelerazione hardware | |
| frame di animazione possibile? | sì | |
| eventi attivati quando sono nascosti? | no |
clip-path
La proprietà clip-path crea una regione di ritaglio che determina quali parti di un elemento sono visibili. Usando un valore come clip-path: circle(0); nasconderà completamente l’elemento.
Vedi la penna
hide with clip-path di SitePoint (@SitePoint)
su CodePen.
clip-path offre spazio per animazioni interessanti, anche se si dovrebbe fare affidamento solo sui browser moderni.
| metrica | effetto | |
|---|---|---|
| supporto browser | solo browser moderni | |
| accessibilità | contenuto ancora letto da alcune applicazioni | |
| layout interessato? | no – le dimensioni originali rimangono | |
| rendering richiesto | pittura | |
| performance | ragionevole | |
| frame di animazione possibile? | Sì, nei browser moderni | |
| Eventi attivati quando sono nascosti? | no |
visibilità
Il visibility può essere impostata su visible o hidden per mostrare e nascondere un elemento:
Vedere la penna
nascondere con visibilità: nascosto da SitePoint (@SitePoint)
su CodePen.
Lo spazio utilizzato dall’elemento rimane al suo posto a meno che non venga utilizzato un valore collapse.
| metrica | effetto | |
|---|---|---|
| supporto browser | eccellente | |
| accessibilità | contenuto non letto | |
| layout interessato? | no, a meno che collapse sia usato |
|
| rendering richiesto | composizione, a meno che collapse sia usato |
|
| performance | buona | |
| è possibile l’animazione dei frame? | no | |
| eventi attivati quando sono nascosti? | no |
display
display è probabilmente il metodo più utilizzato per nascondere gli elementi. Un valore di none rimuove effettivamente l’elemento come se non fosse mai esistito nel DOM.
Vedi la penna
hide with display: none di SitePoint (@SitePoint)
su CodePen.
Tuttavia, è probabilmente la peggiore proprietà CSS da usare nella maggior parte dei casi. Non può essere animata e innescherà un layout di pagina a meno che l’elemento non venga spostato fuori dal flusso del documento usando position: absolute o venga adottata la nuova proprietà contain.
display è anche sovraccaricato, con opzioni come blockinlinetableflexboxgrid e altro. Ripristinare il valore corretto dopo display: none; può essere problematico (anche se unset può aiutare).
| metrica | effetto |
|---|---|
| supporto browser | eccellente |
| accessibilità | contenuto non letto |
| layout interessato? | Sì |
| Rendering richiesto | layout |
| performance | scarso |
| Frame di animazione possibili? | no |
| eventi attivati quando nascosti? | no |
Attributo HTML nascosto
L’attributo HTML hidden può essere aggiunto a qualsiasi elemento:
<p hidden> Hidden content</p>per applicare lo stile predefinito del browser:
{ display: none;}Questo ha gli stessi benefici e difetti di display: none, anche se potrebbe essere utile quando si usa un sistema di gestione dei contenuti che non permette cambiamenti di stile.
Posizione assoluta
La proprietà position permette di spostare un elemento dalla sua posizione predefinita static all’interno del layout della pagina utilizzando topbottomleft, e right. Un elemento absolute posizionato può quindi essere spostato fuori dallo schermo con left: -999px o simili:
Vedere la penna
hide with position: absolute di SitePoint (@SitePoint)
su CodePen.
| metrica | effetto | |
|---|---|---|
| supporto browser | eccellente, a meno che non si usi position: sticky |
|
| accessibilità | contenuto ancora letto | |
| layout interessato? | Sì, se il posizionamento viene modificato | |
| rendering richiesto | dipende | |
| prestazioni | ragionevoli se si sta attenti | |
| Frame di animazione possibili? | sì, su topbottomleft, e right |
|
| eventi attivati quando nascosti? | Sì, ma potrebbe essere impossibile interagire con un elemento fuori dallo schermo |
Sopra un altro elemento
Un elemento può essere nascosto visivamente posizionandone un altro sopra che abbia lo stesso colore dello sfondo. In questo esempio, viene sovrapposto uno pseudo-elemento ::after, anche se potrebbe essere usato qualsiasi elemento figlio:
Vedi la penna
nascondere con una sovrapposizione di SitePoint (@SitePoint)
su CodePen.
Anche se tecnicamente possibile, questa opzione richiede più codice delle altre opzioni.
| metrica | effetto | |
|---|---|---|
| supporto browser | eccellente | |
| accessibilità | contenuto ancora letto | |
| layout interessato? | no, se assolutamente posizionato | |
| rendering richiesto | pittura | |
| prestazioni | ragionevoli se si sta attenti | |
| Frame di animazione possibile? | Sì | |
| Eventi attivati quando sono nascosti? | Sì, quando uno pseudo elemento o un elemento figlio è sovrapposto |
Ridurre le dimensioni
Un elemento può essere nascosto minimizzando le sue dimensioni usando widthheightpaddingborder-width e/o font-size. Potrebbe anche essere necessario applicare overflow: hidden; per assicurarsi che il contenuto non fuoriesca.
Vedere la penna
nascondere con larghezza o altezza da SitePoint (@SitePoint)
su CodePen.
Sono possibili interessanti effetti animati, ma le prestazioni sono notevolmente migliori con transform.
| metrica | effetto |
|---|---|
| supporto browser | eccellente |
| accessibilità | contenuto ancora letto |
| layout interessato? | Sì |
| Rendering richiesto | layout |
| performance | scarso |
| Frame di animazione possibili? | Sì |
| eventi attivati quando nascosti? | no |
Scelte nascoste
display: none è stata la soluzione preferita per nascondere elementi per molti anni, ma è stata sostituita da opzioni più flessibili e animabili. È ancora valido, ma forse solo quando si vuole nascondere permanentemente il contenuto a tutti gli utenti. transform o opacity sono scelte migliori quando si considerano le prestazioni.
Porta le tue abilità CSS al livello successivo con CSS Master. Impara l’architettura CSS, il debug, le proprietà personalizzate, le tecniche avanzate di layout e animazione, come usare i CSS con SVG, e altro ancora.