CSS visibility
La proprietà CSS visibility (CSS) controlla la visibilità degli elementi
La proprietà visibility determina se un elemento è visibile o nascosto sulla pagina, mantenendo però lo spazio occupato dall'elemento nel layout quando nascosto. A differenza di display: none, l'elemento nascosto con visibility: hidden occupa ancora spazio.
Sintassi
Significato dei valori principali:
visible: Valore predefinito. L'elemento è visibile.
hidden: L'elemento è nascosto, ma continua a occupare spazio nel layout.
collapse: Usato principalmente con righe o colonne di tabelle, nasconde l'elemento e rimuove lo spazio che occupava.
inherit: L'elemento eredita il valore della proprietà
visibilitydal suo elemento genitore.
Esempio proprietà: visibility
Codice Esempio: visibility
.visibility-container {
display: flex;
gap: 15px;
font-size: 18px;
}.box {
width: 100px;
height: 100px;
border: 2px solid #50a14f;
padding: 10px;
color: white;
text-align: center;
line-height: 80px;
font-weight: bold;
border-radius: 8px;
}.visible {
background-color: #50a14f;
visibility: visible;
}.hidden {
background-color: #f08a5d;
visibility: hidden;
}table {
border: 2px solid #50a14f;
border-collapse: collapse;
}td {border: 1px solid #333;
padding: 10px 20px;
text-align: center;
}.collapsed-row {
visibility: collapse;
}
Contenuto Esempio: visibility
Esempio di utilizzo di visibility
In questo esempio, il primo box è visibile, il secondo è nascosto ma occupa spazio, il terzo è visibile. La prima tabella utilizza collapse (funziona su elementi tabellari):
Tabella con visibility: collapse (nasconde riga e spazio):
| Riga 1, Col 1 | Riga 1, Col 2 |
| Riga 2, Col 1 | Riga 2, Col 2 |
| Riga 3, Col 1 | Riga 3, Col 2 |
Tabella con visibility: visible (visibile riga e spazio):
| Riga 1, Col 1 | Riga 1, Col 2 |
| Riga 2, Col 1 | Riga 2, Col 2 |
| Riga 3, Col 1 | Riga 3, Col 2 |
CSS e HTML per l'esempio di visibility:
<style>
.visibility-container {
display: flex;
gap: 15px;
font-size: 18px;
}
.box {
width: 100px;
height: 100px;
border: 2px solid #50a14f;
padding: 10px;
color: white;
text-align: center;
line-height: 80px;
font-weight: bold;
border-radius: 8px;
}
.visible {
background-color: #50a14f;
visibility: visible;
}
.hidden {
background-color: #f08a5d;
visibility: hidden;
}
table {
border: 2px solid #50a14f;
border-collapse: collapse;
}
td {
border: 1px solid #333;
padding: 10px 20px;
text-align: center;
}
.collapsed-row {
visibility: collapse;
}
</style>
<div class="visibility-container">
<div class="box visible">Visibile</div>
<div class="box hidden">Nascosto</div>
<div class="box visible">Visibile</div>
</div>
<table>
<tr>
<td>Riga 1, Col 1</td>
<td>Riga 1, Col 2</td>
</tr>
<tr class="collapsed-row">
<td>Riga 2, Col 1</td>
<td>Riga 2, Col 2</td>
</tr>
<tr>
<td>Riga 3, Col 1</td>
<td>Riga 3, Col 2</td>
</tr>
</table>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 18.97.14.88
