--- title: visibility slug: Web/CSS/visibility tags: - CSS - CSS Box Model - CSS Property - Layout - Reference - Web translation_of: Web/CSS/visibility ---
{{CSSRef}}

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 {{HTMLElement("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 {{cssxref("display")}} a none en comptes d'utilitzar visibility.

{{cssinfo}}

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 {{HTMLElement("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 {{Cssxref("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

{{csssyntax}}

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;
}

{{EmbedLiveSample('Basic_example')}}

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;
}

{{EmbedLiveSample('Table_example')}}

Notes

Especificacions

Especificació Estat Comentari
{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}} {{Spec2('CSS3 Flexbox')}} Defineix el valor de collapse tal com s'aplica als elements flex.
{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}} {{Spec2('CSS3 Box')}} No hi ha cap canvi.
{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}} {{Spec2('CSS3 Transitions')}} Defineix visibility com animable.
{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}} {{Spec2('CSS2.1')}} Definició inicial.

{{CompatibilityTable}}

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0[1] {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}}[2] 4.0[4] 4.0[3] 1.0[1]
col.lapse 62 {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatNo}}
Descripció Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.0 1.0[1] {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}}[2] 6.0 6.0[3] 1.0[1]
col.lapse {{CompatNo}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatNo}}

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

[2] Firefox no amaga les vores quan s'amaguen els elements {{HTMLElement("col")}} i {{HTMLElement("colgroup")}} si està establert border-collapse: collapse.

[3] A Opera, visibility: collapse funciona en elements de taula, però no sembla amagar un {{HTMLElement("tfoot")}} si és adjacent a un {{HTMLElement("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.