cursor - CSS

cursor
======

Sumário
-------

A propriedade CSS **cursor** especifica o cursor do mouse mostrado quando o ponteiro do mouse está sobre um elemento.

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

Sintaxe
-------

```css
/\* Keywords \*/
cursor: pointer;
cursor: auto;

/\* Usando URL e cordenadas \*/
cursor:
  url(cursor1.png) 4 12,
  auto;
cursor:
  url(cursor2.png) 2 2,
  pointer;

/\* Valores globais \*/
cursor: inherit;
cursor: initial;
cursor: unset;
```

### Valores

`<uri>`
Experimental

Uma url(...) ou uma lista de url(...) separada por vírgula, apontando para uma arquivo de imagem. Mais que uma `<uri>()` (en-US) pode ser fornecida como fallback, em caso de alguns tipos de imagem não ser suportado. Um fallback não-URL (um ou mais dos outros valores) **deve** estar no final da lista de fallbacks.

`<x>` `<y>`
Experimental

Coordenadas x e y opcionais. Dois números não-negativos, sem unidade e menores que 32.

`Keyword`

**Mova o mouse sobre os valores para testar:**

| Categoria | Valor CSS | Actual | Descrição |
| --- | --- | --- | --- |
| General | `auto` |  | O brower determina o cursor para ser exibido baseado no contexto atual. |
| `default` | default.gif | Cursor padrão, tipicamente uma seta. |
| `none` |  | Nenhum cursor é mostrado. |
| Links & status | `context-menu` | context-menu.png |
 Um menu de contexto está disponível sob o cursor.Somente IE 10 e
 superior implementou esta propriedade no Windows:
 [Erro do Firefox 258960](https://bugzil.la/258960).
  |
| `help` | help.gif | Indicando que ajuda está disponível. |
| `pointer` | pointer.gif | E.g. Usado quando pairando o cursor sobre links, tipicamente uma mão. |
| `progress` | progress.gif |
 O programa está processando em segundo plano, mas o o usuário ainda pode
 interagir com a interface (diferente de `wait`).
  |
| `wait` | wait.gif | O programa está ocupado (às vezes uma ampulheta ou relógio). |
| Seleção | `cell` | cell.gif | Indica que a célula pode ser selecionada. |
| `crosshair` | crosshair.gif |
 Cursor de cruz, normalmente usado para indicar seleção em uma imagem
 bitmap.
  |
| `text` | text.gif | Indica que o texto pode ser selecionado, normalmente um I maiúsculo. |
| `vertical-text` | vertical-text.gif |
 Indica que o texto vertical pode ser selecionado, normalmente um I
 maiúsculo virado de lado.
  |
| Arrastar e soltar | `alias` | alias.gif | Indicando que um alias ou atalho deve ser criado. |
| `copy` | copy.gif | Indica que algo será copiado. |
| `move` | move.gif | O item sob o mouse pode ser movido. |
| `no-drop` | no-drop.gif |
 Cursor mostrando que não é permitido largar um elemento no local
 atual.[Erro do Firefox 275173](https://bugzil.la/275173)no Windows e no Mac OS X, "sem
 soltar é o mesmo que não permitido".
  |
| `not-allowed` | not-allowed.gif | Cursor mostrando que uma ação não pode ser efetuada. |
| Resize & scrolling | `all-scroll` | all-scroll.gif |
 Cursor showing that something can be scrolled in any direction
 (panned).[Erro do Firefox 275174](https://bugzil.la/275174) on Windows, "*all-scroll*
 is the same as *move*".
  |
| `col-resize` | col-resize.gif |
 The item/column can be resized horizontally. Often rendered as arrows
 pointing left and right with a vertical bar separating.
  |
| `row-resize` | row-resize.gif |
 The item/row can be resized vertically. Often rendered as arrows
 pointing up and down with a horizontal bar separating them.
  |
| `n-resize` | Example of a resize towards the top cursor |
 Some edge is to be moved. For example, the `se-resize` cursor
 is used when the movement starts from the *south-east* corner of
 the box.
  |
| `e-resize` | Example of a resize towards the right cursor |
| `s-resize` | Example of a resize towards the bottom cursor  |
| `w-resize` | Example of a resize towards the left cursor |
| `ne-resize` | Example of a resize towards the top-right corner cursor |
| `nw-resize` | Example of a resize towards the top-left corner cursor |
| `se-resize` | Example of a resize towards the bottom-right corner cursor |
| `sw-resize` | Example of a resize towards the bottom-left corner cursor |
| `ew-resize` | 3-resize.gif | Indicates a bidirectional resize cursor. |
| `ns-resize` | 6-resize.gif |
| `nesw-resize` | 1-resize.gif |
| `nwse-resize` | 4-resize.gif |
| Zoom | `zoom-in` | zoom-in.gif | Indicates that something can be zoomed (magnified) in or out. |
| `zoom-out` | zoom-out.gif |
| Grab | `grab` | grab.gif | Indicates that something can be grabbed (dragged to be moved). |
| `grabbing` | grabbing.gif |

### Sintaxe formal
```

cursor =
  [ (en-US) [ (en-US) <url> | (en-US) <url-set> ] (en-US) [ (en-US) <x> <y> ] (en-US)? (en-US) ] (en-US)# (en-US)? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)

<url> =
  <url()>  | (en-US)
  <src()>

<x> =
  x

<y> =
  y

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

```

Exemplos
--------

```css
.foo {
  cursor: crosshair;
}

/\* use velor prefixado se "zoom-in" não for suportado \*/
.bar {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

/\* valor padrão como fallback para url() deve ser fornecido (não funciona sem) \*/
.baz {
  cursor: url(hyper.cur), auto;
}
```

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # cursor |

Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements |
| Inherited | yes |
| Computed value | as specified, but with `url` (en-US) values made absolute |
| Animation type | discrete |

Compatibilidade
---------------

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

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

* `<uri>()` (en-US)
* `pointer-events`


pointer-events - CSS

pointer-events
==============

Resumo
------

A propriedade CSS `pointer-events` permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo (en-US) do evento do mouse. Quando essa propriedade não é especificada, as mesmas características do valor `visiblePainted` é aplicada no conteúdo SVG.``

Além de indicar que este elemento não é o alvo do evento do mouse, o valor `none` instrui o evento do mouse a "passar" o elemento e tudo que está "abaixo" deste elemento.

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

Sintaxe
-------

```css
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;

pointer-events: inherit;
```

### Valores

`auto`

O elemento se comporta como se a propriedade `pointer-events` não fosse especificada. Em conteúdo SVG, esse valor e o valor `visiblePainted` tem o mesmo efeito.

`none`

O elemento nunca é o alvo (en-US) de eventos do mouse; contudo, o evento do mouse pode direcionar seus elementos descendentes se esses descendentes tiverem algum outro valor configurado no `pointer-events.` Nessas circunstâncias, os eventos do mouse vão acionar eventos de escuta em seus elementos pai conforme apropriado no seu caminho de/para o descendente, durante as fases do evento captura/borbulha. (en-US)

`visiblePainted`

Apenas SVG. O elemento pode apenas ser alvo de um evento de mouse quando a propriedade `visibility` é definida como `visible` e quando o cursor do mouse estiver sobre o interior (exemplo: "preenchimento") do elemento e a propriedade `fill` tiver um valor exceto `none`, ou quando o cursor do mouse estiver sobre o perímetro(exemplo: "linha") do elemento e a propriedade `stroke` estiver definida com um valor exceto `none`.

`visibleFill`

Apenas SVG. O elemento apenas pode ser o alvo de um evento mouse quando a propriedade `visibility` é definida como `visible` e quando o cursor do mouse estiver sobre o interior (exemplo: "preenchimento") do elemento. O valor da propriedade `fill` não afeta o processamento dos eventos.

`visibleStroke`

Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando a propriedade `visibility` é definida como `visible` e quando o cursor do mouse estiver sobre o perímetro (exemplo: "linha") do elemento. O valor da propriedade `stroke` não afeta o processamento do evento.

`visible`

Apenas SVG. O elemento pode ser o alvo de um evento de mouse quando a propriedade `visibility` é definida como `visible` e o cursor do mouse estiver sobre ou no interior (exemplo: preenchimento) ou perímetro (exemplo: linha) do elemento. O valor do `fill` e `stroke` não afeta o processamento do evento.

`painted`

Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o cursor do mouse estiver sobre o interior (exemplo: "preenchimento") do elemento e a propriedade `fill` definida com valor diferente de `none`, ou quando o cursor do mouse estiver no perímetro(exemplo: "linha") do elemento e a propriedade `stroke` definida com valor diferente de `none`. O valor da propriedade `visibility` não afeta o processamento do evento.

`fill`

Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o ponteiro estiver sobre o interior (exemplo: preenchimento) do elemento. Os valores das propriedades `fill` e `visibility` não afetam o processamento do evento.

`stroke`

Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o ponteiro estiver sobre o perímetro (exemplo: linha) do elemento. Os valores das propriedades `stroke` e `visibility` não afetam o processamento do evento.

`all`

Apenas SVG. O elemento apenas pode ser alvo do evento do mouse quando o ponteiro estiver sobre o interior (exemplo: preenchimento) ou perímetro (exemplo: linha) do elemento. Os valores das propriedades `fill`, `stroke` e `visibility` não afetam o processamento do evento.

### Sintaxe formal
```

pointer-events =
  auto            | (en-US)
  bounding-box    | (en-US)
  visiblePainted  | (en-US)
  visibleFill     | (en-US)
  visibleStroke   | (en-US)
  visible         | (en-US)
  painted         | (en-US)
  fill            | (en-US)
  stroke          | (en-US)
  all             | (en-US)
  none

```

Exemplos
--------

### Exemplo 1

```css
/\* Exemplo 1: Fazer todas img não reagir a qualquer evento de mouse tal como arrastar, passar sobre, clique etc \*/
img {
  pointer-events: none;
}
```

### Exemplo 2

Makes the link to `http://example.com` non-reactive.

```html
<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
```

```css
a[href="http://example.com"]
{
  pointer-events: none;
}
```

Notas
-----

Note que previnir um elemento de ser o alvo de eventos de mouse usando `pointer-events` não necessariamente quer dizer que o evento ouvinte do mouse desde elemento *não pode* ou *não vai se* desencadeado. Se um dos elementos filhos tem `pointer-events` explicitamente definidos para *permitir* que o filho seja o alvo do evento do mouse, então qualquer evento direcionado para este filho vai passar através do pai como o evento se deslocando ao longo da cadeia pai, e os ouvintes do evento gatilho do pai conforme o caso. Claro que qualquer atividade do mouse em um ponto da tela que é coberto pelo pai, mas não pelo filho, não será capturado por qualquer filho ou pai (isso vai "através" do pai e qualquer alvo que está abaixo).

Nós gostaríamos de fornecer um controle de textura mais refinado (do que apenas `auto` e `none`) em HTML para que partes de um elemento fizessem com que os eventos mouse "capturem" , e quando. Para nos ajudar a decidir como `pointer-events` devem ser estendido para HTML, se você tem qualquer coisa particular que você gostaria de fazer com essa propriedade, então por favor adicione na seção Caso de Uso dessa wiki page (não se preocupe sobre ficar organizado ).

Esta propriedade pode também ser usada para alcançar melhores taxas de quadros durante a rolagem. De fato, enquanto rola a página, o mouse passa sobre alguns elementos, então efeitos hover se aplicam. Contudo, esses efeitos são muitas vezes despercebidas pelo usuário e principalmente resultam em uma rolagem ruim. Aplicar `pointer-events: none` no `body` desabilita eventos de mouse incluindo hover que resultam em uma performance melhor de rolagem.

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # pointer-events-control |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |

Compatibilidade do navegador
----------------------------

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

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

* The SVG attribute `pointer-events (en-US)`
* WebKit Specs PointerEventsProperty extended for use in (X)HTML content
* 60fps scrolling using pointer-events: none


Valor Computado - CSS

Valor Computado
===============

The **computed value** of a CSS property is computed from the specified value by:

* Handling the special values `inherit` (en-US) and `initial`, and
* Doing the computation needed to reach the value described in the "Computed value" line in the property's summary.

The computation needed to reach the **computed value** for the property typically involves converting relative values (such as those in `em` units or percentages) to absolute values.

For example, if an element has specified values `font-size: 16px` and `padding-top: 2em`, then the computed value of `padding-top` is `32px` (double the font size).

However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. These relative values that remain in the computed value become absolute when the used value (en-US) is determined.

The main use of the *computed value* (other than as a step between the specified value and used value) is inheritance, including the `inherit` (en-US) keyword.

Notas
-----

The `getComputedStyle()` (en-US) DOM API returns the `resolved value` (en-US), which may either be the `computed value` or the `used value`, depending on the property.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # computed-value |

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

* CSS Reference


@page - CSS

@page
=====

Resumo
------

A regra CSS `@page` é utilizada para modificar algumas propriedades CSS quando o documento for impresso. Você não pode mudar todas as propriedades CSS com @page. Você poderá somente mudar as margens, orphans, widows, e page breaks do documento. Na tentativa de mudar outra propriedade CSS, elas serão ignoradas.

A regra CSS `@page` pode ser acessada via interface do modelo de objeto `CSSPageRule` (en-US).

**Nota:** A W3C está analisando como lidar com unidades viewport-related `<length>` (en-US), `vh`, `vw`, `vmin`, and `vmax`. Enquanto isso, não use eles junto com a regra @page.

Sintaxe
-------
```

@page :pseudo-class {
  margin:2in;
}
```

Exemplos
--------

Podemos fazer referência a vários pseudo-classes (en-US) de `@page` por exemplo.

* `:first` (en-US)
* `:left` (en-US)
* `:right` (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

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


background-size - CSS

background-size
===============

 A propriedade **`background-size`** do CSS define o tamanho da imagem de fundo do elemento.
 A imagem pode ser deixada no seu tamanho natural, estendida ou comprimida para caber no espaço disponível.

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

Espaços não cobertos por uma imagem de fundo são preenchidos com a propriedade `background-color`, e a cor do fundo ficará visível atrás das imagens de fundo que têm transparência/translucidez.

Sintaxe
-------

```css
/\* Valores de palavras-chave \*/
background-size: cover;
background-size: contain;

/\* Sintaxe de um valor \*/
/\* largura da imagem (altura torna-se 'auto') \*/
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/\* Sintaxe de dois valores \*/
/\* Primeiro valor: largura da imagem, segundo valor: altura \*/
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/\* Vários planos de fundo \*/
background-size: auto, auto; /\* Não confunda com `auto auto` \*/
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/\* Valores globais \*/
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;
```

A propriedade `background-size` é especificada de uma das seguintes maneiras:

* Usando a palavra-chave `contain` ou `cover`.
* Usando somente o valor da largura, caso em que o padrão de altura é `auto`.
* Usando ambos os valores da largura e altura, nesse caso o primeiro define a largura e o segundo define a altura.
 Cada valor pode ser `<length>` (en-US), `<percentage>` (en-US) ou `auto`.

Para especificar o tamanho de várias imagens de fundo, separe o valor de cada uma com uma vírgula.

### Valores

`contain`

 Dimensiona a imagem o máximo possível dentro do seu contêiner sem cortar ou estender a imagem.
 Se o contêiner for maior do que a imagem, resultará em uma imagem lado a lado, a menos que a propriedade `background-repeat` (en-US) esteja definida como `no-repeat`.

`cover`

 Dimensiona a imagem (enquanto preserva sua proporção) para o menor tamanho possível para caber no contêiner (ou seja: tanto a altura quanto o comprimento *cobrem* completamente o contêiner), sem deixar espaço vazio.
 Se as proporções do plano de fundo diferirem do elemento, a imagem será cortada verticalmente ou horizontalmente.

`auto`

Dimensiona a imagem de fundo na direção correspondente de forma que as proporções intrínsecas sejam mantidas.

`<length>` (en-US)

Estende a imagem na dimensão correspondente ao comprimento especificado. Valores negativos não são permitidos.

`<percentage>` (en-US)

 Estende a imagem na dimensão correspondente à porcentagem especificada da *área de posicionamento do plano de fundo*.
 A área de posicionamento do plano de fundo é determinada pelo valor de `background-origin` (por padrão, o padding box).
 No entanto, se o valor `background-attachment` do plano de fundo for `fixed`, a área de posicionamento será o viewport inteiro.
 Valores negativos não são permitidos.

### Dimensões e proporções intrínsecas

 O cálculo dos valores depende das dimensões intrínsecas da imagem (largura e altura) e das proporções intrínsecas (relação largura/altura).
 Esses atributos são os seguintes:

* Uma imagem bitmap (como a JPG) sempre possui dimensões e proporções intrínsecas.
* Uma imagem vetorial (como a SVG) não tem necessariamente dimensões intrínsecas.
 Se tiver dimensões intrínsecas horizontais e verticais, também terá proporções intrínsecas.
 Se não tiver dimensões ou tiver apenas uma dimensão, pode ou não ter proporções.
* O `<gradient>` (en-US) do CSS não têm dimensões intrínsecas ou proporções intrínsecas.
* Imagens de plano de fundo criados com a função `element()` usam as dimensões e proporções intrínsecas do elemento gerador.

**Nota:** No Gecko, imagens de fundo criadas usando a função `elemen()` são atualmente tratadas como imagens com as dimensões do elemento, ou da área de posicionamento do fundo se o elemento é SVG, com a proporção intrínseca correspondente. Este é um comportamento fora do padrão.

Com base nas dimensões e proporções intrínsecas, o tamanho renderizado da imagem de fundo é calculado da seguinte forma:

* **Se ambos os componentes de `background-size` forem especificados e não forem `auto`:** A imagem de fundo será renderizada no tamanho especificado.
* **Se o `background-size` for `contain` ou `cover`:** Embora preservando suas proporções intrínsecas, a imagem é renderizada no maior tamanho contido ou cobrindo a área de posicionamento do plano de fundo.
 Se a imagem não possui proporções intrínsecas, então ela é renderizada no tamanho da área de posicionamento do plano de fundo.
* **Se o `background-size` for `auto` ou `auto auto`:**
    + Se a imagem tiver dimensões intrínsecas horizontais e verticais, ela será renderizada nesse tamanho.
    + Se a imagem não tiver dimensões intrínsecas e proporções intrínsecas, ela será renderizada no tamanho da área de posicionamento do plano de fundo.
    + Se a imagem não tiver dimensões intrínsecas, mas tiver proporções intrínsecas, ela será renderizada como se `contain` tivesse sido especificado.
    + Se a imagem tiver apenas uma dimensão intrínseca e tiver proporções intrínsecas, ela será renderizada no tamanho correspondente a essa dimensão.
     A outra dimensão é calculada usando a dimensão especificada e as proporções intrínsecas.
    + Se a imagem tiver apenas uma dimensão intrínseca, mas não tiver proporções intrínsecas, ela será renderizada usando a dimensão especificada e a outra dimensão da área de posicionamento do plano de fundo.
**Nota:** Imagens SVG têm um atributo preserveAspectRatio que é equivalente ao `contain`; um `background-size` explícito faz com que `preserveAspectRatio` seja ignorado.
* **Se o `background-size` tem um componente `auto` e um componente não `auto`:**
    + Se a imagem tiver proporções intrínsecas, ela será ampliada para a dimensão especificada.
     A dimensão não especificada é calculada usando a dimensão especificada e as proporções intrínsecas.
    + Se a imagem não tiver proporções intrínsecas, ela será ampliada para a dimensão especificada.
     A dimensão não especificada é calculada usando a dimensão intrínseca correspondente da imagem, se houver.
     Se não houver essa dimensão intrínseca, ela se tornará a dimensão correspondente da área de posicionamento do plano de fundo

**Nota:** O dimensionamento do plano de fundo para imagens vetoriais que não possuem dimensões ou proporções intrínsecas ainda não foi totalmente implementado em todos os navegadores.
 Tenha cuidado ao confiar no comportamento descrito acima e teste em vários navegadores para garantir que os resultados sejam aceitáveis.

### Definição formal

|  |  |
| --- | --- |
| Initial value | `auto auto` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Percentages | relative to the background positioning area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a repeatable list |

Sintaxe formal
--------------
```

background-size =
  <bg-size># (en-US)

<bg-size> =
  [ (en-US) <length-percentage [0,∞]> | (en-US) auto ] (en-US){1,2} (en-US)  | (en-US)
  cover                                      | (en-US)
  contain

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

Exemplos
--------

### Colocar lado a lado uma imagem grande

 Vamos considerar uma imagem grande, uma imagem do logotipo do Firefox de 2982x2808. Queremos agrupar quatro cópias dessa imagem em um elemento de 300x300 pixels.
 Para fazer isso, podemos usar um valor fixo de `background-size` de 150 pixels.

#### HTML

```html
<div class="tiledBackground"></div>
```

#### CSS

```css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

#### Resultado

Veja Redimensionando as imagens de fundo para mais exemplos.

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

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

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

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

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

* Redimensionando as imagens de fundo
* Scaling of SVG backgrounds (en-US)
* `object-fit`


:blank - CSS

:blank
======

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

**Nota:** The `:blank` selector is considered at risk, as the CSSWG keeps changing it.

See CSSWG issue #1967.

A pseudo-classe CSS **`:blank`** seleciona elementos de entrada do usuário vazios (ex. `<input>` ou `<textarea>`).

Sintaxe
-------

Error: could not find syntax for this itemEspecificações
--------------

| Specification |
| --- |
| Selectors Level 4 # blank-pseudo |

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

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

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

* `:empty`
* `:-moz-only-whitespace` (en-US)
Non-standard
 - Definição anterior de `:blank`.


CSS Layout cookbook - CSS

CSS Layout cookbook
===================

O livro de receitas (Cookbook) de layout CSS visa reunir receitas para padrões de layout comuns, coisas que você pode precisar implementar em seus próprios sites. Além de fornecer código que você pode usar como ponto de partida em seus projetos, essas receitas destacam as diferentes maneiras pelas quais as especificações de layout podem ser usadas e as escolhas que você pode fazer como desenvolvedor.

**Nota:** Se você é novo no layout CSS, então primeiro você pode dar uma olhada em nosso módulo de aprendizado de layout CSS, pois isso lhe dará o básico de que você precisa para usar as receitas aqui.

As Receitas
-----------

| Recipe | Description | Layout Methods |
| --- | --- | --- |
| Media objects | Uma caixa de duas colunas com uma imagem de um lado e um texto descritivo do outro, por ex. um post no facebook ou um tweet. | CSS Grid, `float` fallback, `fit-content` (en-US) sizing |
| Columns (en-US) | Quando escolher layout de múltiplas colunas, flexbox ou grid para suas colunas. | CSS Grid, Multicol (en-US), Flexbox |
| Center an element (en-US) | Como centralizar um item horizontalmente e verticalmente. | Flexbox, Box Alignment (en-US) |
| Sticky footers (en-US) | Criando um rodapé que fica na parte inferior do contêiner ou viewport quando o conteúdo é menor. | CSS Grid, Flexbox |
| Split navigation (en-US) | Um padrão de navegação em que alguns links são visualmente separados dos outros. | Flexbox, `margin` |
| Breadcrumb navigation | Criando uma lista de links para permitir que o visitante navegue de volta pela hierarquia da página. | Flexbox |
| List group with badges (en-US) | Uma lista de itens com um acessório para exibir uma contagem. | Flexbox, Box Alignment (en-US) |
| Pagination (en-US) | Links para páginas de conteúdo (como resultados de pesquisa). | Flexbox, Box Alignment (en-US) |
| Card (en-US) | Um componente de notas/cartão, exibido em uma grade de notas/cartão. | Grid Layout |
| Grid wrapper (en-US) | Para alinhar o conteúdo da grade em um wrapper central, ao mesmo tempo em que permite que os itens sejam quebrados. | CSS Grid |

Contribuir com uma receita
--------------------------

Como com todo o MDN, gostaríamos que você contribuísse com uma receita no mesmo formato que os mostrados acima. Veja esta página para um modelo e diretrizes para escrever seu próprio exemplo.


border-left - CSS

border-left
===========

Resumo
------

A **`border-left`** é uma propriedade shorthand em CSS que define todas as propriedades da `border` (en-US) esquerda de um elemento.

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

Tal como acontece com todas as propriedades abreviadas, `border-left` sempre define os valores de todas as propriedades que possam ser definidas, ainda que estas não tenham sido especificadas. Ela define aquelas que não forem especificadas para os valores padrão. Considere o código a seguir:

```css
border-left-style: dotted;
border-left: thick green;
```

É na verdade o mesmo que:

```css
border-left-style: dotted;
border-left: none thick green;
```

O valor de `border-left-style` (en-US) dado antes de `border-left` é ignorado. Uma vez que o valor padrão de `border-left-style` (en-US) é `none`, não especificar a parte `border-style` resulta em nenhuma borda.

Propriedades constituintes
--------------------------

Essa propriedade é uma abreviação das seguintes propriedades CSS:

* `border-left-color` (en-US)
* `border-left-style` (en-US)
* `border-left-width` (en-US)
Sintaxe
-------

```css
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed blue;

/\* Global values \*/
border-left: inherit;
border-left: initial;
border-left: revert;
border-left: revert-layer;
border-left: unset;
```

Os três valores da propriedade abreviada podem ser especificados em qualquer ordem, e um ou dois deles podem ser omitidos.

### Valores

`<br-width>`

Veja `border-left-width` (en-US).

`<br-style>`

Veja `border-left-style` (en-US).

`<color>`

Veja `border-left-color` (en-US).

Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-left-width` (en-US): `medium`
* `border-left-style` (en-US): `none`
* `border-left-color` (en-US): `currentcolor`
 |
| Aplica-se a | all elements. It also applies to `::first-letter`. |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `border-left-width` (en-US): the absolute length or `0` if `border-left-style` (en-US) is `none` or `hidden`
* `border-left-style` (en-US): as specified
* `border-left-color` (en-US): computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-left-color` (en-US): a color
* `border-left-style` (en-US): discrete
* `border-left-width` (en-US): a length
 |

Sintaxe formal
--------------
```

border-left =
  <line-width>  || (en-US)
  <line-style>  || (en-US)
  <color>

<line-width> =
  <length [0,∞]>  | (en-US)
  thin            | (en-US)
  medium          | (en-US)
  thick

<line-style> =
  none    | (en-US)
  hidden  | (en-US)
  dotted  | (en-US)
  dashed  | (en-US)
  solid   | (en-US)
  double  | (en-US)
  groove  | (en-US)
  ridge   | (en-US)
  inset   | (en-US)
  outset

```

Exemplos
--------

### Aplicando uma borda esquerda

#### HTML

```html
<div>Essa caixa tem uma borda no seu lado esquerdo.</div>
```

#### CSS

```css
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

#### Resultado

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

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

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

* `border` (en-US)
* `border-block` (en-US)
* `outline`
* Planos de fundo e bordas (en-US)
* Aprenda CSS: planos de fundo e bordas (en-US)


animation - CSS

animation
=========

A propriedade CSS abreviada **`animation`**, aplica uma animação entre estilos. É uma abreviação de `animation-name` (en-US), `animation-duration` (en-US), `animation-timing-function` (en-US), `animation-delay`, `animation-iteration-count` (en-US), `animation-direction` (en-US), `animation-fill-mode` (en-US), e `animation-play-state` (en-US).

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

Propriedades constituintes
--------------------------

Esta propriedade é uma abreviação para as seguintes propriedades CSS:

* `animation-delay`
* `animation-direction` (en-US)
* `animation-duration` (en-US)
* `animation-fill-mode` (en-US)
* `animation-iteration-count` (en-US)
* `animation-name` (en-US)
* `animation-play-state` (en-US)
* `animation-timing-function` (en-US)
Sintaxe
-------

```css
/\* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name \*/
animation: 3s ease-in 1s 2 reverse both paused slidein;

/\* @keyframes duration | easing-function | delay | name \*/
animation: 3s linear 1s slidein;

/\* two animations \*/
animation:
  3s linear slidein,
  3s ease-out 5s slideout;
```

A propriedade `animation` é especificada como uma ou mais animações separadas por vírgulas.

Cada animação individual é especificada como:

* zero, uma ou duas ocorrências do valor `<time>`
* zero ou uma ocorrência dos seguintes valores:
    + `<single-easing-function>`
    + `<single-animation-iteration-count>`
    + `<single-animation-direction>`
    + `<single-animation-fill-mode>`
    + `<single-animation-play-state>`
* um nome opcional para a animação que pode ser `none`, um `<custom-ident>` (en-US) ou uma `<string>` (en-US)
### Valores

`<single-easing-function>`

Determina o tipo de transição. O valor deve ser um dos disponíveis em `<easing-function>` (en-US).

`<single-animation-iteration-count>`

O número de vezes que a animação é reproduzida. O valor deve ser um dos disponíveis em `animation-iteration-count` (en-US).

`<single-animation-direction>`

A direção em que a animação é reproduzida. O valor deve ser um dos disponíveis em `animation-direction` (en-US).

`<single-animation-fill-mode>`

Determina como os estilos devem ser aplicados no alvo da animação antes e depois de sua execução. O valor deve ser um dos disponíveis em `animation-fill-mode` (en-US).

`<single-animation-play-state>`

Determina se a animação está sendo reproduzida ou não. O valor deve ser um dos disponíveis em `animation-play-state` (en-US).

Descrição
---------

A ordem dos valores de tempo dentro de cada definição de animação é importante: o primeiro valor que pode ser analisado como `<time>` é atribuído ao `animation-duration` (en-US) , e o segundo é atribuído a `animation-delay`.

A ordem de outros valores dentro de cada definição de animação também é importante para distinguir um valor `animation-name` (en-US) de outros valores. Se um valor na abreviação `animation` puder ser analisado como um valor para uma propriedade de animação diferente de `animation-name`, o valor será aplicado a essa propriedade primeiro e não a `animation-name`. Por esta razão, a prática recomendada é especificar um valor para `animation-name` como o último valor em uma lista de valores ao usar a abreviação `animation`; isso é válido mesmo quando você especifica várias animações separadas por vírgula usando a abreviação `animation`.

Um valor `animation-name` não precisa ser declarado na propriedade abreviada `animation`. Se nenhum nome existir, não haverá animação para aplicar em nenhuma das propriedades.

Quando o valor `animation-duration` é omitido da propriedade abreviada `animation`, o valor padrão dessa propriedade é `0s`. Nesse caso, a animação ainda ocorrerá (o `animationStart` (en-US) e [`animationEnd`](/pt-BR/docs/Web/API/ Element/animationend\_event) eventos serão acionados), mas nenhuma animação será visível.

Preocupações com acessibilidade
-------------------------------

A animação piscando e piscando pode ser problemática para pessoas com problemas cognitivos, como o Transtorno de Déficit de Atenção e Hiperatividade (TDAH). Além disso, certos tipos de movimento podem ser um gatilho para distúrbios vestibulares, epilepsia e enxaqueca e sensibilidade escotópica.

Considere fornecer um mecanismo para pausar ou desabilitar a animação, bem como usar a Consulta de mídia de movimento reduzido (en-US) para criar uma experiência complementar para usuários que têm expressou uma preferência por experiências animadas reduzidas.

* Projetando uma animação na Web mais segura para sensibilidade ao movimento · Um artigo separado
* Uma introdução à consulta de mídia de movimento reduzido | CSS-Tricks
* Design responsivo para movimento | WebKit
* MDN Understanding WCAG, Diretriz 2.2 explicações (en-US)
* Entendendo o Critério de Sucesso 2.2.2 | W3C Understanding WCAG 2.0
Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `animation-name` (en-US): `none`
* `animation-duration` (en-US): `0s`
* `animation-timing-function` (en-US): `ease`
* `animation-delay`: `0s`
* `animation-iteration-count` (en-US): `1`
* `animation-direction` (en-US): `normal`
* `animation-fill-mode` (en-US): `none`
* `animation-play-state` (en-US): `running`
* `animation-timeline` (en-US): `auto`
 |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `animation-name` (en-US): as specified
* `animation-duration` (en-US): as specified
* `animation-timing-function` (en-US): as specified
* `animation-delay`: as specified
* `animation-direction` (en-US): as specified
* `animation-iteration-count` (en-US): as specified
* `animation-fill-mode` (en-US): as specified
* `animation-play-state` (en-US): as specified
* `animation-timeline` (en-US): a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
 |
| Animation type | Not animatable |

Sintaxe formal
--------------
```

animation =
  <single-animation># (en-US)

<single-animation> =
  <time [0s,∞]>                       || (en-US)
  <easing-function>                   || (en-US)
  <time>                              || (en-US)
  <single-animation-iteration-count>  || (en-US)
  <single-animation-direction>        || (en-US)
  <single-animation-fill-mode>        || (en-US)
  <single-animation-play-state>       || (en-US)
  [ (en-US) none | (en-US) <keyframes-name> ] (en-US)

<easing-function> =
  linear                          | (en-US)
  <linear-easing-function>        | (en-US)
  <cubic-bezier-easing-function>  | (en-US)
  <step-easing-function>

<single-animation-iteration-count> =
  infinite        | (en-US)
  <number [0,∞]>

<single-animation-direction> =
  normal             | (en-US)
  reverse            | (en-US)
  alternate          | (en-US)
  alternate-reverse

<single-animation-fill-mode> =
  none       | (en-US)
  forwards   | (en-US)
  backwards  | (en-US)
  both

<single-animation-play-state> =
  running  | (en-US)
  paused

<keyframes-name> =
  <custom-ident> (en-US)  | (en-US)
  <string> (en-US)

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                | (en-US)
  ease-in                                             | (en-US)
  ease-out                                            | (en-US)
  ease-in-out                                         | (en-US)
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             | (en-US)
  step-end                               | (en-US)
  steps( <integer> (en-US) , <step-position>? (en-US) )

<linear-stop-list> =
  [ (en-US) <linear-stop> ] (en-US)# (en-US)

<step-position> =
  jump-start  | (en-US)
  jump-end    | (en-US)
  jump-none   | (en-US)
  jump-both   | (en-US)
  start       | (en-US)
  end

<linear-stop> =
  <number>               && (en-US)
  <linear-stop-length>? (en-US)

<linear-stop-length> =
  <percentage> (en-US){1,2} (en-US)

```

Exemplos
--------

**Nota:** A animação das propriedades do CSS Box Model não é recomendada. A animação de qualquer propriedade de box model é inerentemente para a CPU; considere animar a propriedade transform.

### Nascer do Sol

 Aqui animamos um sol amarelo em um céu azul claro. O sol nasce
 para o centro da viewport e depois desaparece de vista.

```html
<div class="sun"></div>
```

```css
:root {
  overflow: hidden; /\* esconde qualquer parte do sol abaixo do horizonte \*/
  background-color: lightblue;
  display: flex;
  justify-content: center; /\* centraliza o sol ao fundo \*/
}

.sun {
  background-color: yellow;
  border-radius: 50%; /\* cria um fundo circular \*/
  height: 100vh; /\* torna o sol do tamanho da viewport \*/
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /\* empurra o sol para além da janela de visualização \*/
    transform: translateY(110vh);
  }
  to {
    /\* retorna o sol à sua posição padrão \*/
    transform: translateY(0);
  }
}
```

### Animando Múltiplas Propriedades

Adicionando à animação do sol no exemplo anterior, adicionamos uma segunda animação mudando a cor do sol conforme ele nasce e se põe. O sol começa vermelho escuro quando está abaixo do horizonte e muda para laranja brilhante quando atinge o topo.

```html
<div class="sun"></div>
```

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/\* é possível animar várias propriedades em uma única animação \*/
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /\* propriedades não definidas, ou seja, 'filtro' reverterá para os valores padrão \*/
  }
}
```

### Aplicando Múltiplas Animações

 Aqui está um sol que nasce e se põe sobre um fundo azul claro. O sol
 gira gradualmente através de um arco-íris de cores. O tempo do sol, posição e cor são independentes.

```html
<div class="sun"></div>
```

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\* várias animações são separadas por vírgulas, os parâmetros de cada animação são definidos independentemente \*/
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
```

### Animações Múltiplas em Cascata

 Aqui está um sol amarelo sobre um fundo azul claro. O sol salta entre as
 lados esquerdo e direito da viewport. O sol permanece na janela de visualização mesmo
 embora uma animação de ascensão seja definida. A propriedade de transformação da animação de subida
 é 'substituído' pela animação de salto.

```html
<div class="sun"></div>
```

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\*
 as animações declaradas posteriormente na cascata substituirão as
 propriedades de animações declaradas anteriormente
 \*/
  /\* bounce 'substitui' a transformação definida por ascensão, portanto, o sol só se move horizontalmente \*/
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}
```

Veja Usando animações CSS para exemplos adicionais.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation |

Compatiblidade com navegadores
------------------------------

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

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

* Usando animações CSS
* API JavaScript `AnimationEvent`


align-content - CSS

align-content
=============

A propriedade CSS **`align-content`** define a distribuição entre e ao redor dos items do conteúdo do eixo transversal de uma flexbox ou do eixo de bloco de uma grid.

O exemplo interativo abaixo use Grid Layout para demonstrar alguns dos valores dessa propriedade.

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

This property has no effect on single line flex containers (i.e. ones with `flex-wrap: nowrap`).

Syntax
------

```css
/\* Basic positional alignment \*/
/\* align-content does not take left and right values \*/
align-content: center; /\* Pack items around the center \*/
align-content: start; /\* Pack items from the start \*/
align-content: end; /\* Pack items from the end \*/
align-content: flex-start; /\* Pack flex items from the start \*/
align-content: flex-end; /\* Pack flex items from the end \*/

/\* Normal alignment \*/
align-content: normal;

/\* Baseline alignment \*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/\* Distributed alignment \*/
align-content: space-between; /\* Distribute items evenly
 The first item is flush with the start,
 the last is flush with the end \*/
align-content: space-around; /\* Distribute items evenly
 Items have a half-size space
 on either end \*/
align-content: space-evenly; /\* Distribute items evenly
 Items have equal space around them \*/
align-content: stretch; /\* Distribute items evenly
 Stretch 'auto'-sized items to fit
 the container \*/

/\* Overflow alignment \*/
align-content: safe center;
align-content: unsafe center;

/\* Global values \*/
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: unset;
```

### Values

`start`

The items are packed flush to each other against the start edge of the alignment container in the cross axis.

`end`

The items are packed flush to each other against the end edge of the alignment container in the cross axis.

`flex-start`

 The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side.
 This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `start`.

`flex-end`

 The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-end side.
 This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `end`.

`center`

The items are packed flush to each other in the center of the alignment container along the cross axis.

`normal`

The items are packed in their default position as if no `align-content` value was set.

`baseline`, `first baseline`, `last baseline`

Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.

![the baseline is the line upon which most letters "sit" and below which descenders extend.](/pt-BR/docs/Web/CSS/align-content/410px-typography_line_terms.svg.png)

The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`space-between`

The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.

`space-around`

The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.

`space-evenly`

The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same.

`stretch`

If the combined size of the items along the cross axis is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by `max-height` (en-US)/`max-width` (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.

`safe`

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | multi-line flex containers |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

align-content =
  normal                                   | (en-US)
  <baseline-position>                      | (en-US)
  <content-distribution>                   | (en-US)
  <overflow-position>? (en-US) <content-position>

<baseline-position> =
  [ (en-US) first | (en-US) last ] (en-US)? (en-US)  && (en-US)
  baseline

<content-distribution> =
  space-between  | (en-US)
  space-around   | (en-US)
  space-evenly   | (en-US)
  stretch

<overflow-position> =
  unsafe  | (en-US)
  safe

<content-position> =
  center      | (en-US)
  start       | (en-US)
  end         | (en-US)
  flex-start  | (en-US)
  flex-end

```

Examples
--------

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-content: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

### HTML

```html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

```
var values = document.getElementById("values");
var display = document.getElementById("display");
var container = document.getElementById("container");

values.addEventListener("change", function (evt) {
  container.style.alignContent = evt.target.value;
});

display.addEventListener("change", function (evt) {
  container.className = evt.target.value;
});
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # align-content-property |

Browser compatibility
---------------------

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Grid Guide: *Box alignment in CSS Grid layouts (en-US)*
* CSS Box Alignment (en-US)


Pseudo-classes - CSS

Pseudo-classes
==============

Uma ***pseudo-classe*** CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado. Por exemplo, `:hover` pode ser usado para alterar a cor de um botão quando o usuário passar o cursor sobre ele.

```css
/\*Qualquer botão sobre o qual o ponteiro do usuário esteja passando sobre\*/
button:hover {
  color: blue;
}
```

Pseudo-classes permitem que você aplique um estilo a um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação (`:visited`, por exemplo), o status do seu conteúdo (como `:checked` em certos elementos de um formulário), ou a posição do mouse (como `:hover`, que permite saber se o mouse está sobre um elemento ou não).

**Nota:** Diferentemente das pseudo-classes, pseudo-elementos podem ser usados para estilizar uma *parte específica* de um elemento.

Sintaxe
-------
```

seletor:pseudo-classe {
  propriedade: valor;
}
```

Assim como nas classes regulares, você pode encadear juntas quantas pseudo-classes você desejar em um seletor.

Índice de pseudo-classes padrão
-------------------------------

* `:active`
* `:checked`
* `:default` (en-US)
* `:dir()` (en-US)
* `:disabled`
* `:empty`
* `:enabled`
* `:first` (en-US)
* `:first-child`
* `:first-of-type`
* `:fullscreen` (en-US)
* `:focus`
* `:hover`
* `:indeterminate` (en-US)
* `:in-range` (en-US)
* `:invalid`
* `:lang()` (en-US)
* `:last-child`
* `:last-of-type`
* `:left` (en-US)
* `:link`
* `:not()`
* `:nth-child()`
* `:nth-last-child()`
* `:nth-last-of-type()` (en-US)
* `:nth-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:read-only` (en-US)
* `:read-write`
* `:required`
* `:right` (en-US)
* `:root`
* `:scope` (en-US)
* `:target`
* `:valid`
* `:visited`
Especificações
--------------

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

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

* `pseudo-elements`


:required - CSS

:required
=========

A pseudo-classe CSS **`:required`** representa qualquer `<input>`, `<select>`, ou `<textarea>` contendo o atributo `required`.

```css
/\* Seleciona qualquer <input> requerido \*/
input:required {
  border: 1px dashed red;
}
```

Esta pseudo-classe é utilizada para destacar campos que devem ter dados válidos antes do formulário ser submetido.

**Nota:** A pseudo-classe `:optional` seleciona campos do formulário que são *opcionais*.

Sintaxe
-------

Error: could not find syntax for this itemExemplos
--------

Veja `:invalid` como exemplo.

Preocupações com acessibilidade
-------------------------------

Elementos `<input>` obrigatórios devem ter o atributo `required` atribuídos. Isso garante que pessoas que navegam com auxílio de recursos de acessibilidade, como o leitor de tela, possam entender quais campos precisam ter conteúdos válidos para garantir a submissão dos dados .

Se o formulário também possui campos opcionais, entradas requeridas devem ser indicadas visualmente usando um tratamento que não seja apenas a cor para passar o significado. Usualmente, textos descritivos e/ou um ícone são utilizados.

* MDN Understanding WCAG, Guideline 3.3 explanations (en-US)
* Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
Especificações
--------------

| Specification |
| --- |
| HTML Standard # selector-required |
| Selectors Level 4 # opt-pseudos |

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

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

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

* Outras pseudo-classe relacionadas a validação: `:optional`, `:invalid`, `:valid`
* Validação de dados de formulário (en-US)


will-change - CSS

will-change
===========

Sumário
-------

A propriedade **`will-change`** do CSS fornece um modo dos autores dizerem aos navegadores sobre que tipo de mudanças devem ser esperadas no elemento, então o navegador pode fazer as otimizações apropriadas com antecedência, antes do elemento ser efetivamente modificado.

Esses tipos de otimizações podem aumentar a capacidade de resposta de uma página, fazendo o trabalho potencialmente caro antes do tempo antes que eles são realmente necessários.

O uso adequado dessa propriedade pode ser um pouco complicado:

* *Não aplique will-change em muitos elementos.* O navegador já tenta ao máximo otimizar tudo. Algumas das otimizações mais fortes que podem utilizar o `will-change` acabam usando muitos recursos da máquina, e quando utilizados em demasia como neste caso, pode fazer a página para retardar o carregamento ou consumir uma grande quantidade de recursos.
* *Use com moderação.* O comportamento normal do navegador para otimizações é fazê-las e depois voltar ao normal. Mas adicionando `will-change` diretamente no estilo, implica que o elemento alvo está sempre alguns momentos antes da mudança, e o navegador irá manter as otimizações por muito mais tempo do que teria de outra forma. Então é uma boa prática colocar e retirar o `will-change` usando script antes e depois da mudança ocorrer.
* *Não aplicar will-change em elementos para realizar a otimização prematura.* Se sua página está performando bem, não adicione a propriedade `will-change` nos elementos apenas para trazer mais velocidade. `will-change` é entendido como algo para ser usado como último recurso, com o intuito de tentar solucionar problemas de performance . Ele não deve ser usado para antecipar esses possíveis problemas. O uso excessivo do `will-change` poderá resultar em excessivo uso de memória e causar uma renderização mais complexa enquanto o browser tenta se preparar para uma possível mudança. Isso levará a um pior desempenho.
* *Dê tempo suficiente para trabalhar*. Essa propriedade destina-se como um método para os autores dizerem ao agente do browser sobre como mudarão as properiedades antes disso acontecer. Então o navegador pode escolher como aplicar qualquer otimização requisitada na propriedade antes do tempo da ação acontecer. Isso é importante para dar ao navegador algum tempo para fazer as otimizações. Identifique um jeito de prever as mudanças, e use a proiedade `will-change` pra isso.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Sintaxe
-------

```css
/\* Valores chave \*/
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /\* Exemplo de <custom-ident> \*/
will-change: opacity; /\* Exemplo de <custom-ident> \*/
will-change: left, top; /\* Exemplo de dois <animateable-feature> \*/

/\* Valores globais \*/
will-change: inherit;
will-change: initial;
will-change: unset;
```

### Valores

`auto`

Essa palavra chave não expressa nenhuma intenção em particular; o *user agent* deve aplicar qualquer otimização como normalmente ocorre.

O `<animateable-feature>` pode ser um dos seguintes valores:

`scroll-position`

Indica que o autor espera que haja uma animação ou mudança na posição do scroll do elemento no futuro.

`contents`

Indica que o autor espera que haja uma animação ou mudança no conteúdo do elemento no futuro.

`<custom-ident>` (en-US)

Indica que o autor espera que haja uma animação ou mudança na propriedade com o nome dado no elemento no futuro. Isso não pode ser um dos seguintes valores: `unset`, `initial`, `inherit`, `will-change`, `auto`, `scroll-position`, or `contents`. A especificação não define o comportamento de um valor em particular, mas é comum pro `transform` ser uma camada de composição. O Chrome atualmente toma duas ações, dadas as propriedades particulares do CSS: estabelece uma nova camada de composição ou um novo stacking context.

### Sintaxe formal
```

will-change =
  auto                    | (en-US)
  <animateable-feature># (en-US)

<animateable-feature> =
  scroll-position  | (en-US)
  contents         | (en-US)
  <custom-ident> (en-US)

```

Exemplos
--------

```css
.sidebar {
  will-change: transform;
}
```

O exemplo acima adiciona a propriedade `will-change` diretamente no estilo, o que irá fazer com que o navegador mantenha a otimização em memória por muito mais tempo que o necessário e nós já vimos que isso deve ser evitado. Abaixo outro exemplo mostrando como aplicar o `will-change` através de script, o que provavelmente é o que você deve fazer na maioria dos casos.

```js
var el = document.getElementById("element");

// Set will-change quando ocorre hover no elemento
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // As propriedades otimizáveis que vão mudar no bloco de animações
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}
```

Entretanto pode ser apropriado incluir `will-change` no seu estilo css para uma aplicação que faz *page flips* quando uma tecla é pressionada como um álbum ou uma apresentação de slides, onde a página é grande e complexa. Isso irá dizer ao navegador para preparar a transição à frente do tempo e aceitar transições entre as páginas assim que a tecla for pressionada.

```css
.slide {
  will-change: transform;
}
```

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

| Specification |
| --- |
| CSS Will Change Module Level 1 # will-change |

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

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


Valor atual - CSS

Valor atual
===========

The **actual value** of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value |

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

* CSS Reference


grid - CSS

grid
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade **`grid`** do CSS é uma abreviação das propriedades que definem todas as propriedades da grade explícita (`grid-template-rows`, `grid-template-columns`, e `grid-template-areas` (en-US)), e todas as propriedades implícitas da grade (`grid-auto-rows` (en-US), `grid-auto-columns` (en-US), e `grid-auto-flow`), em uma única declaração.

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

**Nota:** Você pode especificar apenas as propriedades explícitas *ou* implícitas da grade em uma única declaração `grid`. As subpropriedades que você não especifica são definidas como seu valor inicial, como é normal para abreviações. Além disso, as propriedades da medianiz NÃO são redefinidas por essa abreviação.

Sintaxe
-------

```css
/\* <'grid-template'> values \*/
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/\* <'grid-template-rows'> /
 [ auto-flow && dense? ] <'grid-auto-columns'>? values \*/
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/\* [ auto-flow && dense? ] <'grid-auto-rows'>? /
 <'grid-template-columns'> values \*/
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

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

### Valores

`<'grid-template'>`

Define o `grid-template` (en-US) incluindo `grid-template-columns`, `grid-template-rows` e `grid-template-areas` (en-US).

`<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`

Configura um fluxo automático definindo as faixas de linha explicitamente por meio da propriedade `grid-template-rows` (e a propriedade `grid-template-columns` para `none`) e especificando como repetir automaticamente as faixas da coluna via `grid-auto-columns` (en-US) (e setando `grid-auto-rows` (en-US) para `auto`). `grid-auto-flow` também é definido para a `column`, de acordo com `dense`, se especificado.

Todas as outras subpropriedades `grid` são redefinidas para seus valores iniciais.

`[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`

Configura um fluxo automático definindo as faixas da coluna explicitamente por meio da propriedade `grid-template-columns` (e a propriedade `grid-template-rows` para `none`) e especificando como repetir automaticamente as faixas de linha via `grid-auto-rows` (en-US) (e setando `grid-auto-columns` (en-US) para `auto`). `grid-auto-flow` também é definido para `row` de acordo com `dense`, se especificado.

Todas as outras subpropriedades `grid` são redefinidas para seus valores iniciais.

### Sintaxe formal
```

grid =
  <'grid-template'>                                   | (en-US)
  <'grid-template-rows'> / [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-columns'>? (en-US)  | (en-US)
  [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-rows'>? (en-US) / <'grid-template-columns'>

```

Exemplo
-------

### Conteúdo HTML

```html
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

### Conteúdo CSS

```css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-shorthand |

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `grid-template-rows`: `none`
* `grid-template-columns`: `none`
* `grid-template-areas` (en-US): `none`
* `grid-auto-rows` (en-US): `auto`
* `grid-auto-columns` (en-US): `auto`
* `grid-auto-flow`: `row`
* `grid-column-gap` (en-US): `0`
* `grid-row-gap` (en-US): `0`
* `column-gap` (en-US): `normal`
* `row-gap` (en-US): `normal`
 |
| Aplica-se a | grid containers |
| Inherited | não |
| Percentages | as each of the properties of the shorthand:* `grid-template-rows`: refer to corresponding dimension of the content area
* `grid-template-columns`: refer to corresponding dimension of the content area
* `grid-auto-rows` (en-US): refer to corresponding dimension of the content area
* `grid-auto-columns` (en-US): refer to corresponding dimension of the content area
 |
| Computed value | as each of the properties of the shorthand:* `grid-template-rows`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-columns`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-areas` (en-US): as specified
* `grid-auto-rows` (en-US): the percentage as specified or the absolute length
* `grid-auto-columns` (en-US): the percentage as specified or the absolute length
* `grid-auto-flow`: as specified
* `grid-column-gap` (en-US): the percentage as specified or the absolute length
* `grid-row-gap` (en-US): the percentage as specified or the absolute length
* `column-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `row-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-areas` (en-US): discrete
* `grid-auto-rows` (en-US): by computed value type
* `grid-auto-columns` (en-US): by computed value type
* `grid-auto-flow`: discrete
* `grid-column-gap` (en-US): a length
* `grid-row-gap` (en-US): a length
* `column-gap` (en-US): a length, percentage or calc();
* `row-gap` (en-US): a length, percentage or calc();
 |

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

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

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

* Propriedades CSS relacionadas: `grid-template` (en-US), `grid-template-rows`, `grid-template-columns`, `grid-template-areas` (en-US), `grid-auto-columns` (en-US), `grid-auto-rows` (en-US), `grid-auto-flow`
* Guia de Layout de Grade: *Line-based placement with CSS Grid (en-US)*
* Guia de Layout de Grade: *Grid template areas - Grid definition shorthands (en-US)*

1. **CSS**
2. **CSS Reference**
3. CSS Grid Layout
4. **Guias**
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement (en-US)
    4. Grid template areas (en-US)
    5. Layout using named grid lines (en-US)
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
5. **Propriedades**
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows
6. **Glossário**
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)


Especificidade - CSS

Especificidade
==============

O Conceito
----------

A especificação é a maneira de como os navegadores definem quais valores de propriedades são os mais relevantes para o elemento a ser utilizado. A especificação é baseada apenas nas regras impostas na composição de diferentes tipos de seletores.

Como isso é calculado?
----------------------

A espeficicação é calculada na concatenação da contagem de cada tipo de seletor. Não é um peso aplicado na expressão correspondente.

No caso de igualdade de especificação, a última declaração encontrada no CSS é aplicada ao elemento.

**Nota:**: O fato de elementos estarem próximos na árvore do documento não tem efeito sobre a especificação.

### Ordem crescente de especificação

A seguinte lista de seletores está incluida na especificação:

* Seletores Universais
* Tipo de Seletores
* Classes seletoras
* Atributos Seletores
* Pseudo-classes
* Seletores ID
* Estilo Inline
### A exceção `!important`

Quando a regra `!important` é utilizada na declaração do estilo substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declaração. Contudo, `!important` não tem nada a ver com especificação.

### A exceção `:not`

A pseudo-classe de negação `:not` não é considerada uma pseudo-classe no cálculo de especificação. Contudo, seletores colocados na pseudo-class de negação são entendidos como seletores normais.

Aqui está um trecho de CSS:

```css
div.outer p {
  color: orange;
}
div:not(.outer) p {
  color: lime;
}
```

Usado com o seguindo código HTML:

```html
<div class="outer">
  <p>Esta é a div outer.</p>
  <div class="inner">
    <p>Este texto está na div inner.</p>
  </div>
</div>
```

Irá aparecer na tela assim:

Esta é a div outer.

Este texto está na div inner.

### Especificação Form-based

A especificação é baseada na forma de um seletor. No seguinte caso, o seletor contém os atributos no algoritmo de determinação de especificação, embora ele selecione um ID.

A seguir veja as declarações de estilo:

```css
\* #foo {
  color: green;
}
\*[id="foo"] {
  background: purple;
}
```

Usado com esta marcação:

```html
<p id="foo">Eu sou um simples texto.</p>
```

Vai acabar parecendo algo como:

Eu sou um simples texto.

Porque coincide com o mesmo elemento, mas o seletor de ID tem uma especificação superior.

### Estrutura aproximada

A seguir a declaração do estilo:

```css
body h1 {
  color: green;
}
html h1 {
  color: purple;
}
```

Com o HTML seguinte::

```html
<html>
  <body>
    <h1>Aqui está o título!</h1>
  </body>
</html>
```

Vamos ter algo como:

Aqui está o título!

Veja Também
-----------

* Espcificação de Seletores CSS - https://www.w3.org/TR/selectors/#specificity


word-wrap - CSS

word-wrap
=========

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

Resumo
------

A propriedade CSS `word-wrap` é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

**Nota:** Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade `word-wrap` foi renomeada para `overflow-wrap` no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.

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

Sintaxe
-------
```

word-wrap:  normal | break-word
```

### Valores

`normal`

Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.

`break-word`

Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.

Exemplos
--------

```css
p {
  width: 13em;
  background: gold;
}
```

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

```css
p {
  width: 13em;
  background: gold;
  word-wrap: break-word;
}
```

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

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

| Specification |
| --- |
| CSS Text Module Level 3 # overflow-wrap-property |

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

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

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

* Microsoft's original documentation: MSDN Microsoft library word-wrap


-webkit-overflow-scrolling - CSS

-webkit-overflow-scrolling
==========================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Resumo
------

A propriedade CSS `-webkit-overflow-scrolling` controla quando dispositivos com a funcionalidade de toque na tela usam uma rolagem baseada no "momentum" de um dado elemento.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | scrolling boxes |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Valores
-------

`auto`

Usa a rolagem "regular", onde o conteúdo imediatamente cessa a rolagem quando você remove o dedo da tela que reconhece os toques.

`touch`

Usa a rolagem baseada em "momentos", onde o conteúdo continua a rolar por um momento depois do gesto de rolagem ter sido finalizado quando o usuário deixar de tocar com o dedo na tela. A velocidade e duração da rolagem contínua é proporcional ao quão vigoroso a rolagem. Também cria um novo contexto estagnado.

### Sintaxe formal

Error: could not find syntax for this itemExemplos
--------

```css
-webkit-overflow-scrolling: touch; /\* deixa a rolagem suave \*/

-webkit-overflow-scrolling: auto; /\* pare de rolar imediatamente \*/
```

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

Não faz parte de nenhuma especificação. A Apple tem uma descrição na referência de CSS do Safari.

Compatibilidade do navegador
----------------------------

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

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

* Artigo do CSS-Tricks com demo


writing-mode - CSS

writing-mode
============

A propriedade CSS **`writing-mode`** define se as linhas do texto são dispostas horizontalmente ou verticalmente e a direção que os blocos seguem

```css
/\* Valores das palavras-chave \*/
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/\* Valores globais \*/
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;
```

Sintaxe
-------

A propriedade especifica o *comportamento de fluxo do bloco,* que é a maneira em que os containers são empilhados ou distribuídos, e a direção em que o conteudo é alinhado ou disposto dentro dos containers. Assim a propriedade `writing-mode` também determina a distribuição do conteúdo no nível de bloco

|  |  |
| --- | --- |
| Initial value | `horizontal-tb` |
| Aplica-se a | all elements except table row groups, table column groups, table rows, and table columns |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |

### Values

`horizontal-tb`

Conteúdo é disposto horizontalmente da esquerda para a direita, verticalmente de cima para baixo. A próxima linha horizontal é posicionada abaixo da linha anterior.

`vertical-rl`

Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da direita para a esquerda. A proxima linha vertical é posicionada à esquerda da linha anterior.

`vertical-lr`

Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da esquerda para a direita. A proxima linha vertical é posicionada à direita da linha anterior.

`sideways-rl`
Experimental

Conteúdo é disposto verticalmente de cima para baixo e todos os glifos, até mesmo os que estão em uma escrita vertical, são colocados lado a lado para a direita.

`sideways-lr`
Experimental

Conteúdo é disposto verticalmente de cima para baixo e todos os glifos, até mesmo os que estão em uma escrita vertical, são colocados lado a lado para a esquerda.

`lr`
Deprecated

Descontinuado exceto para docmentos SVG1. Para CSS, use `horizontal-tb`.

`lr-tb`
Deprecated

Descontinuado exceto para docmentos SVG1. Para CSS, use `horizontal-tb`.

`rl`
Deprecated

Descontinuado exceto para docmentos SVG1. Para CSS, use `horizontal-tb`.

`tb`
Deprecated

Descontinuado exceto para docmentos SVG1. Para CSS, use `vertical-lr`.

`tb-rl`
Deprecated

Descontinuado exceto para docmentos SVG1. Para CSS, use `vertical-rl`.

### Sintaxe formal
```

writing-mode =
  horizontal-tb  | (en-US)
  vertical-rl    | (en-US)
  vertical-lr    | (en-US)
  sideways-rl    | (en-US)
  sideways-lr

```

Exemplo
-------

Esse exemplo demonstra todos os modos de escrita, mostrando cada um com texto e várias línguas.

### HTML

O HTML é simplesmente um `<table>` com cada modo de escrita em uma linha com uma coluna mostrando texto em diversos scripts usando esse modo de escrita.

```html
<table>
  <tr>
    <th>value</th>
    <th>Vertical script</th>
    <th>Horizontal script</th>
    <th>Mixed script</th>
  </tr>
  <tr>
    <td>horizontal-tb</td>
    <td class="example Text1"><span>我家没有电脑。</span></td>
    <td class="example Text1"><span>Example text</span></td>
    <td class="example Text1"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="example Text2"><span>我家没有电脑。</span></td>
    <td class="example Text2"><span>Example text</span></td>
    <td class="example Text2"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="example Text3"><span>我家没有电脑。</span></td>
    <td class="example Text3"><span>Example text</span></td>
    <td class="example Text3"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="example Text4"><span>我家没有电脑。</span></td>
    <td class="example Text4"><span>Example text</span></td>
    <td class="example Text4"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="example Text5"><span>我家没有电脑。</span></td>
    <td class="example Text5"><span>Example text</span></td>
    <td class="example Text5"><span>1994年に至っては</span></td>
  </tr>
</table>
```

### CSS
```

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px black solid;
  padding: 3px;
}
th {
  background-color: lightgray;
}
.example {
  height: 75px;
  width: 75px;
}
```

O CSS que ajusta a direcionalidade do conteúdo é algo como esse:

```css
.example.Text1 span,
.example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}

.example.Text2 span,
.example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.example.Text3 span,
.example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.example.Text4 span,
.example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}

.example.Text5 span,
.example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}
```

### Resultado atual

Essa é uma imagem mostrando o que o resultado deve parecer, no caso do suporte do seu navegador para `writing-mode` estiver incompleto.

![](/pt-BR/docs/Web/CSS/writing-mode/writing-mode-actual-result.png)

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |

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

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

See also
--------

* SVG `writing-mode` (en-US) attribute
* `direction` (en-US)
* `unicode-bidi` (en-US)
* `text-orientation` (en-US)
* `text-combine-upright` (en-US)


flex-wrap - CSS

flex-wrap
=========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade CSS **`flex-wrap`** define se os itens flexíveis são forçados a ficarem na mesma linha ou se podem ser quebradas em varias linhas. Se o argumento for valido, ele define a direção em que as linhas são empilhadas.

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

Veja Using CSS flexible boxes para mais propriedades e informação.

Syntax
------

```css
flex-wrap: nowrap; /\* Default value \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/\* Global values \*/
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
```

A propriedade `flex-wrap` é especificada como uma unica palavra-chave escolhida na lista de valores abaixo.

### Valores

Os seguintes valores são aceitos :

`nowrap`

Os itens flexíveis são agrupados em uma unica linha, o que pode fazer com que o flex container transborde. O **cross-start** é equivalente ao **início** ou **antes**, dependendo do valor da `flex-direction`. Este é o valor padrão.

`wrap`

Os itens flexíveis são quebrados em multiplas linhas. O **cross-start** é equivalente a iniciar ou antes dependendo do valor do `flex-direction` e **cross-end** é o oposto do especificado **cross-start**.

`wrap-reverse`

Se comporta da mesma maneira que o `wrap` mas a de linha ocorre na direção contrária, ou seja, para a linha acima.

Formal definição
----------------

|  |  |
| --- | --- |
| Initial value | `nowrap` |
| Aplica-se a | flex containers |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

flex-wrap =
  nowrap        | (en-US)
  wrap          | (en-US)
  wrap-reverse

```

Exemplos
--------

### Definindo valores em um flex container wrap

#### HTML

```html
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```

#### CSS

```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

#### Resultados

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |

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

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

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

* Guia CSS Flexbox: *Basic Concepts of Flexbox*
* Guia CSS Flexbox: *Mastering wrapping of flex items (en-US)*


CSS Images - CSS

CSS Images
==========

**CSS Images** is a module of CSS that defines what types of images can be used (the `<image>` type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

Reference
---------

### Properties

* `image-orientation` (en-US)
* `image-rendering` (en-US)
* `object-fit`
* `object-position` (en-US)
### Functions

* `linear-gradient()` (en-US)
* `radial-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `element()`
### Data types

* `<gradient>` (en-US)
* `<image>`
Guides
------

Using CSS gradients (en-US)

Presents a specific type of CSS images, *gradients*, and how to create and use these.

Implementing image sprites in CSS

Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |


grid-template-rows - CSS

grid-template-rows
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade **`grid-template-rows`** do CSS define o nome das linhas e funções de dimensionamento (track sizing) do grid rows (en-US).

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

Syntax
------

```css
/\* Keyword value \*/
grid-template-rows: none;

/\* <track-list> values \*/
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);

/\* <auto-track-list> values \*/
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-rows:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/\* Valores globais \*/
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;
```

Esta propriedade pode ser especificada como:

* com a palavra-chave `none`
* ou um valor `<track-list>`
* ou um valor `<auto-track-list>`
### Valores

`none`

É uma palavra-chave que indica que não há uma grid explícita. Qualquer linha irá ser implicitamente gerada e seu tamanho será determinado pela a propriedade `grid-auto-rows` (en-US) .

`<length>` (en-US)

É um comprimento não negativo.

`<percentagem>` (en-US)

 É um valor de `<percentagem>` (en-US) não negativo, relativo ao tamanho do bloco do grid contêiner. Se o tamanho do grid contêiner depender do tamanho de suas tracks, então a percentagem deve ser tratada como `auto`.
 As contribuições de tamanho inerentes da track podem ser ajustados ao tamanho do grid contêiner, e aumentar o tamanho final da track pelo o valor mínimo que respeitará a percentagem.

`<flex>` (en-US)

Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, <flex>)`).

`max-content`

Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

`min-content`

Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

`minmax(min, max)` (en-US)

Is a functional notation that defines a size range, greater than or equal to *min*, and less than or equal to *max*. If *max* is smaller than *min*, then *max* is ignored and the function is treated as *min*. As a maximum, a `<flex>` value sets the track's flex factor. It is invalid as a minimum.

`auto`

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by `min-width` (en-US)/`min-height`) of the grid items occupying the grid track.

**Nota:**: `auto` track sizes (and only `auto` track sizes) can be stretched by the `align-content` and `justify-content` (en-US) properties.

`fit-content( [ <length> | <percentage> ] )` (en-US)

Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )` (en-US)

Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.

### Formal syntax
```

grid-template-rows =
  none                       | (en-US)
  <track-list>               | (en-US)
  <auto-track-list>          | (en-US)
  subgrid <line-name-list>? (en-US)

<track-list> =
  [ (en-US) <line-names>? (en-US) [ (en-US) <track-size> | (en-US) <track-repeat> ] (en-US) ] (en-US)+ (en-US) <line-names>? (en-US)

<auto-track-list> =
  [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US) <auto-repeat> [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US)

<line-name-list> =
  [ (en-US) <line-names> | (en-US) <name-repeat> ] (en-US)+ (en-US)

<line-names> =
  '[' <custom-ident> (en-US)\* (en-US) ']'

<track-size> =
  <track-breadth>                                   | (en-US)
  minmax( <inflexible-breadth> , <track-breadth> )  | (en-US)
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<fixed-size> =
  <fixed-breadth>                                   | (en-US)
  minmax( <fixed-breadth> , <track-breadth> )       | (en-US)
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<auto-repeat> =
  repeat( [ (en-US) auto-fill | (en-US) auto-fit ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<name-repeat> =
  repeat( [ (en-US) <integer [1,∞]> | (en-US) auto-fill ] (en-US) , <line-names>+ (en-US) )

<track-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  <flex [0,∞]>               | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

<fixed-breadth> =
  <length-percentage [0,∞]>

```

Examples
--------

### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | grid containers |
| Inherited | não |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

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

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

See also
--------

* Related CSS properties: `grid-template-columns`, `grid-template-areas` (en-US), `grid-template` (en-US)
* Grid Layout Guide: *Basic concepts of grid layout - Grid Tracks*
* Video tutorial: *Defining a Grid*

1. **CSS**
2. **CSS Reference**
3. CSS Grid Layout
4. **Guides**
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement (en-US)
    4. Grid template areas (en-US)
    5. Layout using named grid lines (en-US)
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
5. **Properties**
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows
6. **Glossary**
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)