recursal/MDN huggingface dataset:
prefers-color-scheme
====================

**Nota:** Se você definiu `privacy.resistFingerprinting` como **true**, `prefers-color-scheme` será substituída pela `light`.

O **`prefers-color-scheme`** CSS media feature é usado para detectar se o usuário solicitou que o sistema use um tema de cores claras ou escuras.

Syntax
------

`no-preference`

Indica que o usuário não fez nenhuma preferência conhecida pelo sistema. Este valor da palavra-chave é avaliado como `false` no contexo booleano.

`light`

Indica que o usuário notificou o sistema de que prefere uma interface com um tema claro.

`dark`

Indica que o usuário notificou o sistema de que prefere uma interface com um tema escuro.

Exemplos
--------

Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temáticos de acordo com a preferência do esquema de cores do usuário.

### HTML


```html
<div class="day">Dia (inicial)</div>
<div class="day light-scheme">Dia (modificar e utilizar um tema claro)</div>
<div class="day dark-scheme">Dia (modificar e utilizar um tema escuro)</div>
<br />

<div class="night">Noite (inicial)</div>
<div class="night light-scheme">Noite (modificar e utilizar um tema claro)</div>
<div class="night dark-scheme">Noite (modificar e utilizar um tema escuro)</div>
```

### CSS


```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### Resultado

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

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

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

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

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

* Video tutorial: Coding a Dark Mode for your Website
* Redesigning your product and website for dark mode
* Changing color schemes in Windows, macOS and Android.
aspect-ratio
============

A característica de mídia CSS **`aspect-ratio`** pode ser utilizada para testar a taxa de aspecto de sua viewport.

Sintaxe
-------

A característica de `aspect-ratio` é especificada como um valor de `<ratio>` (en-US) representando a relação de largura-para-altura em aspecto à sua viewport. É uma característica de diferencial, o que significa que você pode fazer uso de variações pré-fixadas de **`min-aspect-ratio`** e **`max-aspect-ratio`** para definir os os seus valores mínimos e máximos, respectivamente.

Exemplo
-------

O exemplo abaixo está contido em um `<iframe>`, que cria o seu próprio viewport. Redimensione o `<iframe>` para ver o `aspect-ratio` em ação !

### HTML


```html
<div id="inner">
  Observe este elemento, conforme voc&ecirc; altera a largura e a altura da sua
  viewport.
</div>
```

### CSS


```css
/\* Taxa de aspecto mínima \*/
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /\* azul \*/
  }
}

/\* Taxa de aspecto máxima \*/
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /\* ciano \*/
  }
}

/\* Taxa de aspecto exata, coloque-a no final para evitar sobrescrita\*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /\* vermelho \*/
  }
}
```


```
<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />

<iframe
 id="outer"
 src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Observe este elemento, conforme voc&ecirc; altera a largura e a altura da sua viewport.</div>">
</iframe>
```


```
iframe {
  display: block;
}
```


```
outer.style.width = outer.style.height = "165px";

w.onchange = w.oninput = function () {
  outer.style.width = w.value + "px";
  wf.textContent = "width:" + w.value;
};
h.onchange = h.oninput = function () {
  outer.style.height = h.value + "px";
  hf.textContent = "height:" + h.value;
};
```

### Result

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

| Specification |
| --- |
| Media Queries Level 4 # aspect-ratio |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Modo de exibição (display-mode)
===============================

O recurso de mídia CSS `@media` (en-US) do modo de exibição pode ser usado para aplicar estilos com base no modo de exibição de um aplicativo. Você pode usar para prover uma consistente experiência de usuário entre abrir um site a partir de uma URL e um ícone desktop.

Esse recurso corresponde ao membro da exibição do manifesto do aplicativo da Web. Ambos aplicam-se ao contexto de navegação de nível superior e a qualquer contexto afilhado de navegação. O recurso de consulta aplica-se independentemente de onde um manifesto de aplicativo web está presente.

Sintaxe
-------

O recurso `display-mode` é especificado como um valor de uma palavra chave escolhido da lista abaixo.

| Modo de exibição | Descrição | Modo de exibição secundário |
| --- | --- | --- |
| `fullscreen` | Toda a área disponível da tela será usada e nada do agente-usuário (navegador) chrome é mostrado. | `standalone` |
| `standalone` | A aplicação irá parecer uma aplicação independente. Isso pode incluir a aplicação ter uma janela diferente, seu próprio ícone no menu de aplicações, etc. Neste modo, o navegador não irá mostrar os controles de navegação (como barra de endereço, botão voltar, botão página inicial, etc), mas pode incluir outros elementos gráficos como a barra de status. | `minimal-ui` |
| `minimal-ui` | A aplicação irá parecer uma aplicação independente, mas terá um conjunto mínimo de elementos gráficos (UI) para controlar a navegação. Esses elementos podem variar de acordo com o navegador. | `browser` |
| `browser` | A aplicação abre numa aba ou nova janela convencional do navegador, dependendo do navegador e da plataforma. | (nenhum) |

Exemplo
-------


```css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
```

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

| Specification |
| --- |
| Media Queries Level 5 # display-mode |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Navegação "Migalha de Pão"
==========================

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 navegação "migalha de pão" ajuda o usuário a enteder sua localização no site, fornecendo uma trilha de navegação de volta à pagina inicial.

![Links displayed inline with separators](/pt-BR/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation/breadcrumb-navigation.png)

Exigências
----------

Os itens tipicamente são exibidos em linha com um separador para indicar uma hierarquia entre páginas individuais.

Receita
-------

**Nota:** Baixe esse exemplo

Faça escolhas
-------------

Esse padrão é apresentado usando um layout flexível simples demonstrando como uma linha de CSS pode nos fornecer nossa navegação. Os separadores são adicionados usando o conteúdo gerado por CSS. Você pode alterá-las para qualquer separador que desejar.

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

Eu utilizei os atributos `aria-label` e `aria-current` para ajudar os usuários a entender o que é essa navegação e onde a página atual está na estrutura. Veja os links relacionados para mais informações.

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

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

Os vários métodos de layout têm diferente suporte para o navegador. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.

#### Flexbox

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

* CSS Flexible Box Layout
* Fornecendo uma trilha de "migalha de pão"
* Usando o atributo aria-current
Seletor de cores
================

Esta ferramenta facilita a criação, ajuste e experimentação com cores personalizadas para uso na web. Ela também facilita a conversão entre vários formatos de cores suportados por CSS, incluindo cores HEXA, RGB (vermelho, verde, azul) e HSL (tonalidade, saturação, luminosidade). Controle sobre o canal alfa também é suportado nos formatos RGB (rgba) e (hsla).

Enquanto você ajusta os parâmetros que definem a cor, ela é apresentada nos 3 formatos padrão para CSS web. Além disso, com base na seleção de cor atual, é gerada uma paleta para HSL, HSV e também alfa. O selecionador de cor estilo "conta-gotas" pode alternar os estilos HSL e HSV. Você também pode testar as cores e ver como elas se sobrepõem umas sobre às outras.

As cores geradas por você acima podem ser usadas em qualquer lugar em que a cor é usada em CSS e HTML, a menos que seja indicado de outra forma.

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

Para mais aplicações de cores, veja:

* Aplicando cores para elementos HTML com CSS (en-US)
* Fundamentação de textos e estilo de fonte (en-US)
* Estilização de bordas com CSS (en-US)
* Mudando estilos de cores de fundo com CSS (en-US)
* Cores e contrastes de cores (en-US)
scale()
=======

A função CSS **`scale()`** define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo `<transform-function>` (en-US).

![](/pt-BR/docs/Web/CSS/transform-function/scale/scale.png)

Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (*isotrópico*) e a proporção do elemento é preservada (isto é uma transformação homotética).

Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

**Nota:** A função `scale()` apenas redimensiona em 2D Para redimensionar em 3D, use `scale3d()` (en-US) ao invés.

Sintaxe
-------

A função `scale()` é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.
```

scale(sx)

scale(sx, sy)
```

### Valores

`sx`

Um `<number>` representando a abscissa do vetor de redimensionamento.

`sy`

Um `<number>` representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão é`sx`, resultando em um redimensionamento uniforme que preserva a proporção do elemento.



| Coordenadas cartesianas em ℝ2 | Coordenadas homogêneas em ℝℙ2 | Coordenadas cartesianas em ℝ3 | Coordenadas homogêneas em ℝℙ3 |
| --- | --- | --- | --- |
| 

sx
0

0
sy

 | 

sx
 0
0

0
 sy
0

0
0
1

 | 

sx
 0
0

0
 sy
0

0
0
1

 | 

sx
 0
0
0

0
sy
0
0

0
0
1
0

0
0
0
1

 |
| `[sx 0 0 sy 0 0]` |

Exemplos
--------

### Redimensionando as dimensões X e Y juntas

#### HTML


```html
<div>Normal</div>
<div class="scaled">Redimensionado</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /\* Equal to scaleX(0.7) scaleY(0.7) \*/
  background-color: pink;
}
```


#### Resultado

### Redimensionando dimensões X e Y separadamente e transladando a origem

#### HTML


```html
<div>Normal</div>
<div class="scaled">Redimensionado</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /\* Igual a scaleX(2) scaleY(0.5) \*/
  transform-origin: left;
  background-color: pink;
}
```


#### Resultado

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

Veja o dado do tipo `<transform-function>` (en-US) para informações de compatibilidade.

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

* `transform`
* `<transform-function>` (en-US)
* `scale3d()` (en-US)
perspective()
=============

A função CSS **`perspective()`** define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo `<transform-function>` (en-US).

Sintaxe
-------

A distância de perspectiva usada por`perspective()` é especificada por um valor `<length>` (en-US), que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.
```

perspective(d)
```

### Valores

*d*

É um `<length>` (en-US) representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.



| Coordenadas cartesianas em ℝ2 | Coordenadas homogêneas em ℝℙ2 | Coordenadas cartesianas em ℝ3 | Coordenadas homogêneas em ℝℙ3 |
| --- | --- | --- | --- |
| 
 Essa transformação se aplica ao espaço 3D e não pode ser representada
 no plano.
  | 
 Essa não é uma transformação linear em ℝ3, e não pode ser
 representada usando uma matriz de coordenadas cartesianas.
  | 

1
 0
0
0

0
 1
0
0

0
0
1
0

0
0

−1
 /d

1

 |

Exemplos
--------

### HTML


```html
<p>Sem perspectiva:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>Com perspectiva (7.5cm):</p>
<div class="perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>
```

### CSS


```css
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

.no-perspective-box {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
  margin-left: 100px;
}

.perspective-box {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
  margin-left: 100px;
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}
```

### Resultado

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

Veja o tipo de dado `<transform-function>` (en-US) para informações de compatibilidade.

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

* `transform`
* `<transform-function>` (en-US)
rotate()
========

A função CSS **`rotate()`** define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados `<transform-function>` (en-US).

![](/pt-BR/docs/Web/CSS/transform-function/rotate/rotate.png)

O eixo de rotação passa por uma origem, definido pela propriedade CSS `transform-origin`.

Sintaxe
-------

A quantidade de rotação criada por `rotate()` é especificado por um `<angle>` (en-US). Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de *point reflection* (reflexão do ponto).
```

rotate(a)
```

### Valores

`a`

É um `<angle>` (en-US) representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.



| Coordenadas cartesianas em ℝ2 | Coordenadas homogêneas em ℝℙ2 | Coordenadas cartesianas em ℝ3 | Coordenadas homogêneas em ℝℙ3 |
| --- | --- | --- | --- |
| 

cos(a)
-sin(a)

sin(a)
cos(a)

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0
0

sin(a)
cos(a)
0
0

0
0
1
0

0
0
0
1

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

Exemplos
--------

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /\* Equal to rotateZ(45deg) \*/
  background-color: pink;
}
```

### Resultado

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

Por favor, veja o tipo de dados `<transform-function>` (en-US) para informações de compatibilidade.

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

* `transform`
* `<transform-function>` (en-US)
* `rotate3d()`
translate()
===========

A função CSS **`translate()`** reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado `<transform-function>` (en-US).

![](/pt-BR/docs/Web/CSS/transform-function/translate/translate.png)

Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

Sintaxe
-------


```css
/\* Valores <length-percentage> únicos \*/
transform: translate(200px);
transform: translate(50%);

/\* Valores <length-percentage> duplos \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### Valores

Valores `<length-percentage>` únicos

Este valor é um `<length>` (en-US) ou `<percentage>` (en-US) representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como `0`. Por exemplo, `translate(2)` é equivalente a `translate(2, 0)`. Um valor percentual refere-se à largura da caixa de referência definida pela propriedade `transform-box` (en-US).

Valores `<length-percentage>` duplos

Este valor descreve dois `<length>` (en-US) ou valores `<percentage>` (en-US) representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade `transform-box` (en-US).



| Coordenadas cartesianas em ℝ2 | Coordenadas homogêneas emℝℙ2 | Coordenadas cartesianas em ℝ3 | Coordenadas homogêneas em ℝℙ3 |
| --- | --- | --- | --- |
| 
 Uma translação não é uma transformação linear em ℝ2 e não
 pode ser representada usando uma matriz de coordenadas cartesianas.
  | 

1
 0
tx

0
 1
ty

0
0
1

 | 

1
 0
tx

0
 1
ty

0
0
1

 | 

1
 0
0
tx

0
 1
0
ty

0
0
1
0

0
0
0
1

 |
| `[1 0 0 1 tx ty]` |

### Sintaxe formal
```

translate(`<length-percentage>` (en-US) , `<length-percentage>` (en-US)?)
```

Exemplos
--------

### Usando uma conversão de eixo único

#### HTML


```html
<div>Estático</div>
<div class="moved">Movido</div>
<div>Estático</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(
    10px
  ); /\* Igual a: translateX(10px) ou translate(10px, 0) \*/
  background-color: pink;
}
```


#### Resultado

### Combinando a translação do eixo y e do eixo x

#### HTML


```html
<div>Estático</div>
<div class="moved">Movido</div>
<div>Estático</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```


#### Resultado

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

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

Verifique o tipo de dado `<transform-function>` (en-US) para informações de compatibilidade.

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

* `transform`
* `<transform-function>` (en-US)
Dominando margin collapsing
===========================

As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como **margin collapsing**. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
Margin collapsing ocorre em três casos básicos:

Irmãos adjacentes

As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar ser limpado devido ao uso de floats em elementos anteriores ). Por exemplo:


```html
<p>A margem inferior deste parágrafo é colapsada...</p>
<p>... com margem superior deste parágrafo.</p>
```


Pai e primeiro/último filho

Se não houver border, padding, parte inline, contexto de formatação de bloco (en-US) criado ou livre para separar o `margin-top` de um bloco do `margin-top` do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, `height`, `min-height`, ou `max-height` (en-US) para separar o `margin-bottom` de um bloco do `margin-bottom` do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.

Blocos vázios

Se não houver border, padding, conteúdo inline, `height`, ou `min-height` para separar um bloco `margin-top` de sua `margin-bottom`, então as margens superior e inferior são colapsadas.

Algumas coisas podem ser observadas:

* Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.
* Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.
* Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).
* Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados.

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

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

* CSS Reference