Puoi nascondere un elemento nei CSS usando le proprietà CSS display: none o visibility: hidden. display: none rimuove l’intero elemento dalla pagina e influenza il layout della pagina. visibility: hidden nasconde l’elemento mantenendo lo stesso spazio.
Puoi incontrare uno scenario dove vuoi nascondere un elemento sulla pagina web. Per esempio, potresti avere un blocco di testo che vuoi che rimanga nascosto e appaia quando un utente fa clic su un pulsante.
CSS Hide Element
Ci sono due approcci principali per nascondere un elemento nei CSS, usando:
- La visualizzazione: attributo none.
- La visibilità: attributo hidden.
Il primo approccio può influenzare il layout della tua pagina web. Ma il secondo metodo è comunque popolare.
CSS Hide Element: display
- Career Karma ti abbina ai migliori bootcamp tecnologici
- Ottieni esclusive borse di studio e corsi di preparazione
La proprietà display controlla come un elemento viene visualizzato in una pagina web. Ogni elemento in un documento HTML ha un valore predefinito per la proprietà display, sebbene questo valore dipenda dall’elemento. Per la maggior parte degli elementi, il valore predefinito di display è o block o inline.
Se non vuoi che un elemento venga visualizzato affatto, puoi impostare il valore della proprietà display su none.
La seguente regola di stile nasconde un elemento su una pagina web:
display: none;
Quando imposti il valore di display su none, l’elemento interessato scomparirà. Questo significa che l’elemento non occuperà più spazio sulla pagina web.
display: none
Esempio
Supponiamo di stare progettando una pagina web About Us per un club di cucina locale. Nel nostro progetto iniziale, abbiamo aggiunto un’immagine di una torta alla pagina. Ora il club vuole che nascondiamo l’immagine perché non sono sicuri del design finale.
Potremmo nascondere l’immagine nella pagina usando il seguente codice:
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: none;}<style>
Clicca il 
Abbiamo definito tre elementi all’interno di un tag HTML <div>. L’elemento <h1> è usato per creare la nostra intestazione e contiene il testo About Us. Il nostro elemento HTML <img> crea un’immagine di una torta, che è alta 200px e larga 200px. L’elemento <p> contiene una breve descrizione del locale.
Nel nostro codice CSS, usiamo il selettore “img” per selezionare tutti i tag immagine della nostra pagina. Questa regola imposta la proprietà display di tutti i tag <img> su none. O, in altre parole, la regola di stile nasconde la nostra immagine.
Anche se la nostra immagine è nascosta, esiste ancora sulla nostra pagina web. Se vogliamo riportare la nostra immagine, possiamo cancellare lo stile display:none;. Oppure possiamo specificare un altro stile di visualizzazione (come block o inline).
Si potrebbe definire questa regola come un attributo HTML inline:
<img style=”display: none;” src=”https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80″ height=”200″ width=”200″ />
Per saperne di più sulle proprietà inline HTML e CSS, consultate la nostra guida inline CSS.
Elemento Hide CSS: visibility
La proprietà visibility CSS è usata per controllare se un elemento è visibile sulla pagina web.
Di default, il valore della proprietà visibility è visible. Tuttavia, se volete rendere un’immagine invisibile, potete impostare il valore di visibility su hidden.
La seguente regola di stile imposta la visibilità di un elemento su hidden:
visibility: hidden;
Torniamo all’esempio del club di cucina di prima. Supponiamo di voler nascondere l’immagine della torta sulla nostra pagina web About Us. Potremmo farlo usando questo codice:
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: visibility;}<style>
Clicca il
Il nostro codice HTML è lo stesso in questo esempio. Nel nostro file CSS, invece di usare la proprietà display, abbiamo usato visibility per nascondere il nostro elemento. Come potete vedere sopra, la nostra immagine è stata nascosta dalla pagina web.
Mentre la nostra immagine è sparita, ora c’è uno spazio tra la nostra intestazione e il nostro paragrafo dove l’immagine sarebbe stata posizionata. Questa è una caratteristica dello stile visibility: hidden;. Lo spazio dell’elemento originale è ancora mantenuto dalla pagina web. Ma l’elemento è nascosto.
Visibilità CSS vs. Display
I due metodi che abbiamo discusso per nascondere un elemento sembrano essere gli stessi, ma c’è una differenza tra i due.
La regola display: none rimuove un elemento da un documento HTML. Mentre il codice per l’elemento nascosto è ancora presente, l’elemento stesso non sarà visualizzato.
La regola visibility: hidden, d’altra parte, nasconde un elemento, ma l’elemento continuerà ad occupare spazio nella pagina web. Se vuoi nascondere un elemento ma mantenere lo spazio di quell’elemento sulla pagina web, usare la regola visibility: hidden; è meglio.
Conclusione
La regola display: none rimuove un elemento da un documento e lo nasconde alla vista. La regola visibility: hidden nasconde un elemento in un documento e lascia vuoto lo spazio in cui l’elemento sarebbe apparso.
0 commenti