CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

visibility: visible | hidden | collapse | inherit;

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à visibility dal suo elemento genitore.


Esempio proprietà: visibility


Codice Esempio: visibility

CODE: CSSpreleva codice
  1. .visibility-container {
  2.   display: flex;
  3.   gap: 15px;
  4.   font-size: 18px;
  5. }
  6. .box {
  7.   width: 100px;
  8.   height: 100px;
  9.   border: 2px solid #50a14f;
  10.   padding: 10px;
  11.   color: white;
  12.   text-align: center;
  13.   line-height: 80px;
  14.   font-weight: bold;
  15.   border-radius: 8px;
  16. }
  17. .visible {
  18.   background-color: #50a14f;
  19.   visibility: visible;
  20. }
  21. .hidden {
  22.   background-color: #f08a5d;
  23.   visibility: hidden;
  24. }
  25. table {
  26.   border: 2px solid #50a14f;
  27.   border-collapse: collapse;
  28. }
  29. td {
  30.   border: 1px solid #333;
  31.   padding: 10px 20px;
  32.   text-align: center;
  33. }
  34. .collapsed-row {
  35.   visibility: collapse;
  36. }

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):


Visibile
Visibile

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies