Visibility in CSS

La proprietà visibility in CSS è utilizzata per controllare la visibilità di un elemento senza rimuoverlo dal flusso del documento. A differenza della proprietà display, visibility consente di nascondere o mostrare un elemento senza influenzare il layout circostante, mantenendo lo spazio occupato dall’elemento visibile o invisibile. In questa guida, esploreremo come utilizzare visibility, con esempi pratici e best practices per gestire la visibilità degli elementi nelle tue pagine web.

1. Cos’è la Proprietà visibility?

La proprietà visibility controlla se un elemento è visibile o nascosto, senza rimuoverlo dal flusso del documento. Gli elementi nascosti con visibility mantengono lo spazio che occuperebbero se fossero visibili, a differenza di display: none, che rimuove completamente l’elemento dal layout.

1.1. Valori di visibility

• visible: L’elemento è visibile. Questo è il valore predefinito.
• hidden: L’elemento è nascosto, ma lo spazio che occupa è ancora presente.
• collapse: Applicabile solo alle righe di una tabella, nasconde la riga senza lasciare spazio.
• inherit: Eredita il valore di visibility dal genitore.

1.2. Sintassi di Base

.element {
  visibility: value;
}

2. Esempi di Utilizzo di visibility

2.1. Nascondere un Elemento Senza Rimuoverlo dal Layout

Quando usi visibility: hidden, l’elemento viene nascosto ma lo spazio che occupa rimane visibile.

Esempio:

<div class="box visible">Visibile</div>
<div class="box hidden">Nascosto</div>
<div class="box visible">Visibile</div>

.box {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
  color: white;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  margin: 10px;
}

.hidden {
  visibility: hidden;
}

In questo esempio, la seconda casella .hidden non sarà visibile, ma lo spazio che occupa rimarrà, mantenendo la spaziatura tra le altre caselle.

2.2. Visibilità Inizialmente Nascosta e Rivelata Dinamicamente

Puoi inizialmente nascondere un elemento con visibility: hidden e poi rivelarlo tramite interazione o script.

Esempio:

<button onclick="showElement()">Mostra Elemento</button>
<div id="hidden-box" class="box hidden">Ora Visibile</div>

.hidden {
  visibility: hidden;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ff5722;
  color: white;
  text-align: center;
  line-height: 100px;
  margin: 10px;
}

function showElement() {
  document.getElementById("hidden-box").style.visibility = "visible";
}

In questo esempio, cliccando il pulsante, l’elemento inizialmente nascosto diventa visibile senza alterare il layout circostante.

2.3. Differenza tra visibility e display

È importante comprendere la differenza tra visibility: hidden e display: none. Mentre visibility nasconde l’elemento mantenendo lo spazio, display rimuove completamente l’elemento dal flusso del documento.

Esempio Comparativo:

<div class="box visible">Visibile</div>
<div class="box hidden">Visibile ma Nascosto</div>
<div class="box none">Rimosso dal Layout</div>
<div class="box visible">Visibile</div>

.hidden {
  visibility: hidden;
}

.none {
  display: none;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #2196f3;
  color: white;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  margin: 10px;
}

In questo esempio, .hidden mantiene lo spazio occupato nel layout, mentre .none rimuove l’elemento dal flusso, causando una differenza nella disposizione degli altri elementi.

2.4. Collapsing Rows in Tabelle

Con visibility: collapse, puoi nascondere una riga di tabella senza lasciare spazio per essa.

Esempio:

<table border="1">
  <tr class="visible-row">
    <td>Riga 1</td>
  </tr>
  <tr class="collapse-row">
    <td>Riga 2 (Collassata)</td>
  </tr>
  <tr class="visible-row">
    <td>Riga 3</td>
  </tr>
</table>

.collapse-row {
  visibility: collapse;
}

table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

td {
  padding: 10px;
}

In questo esempio, la seconda riga della tabella è collassata, nascondendo completamente la riga senza lasciare spazio.

3. Best Practices per l’Uso di visibility

3.1. Usare visibility per la Manipolazione di UI

visibility è utile per creare interfacce utente dinamiche dove gli elementi devono essere nascosti temporaneamente senza rimuoverli dal flusso del documento.

3.2. Evitare di Nascondere Elementi Cruciali

Assicurati che gli elementi nascosti con visibility non contengano informazioni cruciali per l’utente, poiché questi elementi non saranno accessibili agli screen reader.

3.3. Combinare visibility con Transizioni

Puoi combinare visibility con opacity e transition per creare effetti di apparizione e scomparsa più eleganti.

Esempio:

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}

In questo esempio, l’elemento sarà visibile dopo una transizione fluida.

3.4. Considerare l’Accessibilità

Se usi visibility: hidden per nascondere elementi, ricorda che questi non saranno accessibili agli utenti che usano screen reader. Se l’elemento contiene informazioni importanti, valuta l’uso di display: none o un altro metodo che nasconda l’elemento sia visivamente che dall’accessibilità.

4. Conclusione

La proprietà visibility in CSS offre un controllo semplice e flessibile sulla visibilità degli elementi, consentendo di nasconderli senza alterare il layout circostante. È uno strumento utile per la manipolazione dell’interfaccia utente, specialmente quando si desidera mantenere lo spazio di layout anche quando un elemento è nascosto. Utilizzando visibility in modo strategico, puoi creare interfacce più dinamiche e responsive, mantenendo un controllo preciso sull’aspetto e la funzionalità delle tue pagine web.