visibility

La propietat CSS visibility pot mostrar o ocultar un element sense afectar el disseny d'un document (és a dir, es crea espai per a elements, independentment de si són visibles o no). La propietat també pot ocultar files o columnes en un <table>.

/* Valors de les paraules claus */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Valors globals */
visibility: inherit;
visibility: initial;
visibility: unset;

Sintaxi

La propietat visibility s'especifica com un dels valors de les paraules clau que es detallen a continuació.

Valors

visible

La caixa de l'element és visible.

hidden

La caixa de l'element és invisible (no dibuixada), però encara afecta el disseny normal. Els descendents de l'element seran visibles si tenen visibility establert a visible. L'element no pot rebre el focus (com ara quan navegueu pels índexs de pestanyes).

collapse

Per <table> files, columnes, grups de columnes i grups de files, les files o columnes estan ocults i l'espai que han ocupat s'elimina (com si display: none s'apliqués a la columna/fila de la taula). Tanmateix, la grandària d'altres files i columnes encara es calcula com si les cel·les de les files o columnes col·lapsades estiguessin presents. Aquest valor permet l'eliminació ràpida d'una fila o columna d'una taula sense forçar el recàlcul d'amplades i alçades per a tota la taula. Per als elements XUL, la grandària calculada de l'element sempre és zero, independentment d'altres estils que normalment afectarien la grandària, tot i que els marges encara tenen efecte. Per a altres elements, collapse es tracta igual que hidden.

Sintaxi formal

visible | hidden | collapse

Interpolació

Els valors de visibilitat són interpolables entre visible i no visible. Per tant, un dels valors d'inici o de finalització ha de ser visible o no es pot produir interpolació. El valor s'interpola com un pas discret, on els valors de la funció de temporització entre 0 i 1 es corresponen amb visible i altres valors de la funció de temporització (que només es produeixen a l'inici/final de la transició o com a resultat de funcions cubic-bezier() amb valors y fora de [0, 1]) aplicat fins a l'extrem més proper.

Exemples

Exemple bàsic

HTML

<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>

CSS

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

Exemple de taula

HTML

<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

CSS

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

Notes

• Suport per visibility: collapse és inexistent o parcialment incorrecte en alguns navegadors moderns. Pot ser que no es tracti correctament com visibility: hidden en elements diferents de les files i columnes de la taula.
• visibility: collapse pot canviar el disseny d'una taula si la taula té taules niades dins de les cel·les que estan col·lapsades, tret que visibility: visible s'especifiqui explícitament en les taules niades.

Especificacions

Navegadors compatibles

[1] Chrome i Safari tractant visibility: collapse com hidden, deixant un buit blanc; només ho suporten <tr>, <thead>, <tbody> i <tfoot>, però no als elements <col> i <colgroup>.

[2] Firefox no amaga les vores quan s'amaguen els elements <col> i <colgroup> si està establert border-collapse: collapse.

[3] A Opera, visibility: collapse funciona en elements de taula, però no sembla amagar un <tfoot> si és adjacent a un <tbody> visible.

[4] Internet Explorer no admet visibility: initial. Fins a IE7, els descendents d'elements hidden seguiran sent invisibles fins i tot si tenen visibility definida com visible.