Skip to content

Commit

Permalink
pt-br: Format /web/css using Prettier (part 1) (#14796)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Aug 4, 2023
1 parent 30be0b5 commit 7eafbe8
Show file tree
Hide file tree
Showing 96 changed files with 1,891 additions and 1,585 deletions.
16 changes: 11 additions & 5 deletions files/pt-br/web/css/--_star_/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,16 @@ Propriedades personalizadas participam na cascata: cada uma delas pode aparecer
### HTML

```html
<p id="firstParagraph">Este parágrafo deve ter um fundo azul e um texto amarelo.</p>
<p id="secondParagraph">Este parágrafo deve ter um fundo amarelo e um texto azul.</p>
<p id="firstParagraph">
Este parágrafo deve ter um fundo azul e um texto amarelo.
</p>
<p id="secondParagraph">
Este parágrafo deve ter um fundo amarelo e um texto azul.
</p>
<div id="container">
<p id="thirdParagraph">Este parágrafo deve ter um fundo verde e um texto amarelo.</p>
<p id="thirdParagraph">
Este parágrafo deve ter um fundo verde e um texto amarelo.
</p>
</div>
```

Expand Down Expand Up @@ -72,8 +78,8 @@ Propriedades personalizadas participam na cascata: cada uma delas pode aparecer

## Especificações

| Specification | Status | Comment |
| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
| Specification | Status | Comment |
| ------------------------------------------------------------ | --------------------------- | ------------------ |
| {{SpecName("CSS3 Variables", "#defining-variables", "--*")}} | {{Spec2("CSS3 Variables")}} | Initial definition |

## Compatibilidade com navegadores
Expand Down
3 changes: 1 addition & 2 deletions files/pt-br/web/css/-webkit-text-security/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ Tente digitar no campo abaixo. Se o seu navegador suportar essa propriedade, os
### HTML

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

### CSS
Expand Down
12 changes: 6 additions & 6 deletions files/pt-br/web/css/@charset/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@ onde :

## Exemplos

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

## Especificações

| Especificação | Status | Comentário |
| ---------------------------------------------------------------------------- | ---------------------------- | ---------- |
| Especificação | Status | Comentário |
| -------------------------------------------------------- | --------------------- | ---------- |
| {{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }} | {{ Spec2('CSS2.1') }} | |

## Compatibilidade de navegadores
Expand Down
32 changes: 17 additions & 15 deletions files/pt-br/web/css/@font-face/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ A regra de CSS `@font-face` pode ser usada não apenas no nível superior de um
```css
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
src:
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```

Expand Down Expand Up @@ -50,8 +51,9 @@ A regra de CSS `@font-face` pode ser usada não apenas no nível superior de um
Para fornecer ao navegador uma dica sobre o formato de um recurso de fonte - para que ele possa selecionar um adequado - é possível incluir um tipo de formato dentro de uma função `format()`:

```css
src: url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("truetype");
src:
url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("truetype");
```

Os tipos disponíveis são: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, e `"svg"`.
Expand All @@ -75,7 +77,9 @@ Este exemplo simplesmente especifica uma fonte para download a ser usada, aplica
src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}

p { font-family: "Bitstream Vera Serif Bold", serif }
p {
font-family: "Bitstream Vera Serif Bold", serif;
}
```

```html
Expand All @@ -87,9 +91,8 @@ Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o u
```css
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
```
Expand All @@ -112,20 +115,19 @@ Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o u
.className {
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
}
```

## Especificações

| Especificação | Status | Comentário |
| -------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------- |
| {{SpecName('WOFF2.0', '', 'WOFF2 font format')}} | {{Spec2('WOFF2.0')}} | Especificação de formato de fonte com novo algoritmo de compactação. |
| {{SpecName('WOFF1.0', '', 'WOFF font format')}} | {{Spec2('WOFF1.0')}} | Especificação de formato |
| Especificação | Status | Comentário |
| ----------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------- |
| {{SpecName('WOFF2.0', '', 'WOFF2 font format')}} | {{Spec2('WOFF2.0')}} | Especificação de formato de fonte com novo algoritmo de compactação. |
| {{SpecName('WOFF1.0', '', 'WOFF font format')}} | {{Spec2('WOFF1.0')}} | Especificação de formato |
| {{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}} | {{Spec2('CSS3 Fonts')}} | Definição Inicial |

## Compatibilidade com navegadores
Expand Down
14 changes: 7 additions & 7 deletions files/pt-br/web/css/@import/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,19 @@ where:
```css
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import url("landscape.css") screen and (orientation: landscape);
```

## Especificações

| Especificação | Situação | Comentário |
| -------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| {{SpecName('CSS3 Media Queries', '#media0', '@import')}} | {{Spec2('CSS3 Media Queries')}} | Estendeu a sintaxe para apoiar qualquer consulta de mídia e não apenas simples [tipos de mídia (media types)](/pt-BR/docs/Web/CSS/@media#Media_types). |
| {{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}} | {{Spec2('CSS2.1')}} | Adicionado suporte para {{cssxref("&lt;string&gt;")}} para denotar a URL de uma folha de estilo, e obrigatoriedade da regra `@import` no início do documento CSS. |
| {{SpecName('CSS1', '#the-cascade', '@import')}} | {{Spec2('CSS1')}} | Definição inicial |
| Especificação | Situação | Comentário |
| ----------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| {{SpecName('CSS3 Media Queries', '#media0', '@import')}} | {{Spec2('CSS3 Media Queries')}} | Estendeu a sintaxe para apoiar qualquer consulta de mídia e não apenas simples [tipos de mídia (media types)](/pt-BR/docs/Web/CSS/@media#Media_types). |
| {{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}} | {{Spec2('CSS2.1')}} | Adicionado suporte para {{cssxref("&lt;string&gt;")}} para denotar a URL de uma folha de estilo, e obrigatoriedade da regra `@import` no início do documento CSS. |
| {{SpecName('CSS1', '#the-cascade', '@import')}} | {{Spec2('CSS1')}} | Definição inicial |

## Browser compatibilidade

Expand Down
17 changes: 9 additions & 8 deletions files/pt-br/web/css/@layer/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,19 @@ Você pode utilizar o `@layer` para criar uma camada de cascata de três maneira
```css
@layer utilitarios {
.padding-sm {
padding: .5rem;
padding: 0.5rem;
}

.padding-lg {
padding: .8rem;
padding: 0.8rem;
}
}
```

A camada de cascata também pode ser criada com o {{cssxref("@import")}}, neste caso as regras estarão no arquivo CSS importado:

```css
@import(utilitarios.css) layer(utilitarios);
@import (utilitarios.css) layer(utilitarios);
```

Você também pode criar uma camada de cascata nomeada sem atrelar à nenhum estilo. Você pode definir uma única camada:
Expand Down Expand Up @@ -62,7 +62,6 @@ Camadas podem ser aninhadas (nested), como no exemplo abaixo:
```css
@layer framework {
@layer layout {

}
}
```
Expand Down Expand Up @@ -140,9 +139,11 @@ No exemplo seguinte, duas camadas são criadas sem regras definidas, e depois s
#### HTML

```html
<div class="item">Eu estou sendo mostrado com <code>color: rebeccapurple</code>
pois a camada <code>especial</code> vem depois da camada <code>base</code>.
Minha borda verde, font-size, e padding vem da camada <code>base</code>.</div>
<div class="item">
Eu estou sendo mostrado com <code>color: rebeccapurple</code> pois a camada
<code>especial</code> vem depois da camada <code>base</code>. Minha borda
verde, font-size, e padding vem da camada <code>base</code>.
</div>
```

#### CSS
Expand All @@ -161,7 +162,7 @@ Minha borda verde, font-size, e padding vem da camada <code>base</code>.</div>
color: green;
border: 5px solid green;
font-size: 1.3em;
padding: .5em;
padding: 0.5em;
}
}
```
Expand Down
44 changes: 23 additions & 21 deletions files/pt-br/web/css/@media/aspect-ratio/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ O exemplo abaixo está contido em um {{htmlElement("iframe")}}, que cria o seu p
### HTML

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

Expand All @@ -36,7 +37,7 @@ O exemplo abaixo está contido em um {{htmlElement("iframe")}}, que cria o seu p
/* Taxa de aspecto máxima */
@media (max-aspect-ratio: 3/2) {
div {
background: #9ff; /* ciano */
background: #9ff; /* ciano */
}
}

Expand All @@ -50,32 +51,33 @@ O exemplo abaixo está contido em um {{htmlElement("iframe")}}, que cria o seu p

```html hidden
<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
<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>">
<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>
```

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

```js hidden
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
}
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
Expand All @@ -84,8 +86,8 @@ h.onchange=h.oninput=function(){

## Specificações

| Specification | Status | Comment |
| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
| Specification | Status | Comment |
| ------------------------------------------------------------------- | ------------------------------- | ------------------- |
| {{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}} | {{Spec2('CSS4 Media Queries')}} | No change. |
| {{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}} | {{Spec2('CSS3 Media Queries')}} | Initial definition. |

Expand Down
6 changes: 3 additions & 3 deletions files/pt-br/web/css/@media/display-mode/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ O recurso `display-mode` é especificado como um valor de uma palavra chave esco

| 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) {{glossary("chrome")}} é mostrado. | `standalone` |
| `fullscreen` | Toda a área disponível da tela será usada e nada do agente-usuário (navegador) {{glossary("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) |
Expand All @@ -33,8 +33,8 @@ O recurso `display-mode` é especificado como um valor de uma palavra chave esco

## Especificações

| Specification | Status | Comment |
| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------ |
| Specification | Status | Comment |
| --------------------------------------------------------------------------- | --------------------- | ------------------ |
| {{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}} | {{Spec2('Manifest')}} | Definição inicial. |

## Compatibilidade com navegadores
Expand Down
Loading

0 comments on commit 7eafbe8

Please sign in to comment.