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;

Nota: Per ocultar un element i eliminar-lo del disseny del document, establiu la propietat display a none en comptes d'utilitzar visibility.

Initial valuevisible
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typea visibility
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

Especificació Estat Comentari
CSS Flexible Box Layout Module
The definition of 'visibility' in that specification.		 Candidate Recommendation Defineix el valor de collapse tal com s'aplica als elements flex.
CSS Basic Box Model
The definition of 'visibility' in that specification.		 Working Draft No hi ha cap canvi.
CSS Transitions
The definition of 'visibility' in that specification.		 Working Draft Defineix visibility com animable.
CSS Level 2 (Revision 1)
The definition of 'visibility' in that specification.		 Recommendation Definició inicial.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0[1] (Yes) 1.0 (1.7 or earlier)[2] 4.0[4] 4.0[3] 1.0[1]
col.lapse 62 (Yes) (Yes) (Yes) (Yes) No support
Descripció Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.0 1.0[1] (Yes) 1.0 (1.0)[2] 6.0 6.0[3] 1.0[1]
col.lapse No support (Yes) (Yes) (Yes) (Yes) (Yes) No support

[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.

Related Topics