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 (en-US) a none en comptes d'utilitzar visibility.

Initial value (en-US)visible
Applies toall elements
Inherited (en-US)yes
Computed value (en-US)com s'especifica
Animation typea visibility

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 (en-US): 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 | (en-US) hidden | (en-US) 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.
Candidate Recommendation 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! (en-US)

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.