recursal/MDN huggingface dataset:
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 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.
: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`
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
==========

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

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

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

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