Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade CSS de visibilidade pode mostrar ou ocultar um elemento sem afetar o layout de um documento (ou seja, o espaço é criado para elementos independentemente de serem visíveis ou não). A propriedade também pode ocultar linhas ou colunas em um <table>.

/* palavra-chave valores */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;

Nota:  Para ocultar um elemento ou removê-lo do layout do documento, defina a propriedade display  como none em vez de usar visibility.

Initial valuevisible
Aplica-se aall elements
Inheritedyes
Midiavisual
Computed valueas specified
Animation typea visibility
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

A propriedade é especificada como um dos valores das palavras-chave listados abaixo.

Valores

visible
The element box is visible.
hidden
The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).
collapse
  • For <table> rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.
  • For XUL elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect.
  • For other elements, collapse is treated the same as hidden.

Formal syntax

visible | hidden | collapse

Interpolação

Visibility values are interpolable between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.

Exemplos

Exemplo básico

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

Table example

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

Notas

  • Support for visibility: collapse is missing or partially incorrect in some modern browsers. It may not be correctly treated like visibility: hidden on elements other than table rows and columns.
  • visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility: visible is specified explicitly on nested tables.

Especificações

Especificações Status Comentários
CSS Flexible Box Layout Module
The definition of 'visibility' in that specification.
Candidata a Recomendação Defines the collapse value as it applies to flex items.
CSS Basic Box Model
The definition of 'visibility' in that specification.
Rascunho atual Nenhuma alteração.
CSS Transitions
The definition of 'visibility' in that specification.
Rascunho atual Defines visibility as animatable.
CSS Level 2 (Revision 1)
The definition of 'visibility' in that specification.
Recomendação Definição inicial.

Compatibilidade entre browsers

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4
Notes
Full support 4
Notes
Notes Internet Explorer doesn't support visibility: initial.
Notes Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility set to visible.
Opera Full support 4Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 6Safari iOS Full support 1Samsung Internet Android Full support Yes
collapseChrome Full support 62
Notes
Full support 62
Notes
Notes Chrome treats visibility: collapse like hidden, leaving a white gap.
Notes Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
IE Full support YesOpera Full support Yes
Notes
Full support Yes
Notes
Notes In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.
Safari Full support Yes
Notes
Full support Yes
Notes
Notes Safari treats visibility: collapse like hidden, leaving a white gap.
Notes Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
WebView Android No support NoChrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Chrome treats visibility: collapse like hidden, leaving a white gap.
Notes Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge Mobile Full support YesFirefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.
Safari iOS Full support Yes
Notes
Full support Yes
Notes
Notes Safari treats visibility: collapse like hidden, leaving a white gap.
Notes Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

 

Etiquetas do documento e colaboradores

Colaboradores desta página: brunopulis
Última atualização por: brunopulis,