diff --git a/files/pt-br/web/css/--_star_/index.md b/files/pt-br/web/css/--_star_/index.md index 20f73094338d78..871d06ff64dfa2 100644 --- a/files/pt-br/web/css/--_star_/index.md +++ b/files/pt-br/web/css/--_star_/index.md @@ -31,10 +31,16 @@ Propriedades personalizadas participam na cascata: cada uma delas pode aparecer ### HTML ```html -

Este parágrafo deve ter um fundo azul e um texto amarelo.

-

Este parágrafo deve ter um fundo amarelo e um texto azul.

+

+ Este parágrafo deve ter um fundo azul e um texto amarelo. +

+

+ Este parágrafo deve ter um fundo amarelo e um texto azul. +

-

Este parágrafo deve ter um fundo verde e um texto amarelo.

+

+ Este parágrafo deve ter um fundo verde e um texto amarelo. +

``` @@ -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 diff --git a/files/pt-br/web/css/-webkit-text-security/index.md b/files/pt-br/web/css/-webkit-text-security/index.md index b260ca8f719aff..376b797754409c 100644 --- a/files/pt-br/web/css/-webkit-text-security/index.md +++ b/files/pt-br/web/css/-webkit-text-security/index.md @@ -23,8 +23,7 @@ Tente digitar no campo abaixo. Se o seu navegador suportar essa propriedade, os ### HTML ```html - - + ``` ### CSS diff --git a/files/pt-br/web/css/@charset/index.md b/files/pt-br/web/css/@charset/index.md index 3025e9178a2511..893b6c858986f2 100644 --- a/files/pt-br/web/css/@charset/index.md +++ b/files/pt-br/web/css/@charset/index.md @@ -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("<string>")}} 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("<string>")}} 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 diff --git a/files/pt-br/web/css/@font-face/index.md b/files/pt-br/web/css/@font-face/index.md index 0ef5ad23f773ac..d04768ea08a2c3 100644 --- a/files/pt-br/web/css/@font-face/index.md +++ b/files/pt-br/web/css/@font-face/index.md @@ -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"); } ``` @@ -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"`. @@ -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 @@ -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; } ``` @@ -112,9 +115,8 @@ 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; } } @@ -122,10 +124,10 @@ Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o u ## 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 diff --git a/files/pt-br/web/css/@import/index.md b/files/pt-br/web/css/@import/index.md index 49ae67f7e5fcab..a3ab42d0116bc9 100644 --- a/files/pt-br/web/css/@import/index.md +++ b/files/pt-br/web/css/@import/index.md @@ -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("<string>")}} 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("<string>")}} 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 diff --git a/files/pt-br/web/css/@layer/index.md b/files/pt-br/web/css/@layer/index.md index 151a9284421e30..bb99e1ea1e6a2b 100644 --- a/files/pt-br/web/css/@layer/index.md +++ b/files/pt-br/web/css/@layer/index.md @@ -20,11 +20,11 @@ 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; } } ``` @@ -32,7 +32,7 @@ Você pode utilizar o `@layer` para criar uma camada de cascata de três maneira 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: @@ -62,7 +62,6 @@ Camadas podem ser aninhadas (nested), como no exemplo abaixo: ```css @layer framework { @layer layout { - } } ``` @@ -140,9 +139,11 @@ No exemplo seguinte, duas camadas são criadas sem regras definidas, e depois s #### HTML ```html -
Eu estou sendo mostrado com color: rebeccapurple -pois a camada especial vem depois da camada base. -Minha borda verde, font-size, e padding vem da camada base.
+
+ Eu estou sendo mostrado com color: rebeccapurple pois a camada + especial vem depois da camada base. Minha borda + verde, font-size, e padding vem da camada base. +
``` #### CSS @@ -161,7 +162,7 @@ Minha borda verde, font-size, e padding vem da camada base. color: green; border: 5px solid green; font-size: 1.3em; - padding: .5em; + padding: 0.5em; } } ``` diff --git a/files/pt-br/web/css/@media/aspect-ratio/index.md b/files/pt-br/web/css/@media/aspect-ratio/index.md index 07992361f5a189..0386f7b41f10da 100644 --- a/files/pt-br/web/css/@media/aspect-ratio/index.md +++ b/files/pt-br/web/css/@media/aspect-ratio/index.md @@ -18,8 +18,9 @@ O exemplo abaixo está contido em um {{htmlElement("iframe")}}, que cria o seu p ### HTML ```html -
- Observe este elemento, conforme você altera a largura e a altura da sua viewport. +
+ Observe este elemento, conforme você altera a largura e a altura da sua + viewport.
``` @@ -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 */ } } @@ -50,32 +51,33 @@ O exemplo abaixo está contido em um {{htmlElement("iframe")}}, que cria o seu p ```html hidden - + - - - ``` ```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 @@ -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. | diff --git a/files/pt-br/web/css/@media/display-mode/index.md b/files/pt-br/web/css/@media/display-mode/index.md index 950d5cdc979bc5..553968f78d2c00 100644 --- a/files/pt-br/web/css/@media/display-mode/index.md +++ b/files/pt-br/web/css/@media/display-mode/index.md @@ -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) | @@ -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 diff --git a/files/pt-br/web/css/@media/index.md b/files/pt-br/web/css/@media/index.md index f4e01952bd3f2a..b73f748fcbb90a 100644 --- a/files/pt-br/web/css/@media/index.md +++ b/files/pt-br/web/css/@media/index.md @@ -31,7 +31,10 @@ Besides its use in the `@media` rule, a media query may also be applied to an HT ```html - + ``` In JavaScript, `@media` can be accessed via the {{domxref("CSSMediaRule")}} CSS object model interface. @@ -63,38 +66,38 @@ _Media types_ describe the general category of a device. Unless you use the `not _Media feature expressions_ test for specific characteristics of the {{glossary("user agent")}}, output device, or environment. They are entirely optional. Each media feature expression must be surrounded by parentheses. -| Name | Summary | Notes | -| ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -| [`width`](/pt-BR/docs/Web/CSS/@media/width) | Width of the viewport | | -| [`height`](/pt-BR/docs/Web/CSS/@media/height) | Height of the viewport | | -| [`aspect-ratio`](/pt-BR/docs/Web/CSS/@media/aspect-ratio) | Width-to-height aspect ratio of the viewport | | -| [`orientation`](/pt-BR/docs/Web/CSS/@media/orientation) | Orientation of the viewport | | -| [`resolution`](/pt-BR/docs/Web/CSS/@media/resolution) | Pixel density of the output device | | -| [`scan`](/pt-BR/docs/Web/CSS/@media/scan) | Scanning process of the output device | | -| [`grid`](/pt-BR/docs/Web/CSS/@media/grid) | Does the device use a grid or bitmap screen? | | -| [`update`](/pt-BR/docs/Web/CSS/@media/update-frequency) | How frequently the output device can modify the appearance of content | Added in Media Queries Level 4. | -| [`overflow-block`](/pt-BR/docs/Web/CSS/@media/overflow-block) | How does the output device handle content that overflows the viewport along the block axis? | Added in Media Queries Level 4. | -| [`overflow-inline`](/pt-BR/docs/Web/CSS/@media/overflow-inline) | Can content that overflows the viewport along the inline axis be scrolled? | Added in Media Queries Level 4. | -| [`color`](/pt-BR/docs/Web/CSS/@media/color) | Number of bits per color component of the output device, or zero if the device isn't color | | -| [`color-gamut`](/pt-BR/docs/Web/CSS/@media/color-gamut) | Approximate range of colors that are supported by the user agent and output device | Added in Media Queries Level 4. | -| [`color-index`](/pt-BR/docs/Web/CSS/@media/color-index) | Number of entries in the output device's color lookup table, or zero if the device does not use such a table | | -| [`display-mode`](/pt-BR/docs/Web/CSS/@media/display-mode) | The display mode of the application, as specified in the web app manifest's [`display`](/pt-BR/docs/Web/Manifest#display) member | Defined in the [Web App Manifest spec](http://w3c.github.io/manifest/#the-display-mode-media-feature). | -| [`monochrome`](/pt-BR/docs/Web/CSS/@media/monochrome) | Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome | | -| [`inverted-colors`](/pt-BR/docs/Web/CSS/@media/inverted-colors) | Is the user agent or underlying OS inverting colors? | Deferred to Media Queries Level 5. | -| [`pointer`](/pt-BR/docs/Web/CSS/@media/pointer) | Is the primary input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4. | -| [`hover`](/pt-BR/docs/Web/CSS/@media/hover) | Does the primary input mechanism allow the user to hover over elements? | Added in Media Queries Level 4. | -| [`any-pointer`](/pt-BR/docs/Web/CSS/@media/any-pointer) | Is any available input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4. | -| [`any-hover`](/pt-BR/docs/Web/CSS/@media/any-hover) | Does any available input mechanism allow the user to hover over elements? | Added in Media Queries Level 4. | -| [`light-level`](/pt-BR/docs/Web/CSS/@media/light-level) | Light level of the environment | Deferred to Media Queries Level 5. | -| [`scripting`](/pt-BR/docs/Web/CSS/@media/scripting) | Is scripting (e.g., JavaScript) available? | Deferred to Media Queries Level 5. | -| [`device-width`](/pt-BR/docs/Web/CSS/@media/device-width) | Width of the rendering surface of the output device | Deprecated in Media Queries Level 4. | -| [`device-height`](/pt-BR/docs/Web/CSS/@media/device-height) | Height of the rendering surface of the output device | Deprecated in Media Queries Level 4. | -| [`device-aspect-ratio`](/pt-BR/docs/Web/CSS/@media/device-aspect-ratio) | Width-to-height aspect ratio of the output device | Deprecated in Media Queries Level 4. | +| Name | Summary | Notes | +| ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| [`width`](/pt-BR/docs/Web/CSS/@media/width) | Width of the viewport | | +| [`height`](/pt-BR/docs/Web/CSS/@media/height) | Height of the viewport | | +| [`aspect-ratio`](/pt-BR/docs/Web/CSS/@media/aspect-ratio) | Width-to-height aspect ratio of the viewport | | +| [`orientation`](/pt-BR/docs/Web/CSS/@media/orientation) | Orientation of the viewport | | +| [`resolution`](/pt-BR/docs/Web/CSS/@media/resolution) | Pixel density of the output device | | +| [`scan`](/pt-BR/docs/Web/CSS/@media/scan) | Scanning process of the output device | | +| [`grid`](/pt-BR/docs/Web/CSS/@media/grid) | Does the device use a grid or bitmap screen? | | +| [`update`](/pt-BR/docs/Web/CSS/@media/update-frequency) | How frequently the output device can modify the appearance of content | Added in Media Queries Level 4. | +| [`overflow-block`](/pt-BR/docs/Web/CSS/@media/overflow-block) | How does the output device handle content that overflows the viewport along the block axis? | Added in Media Queries Level 4. | +| [`overflow-inline`](/pt-BR/docs/Web/CSS/@media/overflow-inline) | Can content that overflows the viewport along the inline axis be scrolled? | Added in Media Queries Level 4. | +| [`color`](/pt-BR/docs/Web/CSS/@media/color) | Number of bits per color component of the output device, or zero if the device isn't color | | +| [`color-gamut`](/pt-BR/docs/Web/CSS/@media/color-gamut) | Approximate range of colors that are supported by the user agent and output device | Added in Media Queries Level 4. | +| [`color-index`](/pt-BR/docs/Web/CSS/@media/color-index) | Number of entries in the output device's color lookup table, or zero if the device does not use such a table | | +| [`display-mode`](/pt-BR/docs/Web/CSS/@media/display-mode) | The display mode of the application, as specified in the web app manifest's [`display`](/pt-BR/docs/Web/Manifest#display) member | Defined in the [Web App Manifest spec](http://w3c.github.io/manifest/#the-display-mode-media-feature). | +| [`monochrome`](/pt-BR/docs/Web/CSS/@media/monochrome) | Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome | | +| [`inverted-colors`](/pt-BR/docs/Web/CSS/@media/inverted-colors) | Is the user agent or underlying OS inverting colors? | Deferred to Media Queries Level 5. | +| [`pointer`](/pt-BR/docs/Web/CSS/@media/pointer) | Is the primary input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4. | +| [`hover`](/pt-BR/docs/Web/CSS/@media/hover) | Does the primary input mechanism allow the user to hover over elements? | Added in Media Queries Level 4. | +| [`any-pointer`](/pt-BR/docs/Web/CSS/@media/any-pointer) | Is any available input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4. | +| [`any-hover`](/pt-BR/docs/Web/CSS/@media/any-hover) | Does any available input mechanism allow the user to hover over elements? | Added in Media Queries Level 4. | +| [`light-level`](/pt-BR/docs/Web/CSS/@media/light-level) | Light level of the environment | Deferred to Media Queries Level 5. | +| [`scripting`](/pt-BR/docs/Web/CSS/@media/scripting) | Is scripting (e.g., JavaScript) available? | Deferred to Media Queries Level 5. | +| [`device-width`](/pt-BR/docs/Web/CSS/@media/device-width) | Width of the rendering surface of the output device | Deprecated in Media Queries Level 4. | +| [`device-height`](/pt-BR/docs/Web/CSS/@media/device-height) | Height of the rendering surface of the output device | Deprecated in Media Queries Level 4. | +| [`device-aspect-ratio`](/pt-BR/docs/Web/CSS/@media/device-aspect-ratio) | Width-to-height aspect ratio of the output device | Deprecated in Media Queries Level 4. | | [`-webkit-device-pixel-ratio`](/pt-BR/docs/Web/CSS/@media/-webkit-device-pixel-ratio) {{non-standard_inline}} | Number of physical device pixels per CSS pixel | Nonstandard; WebKit/Blink-specific. If possible, use the [`resolution`](/pt-BR/docs/Web/CSS/@media/resolution) media feature instead. | -| [`-webkit-transform-3d`](/pt-BR/docs/Web/CSS/@media/-webkit-transform-3d) {{non-standard_inline}} | Are CSS 3D {{cssxref("transform")}}s supported? | Nonstandard; WebKit/Blink-specific. If possible, use {{cssxref("@supports")}} instead. | -| [`-webkit-transform-2d`](/pt-BR/docs/Web/CSS/@media/-webkit-transform-2d) {{non-standard_inline}} | Are CSS 2D {{cssxref("transform")}}s supported? | Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead. | -| [`-webkit-transition`](/pt-BR/docs/Web/CSS/@media/-webkit-transition) {{non-standard_inline}} | Are CSS {{cssxref("transition")}}s supported? | Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead. | -| [`-webkit-animation`](/pt-BR/docs/Web/CSS/@media/-webkit-animation) {{non-standard_inline}} | Are CSS {{cssxref("animation")}}s supported? | Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead. | +| [`-webkit-transform-3d`](/pt-BR/docs/Web/CSS/@media/-webkit-transform-3d) {{non-standard_inline}} | Are CSS 3D {{cssxref("transform")}}s supported? | Nonstandard; WebKit/Blink-specific. If possible, use {{cssxref("@supports")}} instead. | +| [`-webkit-transform-2d`](/pt-BR/docs/Web/CSS/@media/-webkit-transform-2d) {{non-standard_inline}} | Are CSS 2D {{cssxref("transform")}}s supported? | Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead. | +| [`-webkit-transition`](/pt-BR/docs/Web/CSS/@media/-webkit-transition) {{non-standard_inline}} | Are CSS {{cssxref("transition")}}s supported? | Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead. | +| [`-webkit-animation`](/pt-BR/docs/Web/CSS/@media/-webkit-animation) {{non-standard_inline}} | Are CSS {{cssxref("animation")}}s supported? | Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead. | ### Logical operators @@ -126,22 +129,27 @@ Each query in a comma-separated media query list is treated separately from the ```css @media print { - body { font-size: 10pt; } + body { + font-size: 10pt; + } } @media screen { - body { font-size: 13px; } + body { + font-size: 13px; + } } @media screen, print { - body { line-height: 1.2; } + body { + line-height: 1.2; + } } -@media only screen - and (min-device-width: 320px) - and (max-device-width: 480px) - and (-webkit-min-device-pixel-ratio: 2) { - body { line-height: 1.4; } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + body { + line-height: 1.4; + } } ``` @@ -149,13 +157,13 @@ For more media feature examples, please see the reference page for each specific ## Specifications -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}} | {{Spec2('Compat')}} | Standardizes the `-webkit-device-pixel-ratio` and `-webkit-transform-3d` media features. | -| {{SpecName('CSS3 Conditional', '#at-media', '@media')}} | {{Spec2('CSS3 Conditional')}} | Defines the basic syntax of the `@media` rule. | -| {{SpecName('CSS4 Media Queries', '#media', '@media')}} | {{Spec2('CSS4 Media Queries')}} | Adds `scripting`, `pointer`, `hover`, `light-level`, `update-frequency`, `overflow-block`, and `overflow-inline` media features. Deprecates all media types except for `screen`, `print`, `speech`, and `all`. Makes the syntax more flexible by adding, among other things, the `or` keyword. | -| {{SpecName('CSS3 Media Queries', '#media0', '@media')}} | {{Spec2('CSS3 Media Queries')}} | No change. | -| {{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}} | {{Spec2('CSS2.1')}} | Initial definition. | +| Specification | Status | Comment | +| ----------------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}} | {{Spec2('Compat')}} | Standardizes the `-webkit-device-pixel-ratio` and `-webkit-transform-3d` media features. | +| {{SpecName('CSS3 Conditional', '#at-media', '@media')}} | {{Spec2('CSS3 Conditional')}} | Defines the basic syntax of the `@media` rule. | +| {{SpecName('CSS4 Media Queries', '#media', '@media')}} | {{Spec2('CSS4 Media Queries')}} | Adds `scripting`, `pointer`, `hover`, `light-level`, `update-frequency`, `overflow-block`, and `overflow-inline` media features. Deprecates all media types except for `screen`, `print`, `speech`, and `all`. Makes the syntax more flexible by adding, among other things, the `or` keyword. | +| {{SpecName('CSS3 Media Queries', '#media0', '@media')}} | {{Spec2('CSS3 Media Queries')}} | No change. | +| {{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}} | {{Spec2('CSS2.1')}} | Initial definition. | ## Browser compatibility diff --git a/files/pt-br/web/css/@media/prefers-color-scheme/index.md b/files/pt-br/web/css/@media/prefers-color-scheme/index.md index ed3d1bf1ca29bc..9ec6c10254302a 100644 --- a/files/pt-br/web/css/@media/prefers-color-scheme/index.md +++ b/files/pt-br/web/css/@media/prefers-color-scheme/index.md @@ -25,7 +25,8 @@ Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temático ```html
Dia (inicial)
Dia (modificar e utilizar um tema claro)
-
Dia (modificar e utilizar um tema escuro)

+
Dia (modificar e utilizar um tema escuro)
+
Noite (inicial)
Noite (modificar e utilizar um tema claro)
@@ -35,20 +36,39 @@ Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temático ### CSS ```css -.day { background: #eee; color: black; } -.night { background: #333; color: white; } +.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; } + .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.light-scheme { + background: white; + color: #555; + } + .night.light-scheme { + background: #eee; + color: black; + } } -.day, .night { +.day, +.night { display: inline-block; padding: 1em; width: 7em; @@ -63,8 +83,8 @@ Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temático ## Especificações -| Especificação | Estado | Comentários | -| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | +| Especificação | Estado | Comentários | +| ------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------ | | {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}} | {{Spec2('CSS5 Media Queries')}} | Definição inicial. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/@page/index.md b/files/pt-br/web/css/@page/index.md index afcaf5416dbba0..bf067ae4019d5c 100644 --- a/files/pt-br/web/css/@page/index.md +++ b/files/pt-br/web/css/@page/index.md @@ -31,10 +31,10 @@ Podemos fazer referência a vários [pseudo-classes](/pt-BR/docs/CSS/Pseudo-clas ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------ | -| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Sem mudanças para {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a `@page`. | -| {{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}} | {{Spec2('CSS2.1')}} | | +| Specification | Status | Comment | +| ----------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------ | +| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Sem mudanças para {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a `@page`. | +| {{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}} | {{Spec2('CSS2.1')}} | | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_active/index.md b/files/pt-br/web/css/_colon_active/index.md index 94ff8653e52fcf..a6bbcddf992803 100644 --- a/files/pt-br/web/css/_colon_active/index.md +++ b/files/pt-br/web/css/_colon_active/index.md @@ -15,31 +15,44 @@ Esse estilo pode ser substituído por qualquer outra pseudo-classe relacionada a ```html -

:active CSS selector example

-

The following link will turn lime during the time you click it and release the click: Mozilla Developer Network.

+

:active CSS selector example

+

+ The following link will turn lime during the time you click it and release + the click: Mozilla Developer Network. +

``` ### CSS ```css -body { background-color: #ffffc9 } -a:link { color: blue } /* links não visitados */ -a:visited { color: purple } /* links visitados */ -a:hover { font-weight: bold } /* user hovers */ -a:active { color: lime } /* links ativos */ +body { + background-color: #ffffc9; +} +a:link { + color: blue; +} /* links não visitados */ +a:visited { + color: purple; +} /* links visitados */ +a:hover { + font-weight: bold; +} /* user hovers */ +a:active { + color: lime; +} /* links ativos */ ``` {{EmbedLiveSample('example',600,140)}} ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ | -| {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} | {{Spec2('CSS4 Selectors')}} | Nenhuma mudança. | -| {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} | {{Spec2('CSS3 Selectors')}} | Nenhuma mudança. | -| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}} | Nenhuma mudança. | -| {{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}} | {{Spec2('CSS1')}} | Definição inicial. | +| Especificação | Status | Comentário | +| ------------------------------------------------------------------------- | --------------------------- | ------------------ | +| {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} | {{Spec2('CSS4 Selectors')}} | Nenhuma mudança. | +| {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} | {{Spec2('CSS3 Selectors')}} | Nenhuma mudança. | +| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}} | Nenhuma mudança. | +| {{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}} | {{Spec2('CSS1')}} | Definição inicial. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_blank/index.md b/files/pt-br/web/css/_colon_blank/index.md index e7224cc02d7c20..c9ac4dcf005d69 100644 --- a/files/pt-br/web/css/_colon_blank/index.md +++ b/files/pt-br/web/css/_colon_blank/index.md @@ -17,8 +17,8 @@ A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/CSS) ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------ | +| Specification | Status | Comment | +| --------------------------------------------------------- | --------------------------- | ------------------ | | {{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}} | {{Spec2("CSS4 Selectors")}} | Definição inicial. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_checked/index.md b/files/pt-br/web/css/_colon_checked/index.md index 99892887d3109b..996e32682e28db 100644 --- a/files/pt-br/web/css/_colon_checked/index.md +++ b/files/pt-br/web/css/_colon_checked/index.md @@ -63,42 +63,61 @@ ser aplicada de forma a armazenar algum booleano dinâmico para ser usado por um ```css #expand-btn { - margin: 0 3px; - display: inline-block; - font: 12px / 13px "Lucida Grande", sans-serif; - text-shadow: rgba(255, 255, 255, 0.4) 0 1px; - padding: 3px 6px; - border: 1px solid rgba(0, 0, 0, 0.6); - background-color: #969696; - cursor: default; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; - -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; - box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; + margin: 0 3px; + display: inline-block; + font: + 12px / 13px "Lucida Grande", + sans-serif; + text-shadow: rgba(255, 255, 255, 0.4) 0 1px; + padding: 3px 6px; + border: 1px solid rgba(0, 0, 0, 0.6); + background-color: #969696; + cursor: default; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -moz-box-shadow: + rgba(255, 255, 255, 0.4) 0 1px, + inset 0 20px 20px -10px white; + -webkit-box-shadow: + rgba(255, 255, 255, 0.4) 0 1px, + inset 0 20px 20px -10px white; + box-shadow: + rgba(255, 255, 255, 0.4) 0 1px, + inset 0 20px 20px -10px white; } -#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn { - background: #B5B5B5; - -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; - -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; - box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; +#isexpanded:checked ~ #expand-btn, +#isexpanded:checked ~ * #expand-btn { + background: #b5b5b5; + -moz-box-shadow: + inset rgba(0, 0, 0, 0.4) 0 -5px 12px, + inset rgba(0, 0, 0, 1) 0 1px 3px, + rgba(255, 255, 255, 0.4) 0 1px; + -webkit-box-shadow: + inset rgba(0, 0, 0, 0.4) 0 -5px 12px, + inset rgba(0, 0, 0, 1) 0 1px 3px, + rgba(255, 255, 255, 0.4) 0 1px; + box-shadow: + inset rgba(0, 0, 0, 0.4) 0 -5px 12px, + inset rgba(0, 0, 0, 1) 0 1px 3px, + rgba(255, 255, 255, 0.4) 0 1px; } -#isexpanded, .expandable { - display: none; +#isexpanded, +.expandable { + display: none; } #isexpanded:checked ~ * tr.expandable { - display: table-row; - background: #cccccc; - + display: table-row; + background: #cccccc; } -#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable { - display: block; - background: #cccccc; +#isexpanded:checked ~ p.expandable, +#isexpanded:checked ~ * p.expandable { + display: block; + background: #cccccc; } ``` @@ -137,13 +156,13 @@ Você também pode usar a pseudo-classe `:checked`aplicada a um radioboxe escond ## Especificações -| Especificação | Estatus | Comentários | -| ------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------------------------- | -| {{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }} | {{ Spec2('HTML WHATWG') }} | Sem mudanças. | -| {{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }} | {{ Spec2('HTML5 W3C') }} | Define a semântica sobre o HTML. | -| {{ SpecName('CSS4 Selectors', '#checked', ':checked') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudanças. | -| {{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }} | {{ Spec2('CSS3 Basic UI') }} | Link para Seletores nível 3 | -| {{ SpecName('CSS3 Selectors', '#checked', ':checked') }} | {{ Spec2('CSS3 Selectors') }} | Define a pseudo-classe, mas não associação semântica | +| Especificação | Estatus | Comentários | +| -------------------------------------------------------------- | ----------------------------- | ---------------------------------------------------- | +| {{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }} | {{ Spec2('HTML WHATWG') }} | Sem mudanças. | +| {{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }} | {{ Spec2('HTML5 W3C') }} | Define a semântica sobre o HTML. | +| {{ SpecName('CSS4 Selectors', '#checked', ':checked') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudanças. | +| {{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }} | {{ Spec2('CSS3 Basic UI') }} | Link para Seletores nível 3 | +| {{ SpecName('CSS3 Selectors', '#checked', ':checked') }} | {{ Spec2('CSS3 Selectors') }} | Define a pseudo-classe, mas não associação semântica | ## Compatibilidade de navegadores diff --git a/files/pt-br/web/css/_colon_disabled/index.md b/files/pt-br/web/css/_colon_disabled/index.md index 4fedc0bf956d68..990314b9e5e60f 100644 --- a/files/pt-br/web/css/_colon_disabled/index.md +++ b/files/pt-br/web/css/_colon_disabled/index.md @@ -28,19 +28,19 @@ Este exemplo mostra um formulário básico de envio. Ele usa o evento [JavaScrip
Shipping address - - - + + +
-
+
Billing address - -
- - - + +
+ + +
``` @@ -57,10 +57,14 @@ input[type="text"]:disabled { ```js // Wait for the page to finish loading -document.addEventListener('DOMContentLoaded', function () { - // Attach `change` event listener to checkbox - document.getElementById('billing-checkbox').onchange = toggleBilling; -}, false); +document.addEventListener( + "DOMContentLoaded", + function () { + // Attach `change` event listener to checkbox + document.getElementById("billing-checkbox").onchange = toggleBilling; + }, + false, +); function toggleBilling() { // Select the billing text fields @@ -79,12 +83,12 @@ function toggleBilling() { ## Expecificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}} | {{Spec2('HTML WHATWG')}} | No change. | -| {{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}} | {{Spec2('HTML5 W3C')}} | Defines the semantics of HTML and forms. | +| Specification | Status | Comment | +| --------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------- | +| {{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}} | {{Spec2('HTML WHATWG')}} | No change. | +| {{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}} | {{Spec2('HTML5 W3C')}} | Defines the semantics of HTML and forms. | | {{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}} | {{Spec2('CSS4 Selectors')}} | No change. | -| {{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}} | {{Spec2('CSS3 Basic UI')}} | Links to Selectors Level 3. | +| {{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}} | {{Spec2('CSS3 Basic UI')}} | Links to Selectors Level 3. | | {{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}} | {{Spec2('CSS3 Selectors')}} | Defines the pseudo-class, but not the associated semantics. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_empty/index.md b/files/pt-br/web/css/_colon_empty/index.md index 03d03591028db4..9be88985c46613 100644 --- a/files/pt-br/web/css/_colon_empty/index.md +++ b/files/pt-br/web/css/_colon_empty/index.md @@ -26,7 +26,7 @@ div:empty {
Eu serei rosa.
- +
``` @@ -68,8 +68,8 @@ The text that provides the interactive control's accessible name can be hidden u ## Specifications -| Specification | Status | Comment | -| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | +| Specification | Status | Comment | +| ----------------------------------------------------------- | ----------------------------- | ------------------ | | {{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }} | {{ Spec2('CSS4 Selectors') }} | No change | | {{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }} | {{ Spec2('CSS3 Selectors') }} | Initial definition | diff --git a/files/pt-br/web/css/_colon_enabled/index.md b/files/pt-br/web/css/_colon_enabled/index.md index 4ba8942c406022..244b257082be46 100644 --- a/files/pt-br/web/css/_colon_enabled/index.md +++ b/files/pt-br/web/css/_colon_enabled/index.md @@ -27,12 +27,12 @@ O exemplo a seguir torna a cor do texto e do botão `` verde quando ativa ```html
-
+
-
+
- +
``` @@ -54,12 +54,12 @@ input:disabled { ## Specifications -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}} | {{Spec2('HTML WHATWG')}} | No change. | -| {{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}} | {{Spec2('HTML5 W3C')}} | Defines the semantics for HTML and forms. | +| Specification | Status | Comment | +| -------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------- | +| {{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}} | {{Spec2('HTML WHATWG')}} | No change. | +| {{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}} | {{Spec2('HTML5 W3C')}} | Defines the semantics for HTML and forms. | | {{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}} | {{Spec2('CSS4 Selectors')}} | No change. | -| {{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}} | {{Spec2('CSS3 Basic UI')}} | Links to Selectors Level 3. | +| {{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}} | {{Spec2('CSS3 Basic UI')}} | Links to Selectors Level 3. | | {{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}} | {{Spec2('CSS3 Selectors')}} | Defines the pseudo-class, but not the associated semantics. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_first-child/index.md b/files/pt-br/web/css/_colon_first-child/index.md index 96439a1e414a9a..a22eaa38e4a340 100644 --- a/files/pt-br/web/css/_colon_first-child/index.md +++ b/files/pt-br/web/css/_colon_first-child/index.md @@ -32,7 +32,7 @@ elemento:first-child { estilos } ```css span:first-child { - background-color: lime; + background-color: lime; } ``` @@ -55,11 +55,11 @@ span:first-child { #### CSS ```css -li{ - color:red; +li { + color: red; } -li:first-child{ - color:green; +li:first-child { + color: green; } ``` @@ -69,8 +69,8 @@ li:first-child{ ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ | +| Especificação | Status | Comentário | +| ----------------------------------------------------------------------- | ----------------------------- | ------------------ | | {{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | | {{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_first-of-type/index.md b/files/pt-br/web/css/_colon_first-of-type/index.md index 21c76da6342a06..383e29fcffe154 100644 --- a/files/pt-br/web/css/_colon_first-of-type/index.md +++ b/files/pt-br/web/css/_colon_first-of-type/index.md @@ -56,7 +56,10 @@ Este exemplo mostra como os elementos aninhados também podem ser estilizados. N
Esta `div` é a primeira!
Esta `span` aninhada é a primeira!
-
Este `em` aninhado é o primeiro, mas este `em` aninhado é o último!
+
+ Este `em` aninhado é o primeiro, mas este + `em` aninhado é o último! +
Este `span` aninhado pegou o estilo!
Este `b` qualifica!
Esta é a `div` final.
@@ -77,8 +80,8 @@ article :first-of-type { ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------------- | +| Specification | Status | Comment | +| ------------------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------- | | {{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}} | {{Spec2('CSS4 Selectors')}} | Os elementos correspondentes não são necessários para ter um pai. | | {{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_focus-within/index.md b/files/pt-br/web/css/_colon_focus-within/index.md index a84540462ebb37..b94dcf0859ef5b 100644 --- a/files/pt-br/web/css/_colon_focus-within/index.md +++ b/files/pt-br/web/css/_colon_focus-within/index.md @@ -31,10 +31,10 @@ Neste exemplo, o formulário receberá estilos de coloração especiais quando o
- -
+ +
- +
``` @@ -63,8 +63,8 @@ input { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| Especificação | Status | Comentário | +| --------------------------------------------------------------------------- | --------------------------- | ------------------- | | {{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}} | {{Spec2("CSS4 Selectors")}} | Initial definition. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_focus/index.md b/files/pt-br/web/css/_colon_focus/index.md index cad75f5394d7ce..bb6f6a40a2a692 100644 --- a/files/pt-br/web/css/_colon_focus/index.md +++ b/files/pt-br/web/css/_colon_focus/index.md @@ -30,20 +30,22 @@ elemento:focus { ... } ``` ```html - - + + ``` {{ EmbedLiveSample('Exemplos', '', '', '', 'Web/CSS/:focus') }} ## Especificação -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}} | {{Spec2('HTML WHATWG')}} | Define a semântica no HTML. | -| {{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}} | {{Spec2('CSS4 Selectors')}} | Nenhuma modificação. | +| Especificação | Estado | Comentário | +| ------------------------------------------------------------------------------------- | --------------------------- | --------------------------- | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}} | {{Spec2('HTML WHATWG')}} | Define a semântica no HTML. | +| {{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}} | {{Spec2('CSS4 Selectors')}} | Nenhuma modificação. | | {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}} | {{Spec2('CSS3 Selectors')}} | Nenhuma modificação. | -| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}} | {{Spec2('CSS2.1')}} | Definição inicial. | +| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}} | {{Spec2('CSS2.1')}} | Definição inicial. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_fullscreen/index.md b/files/pt-br/web/css/_colon_fullscreen/index.md index eeb100657dcc95..5bfc111ca53820 100644 --- a/files/pt-br/web/css/_colon_fullscreen/index.md +++ b/files/pt-br/web/css/_colon_fullscreen/index.md @@ -26,9 +26,11 @@ The page's HTML looks like this: ```html

MDN Web Docs Demo: :fullscreen pseudo-class

-

This demo uses the :fullscreen pseudo-class to automatically +

+ This demo uses the :fullscreen pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, - entirely using CSS.

+ entirely using CSS. +

``` @@ -55,8 +57,8 @@ When the document _is_ in full-screen mode, the following CSS applies instead, s ## Specifications -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| Specification | Status | Comment | +| ---------------------------------------------------------------------- | ----------------------- | ------------------- | | {{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}} | {{Spec2('Fullscreen')}} | Initial definition. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_hover/index.md b/files/pt-br/web/css/_colon_hover/index.md index 45778bcae834b5..aeacfa96605e90 100644 --- a/files/pt-br/web/css/_colon_hover/index.md +++ b/files/pt-br/web/css/_colon_hover/index.md @@ -7,7 +7,7 @@ slug: Web/CSS/:hover ## Resumo -A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) `: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 é {{ cssxref(":link") }}, {{ cssxref(":visited") }}, e {{ cssxref(":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-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) `: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 é {{ cssxref(":link") }}, {{ cssxref(":visited") }}, e {{ cssxref(":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.](/pt-BR/docs/Web/CSS/Pseudo-elements) {{experimental_inline}}. @@ -18,14 +18,18 @@ User agents visuais como Firefox, Internet Explorer, Safari, Opera ou Chrome, ap ## Exemplos ```css -:link:hover { outline: dotted red; } +:link:hover { + outline: dotted red; +} -.foo:hover { background: gold; } +.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](/pt-Br/JavaScript)). A essência desta técnica é criação de uma regra como a seguinte: +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](/pt-Br/JavaScript)). A essência desta técnica é criação de uma regra como a seguinte: ```css div.menu-bar ul ul { @@ -79,11 +83,11 @@ Você pode usar a pseudo-classe `:hover` para construir uma galeria de imagem, e ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------- | -| {{ SpecName('CSS4 Selectors', '#hover', ':hover') }} | {{ Spec2('CSS4 Selectors') }} | Pode ser aplicado a qualquer pseudo-elemento. | +| Especificação | Status | Comentário | +| --------------------------------------------------------------------------------------- | ----------------------------- | --------------------------------------------- | +| {{ SpecName('CSS4 Selectors', '#hover', ':hover') }} | {{ Spec2('CSS4 Selectors') }} | Pode ser aplicado a qualquer pseudo-elemento. | | {{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }} | {{ Spec2('CSS3 Selectors') }} | Sem mudança significativa. | -| {{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }} | {{ Spec2('CSS2.1') }} | definição inicial. | +| {{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }} | {{ Spec2('CSS2.1') }} | definição inicial. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_invalid/index.md b/files/pt-br/web/css/_colon_invalid/index.md index a8575d1e1204ab..376668585435a8 100644 --- a/files/pt-br/web/css/_colon_invalid/index.md +++ b/files/pt-br/web/css/_colon_invalid/index.md @@ -33,7 +33,7 @@ Esse exemplo apresenta um simples formulário onde a cor verde realça um input

- + ``` @@ -62,7 +62,7 @@ input:required { } input:required:invalid { - border-color: #C00000; + border-color: #c00000; } ``` @@ -98,10 +98,10 @@ Você pode desabilitar o "brilho" usando o CSS a seguir, ou substituir completam ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}} | {{Spec2('HTML WHATWG')}} | Nenhuma alteração. | -| {{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}} | {{Spec2('HTML5 W3C')}} | Define a semântica do HTML e validação de restrições. | +| Especificação | Status | Comentário | +| --------------------------------------------------------------- | --------------------------- | ----------------------------------------------------- | +| {{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}} | {{Spec2('HTML WHATWG')}} | Nenhuma alteração. | +| {{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}} | {{Spec2('HTML5 W3C')}} | Define a semântica do HTML e validação de restrições. | | {{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}} | {{Spec2('CSS4 Selectors')}} | Definição inicial. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_last-child/index.md b/files/pt-br/web/css/_colon_last-child/index.md index d62f5b6b3105f9..6946db7b4351a5 100644 --- a/files/pt-br/web/css/_colon_last-child/index.md +++ b/files/pt-br/web/css/_colon_last-child/index.md @@ -31,7 +31,7 @@ elemento:last-child { propriedades de estilo } ```css li:last-child { - background-color: lime; + background-color: lime; } ``` @@ -39,8 +39,8 @@ li:last-child { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ | +| Especificação | Status | Comentário | +| -------------------------------------------------------------- | ----------------------------- | ------------------ | | {{ SpecName('CSS4 Selectors', '#last-child', ':last-child') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | | {{ SpecName('CSS3 Selectors', '#last-child', ':last-child') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_last-of-type/index.md b/files/pt-br/web/css/_colon_last-of-type/index.md index 1c3d808c8dcd11..10cc315968f635 100644 --- a/files/pt-br/web/css/_colon_last-of-type/index.md +++ b/files/pt-br/web/css/_colon_last-of-type/index.md @@ -49,8 +49,8 @@ p em:last-of-type { ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ | +| Specification | Status | Comment | +| ----------------------------------------------------------------------- | --------------------------- | ------------------ | | {{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS4 Selectors')}} | No change | | {{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS3 Selectors')}} | Initial definition | diff --git a/files/pt-br/web/css/_colon_link/index.md b/files/pt-br/web/css/_colon_link/index.md index 50975ea2270c7e..b5aa0dbad9fe3f 100644 --- a/files/pt-br/web/css/_colon_link/index.md +++ b/files/pt-br/web/css/_colon_link/index.md @@ -12,18 +12,22 @@ A [pseudo-class](/pt-BR/CSS/Pseudo-classes) CSS :link permite que você selecion ## Exemplos ```css -a:link {color: slategray;} -.external:link {background-color: lightblue;} +a:link { + color: slategray; +} +.external:link { + background-color: lightblue; +} ``` ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------ | -| {{ SpecName('CSS4 Selectors', '#link', ':link') }} | {{ Spec2('CSS4 Selectors') }} | Nenhuma mudança. | -| {{ SpecName('CSS3 Selectors', '#link', ':link') }} | {{ Spec2('CSS3 Selectors') }} | Nenhuma mudança. | -| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }} | {{ Spec2('CSS2.1') }} | Uso estrito ao elemento {{ HTMLElement("a") }} . | -| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }} | {{ Spec2('CSS1') }} | Definição Inicial. | +| Especificação | Status | Comentário | +| ---------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------ | +| {{ SpecName('CSS4 Selectors', '#link', ':link') }} | {{ Spec2('CSS4 Selectors') }} | Nenhuma mudança. | +| {{ SpecName('CSS3 Selectors', '#link', ':link') }} | {{ Spec2('CSS3 Selectors') }} | Nenhuma mudança. | +| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }} | {{ Spec2('CSS2.1') }} | Uso estrito ao elemento {{ HTMLElement("a") }} . | +| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }} | {{ Spec2('CSS1') }} | Definição Inicial. | ## Compatibilidade do navegador diff --git a/files/pt-br/web/css/_colon_not/index.md b/files/pt-br/web/css/_colon_not/index.md index 0d6acb57fb8c56..8fe405c6731724 100644 --- a/files/pt-br/web/css/_colon_not/index.md +++ b/files/pt-br/web/css/_colon_not/index.md @@ -2,6 +2,7 @@ title: ":not()" slug: Web/CSS/:not --- + {{ CSSRef() }} ## Resumo @@ -23,8 +24,12 @@ A [pseudo-classe CSS](/pt-BR/docs/Web/CSS/Pseudo-classes) de **negação**, `:no ## Exemplos ```css -p:not(.classico) { color: red; } -body *:not(p) { color: green; } +p:not(.classico) { + color: red; +} +body *:not(p) { + color: green; +} ``` Dado o CSS acima e o HTML abaixo... @@ -32,7 +37,7 @@ Dado o CSS acima e o HTML abaixo... ```html

Um pouco de texto.

Um pouco mais de texto.

-Mais um texto +Mais um texto ``` Se obtém resultados como este: @@ -41,8 +46,8 @@ Se obtém resultados como este: ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | +| Especificação | Status | Comentário | +| ------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------ | | {{ SpecName('CSS4 Selectors', '#negation', ':not()') }} | {{ Spec2('CSS4 Selectors') }} | Extende seus argumentos para permitir seletores não-simples. | | {{ SpecName('CSS3 Selectors', '#negation', ':not()') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_nth-child/index.md b/files/pt-br/web/css/_colon_nth-child/index.md index 395f438ba216b6..eeebac1a825aed 100644 --- a/files/pt-br/web/css/_colon_nth-child/index.md +++ b/files/pt-br/web/css/_colon_nth-child/index.md @@ -64,8 +64,10 @@ A pseudo-classe **`nth-child`** é usada com apenas um argumento, que representa #### HTML ```html -

span:nth-child(2n+1), SEM um -<em> entre os elementos filhos.

+

+ span:nth-child(2n+1), SEM um <em> entre os + elementos filhos. +

Os filhos 1, 3, 5 e 7 são selecionados.

Span 1! @@ -77,13 +79,17 @@ A pseudo-classe **`nth-child`** é usada com apenas um argumento, que representa Span 7!
-
- -

span:nth-child(2n+1), COM um - <em> entre os elementos filhos.

-

Os filhos 1, 5 e 7 são selecionados.
- O 3 está incluído na contagem por ser um filho, mas não é - selecionado porque ele não é um <span>.

+
+ +

+ span:nth-child(2n+1), COM um <em> entre os + elementos filhos. +

+

+ Os filhos 1, 5 e 7 são selecionados.
+ O 3 está incluído na contagem por ser um filho, mas não é selecionado porque + ele não é um <span>. +

Span! Span @@ -95,15 +101,19 @@ A pseudo-classe **`nth-child`** é usada com apenas um argumento, que representa Span
-
- -

span:nth-of-type(2n+1), COM um - <em> entre os elementos filhos.

-

Os filhos 1, 4, 6 e 8 são selecionados.
- O 3 não está incluso na contagem nem é selecionado porque ele é um <em>, - não um <span>, e nth-of-type seleciona apenas os - filhos desse último tipo. O <em> é completamente - pulado e ignorado.

+
+ +

+ span:nth-of-type(2n+1), COM um <em> entre os + elementos filhos. +

+

+ Os filhos 1, 4, 6 e 8 são selecionados.
+ O 3 não está incluso na contagem nem é selecionado porque ele é um + <em>, não um <span>, e + nth-of-type seleciona apenas os filhos desse último tipo. O + <em> é completamente pulado e ignorado. +

Span! Span @@ -131,9 +141,9 @@ div em { margin-bottom: 3px; } -.primeiro span:nth-child(2n+1), -.segundo span:nth-child(2n+1), -.terceiro span:nth-of-type(2n+1) { +.primeiro span:nth-child(2n + 1), +.segundo span:nth-child(2n + 1), +.terceiro span:nth-of-type(2n + 1) { background-color: lime; } ``` @@ -144,8 +154,8 @@ div em { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | +| Especificação | Status | Comentário | +| ----------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS4 Selectors')}} | Adiciona a sintaxe `of ` e especifica que os elementos correspondentes ao seletor não precisam ter um elemento pai. | | {{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_nth-last-child/index.md b/files/pt-br/web/css/_colon_nth-last-child/index.md index 6b9fdf53a3fac8..4742fd5a3e0f55 100644 --- a/files/pt-br/web/css/_colon_nth-last-child/index.md +++ b/files/pt-br/web/css/_colon_nth-last-child/index.md @@ -93,7 +93,7 @@ table { } /* Seleciona os últimos três elementos */ -tr:nth-last-child(-n+3) { +tr:nth-last-child(-n + 3) { background-color: pink; } ``` @@ -104,8 +104,8 @@ tr:nth-last-child(-n+3) { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------- | +| Especificação | Status | Comentário | +| --------------------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------- | | {{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS4 Selectors')}} | Elementos correspondentes não precisam ter um elemento-pai. | | {{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_nth-of-type/index.md b/files/pt-br/web/css/_colon_nth-of-type/index.md index e70be2ebc2a5ab..b58f22d3154932 100644 --- a/files/pt-br/web/css/_colon_nth-of-type/index.md +++ b/files/pt-br/web/css/_colon_nth-of-type/index.md @@ -46,7 +46,7 @@ Veja {{Cssxref(":nth-child")}} para uma explicação mais detalhada de sua sinta ```css /* Parágrafos ímpares */ -p:nth-of-type(2n+1) { +p:nth-of-type(2n + 1) { color: red; } @@ -67,8 +67,8 @@ p:nth-of-type(1) { ## Especificações -| Especificação | Sitação | Comentário | -| -------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------- | +| Especificação | Sitação | Comentário | +| --------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------- | | {{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}} | {{Spec2('CSS4 Selectors')}} | Não é necessário que os elementos correspondentes tenham um pai. | | {{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_only-child/index.md b/files/pt-br/web/css/_colon_only-child/index.md index ed5da8f1c034fa..18ec5a334a77ab 100644 --- a/files/pt-br/web/css/_colon_only-child/index.md +++ b/files/pt-br/web/css/_colon_only-child/index.md @@ -34,8 +34,8 @@ p:only-child {
- Eu tenho irmãos.
- Eu também!
+ Eu tenho irmãos.
+ Eu também!
Eu também tenho irmãos, mas este é um filho único.
@@ -59,19 +59,21 @@ main :only-child { ```html
    -
  1. Primeiro +
  2. + Primeiro
      -
    • Essa lista tem apenas um elemento. +
    • Essa lista tem apenas um elemento.
    3. -
  3. Segundo +
  4. + Segundo
      -
    • Essa lista tem três elementos. -
    • Essa lista tem três elementos. -
    • Essa lista tem três elementos. +
    • Essa lista tem três elementos.
      • +
    • Essa lista tem três elementos.
      • +
    • Essa lista tem três elementos.
    5. -
      +
    ``` #### CSS @@ -92,8 +94,8 @@ li:only-child { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------- | +| Especificação | Status | Comentário | +| ------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------------- | | {{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS4 Selectors')}} | Não é necessário que os elementos selecionados tenham um elemento-pai. | | {{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_only-of-type/index.md b/files/pt-br/web/css/_colon_only-of-type/index.md index 2c7365658e209e..d7971094808c38 100644 --- a/files/pt-br/web/css/_colon_only-of-type/index.md +++ b/files/pt-br/web/css/_colon_only-of-type/index.md @@ -17,8 +17,8 @@ A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) CSS `:only-of-type` repres ## Especifcações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ | +| Especificação | Status | Comentário | +| ----------------------------------------------------------------------- | --------------------------- | ------------------ | | {{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}} | {{Spec2('CSS4 Selectors')}} | Sem mudanças. | | {{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | diff --git a/files/pt-br/web/css/_colon_optional/index.md b/files/pt-br/web/css/_colon_optional/index.md index 39a58495001127..1b71a7537f63a7 100644 --- a/files/pt-br/web/css/_colon_optional/index.md +++ b/files/pt-br/web/css/_colon_optional/index.md @@ -37,12 +37,12 @@ Entradas requeridas devem ser indicadas visualmente, utilizando um tratamento qu ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------- | -| {{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }} | {{ Spec2('HTML WHATWG') }} | Sem mudança. | -| {{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }} | {{ Spec2('HTML5 W3C') }} | Define a semântica da validação e da restrição do HTML. | -| {{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | -| {{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }} | {{ Spec2('CSS3 Basic UI') }} | Define a pseudo-classe, mas não a semântica associada. | +| Specification | Status | Comment | +| ---------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------- | +| {{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }} | {{ Spec2('HTML WHATWG') }} | Sem mudança. | +| {{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }} | {{ Spec2('HTML5 W3C') }} | Define a semântica da validação e da restrição do HTML. | +| {{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | +| {{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }} | {{ Spec2('CSS3 Basic UI') }} | Define a pseudo-classe, mas não a semântica associada. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_out-of-range/index.md b/files/pt-br/web/css/_colon_out-of-range/index.md index 8014c96a3953ae..10203931b4371d 100644 --- a/files/pt-br/web/css/_colon_out-of-range/index.md +++ b/files/pt-br/web/css/_colon_out-of-range/index.md @@ -29,10 +29,17 @@ Essa pseudo classe é muito útil por dar ao usuario uma indicacão visual de qu ```html
    -

    Valores entre 1 e 10 são validos.

    +

    Valores entre 1 e 10 são validos.

    • - +
    @@ -61,11 +68,11 @@ input:out-of-range { } input:in-range + label::after { - content: 'dentro dos limites.'; + content: "dentro dos limites."; } input:out-of-range + label::after { - content: 'Fora dos limites!'; + content: "Fora dos limites!"; } ``` @@ -75,10 +82,10 @@ input:out-of-range + label::after { ## Specifications -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}} | {{Spec2('HTML WHATWG')}} | Define quando `:out-of-range` se iguala aos elementos em HTML. | -| {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}} | {{Spec2('CSS4 Selectors')}} | Definicao inicial. | +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------ | --------------------------- | -------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}} | {{Spec2('HTML WHATWG')}} | Define quando `:out-of-range` se iguala aos elementos em HTML. | +| {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}} | {{Spec2('CSS4 Selectors')}} | Definicao inicial. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_read-write/index.md b/files/pt-br/web/css/_colon_read-write/index.md index 95dd5680d424c5..e1d31776474b20 100644 --- a/files/pt-br/web/css/_colon_read-write/index.md +++ b/files/pt-br/web/css/_colon_read-write/index.md @@ -8,7 +8,8 @@ slug: Web/CSS/:read-write A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/CSS) **`:read-write`** representa um elemento (como o `input` ou `textarea`) que é editável pelo usuário. ```css -input:read-write, textarea:read-write { +input:read-write, +textarea:read-write { background-color: #bbf; } @@ -30,8 +31,10 @@ Ao utilizar os controles de formulário `readonly` permite que o usuário verifi 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 `