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, 0 insertions, 242 deletions
diff --git a/files/ca/web/css/visibility/index.html b/files/ca/web/css/visibility/index.html deleted file mode 100644 index 97fd525df0..0000000000 --- a/files/ca/web/css/visibility/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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> |