Skip to main content
Web Design

Cinque modi per nascondere elementi con il CSS

By 20 Novembre 2019No Comments

Esistono diversi modi per nascondere un elemento in CSS. È possibile nasconderlo impostando opacity 0 visibility, hidden display: none o impostando valori estremi per il posizionamento assoluto.
Ti sei mai chiesto perché abbiamo così tante tecniche per nascondere un elemento quando tutti sembrano fare la stessa cosa? Tutti questi metodi in realtà differiscono leggermente l’uno dall’altro e questa differenza determina quale di essi deve essere utilizzato in una situazione specifica. Questo tutorial tratterà le differenze minori che devi tenere a mente quando nascondi un elemento usando uno dei metodi sopra.

Opacità

La proprietà ha lo opacity ha lo scopo di impostare la trasparenza di un elemento. Non è stato progettato per modificare in alcun modo il rettangolo di selezione dell’elemento. Ciò significa che l’impostazione dell’opacità su zero nasconde solo l’elemento visivamente. L’elemento occupa ancora la sua posizione e influisce sul layout della pagina Web. Risponderà anche all’interazione dell’utente.

.hide {
opacity: 0;
}

Se si intende utilizzare la opacityproprietà per nascondere l’elemento agli screen reader, purtroppo non è possibile. L’elemento e tutto il suo contenuto verranno letti dagli screen reader, proprio come tutti gli altri elementi della pagina Web. In altre parole, l’elemento si comporta esattamente come sarebbe stato opaco.

Vorrei anche ricordare che la opacityproprietà può essere animata e utilizzata per creare alcuni splendidi effetti. Qualsiasi elemento con opacitymeno di 1creerà anche un nuovo contesto di accatastamento.

Visibilità

La prossima proprietà nella nostra lista è visibility. Impostandolo su hiddennasconderai il nostro elemento. Proprio come la opacityproprietà, l’elemento nascosto influenzerà comunque il layout della nostra pagina web. L’unica differenza è che questa volta non catturerà alcuna interazione dell’utente se nascosto all’utente. Inoltre, l’elemento verrà anche nascosto agli screen reader.

Questa proprietà è anche in grado di animare purché gli stati iniziale e finale abbiano valori diversi. Ciò garantisce che la transizione tra gli stati di visibilità possa essere regolare anziché essere brusca.

.hide {
visibility: hidden;
}

Display

La displayproprietà nasconde l’elemento nel vero senso della parola. L’impostazione displayper noneassicurarsi che il modello box non venga generato affatto. Usando questa proprietà, non c’è spazio vuoto lasciato quando l’elemento è stato nascosto. Non solo, ma qualsiasi interazione diretta con l’utente non sarà possibile finché displayè impostato su none. Inoltre, gli screen reader non leggeranno neanche il contenuto dell’elemento. È come se l’elemento non esistesse.

Anche tutti i discendenti del nostro elemento saranno nascosti. Questa proprietà non può essere animata, quindi la transizione tra i vari stati sarà sempre brusca.

Nota, l’elemento è ancora accessibile tramite il DOM. Sarai in grado di manipolarlo proprio come con qualsiasi altro elemento.

.hide {
display: none;
}

Posizione

Supponiamo di avere un elemento con cui vorresti interagire ma non vuoi che influisca sul layout della tua pagina web. Nessuna proprietà fino a questo punto è in grado di gestire correttamente questa situazione. Una cosa che puoi fare in questa situazione è spostare l’elemento fuori dal viewport. In questo modo non influirà sul layout e sarà comunque utilizzabile. Ecco il CSS per farlo:

.hide {
position: absolute;
top: -9999px;
left: -9999px;
}

Clip-path

Un altro modo per nascondere gli elementi è ritagliarli. In precedenza, questo poteva essere fatto con la clipp path ma che è stata deprecata a favore di una proprietà migliore chiamata clip-path. Nitish Kumar ha recentemente introdotto la clip-path proprietà qui su SitePoint, quindi sentitevi liberi di controllarla per un uso più avanzato della proprietà!
Tieni presente che la clip-path proprietà utilizzata di seguito non è ancora completamente supportata in IE o Edge . Se si utilizzano file SVG esterni per il proprio clip-path supporto, il supporto è ancora più limitato (che non si applica di seguito) . La clip-path proprietà utilizzata per nascondere un elemento è simile al seguente:

.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

Leave a Reply

Rispettiamo la tua privacy!

Su questo sito utilizziamo strumenti nostri o di terze parti che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie sono normalmente usati per permettere al sito di funzionare correttamente (cookie tecnici), per generare statistiche di uso/navigazione (cookie statistici). Abilitando questi cookie, ci aiuti ad offrirti una esperienza migliore con noi.

Privacy & Cookie Policy