This translation is incomplete. Please help translate this article from English.
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
a none
en comptes d'utilitzar visibility
.
Initial value | visible |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | a visibility |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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 avisible
. 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
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,display
: nonecollapse
es tracta igual quehidden
.
Sintaxi formal
visible | hidden | 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 comvisibility: 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 quevisibility: 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. |
Working Draft | 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. |
Navegadors compatibles
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!
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
.