path: root/files/ca/web/css/visibility/index.html

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

<p>La propietat CSS <strong><code>visibility</code></strong> 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")}}.</p>

<pre class="brush: css no-line-numbers">/* Valors de les paraules claus */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Valors globals */
visibility: inherit;
visibility: initial;
visibility: unset;
</pre>

<div class="note">
<p><strong>Nota:</strong> Per ocultar un element <em><strong>i eliminar-lo del disseny del document</strong></em>, establiu la propietat {{cssxref("display")}} a <code>none</code> en comptes d'utilitzar <code>visibility</code>.</p>
</div>

<p>{{cssinfo}}</p>

<h2 id="Sintaxi">Sintaxi</h2>

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

<h3 id="Valors">Valors</h3>

<dl>
 <dt><code>visible</code></dt>
 <dd>La caixa de l'element és visible.</dd>
 <dt><code>hidden</code></dt>
 <dd>La caixa de l'element és invisible (no dibuixada), però encara afecta el disseny normal. Els descendents de l'element seran visibles si tenen <code>visibility</code> establert a <code>visible</code>. L'element no pot rebre el focus (com ara quan navegueu pels <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">índexs de pestanyes</a>).</dd>
 <dt><code>collapse</code></dt>
 <dd>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 <code>{{Cssxref("display")}}: none</code> 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, <code>collapse</code> es tracta igual que <code>hidden</code>.</dd>
</dl>

<h3 id="Sintaxi_formal">Sintaxi formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Interpolació">Interpolació</h2>

<p>Els valors de visibilitat són interpolables entre <em>visible</em> i <em>no visible</em>. Per tant, un dels valors d'inici o de finalització ha de ser <code>visible</code> o no es pot produir interpolació. El valor s'interpola com un pas discret, on els valors de la funció de temporització entre <code>0</code> i <code>1</code> es corresponen amb <code class="css">visible</code> 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 <code class="css">cubic-bezier()</code> amb valors y fora de [0, 1]) aplicat fins a l'extrem més proper.</p>

<h2 id="Exemples">Exemples</h2>

<h3 id="Exemple_bàsic">Exemple bàsic</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p class="visible"&gt;The first paragraph is visible.&lt;/p&gt;
&lt;p class="not-visible"&gt;The second paragraph is NOT visible.&lt;/p&gt;
&lt;p class="visible"&gt;The third paragraph is visible. Notice the second paragraph is still occupying space.&lt;/p&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
</pre>

<p>{{EmbedLiveSample('Basic_example')}}</p>

<h3 id="Exemple_de_taula"><span class="short_text" id="result_box" lang="ca"><span>Exemple de taula</span></span></h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;1.1&lt;/td&gt;
    &lt;td class="collapse"&gt;1.2&lt;/td&gt;
    &lt;td&gt;1.3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="collapse"&gt;
    &lt;td&gt;2.1&lt;/td&gt;
    &lt;td&gt;2.2&lt;/td&gt;
    &lt;td&gt;2.3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3.1&lt;/td&gt;
    &lt;td&gt;3.2&lt;/td&gt;
    &lt;td&gt;3.3&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
</pre>

<p>{{EmbedLiveSample('Table_example')}}</p>

<h2 id="Notes">Notes</h2>

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

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>Defineix el valor de <code>collapse</code> tal com s'aplica als elements flex.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defineix <code>visibility</code> com animable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup></td>
   <td>4.0<sup>[4]</sup></td>
   <td>4.0<sup>[3]</sup></td>
   <td>1.0<sup>[1]</sup></td>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="ca"><span>col.lapse</span></span></td>
   <td>62</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>1.0<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}<sup>[2]</sup></td>
   <td>6.0</td>
   <td>6.0<sup>[3]</sup></td>
   <td>1.0<sup>[1]</sup></td>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="ca"><span>col.lapse</span></span></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Chrome i Safari tractant <code>visibility: collapse</code> com <code>hidden</code>, 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")}}.</p>

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

<p>[3] A Opera, <code>visibility: collapse</code> funciona en elements de taula, però no sembla amagar un {{HTMLElement("tfoot")}} si és adjacent a un {{HTMLElement("tbody")}} visible.</p>

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