From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/visibility/index.html | 168 ++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 files/pt-br/web/css/visibility/index.html (limited to 'files/pt-br/web/css/visibility') diff --git a/files/pt-br/web/css/visibility/index.html b/files/pt-br/web/css/visibility/index.html new file mode 100644 index 0000000000..a0bdbdc31f --- /dev/null +++ b/files/pt-br/web/css/visibility/index.html @@ -0,0 +1,168 @@ +--- +title: visibility +slug: Web/CSS/visibility +translation_of: Web/CSS/visibility +--- +
{{CSSRef}}
+ +

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 {{HTMLElement("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 {{cssxref("display")}}  como none em vez de usar visibility.

+
+ +

{{cssinfo}}

+ +

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 {{HTMLElement("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 {{Cssxref("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

+ +
{{csssyntax}}
+ +

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

{{EmbedLiveSample('Basic_example')}}

+ +

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

{{EmbedLiveSample('Table_example')}}

+ +

Notas

+ + + +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentários
{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}{{Spec2('CSS3 Flexbox')}}Defines the collapse value as it applies to flex items.
{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}{{Spec2('CSS3 Box')}}Nenhuma alteração.
{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}{{Spec2('CSS3 Transitions')}}Defines visibility as animatable.
{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}{{Spec2('CSS2.1')}}Definição inicial.
+ +

Compatibilidade entre browsers

+ +

 

+ + + +

{{Compat("css.properties.visibility")}}

+ +

 

-- cgit v1.2.3-54-g00ecf