diff options
Diffstat (limited to 'files/ca/web/css/visibility/index.html')
| -rw-r--r-- | files/ca/web/css/visibility/index.html | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/files/ca/web/css/visibility/index.html b/files/ca/web/css/visibility/index.html new file mode 100644 index 0000000000..ce3e835ec9 --- /dev/null +++ b/files/ca/web/css/visibility/index.html @@ -0,0 +1,242 @@ +--- +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"><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> +</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"><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></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> |