recursal/MDN huggingface dataset:
isolation
=========

A propriedade CSS **`isolation`** define se o elemento deve criar um novo stacking context.


```css
/\* Keyword values \*/
isolation: auto;
isolation: isolate;

/\* Global values \*/
isolation: inherit;
isolation: initial;
isolation: unset;
```


É especialmente útil em conjunto com `background-blend-mode` que mistura os fundos em um dado stacking context: ela permite isolar grupos de elementos dos seus fundos e misturar as suas cores.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |

Sintaxe
-------

Uma das palavras-chave listadas abaixo.

### Valores

`auto`

É uma palavra-chave indicando que um novo stacking context deve ser criado somente se uma das propriedades aplicadas ao elemento requererem.

`isolate`

É uma palavra-chave indicando que um novo stacking context deve ser criado.

### Sintaxe formal
```

isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     | (en-US)  
  isolate    
  
```

Exemplos
--------


```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```



```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

Especificações
--------------

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode`
::backdrop
==========

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Cada elemento na camada superior de uma pilha de elementos possui um `pseudo-elemento` *`::backdrop`*. Esse pseudo-elemento é uma caixa renderizada imediatamente abaixo do elemento superior (e acima do elemento logo abaixo desse elemento, caso exista algum), dentro da camada superior.

**Nota:** O pseudo-elemento `::backdrop` pode ser utilizado para criar um pano de fundo que esconde o conteúdo por trás de um elemento posicionado no topo de uma pilha de elementos. Por exemplo, para o elemento que é mostrado em tela cheia conforme descrito nessa especificação.

Ele não herda de nenhum elemento e também não é herdado. Não há restrição de propriedades que podem ser aplicadas a esse pseudo-elemento.

Especificações
--------------

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

Copatibilidade com navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `:fullscreen` (en-US)
* `<dialog>`
@charset
========

`<string>` (en-US)Resumo
------

A regra `@charset` especifica a codificação de caracteres utilizada na folha de estilo. Deve ser o primeiro elemento na folha de estilo e não ser precedida de qualquer caráter; uma vez que não é uma declaração aninhada, ele não pode ser usado dentro de um grupo condicional de regras. Se vários `@charset` são definidos, apenas o primeiro é usado, e não pode ser usado dentro de um atributo de estilo em um elemento HTML ou dentro do elemento `<style>`, onde o conjunto de caracteres da página HTML é relevante.

Esta regra at (at-rule) é útil quando se usa caracteres não ASCII em algumas propriedades CSS, como conteúdo.

Como existem várias maneiras de definir a codificação de caracteres em uma folha de estilo, o navegador vai tentar os seguintes métodos na seguinte ordem (e parar assim que um produzir um resultado):

1. O valor do carácter de ordem de byte Unicode colocado no início do arquivo.
2. O valor dado pelo atributo `charset` do `Content-Type:` cabeçalho HTTP ou o equivalente no protocolo usado para servir a folha de estilo.
3. O `@charset` CSS.
4. Use a codificação de caracteres definidos pelo documento referente: o atributo charset do elemento `<link>`. Este método é obsoleto em HTML5 e não deve ser utilizado.
5. Assume que o documento é UTF-8.
Sintaxe
-------
```

  @charset charset;
```


onde :

*charset*

É uma `<string>` (en-US) denotando a codificação de caracteres a ser usado. Ele deve ser o nome de uma codificação de caracteres segura para a Web definido no registro IANA. Se vários nomes estão associados com uma codificação, apenas um é marcado como *preferido* e assim ser utilizado.

Exemplos
--------


```css
@charset "UTF-8"; /\* Define a codificação da folha de estilo para Unicode UTF-8 \*/
@charset 'iso-8859-15'; /\* Define a codificação da folha de estilo para Latin-9 (línguas da Europa Ocidental, com sinal de euro) \*/
 @charset "UTF-8"; /\* Inválido, há um caracter (espaço) antes da regra \*/
@charset UTF-8; /\* Inválido, sem ‘ ou ", o conjunto de caracteres não é uma <string> (en-US) CSS \*/
```

Especificações
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

Compatibilidade de navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
white-space
===========

Resumo
------

A propriedade CSS white-space é usada para descrever como os espaços em branco dentro dos elementos são manipulados.

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Sintaxe
-------
```

Formal syntax: 
```
white-space =   
  normal        | (en-US)  
  pre           | (en-US)  
  nowrap        | (en-US)  
  pre-wrap      | (en-US)  
  break-spaces  | (en-US)  
  pre-line        
  
```


```
```

white-space: normal
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line

white-space: inherit
```

### Valores

`normal`

Sequências de espaços em branco são recolhidas. Caracteres de nova linha no código são tratados como outros espaços em branco. As linhas quebram conforme a necessidade para preencher as linhas das caixas (boxes).

`nowrap`

Recolhe os espaços em branco como no normal, mas suprime as quebras de linha (quebra de texto) no texto.

`pre`

Sequências de espaço em branco são preservadas, linhas são quebradas apenas em carateres de nova linha no código e em elementos `<br>`.

`pre-wrap`

Sequências de espaço em branco são preservadas. Linhas são quebradas em caracteres de nova linha, em `<br>` e quando necessário para preencher as linhas das caixas (boxes).

`pre-line`

Sequências de espaços em branco são recolhidas. Linhas são quebradas em caracteres de nova linha, em `<br>` e quando necessário para preencher as linhas das caixas (boxes).

A tabela a seguir resume o comportamento dos valores para white-space:

|  | Novas linhas | Espaços e Tabulações (tabs) | Quebra de texto |
| --- | --- | --- | --- |
| `normal` | Recolhido | Recolhido | Quebra |
| `nowrap` | Recolhido | Recolhido | Sem quebra |
| `pre` | Preservado | Preservado | Sem quebra |
| `pre-wrap` | Preservado | Preservado | Quebra |
| `pre-line` | Preservado | Recolhido | Quebra |

Exemplos
--------


```css
code {
  white-space: pre;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Text Module Level 3 # white-space-property |

Compatibilidade de Navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

 [1] Internet Explorer 5.5+ suporta `word-wrap``: break-word;`
 O código a seguir permite quebras de linhas dentro de elementos pre:


```css
pre {
  word-wrap: break-word; /\* IE 5.5-7 \*/
  white-space: -moz-pre-wrap; /\* Firefox 1.0-2.0 \*/
  white-space: pre-wrap; /\* current browsers \*/
}
```
inline-size
===========

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A propriedade do CSS **`inline-size`** define o tamanho horizontal e vertical de um elemento bloco. Ele é correspondente a cada propriedade `width` ou a `height`, dependendo do valor de `writing-mode`.


```css
/\* <length> values \*/
inline-size: 300px;
inline-size: 25em;

/\* <percentage> values \*/
inline-size: 75%;

/\* Keyword values \*/
inline-size: 25em border-box;
inline-size: 75% content-box;
inline-size: max-content;
inline-size: min-content;
inline-size: available;
inline-size: fit-content;
inline-size: auto;

/\* Global values \*/
inline-size: inherit;
inline-size: initial;
inline-size: unset;
```


Se o writing mode é orientado verticalmente, o valor de `inline-size` relaciona a altura do elemento; ao contrário, está relacionado a largura do elemento. A propriedade relacionada é a `block-size`, no qual define a outra dimensão do elemento.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | same as `width` and `height` |
| Inherited | não |
| Percentages | inline-size of containing block |
| Computed value | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

Sintaxe
-------

### Valores

A propriedade `inline-size` aproveita os mesmos valores que as propriedades `width` e `height`.

### Sintaxe formal
```

inline-size =   
  <'width'>    
  
```

Exemplo
-------

### HTML


```html
<p class="exampleText">Texto de Exemplo</p>
```

### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* As propriedades físicas mapeadas: `width` e `height`
* `writing-mode`
:active
=======

A pseudo-classe css <strong> :active </strong>
Esse estilo pode ser substituído por qualquer outra pseudo-classe relacionada ao link, ou seja, `:link`, `:hover` e `:visited`, aparecendo nas regras subseqüentes. Para estilizar apropriadamente os links, você precisa colocar a regra `:active` depois de todas as outras regras relacionadas ao link, conforme definido pela ordem LVHA. `:link` — `:visited` — `:hover` — `:active`.

**Nota:** Em sistemas com mouses com vários botões, o CSS 3 especifica que a pseudo-classe :active só deve ser aplicada ao botão principal em mouses destros, este é tipicamente o botão mais à esquerda.

Exemplo
-------

### HTML


```html
<body>
  <h1>:active CSS selector example</h1>
  <p>
    The following link will turn lime during the time you click it and release
    the click: <a href="#">Mozilla Developer Network</a>.
  </p>
</body>
```

### CSS


```css
body {
  background-color: #ffffc9;
}
a:link {
  color: blue;
} /\* links não visitados \*/
a:visited {
  color: purple;
} /\* links visitados \*/
a:hover {
  font-weight: bold;
} /\* user hovers \*/
a:active {
  color: lime;
} /\* links ativos \*/
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-pseudo |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Link-related pseudo-classes: `:link`, `:visited`, and `:hover`.
<display-listitem>
==================

O `list-item` palavra-chave faz com que o elemento gere um`::marker` pseudoelemento com o conteúdo especificado por sua `list-style` (en-US) propriedades (por exemplo, um marcador) junto com uma caixa principal do tipo especificado para seu próprio conteúdo.

Sintaxe
-------

Um valor único de `list-item` fará com que o elemento se comporte como um item da lista. Isso pode ser usado junto com`list-style-type` (en-US) e `list-style-position` (en-US).

`list-item` também pode ser combinado com qualquer `<display-outside>` palavra-chave e o `flow` ou `flow-root` `<display-inside>` palavras-chave.

**Nota:**: Nos navegadores que suportam a sintaxe de dois valores, se nenhum valor interno for especificado, o padrão será `flow`. Se nenhum valor externo for especificado, a caixa principal terá um tipo de exibição externo de`block`.

### Sintaxe formal
```

<display-listitem> =   
  <display-outside>? (en-US)     && (en-US)  
  [ (en-US) flow | (en-US) flow-root ] (en-US)? (en-US)  && (en-US)  
  list-item                
  
<display-outside> =   
  block   | (en-US)  
  inline  | (en-US)  
  run-in    
  
```

Exemplo
-------

### HTML


```html
<div class="fake-list">I will display as a list item</div>
```

### CSS


```css
.fake-list {
  display: list-item;
  list-style-position: inside;
}
```

### Resultado

Compatibilidade com navegadores
-------------------------------

### Suporte delist-item

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
<number>
========

O tipo de dado CSS **`<number>`** representa um número, sendo esse ou um inteiro ou um componente fracional.

Sintaxe
-------

A sintaxe de `<number>` estende a sintaxe de `<integer>` (en-US). Um valor fracional é representado por um **`.`** seguido de um ou mais dígitos decimais e pode ser anexado a número inteiro. Não existe uma unidade associada aos números.

Interpolação
------------

Quando animado, os valores de `<number>` são interpolados como números reais e de ponto flutuante. A velocidade da interpolação é determinada pelo tempo da função (en-US) associada à animação.

Exemplos
--------

### Números Válidos


```css
12          Um <integer> puro é também um <number>.
4.01        Fração positiva
-456.8      Fração negativa
0.0         Zero
+0.0        Zero inciado por um +
-0.0        Zero iniciado por um -
.60         Um número fracional sem ser iniciado por zero
10e3        Notação científica
-3.4e-2     Notação científica complexa
```

### Números Inválidos


```css
12.         Números decimais devem ser seguidos por pelo menos um dígito.
+-12.2      Só um sinal +/- é permitido.
12.1.1      Só um ponto decimal é permitido.
```

Especificações
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # numbers |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<integer>` (en-US)
Modelo de layout
================

O modelo de layout CSS, às vezes abreviado por *layout*, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:

* *Block layout*, designed for laying out documents. The block layout contains document-centric features, like the ability to *float* elements or to lay them out over *multiple columns* (en-US).
* *Inline layout*, designed for laying out text.
* *Table layout* (en-US), designed for laying out tables.
* *Positioned layout*, designed for positioning elements without much interaction with other elements.
* *Flexible box layout*, designed for laying out complex pages that can be resized smoothly.
* *Grid layout*, designed for laying out elements relative to a fixed grid.

**Nota:** Not all CSS properties apply to all *layout modes*. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.
background-origin
=================

A propriedade CSS **`background-origin`** define *a área de posicionamento do plano de fundo*, isto é, a ponto de origem de uma imagem específica usando a propriedade `background-image` (en-US).

Experimente
-----------

Note que `background-origin` é ignorado quando `background-attachment` é `fixed`.

**Nota:** A taquigrafia `background` redefine o valor desta propriedade para seu valor inicial se esta não foi específicada.

Sintaxe
-------


```css
/\* Valores chave \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/\* Valores globais \*/
background-origin: inherit;
background-origin: initial;
background-origin: unset;
```


A propriedade `background-origin` é especificada por uma chave de valores listadas abaixo.

### Valores

`border-box`

O plano de fundo é posicionado relativamente nas bordas do elemento.

`padding-box`

O plano de fundo é posicionado relativamente no espaçamento do elemento.

`content-box`

O plano de fundo é posicionado relativamente para o conteúdo do elemento.

### Sintaxe formal
```

background-origin =   
  <visual-box># (en-US)    
  
<visual-box> =   
  content-box  | (en-US)  
  padding-box  | (en-US)  
  border-box     
  
```

Exemplos
--------


```css
.exemplo {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```



```css
#exemplo2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```



```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-origin |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `background-clip`
scroll-behavior
===============

A propriedade css **`scroll-behavior`** especifica o comportamento de rolagem para uma caixa de scrolling, quando a rolagem acontece devido às APIs do CSSOM. Qualquer outro scroll, aqueles que são executados pelo usuário, não são afetados por esta propriedade. Quando esta propriedade é especificada no elemento raiz, ela se aplica à viewport.

User agents podem ignorar essa propriedade.


```css
/\* Valores das palavras-chave \*/
scroll-behavior: auto;
scroll-behavior: smooth;

/\* Valores globais \*/
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
```


Note que qualquer outro scroll, tem essa tal performace para o usuario, essa propriedade não é afetada. Quando esta propriedade é especificada na raiz do elemento então aplicamos na instancia do viewport.

Os usuarios que agem com está propriedade pode ignora-lá.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | scrolling boxes |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |

Sintaxe
-------

O `scroll-behavior` é uma propriedade específica, com um valor de uma palavra-chave listada abaixo.

### Valores

`auto`

A caixa de rolagem rola instantaneamente.

`smooth`

A caixa de scroll rola de forma suave usando uma função de temporização definida pelo usuário em um período de tempo. Os agentes do usuário devem seguir as convenções da plataforma, se houver.

### Sintaxe formal
```

scroll-behavior =   
  auto    | (en-US)  
  smooth    
  
```

Exemplo
-------

### HTML


```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>
```

### CSS


```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```

### Saída

Especificações
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

Compatibilidade com navegador
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
height
======

Sumário
-------

A propriedade `height` do CSS determina a altura da área do conteúdo de um elemento. A área de conteúdo (en-US) consiste no `padding`, `margin` e `border` do elemento.

As propriedades `min-height` e `max-height` (en-US) sobrepõem a `height`.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | não |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| Computed value | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

Sintaxe
-------
```

Sintaxe formal: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | complex | auto
```


```
height: auto     /* auto keyword */

height: 120px    /* <length> values */
height: 10em

height: 75%      /* <percentage> values */

height: inherit
```

### Valores

`<length>`

Veja `<length>` (en-US) para unidades disponíveis.

`<percentage>`

Especificada como uma `<percentage>` (en-US) da altura do conteúdo do bloco.

`border-box` 
Experimental

Se presente, o último `<length>` (en-US) ou `<percentage>` (en-US) é aplicado a caixa de borda do elemento.

`content-box` 
Experimental

Se presente, o último `<length>` (en-US) ou `<percentage>` (en-US) é aplicado a caixa de conteúdo do elemento.

`auto`

O navegador calculará a altura do conteúdo especificado.

`max-content` 
Experimental

A altura máxima intrínseca.

`min-content` 
Experimental

A altura mínima intrínseca.

`available` 
Experimental

Altura da caixa menos margem vertical, borda e padding.

`fit-content` 
Experimental

O maior de:

* a altura mínima intrínseca
* a menor entre a altura intrínseca preferida e a altura disponível

Exemplos
--------

### HTML


```html
<div id="red">
  <span>I'm 50 pixels tall.</span>
</div>
<div id="green">
  <span>I'm 25 pixels tall.</span>
</div>
<div id="parent">
  <div id="child">
    <span>I'm half the height of my parent.</span>
  </div>
</div>
```

### CSS


```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* box model (en-US), `width`, `box-sizing`, `min-height`, `max-height` (en-US)