Propriedades shorthand - CSS

Propriedades shorthand
======================

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

*Propriedades shorthand (tradução literal: Propriedades abreviadas) são propriedades de CSS que deixam você setar os valores de outras propriedades de CSS simultaneamente. Usando shorthand property, um desenvolvedor web pode escrever folhas de estilo mais concisas e legíveis,economizando tempo e energia.*

A especificação CSS define como shorthand properties, o grupo de propriedades com o mesmo tema. Ex: a propriedade CSS `background` é uma propriedade shorthand que é capaz de definir o valor de `background-color`, `background-image` (en-US), `background-repeat` (en-US), e `background-position` (en-US). Assim também,como as propriedades comuns e relacionadas a fonte podem ser definidas e usadas com o shorthand `font` (en-US),e os diferentes margins em volta de um box podem ser definidas com o shorthand `margin`.

Casos específicos
-----------------

Mesmo sendo convenientes para se usar, existem alguns casos que precisam ser analisados antes de usar:

1. Um valor que não especificado é setado seu valor inicial. Isso parece uma anedota, mas realmente significa que sobrescreve valores previamente setados. Por exemplo:

```css
background-color: red;
background: url(images/bg.gif) no-repeat top right;
```

não irá setar a cor do background para vermelho, mas para `background-color`'s padrão, transparente, como a segunda regra tem precedência.
2. Apenas propriedades individuais são herdadas. Como valores que faltam são substituidos pelo seu valor inicial, é impossivel herdar valores individuais os omitindo. O valor `inherit` pode ser aplicado a uma propriedade, mas num total e não como uma palavra-chave para um valor ou outro. Isso significa que a unica forma de um valor específico ser herdado é usando a propriedade em longhand com o valor `inherit`.
3. Propriedades shorthand tentam não forçar uma ordem específica para os valores das propriedades que elas substituem. Isso funciona bem quando essas propriedades usam valores de diferentes tipos, como a ordem não tem importância, isso funciona bem quando essas propriedades usam valores de diferentes tipos, como a ordem não tem importância, mas isso não funciona tão facilmente quando várias propriedades podem ter valores idênticos. O tratamento destes casos está agrupado em várias categorias:
    1. Propriedades shorthand que lidam com valores da borda de um box, como `border-style` (en-US), `margin` or `padding`, sempre usam um consistente 1-para-4 valor de sintaxe representando essas bordas:

    | border1.png | *A sintaxe de um valor*: `border-width: 1em` — O valor único representa todas as bordas |
    | --- | --- |
    | border2.png | *As sintaxes de dois valores*: `border-width: 1em 2em` — O primeiro valor representa a vertical, isto é, as bordas superior e inferior, a segunda as horizontais, que é a esquerda e a direita. |
    | border3.png | *As sintaxes de três valores*: `border-width: 1em 2em 3em` — O primeiro valor representa a borda superior, a segunda, a horizontal, que é esquerda e direita, e o terceiro valor a borda inferior |
    | border4.png | *As sintaxes de quatro valores*: `border-width: 1em 2em 3em 4em` — Os quatro valores representam as margens superior, direita, inferior e esquerda, respectivamente, sempre nessa ordem, que é no sentido horário começando pelo topo (a letra inicial de Top-Right-Bottom-Left corresponde à ordem da consoante da palavra *trouble*: TRBL) |
    2. Também parecido, shorthand que lidam com os cantos de um box `border-radius` (en-US), sempre usam 1-para-4-valor de sintaxe representando esses cantos:

    | corner1.png | *A sintaxe de um valor*: `border-radius: 1em` — O valor único representa todos os cantos |
    | --- | --- |
    | corner2.png | *As sintaxes de dois valores*: `border-radius: 1em 2em` — O primeiro valor representa o canto superior esquerdo e inferior direito, o segundo o superior direito e inferior esquerdo |
    | corner3.png | *As sintaxes de três valores*: `border-radius: 1em 2em 3em` — O primeiro valor representa o canto superior esquerdo, o segundo o canto superior direito eo inferior esquerdo e o terceiro o canto inferior direito |
    | corner4.png | *As sintaxes de quatro valores*: `border-radius: 1em 2em 3em 4em` — Os quatro valores representam os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo respectivamente, sempre nessa ordem, que é no sentido horário começando no canto superior esquerdo. |
Propriedades de background
--------------------------

Um background com as seguintes declarações:
```

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
```

Pode ser resumido em uma unica declaração:
```

background: #000 url(images/bg.gif) no-repeat top right;
```

(A forma shorthand é o equivalente as propriedades longhand acima, mais `background-attachment: scroll`, em CSS3, algumas propriedades adicionais.)

Propriedades de fonte
---------------------

As seguintes declarações:
```

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
```

Podem ser resumidas a:
```

font: italic bold .8em/1.2 Arial, sans-serif;
```

Essa declaração shorthand é o equivalente as declarações longhand acima, mais `font-variant: normal` e `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3).

Propriedades de borda
---------------------

Com a borda, o width (largura), color (cor), podem ser simplificados em uma declaração. Por exemplo,
```

border-width: 1px;
border-style: solid;
border-color: #000;
```

Podem ser escritas como
```

border: 1px solid #000;
```

Propriedades de margin e padding
--------------------------------

As versões shorthand de margin e padding funcionam da mesma maneira. As seguintes declarações CSS:
```

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
```

são as mesmas da seguinte declaração (note que os valores estão em ordem horária: top, right, bottom e left(TRBL, mesmas consoantes de TRBL "trouble"))
```

margin: 10px 5px 10px 5px;
```

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

* CSS Reference
* Propriedades shorthand : `background`, `font` (en-US), `margin`, `border` (en-US), `border-top` (en-US), `border-right` (en-US), `border-bottom` (en-US), `border-left`, `border-width` (en-US), `border-color` (en-US), `border-style` (en-US), `transition`, `animation`, `transform`, `padding`, `list-style` (en-US), `border-radius` (en-US).


::before (:before) - CSS

::before (:before)
==================

Sumário
-------

`::before` cria um pseudo-elemento que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade `content`. Este elemento é inline por padrão.

Sintaxe
-------

Error: could not find syntax for this item
A notação `::before` (com dois dois-pontos) foi introduzida no CSS3 afim de diferenciar pseudo-classes de pseudo-elementos. Navegadores também aceitam a notação `:before` introduzida no CSS 2.

Exemplos
--------

### Adicionando aspas

Um exemplo simples do uso de pseudo-elementos `::before` pseudo-elementos é a exibição de aspas. Aqui usamos `::before` e ``::after`` para inserir caracteres de aspas.

#### Conteúdo HTML

```html
<q>Algumas citações</q>, ele disse, <q>são melhor do que nenhuma.</q>
```

#### Conteúdo CSS

```css
q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}
```

#### Saída

### Exemplo decorativo

Podemos estilizar textos e imagens na propriedade `content` praticamente da forma que desejarmos.

#### Conteúdo HTML

```html
<span class="ribbon">Observe onde a caixa laranja está.</span>
```

#### Conteúdo CSS

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "Olhe para esta caixa laranja.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

#### Saída

### Lista To-do

Neste exemplo vamos criar uma simples lista de tarefas, usando pseudo-elementos. Este método pode frequentemente ser utilizado para dar pequenos toques à UI (User Interface) e melhorar a experiência do usuário.

#### Conteúdo HTML

```html
<ul>
  <li>Comprar Leite</li>
  <li>Levar o cachorro para passear</li>
  <li>Exercitar-se</li>
  <li>Escrever codigo</li>
  <li>Tocar musica</li>
  <li>Relaxar</li>
</ul>
```

#### Conteúdo CSS

```css
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
```

#### Conteúdo JavaScript

```js
var list = document.querySelector("ul");
list.addEventListener(
  "click",
  function (ev) {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);
```

Aqui está rodando o código acima. Perceba que nenhum ícone é utilizado e o check-mark é o `::before` que foi estilizado no CSS.

#### Saída

Notas
-----

Embora as correções posicionadas e fixadas no Firefox 3.5 não permitam que o conteúdo seja gerado como um irmão anterior ao elemento (conforme a especificação para o CSS indicam "Os Pseudo-elementos :before e :after interagem com outros elementos como se fosse elementos reais inseridos dentro do elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora em layouts sem tables (por exemplo, para alcançar a centralização), a medida que o conteúdo a ser centrado está envolvido com um elemento filho adicional, uma coluna antes e depois do conteúdo pode ser introduzida sem adicionar elementos filhos reais (isto é, talvez mais semanticamente correto para adicionar uma pequena distância, do que seria adicionar um div vazio antes e / ou depois). (E sempre lembre-se de adicionar uma largura a um flutuador, pois, de outra forma, não flutuará!)

#### HTML content

```html
<div class="example">
  <span id="floatme"
 >"Floated Before" should be generated on the left of the viewport and not
    allow overflow in this line to flow under it. Likewise should "Floated
    After" appear on the right of the viewport and not allow this line to flow
    under it.</span
 >
</div>
```

#### CSS content

```css
#floatme {
  float: left;
  width: 50%;
}

/\* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) \*/
.example::before {
  content: "Floated Before";
  float: left;
  width: 25%;
}
.example::after {
  content: "Floated After";
  float: right;
  width: 25%;
}

/\* For styling \*/
.example::before,
.example::after,
.first {
  background: yellow;
  color: red;
}
```

#### Output

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

See also
--------

* `::after`, `content`


<display-inside> - CSS

<display-inside>
================

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
Essas palavras-chave especificam o interior do elemento`display` type, que define o tipo de contexto de formatação que apresenta seu conteúdo (supondo que seja um elemento não substituído). Essas palavras-chave são usadas como valores do `display` e pode ser usada para fins legados como uma única palavra-chave ou conforme definido na especificação do Nível 3, juntamente com um valor do `<display-outside>` palavras-chave.

Sintaxe
-------

O `<display-inside>` O valor é definido usando uma palavra-chave da lista abaixo:

`flow`
Experimental

 O elemento expõe seu conteúdo usando o layout de fluxo (layout em bloco e em linha).
 Se o seu tipo de exibição externo for

`inline` ou `run-in`,

e estiver participando de um contexto de formatação em bloco ou em linha, gera uma caixa em linha. Caso contrário, ele gera uma caixa de contêiner de bloco.

Dependendo do valor de outras propriedades como

`position`, `float`, ou `overflow`) e se ele próprio participa de um contexto de formatação em bloco ou embutido, ele estabelece um novo contexto de formatação de bloco (BFC) para seu conteúdo ou integra seu conteúdo ao contexto de formatação pai.

`flow-root`
Experimental

O elemento gera uma caixa de elemento de bloco que estabelece um novo contexto de formatação de bloco, definindo onde está a raiz da formatação.

`table`

Esses elementos se comportam como HTML`<table>` elementos. Ele define uma caixa no nível do bloco.

`flex`

O elemento se comporta como um elemento de bloco e expõe seu conteúdo de acordo com o modelo flexbox.

`grid`

O elemento se comporta como um elemento de bloco e expõe seu conteúdo de acordo com o modelo de grade.

`ruby`
Experimental

O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de formatação ruby. Ele se comporta como o HTML correspondente`<ruby>` elementos.

**Nota:**: Navegadores que suportam a sintaxe de dois valores, encontrando apenas o valor interno, como quando `display: flex` or `display: grid` especificado, definirá seu valor externo como `block`. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento a ser `display: grid`, você esperaria que a caixa criada no contêiner da grade fosse uma caixa no nível do bloco.

### Sintaxe formal
```

<display-inside> =
  flow       | (en-US)
  flow-root  | (en-US)
  table      | (en-US)
  flex       | (en-US)
  grid       | (en-US)
  ruby

```

Exemplo
-------

Neste exemplo, a caixa pai foi fornecida `display: flow-root` e assim estabelece um novo BFC e contém o item flutuado.

### HTML

```html
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>
```

### CSS

```css
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}
```

### Resultado

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

### Suporte a vários valores de palavras-chave

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

### css.properties.display.table\_values

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

### css.properties.display.grid

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

### css.properties.display.flex

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

### css.properties.display.ruby\_values

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

### Suporte de fluxo-raiz

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

### css.properties.display.table\_values

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

### css.properties.display.grid

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

### css.properties.display.flex

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

### css.properties.display.ruby\_values

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

### Suporte de tabela

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

### css.properties.display.table\_values

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

### css.properties.display.grid

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

### css.properties.display.flex

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

### css.properties.display.ruby\_values

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

### Suporte de grade

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

### css.properties.display.table\_values

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

### css.properties.display.grid

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

### css.properties.display.flex

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

### css.properties.display.ruby\_values

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

### Suporte de flex

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

### css.properties.display.table\_values

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

### css.properties.display.grid

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

### css.properties.display.flex

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

### css.properties.display.ruby\_values

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

### Suporte de ruby

### css.properties.display.multi-keyword\_values

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

### css.properties.display.flow-root

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

### css.properties.display.table\_values

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

### css.properties.display.grid

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

### css.properties.display.flex

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

### css.properties.display.ruby\_values

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

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

* `display`
    + `<display-outside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Conceitos básicos do Flexbox
* Conceitos básicos de layout de grade


::selection - CSS

::selection
===========

O pseudo-elemento CSS **`::selection`** aplica estilos para partes do documento que foram selecionadas pelo usuário (tal como clicar e arrastar o ponteiro do mouse através de um texto.

```css
::selection {
  background-color: cyan;
}
```

Propriedades permitidas
-----------------------

Apenas certas propriedades podem ser usadas com o `::selection`:

* `color`
* `background-color`
* `cursor`
* `caret-color` (en-US)
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color` (en-US)
* `text-shadow`

>
> **Warning:** Em particular, `background-image` (en-US) é ignorada.
>
>
>

Sintaxe
-------
```

/* Sintaxe legado do Firefox (até a versão 61) */
::-moz-selection

Error: could not find syntax for this item
```

Exemplo
-------

### HTML

```html
Esse texto tem estilos especiais quando selecionado.
<p>Tente selecionando também o texto nesse parágrafo.</p>
```

### CSS
```

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}
```

```css
/\* Texto selecionado dourado com o fundo vermelho \*/
::selection {
  color: gold;
  background-color: red;
}

/\* Texto selecionado branco com o fundo azul \*/
p::selection {
  color: white;
  background-color: blue;
}
```

### Resultado

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

**Não substitua os estilos de texto selecionados por razões puramente estéticas** — os usuários podem personalizá-los para atender às suas necessidades. Para pessoas com problemas cognitivos ou com menos conhecimento tecnológico, alterações inesperadas nos estilos de seleção podem prejudicar sua compreensão da funcionalidade.

Se substituído, é importante garantir que a **taxa de contraste** entre o texto e as cores de plano de fundo da seleção seja alta o suficiente para que pessoas com condições de baixa visão possam lê-lo.

A taxa de contraste da cor é encontrada comparando a luminosidade do texto selecionado e as cores de fundo do texto selecionado. Para atender às atuais Diretrizes de acessibilidade de conteúdo da Web (WCAG), o conteúdo de texto deve ter uma taxa de contraste de 4.5:1 ou 3:1 para texto maior, como títulos. (WCAG define texto grande entre 18,66 px e 24 px e negrito, ou 24 px ou maior.)

Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do primeiro plano do segundo plano

* WebAIM: Verificador de Constraste de Cor
* MDN Understanding WCAG,1.4: Facilite para os usuários vizualizarem o conteúdo, incluindo a separação do primeiro plano do segundo plano (em inglês). (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Especificações
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

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

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

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

* `pointer-events` - permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo do evento do mouse.


:read-write - CSS

:read-write
===========

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 pseudo-classe CSS **`:read-write`** representa um elemento (como o `input` ou `textarea`) que é editável pelo usuário.

```css
input:read-write,
textarea:read-write {
  background-color: #bbf;
}

p:read-write {
  background-color: #bbf;
}
```

Sintaxe
-------

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

### Confirmando informações do formulário em controles read-only/read-write

Ao utilizar os controles de formulário `readonly` permite que o usuário verifique e verifique as informações que eles podem ter inserido em um formulário anterior (por exemplo: Detalhes de envio), enquanto ainda pode enviar as informações junto com o resto do formulário. Nós fazemos exatamente isso no exemplo abaixo.

A pseudo-classe `:read-only` *(:somente-leitura)* é usada para remover todo o estilo que faz com que as entradas pareçam campos clicáveis, fazendo com que pareçam outro parágrafo *somente-leitura*. A pseudo-classe `:read-write` *(:leitura-escrita)* por outro lado, é usado para fornecer um estilo mais agradável para a `<textarea>`.

```css
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}
```

Você pode encontrar o código fonte completo em readonly-confirmation.html (disponível em inglês); isso torna assim:

### Estilizar controle não formal de read-write

Este seletor não seleciona apenas `<input>`/`<textarea>` elementos - ele selecionará qualquer elemento que possa ser editado pelo usuário, como um `<p>` elemento com `contenteditable` definido sobre ele.

```html
<p contenteditable>Este parágrafo é editável; é read-write.</p>

<p>Este parágrafo não é editável; é read-only.</p>
```

```css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-read-write |
| Selectors Level 4 # rw-pseudos |

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

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

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

* `:read-only` (en-US)
* Atributo HTML `contenteditable`.


-webkit-text-security - CSS

-webkit-text-security
=====================

**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.

**`-webkit-text-security`** é uma propriedade CSS não padronizada que ofusca caracteres em um campo `<form>` (en-US) (como `<input>` ou `<textarea>`) substituindo eles com uma forma. Afeta apenas campos que não são `type=password`.

Sintaxe
-------

```css
-webkit-text-security: circle;
-webkit-text-security: disc;
-webkit-text-security: square;
-webkit-text-security: none;
```

Exemplo
-------

Tente digitar no campo abaixo. Se o seu navegador suportar essa propriedade, os caracteres deverão ser visualmente substituídos por quadrados.

### HTML

```html
<label for="name">Name:</label> <input type="text" name="name" id="name" />
```

### CSS

```css
input {
  -webkit-text-security: square;
}
```

### Result

Especificação
-------------

*Não faz parte de nenhuma especificação.*

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

Suportado em navegadores baseados no WebKit e Blink.

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

* WebKit CSS extensions (en-US)


Display - CSS

Display
=======

A propriedade **`display`** CSS define se um elemento é tratado como um bloco ou elemento inline (en-US) e o layout usado para seus filhos, como layout de fluxo (en-US), grid ou flex.

Formalmente, a propriedade **`display`** define os *tipos de exibição* internos e externos de um elemento. O tipo externo define a participação de um elemento no layout de fluxo (en-US); o tipo interno define o layout dos filhos. Alguns valores de `display` são totalmente definidos em suas próprias especificações individuais; por exemplo, o detalhe do que acontece quando `display: flex` é declarado é definido na especificação CSS Flexible Box Model.

Sintaxe
-------

A propriedade CSS `display` é especificada usando valores de palavra-chave.

```css
/\* valores pré-compostos \*/
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/\* geração de caixas \*/
display: none;
display: contents;

/\* sintaxe de dois valores \*/
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/\* outros valores \*/
display: table;
display: table-row; /\* todos os elementos da tabela têm um valor de exibição CSS equivalente \*/
display: list-item;

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

Valores agrupados
-----------------

Os valores de palavra-chave podem ser agrupados em seis categorias de valor.

### Fora

`<display-outside>`

essas palavras-chave especificam o tipo de exibição externa do elemento, que é essencialmente sua função no layout de fluxo:

`block`

O elemento gera uma caixa de elemento de bloco, gerando quebras de linha antes e depois do elemento quando no fluxo normal.

`inline`

O elemento gera uma ou mais caixas de elemento em linha que não geram quebras de linha antes ou depois de si mesmas. No fluxo normal, o próximo elemento estará na mesma linha se houver espaço.

**Nota:** Navegadores que suportam a sintaxe de dois valores, ao localizar apenas o valor externo, como quando `display: block` ou `display: inline` é especificado, definirão o valor interno como `flow`.
 Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento para ser bloco, você esperaria que os filhos desse elemento participassem do bloco e do layout de fluxo normal embutido.

### Lado de dentro

`<display-inside>`

Estas palavras-chave especificam o tipo de exibição interna do elemento, que define o tipo de contexto de formatação em que seu conteúdo é apresentado (supondo que seja um elemento não substituído):

`flow`
Experimental

O elemento apresenta seu conteúdo usando o layout de fluxo (layout de bloco e linha).

Se seu tipo de exibição externa for `inline` ou `run-in`, e estiver participando de um bloco ou contexto de formatação inline, ele gerará uma caixa inline. Caso contrário, gera uma caixa de contêiner de bloco.

Dependendo do valor de outras propriedades (como `position`, `float` ou `overflow`) e se ele próprio está participando em um contexto de formatação em bloco ou em linha, ele estabelece um novo contexto de formatação de bloco (en-US) (BFC) para seu conteúdo ou integra seu conteúdo em seu contexto de formatação pai.

`flow-root`

O elemento gera uma caixa de elemento de bloco que estabelece um novo contexto de formatação de bloco (en-US), definindo onde está a raiz de formatação.

`table`

Esses elementos se comportam como elementos HTML `<table>`. Ele define uma caixa de nível de bloco.

`flex`

O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo flexbox.

`grid`

O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo de grade.

`ruby`
Experimental

O elemento se comporta como um elemento inline e apresenta seu conteúdo de acordo com o modelo de formatação ruby. Ele se comporta como os elementos HTML `<ruby>` correspondentes.

**Nota:** Navegadores que suportam a sintaxe de dois valores, ao encontrar apenas o valor interno, como quando `display: flex` ou `display: grid` é especificado, definirão seu valor externo como `block`.
 Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento como `display: grid`, você esperaria que a caixa criada no contêiner da grade fosse uma caixa de nível de bloco.

### Item de lista

`<display-listitem>`

O elemento gera uma caixa de bloco para o conteúdo e uma caixa inline de item de lista separada.

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

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

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

### Interno

`<display-internal>`

 Alguns modelos de layout como `table` e `ruby` possuem uma estrutura interna complexa, com vários papéis diferentes que seus filhos e descendentes podem preencher.
 Esta seção define os valores de exibição "internos", que só têm significado dentro desse modo de layout específico.

`table-row-group`

Esses elementos se comportam como `<tbody>` (en-US) elementos HTML.

`table-header-group`

Esses elementos se comportam como `<thead>` (en-US) elementos HTML.

`table-footer-group`

Esses elementos se comportam como `<tfoot>` elementos HTML.

`table-row`

Esses elementos se comportam como `<tr>` (en-US) elementos HTML.

`table-cell`

Esses elementos se comportam como `<td>` (en-US) elementos HTML.

`table-column-group`

Esses elementos se comportam como `<colgroup>` (en-US) elementos HTML.

`table-column`

Esses elementos se comportam como `<col>` (en-US) elementos HTML.

`table-caption`

Esses elementos se comportam como `<caption>` elementos HTML.

`ruby-base`
Experimental

Esses elementos se comportam como `<rb>` (en-US) elementos HTML.

`ruby-text`
Experimental

Esses elementos se comportam como `<rt>` (en-US) elementos HTML.

`ruby-base-container`
Experimental

Esses elementos são gerados como caixas anônimas.

`ruby-text-container`
Experimental

Esses elementos se comportam como `<rtc>` (en-US) elementos HTML.

### Caixa

`<display-box>`

Esses valores definem se um elemento gera caixas de exibição.

`contents`

Esses elementos não produzem uma caixa específica por si mesmos. Eles são substituídos por sua pseudocaixa e suas caixas filhas. Observe que a especificação CSS Display Level 3 define como o valor `contents` deve afetar os "elementos incomuns" — elementos que não são renderizados puramente por conceitos de caixa CSS, como elementos substituídos. Consulte Apêndice B: Efeitos da exibição: conteúdo sobre elementos incomuns para obter mais detalhes.

*Devido a um bug nos navegadores, isso removerá o elemento da árvore de acessibilidade - os leitores de tela não verão o que está dentro. Consulte a seção Preocupações de acessibilidade abaixo para obter mais detalhes.*

`none`

 Desativa a exibição de um elemento para que não tenha efeito no layout (o documento é renderizado como se o elemento não existisse). Todos os elementos descendentes também têm sua exibição desligada.
 Para que um elemento ocupe o espaço que normalmente ocuparia, mas sem realmente renderizar nada, use a propriedade `visibility`.

### Pré-composto

`<display-legacy>`

CSS 2 usava uma palavra-chave única, sintaxe pré-composta para a propriedade `display`, exigindo palavras-chave separadas para variantes de nível de bloco e nível inline do mesmo modo de layout.

`inline-block`

O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo ao redor como se fosse uma única caixa em linha (comportando-se como um elemento substituído faria).

É equivalente a `inline flow-root`.

`inline-table`

O valor `inline-table` não possui um mapeamento direto em HTML. Ele se comporta como um elemento HTML `<table>`, mas como uma caixa embutida, em vez de uma caixa em nível de bloco. Dentro da caixa da tabela há um contexto de nível de bloco.

É equivalente a `tabela inline`.

`inline-flex`

O elemento se comporta como um elemento inline e apresenta seu conteúdo de acordo com o modelo flexbox.

É equivalente a `inline flex`.

`inline-grid`

O elemento se comporta como um elemento inline e apresenta seu conteúdo de acordo com o modelo de grade.

É equivalente a `inline grid`.

### Qual sintaxe você deve usar agora?

A especificação de Nível 3 detalha dois valores para a propriedade `display` — habilitando explicitamente a especificação do tipo de exibição externa e interna — mas isso ainda não é bem suportado pelos navegadores.

Os métodos `<display-legacy>` pré-compostos permitem os mesmos resultados com valores de palavra-chave única e devem ser favorecidos pelos desenvolvedores até que os dois valores de palavra-chave sejam melhor suportados. Por exemplo, usando dois valores, você pode especificar um contêiner flexível em linha da seguinte forma:

```css
.container {
  display: inline flex;
}
```

Atualmente, isso pode ser especificado usando um único valor.

```css
.container {
  display: inline-flex;
}
```

Para obter mais informações sobre essas alterações na especificação, consulte o artigo Adapting to the new two-value sintax of display (en-US).

### Global

```css
/\* Valores globais \*/
display: inherit;
display: initial;
display: unset;
```

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

As páginas individuais para os diferentes tipos de valor que o `display` pode ter definido apresentam vários exemplos desses valores em ação — consulte a seção Sintaxe. Além disso, consulte o material a seguir, que abrange os vários valores de exibição em profundidade.

* Adaptando-se à nova sintaxe de exibição de dois valores (en-US)
### Layout de fluxo CSS (exibir: bloquear, exibir: embutido)

* Block and Inline Layout in Normal Flow (en-US)
* Flow Layout and Overflow (en-US)
* Layout de fluxo e modos de escrita (en-US)
* Contextos de formatação explicados (en-US)
* Em fluxo e fora de fluxo (en-US)
### display: flex

* Conceitos básicos do flexbox
* Alinhamento de itens em um contêiner flexível
* Controle de proporções de itens flexíveis ao longo do eixo principal (en-US)
* Mastering Wrapping of Flex Items (en-US)
* Ordering Flex Items (en-US)
* Relação do flexbox com outros métodos de layout (en-US)
* Casos de uso típicos do Flexbox (en-US)
### display: grid

* Conceitos básicos de layout de grade
* Relação com outros métodos de layout
* Posicionamento baseado em linha (en-US)
* Áreas de modelo de grade (en-US)
* Layout usando linhas de grade nomeadas (en-US)
* Colocação automática no layout da grade (en-US)
* Alinhamento da caixa no layout da grade (en-US)
* Grades, valores lógicos e modos de escrita (en-US)
* Layout e acessibilidade da grade CSS (en-US)
* Layout de grade CSS e aprimoramento progressivo (en-US)
* Realizando layouts comuns usando grades (en-US)
Preocupações de acessibilidade
------------------------------

### display: none

Usar um valor `display` de `none` em um elemento irá removê-lo da árvore de acessibilidade (en-US). Isso fará com que o elemento e todos os seus descendentes não sejam mais anunciados pela tecnologia de leitura de tela.

Se você deseja ocultar visualmente o elemento, uma alternativa mais acessível é usar uma combinação de propriedades para remover visualmente da tela, mas mantenha-o analisável por tecnologia assistiva, como leitores de tela.

### display: contents

As implementações atuais na maioria dos navegadores removerão da árvore de acessibilidade (en-US) qualquer elemento com um valor `display` de `contents` (mas os descendentes permanecerão). Isso fará com que o próprio elemento não seja mais anunciado pela tecnologia de leitura de tela. Este é um comportamento incorreto de acordo com a especificação CSS.

* Marcação mais acessível com exibição: conteúdo | Esconda de Vries
* Exibir: o conteúdo não é uma redefinição de CSS | Adrian Roselli
### Tabelas

Alterar o valor `display` de um elemento `<table>` para `block`, `grid` ou `flex` alterará sua representação na árvore de acessibilidade. Isso fará com que a mesa não seja mais anunciada corretamente pela tecnologia de leitura de tela.

* Pequena nota sobre o que as propriedades de exibição CSS fazem com a semântica da tabela — The Paciello Group
* Conteúdo oculto para melhor a11y | Vá fazer coisas
* MDN Understanding WCAG, Diretriz 1.3 explicações (en-US)
* Entendendo o Critério de Sucesso 1.3.1 | W3C Understanding WCAG 2.0
Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | `inline` |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified. |
| Animation type | Discrete behavior except when animating to or from `none` is visible for the entire duration |

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

display =
  [ (en-US) <display-outside> || (en-US) <display-inside> ] (en-US)         | (en-US)
  <display-listitem>                                | (en-US)
  <display-internal>                                | (en-US)
  <display-box>                                     | (en-US)
  <display-legacy>                                  | (en-US)
  <display-outside> || (en-US) [ (en-US) <display-inside> | (en-US) math ] (en-US)

<display-outside> =
  block   | (en-US)
  inline  | (en-US)
  run-in

<display-inside> =
  flow       | (en-US)
  flow-root  | (en-US)
  table      | (en-US)
  flex       | (en-US)
  grid       | (en-US)
  ruby

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

<display-internal> =
  table-row-group      | (en-US)
  table-header-group   | (en-US)
  table-footer-group   | (en-US)
  table-row            | (en-US)
  table-cell           | (en-US)
  table-column-group   | (en-US)
  table-column         | (en-US)
  table-caption        | (en-US)
  ruby-base            | (en-US)
  ruby-text            | (en-US)
  ruby-base-container  | (en-US)
  ruby-text-container

<display-box> =
  contents  | (en-US)
  none

<display-legacy> =
  inline-block  | (en-US)
  inline-table  | (en-US)
  inline-flex   | (en-US)
  inline-grid

```

Exemplos
--------

### exibir comparação de valores

Neste exemplo, temos dois elementos de contêiner em nível de bloco, cada um com três filhos embutidos. Abaixo disso, temos um menu de seleção que permite aplicar diferentes valores `display` aos contêineres, permitindo comparar e contrastar como os diferentes valores afetam o layout do elemento e de seus filhos.

Incluímos `padding` e `background-color` nos contêineres e seus filhos, para que seja mais fácil ver o efeito que os valores de exibição estão tendo.

**Nota:** não incluímos nenhuma sintaxe moderna de dois valores, pois o suporte a ela ainda é bastante limitado.

#### HTML

```html
<article class="container">
  <span>Primeiro</span>
  <span>Segundo</span>
  <span>Terceiro</span>
</article>

<article class="container">
  <span>Primeiro</span>
  <span>Segundo</span>
  <span>Terceiro</span>
</article>

<div>
  <label for="display">Escolha um valor de exibição:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>table</option>
    <option>list-item</option>
  </select>
</div>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}
```

#### JavaScript

```js
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();
```

#### Resultado

**Nota:** você pode encontrar mais exemplos nas páginas para cada tipo de dados de exibição separado, linkado acima.

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

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

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

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

* Layout de bloco e inline no fluxo normal (en-US)
* Introdução aos contextos de formatação (en-US)
* `visibility`, `float`, `position`
* `grid`, `flex`


letter-spacing - CSS

letter-spacing
==============

A propriedade CSS **`letter-spacing`** específica o comportamento do espaçamento entre caracteres de texto.

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

Syntax
------

```css
/\* Keyword value \*/
letter-spacing: normal;

/\* <length> values \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/\* Global values \*/
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
```

### Values

`normal`

O espaçamento de letras normal para a fonte atual. Ao contrário de um valor de 0, essa palavra-chave permite que o agente do usuário altere o espaço entre os caracteres para justificar o texto.

`<length>` (en-US)

Especifica o espaço adicional entre caracteres, além do espaço padrão entre os caracteres. Os valores podem ser negativos, mas pode haver limites específicos da implementação. Os agentes de usuário podem não aumentar ou diminuir o espaço inter-personagem para justificar o texto.

### Formal syntax
```

letter-spacing =
  normal    | (en-US)
  <length> (en-US)

```

Examples
--------

### HTML

```html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
```

### CSS

```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```

### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | an optimum value consisting of either an absolute length or the keyword `normal` |
| Animation type | a length |

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

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

See also
--------

* `font-kerning`


Seletores CSS - CSS

Seletores CSS
=============

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

Seletores Básicos
-----------------

Seletor por tag

 Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
 **Sintaxe:** `nome-da-tag`
**Exemplo:** `input` corresponderá a qualquer elemento `<input>`.

Seletor por classe

 Este seletor básico escolhe elementos baseados no valor de seu atributo `classe`. **Sintaxe:** `.nome-da-classe`
**Exemplo:** `.index` irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).

Seletor por ID

 Este seletor básico escolhe nós baseados no valor do atributo `id`. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
 **Sintaxe:** `#nome-do-id`
**Exemplo:** `#toc` irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).

Seletores universais

 Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.
 **Sintaxe:** `* ns|* *|*`
**Exemplo:** `*` irá corresponder a todos os elementos do documento.

Seletores por atributo

 Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
 **Sintaxe:** `[atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]`
**Exemplo:** `[autoplay]` irá corresponder a todos os elementos que possuirem o atributo `autoplay` (para qualquer valor).

Combinadores
------------

Seletores de irmãos adjacentes (en-US)

 O combinador `+` seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
 **Sintaxe:** `A + B`
**Exemplo:** `ul + li` irá corresponder a qualquer elemento `<li>` que segue imediatamente após um elemento `<ul>`.

Seletores gerais de irmãos

 O combinador `~` seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
 **Sintaxe:** `A ~ B`
**Exemplo:** `p ~ span` irá corresponder a todo elemento `<span>` que seguir um elemento `<p>` dentro de um mesmo elemento pai.

Seletor de filhos (en-US)

 O combinador `>` seleciona nós que são filhos diretos do elemento especificado anteriormente.
 **Sintaxe:** `A > B`
**Exemplo:** `ul > li` irá corresponder a todo elemento `<li>` que estiver diretamente dentro de um elemento `<ul>` especificado.

Seletor de descendentes (en-US)

O combinador " " seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto). **Sintaxe:** `A B`**Exemplo:**`div span` irá corresponder a todo e qualquer elemento `<span>` que estiver dentro do elemento `<div>`.

Pseudo-classes
--------------

Pseudo-classes permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.

Pseudo-elementos
----------------

Pseudo-elementos são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.

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

| Specification |
| --- |
| Selectors Level 4  |


Seletores de classe - CSS

Seletores de classe
===================

O **seletor de classes** CSS corresponde aos elementos com base no conteúdo de seus atributos `class.`

```css
/\* Todos os elementos com class="espaçoso" \*/
.espaçoso {
  margin: 2em;
}

/\* Todos os elementos <li> com class="espaçoso" \*/
li.espaçoso {
  margin: 2em;
}

/\* Todos os elementos <li> cujo conteúdo do atributo class possua "espaçoso" e "elegante" \*/
/\* Por exemplo, class="elegante antigo espaçoso" \*/
li.espaçoso.elegante {
  margin: 2em;
}
```

Sintaxe
-------
```

.classe_nome { propriedades de estilo }
```

Observe que isso é o mesmo que `seletor de atributo`:
```

[classe~=classe_nome] { propriedades de estilo  }
```

Exemplo
-------

### CSS

```css
.vermelho {
  color: #f33;
}

.amarelo-bg {
  background: #ffa;
}

.elegante {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
```

### HTML

```html
<p class="vermelho">Este parágrafo tem o texto vermelho.</p>
<p class="vermelho amarelo-bg">
  Este parágrafo possui texto em vermelho e fundo amarelo.
</p>
<p class="vermelho elegante">
  Este parágrafo possui texto em vermelho e uma propriedade de estilo
  "elegante".
</p>
<p>Este é um parágrafo comum.</p>
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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


:hover - CSS

:hover
======

Resumo
------

A pseudo-classe `:hover` corresponde quando o usuário designa um elemento com um dispositivo apontador, mas não necessariamente o ativa. Este estilo pode ser substituído por qualquer outra pseudo-classe de link-relacionados, isto é `:link`, `:visited`, e `:active`, aparecendo em regras subsequentes. Na ordem para estilizar apropriadamente links, você precisa colocar a regra`:hover`depois das regras `:link` e `:visited` mas antes da regra `:active`, como definido pela ordem *LVHA*: `:link — :visited — :hover — :active.`

A pseudo-class `:hover` pode ser aplicada a qualquer pseudo-elemento.
Experimental
.

User agents visuais como Firefox, Internet Explorer, Safari, Opera ou Chrome, aplicam o estilo associado quando o cursor(mouse pointer) passa sobre um elemento.

**Nota:** Em telas de toque (touch screens) :hover é impossível ou problemático. Dependendo do navegador a pseudo-classe :hover pode nunca funcionar, ou funcionar apenas por um curto momento depois de "tocar" um elemento, ou podem continuar a funcionar mesmo depois que o usuário pare de "tocar" o elemento até que o usuário toque outro elemento. Como dispositivos touchscreen são comuns, é importante para desenvolvedores web não terem conteúdos acessíveis apenas quando passamos sobre ele, uma vez que esse conteúdo é mais complicado ou impossível de acessar para usuários desses dispositivos.

Exemplos
--------

```css
:link:hover {
  outline: dotted red;
}

.foo:hover {
  background: gold;
}
```

### Menu dropdown

Com a pseudo-classe`:hover`você pode criar algoritmos complexos de cascata. Esta é uma técnica comumente usada, por exemplo, para criar **menus dropdown com CSS** puro (apenas utilizando CSS, sem usar JavaScript). A essência desta técnica é criação de uma regra como a seguinte:

```css
div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}
```

para ser aplicada a uma estrutura HTML como a seguinte:

```html
<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
```

Veja nosso exemplo de menu dropdown baseado em CSS para entender melhor.

### Galeria com imagens full-size e previews

Você pode usar a pseudo-classe `:hover` para construir uma galeria de imagem, exibindo imagens full-size apenas quando o mouse passa sobre as imagens. Veja esse exemplo para uma possível dica.

**Nota:** Para efeitos análogos, mas baseado na pseudo-classe `:checked` (aplicada para esconder radioboxes), veja esse demo, tirado desta página En/CSS/:checked.

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

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

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

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


:only-of-type - CSS

:only-of-type
=============

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

A pseudo-classe CSS `:only-of-type` representa qualquer elemento que não possui irmãos de um determinado tipo.

Sintaxe
-------
```

:only-of-type { propriedades}
```

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

| Specification |
| --- |
| Selectors Level 4 # only-of-type-pseudo |

Navegadores compatíveis
-----------------------

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

Ver também
----------

* `:nth-of-type`, `:first-of-type`, `:last-of-type`


font-variation-settings - CSS

font-variation-settings
=======================

A propriedade CSS **`font-variation-settings`** fornece controle de baixo nível sobre características de variable font (en-US), especificando os nomes dos quatro eixos das características que você deseja variar, juntamente com seus valores.

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

**Nota:** This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. `font-weight`, `font-style` (en-US)).

**Nota:** font characteristics set using `font-variation-settings` will always override those set using the corresponding basic font properties, e.g. `font-weight`, no matter where they appear in the cascade. In some browsers, this is currently only true when the `@font-face` declaration includes a `font-weight` range.

Sintaxe
-------

```css
/\* Usar as configurações padrão \*/
font-variation-settings: normal;

/\* Definir valores para os nomes dos eixos de fontes variáveis \*/
font-variation-settings: "XHGT" 0.7;

/\* Valores globais \*/
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;
```

### Values

O valor desta propriedade pode assumir uma de duas formas:

`normal`

O texto é colocado usando as configurações padrão.

`<string> <number>`

Ao renderizar texto, a lista de nomes dos eixos de fontes variáveis é passada para o mecanismo de layout de texto para ativar ou desativar os recursos de fonte. Cada configuração é sempre um ou mais pares que consistem em um `<string>` (en-US) de 4 caracteres ASCII seguidos por um `<number>` indicando o valor do eixo a ser definido. Se a `<string>` tiver mais ou menos caracteres ou contiver caracteres fora do intervalo de códigos U+20 - U+7E, toda a propriedade será inválida. O `<number>` pode ser fracionário ou negativo, dependendo do intervalo de valores disponível em sua fonte, conforme definido pelo designer da fonte.
```

font-variation-settings =
  normal                        | (en-US)
  [ (en-US) <opentype-tag> <number> ] (en-US)# (en-US)

<opentype-tag> =
  <string> (en-US)

```

Eixos registrados e personalizados
----------------------------------

Os eixos de fontes variáveis vêm em dois tipos: **registrados** e **personalizados**.

Os eixos registrados são os mais comumente encontrados - comuns o suficiente para que os autores das especificações considerassem que valia a pena padronizar. Observe que isso não significa que o autor precise incluir tudo isso em sua fonte.

Aqui estão os eixos registrados, juntamente com suas propriedades CSS correspondentes:

| Tag do Eixo | Propriedade CSS |
| --- | --- |
| "wght" | `font-weight` |
| "wdth" | `font-stretch` (en-US) |
| "slnt" (slant) | `font-style` (en-US): `oblique + angle` |
| "ital" | `font-style` (en-US): `italic` |
| "opsz" | `font-optical-sizing` (en-US) |

Os eixos personalizados podem ser qualquer coisa que o designer da fonte deseje variar em sua fonte, por exemplo, alturas ascendentes ou descendentes, o tamanho das serifas ou qualquer outra coisa que possam imaginar. Qualquer eixo pode ser usado desde que seja dado um eixo exclusivo de 4 caracteres. Alguns acabam se tornando mais comuns e podem até se registrar com o tempo.

**Nota:** As tags de eixo registrados são identificadas usando tags minúsculas, enquanto os eixos personalizados devem receber tags maiúsculas. Observe que os designers de fontes não são forçados a seguir essa prática de maneira alguma, e alguns não o fazem. O ponto importante aqui é que as tags de eixo diferenciam maiúsculas de minúsculas.

Exemplos
--------

Veja abaixo exemplos interativos que demonstram os eixos registrados. Você pode encontrar vários outros exemplos de fontes variáveis em nosso Variable fonts guide (en-US), v-fonts.com, e axis-praxis.org.

>
> **Warning:** **Aviso**: Para usar fontes variáveis em seu sistema operacional, você precisa verificar se está atualizado. Por exemplo, os sistemas operacionais Linux precisam da versão mais recente do Linux Freetype, e o macOS anterior à 10.13 não suportam fontes variáveis. Se o seu sistema operacional não estiver atualizado, você não poderá usar fontes variáveis em páginas da Web ou no Firefox Developer Tools.
>
>
>

### Peso (wght)

O CSS do exemplo a seguir pode ser editado para permitir que você mude os valores de peso da fonte.

### Inclinação (slnt)

O CSS do exemplo a seguir pode ser editado para permitir que você mude os valores oblíquos / oblíquos da fonte.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variation-settings-def |

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | a transform |

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

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

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

* Variable fonts guide (en-US)
* OpenType Font Variations Overview
* OpenType Design-Variation Axis Tag Registry


text-overflow - CSS

text-overflow
=============

Sumário
-------

A propriedade `text-overflow` do CSS determina como o conteúdo que ultrapassou a sua div e que não é mostrado ao usuário deve ser exibido. Ele pode ser cortado, mostrar reticências ou até mesmo exibir qualquer string definida pelo autor.

![text-overflow.png](/pt-BR/docs/Web/CSS/text-overflow/text-overflow.png)

O corte acontece na borda da caixa; para cortar no limite de caracteres de uma string personalizada, pode-se usar (`''`).

Essa propriedade afeta apenas o conteúdo que está ultrapassando o bloco ou a div no sentido da linha horizontal (não corta o texto na parte de baixo de um bloco ou div, por exemplo). O texto pode ultrapassar ou transbordar quando utilizado '`white-space:nowrap`' ou quando uma palavra for muito grande.

Essa propriedade do CSS não força um estouro para que ele ocorra. Para que isso aconteça, é necessário que o autor utilize algumas propriedades adicionais no elemento, como setar a propriedade overflow para hidden.

|  |  |
| --- | --- |
| Initial value | `clip` |
| Aplica-se a | block container elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Syntaxe
-------
```

Formal syntax:
```
text-overflow =
  clip      | (en-US)
  ellipsis

```

```
```

/* One-value syntax: the value describe the overflow performed at the end of the line (right end if ltr, left end if rtl) */
text-overflow: clip
text-overflow: ellipsis
text-overflow: "…"

/* Two-value syntax: the first value describes the overflow at the left end of the line,
                     the second at the right end. Directionality has no influence */

text-overflow: clip ellipsis
text-overflow: "…" "…"

text-overflow: inherit
```

### Values

`clip`

This keyword value indicates to truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. To truncate at the transition between two characters, the empty string value (`''`) must be used. The value `clip` is the default for this property.

`ellipsis`

This keyword value indicates to display ellipses (`'…'`, `U+2026 Horizontal Ellipsis`) to represent clipped text. The ellipsis is displayed inside the content area, shortening more the size of the displayed text. If there is not enough place to display ellipsis, they are clipped.

`<string>`
Experimental

The `<string>` (en-US) to be used to represent clipped text. The string is displayed inside the content area, shortening more the size of the displayed text. If there is not enough place to display the string itself, it is clipped.

Examples
--------

```css
p {
  white-space: nowrap;
  width: 100%;
  overflow: hidden; /\* "overflow" value must be different from "visible" \*/

  text-overflow: ellipsis;
}
```

| CSS value | `direction: ltr` | `direction: rtl` |
| --- | --- | --- |
| Expected Result | Live result | Expected Result | Live result |
| *visible overflow* | 1234567890 | 1234567890 | 0987654321 | 1234567890 |
| `text-overflow: clip` | t-o_clip.png | 123456 | t-o_clip_rtl.png | 1234567890 |
| `text-overflow: ''` | 12345 | 123456 | 54321 | 1234567890 |
| `text-overflow: ellipsis` | 1234… | 1234567890 | …4321 | 1234567890 |
| `text-overflow: '.'` | 1234. | 1234567890 | .4321 | 1234567890 |
| `text-overflow: clip clip` | 123456 | 1234567890 | 654321 | 1234567890 |
| `text-overflow: clip ellipsis` | 1234… | 1234567890 | 6543… | 1234567890 |
| `text-overflow: clip '.'` | 1234. | 1234567890 | 6543. | 1234567890 |
| `text-overflow: ellipsis clip` | …3456 | 1234567890 | …4321 | 1234567890 |
| `text-overflow: ellipsis ellipsis` | …34… | 1234567890 | …43… | 1234567890 |
| `text-overflow: ellipsis '.'` | …34. | 1234567890 | …43. | 1234567890 |
| `text-overflow: ',' clip` | ,3456 | 1234567890 | ,4321 | 1234567890 |
| `text-overflow: ',' ellipsis` | ,34… | 1234567890 | ,43… | 1234567890 |
| `text-overflow: ',' '.'` | ,34. | 1234567890 | ,53. | 1234567890 |

### Using the abbr tag of HTML5 along with text-overflow

We have the example of the use of abbr tag inside a div with width 250px;

```css
div {
  width: 250px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
}
```

```html
<div>
  <abbr title="https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-overflow"
 >https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-overflow</abbr
 >
</div>
```

The full path of the URL will be displayed over the mouse, and the screen will be printed as follows: `https://developer.mozilla.org/pt-BR/`...

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # text-overflow |

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

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

See also
--------

* CSS Reference index
* Related CSS properties: `overflow`, `white-space`


flex-flow - CSS

flex-flow
=========

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-flow`** é uma junção das propriedades `flex-direction` e `flex-wrap`.

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

Sintaxe
-------

```css
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'> and <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

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

### Valores

Consulte `flex-direction` e `flex-wrap` para ver os detalhes sobre os valores.

### Sintaxe formal
```

flex-flow =
  <'flex-direction'>  || (en-US)
  <'flex-wrap'>

```

Exemplos
--------

```css
elemento {
  /\* O eixo principal é a direção do bloco com main-start e main-end invertidos.
 \* Os itens flex estão dispostos em múltiplas linhas \*/
  flex-flow: column-reverse wrap;
}
```

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

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| Aplica-se a | flex containers |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `flex-direction`: as specified
* `flex-wrap`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `flex-direction`: discrete
* `flex-wrap`: discrete
 |

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

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

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

* Guia de Flexbox CSS: *Conceitos básicos de flexbox*
* Guia de Flexbox CSS: *Ordenando itens flex (en-US)*


ruby-align - CSS

ruby-align
==========

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

Summary
-------

A propriedade **`ruby-align`** do CSS define a distribuição dos direfentes elementos do ruby sobre a base.

|  |  |
| --- | --- |
| Initial value | `space-around` |
| Aplica-se a | ruby bases, ruby annotations, ruby base containers, ruby annotation containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |

Sintaxe
-------

```css
/\* Valores chave \*/
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/\* Valores globais \*/
ruby-align: inherit;
ruby-align: initial;
ruby-align: unset;
```

### Values

`start`

É uma palavra-chave indicando que o ruby será alinhado com o início do texto base.

`center`

É uma palavra-chave indicando que o ruby será alinhado no meio do texto base.

`space-between`

É uma palavra-chave indicando que o espaço extra será distruibuído entre os elementos do ruby.

`space-around`

É uma palavra-chave indicando que o espaço extra será distruibuído entre os elementos do ruby e em torno deles.

### Sintaxe formal
```

ruby-align =
  start          | (en-US)
  center         | (en-US)
  space-between  | (en-US)
  space-around

```

Exemplos
--------

Esse HTML irá renderizar diferentemente com cada valor do `ruby-align`:

```html
<ruby>
  <rb>Esse é um grande texto para verificar</rb>
  <rp>（</rp><rt>ruby curto</rt><rp>）</rp>
</ruby>
```

### Ruby alinhado no ínicio do texto base

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-align: start;
}
```

Isso dará o seguinte resultado:

### Ruby alinhado no centro do texto base

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-align: center;
}
```

Isso dará o seguinte resultado:

### Espaço extra distribuído entre os elementos do ruby

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-align: space-between;
}
```

Isso dará o seguinte resultado:

### Espaço extra distribuído entre os elementos do ruby e em torno deles

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-align: space-around;
}
```

Isso dará o seguinte resultado:

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

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |

Compatilibade de Navegador
--------------------------

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

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

* Elementos Ruby do HTML: `<ruby>`, `<rt>` (en-US), `<rp>` (en-US), and `<rtc>` (en-US).
* Propriedades Ruby do CSS: `ruby-position` (en-US), `ruby-merge`.


align-self - CSS

align-self
==========

A propriedade CSS **`align-self`** alinha itens-flex da linha flex alvo, sobreescrevendo o valor `align-items`. Se alguma dos eixos das margens do dado item está estabelecido como `auto`, então `align-self` é ignorado.

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

A propriedade não se aplica a caixas *block-level*, ou células de tabela.

Sintaxe
-------

```css
/\* valores de palavras-chave \*/
align-self: auto;
align-self: normal;

/\* Alinhamento de posicionamento \*/
/\* align-self não recebe valores left e right \*/
align-self: center; /\* Coloca o item em torno do centro \*/
align-self: start; /\* Coloca o item no início \*/
align-self: end; /\* Coloca o item no fim \*/
align-self: self-start; /\* Alinha o item flush no início \*/
align-self: self-end; /\* Alinha o item flush no fim \*/
align-self: flex-start; /\* Coloca o item flex no início \*/
align-self: flex-end; /\* Coloca o item flex no fim \*/

/\* Alinhamento a partir da baseline \*/
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /\* Estica itens de tamanho 'auto' para encaixar no container \*/

/\* Alinhamento com Oveflow \*/
align-self: safe center;
align-self: unsafe center;

/\* Valores globais \*/
align-self: inherit;
align-self: initial;
align-self: unset;
```

### Valores

`auto`

O valor `align-items` é originado do valor de seu pai.

`normal`

O efeito dessa palavra-chave depende do modo de layout em que nos encontramos:

* Em layouts absolutamente posicionados, a palavra-chave se comporta como `start` em caixas absolutamente posicionadas *replaced*, e como `stretch` em caixas absolutamente posicionadas *all other*.
* Em posição estática de layouts absolutamente posicionados, a palavra-chave se comporta como `stretch`.
* Para itens-flex, a palavra-chave se comporta como `stretch`.
* Para itens-grid, essa palavra-chave leva ao comportamento similar ao de `stretch`, com exceção de caixas com aspect ratio ou tamanhos intrínsecos onde se comportam como `start`.
* A propriedade não se aplica para caixas *block-level*, e para células de tabela.

`self-start`

Alinha os itens de maneira a mesclar a borda do alinhamento do container correspondente com o lado inicial do item no eixo.

`self-end`

Alinha os itens de maneira a mesclar a borda do alinhamento do container correspondente com o lado final do item no eixo.

`flex-start`

A borda da margem inicial do item flex é mesclada com a borda inicial da linha.

`flex-end`

A borda da margem fim do item flex é mesclada com a borda fim da linha.

`center`

A caixa-margem do item flex é centralizada ao longo da linha no eixo transversal. Se o tamanho do item é superior to container flex, então ele irá transbordar de maneira equivalente em ambas direções.

`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 fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`stretch`

Caso o tamanho combinado dos itens ao longo do eixo transversal seja menor do que o tamanho do container de alinhamento, e caso o tamanho do item segue o estilo `auto`, seu tamanho cresce igualmente (mas não proporcionalmente), enquanto que ainda respeitando as restrições impostas por `max-height` (en-US)/`max-width` (ou a funcionalidade equivalente), de maneira que o tamanho combinado de todos itens tamanho-`auto` preencha exatamente o container de alinhamento ao longo do eixo transversal.

`safe`

Caso o tamanho do item supere o alinhamento do container, o item é alinhado como se o modo de alinhamento fosse `start`.

`unsafe`

Independente dos tamanhos relativos do item e do alinhamento do container, o valor do alinhmento dado é mantido.

### Sintaxe formal
```

align-self =
  auto                                  | (en-US)
  normal                                | (en-US)
  stretch                               | (en-US)
  <baseline-position>                   | (en-US)
  <overflow-position>? (en-US) <self-position>  | (en-US)
  anchor-center

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

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

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

```

Exemplo
-------

### HTML

```html
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>
```

### CSS

```css
section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-self-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

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

* 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)
* The `align-items` property


translate - CSS

translate
=========

A propriedade **`translate`** CSS do CSS, permite que você especifique transformações `translate` individualmente e independentemente da propriedade `transform`. É mais adequado para o uso de interface de usuário, e nos poupa quando se trata de lembrar a ordem exata que devemos especificar nos valores das funções de `transform`.

Syntax
------

```css
/\* Propriedades principais \*/
translate: none;

/\* Valores únicos \*/
translate: 100px;
translate: 50%;

/\* Dois valores \*/
translate: 100px 200px;
translate: 50% 105px;

/\* Três valores \*/
translate: 50% 105px 5rem;

/\* Valores Globais \*/
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;
```

### Valores

Único `<length-percentage>` (en-US) valor

Um `<length>` (en-US) ou `<percentage>` (en-US) que especifica o deslocamento `translate` ao longo do eixo-X. Equivalente a função `translate()` (2D translation) com um único valor especificado.

Dois `<length-percentage>` (en-US) valores

Dois `<length>` (en-US) ou `<percentage>` (en-US) que especifica os deslocametos `translate` ao longo dos eixos X e Y (respectivamente) de uma 2D translation. Equivalente a função `translate()` (2D translation) com dois valores especificados.

Três valores

Dois `<length-percentage>` (en-US) e um único `<length>` (en-US) valores que especifica os deslocamentos dos eixos X, Y, e Z (respectivamente) de uma 3D translation. Equivalente a função `translate3d()` (3D translation).

`none`

Especifica que nenhum deslocamento deva ser aplicado.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Percentages | refer to the size of bounding box |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

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

translate =
  none                                                | (en-US)
  <length-percentage> [ (en-US) <length-percentage> <length> (en-US)? (en-US) ] (en-US)? (en-US)

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

```

Exemplos
--------

### HTML

```html
<div>
  <p class="translate">Translation</p>
</div>
```

### CSS

```css
\* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.translate {
  transition: translate 1s;
}

div:hover .translate {
  translate: 200px 50px;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

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

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

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

* `scale` (en-US)
* `rotate` (en-US)
* `transform`

Nota: `skew` não é um valor independente de `transform`


Media queries - CSS

Media queries
=============

**Media Queries** (consultas de mídia ) são um módulo de CSS que definem expressões, permitindo ajustar visualizações a uma variedade específica de dispositivos de saída sem mudar o conteúdo.

Referências
-----------

### At-rules

* `@import`
* `@media` (en-US)
Guides
------

Usando Media Queries

Apresenta o que fazem as media queries (consultas de mídia) e explica as possíveis expressões.

Testing media queries (en-US)

Explains how to test a media query programmatically, from JavaScript.

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

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |


opacity - CSS

opacity
=======

Sumário
-------

A propriedade CSS **opacity** especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto.

O valor aplica-se ao elemento como um todo, incluindo seu conteúdo, apesar de o valor não ser herdado por elementos filhos. Assim, um elemento e seus elementos filhos têm todos a mesma opacidade relativa ao background do elemento, mesmo se o elemento e seus elementos filhos tiverem opacidades diferentes entre si.

Se você não quer aplicar a opacidade ao elemento filho - use isto:

```css
background: rgba(0, 0, 0, 0.4);
```

Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo contexto de empilhamento.

|  |  |
| --- | --- |
| Initial value | `1` |
| Aplica-se a | all elements |
| Inherited | não |
| Percentages | map to the range `[0,1]` |
| Computed value | The same as the specified value after clipping the `number` to the range [0.0, 1.0]. |
| Animation type | by computed value type |

Sintaxe
-------

```css
/\* Totalmente opaco \*/
opacity: 1;
opacity: 1;

/\* Translúcido \*/
opacity: 0.6;

/\* Totalmente transparente \*/
opacity: 0;
opacity: 0;

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

### Valores

`<number>`

É um `<number>` no intervalo de 0.0 a 1.0, sendo estes incluídos, representando a opacidade do canal, que é o valor de seu canal alfa. Qualquer valor fora do intervalo, apesar de válido, é aproximado ao valor mais próximo dentro do intervalo.

| Valor | Significado |
| --- | --- |
| `0` | O elemento é totalmente transparente (isto é, invisível). |
| Qualquer `<number>` entre 0 e 1 | O elemento é translúcido (isto é, o background é visível). |
| `1` | O elemento é totalmente opaco (sólido). |

### Sintaxe formal
```

opacity =
  <alpha-value>

<alpha-value> =
  <number>      | (en-US)
  <percentage> (en-US)

```

Exemplos
--------

### Exemplo básico

```css
div {
  background-color: yellow;
}
.light {
  opacity: 0.2; /\* Mal consegue ver o texto acima do background \*/
}
.medium {
  opacity: 0.5; /\* Vê o texto mais claramente acima do background \*/
}
.heavy {
  opacity: 0.9; /\* Vê o texto muito claramente acima do background \*/
}
```

```html
<div class="light">Você mal vê isso.</div>
<div class="medium">Isso é mais fácil de ver.</div>
<div class="heavy">Isso é muito fácil de ver.</div>
```

### Opacidade diferente com `:hover`

```css
img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /\* IE8 e anteriores \*/
  zoom: 1; /\* Ativa "hasLayout" no IE 7 e anteriores \*/
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
```

```html
<img
 src="//developer.mozilla.org/media/img/mdn-logo.png"
 alt="MDN logo"
 width="128"
 height="146"
 class="opacity" />
```

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

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

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

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

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

* MSDN Microsoft's filter:alpha(opacity=xx)


:empty - CSS

:empty
======

A pseudo-classe CSS **`:empty`** representa qualquer elemento que não tenha filhos. Aqui, filhos podem ser outros elementos ou blocos de texto (incluindo espaços em branco). Comentários e instruções de processamento não são considerados ao se determinar se um elemento é vazio.

```css
/\* Seleciona qualquer <div> que não tenha conteúdo \*/
div:empty {
  background: lime;
}
```

Sintaxe
-------

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

### HTML

```html
<div class="box"><!-- Eu serei verde. --></div>
<div class="box">Eu serei rosa.</div>
<div class="box">
  <!-- Eu serei rosa por causa do espaço em branco em volta desse comantário -->
</div>
```

### CSS
```

body {
  display: flex;
  justify-content: space-around;
}
```

```css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
```

### Resultado

Questões de acessibilidade
--------------------------

Tecnologias assistivas como leitores de tela não conseguem identificar e processar conteúdos interativos que estejam vazios. Todo conteúdo interativo deve ter um nome acessível, que é criado ao fornecer um valor de texto para o elemento pai do controle interativo (âncoras, botões, etc.). Nomes acessíveis expõem o controle interativo à árvore de acessibilidade (en-US), uma API que comunica informações importantes úteis para tecnologias assistivas.

The text that provides the interactive control's accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parseable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose.

* What is an accessible name? | The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

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

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


flex-direction - CSS

flex-direction
==============

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-direction`** define como os itens flexíveis são colocados no contêiner flexível, definindo o eixo principal e a direção (normal ou invertido).

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

Observe que os valores `row` e `row-reverse` são afetados pela direcionalidade do contêiner flexível. Se seu atributo `dir` for **`ltr`**, **`row`** representa o eixo horizontal orientado da esquerda para a direita, e `row-reverse` está orientado da direita para esquerda; Se seu atributo **`rtl`**, **`row`** representa o eixo orientado da direita para a esquerda e `row-reverse` da esquerda para a direita.

Syntax
------

```css
/\* The direction text is laid out in a line \*/
flex-direction: row;

/\* Like <row>, but reversed \*/
flex-direction: row-reverse;

/\* The direction in which lines of text are stacked \*/
flex-direction: column;

/\* Like <column>, but reversed \*/
flex-direction: column-reverse;

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

### Valores

Os seguintes valores são aceitos:

`row`

O eixo principal do flex container é definido para ser o mesmo que a direção do texto. Os **pontos de** **início** e **término** principais são iguais à direção do conteúdo.

`row-reverse`

Se comporta da mesma forma que `row` porém os **pontos de início** e **término** serão invertidos (permutados).

`column`

O eixo principal do flex container é igual ao eixo do bloco. Os **pontos de início** e **término** principais são iguais aos pontos de antes e depois do modo de escrita.

`column-reverse`

Se comporta da mesma forma que `column` porém os **pontos de início** e **término** serão invertidos (permutados).

### Formal syntax
```

flex-direction =
  row             | (en-US)
  row-reverse     | (en-US)
  column          | (en-US)
  column-reverse

```

Example
-------

### HTML

```html
<h4>This is a Column-Reverse</h4>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
  <div class="box1" style="background-color:red;">A</div>
  <div class="box1" style="background-color:lightblue;">B</div>
  <div class="box1" style="background-color:yellow;">C</div>
</div>
```

### CSS

```css
#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: column-reverse;
}

.box {
  width: 50px;
  height: 50px;
}

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: row-reverse;
}

.box1 {
  width: 50px;
  height: 50px;
}
```

### Result

Accessibility Concerns
----------------------

Usar a propriedade `flex-direction` com o valores de `row-reverse` or `column-reverse` vai criar uma desconexão entre a apresentação visual do conteúdo e a ordem do DOM. Isso afetará adversamente os usuários com problemas de visão navegando com o auxílio de tecnologia assistiva, como um leitor de tela. Se a oredem visual (CSS) for importante, os usuários de leitores de tela não terão acesso à ordem de leitura correta.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
Specifications
--------------

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

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

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

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: *Ordering flex items (en-US)*


:optional - CSS

:optional
=========

A pseudo-classe CSS **`:optional`** representa qualquer elemento `<input>`, `<select>`, ou `<textarea>` que não contenha o atributo `required`.

```css
/\* Selects qualquer <input> opcional \*/
input:optional {
  border: 1px dashed black;
}
```

Esta pseudo-classe é utilizada para estilizar campos do formulário que não são requeridos para sumissão.

**Nota:** A pseudo-classe `:required` seleciona campos do fumulário *requeridos*.

Sintaxe
-------

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

Veja `:invalid` como exemplo.

Referências de acessibilidade
-----------------------------

Se um formulário (en-US) contém `<input>` opcionais, inputs requeridos devem ser indicados utilizando o atriuto `required`. Isto garantirá que usuários que navegam com tecnologia de acessibilidade, como um leitor de tela, possam entender quais entradas devem ter o conteúdo validado para submeter o formulário com êxito.

Entradas requeridas devem ser indicadas visualmente, utilizando 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-optional |
| Selectors Level 4 # opt-pseudos |

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

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

Ver também
----------

* Outra pseudo-classes de validação relacionadas: `:required`, `:invalid`, `:valid`
* Validação de dados de formulário (en-US)


transition - CSS

transition
==========

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

Summary
-------

A propriedade de CSS**transition** é uma propriedade abreviada para `transition-property` (en-US), `transition-duration` (en-US), `transition-timing-function` e `transition-delay`. Ela permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usando pseudo-classes tais como `:hover` ou `:active`; ou dinamicamente, usando javascript.

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `transition-delay`: `0s`
* `transition-duration` (en-US): `0s`
* `transition-property` (en-US): all
* `transition-timing-function`: `ease`
* `transition-behavior` (en-US): `normal`
 |
| Aplica-se a | all elements, `::before` and `::after` pseudo-elements |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `transition-delay`: as specified
* `transition-duration` (en-US): as specified
* `transition-property` (en-US): as specified
* `transition-timing-function`: as specified
* `transition-behavior` (en-US): as specified
 |
| Animation type | Not animatable |

Syntax
------

```css
/\* Apply to 1 property \*/
/\* property name | duration \*/
transition: margin-left 4s;

/\* property name | duration | delay \*/
transition: margin-left 4s 1s;

/\* property name | duration | timing function | delay \*/
transition: margin-left 4s ease-in-out 1s;

/\* Apply to 2 properties \*/
transition:
  margin-left 4s,
  color 1s;

/\* Apply to all changed properties \*/
transition: all 0.5s ease-out;

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

Observe que a ordem é importante dentro dos itens nesta propriedade: o primeiro valor que pode ser analisado como tempo é atribuído ao `transition-duration` (en-US), duration e o segundo valor que pode ser analisado como tempo é atribuído ao `transition-delay`.

Veja como as coisas são manipuladas quando as listas de valores de propriedades não têm o mesmo comprimento. Em resumo, descrições de transição extras além do número de propriedades realmente sendo animadas são ignoradas.

### Formal syntax
```

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

<single-transition> =
  [ (en-US) none | (en-US) <single-transition-property> ] (en-US)  || (en-US)
  <time>                                   || (en-US)
  <easing-function>                        || (en-US)
  <time>

<single-transition-property> =
  all             | (en-US)
  <custom-ident> (en-US)

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

<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)

```

Examples
--------

Existem vários outros exemplos de transições CSS incluídas no artigo principal sobre CSS transitions.

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

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

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

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

See also
--------

* Using CSS transitions (en-US)
* `TransitionEvent` (en-US)


:out-of-range - CSS

:out-of-range
=============

A pseudo classe (en-US) de CSS **`:out-of-range`** representa um elemento de `<entrada>` cujo valor atual esta fora dos limites especificados pelo `min` e `max` atributos

```css
/\* Selecione qualquer <entrada>, mas somente quando estiver dentros dos
 limites especificados, e quando este valor estiver fora deste limite \*/
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}
```

Essa pseudo classe é muito útil por dar ao usuario uma indicacão visual de que o valor atual esta fora dos limites permitidos

**Nota:** Esta pseudo classe se aplica somente a elementos que tem (ou podem ter) uma limitacao. Na falta dessa de algo como essa limitacao, o elemento nao tera como ficar "in-range"(dentro dos limites) ou "out-of-range" (fora dos limites).

Sintaxe
-------

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

### HTML

```html
<form action="" id="form1">
  <p>Valores entre 1 e 10 são validos.</p>
  <ul>
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12" />
      <label for="value1">Seu valor está </label>
    </li>
  </ul>
</form>
```

### CSS

```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "dentro dos limites.";
}

input:out-of-range + label::after {
  content: "Fora dos limites!";
}
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

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

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

See also
--------

* `:in-range` (en-US)
* Form data validation (en-US)