diff options
Diffstat (limited to 'files/pt-br/web/css')
255 files changed, 50675 insertions, 0 deletions
diff --git a/files/pt-br/web/css/--_star_/index.html b/files/pt-br/web/css/--_star_/index.html new file mode 100644 index 0000000000..19d4078aaf --- /dev/null +++ b/files/pt-br/web/css/--_star_/index.html @@ -0,0 +1,149 @@ +--- +title: Propriedades personalizadas (--*) +slug: Web/CSS/--* +translation_of: Web/CSS/--* +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p class="summary"><span class="seoSummary">Nomes de propriedades com o prefixo <code>--</code>, como <code>--example-name</code>, representam <em>Propriedade personalizadas</em> que contém um valor que pode ser reutilizado por todo o documento usando a função ({{cssxref("var")}}).</span></p> + +<p>Propriedades personalizadas participam na cascata: cada uma delas pode aparecer várias vezes e o valor da variável corresponderá ao valor definido na propriedade personalizada, decidido pelo algoritmo de cascata.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css">--somekeyword: left; +--somecolor: #0000ff; +--somecomplexvalue: 3px 6px rgb(20, 32, 54); +</pre> + +<dl> + <dt><code><declaration-value></code></dt> + <dd>Este valor corresponde a qualquer sequência de um ou mais tokens, desde que a sequência não contenha tokens não permitidos. Representa a totalidade do que uma declaração válida pode ter como valor.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +<div id="container"> + <p id="thirdParagraph">Este parágrafo deve ter um fundo verde e um texto amarelo.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[2,3]">:root { + --first-color: #488cff; + --second-color: #ffff8c; +} + +#firstParagraph { + background-color: var(--first-color); + color: var(--second-color); +} + +#secondParagraph { + background-color: var(--second-color); + color: var(--first-color); +} + +#container { + --first-color: #48ff32; +} + +#thirdParagraph { + background-color: var(--first-color); + color: var(--second-color); +} + +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example', 500, 130)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}</td> + <td>{{Spec2("CSS3 Variables")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>suporte básico</td> + <td>49.0</td> + <td>15</td> + <td>{{CompatGeckoDesktop("42.0")}}</td> + <td>{{CompatNo}}</td> + <td>36.0</td> + <td>9.3<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>suporte básico</td> + <td>50.0</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>37.0</td> + <td>9.3<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[3] See {{WebKitBug(19660)}}.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/CSS/Using_CSS_variables">Utilizando variáveis CSS</a></li> +</ul> diff --git a/files/pt-br/web/css/-moz-binding/index.html b/files/pt-br/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..136ccb9b33 --- /dev/null +++ b/files/pt-br/web/css/-moz-binding/index.html @@ -0,0 +1,57 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +translation_of: Archive/Web/CSS/-moz-binding +--- +<div>{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(57)}}</div> + +<p>A propriedade CSS <strong><code>-moz-binding</code></strong> é usada por aplicações baseadas em Mozilla para fixar um <a href="/en-US/docs/XBL">XBL</a> binding a um elemento DOM.</p> + +<p>{{CSSInfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* valor da <url> */ +-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox); + +/* Valores globais */ +-moz-binding: inherited; +-moz-binding: initial; +-moz-binding: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{CSSxRef("<url>")}}</dt> + <dd>A URL para o XBL binding (incluindo o identificador de fragmento).</dd> + <dt><code>none</code></dt> + <dd>Nenhum XBL binding é aplicado ao elemento.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: css">.exampleone { + -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton); +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<p>Não faz parte de nenhuma especificação.</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("css.properties.-moz-binding")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">Referências XBL: Binding Attachment and Detachment</a></li> + <li><a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Introduction_to_XBL">Tutorial XUL: Introdução ao XBL</a></li> +</ul> diff --git a/files/pt-br/web/css/-moz-border-bottom-colors/index.html b/files/pt-br/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..855b7f79ba --- /dev/null +++ b/files/pt-br/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,85 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}</div> + +<p>Em aplicações Mozilla como o Firefox, a propriedade CSS <strong><code>-moz-border-bottom-colors</code></strong> define uma lista de cores para a borda inferior.</p> + +<pre class="brush:css no-line-numbers">/* Valor unico <color> */ +-moz-border-bottom-colors: #00E676; + +/* Multiplos valores <color> */ +-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Valores globais */ +-moz-border-bottom-colors: inherit; +-moz-border-bottom-colors: initial; +-moz-border-bottom-colors: unset; +</pre> + +<p>Quando um elemento tem a borda maior do que um único pixel do CSS, cada linha de pixel usa a próxima cor especificada em sua propriedade, de fora para dentro. Isso elimina a necessidade de caixas aninhadas. Se a borda for mais larga que o número de cores especificadas, a parte restante da borda é a cor especificada mais próxima.</p> + +<p>{{cssinfo}}</p> + +<p>Não se aplica</p> + +<ol> + <li>se {{Cssxref("border-style")}} é <code>dashed</code> ou <code>dotted</code>.</li> + <li>a tabelas com <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<p>Aceita uma lista de valores de cores separados por espaços em branco.</p> + +<dl> + <dt><color></dt> + <dd>Especifica a cor de uma linha de pixels da borda inferior. <code>transparent</code> é válido. Veja os valores de {{cssxref("<color>")}} para possíveis unidades.</dd> + <dt>none</dt> + <dd>Padrão, nenhuma cor é desenhada ou o {{cssxref("border-color")}} é usado, se for especificado.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush:html"><div id="exemplo">Exemplo</div> +</pre> + +<pre class="brush:css">#exemplo { + padding: 20px; + background-color: pink; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Exemplo", 120, 90)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<p>Essa propriedade não é parte de nenhuma especificação.</p> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("css.properties.-moz-border-bottom-colors")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("border-color")}}</li> + <li>{{CSSxRef("-moz-border-right-colors")}}</li> + <li>{{CSSxRef("-moz-border-top-colors")}}</li> + <li>{{CSSxRef("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/pt-br/web/css/-moz-border-left-colors/index.html b/files/pt-br/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..950f8205a1 --- /dev/null +++ b/files/pt-br/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,85 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}</div> + +<p>Em aplicações Mozilla como o Firefox, a propriedade CSS <strong><code>-moz-border-left-colors</code></strong> define uma lista de cores para a borda esquerda.</p> + +<pre class="brush:css no-line-numbers">/* Valor unico <color> */ +-moz-border-left-colors: #f0f0f0; + +/* Multiplo valor <color> */ +-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Valores globais */ +-moz-border-left-colors: inherit; +-moz-border-left-colors: initial; +-moz-border-left-colors: unset; +</pre> + +<p>Quando um elemento tem a borda mais larga que um único pixel CSS, cada linha do pixel usa a próxima cor especificada na sua propriedade, de fora para dentro. Isso elimina a necessidade de caixas aninhadas. Se a borda é mais larga do que o número de cores especificadas, a parte restante da borda é a cor especificada mais próxima.</p> + +<p>{{cssinfo}}</p> + +<p>Não se aplica</p> + +<ol> + <li>se {{Cssxref("border-style")}} é <code>dashed</code> ou <code>dotted</code>.</li> + <li>a tabelas com <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<p>Aceita uma lista de valores de cores separados por um espaço em branco.</p> + +<dl> + <dt><color></dt> + <dd>Especifica a cor de uma linha de pixels da borda esquerda. <code>transparent</code> é válido. Veja valores de {{cssxref("<color>")}} para possíveis unidades.</dd> + <dt>none</dt> + <dd>Padrão, nenhuma cor é desenhada ou a {{cssxref("border-color")}} é usada, se especificada.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush:html"><div id="exemplo">Exemplo</div> +</pre> + +<pre class="brush:css">#exemplo { + padding: 15px; + background-color: #4DD0E1; + border: 5px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Exemplo", 120, 90)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<p>Essa propriedade não é parte de nenhuma especificação.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, por favor acess <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("css.properties.-moz-border-left-colors")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> +</ul> diff --git a/files/pt-br/web/css/-moz-border-right-colors/index.html b/files/pt-br/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..905a2f4576 --- /dev/null +++ b/files/pt-br/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,85 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}</div> + +<p>Em aplicações Mozilla como o Firefox, a propriedade CSS <strong><code>-moz-border-right-colors</code></strong> define uma lista de cores para a borda direita.</p> + +<pre class="brush:css no-line-numbers">/* Valor unico <color> */ +-moz-border-right-colors: #f0f0f0; + +/* Multiplos valores <color> */ +-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Valores globais */ +-moz-border-right-colors: inherit; +-moz-border-right-colors: initial; +-moz-border-right-colors: unset; +</pre> + +<p>Quando um elemento tem a borda mais larga que um único pixel CSS, cada linha do pixel usa a próxima cor especificada em sua propriedade, de fora para dentro. Isso elimina a necessidade de caixas aninhadas. Se a borda é mais larga que o número espeficado de cores, a parte restante da borda é a cor especificada mais próxima.</p> + +<p>{{cssinfo}}</p> + +<p>Não se aplica</p> + +<ol> + <li>se {{Cssxref("border-style")}} é <code>dashed</code> ou <code>dotted</code>.</li> + <li>a tabelas com <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<p>Aceita uma lista de valores de cores separados por espaços em branco.</p> + +<dl> + <dt><color></dt> + <dd>Especifica a cor de uma linha de pixel da borda direita. <code>transparent</code> é válido. Veja os valores de {{cssxref("<color>")}} para possíveis unidades.</dd> + <dt>none</dt> + <dd>Padrão, nenhuma cor é desenhada ou {{cssxref("border-color")}} é usada, se especificada.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush:html"><div id="exemplo">Exemplo</div> +</pre> + +<pre class="brush:css">#exemplo { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Exemplo", 120, 90)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<p>Essa propriedade não é parte de nenhuma especificação.</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados.Se você deseja contribuir com dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div> + +<p>{{Compat("css.properties.-moz-border-right-colors")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/pt-br/web/css/-moz-border-top-colors/index.html b/files/pt-br/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..0e9aac64a2 --- /dev/null +++ b/files/pt-br/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,85 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}</div> + +<p>In Mozilla applications like Firefox, the <strong><code>-moz-border-top-colors</code></strong> CSS property sets a list of colors for the top border.</p> + +<pre class="brush:css no-line-numbers">/* Single <color> value */ +-moz-border-top-colors: #f0f0f0; + +/* Multiple <color> values */ +-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Global values */ +-moz-border-top-colors: inherit; +-moz-border-top-colors: initial; +-moz-border-top-colors: unset; +</pre> + +<p>Quando um elemento tem a borda mais larga que um único pixel CSS, cada linha do pixel usa a próxima cor especificada em sua propriedade, de fora para dentro. Isso elimina a necessidade de caixas aninhadas. Se a borda é mais larga que o número espeficado de cores, a parte restante da borda é a cor especificada mais próxima.</p> + +<p>{{cssinfo}}</p> + +<p>It does not apply</p> + +<ol> + <li>se {{Cssxref("border-style")}} é <code>dashed</code> ou <code>dotted</code>.</li> + <li>a tabela com <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<p>Aceita uma lista de valores de cores separados por espaços em branco.</p> + +<dl> + <dt><color></dt> + <dd>Especifica a cor de uma linha de pixel da borda superior. <code>transparent</code> é válido. Veja os valores de {{cssxref("<color>")}} para possíveis unidades.</dd> + <dt>none</dt> + <dd>Padrão, nenhuma cor é desenhada ou {{cssxref("border-color")}} é usada, se especificada .</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush:html"><div id="exemplo">Exemplo</div> +</pre> + +<pre class="brush:css">#exemplo { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Exemplo", 120, 90)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<p>Essa propriedade não é parte de nenhuma especificação.</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div> + +<p>{{Compat("css.properties.-moz-border-top-colors")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/pt-br/web/css/-moz-box-ordinal-group/index.html b/files/pt-br/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..6895245bfa --- /dev/null +++ b/files/pt-br/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,59 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +translation_of: Web/CSS/box-ordinal-group +--- +<p>{{CSSRef}}{{Warning("Essa propriedade é parte do projeto do módulo original do CSS Flexible Box Layout, e foi substituído em projetos recentes.")}}</p> + +<p>Veja <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> para mais informações do que você deveria usar ao invés dessa propriedade.</p> + +<h2 id="Sumário">Sumário</h2> + +<p>Indica o grupo ordinal ao qual o elemento percente. Elementos com um grupo ordinal menor são mostrados antes daqueles com grupo ordinal maior.</p> + +<h2 id="Valores">Valores</h2> + +<p>Os valores devem ser inteiros maiores que zero. O valor padrão para essa propriedade é 1.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><style type="text/css"> + #Flexbox { + display: -ms-box; + display: -moz-box; + display: -webkit-box; + } + + #text1 { + background: red; + -ms-box-ordinal-group: 4; + -moz-box-ordinal-group: 4; + -webkit-box-ordinal-group: 4; + } + + #text2 { + background: green; + -ms-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -webkit-box-ordinal-group: 3; + } + + #text3 { + background: blue; + -ms-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -webkit-box-ordinal-group: 2; + } + + #text4 { + background: orange; + } +</style> + +<div id="Flexbox"> + <div id="text1">text 1</div> + <div id="text2">text 2</div> + <div id="text3">text 3</div> + <div id="text4">text 4</div> +</div> +</pre> diff --git a/files/pt-br/web/css/-moz-cell/index.html b/files/pt-br/web/css/-moz-cell/index.html new file mode 100644 index 0000000000..89fe31fd66 --- /dev/null +++ b/files/pt-br/web/css/-moz-cell/index.html @@ -0,0 +1,8 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}} {{deprecated_header}}</div> + +<p><em>Não use esse valor! </em>Use o valor <code>cursor</code> {{cssxref("cursor#cell","cell")}} em seu lugar.</p> diff --git a/files/pt-br/web/css/-moz-context-properties/index.html b/files/pt-br/web/css/-moz-context-properties/index.html new file mode 100644 index 0000000000..21f99210e6 --- /dev/null +++ b/files/pt-br/web/css/-moz-context-properties/index.html @@ -0,0 +1,79 @@ +--- +title: '-moz-context-properties' +slug: Web/CSS/-moz-context-properties +translation_of: Web/CSS/-moz-context-properties +--- +<div>{{CSSRef}}{{Non-standard_header}} +<div class="note"> +<p><strong>Nota</strong>: Essa característica está disponível desde o Fireforx 55, mas só é suportada atualmente com imagens SVG carregadas via URLs <code>chrome://</code> ou <code>resource://</code>. Para experimentar o recurso em SVG na web é necessário definir <code>svg.context-properties.content.enabled</code> para <code>true</code>.</p> +</div> +</div> + +<p>Se você referenciar uma imagem SVG em uma página web (como com o elemento {{htmlelement("img")}} ou como imagem de fundo), a imagem SVG pode coordenar com o elemento de incorporação (seu contexto) para que a imagem adote os valores da propriedade definidos no elemento de incorporação. Para fazer isso o elemento de incorporação pecisa listar as propriedades que precisarão ficar disponíveis para a imagem listando-os como valores da propriedade de <strong><code>-moz-context-properties</code></strong>, e a imagem precisa optar em usar essas propriedades usando valores como o <code>context-fill</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* Valores-chave */ +-moz-context-properties: fill; +-moz-context-properties: fill, stroke; + +/* Valores globais */ +-moz-context-properties: inherit; +-moz-context-properties: initial; +-moz-context-properties: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>fill</code></dt> + <dd>Expõe o valor <code>fill</code> definido na imagem para o SVG incorporado.</dd> + <dt><code>stroke</code></dt> + <dd>Expõe o valor <code>stroke</code> definido na imagem para o SVG incorporado.</dd> + <dt><code>fill-opacity</code></dt> + <dd>Expõe o valor <code>fill-opacity</code> definido na imagem para o SVG incorporado.</dd> + <dt><code>stroke-opacity</code></dt> + <dd>Expõe o valor <code>stoke-opacity</code> definido na imagem para o SVG incorporado.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Nesse exemplo temos um simples SVG incorporado usando o elemento <code><img></code>.</p> + +<p>Você precisa primeiro especificar no elemento de incorporação as propriedades cujos valores deseja expor ao SVG incorporado, usando a propriedade <code>-moz-context-properties</code>. Por exemplo:</p> + +<pre class="brush: css">.img1 { + width: 100px; + height: 100px; + -moz-context-properties: fill, stroke; + fill: lime; + stroke: purple; +}</pre> + +<p>Agora que você o fez, a imagem SVG pode usar os valores das propriedades {{cssxref("fill")}} e {{cssxref("stroke")}}, por exemplo:</p> + +<pre class="brush: html"><img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> + <rect width='100%' height='100%' stroke-width='30px' + fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"></pre> + +<p>Aqui nós definimos a imagem <code>src</code> para uma URI de dado contendo uma simples imagem SVG; o <code><rect></code> foi feito para receber os valores de <code>fill</code> e <code>stroke</code> de {{cssxref("fill")}} e {{cssxref("stroke")}} definidos no elemento <code><img></code> dando a eles a palavras-chave <code>context-fill</code>/<code>context-stroke</code> em seus valores, juntamente com a cor de fallback para o preenchimento (vermelho) que será usada caso o SVG seja carregado sozinho em uma janela top-level (onde não terá elemento de contexto para prover valores de contexto). Note que se uma cor é definida diretamente no SVG, e a cor de contexto é também especificada, a cor de contexto sobrescreve a cor direta.</p> + +<div class="note"> +<p><strong>Note</strong>: Você pode encontrar um <a href="https://mdn.github.io/css-examples/moz-context-properties/">exemplo funcinal no Github</a>.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<p>Essa propriedade não está definida em nenhum padrão CSS.</p> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div> + +<p>{{Compat("css.properties.-moz-context-properties")}}</p> diff --git a/files/pt-br/web/css/-webkit-overflow-scrolling/index.html b/files/pt-br/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..72f2aac139 --- /dev/null +++ b/files/pt-br/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,105 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - CSS Property + - CSS Reference + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Non-standard + - Não-padrão + - Propriedade CSS + - Reference + - Referência CSS(3) +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p><span style="line-height: 1.5;">A propriedade CSS <code>-webkit-overflow-scrolling</code> controla quando dispositivos com a funcionalidade de toque na tela usam uma rolagem baseada no "momentum" de um dado elemento.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><code>auto</code></dt> + <dd>Usa a rolagem "regular", onde o conteúdo imediatamente cessa a rolagem quando você remove o dedo da tela que reconhece os toques.</dd> + <dt><code>touch</code></dt> + <dd>Usa a rolagem baseada em "momentos", onde o conteúdo continua a rolar por um momento depois do gesto de rolagem ter sido finalizado quando o usuário deixar de tocar com o dedo na tela. A velocidade e duração da rolagem contínua é proporcional ao quão vigoroso a rolagem. Também cria um novo contexto estagnado.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css">-webkit-overflow-scrolling: touch; /* deixa a rolagem suave */ + +-webkit-overflow-scrolling: auto; /* pare de rolar imediatamente */</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificações</h2> + +<p>Não faz parte de nenhuma especificação. A Apple tem <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">uma descrição na referência de CSS do Safari</a>.</p> + +<p> </p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">Artigo do CSS-Tricks com demo </a></li> +</ul> diff --git a/files/pt-br/web/css/-webkit-text-security/index.html b/files/pt-br/web/css/-webkit-text-security/index.html new file mode 100644 index 0000000000..81ceff0405 --- /dev/null +++ b/files/pt-br/web/css/-webkit-text-security/index.html @@ -0,0 +1,49 @@ +--- +title: '-webkit-text-security' +slug: Web/CSS/-webkit-text-security +translation_of: Web/CSS/-webkit-text-security +--- +<div>{{ CSSRef() }} {{ Non-standard_header() }}</div> + +<p><code><strong>-webkit-text-security</strong></code> é uma propriedade CSS não padronizada que ofusca caracteres em um campo {{HtmlElement ("form")}} (como {{HtmlElement ("input")}}} ou {{HtmlElement ("textarea")}}) substituindo eles com uma forma. Afeta apenas campos que não são <code>type=password</code>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css no-line-numbers notranslate">-webkit-text-security: circle; +-webkit-text-security: disc; +-webkit-text-security: square; +-webkit-text-security: none; +</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Tente digitar no campo abaixo. Se o seu navegador suportar essa propriedade, os caracteres deverão ser visualmente substituídos por quadrados.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><label for="name">Name:</label> +<input type="text" name="name" id="name" /></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">input { + -webkit-text-security: square; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Especificação">Especificação</h2> + +<p><em>Não faz parte de nenhuma especificação.</em></p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>Suportado em navegadores baseados no WebKit e Blink.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">WebKit CSS extensions</a></li> +</ul> diff --git a/files/pt-br/web/css/@charset/index.html b/files/pt-br/web/css/@charset/index.html new file mode 100644 index 0000000000..21ea7edbbd --- /dev/null +++ b/files/pt-br/web/css/@charset/index.html @@ -0,0 +1,114 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +translation_of: Web/CSS/@charset +--- +<div>{{cssxref("<string>")}}{{ CSSRef() }}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>A regra <code>@charset</code> especifica a codificação de caracteres utilizada na folha de estilo. Deve ser o primeiro elemento na folha de estilo e não ser precedida de qualquer caráter; uma vez que não é uma declaração aninhada, ele não pode ser usado dentro de um grupo condicional de regras. Se vários <code>@charset</code> são definidos, apenas o primeiro é usado, e não pode ser usado dentro de um atributo de estilo em um elemento HTML ou dentro do elemento {{ HTMLElement("style") }}, onde o conjunto de caracteres da página HTML é relevante.</p> + +<p>Esta regra at (<a href="/pt-BR/CSS/At-rule" title="At-rule">at-rule</a>) é útil quando se usa caracteres não ASCII em algumas propriedades CSS, como conteúdo.</p> + +<p>Como existem várias maneiras de definir a codificação de caracteres em uma folha de estilo, o navegador vai tentar os seguintes métodos na seguinte ordem (e parar assim que um produzir um resultado):</p> + +<ol> + <li>O valor do carácter de ordem de <a href="http://pt.wikipedia.org/wiki/Marca_de_ordem_de_byte" title="http://pt.wikipedia.org/wiki/Marca_de_ordem_de_byte">byte Unicode</a> colocado no início do arquivo.</li> + <li>O valor dado pelo atributo <code>charset</code> do <code>Content-Type:</code> cabeçalho HTTP ou o equivalente no protocolo usado para servir a folha de estilo.</li> + <li>O <code>@charset</code> CSS.</li> + <li>Use a codificação de caracteres definidos pelo documento referente: o atributo charset do elemento {{ HTMLElement("link") }}. Este método é obsoleto em HTML5 e não deve ser utilizado.</li> + <li>Assume que o documento é UTF-8.</li> +</ol> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"> @charset <em>charset</em>; +</pre> + +<p>onde :</p> + +<dl> + <dt style="margin: 0 40px;"><em>charset</em></dt> + <dd style="margin: 0 40px;">É uma {{cssxref("<string>")}} denotando a codificação de caracteres a ser usado. Ele deve ser o nome de uma codificação de caracteres segura para a Web definido no <a href="http://www.iana.org/assignments/character-sets">registro IANA</a>. Se vários nomes estão associados com uma codificação, apenas um é marcado como <em>preferido</em> e assim ser utilizado.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css">@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 */ +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.0</td> + <td>{{ CompatGeckoDesktop("1.8") }}[*]</td> + <td>5.5 [**]</td> + <td>9</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Característica</span></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Suporte básico</span></td> + <td>2.1</td> + <td>{{ CompatGeckoMobile("1.8") }}</td> + <td>5.5 [**]</td> + <td>10.0</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<p>[*] Firefox 1.0 suportado apenas uma sintaxe inválida onde a codificação de caracteres não está definido entre aspas simples ou duplas.<br> + [**] A partir IE 5.5 para o IE 7 incluído, IE também apoiou a sintaxe inválida onde a codificação de caracteres não está definido entre aspas simples ou duplas.</p> diff --git a/files/pt-br/web/css/@font-face/index.html b/files/pt-br/web/css/@font-face/index.html new file mode 100644 index 0000000000..9f60002ff0 --- /dev/null +++ b/files/pt-br/web/css/@font-face/index.html @@ -0,0 +1,189 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">O <strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">at-rule</a> especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário.</span> Se a função <code>local()</code> for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a {{Glossary("user agent")}} encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função <code>url()</code> é baixado e usado.</p> + +<p>Ao permitir que os autores forneçam suas próprias fontes, <code>@font-face</code> torna possível projetar conteúdo sem se limitar às chamadas fontes "seguras para a web" (ou seja, as fontes que são tão comuns que são consideradas como universalmente disponível). A capacidade de especificar o nome de uma fonte instalada localmente a ser procurada e usada permite personalizar a fonte além do básico, ao mesmo tempo em que é possível fazê-lo sem depender de uma conexão com a Internet.</p> + +<p>É comum usar <code>url()</code> e <code>local()</code> juntos, para que a cópia instalada da fonte do usuário seja usada, se disponível, voltando ao download de uma cópia da fonte, caso ela não seja encontrada no dispositivo do usuário.</p> + +<p>A regra de CSS <code>@font-face</code> pode ser usada não apenas no nível superior de um CSS, mas também dentro de qualquer <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">CSS conditional-group at-rule</a>.</p> + +<pre class="brush: css no-line-numbers">@font-face { + font-family: "Open Sans"; + src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); +}</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Descritores">Descritores</h3> + +<dl> + <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt> + <dd>Determina como uma fonte é exibida, com base em se e quando é baixada e pronta para uso.</dd> + <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt> + <dd>Especifica um nome que será usado como o valor nominal da fonte para as propriedades da fonte.</dd> + <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt> + <dd>Um valor {{cssxref ("font-stretch")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo, extensão de fonte: <code>font-stretch: 50% 200%;</code></dd> + <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt> + <dd>Um valor {{cssxref ("font-style")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo <code>font-style: oblique 20deg 50deg;</code></dd> + <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt> + <dd>Um valor de {{cssxref ("font-weight")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo <code>font-weight: 100 400;</code></dd> + <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt> + <dd>Um valor {{cssxref("font-variant")}}.</dd> + <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt> + <dd>Permite o controle sobre recursos tipográficos avançados em fontes OpenType.</dd> + <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt> + <dd>Permite o controle de baixo nível sobre as variações de fonte OpenType ou TrueType, especificando os nomes dos quatro eixos das letras dos recursos para variar, juntamente com seus valores de variação.</dd> + <dt>{{cssxref("@font-face/src", "src")}}</dt> + <dd> + <p>Especifica o recurso que contém os dados da fonte. Pode ser um URL para um local de arquivo de fonte remota ou o nome de uma fonte no computador do usuário.</p> + + <p>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 <code>format()</code>:</p> + + <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>, + url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre> + + <p>Os tipos disponíveis são: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, e <code>"svg"</code>.</p> + </dd> + <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt> + <dd>O intervalo de pontos de código Unicode a serem usados na fonte.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Este exemplo simplesmente especifica uma fonte para download a ser usada, aplicando-a a todo o corpo do documento:</p> + +<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Veja este exemplo</a></p> + +<pre class="brush: html"><html> +<head> + <title>Web Font Sample</title> + <style type="text/css" media="screen, print"> + @font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); + } + + body { font-family: "Bitstream Vera Serif Bold", serif } + </style> +</head> +<body> + This is Bitstream Vera Serif Bold. +</body> +</html> +</pre> + +<p>Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o usuário não tiver essa fonte instalada (dois nomes diferentes são tentados), a fonte para download denominada "MgOpenModernaBold.ttf" será usada:</p> + +<pre class="brush: css">@font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; +} +</pre> + +<h2 id="Font_MIME_Types">Font MIME Types</h2> + +<table> + <thead> + <tr> + <th>Formato</th> + <th>MIME type</th> + </tr> + </thead> + <tbody> + <tr> + <td>TrueType</td> + <td><code>font/ttf</code></td> + </tr> + <tr> + <td>OpenType</td> + <td><code>font/otf</code></td> + </tr> + <tr> + <td>Web Open File Format</td> + <td><code>font/woff</code></td> + </tr> + <tr> + <td>Web Open File Format 2</td> + <td><code>font/woff2</code></td> + </tr> + </tbody> +</table> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>As fontes da Web estão sujeitas à mesma restrição de domínio (os arquivos de fonte devem estar no mesmo domínio da página que os utiliza), a menos que os <a href="/en-US/docs/HTTP_access_control">Controles de Acessos HTTP</a> sejam usados para relaxar essa restrição.</li> + <li><code>@font-face</code> não pode ser declarado dentro de um seletor CSS. Por exemplo, o seguinte não funcionará: + <pre class="brush: css; example-bad">.className { + @font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + } +}</pre> + </li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td> + <td>{{Spec2('WOFF2.0')}}</td> + <td>Especificação de formato de fonte com novo algoritmo de compactação.</td> + </tr> + <tr> + <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td> + <td>{{Spec2('WOFF1.0')}}</td> + <td>Especificação de formato</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("css.at-rules.font-face")}}</p> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li><a href="/en-US/docs/WOFF">About WOFF</a></li> + <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li> + <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li> + <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li> + <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li> + <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li> + <li><a href="https://coolfont.org">Free Fancy Cool Fonts</a></li> +</ul> diff --git a/files/pt-br/web/css/@import/index.html b/files/pt-br/web/css/@import/index.html new file mode 100644 index 0000000000..9081439ecb --- /dev/null +++ b/files/pt-br/web/css/@import/index.html @@ -0,0 +1,121 @@ +--- +title: '@import' +slug: Web/CSS/@import +translation_of: Web/CSS/@import +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A <a href="/en-US/docs/Web/CSS/At-rule">Regra Atribuída (at-rule) </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>@import </code></strong>é usado para importar regras de estilo de outras folhas de estilo. Estas regras devem preceder todos os outros tipos de regras, exceto as regrasde <a href="/pt-BR/docs/Web/CSS/@charset">@charset</a> ; uma vez que não é um <a href="/en-US/docs/Web/CSS/Syntax#nested_statements">Declaração aninhada</a>, <code>@import não pode ser usado dentro do</code> <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules">grupo condicional de regras atribuídas (at-rules)</a>.</p> + +<p><span id="result_box" lang="pt"><span class="alt-edited">Assim como</span> <span class="alt-edited">os agentes do usuário</span> <span class="alt-edited">podem evitar</span> <span>a recuperação de</span> <span>recursos</span> <span>para os tipos de</span> <span>mídia incompatíveis</span><span>, os autores podem</span> <span>especificar regras</span> <span>@import</span> <span>dependentes de mídia</span><span>.</span> <span>Estas importações</span> <span>condicionais</span> <span class="alt-edited">devem ter </span></span> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> <span lang="pt"><span class="alt-edited">separadas por vírgulas</span></span> após a URI. <span id="result_box" lang="pt"><span>Na ausência</span> <span>de qualquer</span> <span>consulta de mídia</span><span> (media queries), a importação</span> <span>é incondicional.</span> <span>Especificando</span> <span>todos</span> <span>para o médio</span> <span>tem o mesmo efeito</span></span>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="eval">@import <em>url</em>; +@import <em>url</em> <em>list-of-media-queries</em>; +</pre> + +<p>where:</p> + +<dl> + <dt style="margin: 0 40px;"><em>url</em></dt> + <dd style="margin: 0 40px;">É algo como {{cssxref("<string>")}} ou como {{cssxref("<uri>")}} representaando o local de onde o recurso será importado. A URL pode ser absoluta ou relativa. Perceba que a URL não precisa, necessariamente, ser um arquivo específico; ela pode especificar o nome do pacotee parcialmente, e o arquivo apropriado será escolhido automaticamente (exemplo: <strong>chrome://communicator/skin/</strong>). <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">Veja aqui</a> para mais informações.</dd> + <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt> + <dd style="margin: 0 40px;">É uma lista separada por vírgulas de <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">consultas de mídia (media queries)</a> conidicionando a aplicação das regras de CSS definidas na URL relacionada. Se o navegador não suportar quaisquer consultas de mídia, ele não carregará o recurso relacionado.</dd> +</dl> + +<h2 id="Sintaxe_formal">Sintaxe formal</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css">@import url("fineprint.css") print; +@import url("bluish.css") projection, tv; +@import 'custom.css'; +@import url("chrome://communicator/skin/"); +@import "common.css" screen, projection; +@import url('landscape.css') screen and (orientation:landscape); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td><span id="result_box" lang="pt"><span class="alt-edited">Estendeu</span> <span>a sintaxe</span> <span>para apoiar qualquer</span> <span>consulta de mídia</span> <span>e</span> <span>não apenas</span> <span>simples</span></span> <a href="/en-US/docs/Web/CSS/@media#Media_types">tipos de mídia (media types)</a>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Adicionado suporte para {{cssxref("<string>")}} para denotar a URL de uma folha de estilo,<br> + e obrigatoriedade da regra <code>@import</code> no início do documento CSS.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibilidade">Browser compatibilidade</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suorte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/@keyframes/index.html b/files/pt-br/web/css/@keyframes/index.html new file mode 100644 index 0000000000..c11df0eee6 --- /dev/null +++ b/files/pt-br/web/css/@keyframes/index.html @@ -0,0 +1,222 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +translation_of: Web/CSS/@keyframes +--- +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">The <strong><code>@keyframes</code></strong> CSS <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.</span> This gives more control over the intermediate steps of the animation sequence than <a href="/en-US/docs/Web/CSS/CSS_Transitions">transitions</a>.</p> + +<pre class="brush: css no-line-numbers">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +}</pre> + +<p>JavaScript can access the <code>@keyframes</code> at-rule with the CSS object model interface {{domxref("CSSKeyframesRule")}}.</p> + +<p>To use keyframes, create a <code>@keyframes</code> rule with a name that is then used by the {{ cssxref("animation-name") }} property to match an animation to its keyframe declaration. Each <code>@keyframes</code> rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.</p> + +<p>You can list the keyframe percentages in any order; they will be handled in the order they should occur.</p> + +<h3 id="Valid_keyframe_lists">Valid keyframe lists</h3> + +<p>If a keyframe rule doesn't specify the start or end states of the animation (that is, <code>0%</code>/<code>from</code> and <code>100%</code>/<code>to</code>, browsers will use the element's existing styles for the start/end states. This can be used to animate an element from its initial state and back.</p> + +<p>Properties that can't be animated in keyframe rules are ignored, but supported properties will still be animated.</p> + +<h3 id="Resolving_duplicates">Resolving duplicates</h3> + +<p>If multiple keyframe sets exist for a given name, the last one encountered by the parser is used. <code>@keyframes</code> rules don't cascade, so animations never derive keyframes from more than one rule set.</p> + +<p>If a given animation time offset is duplicated, the last keyframe in the <code>@keyframes</code> rule for that percentage is used for that frame. There's no cascading within a <code>@keyframes</code> rule if multiple keyframes specify the same percentage values.</p> + +<h3 id="When_properties_are_left_out_of_some_keyframes">When properties are left out of some keyframes</h3> + +<p>Properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. For example:</p> + +<pre class="brush: css">@keyframes identifier { + 0% { top: 0; left: 0; } + 30% { top: 50px; } + 68%, 72% { left: 50px; } + 100% { top: 100px; left: 100%; } +} +</pre> + +<p>Here, the {{ cssxref("top") }} property animates using the <code>0%</code>, <code>30%</code>, and <code>100%</code> keyframes, and {{ cssxref("left") }} animates using the <code>0%</code>, <code>68%</code>, and <code>100%</code> keyframes.</p> + +<h3 id="When_a_keyframe_is_defined_multiple_times">When a keyframe is defined multiple times</h3> + +<p>If a keyframe is defined multiple times but not all affected properties are in each keyframe, only the values specified in the latest keyframe are considered. For example:</p> + +<pre class="brush: css">@keyframes identifier { + 0% { top: 0; } + 50% { top: 30px; left: 20px; } + 50% { top: 10px; } + 100% { top: 0; } +} +</pre> + +<p>In this example, at the <code>50%</code> keyframe, the value used is <code>top: 10px</code> and all other values at this keyframe are ignored.</p> + +<p>{{ non-standard_inline }} {{ fx_minversion_inline("14") }} Cascading keyframes are supported starting in Firefox 14. For the example above, it means that at the <code>50%</code> keyframe, the value <code>left: 20px</code> will be considered. This is not defined in the specification yet, but it is being discussed.</p> + +<h3 id="!important_in_a_keyframe"><code>!important</code> in a keyframe</h3> + +<p>Declarations in a keyframe qualified with <code>!important</code> are ignored.</p> + +<pre class="brush: css">@keyframes important1 { + from { margin-top: 50px; } + 50% { margin-top: 150px !important; } /* ignored */ + to { margin-top: 100px; } +} + +@keyframes important2 { + from { margin-top: 50px; + margin-bottom: 100px; } + to { margin-top: 150px !important; /* ignored */ + margin-bottom: 50px; } +} +</pre> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt>{{cssxref("custom-ident")}}</dt> + <dd>A name identifying the keyframe list. This must match the identifier production in CSS syntax.</dd> + <dt><code>from</code></dt> + <dd>A starting offset of <code>0%</code>.</dd> + <dt><code>to</code></dt> + <dd>An ending offset of <code>100%</code>.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>A percentage of the time through the animation sequence at which the specified keyframe should occur.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a> for examples.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br> + 43.0</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>12 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td> + <p>4.0{{ property_prefix("-webkit") }}<br> + 9.0 <a href="https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html#//apple_ref/doc/uid/TP40014305-CH9-SW35" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></p> + </td> + </tr> + <tr> + <td>ignore <code>!important</code> declarations</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(19)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>ignore <code>!important</code> declarations</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(19)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notes">Notes</h2> + +<ol> + <li><code>@keyframes</code> unsupported in scoped stylesheets in Firefox ({{bug(830056)}}).</li> +</ol> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>{{domxref("AnimationEvent")}}</li> +</ul> diff --git a/files/pt-br/web/css/@media/aspect-ratio/index.html b/files/pt-br/web/css/@media/aspect-ratio/index.html new file mode 100644 index 0000000000..73b86c6b2d --- /dev/null +++ b/files/pt-br/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,128 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +tags: + - '@media' + - CSS + - Media Queries + - Taxa de aspecto + - Tradução + - características de mídia + - pt-br +translation_of: Web/CSS/@media/aspect-ratio +--- +<div>{{cssref}}</div> + +<p>A <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries#Caracter%C3%ADsticas_de_m%C3%ADdia">característica de mídia</a> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> <strong><code>aspect-ratio</code></strong> pode ser utilizada para testar a taxa de aspecto de sua {{glossary("viewport")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A característica de <code>aspect-ratio</code> é especificada como um valor de {{cssxref("<ratio>")}} representando a relação de largura-para-altura em aspecto à sua viewport. É uma característica de diferencial, o que significa que você pode fazer uso de variações pré-fixadas de <strong><code>min-aspect-ratio</code></strong> e <code><strong>max-aspect-ratio</strong></code> para definir os os seus valores mínimos e máximos, respectivamente.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>O exemplo abaixo está contido em um {{htmlElement("iframe")}}, que cria o seu próprio viewport. Redimensione o <code><iframe></code> para ver o <code>aspect-ratio</code> em ação !</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id='inner'> + Observe este elemento, conforme voc&ecirc; altera a largura e a altura da sua viewport. +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Taxa de aspecto mínima */ +@media (min-aspect-ratio: 8/5) { + div { + background: #9af; /* azul */ + } +} + +/* Taxa de aspecto máxima */ +@media (max-aspect-ratio: 3/2) { + div { + background: #9ff; /* ciano */ + } +} + +/* Taxa de aspecto exata, coloque-a no final para evitar sobrescrita*/ +@media (aspect-ratio: 1/1) { + div { + background: #f9a; /* vermelho */ + } +} +</pre> + +<div class="hidden"> +<h2 id="_Exemplo">_Exemplo</h2> + +<p>utilizado iframe e DataURL para que este iframe possa redimensionar</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><label id="wf" for="w">width:165</label> +<input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> +<label id="hf" for="w">height:165</label> +<input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> + +<iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Observe este elemento, conforme voc&ecirc; altera a largura e a altura da sua viewport.</div>"> + +</iframe> +</pre> + +<h3 id="CSS_2">CSS</h3> + +<pre class="brush: css">iframe{ + display:block; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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 +}</pre> +</div> + +<h3 id="Result">Result</h3> + +<div style="overflow: auto;"> +<p>{{ EmbedLiveSample('_Exemplo', '300px', '400px') }}</p> +</div> + +<h2 id="Specificações">Specificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p> diff --git a/files/pt-br/web/css/@media/display-mode/index.html b/files/pt-br/web/css/@media/display-mode/index.html new file mode 100644 index 0000000000..64fdf5f4d8 --- /dev/null +++ b/files/pt-br/web/css/@media/display-mode/index.html @@ -0,0 +1,151 @@ +--- +title: Modo de exibição (display-mode) +slug: Web/CSS/@media/display-mode +tags: + - '@media' + - CSS + - Internet + - Rede + - Referencia + - Web + - display + - display-moe + - funcionalidade de mídia + - manifesto das aplicações web +translation_of: Web/CSS/@media/display-mode +--- +<div>{{cssref}}</div> + +<p>O recurso de mídia CSS {{cssxref("@media")}} do modo de exibição pode ser usado para aplicar estilos com base no modo de exibição de um aplicativo. Você pode usar para prover uma consistente experiência de usuário entre abrir um site a partir de uma URL e um ícone desktop.</p> + +<p>Esse recurso corresponde ao membro da exibição do manifesto do aplicativo da Web. Ambos aplicam-se ao contexto de navegação de nível superior e a qualquer contexto afilhado de navegação. O recurso de consulta aplica-se independentemente de onde um manifesto de aplicativo web está presente.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>O recurso <code>display-mode</code> é especificado como um valor de uma palavra chave escolhido da lista abaixo.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Modo de exibição</th> + <th scope="col">Descrição</th> + <th scope="col">Modo de exibição secundário</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td> + <p>Toda a área disponível da tela será usada e nada do agente-usuário (navegador) {{glossary("chrome")}} é mostrado.</p> + </td> + <td><code>standalone</code></td> + </tr> + <tr> + <td><code>standalone</code></td> + <td> + <p>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.</p> + </td> + <td><code>minimal-ui</code></td> + </tr> + <tr> + <td><code>minimal-ui</code></td> + <td> + <p>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.</p> + </td> + <td><code>browser</code></td> + </tr> + <tr> + <td><code>browser</code></td> + <td> + <p>A aplicação abre numa aba ou nova janela convencional do navegador, dependendo do navegador e da plataforma.</p> + </td> + <td>(nenhum)</td> + </tr> + </tbody> +</table> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: css">@media all and (display-mode: fullscreen) { + body { + margin: 0; + border: 5px solid black; + } +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td> + <td>{{Spec2('Manifest')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome(46.0) }}[1]</td> + <td>{{ CompatGeckoDesktop(47) }}<sup>[2]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop(47) }}<sup>[2]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatChrome(46.0) }}[1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Não suporta o valor <code>minimal-ui</code>. O valor <code>@supports</code> para <code>display-mode</code> só é suportado no Chrome 48.</p> + +<p>[2] Somente os valores <code>fullscreen</code> e <code>browser</code> são suportados na versão 47. <code>minimal-ui</code> e <code>standalone</code> foram adicionados no Firefox 57.</p> diff --git a/files/pt-br/web/css/@media/index.html b/files/pt-br/web/css/@media/index.html new file mode 100644 index 0000000000..18c46ee615 --- /dev/null +++ b/files/pt-br/web/css/@media/index.html @@ -0,0 +1,446 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@media' + - At-rule + - CSS + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@media +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>@media</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule </a><font><font> pode ser usada para aplicar estilos com base no resultado de uma ou mais consultas de mídia, que testam o tipo, as características específicas e o ambiente de um dispositivo.</font></font></p> + +<p>No CSS, a regra <code>@media</code> deve ser posta na parte superior do seu código ou aninhada dentro de algum outro <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">conditional group at-rule</a>.</p> + +<pre class="brush: css no-line-numbers">/* Media query */ +@media screen and (min-width: 900px) { + article { + padding: 1rem 3rem; + } +} + +/* Nested media query */ +@supports (display: flex) { + @media screen and (min-width: 900px) { + article { + display: flex; + } + } +} +</pre> + +<p>Besides its use in the <code>@media</code> rule, a media query may also be applied to an HTML {{HTMLElement("link")}} element to restrict an entire style sheet to certain media.</p> + +<pre class="brush: html no-line-numbers"><!-- Media-dependent style sheet included in HTML --> +<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" /></pre> + +<p>In JavaScript, <code>@media</code> can be accessed via the {{domxref("CSSMediaRule")}} CSS object model interface.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<p>The <code>@media</code> at-rule is composed of one or more media queries, each of which consists of an optional <a href="#Media_types">media type</a> and any number of <a href="#Media_features">media feature</a> expressions. Multiple queries can be combined in various ways by using <a href="#Logical_operators">logical operators</a>, and are case-insensitive.</p> + +<p>Corresponding styles are applied only if a media query computes to true, i.e., when the specified media type matches the type of device the document is being displayed on <em>and</em> all media feature expressions compute as true. Queries involving unknown media types are always false.</p> + +<div class="note"> +<p><strong>Note:</strong> A style sheet with a media query attached to its {{HTMLElement("link")}} tag <a href="http://scottjehl.github.com/CSS-Download-Tests/">will still download</a> even if the query returns false. Nevertheless, its contents will not apply unless and until the result of the query changes to true.</p> +</div> + +<h3 id="Media_types" name="Media_types">Media types</h3> + +<p><em>Media types</em> describe the general category of a device. Unless you use the <code>not</code> or <code>only</code> logical operators, the media type is optional and the <code>all</code> type will be implied.</p> + +<dl> + <dt><code>all</code></dt> + <dd>Suitable for all devices.</dd> + <dt><code>print</code></dt> + <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd> + <dt><code>screen</code></dt> + <dd>Intended primarily for color computer screens.</dd> + <dt><code>speech</code></dt> + <dd>Intended for speech synthesizers.</dd> +</dl> + +<div class="note"><strong>Deprecated media types:</strong> CSS2.1 and <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>), but they were deprecated in <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> and shouldn't be used. The <code>aural</code> type has been replaced by <code>speech</code>, which is similar.</div> + +<h3 id="Media_features" name="Media_features">Media features</h3> + +<p><em>Media feature expressions</em> 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.</p> + +<table> + <thead> + <tr> + <th>Name</th> + <th>Summary</th> + <th>Notes</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td> + <td>Width of the viewport</td> + <td></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td> + <td>Height of the viewport</td> + <td></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td> + <td>Width-to-height aspect ratio of the viewport</td> + <td></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td> + <td>Orientation of the viewport</td> + <td></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td> + <td>Pixel density of the output device</td> + <td></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td> + <td>Scanning process of the output device</td> + <td></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td> + <td>Does the device use a grid or bitmap screen?</td> + <td></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update</code></a></td> + <td>How frequently the output device can modify the appearance of content</td> + <td>Added in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td> + <td>How does the output device handle content that overflows the viewport along the block axis?</td> + <td>Added in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td> + <td>Can content that overflows the viewport along the inline axis be scrolled?</td> + <td>Added in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td> + <td>Number of bits per color component of the output device, or zero if the device isn't color</td> + <td></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/@media/color-gamut">color-gamut</a></code></td> + <td>Approximate range of colors that are supported by the user agent and output device</td> + <td>Added in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td> + <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table</td> + <td></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td> + <td>The display mode of the application, as specified in the web app manifest's <a href="/en-US/docs/Web/Manifest#display"><code>display</code></a> member</td> + <td>Defined in the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td> + <td>Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome</td> + <td></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td> + <td>Is the user agent or underlying OS inverting colors?</td> + <td>Deferred to Media Queries Level 5.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td> + <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td> + <td>Added in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td> + <td>Does the primary input mechanism allow the user to hover over elements?</td> + <td>Added in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td> + <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td> + <td>Added in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td> + <td>Does any available input mechanism allow the user to hover over elements?</td> + <td>Added in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td> + <td>Light level of the environment</td> + <td>Deferred to Media Queries Level 5.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td> + <td>Is scripting (e.g., JavaScript) available?</td> + <td>Deferred to Media Queries Level 5.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td> + <td>Width of the rendering surface of the output device</td> + <td>Deprecated in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td> + <td>Height of the rendering surface of the output device</td> + <td>Deprecated in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td> + <td>Width-to-height aspect ratio of the output device</td> + <td>Deprecated in Media Queries Level 4.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td> + <td>Number of physical device pixels per CSS pixel</td> + <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td> + <td>Are CSS 3D {{cssxref("transform")}}s supported?</td> + <td>Nonstandard; WebKit/Blink-specific. If possible, use {{cssxref("@supports")}} instead.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td> + <td>Are CSS 2D {{cssxref("transform")}}s supported?</td> + <td>Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td> + <td>Are CSS {{cssxref("transition")}}s supported?</td> + <td>Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td> + <td>Are CSS {{cssxref("animation")}}s supported?</td> + <td>Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.</td> + </tr> + </tbody> +</table> + +<h3 id="Logical_operators">Logical operators</h3> + +<p>The <em>logical operators</em> <code>not</code>, <code>and</code>, and <code>only</code> can be used to compose a complex media query. You can also combine multiple media queries into a single rule using a comma-separated list.</p> + +<h4 id="and"><code>and</code></h4> + +<p>The <code>and</code> operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.</p> + +<h4 id="not"><code>not</code></h4> + +<p>The <code>not</code> operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list, it will only negate the specific query to which it is applied. If you use the <code>not</code> operator, you <em>must</em> specify an explicit media type.</p> + +<div class="note"> +<p><strong>Note:</strong> The <code>not</code> keyword can't be used to negate an individual feature expression, only an entire media query.</p> +</div> + +<h4 id="only"><code>only</code></h4> + +<p>The <code>only</code> operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the <code>only</code> operator, you <em>must</em> specify an explicit media type.</p> + +<h4 id="comma-separated_lists">comma-separated lists</h4> + +<p>Each query in a comma-separated media query list is treated separately from the others. If any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like the logical operator <code>or</code>.</p> + +<h3 id="Examples" name="Examples">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Examples</h2> + +<pre class="brush: css">@media print { + body { font-size: 10pt; } +} + +@media screen { + body { font-size: 13px; } +} + +@media screen, print { + 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; } +} +</pre> + +<p>For more media feature examples, please see the reference page for each specific feature. For more logical operator examples, please see <a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Using media queries</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Standardizes the <code>-webkit-device-pixel-ratio</code> and <code>-webkit-transform-3d</code> media features.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Defines the basic syntax of the <code>@media</code> rule.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> + <p>Adds <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br> + Deprecates all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br> + Makes the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(1.7) }}</td> + <td>6.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + <tr> + <td><code>speech</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.2</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Media features</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(1.7) }}</td> + <td>9.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + <tr> + <td><code>display-mode</code> media feature</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop(47) }}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(1.7) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.1</td> + </tr> + <tr> + <td><code>speech</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Media features</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(1.7) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.1</td> + </tr> + <tr> + <td><code>display-mode</code> media feature</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(47)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Only the <code>fullscreen</code> and <code>browser</code> values of <code>display-mode</code> were supported in 47. <code>minimal-ui</code> and <code>standalone</code> were added in Firefox 57.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Using media queries</a></li> + <li>In JavaScript, <code>@media</code> can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.</li> +</ul> diff --git a/files/pt-br/web/css/@media/prefers-color-scheme/index.html b/files/pt-br/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..dc224d8741 --- /dev/null +++ b/files/pt-br/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,104 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - prefers-color-scheme +translation_of: Web/CSS/@media/prefers-color-scheme +--- +<div class="blockIndicator note"> +<p>Se você definiu <code>privacy.resistFingerprinting</code> como <strong>true</strong>, <code><a href="https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> será substituída pela <code>light</code>.</p> +</div> + +<p>O <strong><code>prefers-color-scheme</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> é usado para detectar se o usuário solicitou que o sistema use um tema de cores claras ou escuras.</p> + +<h2 id="Syntax">Syntax</h2> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>Indica que o usuário não fez nenhuma preferência conhecida pelo sistema. Este valor da palavra-chave é avaliado como <code>false</code> no <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">contexo booleano</a>.</dd> + <dt><code><dfn>light</dfn></code></dt> + <dd>Indica que o usuário notificou o sistema de que prefere uma interface com um tema claro.</dd> + <dt><code><dfn>dark</dfn></code></dt> + <dd>Indica que o usuário notificou o sistema de que prefere uma interface com um tema escuro.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temáticos de acordo com a preferência do esquema de cores do usuário.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="day">Dia (inicial)</div> +<div class="day light-scheme">Dia (modificar e utilizar um tema claro)</div> +<div class="day dark-scheme">Dia (modificar e utilizar um tema escuro)</div> <br> + +<div class="night">Noite (inicial)</div> +<div class="night light-scheme">Noite (modificar e utilizar um tema claro)</div> +<div class="night dark-scheme">Noite (modificar e utilizar um tema escuro)</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.day { background: #eee; color: black; } +.night { background: #333; color: white; } + +@media (prefers-color-scheme: dark) { + .day.dark-scheme { background: #333; color: white; } + .night.dark-scheme { background: black; color: #ddd; } +} + +@media (prefers-color-scheme: light) { + .day.light-scheme { background: white; color: #555; } + .night.light-scheme { background: #eee; color: black; } +} + +.day, .night { + display: inline-block; + padding: 1em; + width: 7em; + height: 2em; + vertical-align: middle; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div> + +<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Video tutorial: Coding a Dark Mode for your Website</a></li> + <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li> + <li>Changing color schemes in <a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a> and <a href="https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019">Android</a>.</li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div> diff --git a/files/pt-br/web/css/@page/index.html b/files/pt-br/web/css/@page/index.html new file mode 100644 index 0000000000..5303c7e2c1 --- /dev/null +++ b/files/pt-br/web/css/@page/index.html @@ -0,0 +1,109 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - '@page' + - CSS + - pagina +translation_of: Web/CSS/@page +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p class="note">A regra CSS <code>@page</code> é utilizada para modificar algumas propriedades CSS quando o documento for impresso.<strong> </strong>Você não pode mudar todas as propriedades CSS com @page. Você poderá somente mudar as margens, orphans, widows, e page breaks do documento. Na tentativa de mudar outra propriedade CSS, elas serão ignoradas.</p> + +<p class="note">A regra CSS <code>@page</code> pode ser acessada via interface do modelo de objeto {{domxref("CSSPageRule")}}.</p> + +<div class="note"><strong>Nota:<code> </code></strong>A W3C está analisando como lidar com unidades viewport-related {{cssxref("<length>")}}, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>. Enquanto isso, não use eles junto com a regra @page.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">@page :pseudo-class { + margin:2in; +} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Podemos fazer referência a vários <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> de <code>@page</code> por exemplo.</p> + +<ul> + <li>{{Cssxref(":first")}}</li> + <li>{{Cssxref(":left")}}</li> + <li>{{Cssxref(":right")}}</li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>Sem mudanças para {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a <code>@page</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>8.0</td> + <td>6.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/_colon_active/index.html b/files/pt-br/web/css/_colon_active/index.html new file mode 100644 index 0000000000..5c929711bf --- /dev/null +++ b/files/pt-br/web/css/_colon_active/index.html @@ -0,0 +1,159 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<div></div> + +<div>A pseudo-classe css <strong> :active </strong></div> + +<p>Esse estilo pode ser substituído por qualquer outra pseudo-classe relacionada ao link, ou seja, {{cssxref(":link")}}, {{cssxref(":hover")}} e {{cssxref(":visited")}}, aparecendo nas regras subseqüentes. Para estilizar apropriadamente os links, você precisa colocar a regra <code>:active </code>depois de todas as outras regras relacionadas ao link, conforme definido pela ordem LVHA. <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Nota:</strong> Em sistemas com mouses com vários botões, o CSS 3 especifica que a pseudo-classe :active só deve ser aplicada ao botão principal em mouses destros, este é tipicamente o botão mais à esquerda.</div> + +<h2 id="Example" name="Example">Exemplo</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html; highlight:[3]"><body> + <h1>:active CSS selector example</h1> + <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p> +</body></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 } +a:link { color: blue } /* links não visitados */ +a:visited { color: purple } /* links visitados */ +a:hover { <span class="st">font-weight: bold</span> } /* user hovers */ +a:active { color: lime } /* links ativos */</pre> +</div> + +<div>{{EmbedLiveSample('example',600,140)}}</div> + +<h2 id="Especificações"><span>Especificações</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> + <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> + <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div> + </div> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> + <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> + <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div> + </div> + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> + <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> + <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div> + </div> + </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> + <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> + <div><span id="ouHighlight__8_17TO0_8">Definição</span><span id="noHighlight_0.9831647105645616"> </span><span id="ouHighlight__0_6TO10_16">inicial</span><span id="noHighlight_0.3416173095780455">.</span></div> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support on the <code><a></code> element</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>5.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Support on any element</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support on the <code><a></code> element</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Support on any element</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] By default, Safari Mobile does not use the {{cssxref(":active")}} state unless there is a <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> event handler on the relevant element or on the {{HTMLElement("body")}}.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/pt-br/web/css/_colon_blank/index.html b/files/pt-br/web/css/_colon_blank/index.html new file mode 100644 index 0000000000..97395a29d1 --- /dev/null +++ b/files/pt-br/web/css/_colon_blank/index.html @@ -0,0 +1,57 @@ +--- +title: ':blank' +slug: 'Web/CSS/:blank' +tags: + - ':blank' + - CSS + - Experimental + - Necessita de Exemplos + - Pseudo-classe + - Seletores CSS +translation_of: 'Web/CSS/:blank' +--- +<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The <code>:blank</code> selector is considered at risk, as the CSSWG keeps changing it.</p> + +<p>See <a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">CSSWG issue #1967</a>.</p> +</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:blank</code></strong> seleciona elementos de entrada do usuário vazios (ex. {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}).</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira em <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma pull request.</div> + +<p>{{Compat("css.selectors.blank")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef(":empty")}}</li> + <li>{{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} - Definição anterior de <code>:blank</code>.</li> +</ul> diff --git a/files/pt-br/web/css/_colon_checked/index.html b/files/pt-br/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..17954e5a20 --- /dev/null +++ b/files/pt-br/web/css/_colon_checked/index.html @@ -0,0 +1,239 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - ':checked' + - CSS + - CSS Pseudo-classe + - Layout + - Referencia + - Web +translation_of: 'Web/CSS/:checked' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classe </a><strong><code>:checked</code></strong> de um seletor CSS representa um elemento <strong>radio </strong>(<code><input type="radio"></code>), <strong>checkbox </strong>(<code><input type="checkbox"></code>) ou <strong>option</strong> ({{ HTMLElement("option") }} em um {{ HTMLElement("select") }}) que está marcada ou alternado para um estado ligado. O usuário pode mudar seu estado clicando no elemento, ou selecionando um valor diferente, nesse caso a pseudo-classe <strong>:checked</strong> não se aplica a esse elemento, mas vai para um elemento relevante.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush: css">input:checked { + margin-left: 25px; + border: 1px solid blue; +} +</pre> + +<h3 id="Examples" name="Examples">Sintaxe formal</h3> + +<pre class="syntaxbox">elemento:checked { estilos de propriedades }</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_selectors" name="Example_selectors">Exemplo de seletores</h3> + +<pre class="brush: css">/* qualquer elemento "checkable" */ +:checked { + width: 50px; + height: 50px; +} + +/* qualquer elemento radio */ +input[type="radio"]:checked { + margin-left: 25px; +} + +/* apenas elementos checkbox */ +input[type="checkbox"]:checked { + display: none; +} + +/* apenas elementos option */ +option:checked { + color: red; +} +</pre> + +<dl> + <dt><code>input[type="radio"]:checked</code></dt> + <dd>Representa todos os botões de rádio na página que estão ativos</dd> +</dl> + +<dl> + <dt><code>input[type="checkbox"]:checked</code></dt> + <dd>Representa todos os checkboxes na página que estão ativos</dd> + <dt><code>option:checked</code></dt> + <dd>Representa todos os selects na página que estão selecionados</dd> +</dl> + +<h3 id="Usando_checkboxes_escodindos_para_amarzenar_algum_valor_booleano.">Usando checkboxes escodindos para amarzenar algum valor <span class="st">booleano</span>.</h3> + +<p>A pseudo-classe <code>:checked </code>aplicada em checkboxes escondidos, adicionado ao início de sua página pode<br> + ser aplicada de forma a armazenar algum booleano dinâmico para ser usado por uma regra CSS. O exemplo a seguir mostra como exibir/esconder um elemento expansível com um simples clique em um botão (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download esse demo</a>).</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Elementos expansíveis</title> +<style type="text/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; +} + +#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:checked ~ * tr.expandable { + display: table-row; + background: #cccccc; + +} + +#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable { + display: block; + background: #cccccc; +} +</style> +</head> +<body> + +<input type="checkbox" id="isexpanded" /> + +<h1>Elementos expansíveis</h1> +<table> + <thead> + <tr><th>Coluna #1</th><th>Coluna #2</th><th>Coluna #3</th></tr> + </thead> + <tbody> + <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + </tbody> +</table> + +<p>[some sample text]</p> +<p><label for="isexpanded" id="expand-btn">Mostra ou esconder elemntos</label></p> +<p class="expandable">[outra amostra de texto]</p> +<p>[alguma amostra de texto]</p> +</body> +</html> +</pre> + +<p>{{ EmbedLiveSample('Usando_checkboxes_escodindos_para_amarzenar_algum_valor_booleano', '', '', '', 'Web/CSS/:checked') }}</p> + +<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values">Usando radioboxes escondidos para armazenar algum valor CSS booleano</h3> + +<p>Você também pode usar a pseudo-classe <code>:checked </code>aplicada a um radioboxe escondido afim de construir, por exemplo, uma <strong>galeria de imagem onde as imagens apenas sejam exibidas no tamanho cheio com o clique do mouse em visualizar. </strong>Veja <a href="/@api/deki/files/6268/=css-checked-gallery.zip">essa demonstração</a> como uma dica.</p> + +<div class="note"><strong>Nota: </strong>Para um efeito análogo, mas baseada na pseudo-classe <a class="internal" href="/pt-BR/docs/Web/CSS/%3Ahover" title="CSS/:hover"><code>:hover</code></a><code> </code>sem radioboxes escondidos, veja <a href="/@api/deki/files/6247/=css-gallery.zip">essa demostração</a>, tomadas a partir de uma página <a class="internal" href="/pt-BR/docs/Web/CSS/%3Ahover" title="CSS/:hover"><code>:hover</code></a><code>.</code></div> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estatus</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sem mudanças.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define a semântica sobre o HTML.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sem mudanças.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Link para Seletores nível 3</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Define a pseudo-classe, mas não <span class="short_text" id="result_box" lang="pt"><span class="hps">associação</span> <span class="hps">semântica</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.1</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/_colon_disabled/index.html b/files/pt-br/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..702714e76c --- /dev/null +++ b/files/pt-br/web/css/_colon_disabled/index.html @@ -0,0 +1,128 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +translation_of: 'Web/CSS/:disabled' +--- +<div>{{CSSRef}}</div> + +<p><font><font>A </font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes"><font>pseudo-classe </font></a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><font>CSS</font></a><font> </font></font><strong><code>:disabled</code></strong><font><font> representa qualquer elemento desativado. </font><font>Um elemento é desativado se não puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. </font><font>O elemento também possui um estado habilitado, no qual ele pode ser ativado ou aceitar o foco.</font></font></p> + +<pre class="brush: css no-line-numbers">/* Selects any disabled <input> */ +input:disabled { + background: #ccc; +}</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p><font><font>Este exemplo mostra um formulário básico de envio. </font><font>Ele usa o </font><font>evento </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"><font><font>JavaScript</font></font></a> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/change" title="/en-US/docs/Web/Events/change">change</a></code><font><font> para permitir que o usuário ative / desative os campos de faturamento.</font></font></p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="#"> + <fieldset id="shipping"> + <legend>Shipping address</legend> + <input type="text" placeholder="Name"> + <input type="text" placeholder="Address"> + <input type="text" placeholder="Zip Code"> + </fieldset> + <br> + <fieldset id="billing"> + <legend>Billing address</legend> + <label for="billing-checkbox">Same as shipping address:</label> + <input type="checkbox" id="billing-checkbox" checked> + <br> + <input type="text" placeholder="Name" disabled> + <input type="text" placeholder="Address" disabled> + <input type="text" placeholder="Zip Code" disabled> + </fieldset> +</form> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type="text"]:disabled { + background: #ccc; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: 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); + +function toggleBilling() { + // Select the billing text fields + var billingItems = document.querySelectorAll('#billing input[type="text"]'); + + // Toggle the billing text fields + for (var i = 0; i < billingItems.length; i++) { + billingItems[i].disabled = !billingItems[i].disabled; + } +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example', 300, 250)}}</p> + +<h2 id="Expecificações">Expecificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Defines the semantics of HTML and forms.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Links to Selectors Level 3.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defines the pseudo-class, but not the associated semantics.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidades_entre_navegadores">Compatibilidades entre navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.disabled")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li> + <p>{{Cssxref(":enabled")}}</p> + </li> +</ul> diff --git a/files/pt-br/web/css/_colon_empty/index.html b/files/pt-br/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..feac75ca32 --- /dev/null +++ b/files/pt-br/web/css/_colon_empty/index.html @@ -0,0 +1,96 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +translation_of: 'Web/CSS/:empty' +--- +<div>{{ CSSRef() }}</div> + +<p>A <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/pt-BR/docs/Web/CSS">CSS</a> <strong><code>:empty</code></strong> representa qualquer elemento que não tenha filhos. Aqui, filhos podem ser outros elementos ou blocos de texto (incluindo espaços em branco). Comentários e instruções de processamento não são considerados ao se determinar se um elemento é vazio.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona qualquer <div> que não tenha conteúdo */ +div:empty { + background: lime; +}</pre> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="box"><!-- Eu serei verde. --></div> +<div class="box">Eu serei rosa.</div> +<div class="box"> + <!-- Eu serei rosa por causa do espaço em branco em volta desse comantário --> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<div class="hidden"> +<pre class="brush: css">body { + display: flex; + justify-content: space-around; +}</pre> +</div> + +<pre class="brush: css">.box { + background: pink; + height: 80px; + width: 80px; +} + +.box:empty { + background: lime; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Examples', 300, 80)}}</p> + +<h2 id="Questões_de_acessibilidade">Questões de acessibilidade</h2> + +<p>Tecnologias assistivas como leitores de tela não conseguem identificar e processar conteúdos interativos que estejam vazios. Todo conteúdo interativo deve ter um nome acessível, que é criado ao fornecer um valor de texto para o elemento pai do controle interativo (<a href="/pt-BR/docs/Web/HTML/Element/a">âncoras</a>, <a href="/pt-BR/docs/Web/HTML/Element/button">botões</a>, etc.). Nomes acessíveis expõem o controle interativo à <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">árvore de acessibilidade</a>, uma API que comunica informações importantes úteis para tecnologias assistivas.</p> + +<p>The text that provides the interactive control's accessible name can be hidden using <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener">a combination of properties</a> that remove it visually from the screen but keep it parseable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/" rel="noopener">What is an accessible name? | The Paciello Group</a></li> + <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html">Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>No change</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.empty")}}</p> +</div> diff --git a/files/pt-br/web/css/_colon_enabled/index.html b/files/pt-br/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..2d51b11e61 --- /dev/null +++ b/files/pt-br/web/css/_colon_enabled/index.html @@ -0,0 +1,103 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +translation_of: 'Web/CSS/:enabled' +--- +<div>{{CSSRef}}</div> + +<p><font><font>A </font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes"><font>pseudo-classe </font></a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><font>CSS</font></a><font> </font></font><strong><code>:enabled</code></strong><font><font> representa qualquer elemento ativado. </font><font>Um elemento é ativado se puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. </font><font>O elemento também possui um estado desativado, no qual não pode ser ativado nem aceitar foco.</font></font></p> + +<pre class="brush: css no-line-numbers">/* Seleciona qualquer <input> ativado */ +input:enabled { + color: blue; +}</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p><font><font>O exemplo a seguir torna a cor do texto e do botão </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="O elemento HTML <input> é usado para criar controles interativos para formulários baseados na web, a fim de aceitar dados do usuário; uma ampla variedade de tipos de dados de entrada e widgets de controle estão disponíveis, dependendo do dispositivo e do agente do usuário."><input></a> </code><font><font>verde quando ativada e cinza quando desativada. </font><font>Isso ajuda o usuário a entender quais elementos podem ser interagidos.</font></font>.</p> + +<div id="Enabled_Disabled_Inputs_Example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><form action="url_of_form"> + <label for="FirstField">First field (enabled):</label> + <input type="text" id="FirstField" value="Lorem"><br> + + <label for="SecondField">Second field (disabled):</label> + <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br> + + <input type="button" value="Submit"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css;">input:enabled { + color: #2b2; +} + +input:disabled { + color: #aaa; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 550, 95)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Defines the semantics for HTML and forms.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Links to Selectors Level 3.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defines the pseudo-class, but not the associated semantics.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.enabled")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Cssxref(":disabled")}}</li> +</ul> +</div> diff --git a/files/pt-br/web/css/_colon_first-child/index.html b/files/pt-br/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..4301b602dc --- /dev/null +++ b/files/pt-br/web/css/_colon_first-child/index.html @@ -0,0 +1,139 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - Referencia +translation_of: 'Web/CSS/:first-child' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> de <a href="/en/CSS" title="CSS">CSS</a> <strong><code>:first-child</code></strong> representa qualquer elemento que seja o primeiro filho de seus pais.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="eval">elemento:first-child { estilos } +</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Exemplo_1">Exemplo 1</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <span>Este span é verde limão!</span> + <span>Este span não é verde limão. :(</span> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">span:first-child { + background-color: lime; +} +</pre> + +<p>... resultado ...</p> + +<p><span>{{EmbedLiveSample('Exemplo_1',300,50)}}</span></p> + +<h3 id="Example_2_-_Using_UL" name="Example_2_-_Using_UL">Exemplo 2 - Usando UL</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li>Elemento de Lista 1</li> + <li>Elemento de Lista 2</li> + <li>Elemento de Lista 3</li> +</ul></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">li{ + color:red; +} +li:first-child{ + color:green; +}</pre> + +<p>... resultado ...</p> + +<p>{{EmbedLiveSample('Example_2_-_Using_UL',300,150)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sem mudança.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browsers_compatíveis">Browsers compatíveis</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>4.0</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>7<sup><a href="#compat_hint1">[1]</a></sup></td> + <td>9.5</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Suporte básico</span></td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>7<sup><a href="#compat_hint1">[1]</a></sup></td> + <td>10.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<p><a id="compat_hint1" name="compat_hint1">[1]</a> Internet Explorer 7 não atualiza os estilo dos elementos quando estes são adicionados dinamicamente. No Internet Explorer 8, se um elemento é inserido dinamicamente por um evento de clique, o estilo first-child não é aplicado até que este perca o foco.</p> diff --git a/files/pt-br/web/css/_colon_first-of-type/index.html b/files/pt-br/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..9cc021360c --- /dev/null +++ b/files/pt-br/web/css/_colon_first-of-type/index.html @@ -0,0 +1,156 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS Pseudo-classe +translation_of: 'Web/CSS/:first-of-type' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:first-of-type</code></strong> representa o primeiro elemento de seu tipo entre os filhos de seu elemento pai.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona qualquer <p> que seja o primeiro elemento + desse tipo entre seus irmãos */ +p:first-of-type { + color: red; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Originalmente definido, o elemento selecionado tinha que ter um pai. Desde o Seletores Nível 4, isso não é mais necessário.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Estilizando_o_primeiro_parágrafo">Estilizando o primeiro parágrafo</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h2>Título</h2> +<p>Parágrafo 1</p> +<p>Parágrafo 2</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:first-of-type { + color: red; + font-style: italic; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Styling_the_first_paragraph')}}</p> + +<h3 id="Elementos_aninhados">Elementos aninhados</h3> + +<p>Este exemplo mostra como os elementos aninhados também podem ser estilizados. Note que o <a href="/en-US/docs/Web/CSS/Universal_selectors">seletor universal</a> (<code>*</code>) está implícito quando nenhum seletor simples está escrito.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><article> + <div>Esta `div` é a primeira!</div> + <div>Esta <span>`span` aninhada é a primeira</span>!</div> + <div>Este <em>`em` aninhado é o primeiro</em>, mas este <em>`em` aninhado é o último</em>!</div> + <div>Este <span>`span` aninhado pegou o estilo</span>!</div> + <b>Este `b` qualifica!</b> + <div>Esta é a `div` final.</div> +</article> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">article :first-of-type { + background-color: pink; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Nested_elements', 500)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Os elementos correspondentes não são necessários para ter um pai.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref(":first-child")}}, {{Cssxref(":last-of-type")}}, {{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_focus-within/index.html b/files/pt-br/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..6b83efb630 --- /dev/null +++ b/files/pt-br/web/css/_colon_focus-within/index.html @@ -0,0 +1,88 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +translation_of: 'Web/CSS/:focus-within' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:focus-within</code></strong> representa um elemento que recebeu o foco ou contém um elemento que recebeu o foco. Em outras palavras, isto representa um elemento que é correspondido por si só pela pseudo-classe {{cssxref(":focus")}} ou tem um descendente que é correspondido por <code>:focus</code>. (Isto inclui descendentes em <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow trees</a>.)</p> + +<pre class="brush: css no-line-numbers">/* Seleciona uma <div> quando um de seus descendentes é focado */ +div:focus-within { + background: cyan; +}</pre> + +<p>Este seletor é útil, pegando um exemplo comum, para destacar um todo {{htmlElement("form")}} container quando o usuário focar em um de seus campos {{htmlElement("input")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Neste exemplo, o formulário receberá estilos de coloração especiais quando o input de texto recebe o foco</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Tente digitar neste formulário.</p> + +<form> + <label for="given_name">Given Name:</label> + <input id="given_name" type="text"> + <br> + <label for="family_name">Family Name:</label> + <input id="family_name" type="text"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">form { + border: 1px solid; + color: gray; + padding: 4px; +} + +form:focus-within { + background: #ff8; + color: black; +} + +input { + margin: 4px; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Exemplo", 500, 150)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + + + +<p>{{Compat("css.selectors.focus-within")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref(":focus")}}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_focus/index.html b/files/pt-br/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..733c8e214a --- /dev/null +++ b/files/pt-br/web/css/_colon_focus/index.html @@ -0,0 +1,124 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - Acessibilidade + - CSS + - Foco + - Focus + - Pseudo classe + - Pseudo classe CSS + - Referencia + - Web +translation_of: 'Web/CSS/:focus' +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumo">Resumo</h2> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <code>:focus</code> do CSS é aplicada quando um elemento recebe foco, o que pode ocorrer quando o usuário seleciona o elemento utilizando o teclado ou ativando o mesmo com o mouse (ex: um campo de um formulário).</p> + +<p>A pseudo classe é aplicada apenas ao elemento focado, e não aos seus elementos ascendentes, como ocorre com {{ Cssxref(":checked") }} e {{ Cssxref(":enabled") }} e diferentemente de {{ Cssxref(":active") }} ou {{ Cssxref(":hover") }}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><var>elemento</var>:focus { ... }</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css notranslate">.nome:focus { + color: red; +} + +.sobrenome:focus { + color: lime; +}</pre> + +<pre class="brush: html notranslate"><input class="nome" value="Esse elemento ficará vermelho quando focado"> +<input class="sobrenome" value="Esse elemento ficará verde-limão quando focado"></pre> + +<p>{{ EmbedLiveSample('Exemplos', '', '', '', 'Web/CSS/:focus') }}</p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Define a semântica no HTML.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Nenhuma modificação.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Nenhuma modificação.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>8.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/_colon_fullscreen/index.html b/files/pt-br/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..7d721684ab --- /dev/null +++ b/files/pt-br/web/css/_colon_fullscreen/index.html @@ -0,0 +1,87 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +translation_of: 'Web/CSS/:fullscreen' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">A pseudo-classe <strong><code>:fullscreen</code></strong> do CSS representa os elementos que estão atualmente no modo tela-cheia. Se vários elementos estiverem em tela-cheia, isto seleciona todos.</span></p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>The <code>:fullscreen</code> pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example, the color of a button is changed depending on whether or not the document is in full-screen mode. This is done without needing to specifically apply style changes using JavaScript.</p> + +<h3 id="HTML">HTML</h3> + +<p>The page's HTML looks like this:</p> + +<pre class="brush: html notranslate"><h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1> + +<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically + change the style of a button used to toggle full-screen mode on and off, + entirely using CSS.</p> + +<button id="fs-toggle">Toggle Fullscreen</button></pre> + +<p>The {{HTMLElement("button")}} with the ID <code>"fs-toggle"</code> will change between pale red and pale green depending on whether or not the document is in full-screen mode.</p> + +<h3 id="CSS">CSS</h3> + +<p>The magic happens in the CSS. There are two rules here. The first establishes the background color of the "Toggle Full-screen Mode" button when the element is not in a full-screen state. The key is the use of the <code>:not(:fullscreen)</code>, which looks for the element to not have the <code>:fullscreen</code> pseudo-class applied to it.</p> + +<pre class="brush: css notranslate">#fs-toggle:not(:fullscreen) { + background-color: #afa; +} +</pre> + +<p>When the document <em>is</em> in full-screen mode, the following CSS applies instead, setting the background color to a pale shade of red.</p> + +<pre class="brush: css notranslate">#fs-toggle:fullscreen { + background-color: #faa; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.fullscreen")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API </a></li> + <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li> + <li>{{cssxref(":not")}}</li> + <li>{{cssxref("::backdrop")}}</li> + <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }}</li> + <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}} attribute</li> +</ul> diff --git a/files/pt-br/web/css/_colon_hover/index.html b/files/pt-br/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..9e5dfb2b29 --- /dev/null +++ b/files/pt-br/web/css/_colon_hover/index.html @@ -0,0 +1,185 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +translation_of: 'Web/CSS/:hover' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumo">Resumo</h2> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code>:hover</code> 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<code> :hover </code>depois das regras <code>:link</code> e <code>:visited</code> mas antes da regra <code>:active</code>, como definido pela ordem <em>LVHA</em>: <code> :link — :visited — :hover — :active.</code></p> + +<p>A pseudo-class <code>:hover</code> pode ser aplicada a qualquer <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento.</a> {{experimental_inline}}.</p> + +<p>User agents visuais como Firefox, Internet Explorer, Safari, Opera ou Chrome, aplicam o estilo associado quando o cursor(mouse pointer) passa sobre um elemento.</p> + +<div class="note"><strong>Nota de uso: </strong>em telas de toque (touch screens) :hover é impossível ou problemático. Dependendo do navegador a pseudo-classe :hover pode nunca funcionar, ou funcionar apenas por um curto momento depois de “tocar” um elemento, ou podem continuar a funcionar mesmo depois que o usuário pare de “tocar” o elemento até que o usuário toque outro elemento. Como dispositivos touchscreen são comuns, é importante para desenvolvedores web não terem conteúdos acessíveis apenas quando passamos sobre ele, uma vez que esse conteúdo é mais complicado ou impossível de acessar para usuários desses dispositivos.</div> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css">:link:hover { outline: dotted red; } + +.foo:hover { background: gold; } +</pre> + +<h3 id="Menu_dropdown">Menu dropdown</h3> + +<p>Com a pseudo-classe<code> :hover </code>você pode criar algoritmos complexos de cascata. Esta é uma técnica comumente usada, por exemplo, para criar <strong>menus dropdown com CSS</strong> puro (apenas utilizando CSS, sem usar <a href="/pt-Br/JavaScript">JavaScript</a>). A essência desta técnica é criação de uma regra como a seguinte:</p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>para ser aplicada a uma estrutura HTML como a seguinte:</p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p>Veja nosso <a href="/@api/deki/files/6238/=css_dropdown_menu.html">exemplo de menu dropdown baseado em CSS</a> para entender melhor.</p> + +<h3 id="Galeria_com_imagens_full-size_e_previews">Galeria com imagens full-size e previews</h3> + +<p>Você pode usar a pseudo-classe <code>:hover</code> para construir uma galeria de imagem, exibindo imagens full-size apenas quando o mouse passa sobre as imagens. Veja <a href="/@api/deki/files/6247/=css-gallery.zip">esse exemplo</a> para uma possível dica.</p> + +<div class="note"><strong>Note: </strong>Para efeitos análogos, mas baseado na pseudo-classe <code><a href="/en/CSS/%3Achecked">:checked</a></code> (aplicada para esconder radioboxes), veja <a href="/@api/deki/files/6268/=css-checked-gallery.zip">esse demo</a>, tirado desta página <a href="/en/CSS/%3Achecked">En/CSS/:checked.</a></div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Pode ser aplicado a qualquer pseudo-elemento.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Sem mudança significativa.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>para elementos <code><a></code></td> + <td>0.2</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>4.0</td> + <td>4.0</td> + <td>2.0.4 (419)<br> + <span style="font-size: small;">various bugs before</span></td> + </tr> + <tr> + <td>para qualquer elemento</td> + <td>0.2</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>7.0</td> + <td>7.0</td> + <td>2.0.4 (419)<br> + <span style="font-size: small;">various bugs before</span></td> + </tr> + <tr> + <td>para pseudo-elementos</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop(28) }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Nos IE8-11, passar sobre um elemento e depois rolar a tela para cima/baixo sem mover o cursor deixará o elemento no estado <code>:hover</code> até que o cursor seja movido. Veja <a href="https://connect.microsoft.com/IE/feedbackdetail/view/926665">IE bug 926665</a>.</p> + +<p>No IE9 (e possivelmente versões mais antigas), se uma {{HTMLElement("table")}} tem um pai com uma {{cssxref("width")}} não<code>-auto</code> e {{cssxref("overflow-x")}}<code>: auto</code>;, e a {{HTMLElement("table")}} tiver conteúdo suficiente para transbordar horizontalmente seu pai e existirem estilos {{cssxref(":hover")}} definidos dentro de elementos da tabela, então passar o mouse sobre esses elementos fará com que a altura da {{HTMLElement("table")}} aumente.<a href="http://jsbin.com/diwiqe"> Aqui está um exemplo do bug ao vivo</a>. Uma solução alternativa para o bug é definir <code>min-heigth: 0%;</code> nos elemento pai da tabela (e a unidade em<code> % </code>deve ser especificada, <code>0</code> e <code>0px</code> não funcionam). Para mais detalhes, veja <a href="http://bugs.jquery.com/ticket/10854">jQuery ticket #10854</a>.</p> + +<p>A partir do Safari Mobile para o iOS 7.1.2, “bater levemente” em um <a href="/en-US/docs/Web/Events/click#Safari_Mobile">elemento clicável</a> faz com que o elemento entre no estado <code>:hover</code>, e o elemento permanecerá nesse estado até que um elemento diferente entre no estado <code>:hover</code>.</p> + +<p>Veja também:</p> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li> +</ul> diff --git a/files/pt-br/web/css/_colon_invalid/index.html b/files/pt-br/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..c14654b595 --- /dev/null +++ b/files/pt-br/web/css/_colon_invalid/index.html @@ -0,0 +1,139 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Formulário + - Pseudo-class + - Validações +translation_of: 'Web/CSS/:invalid' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:invalid</code></strong> representa qualquer elemento {{HTMLElement("input")}} ou {{HTMLElement("form")}} cujo conteúdo não esteja <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">válido</a>.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona todos os inputs inválidos */ +input:invalid { + background-color: pink; +}</pre> + +<p>Essa pseudo-classe é útil para usuário identificar quais campos foram preenchidos incorretamente.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Esse exemplo apresenta um simples formulário onde a cor verde realça um input válido e a cor vermelha realça um input inválido.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <label for="url_input">Adicione uma URL:</label> + <input type="url" id="url_input" /> + <br /> + <br /> + <label for="email_input">Adicione um endereço de email:</label> + <input type="email" id="email_input" required/> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input:invalid { + background-color: #ffdddd; +} + +form:invalid { + border: 5px solid #ffdddd; +} + +input:valid { + background-color: #ddffdd; +} + +form:valid { + border: 5px solid #ddffdd; +} + +input:required { + border-color: #800000; + border-width: 3px; +} + +input:required:invalid { + border-color: #C00000; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Exemplo', 600, 120)}}</p> + +<h2 id="Notas">Notas</h2> + +<h3 id="Radio_buttons">Radio buttons</h3> + +<p>Se algum radio button de um grupo possuir o atributo <code>required</code>, a pseudo-classe <code>:invalid</code> é aplicada a todos se nenhum deles for selecionado. (Radio buttons agrupados compartilham o mesmo valor pelo atributo <code>name</code>.)</p> + +<h3 id="Gecko_defaults">Gecko defaults</h3> + +<p>Por padrão, Gecko não aplica o estilo para a pseudo-classe <code>:invalid</code>. Entretanto, pode-se aplicar um estilo (um "brilho" vermelho usando a propriedade {{Cssxref("box-shadow")}}) à pseudo-classe {{cssxref(":-moz-ui-invalid")}}, que são um conjunto que se aplicam como o <code>:invalid</code>.</p> + +<p>Você pode desabilitar o "brilho" usando o CSS a seguir, ou substituir completamente para alterar a aparência dos campos inválidos: </p> + +<pre class="brush: css">:invalid { + box-shadow: none; +} + +:-moz-submit-invalid { + box-shadow: none; +} + +:-moz-ui-invalid { + box-shadow: none; +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma alteração.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Define a semântica do HTML e validação de restrições.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_Browsers">Compatibilidade entre Browsers</h2> + +<div> + + +<p>{{Compat("css.selectors.invalid")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outras pseudo-classes relacionadas com validações: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li> + <li>Mozilla pseudo-classes relacionadas: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> +</ul> diff --git a/files/pt-br/web/css/_colon_last-child/index.html b/files/pt-br/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..486e3ffb54 --- /dev/null +++ b/files/pt-br/web/css/_colon_last-child/index.html @@ -0,0 +1,121 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - CSS Pseudo-classe + - Layout + - Reference + - Referencia + - Web +translation_of: 'Web/CSS/:last-child' +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>A CSS <a href="/en-US/docs/CSS/Pseudo-classes">pseudo-classe</a> <code>:last-child</code> representa qualquer elemento que é o último filho de seu elemento pai.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">elemento:last-child { <em>propriedades de estilo</em> }</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> + +<pre class="brush: html"><ul> + <li>Esse item não é afetado pelo estilo.</li> + <li>Esse também não.</li> + <li>Esse item é! :)</li> +</ul></pre> + +<h3 id="Conteúdo_CSS">Conteúdo CSS</h3> + +<pre class="brush: css">li:last-child { + background-color: lime; +}</pre> + +<p>{{EmbedLiveSample('Example', '100%', 100)}}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#last-child', ':last-child') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sem mudança.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#last-child', ':last-child') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.1</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{cssxref(":first-child")}}</li> + <li>{{cssxref(":nth-child")}}</li> + <li>{{cssxref(":last-of-type")}}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_last-of-type/index.html b/files/pt-br/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..63c35d2978 --- /dev/null +++ b/files/pt-br/web/css/_colon_last-of-type/index.html @@ -0,0 +1,126 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +translation_of: 'Web/CSS/:last-of-type' +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <code>:last-of-type</code> representa o último irmão com o nome de elemento dado na lista de filhos de seu elemento pai.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element:last-of-type { <em>style properties</em> } +</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Para selecionar o último elemento <em>em</em> dentro de um elemento {{HTMLElement("p")}}, você pode usar o seguinte:</p> + +<pre class="brush: css">p em:last-of-type { + color: lime; +} +</pre> + +<pre class="brush: html"><p> + <em>I'm not lime :(</em> + <strong>I'm not lime :(</strong> + <em>I'm lime :D</em> + <strong>I'm also not lime :(</strong> +</p> + +<p> + <em>I'm not lime :(</em> + <span><em>I am lime!</em></span> + <strong>I'm not lime :(</strong> + <em>I'm lime :D</em> + <span><em>I am also lime!</em> <strike> I'm not lime </strike></span> + <strong>I'm also not lime :(</strong> +</p></pre> + +<p id="...will_result_in.3A">...irá resultar em:</p> + +<div>{{EmbedLiveSample('Example','100%', '120')}}</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Cssxref(":nth-last-of-type")}}</li> + <li>{{Cssxref(":first-of-type")}}</li> + <li>{{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_link/index.html b/files/pt-br/web/css/_colon_link/index.html new file mode 100644 index 0000000000..19f883e908 --- /dev/null +++ b/files/pt-br/web/css/_colon_link/index.html @@ -0,0 +1,105 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +translation_of: 'Web/CSS/:link' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumo">Resumo</h2> + +<p>A <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> CSS :link permite que você selecione os links dentro de um elemento. Ela seleciona todos os links, até mesmo os que não foram visitados, incluindo os links ja estilizados em outras classes ou ids com o {{ cssxref(":hover") }}, {{ cssxref(":active") }} ou {{ cssxref(":visited") }}. Para um funcionamento adequado é essencial que ela venha antes das regras: <code>:visited</code> — <code>:hover</code> — <code>:active</code>. O {{ cssxref(":focus") }} é uma pseudo-class geralmente usada antes de a:hover ou depois, dependendo do resultado esperado.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css">a:link {color: slategray;} +.external:link {background-color: lightblue;}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Nenhuma mudança.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Nenhuma mudança.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Uso estrito ao elemento {{ HTMLElement("a") }} .</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definição Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Basico</td> + <td>1.5</td> + <td>{{ CompatGeckoMobile("1.9.2") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também:</h2> + +<ul> + <li>{{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_not/index.html b/files/pt-br/web/css/_colon_not/index.html new file mode 100644 index 0000000000..1cd6b3061e --- /dev/null +++ b/files/pt-br/web/css/_colon_not/index.html @@ -0,0 +1,75 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Composição + - Layout + - Pseudo-classe CSS + - Referencia + - Web +translation_of: 'Web/CSS/:not' +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>A <a href="/pt-BR/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe CSS</a> de <strong>negação</strong>, <code>:not(X)</code>, é uma notação funcional que recebe um seletor simples X como argumento. Ela seleciona um elemento que não é representado por seu argumento. <var>X</var> não pode conter outro seletor de negação.</p> + +<div class="note"><strong>Observações:</strong> + +<ul> + <li>Seletores inúteis podem ser escritos usando esta pseudo-classe. Por exemplo, <code>:not(*)</code> seleciona qualquer elemento que não é algum elemento, então a regra nunca é aplicada.</li> + <li>É possível sobreescrever outras regras. E.g. <code>foo:not(bar)</code> vai selecionar os mesmos elementos do que o mais simples foo. No entanto a <a href="/pt-BR/docs/Web/CSS/Specificity" title="Especificação">especificação</a> é maior no exemplo com <code>:not</code>.</li> + <li><code>:not(foo){} vai selecionar tudo que não for foo</code>, <strong>incluindo os elementos {{HTMLElement("html")}} e {{HTMLElement("body")}}.</strong></li> + <li>Este seletor apenas se aplica a um elemento; não se pode usa-lo para excluir todos os seus ancestores. Por exemplo, <code>body :not(table) a</code> ainda vai ser aplicado a links dentro de tabelas, já que {{HTMLElement("tr")}} vai ser selecionado pelo <code>:not()</code> do seletor.</li> +</ul> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate">:not(selector) { <em>style properties</em> }</pre> + +<h2 id="Exemplos" name="Exemplos">Exemplos</h2> + +<pre class="brush: css notranslate">p:not(.classico) { color: red; } +body *:not(p) { color: green; }</pre> + +<p>Dado o CSS acima e o HTML abaixo...</p> + +<pre class="brush: html notranslate"><p>Um pouco de texto.</p> +<p class="classico">Um pouco mais de texto.</p> +<span>Mais um texto<span> +</pre> + +<p>Se obtém resultados como este:</p> + +<p>{{ EmbedLiveSample('Exemplos', '', '', '', 'Web/CSS/:not') }}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Extende seus argumentos para permitir seletores não-simples.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade em Navegadores</h2> + +<p>{{Compat("css.selectors.not")}}</p> diff --git a/files/pt-br/web/css/_colon_nth-child/index.html b/files/pt-br/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..07c929d4c8 --- /dev/null +++ b/files/pt-br/web/css/_colon_nth-child/index.html @@ -0,0 +1,192 @@ +--- +title: ':nth-child()' +slug: 'Web/CSS/:nth-child' +tags: + - Pseudo-classe + - Referencia +translation_of: 'Web/CSS/:nth-child' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <code>:nth-child()</code> seleciona elementos com base em suas posições em um grupo de elementos irmãos.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona um a cada quatro elementos + de qualquer grupo de elementos irmãos, + começando do quarto elemento (4, 8 12, etc.). */ +:nth-child(4n) { + color: lime; +} +</pre> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<p>A pseudo-classe <strong><code>nth-child</code></strong> é usada com apenas um argumento, que representa o padrão usado para selecionar os elementos.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>Representa elementos cuja posição numérica em uma série de irmãos seja ímpar: 1, 3, 5, etc.</dd> + <dt><code>even</code></dt> + <dd>Representa elementos cuja posição numérica em uma série de irmãos seja par: 2, 4, 6, etc.</dd> +</dl> + +<h3 id="Notação_funcional">Notação funcional</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>Representa elementos cuja posição numérica em uma série de irmãos corresponda ao padrão <code>An+B</code>, o qual será aplicado a todo número maior ou igual a zero (ou seja, começando do zero). O índice do primeiro elemento é <code>1</code>. Ambos os valores <code>A</code> e <code>B</code> devem ser {{cssxref("<integer>")}} (inteiros).</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_selectors" name="Example_selectors">Exemplos de seletores</h3> + +<dl> + <dt><code>tr:nth-child(odd)</code> or <code>tr:nth-child(2n+1)</code></dt> + <dd>Representa as linhas ímpares de uma tabela HTML: 1, 3, 5, etc.</dd> + <dt><code>tr:nth-child(even)</code> or <code>tr:nth-child(2n)</code></dt> + <dd>Representa as linhas pares de uma tabela HTML: 2, 4, 6, etc.</dd> + <dt><code>:nth-child(7)</code></dt> + <dd>Representa o sétimo elemento.</dd> + <dt><code>:nth-child(5n)</code></dt> + <dd>Representa os elementos de número <strong>5</strong> [=5×1], <strong>10</strong> [=5×2], <strong>15</strong> [=5×3], <strong>etc.</strong></dd> + <dt><code>:nth-child(3n+4)</code></dt> + <dd>Representa os elementos de número <strong>4</strong> [=(3×0)+4], <strong>7</strong> [=(3×1)+4], <strong>10</strong> [=(3×2)+4], <strong>13</strong> [=(3×3)+4], <strong>etc.</strong></dd> + <dt><code>:nth-child(-n+3)</code></dt> + <dd>Representa os primeiros três elementos. [=-0+3, -1+3, -2+3]</dd> + <dt><code>p:nth-child(n)</code></dt> + <dd>Representa todos os elementos <code><p></code> em um grupo de irmãos. Isso seleciona os mesmos elementos que um simples seletor <code>p</code> faria (só que com um nível maior de especificidade).</dd> + <dt><code>p:nth-child(1)</code> or <code>p:nth-child(0n+1)</code></dt> + <dd>Representa todo <code><p></code> que seja o primeiro de seu grupo de irmãos. Ele é idêntico ao seletor {{cssxref(":first-child")}} (e tem o mesmo nível de especificidade).</dd> +</dl> + +<dl> + <dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt> + <dd>Representa do 8º até o 15º elementos <code><p></code> de um grupo de irmãos.</dd> +</dl> + +<h3 id="Exemplo_detalhado">Exemplo detalhado</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"> <h3><code>span:nth-child(2n+1)</code>, SEM um +<code>&lt;em&gt;</code> entre os elementos filhos.</h3> +<p>Os filhos 1, 3, 5 e 7 são selecionados.</p> +<div class="primeiro"> + <span>Span 1!</span> + <span>Span 2</span> + <span>Span 3!</span> + <span>Span 4</span> + <span>Span 5!</span> + <span>Span 6</span> + <span>Span 7!</span> +</div> + +<br> + +<h3><code>span:nth-child(2n+1)</code>, COM um + <code>&lt;em&gt;</code> entre os elementos filhos.</h3> +<p>Os filhos 1, 5 e 7 são selecionados.<br> + O 3 está incluído na contagem por ser um filho, mas não é + selecionado porque ele não é um <code>&lt;span&gt;</code>.</p> +<div class="segundo"> + <span>Span!</span> + <span>Span</span> + <em>Este é um `em`.</em> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> +</div> + +<br> + +<h3><code>span:nth-of-type(2n+1)</code>, COM um + <code>&lt;em&gt;</code> entre os elementos filhos.</h3> +<p>Os filhos 1, 4, 6 e 8 são selecionados.<br> + O 3 não está incluso na contagem nem é selecionado porque ele é um <code>&lt;em&gt;</code>, + não um <code>&lt;span&gt;</code>, e <code>nth-of-type</code> seleciona apenas os + filhos desse último tipo. O <code>&lt;em&gt;</code> é completamente + pulado e ignorado.</p> +<div class="terceiro"> + <span>Span!</span> + <span>Span</span> + <em>Este é um `em`.</em> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +span, +div em { + padding: 5px; + border: 1px solid green; + display: inline-block; + margin-bottom: 3px; +} + +.primeiro span:nth-child(2n+1), +.segundo span:nth-child(2n+1), +.terceiro span:nth-of-type(2n+1) { + background-color: lime; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{ EmbedLiveSample('Exemplo_detalhado', '', 550, '', 'Web/CSS/:nth-child') }}</p> + +<p> </p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Adiciona a sintaxe <code>of <selector></code> e especifica que os elementos correspondentes ao seletor não precisam ter um elemento pai.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div> +<div class="hidden">A tabela de compatibilidade nesta página foi gerada a partir de dados estruturados. Se você quiser contribuir para esses dados, vá para <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma pull request.</div> + +<p>{{Compat("css.selectors.nth-child")}}</p> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_nth-last-child/index.html b/files/pt-br/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..7e2a3148ff --- /dev/null +++ b/files/pt-br/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,218 @@ +--- +title: ':nth-last-child()' +slug: 'Web/CSS/:nth-last-child' +tags: + - Pseudo-classe + - Referencia +translation_of: 'Web/CSS/:nth-last-child' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:nth-last-child()</code></strong> seleciona um ou mais elementos com base em sua posição entre um grupo de elementos-irmãos, contando a partir do último.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona todo quarto elemento + em qualquer grupo de irmãos, + contando do último para o primeiro */ +:nth-last-child(4n) { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> Essa pseudo-classe é essencialmente o mesmo que usar {{Cssxref(":nth-child")}}, porém conta os itens de trás para a frente, e não do início para o final.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A pseudo-classe <code>nth-last-child</code> é especificada com um único argumento, que representa o padrão para elementos correspondentes, contando do final.</p> + +<h3 id="Valores_chave">Valores chave</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>Representa elementos cuja posição numérica em uma série de irmãos é ímpar: 1, 3, 5, etc., contando do final. </dd> + <dt><code>even</code></dt> + <dd>Representa elementos cuja posição numérica em uma série de irmãos é par: 2, 4, 6, etc., contando do final.</dd> +</dl> + +<h3 id="Notação_funcional">Notação funcional</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>Representa elementos cuja posição numérica em uma série de irmãos corresponde ao padrão <code>An+B</code>, para cada valor de <code>n</code> que seja um número inteiro positivo ou zero. O índice do primeiro elemento, contando do final, é <code>1</code>. Os valores <code>A</code> e <code>B</code> devem ambos ser {{cssxref("<integer>")}}s (inteiros).</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Example_selectors" name="Example_selectors">Seletores de exemplo</h3> + +<dl> + <dt><code>tr:nth-last-child(odd)</code> ou <code>tr:nth-last-child(2n+1)</code></dt> + <dd>Representa as linhas ímpares de uma tabela HTML: 1, 3, 5, etc., contando do final.</dd> + <dt><code>tr:nth-last-child(even)</code> ou <code>tr:nth-last-child(2n)</code></dt> + <dd>Representa as linhas pares de uma tabela HTML: 2, 4, 6, etc., contando do final.</dd> + <dt><code>:nth-last-child(7)</code></dt> + <dd>Representa o sétimo elemento, contando do final.</dd> + <dt><code>:nth-last-child(5n)</code></dt> + <dd>Representa elementos 5, 10, 15, etc., contando do final.</dd> + <dt><code>:nth-last-child(3n+4)</code></dt> + <dd>Representa elementos 4, 7, 10, 13, etc., contando do final.</dd> + <dt><code>:nth-last-child(-n+3)</code></dt> + <dd>Representa os últimos três elementos em um grupo de irmãos.</dd> + <dt><code>p:nth-last-child(n)</code></dt> + <dd>Representa cada elemento <code><p></code> em um grupo de irmãos. Isso é o mesmo que um simples seletor <code>p</code>.</dd> + <dt><code>p:nth-last-child(1)</code> ou <code>p:nth-last-child(0n+1)</code></dt> + <dd>Representa cada <code><p></code> que seja o primeiro elemento em um grupo de irmãos, contando do final. Isso é o mesmo que o seletor {{cssxref(":last-child")}}.</dd> +</dl> + +<h3 id="Exemplo_de_tabela">Exemplo de tabela</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <td>Primeira linha</td> + </tr> + <tr> + <td>Segunda linha</td> + </tr> + <tr> + <td>Terceira linha</td> + </tr> + <tr> + <td>Quarta linha</td> + </tr> + <tr> + <td>Quinta linha</td> + </tr> + </tbody> +</table> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">table { + border: 1px solid blue; +} + +/* Seleciona os últimos três elementos */ +tr:nth-last-child(-n+3) { + background-color: pink; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Table_example', 300, 150)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Elementos correspondentes não precisam ter um elemento-pai.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatOpera(9.5)}}</td> + <td>3.2</td> + </tr> + <tr> + <td>Não precisa de pai</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("51")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatOperaMobile(10)}}</td> + <td>3.2</td> + </tr> + <tr> + <td>Não precisa de pai</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("51")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<p>[1] Ver {{bug(1300374)}}.</p> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_nth-of-type/index.html b/files/pt-br/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..6471f5f33a --- /dev/null +++ b/files/pt-br/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,146 @@ +--- +title: ':nth-of-type()' +slug: 'Web/CSS/:nth-of-type' +translation_of: 'Web/CSS/:nth-of-type' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:nth-of-type()</code> </strong>corresponde a um ou mais elementos de um dado tipo, baseado em sua posição entre um grupo de irmãos.</p> + +<pre class="brush: css no-line-numbers language-css">/* Seleciona cada quarto elemento <p> + entre qualquer grupo de irmãos */ +p:nth-of-type(4n) { + color: lime; +}</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A pseudo-classe <code>nth-of-type</code> é especificada com um único argumento, o qual representa o padrão para a correspondência dos elementos. </p> + +<p>Veja {{Cssxref(":nth-child")}} para uma explicação mais detalhada de sua sintaxe.</p> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <div>Este elemento não é contado.</div> + <p>1º parágrafo.</p> + <p>2º parágrafo.</p> + <div>Este elemento não é contado.</div> + <p>3º parágrafo.</p> + <p>4º parágrafo.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Parágrafos ímpares */ +p:nth-of-type(2n+1) { + color: red; +} + +/* Parágrafos pares */ +p:nth-of-type(2n) { + color: blue; +} + +/* Primeiro parágrafo */ +p:nth-of-type(1) { + font-weight: bold; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Basic_example', 250, 200)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Sitação</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Não é necessário que os elementos correspondentes tenham um pai.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_only-child/index.html b/files/pt-br/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..827a539455 --- /dev/null +++ b/files/pt-br/web/css/_colon_only-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - Pseudo-classe + - Referencia +translation_of: 'Web/CSS/:only-child' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo classes">pseudo-classe</a> de CSS <strong><code>:only-child</code></strong> representa um elemento sem nenhum elemento-irmão. É o mesmo que <code>:first-child:last-child</code> ou <code>:nth-child(1):nth-last-child(1)</code>, mas com uma especificidade mais baixa.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona cada <p>, mas apenas se for o */ +/* único filho de seu elemento-pai */ +p:only-child { + background-color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Originalmente, foi definido que o elemento selecionado deveria ter um elemento-pai. A partir de Selectors Level 4, isso não é mais necessário.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><main> + <div> + <i>Eu sou um filho único solitário.</i> + </div> + + <div> + <i>Eu tenho irmãos.</i><br> + <b>Eu também!</b><br> + <span>Eu também tenho irmãos, <span>mas este é um filho único.</span></span> + </div> +</main></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">main :only-child { + color: red; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Basic_example','100%',180)}}</p> + +<h3 id="Exemplo_de_lista">Exemplo de lista</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ol> + <li>Primeiro + <ul> + <li>Essa lista tem apenas um elemento. + </ul> + </li> + <li>Segundo + <ul> + <li>Essa lista tem três elementos. + <li>Essa lista tem três elementos. + <li>Essa lista tem três elementos. + </ul> + </li> +<ol> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">li li { + list-style-type: disc; +} +li:only-child { + color: red; + list-style-type: square; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('A_list_example', '100%', 210)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Não é necessário que os elementos selecionados tenham um elemento-pai.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.8)}}</td> + <td>9</td> + <td>{{CompatOpera(9.5)}}</td> + <td>3.1</td> + </tr> + <tr> + <td>Elemento-pai não é necessário</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.8)}}</td> + <td>9</td> + <td>{{CompatOperaMobile(10)}}</td> + <td>3.1</td> + </tr> + <tr> + <td>Elemento-pai não é necessário</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{Cssxref(":only-of-type")}}</li> + <li>{{Cssxref(":first-child")}}</li> + <li>{{Cssxref(":last-child")}}</li> + <li>{{Cssxref(":nth-child")}}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_only-of-type/index.html b/files/pt-br/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..5a8b751f14 --- /dev/null +++ b/files/pt-br/web/css/_colon_only-of-type/index.html @@ -0,0 +1,95 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +translation_of: 'Web/CSS/:only-of-type' +--- +<div>{{CSSRef}}</div> + +<h2 id="Descrição">Descrição</h2> + +<p>A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> CSS <code>:only-of-type</code> representa qualquer elemento que não possui irmãos de um determinado tipo.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">:only-of-type { propriedades} +</pre> + +<h2 id="Especifcações">Especifcações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sem mudanças.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":first-of-type")}}, {{Cssxref(":last-of-type")}}</li> +</ul> diff --git a/files/pt-br/web/css/_colon_optional/index.html b/files/pt-br/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..71f0b12968 --- /dev/null +++ b/files/pt-br/web/css/_colon_optional/index.html @@ -0,0 +1,85 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +translation_of: 'Web/CSS/:optional' +--- +<div>{{ CSSRef }}</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:optional</code></strong> representa qualquer elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} que não contenha o atributo {{ htmlattrxref("required", "input") }}.</p> + +<pre class="brush: css no-line-numbers">/* Selects qualquer <input> opcional */ +input:optional { + border: 1px dashed black; +}</pre> + +<p>Esta pseudo-classe é utilizada para estilizar campos do formulário que não são requeridos para sumissão.</p> + +<div class="note"> +<p><strong>Nota:</strong> A pseudo-classe {{cssxref(":required")}} seleciona campos do fumulário <em>requeridos</em>.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja {{cssxref(":invalid")}} como exemplo.</p> + +<h2 id="Referências_de_acessibilidade">Referências de acessibilidade</h2> + +<p>Se um <a href="/en-US/docs/Web/HTML/Element/form">formulário</a> contém {{htmlelement("input")}} opcionais, inputs requeridos devem ser indicados utilizando o atriuto {{ htmlattrxref("required", "input") }}. Isto garantirá que usuários que navegam com tecnologia de acessibilidade, como um leitor de tela, possam entender quais entradas devem ter o conteúdo validado para submeter o formulário com êxito.</p> + +<p>Entradas requeridas devem ser indicadas visualmente, utilizando um tratamento que não seja apenas a cor para passar o significado. Usualmente, textos descritivos e/ou um ícone são utilizados.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN Understanding WCAG, Guideline 3.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html">Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sem mudança.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define a semântica da validação e da restrição do HTML.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sem mudança.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Define a pseudo-classe, mas não a semântica associada.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("css.selectors.optional")}}</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>Outra pseudo-classes de validação relacionadas: {{ cssxref(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validação de dados de formulário</a></li> +</ul> diff --git a/files/pt-br/web/css/_colon_out-of-range/index.html b/files/pt-br/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..56ab889b6e --- /dev/null +++ b/files/pt-br/web/css/_colon_out-of-range/index.html @@ -0,0 +1,111 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +translation_of: 'Web/CSS/:out-of-range' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo classe</a> de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:out-of-range</code></strong> representa um elemento de {{htmlelement("entrada")}} cujo valor atual esta fora dos limites especificados pelo {{htmlattrxref("min", "entrada")}} e {{htmlattrxref("max","entrada")}} atributos</p> + +<pre class="brush: css no-line-numbers">/* Selecione qualquer <entrada>, mas somente quando estiver dentros dos + limites especificados, e quando este valor estiver fora deste limite */ +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); +}</pre> + +<p>Essa pseudo classe é muito útil por dar ao usuario uma indicacão visual de que o valor atual esta fora dos limites permitidos</p> + +<div class="note"><strong>Nota:</strong> Esta pseudo classe se aplica somente a elementos que tem (ou podem ter) uma limitacao. Na falta dessa de algo como essa limitacao, o elemento nao tera como ficar "in-range"(dentro dos limites) ou "out-of-range" (fora dos limites).</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="" id="form1"> + <p>Valores entre 1 e 10 são validos.</p> + <ul> + <li> + <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> + <label for="value1">Seu valor está </label> + </li> + </ul> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">li { + list-style: none; + margin-bottom: 1em; +} + +input { + border: 1px solid black; +} + +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} + +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} + +input:in-range + label::after { + content: 'dentro dos limites.'; +} + +input:out-of-range + label::after { + content: 'Fora dos limites!'; +}</pre> + +<h3 id="Resultado">Resultado</h3> +</div> + +<div>{{EmbedLiveSample('Example', 600, 140)}}</div> + +<h2 id="Specifications"><span>Specifications</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Define quando <code>:out-of-range</code> se iguala aos elementos em HTML.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definicao inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div> + + +<p>{{Compat("css.selectors.out-of-range")}}</p> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref(":in-range")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> +</ul> diff --git a/files/pt-br/web/css/_colon_read-write/index.html b/files/pt-br/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..8757d4adfc --- /dev/null +++ b/files/pt-br/web/css/_colon_read-write/index.html @@ -0,0 +1,113 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +translation_of: 'Web/CSS/:read-write' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:read-write</code></strong> representa um elemento (como o <code>input</code> ou <code>textarea</code>) que é editável pelo usuário.</p> + +<pre class="brush: css no-line-numbers notranslate">input:read-write, textarea:read-write { + background-color: #bbf; +} + +p:read-write { + background-color: #bbf; +} +</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Examplos</h2> + +<h3 id="Confirmando_informações_do_formulário_em_controles_read-onlyread-write.">Confirmando informações do formulário em controles read-only/read-write.</h3> + +<p>Ao utilizar os controles de formulário <code>readonly</code> permite que o usuário verifique e verifique as informações que eles podem ter inserido em um formulário anterior (por exemplo: Detalhes de envio), enquanto ainda pode enviar as informações junto com o resto do formulário. Nós fazemos exatamente isso no exemplo abaixo.</p> + +<p>A pseudo-classe <code>:read-only</code> <em>(:somente-leitura)</em> é 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 <em>somente-leitura</em>. A pseudo-classe <code>:read-write</code> <em>(:leitura-escrita) </em>por outro lado, é usado para fornecer um estilo mais agradável para a <code><textarea></code>.</p> + +<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only, +input:read-only, textarea:read-only { + border: 0; + box-shadow: none; + background-color: white; +} + +textarea:-moz-read-write, +textarea:read-write { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; +}</pre> + +<p>Você pode encontrar o código fonte completo em <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> (disponível em inglês); isso torna assim:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p> + +<h3 id="Estilizar_controle_não_formal_de_read-write.">Estilizar controle não formal de read-write.</h3> + +<p>Este seletor não seleciona apenas {{htmlElement("input")}}/{{htmlElement("textarea")}} elementos - ele selecionará qualquer elemento que possa ser editado pelo usuário, como um {{htmlelement("p")}} elemento com {{htmlattrxref("contenteditable")}} definido sobre ele.</p> + +<pre class="brush: html notranslate"><p contenteditable>Este parágrafo é editável; é read-write.</p> + +<p>Este parágrafo não é editável; é read-only.</p></pre> + +<pre class="brush: css notranslate">p { + font-size: 150%; + padding: 5px; + border-radius: 5px; +} + +p:read-only { + background-color: red; + color: white; +} + +p:read-write { + background-color: lime; +}</pre> + +<p>{{EmbedLiveSample('Estilizar_controle_não_formal_de_read-write.', '100%', 400)}}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Nenhuma mudança.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define a semântica em relação à validação de HTML e restrição.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Define a pseudo-classe, mas não a semântica associada.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, por favor, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("css.selectors.read-write")}}</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{cssxref(":read-only")}}</li> + <li>Atributo HTML {{htmlattrxref("contenteditable")}}.</li> +</ul> diff --git a/files/pt-br/web/css/_colon_required/index.html b/files/pt-br/web/css/_colon_required/index.html new file mode 100644 index 0000000000..edfed65e81 --- /dev/null +++ b/files/pt-br/web/css/_colon_required/index.html @@ -0,0 +1,85 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +translation_of: 'Web/CSS/:required' +--- +<div>{{ CSSRef }}</div> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:required</code></strong> representa qualquer {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} contendo o atributo {{ htmlattrxref("required", "input") }}.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona qualquer <input> requerido */ +input:required { + border: 1px dashed red; +}</pre> + +<p>Esta pseudo-classe é utilizada para destacar campos que devem ter dados válidos antes do formulário ser submetido.</p> + +<div class="note"> +<p><strong>Nota:</strong> A pseudo-classe {{cssxref(":optional")}} seleciona campos do formulário que são <em>opcionais</em>.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja {{cssxref(":invalid")}} como exemplo.</p> + +<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2> + +<p>Elementos {{htmlelement("input")}} obrigatórios devem ter o atributo {{ htmlattrxref("required", "input") }} atribuídos. Isso garante que pessoas que navegam com auxílio de recursos de acessibilidade, como o leitor de tela, possam entender quais campos precisam ter conteúdos válidos para garantir a submissão dos dados .</p> + +<p>Se o formulário também possui campos <a href="/en-US/docs/Web/CSS/:optional">opcionais</a>, entradas requeridas devem ser indicadas visualmente usando um tratamento que não seja apenas a cor para passar o significado. Usualmente, textos descritivos e/ou um ícone são utilizados.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN Understanding WCAG, Guideline 3.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html" rel="noopener">Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sem mudança.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define a semântica de validação e de restrição HTML.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sem mudança.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Define a pseudo-classe, mas não a semântica associada.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("css.selectors.required")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outras pseudo-classe relacionadas a validação: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validação de dados de formulário</a></li> +</ul> diff --git a/files/pt-br/web/css/_colon_root/index.html b/files/pt-br/web/css/_colon_root/index.html new file mode 100644 index 0000000000..066e54a1f9 --- /dev/null +++ b/files/pt-br/web/css/_colon_root/index.html @@ -0,0 +1,98 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +translation_of: 'Web/CSS/:root' +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:root</code></strong> se equipara à raíz de uma árvore, que por sua vez representa o documento. Aplicado ao HTML, <code>:root</code> representa o elemento {{HTMLElement("html")}} e é identico ao seletor html, exceto que sua <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity">especificidade</a> é mais alta.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Usar <code>:root</code> pode ser útil para declarar uma <a href="/en-US/docs/Web/CSS/Using_CSS_variables">variável CSS</a> global:</p> + +<pre class="brush: css notranslate">:root { + --main-color: hotpink; + --pane-padding: 5px 42px; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sem mudança</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>9</td> + <td>9.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/_colon_target/index.html b/files/pt-br/web/css/_colon_target/index.html new file mode 100644 index 0000000000..d96be5ed63 --- /dev/null +++ b/files/pt-br/web/css/_colon_target/index.html @@ -0,0 +1,208 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +translation_of: 'Web/CSS/:target' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:target</code></strong> representa um único elemento (o elemento alvo) com uma {{htmlattrxref("id")}} correspondente ao fragmento da URL.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Seleciona um elemento com a ID correspondente ao fragmento da URL */ +:target { + border: 2px solid black; +}</pre> + +<p>Por exemplo, a seguinte URL tem um fragmento (denotado pelo sinal de <em>#</em>) que aponta para o elemento chamado <code>section2</code>:</p> + +<pre class="notranslate">http://www.example.com/index.html#section2</pre> + +<p>O seguinte elemento será selecionado pelo seletor <code>:target</code> quando a URL for igual acima:</p> + +<pre class="brush: html notranslate"><section id="section2">Exemplo</section></pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Índice">Índice</h3> + +<p>A pseudo-classe <code>:target</code> pode ser usada para destacar uma parte da página que foi vinculada a partir de um índice.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><h3>Índice</h3> +<ol> + <li><a href="#p1">Ir para o primeiro parágrafo!</a></li> + <li><a href="#p2">Ir para o segundo parágrafo!</a></li> + <li><a href="#vazio">Esse link não vai pra lugar nenhum, + pois, o alvo não existe</a></li> +</ol> + +<h3>Meu artigo divertido</h3> +<p id="p1">Você pode definir <i>este parágrafo</i> como alvo + usando um fragmento de URL. Clique no link acima para experimentar!</p> +<p id="p2">Esse é <i>outro parágrafo</i>, também acessável + pelos links acima. Não é incrível?</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">p:target { + background-color: gold; +} + +/* Adicione o pseudo-elemento dentro do elemento alvo */ +p:target::before { + font: 70% sans-serif; + content: "►"; + color: limegreen; + margin-right: .25em; +} + +/* Estilize nos elementos em itálico dentro do elemento alvo */ +p:target i { + color: red; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<div>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</div> + +<h3 id="Lightbox_com_CSS_puro">Lightbox com CSS puro</h3> + +<p>Você pode usar a pseudo-classe <code>:target</code> para criar uma lightbox sem usar JavaScript. Essa técnica requer que os links apontem para os elementos que inicialmente estavam escondidas na página. Uma vez designado, o CSS muda o <code>display</code> então, assim o conteúdo pode ser mostrado.</p> + +<div class="note"><strong>Nota:</strong> Uma lightbox com CSS puro mais completo usando a pseudo-classe <code>:target</code> <a href="https://github.com/madmurphy/takefive.css/">está disponível no GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><ul> + <li><a href="#example1">Abrir exemplo #1</a></li> + <li><a href="#example2">Abrir exemplo #2</a></li> +</ul> + +<div class="lightbox" id="example1"> + <figure> + <a href="#" class="close"></a> + <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption> + </figure> +</div> + +<div class="lightbox" id="example2"> + <figure> + <a href="#" class="close"></a> + <figcaption>Cras risus odio, pharetra nec ultricies et, + mollis ac augue. Nunc et diam quis sapien dignissim auctor. + Quisque quis neque arcu, nec gravida magna.</figcaption> + </figure> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">/* Lightbox fechado */ +.lightbox { + display: none; +} + +/* Lightbox aberto */ +.lightbox:target { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +/* Conteúdo da lightbox */ +.lightbox figcaption { + width: 25rem; + position: relative; + padding: 1.5em; + background-color: lightpink; +} + +/* Botão fechar */ +.lightbox .close { + position: relative; + display: block; +} + +.lightbox .close::after { + right: -1rem; + top: -1rem; + width: 2rem; + height: 2rem; + position: absolute; + display: flex; + z-index: 1; + align-items: center; + justify-content: center; + background-color: black; + border-radius: 50%; + color: white; + content: "×"; + cursor: pointer; +} + +/* Lightbox overlay */ +.lightbox .close::before { + left: 0; + top: 0; + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0,0,0,.7); + content: ""; + cursor: default; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<div>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Define semântica específica do HTML.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Não há mudanças.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + + + +<div>{{Compat("css.selectors.target")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">Usando a pseudo-classe :target em seletores.</a></li> +</ul> diff --git a/files/pt-br/web/css/_colon_valid/index.html b/files/pt-br/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..7512829170 --- /dev/null +++ b/files/pt-br/web/css/_colon_valid/index.html @@ -0,0 +1,74 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Layout + - Pseudo-classes + - Referencia + - Validação + - Web +translation_of: 'Web/CSS/:valid' +--- +<div>{{CSSRef}}</div> + +<p>A pseudo-classe CSS <strong><code>:valid</code></strong> representa qualquer {{HTMLElement("input")}} ou outro elemento do {{HTMLElement("form")}} cujo conteúdo foi validado com sucesso. Isso permite, facilmente, adicionar uma aparência que ajude o usuário a identificar os campos validados.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona qualquer input válido */ +input:valid { + background-color: powderblue; +}</pre> + +<p>Essa pseudo-classe é útil para realçar os campos válidos para o usuário.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja {{cssxref(":invalid")}} para um exemplo.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sem alterações.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Define a semântica do HTML e a validação de restrições.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_Browsers">Compatibilidade entre Browsers</h2> + +<div> + + +<p>{{Compat("css.selectors.valid")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outras pseudo-classe relacionada com validação: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> +</ul> diff --git a/files/pt-br/web/css/_colon_visited/index.html b/files/pt-br/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..501db9fcf6 --- /dev/null +++ b/files/pt-br/web/css/_colon_visited/index.html @@ -0,0 +1,154 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Layout + - Pseudo-classes + - Web +translation_of: 'Web/CSS/:visited' +--- +<div>{{ CSSRef }}</div> + +<p>O <strong><code>:visited</code></strong> é uma <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">Pseudo-classe</a> do <a href="/en-US/docs/Web/CSS">CSS</a> para indicar se o link em questão já foi visitado pelo usuário. Por questões de privacidade, os styles que podem ser modificados usando este seletor são muito limitados.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona qualquer <a> que poderá ser visitado */ +a:visited { + color: green; +}</pre> + +<p>Styles definidos pela pseudo-classe <code>:visited</code> vão ser substituidos por qualquer pseudo-classe relacionada ao link subsequente ({{cssxref(":link")}}, {{cssxref(":hover")}}, ou {{cssxref(":active")}}) que tenha ao menos uma especificação igual. Para estilizar links apropriadamente, garantindo assim seu funcionamento adequado, ponha a regra <code>:visited</code> depois da regra <code>:link</code> mas antes das regras <code>:hover</code> e <code>:active</code> , Pode-se definir pela ordem <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<h2 id="Restrições_de_Estilo">Restrições de Estilo</h2> + +<p>Por razões de privacidade, navegadores limitam estritamente quais estilos você pode aplicar usando esta pseudo-class, como elas podem ser usadas:</p> + +<ul> + <li>Propriedades admicíveis no CSS são: + <ul> + <li>{{ cssxref("color") }}; </li> + <li>{{ cssxref("background-color") }};</li> + <li>{{ cssxref("border-color") }};</li> + <li>{{ cssxref("border-bottom-color") }};</li> + <li>{{ cssxref("border-left-color") }};</li> + <li> {{ cssxref("border-right-color") }};</li> + <li> {{ cssxref("border-top-color") }};</li> + <li> {{ cssxref("column-rule-color") }};</li> + <li> {{ cssxref("outline-color") }}.</li> + </ul> + </li> + <li>Atributos <a href="/pt-BR/docs/Web/SVG">SVG</a> admissíveis são {{SVGAttr("fill")}} e {{SVGAttr("stroke")}}.</li> + <li>Os componentes alpha permitidos de estilos seram ignorados. Ao invés disso, o componente alpha do elemento de estado non-<code>:visited</code> será usado, exceto quando o componente é <code>0</code>, no qual o estilo definido em <code>:visited</code> será inteiramente ignorado.</li> + <li>Embora esses estilos podem mudar como as cores serão mostradas ao usuário, o método {{domxref("window.getComputedStyle")}} vai mentir e sempre retornar o valor da cor em non-<code>:visited.</code> </li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong> Para mais informações quanto a essas limitações e as razões por trás delas, veja <a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a>. Obs: No momento estará apenas disponível em inglês.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><!DOCTYPE html> +<html> +<head> + <title>Exemplo de uso do seletor :visited</title> + <style type="text/css"> + a { + background-color: white; + border: 1px solid white; } + a:visited { + background-color: lightblue; + border-color: cyan; + color: darkblue; } + </style> +</head> +<body> + <a href="">Você já visitou este link?</a><br> + <a href="">Você já visitou este link.</a> +</body> +</html></pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Propriedades que de alguma forma não tenha cor ("color") definida, ou seja transparente, não podem ser modificadas como o <code>:visited</code>. Das propriedades que podem ser definidas por essa pseudo-classe, seu navegador provavelmente terá por padão valores para <code>color</code> e <code>column-rule-color</code> somente. Portanto, se você quiser modificar outras propriedades, você necessitará pré-definir os valores fora do seletor <code>:visited</code>.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">Você já visitou este link?</a> +<br> +<a href="">Você já visitou este link.</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + /* Specifica non-transparent por padrão para algumas + propriedades, permitindo-os a serem estilizados pelo + estado :visited */ + background-color: white; + border: 1px solid white; +} + +a:visited { + background-color: yellow; + border-color: hotpink; + color: hotpink; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<div>{{EmbedLiveSample("Exemplo")}}</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sem mudança.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Sem mudança.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Eleva a restrição para aplicar apenas :visited ao elemento {{HTMLElement ("a")}}. Permite que os navegadores restrinjam seu comportamento por motivos de privacidade.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2> + +<div class="hidden"> </div> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.Obs: Disponível em inglês.</div> + +<p>{{Compat("css.selectors.visited")}}</p> + +<h2 id="Veja_também_(inglês)">Veja também (inglês)</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a></li> + <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}</li> +</ul> diff --git a/files/pt-br/web/css/_doublecolon_-ms-tooltip/index.html b/files/pt-br/web/css/_doublecolon_-ms-tooltip/index.html new file mode 100644 index 0000000000..e9e3496a20 --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_-ms-tooltip/index.html @@ -0,0 +1,23 @@ +--- +title: '::-ms-tooltip' +slug: 'Web/CSS/::-ms-tooltip' +translation_of: 'Archive/Web/CSS/::-ms-tooltip' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><span class="seoSummary">The <strong><code>::-ms-tooltip</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> is a <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft extension</a> that applies one or more styles to the tooltip of a slider <code><a href="/en-US/docs/Web/HTML/Element/input/range"><input type="range"></a></code>.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">::-ms-tooltip {...} +</pre> + +<h2 id="Propriedades">Propriedades</h2> + +<p>The only CSS properties that can be used on <code>::-ms-tooltip</code> are <code><a href="/en-US/docs/Web/CSS/display">display</a></code> and <code><a href="/en-US/docs/Web/CSS/visibility">visibility</a></code>, for hiding the pseudo-element.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/input/range"><input type="range"></a></li> +</ul> diff --git a/files/pt-br/web/css/_doublecolon_after/index.html b/files/pt-br/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..3281ed4793 --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_after/index.html @@ -0,0 +1,241 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +translation_of: 'Web/CSS/::after' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">Em CSS, <strong><code>::after</code></strong> cria um <a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade {{cssxref("content")}}.</span> É inline por padrão.</p> + +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Adiciona uma seta após os links */</span> +<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span> + <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<div class="note"> +<p>O CSS3 introduziu a notação <code>::after</code> (com dois sinais de dois pontos) para distinguir <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dos <a href="/pt-BR/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Os navegadores também aceitam <code>:after</code>, introduzido no CSS2.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Uso_simples">Uso simples</h3> + +<p>Vamos criar duas classes: uma para parágrafos tediosos e uma para parágrafos excitantes. Podemos então marcar cada parágrafo adicionando um pseudo-elemento ao final dele.</p> + +<pre class="brush: html"><p class="boring-text">Here is some plain old boring text.</p> +<p>Here is some normal text that is neither boring nor exciting.</p> +<p class="exciting-text">Contributing to MDN is easy and fun. +Just hit the edit button to add new live samples, or improve existing samples.</p></pre> + +<pre class="brush: css">.exciting-text::after { + content: "<- now this *is* exciting!"; + color: green; +} + +.boring-text::after { + content: "<- BORING!"; + color: red; +}</pre> + +<h4 id="Visualização">Visualização</h4> + +<p>{{EmbedLiveSample('Uso_simples', 500, 150)}}</p> + +<h3 id="Exemplos_decorativos">Exemplos decorativos</h3> + +<p>Podemos estilizar textos ou imagens na propriedade {{cssxref("content")}} praticamente de qualquer forma que quisermos.</p> + +<pre class="brush: html"><span class="ribbon">Observe onde a caixa de laranja está.</span></pre> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::after { + content: "Observe esta caixa laranja"; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Visualização_2">Visualização</h4> + +<p>{{EmbedLiveSample('Exemplos_decorativos', 450, 20)}}</p> + +<h3 id="Dicas">Dicas</h3> + +<p>O exemplo a seguir mostra o uso do <code>::after</code> <a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> em conjunto com a expressão CSS <a href="/pt-BR/docs/Web/CSS/attr"><code>attr()</code></a> e um <a href="/pt-BR/docs/Web/HTML/Global_attributes#attr-dataset">tributo data personalizado</a> <code>data-descr</code> para criar uma <em>dica </em>em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">página separada.</a></p> + +<pre class="brush: html"><p>Aqui está o exemplo ao vivo do código acima.<br /> + Temos um pouco de <span data-descr="collection of words and punctuation">texto</span> aqui com algumas + <span data-descr="small popups which also hide again">dicas</span>.<br /> + Não seja tímido, passe o mouse por cima para dar uma <span data-descr="not to be taken literally">olhada</span>. +</p> +</pre> + +<pre class="brush: css">span[data-descr] { + position: relative; + text-decoration: underline; + color: #00F; + cursor: help; +} + +span[data-descr]:hover::after { + content: attr(data-descr); + position: absolute; + left: 0; + top: 24px; + min-width: 200px; + border: 1px #aaaaaa solid; + border-radius: 10px; + background-color: #ffffcc; + padding: 12px; + color: #000000; + font-size: 14px; + z-index: 1; +}</pre> + +<h4 id="Visualização_3">Visualização</h4> + +<p>{{EmbedLiveSample('Dicas', 450, 120)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Sem mudanças significativas em relação à especificação anterior.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Permite transições em propriedades definidas em pseudo-elementos.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Permite animações em propriedades definidas em pseudo-elementos.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introduz a sintaxe de dois sinais de dois pontos.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial, usando a sintaxe de um sinal de dois pontos.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte ao <code>:after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}[1]</td> + <td>8.0</td> + <td>{{CompatOpera("4")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Suporte ao <code>::after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}[1]</td> + <td>9.0</td> + <td>{{CompatOpera("7")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Suporte à animações e transições</td> + <td>26</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte ao <code>:after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Suporte ao <code>::after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Suporte à animações e transições</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] O Firefox anterior à versão 3.5 implementou apenas a versão CSS 2.0 de <code>:after</code>. Não foram permitidos {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> e algumas propriedades exibição. O Firefox 3.5 removeu estas restrições.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li> +</ul> diff --git a/files/pt-br/web/css/_doublecolon_backdrop/index.html b/files/pt-br/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..f08d879c46 --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,131 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Layout + - Pano de fundo + - Pseudo-elemento + - Referencia + - Web +translation_of: 'Web/CSS/::backdrop' +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<p>Cada elemento na <a href="https://fullscreen.spec.whatwg.org/#top-layer">camada superior</a> de uma pilha de elementos possui um {{Cssxref("pseudo-elementos", "pseudo-elemento")}} <dfn><code>::backdrop</code></dfn>. Esse pseudo-elemento é uma caixa renderizada imediatamente abaixo do elemento superior (e acima do elemento logo abaixo desse elemento, caso exista algum), dentro da camada superior.</p> + +<p class="note">O pseudo-elemento <code>::backdrop</code> pode ser utilizado para criar um pano de fundo que esconde o conteúdo por trás de um elemento posicionado no topo de uma pilha de elementos. Por exemplo, para o elemento que é mostrado em tela cheia conforme descrito nessa especificação.</p> + +<p>Ele não herda de nenhum elemento e também não é herdado. Não há restrição de propriedades que podem ser aplicadas a esse pseudo-elemento. </p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Copatibilidade_com_navegadores">Copatibilidade com navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>32.0 {{property_prefix("webkit")}}<br> + 37.0</td> + <td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td> + <td>11 {{property_prefix("ms")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>em um <code><dialog></code></td> + <td>32.0 {{property_prefix("webkit")}}<br> + 37.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>em tela cheia</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td> + <td>11 {{property_prefix("ms")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>em um <code><dialog></code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>em tela cheia</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Ver {{bug(1064843)}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref(":fullscreen")}}</li> + <li>{{HTMLElement("dialog")}}</li> +</ul> diff --git a/files/pt-br/web/css/_doublecolon_before/index.html b/files/pt-br/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..431c59a80e --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_before/index.html @@ -0,0 +1,299 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +translation_of: 'Web/CSS/::before' +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p><span class="seoSummary"><code>::before</code> cria um <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade {{cssxref("content")}}. Este elemento é inline por padrão.</span></p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<p>A notação <code>::before</code> (com dois dois-pontos) foi introduzida no CSS3 afim de diferenciar <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> de <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Navegadores também aceitam a notação <code>:before</code> introduzida no CSS 2.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Adicionando_aspas">Adicionando aspas</h3> + +<p>Um exemplo simples do uso de pseudo-elementos <code>::before</code> pseudo-elementos é a exibição de aspas. Aqui usamos <code>::before e </code><code>{{Cssxref("::after")}}</code> para inserir caracteres de aspas.</p> + +<h4 id="Conteúdo_HTML">Conteúdo HTML</h4> + +<pre class="brush:html"><q>Algumas citações</q>, ele disse, <q>são melhor do que nenhuma.</q></pre> + +<h4 id="Conteúdo_CSS">Conteúdo CSS</h4> + +<pre class="brush:css">q::before { + content: "«"; + color: blue; +} +q::after { + content: "»"; + color: red; +}</pre> + +<h4 id="Saída">Saída</h4> + +<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p> + +<h3 id="Exemplo_decorativo">Exemplo decorativo</h3> + +<p>Podemos estilizar textos e imagens na propriedade {{cssxref("content")}} praticamente da forma que desejarmos.</p> + +<h4 id="Conteúdo_HTML_2">Conteúdo HTML</h4> + +<pre class="brush: html"><span class="ribbon">Observe onde a caixa laranja está.</span></pre> + +<h4 id="Conteúdo_CSS_2">Conteúdo CSS</h4> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::before { + content: "Olhe para esta caixa laranja."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Saída_2">Saída</h4> + +<p>{{EmbedLiveSample('Decorative_example', 450, 60)}}</p> + +<h3 id="Lista_To-do">Lista To-do</h3> + +<p>Neste exemplo vamos criar uma simples lista de tarefas, usando pseudo-elementos. Este método pode frequentemente ser utilizado para dar pequenos toques à UI (User Interface) e melhorar a experiência do usuário.</p> + +<h4 id="Conteúdo_HTML_3">Conteúdo HTML</h4> + +<pre class="brush: html"><ul> + <li>Comprar Leite</li> + <li>Levar o cachorro para passear</li> + <li>Exercitar-se</li> + <li>Escrever codigo</li> + <li>Tocar musica</li> + <li>Relaxar</li> +</ul> +</pre> + +<h4 id="Conteúdo_CSS_3">Conteúdo CSS</h4> + +<pre class="brush: css">li { + list-style-type: none; + position: relative; + margin: 2px; + padding: 0.5em 0.5em 0.5em 2em; + background: lightgrey; + font-family: sans-serif; +} + +li.done { + background: #CCFF99; +} + +li.done::before { + content: ''; + position: absolute; + border-color: #009933; + border-style: solid; + border-width: 0 0.3em 0.25em 0; + height: 1em; + top: 1.3em; + left: 0.6em; + margin-top: -1em; + transform: rotate(45deg); + width: 0.5em; +}</pre> + +<h4 id="Conteúdo_JavaScript">Conteúdo JavaScript</h4> + +<pre class="brush: js">var list = document.querySelector('ul'); +list.addEventListener('click', function(ev) { + if( ev.target.tagName === 'LI') { + ev.target.classList.toggle('done'); + } +}, false); +</pre> + +<p>Aqui está rodando o código acima. Perceba que nenhum ícone é utilizado e o check-mark é o <code>::before</code> que foi estilizado no CSS.</p> + +<h4 id="Saída_3">Saída</h4> + +<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p> + +<h2 id="Notas">Notas</h2> + +<p>Embora as correções posicionadas e fixadas no Firefox 3.5 não permitam que o conteúdo seja gerado como um irmão anterior ao elemento (conforme a especificação para o CSS indicam "Os Pseudo-elementos :before e :after interagem com outros elementos como se fosse elementos reais inseridos dentro do elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora em layouts sem tables (por exemplo, para alcançar a centralização), a medida que o conteúdo a ser centrado está envolvido com um elemento filho adicional, uma coluna antes e depois do conteúdo pode ser introduzida sem adicionar elementos filhos reais (isto é, talvez mais semanticamente correto para adicionar uma pequena distância, do que seria adicionar um div vazio antes e / ou depois). <span id="result_box" lang="pt"><span>(E sempre lembre-se de adicionar uma largura a um flutuador, pois, de outra forma, não flutuará!)</span></span></p> + +<h4 id="HTML_content">HTML content</h4> + +<pre class="brush: html"><div class="example"> +<span id="floatme">"Floated Before" should be generated on the left of the +viewport and not allow overflow in this line to flow under it. Likewise +should "Floated After" appear on the right of the viewport and not allow this +line to flow under it.</span> +</div></pre> + +<h4 id="CSS_content">CSS content</h4> + +<pre class="brush: css">#floatme { float: left; width: 50%; } + +/* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */ +.example::before { + content: "Floated Before"; + float: left; + width: 25% +} +.example::after { + content: "Floated After"; + float: right; + width:25% +} + +/* For styling */ +.example::before, .example::after, .first { + background: yellow; + color: red; +}</pre> + +<h4 id="Output">Output</h4> + +<p>{{EmbedLiveSample("Notes")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>No significant changes to the previous specification.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Allows transitions on properties defined on pseudo-elements.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Allows animations on properties defined on pseudo-elements.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introduces the two-colon syntax.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition, using the one-colon syntax</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td><code>:before</code> support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td> + <td>8.0</td> + <td>{{CompatOpera("4")}}</td> + <td>4.0</td> + </tr> + <tr> + <td><code>::before</code> support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup></td> + <td>9.0</td> + <td>{{CompatOpera("7")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Support of animations and transitions</td> + <td>26</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>:before</code> support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>::before</code> support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.1</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + <tr> + <td>Support of animations and transitions</td> + <td>26</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :before. Not allowed were {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> and some display properties. Firefox 3.5 removed those restrictions.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Cssxref("::after")}}, {{cssxref("content")}}</li> +</ul> diff --git a/files/pt-br/web/css/_doublecolon_first-letter/index.html b/files/pt-br/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..990a51a3ff --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,190 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +translation_of: 'Web/CSS/::first-letter' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Sumário">Sumário</h2> + +<p>O <code>::first-letter</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elementos" title="Pseudo-elements">pseudo-elemento</a> que seleciona a primeira letra da primeira linha de um bloco, se nçao for procedido por qual outro conteúdo (como imagens ou tableas embutidas/inline table) na mesma linha.</p> + +<p>A primeira letra de um elemento não é necessariamente uma identificação trivial:</p> + +<ul> + <li>Pontuação, <span class="tlid-translation translation" lang="pt"><span title="">que é qualquer caractere definido em Unicode de abertura (Ps), de fechamento (Pe), aspa inicial (Pi), aspa final (Pf) e outras pontuações (Po), precedendo ou imediatamente após a primeira letra também é correspondida</span> <span title="">por esse pseudo-elemento.</span></span></li> + <li><span class="tlid-translation translation" lang="pt"><span title="">Da mesma forma, alguns idiomas têm dígitos que são sempre escritos em maiúsculas, como o IJ em holandês.</span> <span title="">Nesses casos raros, as duas letras do dígrafo devem corresponder ao pseudo-elemento :: first-letter.</span> <span title="">(Isso é pouco suportado pelos navegadores, verifique <a href="#Compatibilidade_de_Navegadores">a tabela de compatibilidade</a></span></span>).</li> + <li><span class="tlid-translation translation" lang="pt"><span title="">Finalmente, uma combinação do pseudoelemento {{cssxref (":: before")}} e a propriedade {{cssxref ("content")}} podem injetar algum texto no início do elemento.</span> <span title="">Nesse caso, <code>::first-letter </code>corresponderá à primeira letra deste conteúdo gerado.</span></span></li> +</ul> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Uma primeira linha tem apenas significado em uma caixa de contêiner de bloco; portanto, o pseudo-elemento <code>::first-letter</code> apenas afeta os elementos com um valor de {{cssxref ("display")}} de <code>block</code>, <code>inline-block</code>, <code>table-cell</code></span><span title="">, <code>list-item</code> ou <code>table-caption</code>.</span> <span title="">Em todos os outros casos, <code>::first-letter</code> não tem efeito.</span></span></p> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Somente um pequeno subconjunto de todas as propriedades CSS pode ser usado dentro de um bloco de declaração de um conjunto de regras CSS que contém um seletor usando o pseudoelemento <code>::first-letter</code>:</span></span></p> + +<ul> + <li>Todas as propriedades de fonts : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}.</li> + <li>Todas as propriededas de background : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}.</li> + <li>Todas as propriedades de margem: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li> + <li>Todas as propriedades de "padding" (preenchimento): {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li> + <li>Todas as bordas: the <span class="tlid-translation translation" lang="pt"><span title="">taquigraficas</span></span> {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, e as propriedades manuscritas.</li> + <li>A propriedade {{ cssxref("color") }}.</li> + <li>As propriedades CSS: {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (somente se <code>float</code> for <code>none</code>).</li> +</ul> + +<p>Como toda essa lista será estendida no futuro, é recomendado que você não use qualquer propriedade dentro da declaração do bloco, afim de manter o CSS a qualquer prova.</p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="pt"><span title="">No CSS 2, os pseudoelementos eram prefixados com um caractere de dois pontos (<code>:</code>).</span> <span title="">Como as pseudo-classes também estavam seguindo a mesma convenção, elas eram indistinguíveis.</span> <span title="">Para resolver isso, o CSS 2.1 mudou a convenção para pseudoelementos.</span> <span title="">Agora, um pseudoelemento é prefixado com dois caracteres de dois pontos (<code>::</code>) e uma pseudo-classe ainda é prefixado com um único dois pontos (<code>:</code>).</span></span></p> + +<p>Exemplo de <strong>pseudoclasse</strong>:<br> + <code>.classedoelemento<strong>:</strong>hover { ... }</code></p> + +<p>Exemplo de <strong>pesudoelemento:</strong><br> + <code>.classedoelemento<strong>::</strong>first-letter { ... }</code></p> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Como vários navegadores já implementaram a versão CSS 2 em uma versão de lançamento, todos os navegadores que suportam a sintaxe de dois pontos também suportam a antiga sintaxe de dois pontos. </span></span></p> + +<div class="blockIndicator warning"> +<p><span class="tlid-translation translation" lang="pt"><span title="">Mas isso pode mudar, portanto use SEMPRE <code>::</code> para pseudolementos</span></span></p> + +<p><span class="tlid-translation translation" lang="pt"><span title="">...a não se que você <strong>precise muito</strong> que seu código seja compatível com Internet Explore 8, então use um carectere de dois pontos.</span></span></p> +</div> +</div> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: css notranslate">/* Fazendo odas as letras dos paragrados maior e vermelha */ + +p::first-letter { /* Use :first-letter if você precise muito de compatibilidade com IE 8 */ + color: red; + font-size: 130%; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> + <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> + <td><span class="tlid-translation translation" lang="pt"><span title="">Propriedades permitidas generalizadas para tipografia, decoração de texto e propriedades de layout embutido</span></span>, {{ cssxref("opacity") }} e {{ cssxref("box-shadow") }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td> + <td>{{ Spec2('CSS3 Text Decoration')}}</td> + <td>Permitido uso de {{cssxref("text-shadow")}} com <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td><span class="tlid-translation translation" lang="pt"><span title="">Comportamento definido entre maiúsculas e minúsculas, como nos itens da lista, ou com comportamento específico do idioma (como o dígrafo holandês</span></span> <code>IJ</code>). <span class="tlid-translation translation" lang="pt"><span title="">A sintaxe de dois dois-pontos para pseudo-elementos foi introduzida.</span></span></td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Sem mudanças significativas, apesar que CSS nível 2 continuar aceitando apenas um dois-pontos.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definição inicial de um dois-pontos.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegadores_2"><a id="Compatibilidade_de_Navegadores" name="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</a></h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>9.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td>Velha sintaxe de um dois-pontos (<code>:first-line</code>)</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>5.5</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td>Suporte ao dígrafo Holandês <code>IJ</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }} {{ bug("92176") }} </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas</th> + <th></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Velha sintaxe um dois-pontos (<code>:first-line</code>)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Suporte ao dígrafo holandês <code>IJ</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>O peseudo-elemento {{cssxref("::first-line")}} .</li> +</ul> diff --git a/files/pt-br/web/css/_doublecolon_first-line/index.html b/files/pt-br/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..e1fc0246ff --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,115 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +translation_of: 'Web/CSS/::first-line' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">O pseudoelemento <strong><code>::first-line</code></strong> aplica estilos à primeira linha de um elemento no nível do bloco. Observe que o comprimento da primeira linha depende de muitos fatores, incluindo a largura do elemento, a largura do documento e o tamanho da fonte do texto.</span></p> + +<pre class="brush: css no-line-numbers notranslate">/* Seleciona a primeira linha dentro da tag <p> */ +p::first-line { + color: red; +}</pre> + +<div class="note"> +<p>O CSS3 introduziu a notação <code>::first-line</code>(com dois pontos) para distinguir pseudo-classes de pseudo-elementos. Os navegadores também aceitam <code>:first-line</code> introduzida no CSS2.</p> +</div> + +<h2 id="Propriedades_permitidas">Propriedades permitidas</h2> + +<p>Somente um pequeno subconjunto de propriedades CSS pode ser usado com o<code>::first-line</code> pseudo-elemento:</p> + +<ul> + <li>Todas as propriedades relacionadas à fonte: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, e {{Cssxref("font-family")}}</li> + <li>Todas as propriedades relacionadas ao background: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}}, e {{cssxref("background-blend-mode")}}</li> + <li>A propriedade {{cssxref("color")}} </li> + <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}}, e {{cssxref("line-height")}}</li> + <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, e {{cssxref("vertical-align")}}.</li> +</ul> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Os estilos serão aplicados apenas à primeira linha deste parágrafo. +Depois disso, todo o texto será estilizado normalmente. Entendeu o que eu quis dizer?</p> + +<span>A primeira linha deste texto não receberá um estilo especial +porque não é um elemento no nível do bloco.</span></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">::first-line { + color: blue; + text-transform: uppercase; + + + /* AVISO: NÃO UTILIZE: */ + /* Muitas propriedades são inválidas em pseudo-elementos <code>::first-line</code> */ + margin-left: 20px; + text-indent: 20px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Examples', 350, 160)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Define mais estritamente onde <code>::first-letter</code> pode ocorrer.<br> + Generaliza propriedades permitidas para tipografia, decoração de texto e propriedades de layout embutido e {{cssxref("opacity")}}.<br> + Define a herança de<code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-line')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Permite o uso de {{cssxref("text-shadow")}} com <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introdução da sintaxe de dois-pontos.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Nenhuma mudança.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial, usando a sintaxe de dois pontos.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div> +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("css.selectors.first-line")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("::first-letter")}}</li> +</ul> diff --git a/files/pt-br/web/css/_doublecolon_selection/index.html b/files/pt-br/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..16ad827a2a --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_selection/index.html @@ -0,0 +1,129 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">O <a href="pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> CSS <strong><code>::selection</code></strong> aplica estilos para partes do documento que foram selecionadas pelo usuário (tal como clicar e arrastar o ponteiro do mouse através de um texto.</span></p> + +<pre class="brush: css no-line-numbers notranslate">::selection { + background-color: cyan; +}</pre> + +<h2 id="Propriedades_permitidas">Propriedades permitidas</h2> + +<p>Apenas certas propriedades podem ser usadas com o <code>::selection</code>:</p> + +<ul> + <li>{{CSSxRef("color")}}</li> + <li>{{CSSxRef("background-color")}}</li> + <li>{{CSSxRef("cursor")}}</li> + <li>{{CSSxRef("caret-color")}}</li> + <li>{{CSSxRef("outline")}} and its longhands</li> + <li>{{CSSxRef("text-decoration")}} and its associated properties</li> + <li>{{CSSxRef("text-emphasis-color")}}</li> + <li>{{CSSxRef("text-shadow")}}</li> +</ul> + +<div class="warning"> +<p>Em particular, {{CSSxRef("background-image")}} é ignorada.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">/* Sintaxe legado do Firefox (até a versão 61) */ +::-moz-selection + +{{CSSSyntax}} +</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate">Esse texto tem estilos especiais quando selecionado. +<p>Tente selecionando também o texto nesse parágrafo.</p></pre> + +<h3 id="CSS">CSS</h3> + +<div class="hidden"> +<pre class="brush: css notranslate">::-moz-selection { + color: gold; + background-color: red; +} + +p::-moz-selection { + color: white; + background-color: blue; +}</pre> +</div> + +<pre class="brush: css notranslate">/* Texto selecionado dourado com o fundo vermelho */ +::selection { + color: gold; + background-color: red; +} + +/* Texto selecionado branco com o fundo azul */ +p::selection { + color: white; + background-color: blue; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Exemplo')}}</p> + +<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2> + +<p><strong>Não substitua os estilos de texto selecionados por razões puramente estéticas</strong> — os usuários podem personalizá-los para atender às suas necessidades. Para pessoas com problemas cognitivos ou com menos conhecimento tecnológico, alterações inesperadas nos estilos de seleção podem prejudicar sua compreensão da funcionalidade.</p> + +<p>Se substituído, é importante garantir que a <strong>taxa de contraste</strong> entre o texto e as cores de plano de fundo da seleção seja alta o suficiente para que pessoas com condições de baixa visão possam lê-lo.</p> + +<p>A taxa de contraste da cor é encontrada comparando a luminosidade do texto selecionado e as cores de fundo do texto selecionado. Para atender às atuais <a href="https://www.w3.org/WAI/intro/wcag">Diretrizes de acessibilidade de conteúdo da Web (WCAG)</a>, o conteúdo de texto deve ter uma taxa de contraste de 4.5:1 ou 3:1 para texto maior, como títulos. (WCAG define texto grande entre 18,66 px e 24 px e negrito, ou 24 px ou maior.)</p> + +<p>Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do primeiro plano do segundo plano</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Verificador de Constraste de Cor</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG,1.4: Facilite para os usuários vizualizarem o conteúdo, incluindo a separação do primeiro plano do segundo plano (em inglês).</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota:</strong> <code>::selection</code> estava nos rascunhos do Nível 3 dos Seletores de CSS, mas foi removido na fase Recomendação do Candidato porque estava subespecificado (especialmente com elementos aninhados) e a interoperabilidade não foi alcançada (<a href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">com base na lista de discussão de estilos W3C</a>). Ele retornou no <a href="http://dev.w3.org/csswg/css-pseudo-4/">Nível 4 dos Pseudo-Elementos</a>.</p> +</div> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("css.selectors.selection")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li> + <p>{{cssxref("pointer-events")}} - permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo do evento do mouse.</p> + </li> +</ul> diff --git a/files/pt-br/web/css/align-content/index.html b/files/pt-br/web/css/align-content/index.html new file mode 100644 index 0000000000..349bc34b26 --- /dev/null +++ b/files/pt-br/web/css/align-content/index.html @@ -0,0 +1,294 @@ +--- +title: align-content +slug: Web/CSS/align-content +translation_of: Web/CSS/align-content +--- +<p>A propriedade <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>align-content</code></strong> define a distribuição entre e ao redor dos items do conteúdo do eixo transversal de uma <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> ou do eixo de bloco de uma <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">grid</a>.</p> + +<p>O exemplo interativo abaixo use Grid Layout para demonstrar alguns dos valores dessa propriedade.</p> + +<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div> + + + +<p>This property has no effect on single line flex containers (i.e. ones with <code>flex-wrap: nowrap</code>).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Basic positional alignment */ +/* align-content does not take left and right values */ +align-content: center; /* Pack items around the center */ +align-content: start; /* Pack items from the start */ +align-content: end; /* Pack items from the end */ +align-content: flex-start; /* Pack flex items from the start */ +align-content: flex-end; /* Pack flex items from the end */ + +/* Normal alignment */ +align-content: normal; + +/* Baseline alignment */ +align-content: baseline; +align-content: first baseline; +align-content: last baseline; + +/* Distributed alignment */ +align-content: space-between; /* Distribute items evenly + The first item is flush with the start, + the last is flush with the end */ +align-content: space-around; /* Distribute items evenly + Items have a half-size space + on either end */ +align-content: space-evenly; /* Distribute items evenly + Items have equal space around them */ +align-content: stretch; /* Distribute items evenly + Stretch 'auto'-sized items to fit + the container */ + +/* Overflow alignment */ +align-content: safe center; +align-content: unsafe center; + +/* Global values */ +align-content: inherit; +align-content: initial; +align-content: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>start</code></dt> + <dd>The items are packed flush to each other against the start edge of the alignment container in the cross axis.</dd> + <dt><code>end</code></dt> + <dd>The items are packed flush to each other against the end edge of the alignment container in the cross axis.</dd> + <dt><code>flex-start</code></dt> + <dd>The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side.<br> + This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>start</code>.</dd> + <dt><code>flex-end</code></dt> + <dd>The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-end side.<br> + This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>end</code>.</dd> + <dt><code>center</code></dt> + <dd>The items are packed flush to each other in the center of the alignment container along the cross axis.</dd> + <dt><code>normal</code></dt> + <dd>The items are packed in their default position as if no <code>align-content</code> value was set.</dd> + <dt><code>baseline<br> + first baseline</code><br> + <code>last baseline</code></dt> + <dd><img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd> + <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br> + The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd> + <dt><code>space-between</code></dt> + <dd>The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.</dd> + <dt><code>space-around</code></dt> + <dd>The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.</dd> + <dt><code>space-evenly</code></dt> + <dd>The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same.</dd> + <dt><code>stretch</code></dt> + <dd>If the combined size of the items along the cross axis is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.</dd> + <dt><code>safe</code></dt> + <dd>Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were <code>start</code>.</dd> + <dt><code>unsafe</code></dt> + <dd>Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.</dd> +</dl> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[4] notranslate">#container { + height:200px; + width: 240px; + align-content: center; /* Can be changed in the live sample */ + background-color: #8c8c8c; +} + +.flex { + display: flex; + flex-wrap: wrap; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 50px); +} + +div > div { + box-sizing: border-box; + border: 2px solid #8c8c8c; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#item1 { + background-color: #8cffa0; + min-height: 30px; +} + +#item2 { + background-color: #a0c8ff; + min-height: 50px; +} + +#item3 { + background-color: #ffa08c; + min-height: 40px; +} + +#item4 { + background-color: #ffff8c; + min-height: 60px; +} + +#item5 { + background-color: #ff8cff; + min-height: 70px; +} + +#item6 { + background-color: #8cffff; + min-height: 50px; + font-size: 30px; +} + +select { + font-size: 16px; +} + +.row { + margin-top: 10px; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="container" class="flex"> + <div id="item1">1</div> + <div id="item2">2</div> + <div id="item3">3</div> + <div id="item4">4</div> + <div id="item5">5</div> + <div id="item6">6</div> +</div> + +<div class="row"> + <label for="display">display: </label> + <select id="display"> + <option value="flex">flex</option> + <option value="grid">grid</option> + </select> +</div> + +<div class="row"> + <label for="values">align-content: </label> + <select id="values"> + <option value="normal">normal</option> + <option value="stretch">stretch</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="center" selected>center</option> + <option value="space-between">space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly">space-evenly</option> + + <option value="start">start</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + + <option value="baseline">baseline</option> + <option value="first baseline">first baseline</option> + <option value="last baseline">last baseline</option> + + <option value="safe center">safe center</option> + <option value="unsafe center">unsafe center</option> + <option value="safe right">safe right</option> + <option value="unsafe right">unsafe right</option> + <option value="safe end">safe end</option> + <option value="unsafe end">unsafe end</option> + <option value="safe flex-end">safe flex-end</option> + <option value="unsafe flex-end">unsafe flex-end</option> + </select> +</div> +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var values = document.getElementById('values'); +var display = document.getElementById('display'); +var container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.alignContent = evt.target.value; +}); + +display.addEventListener('change', function (evt) { + container.className = evt.target.value; +}); +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 260, 290)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Flexbox", "#align-content-property", "align-content")}}</td> + <td>{{Spec2("CSS3 Flexbox")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<h3 id="Support_in_Flex_layout">Support in Flex layout</h3> + +<p>{{Compat("css.properties.align-content.flex_context")}}</p> + +<h3 id="Support_in_Grid_layout">Support in Grid layout</h3> + +<p>{{Compat("css.properties.align-content.grid_context")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> + <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> +</ul> + +<div>{{CSSRef}}</div> diff --git a/files/pt-br/web/css/align-items/index.html b/files/pt-br/web/css/align-items/index.html new file mode 100644 index 0000000000..2d74f7ec77 --- /dev/null +++ b/files/pt-br/web/css/align-items/index.html @@ -0,0 +1,286 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - CSS Flexible Boxes + - CSS Propriedade + - Referencia +translation_of: Web/CSS/align-items +--- +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>align-items</code></strong> estabelece o valor {{cssxref("align-self")}} em todos filhos diretos como um grupo. A propriedade align-self estabelece o alinhamento de um certo item dentro do bloco que o contém. Em Flexbox ele controla o alinhamento dos itens em {{glossary("Cross Axis")}}, enquanto que no Grid Layout, controla o alinhamento dos itens no Eixo de Bloco dentro de sua <a href="/en-US/docs/Glossary/Grid_Areas">grid area</a>.</p> + +<p>O exemplo interativo abaixo demonstra alguns dos valores para <code>align-items</code> usando grid layout.</p> + +<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers">/* Palavras-chave básicas */ +align-items: normal; +align-items: stretch; + +/* Posicionamento do alinhamento */ +/* align-items não recebe valores left e right */ +align-items: center; /* Itens posicionados ao redor do centro */ +align-items: start; /* Posiciona itens a partir do início */ +align-items: end; /* Posiciona itens a partir do fim */ +align-items: flex-start; /* Posiciona itens-flex a partir do início */ +align-items: flex-end; /* Posiciona itens-flex a partir do fim */ +align-items: self-start; +align-items: self-end; + +/* Alinhamento da baseline */ +align-items: baseline; +align-items: first baseline; +align-items: last baseline; /* Overflow alinhamento (apenas para alinhamento de posição) */ +align-items: safe center; +align-items: unsafe center; + +/* Valores globais */ +align-items: inherit; +align-items: initial; +align-items: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>O efeito desta palavra-chave depende do modo de layout em que nos encontramos: + <ul> + <li>Em layouts absolutamente posicionados, a palavra-chave se comporta como <code>start</code> em <em>replaced</em> de caixas absolutamente posicionadas, e como <code>stretch</code> em <em>all others</em> de caixas absolutamente posicionadas.</li> + <li>Em posição estática de layouts absolutamente posicionados, a palavra-chave se comporta como <code>stretch</code>.</li> + <li>Para itens-flex, a palavra chave se comporto como <code>stretch</code>.</li> + <li>Para itens-grid, esta palavra-chave leva a um comportamento similiar ao <code>stretch</code>, exceto para caixas com um aspect ratio ou tamanhos intrínsecos, onde se comporta como <code>start</code>.</li> + <li>A propriedade não se aplica para caixas block-level, e para células de tabela.</li> + </ul> + </dd> + <dt><code>flex-start</code></dt> + <dd>As bordas da margem superior dos itens-flex são juntados com a borda superior da linha.</dd> + <dt><code>flex-end</code></dt> + <dd>As bordas da margem inferior dos itens flex são juntados com a borda inferior da linha.</dd> + <dt><code>center</code></dt> + <dd>As caixas de margem dos itens flex são centralizados ao longo da linha do eixo. Caso o tamanho de um item seja superior ao container flex, irá transbordar de maneira igual em ambas direções.</dd> + <dt><code>start</code></dt> + <dd>Os itens são posicionados, para cada um, em direção a borda início do container de alinhamento no eixo apropriado. </dd> + <dt><code>end</code></dt> + <dd>Os itens são posicionados, para cada um, em direção a borda fim do container de alinhamento no eixo apropriado.</dd> + <dt><code>self-start</code></dt> + <dd>Os itens são posicionados para a borda do container de alinhamento do lado inicial do item, no eixo apropriado.</dd> + <dt><code>self-end</code></dt> + <dd>Os itens são posicionados para a borda do container de alinhamento do lado final do item, no eixo apropriado.</dd> +</dl> + +<dl> + <dt><code>baseline</code></dt> + <dt><code>first baseline</code></dt> + <dt><code>last baseline</code></dt> + <dd>Todos itens-flex são alinhados de tal forma que suas <a href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines" rel="external">baselines de container flex</a> estejam alinhados. O item com a maior distância entre o eixo de início de sua margem e sua baseline é juntado com eixo de início da linha.</dd> + <dt><code>stretch</code></dt> + <dd>Itens-flex são esticados de tal maneira que o tamanho da caixa de margem do item seja o mesmo da linha, respeitando as restrições de comprimento e altura.</dd> + <dt><code>safe</code></dt> + <dd>Usado em conjunto com uma palavra-chave de alinhamento. Se a palavra-chave escolhida signifique que o item transborde o alinhamento do container, causando assim perda de dados, o item é alinhado como estivesse no modo <code>start</code>.</dd> + <dt><code>unsafe</code></dt> + <dd>Usado em conjunto com uma palavra-chave de alinhamento. Independente dos tamanhos relativos do item, do alinhamento do container e caso overflow possa causar perda de dados, o valor de alinhamento estabelecido é mantido.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[4]">#container { + height:200px; + width: 240px; + align-items: center; /* Pode ser mudado na amostra ao vivo */ + background-color: #8c8c8c; +} + +.flex { + display: flex; + flex-wrap: wrap; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 50px); +} + +div > div { + box-sizing: border-box; + border: 2px solid #8c8c8c; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#item1 { + background-color: #8cffa0; + min-height: 30px; +} + +#item2 { + background-color: #a0c8ff; + min-height: 50px; +} + +#item3 { + background-color: #ffa08c; + min-height: 40px; +} + +#item4 { + background-color: #ffff8c; + min-height: 60px; +} + +#item5 { + background-color: #ff8cff; + min-height: 70px; +} + +#item6 { + background-color: #8cffff; + min-height: 50px; + font-size: 30px; +} + +select { + font-size: 16px; +} + +.row { + margin-top: 10px; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container" class="flex"> + <div id="item1">1</div> + <div id="item2">2</div> + <div id="item3">3</div> + <div id="item4">4</div> + <div id="item5">5</div> + <div id="item6">6</div> +</div> + +<div class="row"> + <label for="display">display: </label> + <select id="display"> + <option value="flex">flex</option> + <option value="grid">grid</option> + </select> +</div> + +<div class="row"> + <label for="values">align-items: </label> + <select id="values"> + <option value="normal">normal</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="center" selected>center</option> + <option value="baseline">baseline</option> + <option value="stretch">stretch</option> + + <option value="start">start</option> + <option value="end">end</option> + <option value="self-start">self-start</option> + <option value="self-end">self-end</option> + <option value="left">left</option> + <option value="right">right</option> + + <option value="first baseline">first baseline</option> + <option value="last baseline">last baseline</option> + + <option value="safe center">safe center</option> + <option value="unsafe center">unsafe center</option> + <option value="safe right">safe right</option> + <option value="unsafe right">unsafe right</option> + <option value="safe end">safe end</option> + <option value="unsafe end">unsafe end</option> + <option value="safe self-end">safe self-end</option> + <option value="unsafe self-end">unsafe self-end</option> + <option value="safe flex-end">safe flex-end</option> + <option value="unsafe flex-end">unsafe flex-end</option> + </select> +</div> +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var values = document.getElementById('values'); +var display = document.getElementById('display'); +var container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.alignItems = evt.target.value; +}); + +display.addEventListener('change', function (evt) { + container.className = evt.target.value; +}); +</pre> +</div> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", "260px", "290px")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Atualização para últimas definições de sintaxe.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2> + + + +<h3 id="Support_in_Flex_layout">Support in Flex layout</h3> + +<p>{{Compat("css.properties.align-items.flex_context")}}</p> + +<h3 id="Support_in_Grid_layout">Support in Grid layout</h3> + +<p>{{Compat("css.properties.align-items.grid_context")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> + <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> + <li>The {{cssxref("align-self")}} property</li> +</ul> + +<div>{{CSSRef}}</div> diff --git a/files/pt-br/web/css/align-self/index.html b/files/pt-br/web/css/align-self/index.html new file mode 100644 index 0000000000..a57605a13f --- /dev/null +++ b/files/pt-br/web/css/align-self/index.html @@ -0,0 +1,175 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - CSS Alinhamento Caixa + - CSS Caixas flexíveis + - CSS Propriedade + - Referencia +translation_of: Web/CSS/align-self +--- +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>align-self</code></strong> alinha itens-flex da linha flex alvo, sobreescrevendo o valor {{cssxref("align-items")}}. Se alguma dos eixos das margens do dado item está estabelecido como <code>auto</code>, então <code>align-self</code> é ignorado.</p> + +<div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div> + + + +<p>A propriedade não se aplica a caixas <em>block-level</em>, ou células de tabela.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css no-line-numbers">/* valores de palavras-chave */ +align-self: auto; +align-self: normal; + +/* Alinhamento de posicionamento */ +/* align-self não recebe valores left e right */ +align-self: center; /* Coloca o item em torno do centro */ +align-self: start; /* Coloca o item no início */ +align-self: end; /* Coloca o item no fim */ +align-self: self-start; /* Alinha o item flush no início */ +align-self: self-end; /* Alinha o item flush no fim */ +align-self: flex-start; /* Coloca o item flex no início */ +align-self: flex-end; /* Coloca o item flex no fim */ + +/* Alinhamento a partir da baseline */ +align-self: baseline; +align-self: first baseline; +align-self: last baseline; +align-self: stretch; /* Estica itens de tamanho 'auto' para encaixar no container */ + +/* Alinhamento com Oveflow */ +align-self: safe center; +align-self: unsafe center; + +/* Valores globais */ +align-self: inherit; +align-self: initial; +align-self: unset;</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>O valor {{cssxref("align-items")}} é originado do valor de seu pai.</dd> + <dt><code>normal</code></dt> + <dd>O efeito dessa palavra-chave depende do modo de layout em que nos encontramos: + <ul> + <li>Em layouts absolutamente posicionados, a palavra-chave se comporta como <code>start</code> em caixas absolutamente posicionadas <em>replaced</em>, e como <code>stretch</code> em caixas absolutamente posicionadas <em>all other</em>.</li> + <li>Em posição estática de layouts absolutamente posicionados, a palavra-chave se comporta como <code>stretch</code>.</li> + <li>Para itens-flex, a palavra-chave se comporta como <code>stretch</code>.</li> + <li>Para itens-grid, essa palavra-chave leva ao comportamento similar ao de <code>stretch</code>, com exceção de caixas com aspect ratio ou tamanhos intrínsecos onde se comportam como <code>start</code>.</li> + <li>A propriedade não se aplica para caixas <em>block-level</em>, e para células de tabela.</li> + </ul> + </dd> + <dt><code>self-start</code></dt> + <dd>Alinha os itens de maneira a mesclar a borda do alinhamento do container correspondente com o lado inicial do item no eixo.</dd> + <dt><code>self-end</code></dt> + <dd>Alinha os itens de maneira a mesclar a borda do alinhamento do container correspondente com o lado final do item no eixo.</dd> + <dt><code>flex-start</code></dt> + <dd>A borda da margem inicial do item flex é mesclada com a borda inicial da linha.</dd> + <dt><code>flex-end</code></dt> + <dd>A borda da margem fim do item flex é mesclada com a borda fim da linha.</dd> + <dt><code>center</code></dt> + <dd>A caixa-margem do item flex é centralizada ao longo da linha no eixo transversal. Se o tamanho do item é superior to container flex, então ele irá transbordar de maneira equivalente em ambas direções.</dd> + <dt><code>baseline<br> + first baseline</code><br> + <code>last baseline</code></dt> + <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br> + The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd> + <dt><code>stretch</code></dt> + <dd>Caso o tamanho combinado dos itens ao longo do eixo transversal seja menor do que o tamanho do container de alinhamento, e caso o tamanho do item segue o estilo <code>auto</code>, seu tamanho cresce igualmente (mas não proporcionalmente), enquanto que ainda respeitando as restrições impostas por {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou a funcionalidade equivalente), de maneira que o tamanho combinado de todos itens tamanho-<code>auto</code> preencha exatamente o container de alinhamento ao longo do eixo transversal.</dd> + <dt><code>safe</code></dt> + <dd>Caso o tamanho do item supere o alinhamento do container, o item é alinhado como se o modo de alinhamento fosse <code>start</code>.</dd> + <dt><code>unsafe</code></dt> + <dd>Independente dos tamanhos relativos do item e do alinhamento do container, o valor do alinhmento dado é mantido.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><section> + <div>Item #1</div> + <div>Item #2</div> + <div>Item #3</div> +</section></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">section { + display: flex; + align-items: center; + height: 120px; + background: beige; +} + +div { + height: 60px; + background: cyan; + margin: 5px; +} + +div:nth-child(3) { + align-self: flex-end; + background: pink; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Atualiza para últimas definições de sintaxe.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}</td> + <td>{{Spec2("CSS3 Flexbox")}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<h3 id="Suporte_em_Flex_layout">Suporte em Flex layout</h3> + +<p>{{Compat("css.properties.align-self.flex_context")}}</p> + +<h3 id="Suporte_em_Grid_layout">Suporte em Grid layout</h3> + +<p>{{Compat("css.properties.align-self.grid_context")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> + <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> + <li>The {{cssxref("align-items")}} property</li> +</ul> + +<div>{{CSSRef}}</div> diff --git a/files/pt-br/web/css/animation-delay/index.html b/files/pt-br/web/css/animation-delay/index.html new file mode 100644 index 0000000000..e8ed7db06d --- /dev/null +++ b/files/pt-br/web/css/animation-delay/index.html @@ -0,0 +1,145 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - Animação +translation_of: Web/CSS/animation-delay +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>animation-delay</code></strong> especifíca quando uma animação deve começar. Você pode começar a animação no futuro, imediatamente ou desde o início, ou imediatamente e parcialmente através do ciclo de animação.</p> + +<pre class="brush:css no-line-numbers">/* Uma animação */ +animation-delay: 3s; +animation-delay: 0s; +animation-delay: -1500ms; + +/* Várias animações */ +animation-delay: 2.1s, 480ms; +</pre> + +<p>Muitas vezes é conveniente usar a propriedade abreviada {{cssxref("animation")}} para definir todas as propriedades de animação de uma só vez. </p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>{{cssxref("<time>")}}</code></dt> + <dd>O deslocamento do tempo, a partir do momento em que a animação é aplicada ao elemento, no qual a animação deve começar. Isso pode ser especificado em segundos (<code>s</code>) ou milesegundos or milliseconds (<code>ms</code>). A unidade é necessaria.</dd> + <dd>Um valor positivo indica que a animação deve começar após o período de especificação ter decorrido. O valor de <code>0s</code>, que é o padrão, incida que a animação deve começar desde que foi aplicada.</dd> + <dd> + <p>Um valor negativo faz com que a animação comece imediatamente, mas parcialmente através do seu ciclo. Por exemplo, se você específicar <code>-1s</code> como tempo da animation-delay , a animação vai começar imediatamente, mas começará 1 segundo na sequência de animação. Se você específicar um valor negativo para a animation-delay, mas o valor inicial é implícito, o valor inicial é retirado do momento em que a animação é aplicada ao elemento.</p> + </dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: Quando você especifica vários valores separados por vírgula em uma propriedade <code>animation-*</code> , eles serão atribuídos às animações especificadas na propriedade {{cssxref("animation-name")}} em diferentes modos, dependendo de quantos existam. Para mais informações veja <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>.</p> +</div> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS animations</a> para exemplos.</p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com os browsers</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(43.0)}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td> + <td>10</td> + <td>12{{property_prefix("-o")}}<br> + 12.10</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>12{{property_prefix("-o")}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Além do suporte não prefixado, Gecko 44.0 {{geckoRelease("44.0")}} adicionou um suporte para uma versão prefixada de <code>-webkit-</code> por razões de compatibilidade na Web por trás da preferência <code>layout.css.prefixes.webkit</code>, padronizando para <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} os padrões de preferência são <code>true</code>.</p> + +<h3 id="Quantum_CSS_notas">Quantum CSS notas</h3> + +<ul> + <li>Gecko tem um bug em que, quando você anima um elemento fora da tela na tela, mas especifica um atraso, Gecko não repete em algumas plataformas, e.g. Windows ({{bug(1383239)}}). Isso foi corrigido no Firefox's novo motor CSS paralelo (também conhecido como <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planejado para lançamento no Firefox 57).</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/pt-br/web/css/animation-fill-mode/index.html b/files/pt-br/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..8e52a69d44 --- /dev/null +++ b/files/pt-br/web/css/animation-fill-mode/index.html @@ -0,0 +1,183 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +translation_of: Web/CSS/animation-fill-mode +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>animation-fill-mode</code></strong> define como uma animação <a href="https://wiki.developer.mozilla.org/en/CSS">CSS</a> aplica estilos ao seu destino antes e depois de sua execução.</p> + +<div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div> + + + +<p>It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Single animation */ +animation-fill-mode: none; +animation-fill-mode: forwards; +animation-fill-mode: backwards; +animation-fill-mode: both; + +/* Multiple animations */ +animation-fill-mode: none, backwards; +animation-fill-mode: both, forwards, none; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>none</code></dt> + <dd>A animação não aplicará nenhum estilo ao destino quando não estiver em execução. Em vez disso, o elemento será exibido usando quaisquer outras regras CSS aplicadas a ele. Este é o valor padrão.</dd> + <dt><code>forwards</code></dt> + <dd>The target will retain the computed values set by the last <a href="/en-US/docs/CSS/@keyframes">keyframe</a> encountered during execution. The last keyframe depends on the value of {{cssxref("animation-direction")}} and {{cssxref("animation-iteration-count")}}: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>animation-direction</code></th> + <th scope="col"><code>animation-iteration-count</code></th> + <th scope="col">last keyframe encountered</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>normal</code></td> + <td>even or odd</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>reverse</code></td> + <td>even or odd</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>alternate</code></td> + <td>even</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>alternate</code></td> + <td>odd</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>even</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>odd</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + </tbody> + </table> + </dd> + <dt><code>backwards</code></dt> + <dd>The animation will apply the values defined in the first relevant <a href="/en-US/docs/CSS/@keyframes">keyframe</a> as soon as it is applied to the target, and retain this during the {{cssxref("animation-delay")}} period. The first relevant keyframe depends on the value of {{cssxref("animation-direction")}}: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>animation-direction</code></th> + <th scope="col">first relevant keyframe</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>normal</code> or <code>alternate</code></td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>reverse</code> or <code>alternate-reverse</code></td> + <td><code>100%</code> or <code>to</code></td> + </tr> + </tbody> + </table> + </dd> + <dt><code>both</code></dt> + <dd>The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.</dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: When you specify multiple comma-separated values on an <code>animation-*</code> property, they will be assigned to the animations specified in the {{cssxref("animation-name")}} property in different ways depending on how many there are. For more information, see <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="Example">Example</h2> + +<p>You can see the effect of <code>animation-fill-mode</code> in the following example. It demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default).</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Move your mouse over the gray box!</p> +<div class="demo"> + <div class="growsandstays">This grows and stays big.</div> + <div class="grows">This just grows.</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.demo { + border-top: 100px solid #ccc; + height: 300px; +} + +@keyframes grow { + 0% { font-size: 0; } + 100% { font-size: 40px; } +} + +.demo:hover .grows { + animation-name: grow; + animation-duration: 3s; +} + +.demo:hover .growsandstays { + animation-name: grow; + animation-duration: 3s; + animation-fill-mode: forwards; +}</pre> + +<p>{{EmbedLiveSample('Example',700,300)}}</p> + +<p>See <a href="/en/CSS/CSS_animations">CSS animations</a> for more examples.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.animation-fill-mode")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/pt-br/web/css/animation/index.html b/files/pt-br/web/css/animation/index.html new file mode 100644 index 0000000000..5c6ba64222 --- /dev/null +++ b/files/pt-br/web/css/animation/index.html @@ -0,0 +1,353 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - Animações + - Animações CSS + - CSS + - CSS Animations + - CSS3 + - Propriedade CSS + - Referencia + - Web +translation_of: Web/CSS/animation +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS abreviada <code><strong>animation</strong></code>, aplica uma animação entre estilos. É uma abreviação de {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, e {{cssxref("animation-play-state")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div> + + + +<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay | +iteration-count | direction | fill-mode | play-state | name */ +animation: 3s ease-in 1s 2 reverse both paused slidein; + +/* @keyframes name | duration | timing-function | delay */ +animation: 3s linear 1s slidein; + +/* @keyframes name | duration */ +animation: slidein 3s; +</pre> + +<div class="hidden" id="animation"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="note"> + Given the following animation: + <pre>@keyframes slidein { + from { transform: scaleX(0); } + to { transform: scaleX(1); } +}</pre> + </div> + <div class="row"> + <div class="cell"> + <button class="play" title="PLAY"></button> + </div> + <div class="cell flx"> + <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> + <div class="animation a1"></div> + </div> + </div> + <div class="row"> + <div class="cell"> + <button class="pause" title="PAUSE"></button> + </div> + <div class="cell flx"> + <div class="overlay">animation: 3s linear 1s slidein;</div> + <div class="animation a2"></div> + </div> + </div> + <div class="row"> + <div class="cell"> + <button class="pause" title="PAUSE"></button> + </div> + <div class="cell flx"> + <div class="overlay">animation: 3s slidein;</div> + <div class="animation a3"></div> + </div> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +pre { margin-bottom: 0; } +svg { width: 1.5em; height: 1.5em; } + +button { + width: 27px; + height: 27px; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + border-radius: 3px; + cursor: pointer; +} + +button.play { + background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play'); +} + +button.pause { + background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause'); +} + +button.restart { + background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart'); +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: 0; + background-color: #FFF; + overflow: hidden; + text-align: left; +} + +.flx { + flex: 1 0; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em; + font: .8em sans-serif; + text-align: left; + flex: none; +} + +.overlay { padding: .5em; } + +@keyframes slidein { + from { transform: scaleX(0); } + to { transform: scaleX(1); } +} + +.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } +.a2 { animation: 3s linear 1s slidein; } +.a3 { animation: 3s slidein; } + +.animation { + background: #3F87A6; + width: 100%; + height: calc(100% - 1.5em); + transform-origin: left center; +}</pre> + +<pre class="brush: js">window.addEventListener('load', function () { + var ANIMATION = Array.from(document.querySelectorAll('.animation')); + var BUTTON = Array.from(document.querySelectorAll('button')); + + function toggleButton (btn, type) { + btn.classList.remove('play', 'pause', 'restart'); + btn.classList.add(type); + btn.title = type.toUpperCase(type); + } + + function playPause (i) { + var btn = BUTTON[i]; + var anim = ANIMATION[i]; + + if (btn.classList.contains('play')) { + anim.style.animationPlayState = 'running'; + toggleButton(btn, 'pause'); + } else if (btn.classList.contains('pause')) { + anim.style.animationPlayState = 'paused'; + toggleButton(btn, 'play'); + } else { + anim.classList.remove('a' + (i + 1)); + setTimeout(function () { + toggleButton(btn, i === 0 ? 'play' : 'pause'); + anim.style.animationPlayState = ''; + anim.classList.add('a' + (i + 1)); + }, 100) + } + } + + ANIMATION.forEach(function (node, index) { + node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause'); }); + node.addEventListener('animationend', function () { toggleButton(BUTTON[index], 'restart'); }); + }); + + BUTTON.forEach(function (btn, index) { + btn.addEventListener('click', function () { playPause(index); }); + }); +})</pre> +</div> + +<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p> + +<p>A <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions#Which_CSS_properties_are_animatable">description of which properties are animatable</a> is available; it's worth noting that this description is also valid for <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>A propriedade <code>animation</code> é especificada como uma ou mais animações, separadas por commas.</p> + +<p>Cada animação individual é especificada como:</p> + +<ul> + <li>zero or one occurrences of the following values: + <ul> + <li>{{cssxref("<single-transition-timing-function>")}}</li> + <li>{{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}}</li> + <li>{{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}}</li> + <li>{{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}}</li> + <li>{{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}}</li> + </ul> + </li> + <li>an optional name for the animation, which may be <code>none</code>, a {{cssxref("<custom-ident>")}}, or a {{cssxref("<string>")}}</li> + <li>zero, one, or two {{cssxref("<time>")}} values</li> +</ul> + +<p>A ondem dos valores definidos dentro de cada animação é importante: o primeiro valor pode ser analisado com um {{cssxref("<time>")}} é atribuido para o {{cssxref("animation-duration")}}, and the second one is assigned to {{cssxref("animation-delay")}}.</p> + +<p>The order within each animation definition is also important for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsed, keywords that are valid for properties other than {{cssxref("animation-name")}}, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code id="<single-animation-iteration-count>"><single-animation-iteration-count></code></dt> + <dd>The number of times the animation is played. The value must be one of those available in {{cssxref("animation-iteration-count")}}.</dd> + <dt id="<single-animation-direction>"><code><single-animation-direction></code></dt> + <dd>The direction in which the animation is played. The value must be one of those available in {{cssxref("animation-direction")}}.</dd> + <dt id="<single-animation-fill-mode>"><code><single-animation-fill-mode></code></dt> + <dd>Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in {{cssxref("animation-fill-mode")}}.</dd> + <dt id="<single-animation-play-state>"><code><single-animation-play-state></code></dt> + <dd>Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Cylon_Eye">Cylon Eye</h3> + +<pre class="brush: html"><div class="view_port"> + <div class="polling_message"> + Listening for dispatches + </div> + <div class="cylon_eye"></div> +</div> +</pre> + +<pre class="brush: css">.polling_message { + color: white; + float: left; + margin-right: 2%; +} + +.view_port { + background-color: black; + height: 25px; + width: 100%; + overflow: hidden; +} + +.cylon_eye { + background-color: red; + background-image: linear-gradient(to right, + rgba(0, 0, 0, .9) 25%, + rgba(0, 0, 0, .1) 50%, + rgba(0, 0, 0, .9) 75%); + color: white; + height: 100%; + width: 20%; + + -webkit-animation: 4s linear 0s infinite alternate move_eye; + animation: 4s linear 0s infinite alternate move_eye; +} + +@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } + @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } +</pre> + +<p>{{EmbedLiveSample('Cylon_Eye')}}</p> + +<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Examples">Using CSS animations</a> for additional examples.</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> + +<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> + +<ul> + <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article</a></li> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> + <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation', 'animation')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.animation")}}</p> + +<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> + +<ul> + <li>Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows ({{bug(1383239)}}). This has been fixed in Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57).</li> + <li>Another Gecko bug means that {{htmlelement("details")}} elements can't be made open by default using the <code>open</code> attribute if they have an animation active on them ({{bug(1382124)}}). Quantum CSS fixes this.</li> + <li>A further bug means that animations using em units are not affected by changes to the {{cssxref("font-size")}} on the animated element's parent, whereas they should be ({{bug(1254424)}}). Quantum CSS fixes this.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/pt-br/web/css/at-rule/index.html b/files/pt-br/web/css/at-rule/index.html new file mode 100644 index 0000000000..f4ecae9a84 --- /dev/null +++ b/files/pt-br/web/css/at-rule/index.html @@ -0,0 +1,33 @@ +--- +title: Regra At +slug: Web/CSS/At-rule +translation_of: Web/CSS/At-rule +--- +<p>Uma <strong>regra at (at-rule)</strong> é uma <a href="/en/CSS/Syntax#CSS_statements" title="en/CSS/Syntax#CSS_statements">CSS statement</a> iniciando com um caractere arroba, '<code>@</code>' (<code>U+0040 ARROBA COMERCIAL</code>), seguido por um indetificador e terminando no primeiro ponto e vírgula', <code>;</code>' (<code>U+003B SEMICOLON</code>), fora de um <a href="/en/CSS/Syntax#CSS_declarations" title="en/CSS/Syntax#CSS_declarations">bloco</a>, ou no fim do primeiro <a href="/en/CSS/Syntax#CSS_declarations" title="en/CSS/Syntax#CSS_declarations">Bloco CSS</a>.</p> +<p>Existem muitas regras at, criadas por seu identificador, cada um com uma sintaxe diferente:</p> +<ul> + <li>{{ cssxref("@charset") }}, definindo o conjunto de caracteres (codificação) usado pela folha de estilos.</li> + <li>{{ cssxref("@import") }}, informando o motor CSS para incluir uma folha de estilos externa.</li> + <li>{{ cssxref("@namespace") }}, informando ao motor CSS que todo o conteúdo deve ser considerado prefixado com um namespace XML.</li> + <li>Regras at aninhadas, um subconjunto de regras aninhadas que pode ser usado não somente como uma regra de uma folha de estilos, mas também dentro de um grupo de regras condicional: + <ul> + <li>{{ cssxref("@media") }}, um grupo de regras condicional que é aplicado ao conteúdo caso o dispositivo de exibição cumpra com a condição de mídia definida.</li> + <li>{{ cssxref("@font-face") }}, descrevendo o aspecto de uma fonte externa que deve ser baixada. {{ experimental_inline() }}</li> + <li>{{ cssxref("@document") }}, um grupo de regras condicional que é aplicado ao conteúdo caso o documento cumpra com os critério definidos. {{ experimental_inline() }}</li> + <li>{{ cssxref("@supports") }}, um grupo de regras condicional que é aplicado caso o navegador cumpra com os critérios definidos. {{ experimental_inline() }}</li> + </ul> + </li> +</ul> +<h2 id="Grupos_condicionais_de_regras">Grupos condicionais de regras</h2> +<p>Assim como valores de propriedades, cada regra at possui uma sintaxe diferente; várias delas, entretanto, podem ser agrupadas em uma categoria especial, os <strong>grupos condicionais de regras</strong>. Essas regras compartilham uma sintaxe em comum. Cada uma delas inclui <em>regras aninhadas</em>, que são <em>conjuntos de regras</em> ou <em>regras at aninhadas</em>. Todas elas transmitem um significado semântico em comum: todas indicam uma condição (de um tipo diferente) para que as regras sejam aplicadas.</p> +<p>Grupos condicionais de regras são definidos pelo CSS3 e são:</p> +<ul> + <li>{{ cssxref("@media") }},</li> + <li>{{ cssxref("@document") }},</li> + <li>{{ cssxref("@supports") }}.</li> +</ul> +<p>Cada uma delas sendo também uma regra aninhada, pode haver uma quantidade indeterminada de aninhamentos.</p> +<div class="noinclude"> + <p>{{ languages( { "ja": "ja/CSS/At-rule" } ) }}</p> +</div> +<p> </p> diff --git a/files/pt-br/web/css/attr()/index.html b/files/pt-br/web/css/attr()/index.html new file mode 100644 index 0000000000..bbcfd0dd4c --- /dev/null +++ b/files/pt-br/web/css/attr()/index.html @@ -0,0 +1,217 @@ +--- +title: attr +slug: Web/CSS/attr() +tags: + - CSS + - Esquema + - Função CSS + - Internet + - Laioute + - Rede + - Referencia + - Web +translation_of: Web/CSS/attr() +--- +<div>{{CSSRef}}</div> + +<p>A função <strong><code>attr()</code></strong> do <a href="/en-US/docs/Web/CSS">CSS</a> é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Uso Simples */ +attr(data-count); +attr(title); + +/* Com o tipo */ +attr(src url); +attr(data-count number); +attr(data-width px); + +/* Com fallback */ +attr(data-count number, 0); +attr(src url, ''); +attr(data-width px, inherit); +attr(data-something, 'default'); +</pre> + +<div class="note"> +<p><strong>Nota:</strong> A função <code>attr()</code> pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam {{cssxref("content")}} é experimental.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>nome-do-atributo</code></dt> + <dd>É o nome do atributo HTML do elemento referenciado no CSS.</dd> + <dt><code><tipo-ou-unidade></code> {{experimental_inline}}</dt> + <dd>É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de <code><tipo-ou-unidade></code> como um valor para determinado atributo for inválido, a expressão <code>attr()</code> será inválida também. Se omitida, o padrão será <code>string</code>. A lista de valores válidos é: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Palavra-chave</th> + <th scope="col">Tipo Associado</th> + <th scope="col">Comentário</th> + <th scope="col">Valor Padrão</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>string</code></td> + <td>{{cssxref("<string>")}}</td> + <td>O valor do atributo é tratado como um CSS {{cssxref("<string>")}}. NÃO será reparado, e em particular os caracteres usados .</td> + <td>An empty string.</td> + </tr> + <tr> + <td><code>cor</code> {{experimental_inline}}</td> + <td>{{cssxref("<color>")}}</td> + <td>O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor {{cssxref("<string>")}} CSS válido.<br> + Os espaços do lead e trail são retirados.</td> + <td><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">corAtual</span></font></td> + </tr> + <tr> + <td><code>url</code> {{experimental_inline}}</td> + <td>{{cssxref("<url>")}}</td> + <td>The attribute value is parsed as a string that is used inside a CSS <code>url()</code>function.<br> + Relative URL are resolved relatively to the original document, not relatively to the style sheet.<br> + Leading and trailing spaces are stripped.</td> + <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td> + </tr> + <tr> + <td><code>integer</code> {{experimental_inline}}</td> + <td>{{cssxref("<integer>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>number</code> {{experimental_inline}}</td> + <td>{{cssxref("<number>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>length</code> {{experimental_inline}}</td> + <td>{{cssxref("<length>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br> + If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td> + <td>{{cssxref("<length>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>angle</code> {{experimental_inline}}</td> + <td>{{cssxref("<angle>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td> + <td>{{cssxref("<angle>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>time</code> {{experimental_inline}}</td> + <td>{{cssxref("<time>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td> + <td>{{cssxref("<time>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>frequency</code> {{experimental_inline}}</td> + <td>{{cssxref("<frequency>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td> + <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td> + <td>{{cssxref("<frequency>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>%</code> {{experimental_inline}}</td> + <td>{{cssxref("<percentage>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + </tbody> + </table> + </dd> + <dt><code><fallback></code> {{experimental_inline}}</dt> + <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code><fallback></code> value must be of the type defined by <code><type-or-unit></code>. If not set, CSS will use the default value defined for each <code><type-or-unit></code>.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p data-foo="hello">world</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">p::before { + content: attr(data-foo) " "; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> + +<div class="hidden"> +<p>A tabela de compatibilidade nesta página é gerada de dados estruturados. Se você quiser contribuir para com os dados, por favor, veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um <em>pull request</em>.</p> +</div> + +<p>{{Compat("css.types.attr")}}</p> diff --git a/files/pt-br/web/css/backdrop-filter/index.html b/files/pt-br/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..f693e035d4 --- /dev/null +++ b/files/pt-br/web/css/backdrop-filter/index.html @@ -0,0 +1,140 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - Filtros + - efeitos + - iOS + - plano de fundo +translation_of: Web/CSS/backdrop-filter +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>backdrop-filter</code></strong> permite que você aplique efeitos gráficos, como desfoque ou mudança de cores, na área ao fundo de um elemento. Como ela se aplica a tudo que fica <em>atrás</em> do elemento, é preciso deixá-lo (ou o seu plando de fundo) ao menos parcialmente transparente para poder ver o efeito em ação.</p> + +<pre class="brush: css no-line-numbers">/* Valor de palavra-chave */ +backdrop-filter: none; + +/* Filtro com URL para SVG */ +backdrop-filter: url(commonfilters.svg#filter); + +/* Valores <filter-function> */ +backdrop-filter: blur(2px); +backdrop-filter: brightness(60%); +backdrop-filter: contrast(40%); +backdrop-filter: drop-shadow(4px 4px 10px blue); +backdrop-filter: grayscale(30%); +backdrop-filter: hue-rotate(120deg); +backdrop-filter: invert(70%); +backdrop-filter: opacity(20%); +backdrop-filter: sepia(90%); +backdrop-filter: saturate(80%); + +/* Vários filtros */ +backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); + +/* Valores globais */ +backdrop-filter: inherit; +backdrop-filter: initial; +backdrop-filter: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Nenhum filtro é aplicado ao plano de fundo.</dd> + <dt><code><filter-function-list></code></dt> + <dd>Uma lista de {{cssxref("<filter-function>")}}s separadas por espaços ou um <a href="/en-US/docs/Web/SVG/Element/filter">filtro SVG</a> que será aplicado ao plano de fundo.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.box { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 5px; + font-family: sans-serif; + text-align: center; + line-height: 1; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + max-width: 50%; + max-height: 50%; + padding: 20px 40px; +} + +html, +body { + height: 100%; + width: 100%; +} + +body { + background-image: url('https://lorempixel.com/400/200/'); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.container { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 100%; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="container"> + <div class="box"> + <p>backdrop-filter: blur(10px)</p> + </div> +</div> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", 600, 400)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td> + <td>{{Spec2('Filters 2.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2> + + + +<p>{{Compat("css.properties.backdrop-filter")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("filter")}}</li> + <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Criando efeitos de transparência estilo iOS em CSS com backdrop-filter</a></li> +</ul> diff --git a/files/pt-br/web/css/backface-visibility/index.html b/files/pt-br/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..7e8fa192e3 --- /dev/null +++ b/files/pt-br/web/css/backface-visibility/index.html @@ -0,0 +1,257 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +translation_of: Web/CSS/backface-visibility +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>backface-visibility </code></strong>determina se deve ser exibido ou não a parte de trás do elemento para o usuário. A parte de trás de um elemento é sempre um fundo transparente, deixando, quando visível, uma imagem espelho da parte da frente a ser exibida.</p> + +<p>Há casos quando nós não queremos que a parte da frente de um elemento seja visível pela parte de trás, quando estamos fazendo um efeito de giro de cartões (colocando dois elementos lado a lado).</p> + +<p>Esta propriedade não possui nenhum efeito em transformações 2D quando não há nenhum tipo de perspectiva.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css">backface-visibility: visible; +backface-visibility: hidden; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Esta propriedade tem dois valores (exclusivos):</p> + +<ul> + <li><code>visible</code> significa que a parte de trás estará visível, permitindo que a parte da frente seja exibida como espelho</li> + <li><code>hidden </code>significa que a parte de trás não é visível, sendo então escondida pela parte da frente do elemento</li> +</ul> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<dl> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Cubos_com_faces_transparentes">Cubos com faces transparentes</h3> + +<h4 id="Conteúdo_HTML">Conteúdo HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <th><code>backface-visibility: visible;</code></th> + <th><code>backface-visibility: hidden;</code></th> + </tr> + <tr> + <td> + <div class="container"> + <div class="cube showbf"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + <p> Todas as faces são transparentes e há três faces atrás que estão visíveis através das faces da frente.</p> + </td> + <td> + <div class="container"> + <div class="cube hidebf"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + <p>Nenhuma face é opaca, mas as três faces de trás estarão sempre escondidas agora.</p> + </td> + </tr> + </tbody> +</table></pre> + +<h4 id="Conteúdo_CSS">Conteúdo CSS</h4> + +<pre class="brush: css">/* Shorthand classes that will show or hide the three back faces of the "cube" */ +.hidebf div { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} + +.showbf div { + backface-visibility: visible; + -webkit-backface-visibility: visible; +} + +/* Define the container div, the cube div, and a generic face */ +.container { + width: 150px; + height: 150px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + perspective: 550px; + perspective-origin: 150% 150%; + transform-style: preserve-3d; + -webkit-perspective: 300px; + -webkit-perspective-origin: 150% 150%; + -webkit-transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* Define each face based on direction */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); + -webkit-transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); + -webkit-transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); + -webkit-transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); + -webkit-transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); + -webkit-transform: rotateX(90deg) translateZ(50px) +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); + -webkit-transform: rotateX(-90deg) translateZ(50px); +} + +/* Make the table a little nicer */ +th, p, td { + background-color: #EEEEEE; + margin: 0px; + padding: 6px; + font-family: sans-serif; + text-align: left; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Cubos_com_faces_transparentes', 620, 460)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>12{{property_prefix('-webkit')}}</td> + <td>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br> + {{CompatGeckoDesktop("16")}}</td> + <td>10</td> + <td>15{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>3.0{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br> + {{CompatGeckoMobile("16")}}</td> + <td>8.1<br> + <a href="https://msdn.microsoft.com/en-us/library/ie/hh772262(v=vs.85).aspx">11</a>{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Usando transformações CSS</a></li> +</ul> diff --git a/files/pt-br/web/css/background-attachment/index.html b/files/pt-br/web/css/background-attachment/index.html new file mode 100644 index 0000000000..977f59e4e7 --- /dev/null +++ b/files/pt-br/web/css/background-attachment/index.html @@ -0,0 +1,214 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +translation_of: Web/CSS/background-attachment +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>Se um {{cssxref("background-image")}} é especificado, a propriedade <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>background-attachment</code></strong> determina se aquela posição da imagem é fixa com o viewport, ou se irá rolar juntamente com o seu bloco.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush: css">background-attachment: scroll; +background-attachment: fixed; +background-attachment: local; + +background-attachment: inherit; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>fixed</code></dt> + <dd>Essa chave significa que o background é fixo em relação ao viewport. Mesmo que um elemento tenha um mecanismo de rolar, o background ‘fixed’ não movimenta com o elemento.</dd> + <dt><code>local</code></dt> + <dd>Essa chave significa que o background é fixo em relação ao conteúdo do elemento: ise ele tem um mecanismo de rolar, o background rola com o conteúdo do elemento, e a área pintada e o posicionamento do background são relativos à área de rolagem do elemento ao invés da borda de fronteira deles.</dd> + <dt><code>scroll</code></dt> + <dd>Essa chave significa que o background é fixo em relação ao elemento em si e não rola com seu conteúdo. (É efetivamente ligado à borda do elemento.)</dd> + <dt> + <h3 id="Formal_syntax">Formal syntax</h3> + </dt> +</dl> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Exemplo_simpes">Exemplo simpes</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css; highlight:[3];">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. +</p></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Simple_example")}}</p> + +<h3 id="Suporte_de_múltiplas_imagem_de_background">Suporte de múltiplas imagem de background</h3> + +<p>Essa propriedade suporta múltiplas imagens de background. Você pode especificar <code><attachment></code> para cada background, separado por vírgulas. Cada imagem é combinada com o correspondente tipo de anexo, do primeiro especificado ao último.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css; highlight:[3];">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-attachment: fixed, scroll; + background-repeat: no-repeat, repeat-y; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. + + Suddenly she came upon a little three-legged table, all made of solid + glass; there was nothing on it except a tiny golden key, and Alice's + first thought was that it might belong to one of the doors of the hall; + but, alas! either the locks were too large, or the key was too small, + but at any rate it would not open any of them. However, on the second + time round, she came upon a low curtain she had not noticed before, and + behind it was a little door about fifteen inches high: she tried the + little golden key in the lock, and to her great delight it fitted! +</p></pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>The shorthand property has been extended to support multiple backgrounds and the <code>local</code> value.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Mudança não significativa.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Mudança não significativa</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + <tr> + <td>Multiple backgrounds</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>1.3</td> + </tr> + <tr> + <td><code>local</code></td> + <td>4.0</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + <td>3.2</td> + </tr> + <tr> + <td>Multiple backgrounds</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + <td>3.2</td> + </tr> + <tr> + <td><code>local</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Multiple backgrounds</a></li> +</ul> diff --git a/files/pt-br/web/css/background-blend-mode/index.html b/files/pt-br/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..a75c561838 --- /dev/null +++ b/files/pt-br/web/css/background-blend-mode/index.html @@ -0,0 +1,153 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - CSS + - Composição de CSS + - Propriedade CSS +translation_of: Web/CSS/background-blend-mode +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>background-blend-mode</code></strong> descreve como as imagens de fundo do elemento devem se misturar entre si e a cor de fundo do elemento.</p> + +<pre class="brush:css no-line-numbers">/* Um valor */ +background-blend-mode: normal; + +/* Dois valores, um por fundo */ +background-blend-mode: darken, luminosity; + +/* Valores globais */ +background-blend-mode: initial; +background-blend-mode: inherit; +background-blend-mode: unset; +</pre> + +<p>Os modos de mistura devem ser definidos na mesma ordem que a propriedade CSS {{cssxref ("background-image")}}. Se os comprimentos da lista dos modos de mistura e das imagens de fundo não forem iguais, ele será repetido e/ou truncado até que os comprimentos correspondam.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><blend-mode></code></dt> + <dd>É um {{cssxref ("<blend-mode>")}} denotando o modo de mesclagem a ser aplicado. Pode haver vários valores, separados por vírgulas.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html hidden"><div id="div"></div> +<select id="select"> + <option>normal</option> + <option>multiply</option> + <option selected>screen</option> + <option>overlay</option> + <option>darken</option> + <option>lighten</option> + <option>color-dodge</option> + <option>color-burn</option> + <option>hard-light</option> + <option>soft-light</option> + <option>difference</option> + <option>exclusion</option> + <option>hue</option> + <option>saturation</option> + <option>color</option> + <option>luminosity</option> +</select></pre> + +<pre class="brush: css hidden">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: screen; +}</pre> + +<pre class="brush: js hidden">document.getElementById("select").onchange = function(event) { + document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; +} +console.log(document.getElementById('div'));</pre> + +<p>{{ EmbedLiveSample('Examples', "330", "330") }}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>35</td> + <td>{{CompatGeckoDesktop('30.0')}}</td> + <td>{{CompatNo()}}</td> + <td>22</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile('30.0')}}</td> + <td>{{CompatNo()}}</td> + <td>22</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("mix-blend-mode")}}</li> +</ul> diff --git a/files/pt-br/web/css/background-clip/index.html b/files/pt-br/web/css/background-clip/index.html new file mode 100644 index 0000000000..317d5080c2 --- /dev/null +++ b/files/pt-br/web/css/background-clip/index.html @@ -0,0 +1,247 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS clip + - cor de fundo +translation_of: Web/CSS/background-clip +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS<strong><code> background-clip</code></strong> especifica se o fundo de um elemento, seja cor ou imagem, se extende debaixo de sua área de borda, preenchimento ou conteúdo.</p> + +<p>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</p> + + + +<p>Se o elemento não possuir as propriedades {{cssxref("background-image")}} ou {{cssxref("background-color")}} definidas, esta propriedade só terá um efeito visual quando a borda tiver regiões transparentes ou regiões parcialmente opacas (devido ao {{cssxref("border-style")}} ou {{cssxref("border-image")}}); caso contrário a borda encobrirá a diferença.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Valores de palavra-chave */</span> +<span class="property token">background-clip</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="property token">background-clip</span><span class="punctuation token">:</span> padding-box<span class="punctuation token">;</span> +<span class="property token">background-clip</span><span class="punctuation token">:</span> content-box<span class="punctuation token">;</span> +<span class="property token">background-clip</span><span class="punctuation token">:</span> text<span class="punctuation token">;</span> + +<span class="comment token">/* Valores globais */</span> +<span class="property token">background-clip</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="property token">background-clip</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span> +<span class="property token">background-clip</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>border-box</code></dt> + <dd>O fundo se extende até fora da fronteira da borda (mas por baixo da borda na ordenação-z).</dd> + <dt><code>padding-box</code></dt> + <dd>Nenhum fundo é desenhado abaixo da borda (o fundo se extende até a borda externa do preenchimento).</dd> + <dt><code>content-box</code></dt> + <dd>O fundo é desenhado dentro (cortado) a caixa de conteúdo.</dd> + <dt><code id="text">text</code> {{experimental_inline}}</dt> + <dd>O fundo é desenhado dentro (cortado) do texto aparente.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Using_border-box" name="Using_border-box">Usando <code>border-box</code></h3> + +<h4 id="Conteúdo_HTML">Conteúdo HTML</h4> + +<pre class="brush: html"><p>O fundo se extende atrás da borda.</p></pre> + +<h4 id="Conteúdo_CSS">Conteúdo CSS</h4> + +<pre class="brush: css">p { + + border: .8em darkviolet; + border-style: dotted double; + margin: 1em 0; + padding: 1.4em; + background: linear-gradient(60deg, red, yellow, red, yellow, red); + font: 900 1.2em sans-serif; + text-decoration: underline; + background-clip: border-box; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Using_border-box', 540, 200)}}</p> + +<h3 id="Using_padding-box" name="Using_padding-box">Usando <code>padding-box</code></h3> + +<h4 id="Conteúdo_HTML_2">Conteúdo HTML</h4> + +<pre class="brush: html"><p>O fundo se extende até dentro da fronteira da borda.</p></pre> + +<h4 id="Conteúdo_CSS_2">Conteúdo CSS</h4> + +<pre class="brush: css">p { + + border: .8em darkviolet; + border-style: dotted double; + margin: 1em 0; + padding: 1.4em; + background: linear-gradient(60deg, red, yellow, red, yellow, red); + font: 900 1.2em sans-serif; + text-decoration: underline; + background-clip: padding-box; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Using_padding-box', 540, 200)}}</p> + +<h3 id="Using_content-box" name="Using_content-box">Usando <code>content-box</code></h3> + +<h4 id="Conteúdo_HTML_3">Conteúdo HTML</h4> + +<pre class="brush: html"><p>O fundo se extende somente até o limite da caixa de conteúdo.</p></pre> + +<h4 id="Conteúdo_CSS_3">Conteúdo CSS</h4> + +<pre class="brush: css">p { + border: .8em darkviolet; + border-style: dotted double; + margin: 1em 0; + padding: 1.4em; + background: linear-gradient(60deg, red, yellow, red, yellow, red); + font: 900 1.2em sans-serif; + text-decoration: underline; + background-clip: content-box; +}</pre> + +<h4 id="Resultado_3">Resultado</h4> + +<p>{{EmbedLiveSample('Using_content-box', 540, 200)}}</p> + +<h3 id="Using_text" name="Using_text">Usando <code>text</code></h3> + +<h4 id="Conteúdo_HTML_4">Conteúdo HTML</h4> + +<pre class="brush: html"><p>O fundo se extende dentro do texto.</p></pre> + +<h4 id="Conteúdo_CSS_4">Conteúdo CSS</h4> + +<pre class="brush: css">p { + border: .8em darkviolet; + border-style: dotted double; + margin: 1em 0; + padding: 1.4em; + background: linear-gradient(60deg, red, yellow, red, yellow, red); + font: 900 1.2em sans-serif; + text-decoration: underline; + + /* Note a necessidade de adicionar trânsparência ao texto*/ + background-clip: text; + -webkit-background-clip: text; + color: rgba(0,0,0,.2); +}</pre> + +<h4 id="Resultado_4">Resultado</h4> + +<p>{{EmbedLiveSample('Using_text', 540, 200)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0 [3]</td> + <td>{{CompatGeckoDesktop("2.0")}} [1]</td> + <td>9.0 [2]</td> + <td>10.5</td> + <td>3.0 (522) [3]</td> + </tr> + <tr> + <td><code>content-box</code></td> + <td>1.0 [3]</td> + <td>{{CompatGeckoDesktop("2.0")}} [1]</td> + <td>9.0 [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0 (522) [3]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>4.1</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>7.1</td> + <td>12.1</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>content-box</code></td> + <td>4.1</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>7.1</td> + <td>12.1</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko suportava, desde a versão 1.1 até a versão 1.9.2, que correspende ao Firefox 1.0 até 3.6 incluso uma sintaxe diferente e prefixada: <code>-moz-background-clip: padding | border</code>.</p> + +<p>[2] Internet Explorer 7 suportava, mas em outras versões do Internet Explorer ele se comporta como <code>background-clip:padding</code> se <code>overflow: hidden | auto | scroll</code>.</p> + +<p>[3] Webkit também suporta a versão prefixada desta propriedade, e neste caso, em adição as palavras chaves atuais, os sinônimos alternativos são: <code>padding</code>, <code>border</code>, and <code>content</code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("clip")}}</li> + <li><a href="/en-US/docs/Web/CSS/box_model">CSS Box Model</a></li> +</ul> diff --git a/files/pt-br/web/css/background-color/index.html b/files/pt-br/web/css/background-color/index.html new file mode 100644 index 0000000000..8acca2c755 --- /dev/null +++ b/files/pt-br/web/css/background-color/index.html @@ -0,0 +1,157 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>background-color</code></strong> define a cor de fundo de um elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Valores em chaves */ +background-color: red; +background-color: indigo; + +/* Valores em Hexadecimais */ +background-color: #bbff00; /* Totalmente opaco */ +background-color: #bf0; /* Forma abreviada totalmente opaco */ +background-color: #11ffee00; /* Totalmente transparente */ +background-color: #1fe0; /* Forma abreviada totalmente transparente */ +background-color: #11ffeeff; /* Totalmente opaco */ +background-color: #1fef; /* Forma abreviada totalmente opaco */ + +/* Valores em RGB */ +background-color: rgb(255, 255, 128); /* Totalmente opaco */ +background-color: rgba(117, 190, 218, 0.5); /* 50% transparente */ + +/* Valores em HSL */ +background-color: hsl(50, 33%, 25%); /* Totalmente opaco */ +background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparente */ + +/* Valores em chaves especiais */ +background-color: currentcolor; +background-color: transparent; + +/* Valores globais */ +background-color: inherit; +background-color: initial; +background-color: unset;</pre> + +<p>A propriedade <code>background-color</code> recebe um único valor <code><a href="#<color>"><color></a></code>.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><a id="<color>"></a>{{cssxref("<color>")}}</dt> + <dd>A cor uniforme de fundo. É renderizado atrás de qualquer {{cssxref("background-image")}} especificado, embora a cora ainda continue visible através de qualquer transparência da imagem.</dd> +</dl> + +<h2 id="Acessibilidade">Acessibilidade</h2> + +<p>É importante assegurar que o contraste entre a cor de fundo e a cor do texto colocado sobre ele é alta o suficiente para pessoas com condições de baixa visão possam ler o conteúdo da página.</p> + +<p>A cor do contrast é determinada comparando a luminância da cor do texto e da cor de fundo. Para atender às atuais <a href="https://www.w3.org/WAI/intro/wcag">Diretrizes de Acessibilidade de Conteúdo da Web (WCAG)</a>, uma proporção de 4.5:1 é necessária para conteúdo de texto e 3:1 para textos maiores como títulos. Texto grande é definido como 18.66px e negrito ou maior, ou 24px ou maior.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Definição_formal">Definição formal</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe_formal">Sintaxe formal</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exemplothree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12]; notranslate">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", 200, 150)}}</p> + +<ul> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Comment</th> + <th scope="col">Feedback</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td> + <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td> + <td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3">Backgrounds Level 3 GitHub issues</a></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> + <td>Initial definition</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-color")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li> + <li>The {{cssxref("<color>")}} data type</li> + <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> diff --git a/files/pt-br/web/css/background-origin/index.html b/files/pt-br/web/css/background-origin/index.html new file mode 100644 index 0000000000..7910395b4a --- /dev/null +++ b/files/pt-br/web/css/background-origin/index.html @@ -0,0 +1,107 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +translation_of: Web/CSS/background-origin +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>background-origin</code></strong> define <em>a área de posicionamento do plano de fundo</em>, isto é, a ponto de origem de uma imagem específica usando a propriedade {{cssxref("background-image")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div> + +<p class="hidden">A fonte para esta exemplo interativo está disponível no repositório GitHub. Se você pudesse contribuir com os exemplos de projetos interativos, por favor copie <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p> + +<p>Note que <code>background-origin</code> é ignorado quando {{cssxref("background-attachment")}} é <code>fixed</code>.</p> + +<div class="note"><strong>Nota:</strong> A taquigrafia {{cssxref("background")}} redefine o valor desta propriedade para seu valor inicial se esta não foi específicada.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valores chave */ +background-origin: border-box; +background-origin: padding-box; +background-origin: content-box; + +/* Valores globais */ +background-origin: inherit; +background-origin: initial; +background-origin: unset; +</pre> + +<p>A propriedade <code>background-origin</code> é especificada por uma chave de valores listadas abaixo.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>border-box</code></dt> + <dd>O plano de fundo é posicionado relativamente nas bordas do elemento.</dd> + <dt><code>padding-box</code></dt> + <dd>O plano de fundo é posicionado relativamente no espaçamento do elemento.</dd> + <dt><code>content-box</code></dt> + <dd>O plano de fundo é posicionado relativamente para o conteúdo do elemento.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css; highlight:[6];">.exemplo { + border: 10px double; + padding: 10px; + background: url('image.jpg'); + background-position: center left; + background-origin: content-box; +} +</pre> + +<pre class="brush:css; highlight:[6];">#exemplo2 { + border: 4px solid black; + padding: 10px; + background: url('image.gif'); + background-repeat: no-repeat; + background-origin: border-box; +} +</pre> + +<pre class="brush:css; highlight:[4];">div { + background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */ + background-position: top right, 0px 0px; + background-origin: content-box, padding-box; +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<div> +<p class="hidden">A tabela de compatibilidade desta pagina é gerada por dados estruturados. Se você puder contribuir com os dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</p> + +<p>{{Compat("css.properties.background-origin")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("background-clip")}}</li> +</ul> diff --git a/files/pt-br/web/css/background-position/index.html b/files/pt-br/web/css/background-position/index.html new file mode 100644 index 0000000000..44df4c28a1 --- /dev/null +++ b/files/pt-br/web/css/background-position/index.html @@ -0,0 +1,178 @@ +--- +title: background-position +slug: Web/CSS/background-position +translation_of: Web/CSS/background-position +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>background-position</code></strong> define a posição inicial, relativa a posição de fundo na camada definido por {{cssxref("background-origin")}}, para cada background image definido.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div> + +<p class="hidden">A fonte deste exemplo interativo está alocado em um repositório GitHub. Se você pudesse contribuir com os exemplos de projetos interativos , por favor "clone" <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valores chave */ +background-position: top; +background-position: bottom; +background-position: left; +background-position: right; +background-position: center; + +/* Valores <percentuais> */ +background-position: 25% 75%; + +/* valores <espessura> */ +background-position: 0 0; +background-position: 1cm 2cm; +background-position: 10ch 8em; + +/* Multiplas imagens */ +background-position: 0 0, center; + +/* Valores de cantos relativos */ +background-position: bottom 10px right 20px; +background-position: right 3em bottom 10px; +background-position: bottom 10px right; +background-position: top right 10px; + +/* Valores globais */ +background-position: inherit; +background-position: initial; +background-position: unset; +</pre> + +<p>A propriedade <code>background-position</code> é especificada como um determinado numero de valores de <code><a href="#<position>"><position></a></code> , separados por espaços.</p> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><a id="<position>" name="<position>"><code><position></code></a></dt> + <dd>A {{cssxref("<position>")}}. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one or two values. If two values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be <code>center</code>.</dd> + <dd> + <p><strong>1-value syntax:</strong> the value may be:</p> + + <ul> + <li>The keyword value <code>center</code>, which centers the image.</li> + <li>One of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.</li> + <li>A {{cssxref("<length>")}} or {{cssxref("<percentage>")}}. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.</li> + </ul> + + <p><strong>2-value syntax:</strong> one value defines X and the other defines Y. Each value may be:</p> + + <ul> + <li>One of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. If <code>left</code> or <code>right</code> are given here, then this defines X and the other given value defines Y. If <code>top</code> or <code>bottom</code> are given, then this defines Y and the other value defines X.</li> + <li>A {{cssxref("<length>")}} or {{cssxref("<percentage>")}}. If the other value is <code>left</code> or <code>right</code>, then this value defines Y, relative to the top edge. If the other value is <code>top</code> or <code>bottom</code>, then this value defines X, relative to the left edge. If both values are <code><length></code> or <code><percentage></code> values, then the first defines X and the second Y.</li> + </ul> + + <p>Note that:</p> + + <ul> + <li>If one value is <code>top</code> or <code>bottom</code>, then the other value may not be <code>top</code> or <code>bottom</code>.</li> + <li>If one value is <code>left</code> or <code>right</code>, then the other value may not be <code>left</code> or <code>right</code>.</li> + </ul> + + <p>This means, e.g., that <code>top top</code> and <code>left right</code> are not valid.</p> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Examples</h2> + +<p>Each of these three examples uses the {{cssxref("background")}} property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exampleone">Example One</div> +<div class="exampletwo">Example Two</div> +<div class="examplethree">Example Three</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Shared among all <div>s */ +div { + background-color: #FFEE99; + background-repeat: no-repeat; + width: 300px; + height: 80px; + margin-bottom: 12px; +} + +/* These examples use the `background` shorthand property */ +.exampleone { + background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; +} +.exampletwo { + background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat; +} + +/* Multiple background images: Each image is matched with the + corresponding position, from first specified to last. */ +.examplethree { + background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), + url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-position: 0px 0px, + center; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples', 420, 200)}}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Adds support for multiple backgrounds and the four-value syntax. Modifies the percentage definition to match implementations.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Allows for keyword values and {{cssxref("<length>")}} and {{cssxref("<percentage>")}} values to be mixed.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-position")}}</p> + +<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> + +<ul> + <li>Gecko has a bug meaning that <code>background-position</code> can't be {{cssxref("transition","transitioned")}} between two values containing different numbers of {{cssxref("<position>")}} values, for example <code>background-position: 10px 10px;</code> and <code>background-position: 20px 20px, 30px 30px;</code> (see {{bug(1390446)}}). Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57) fixes this.</li> +</ul> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{cssxref("background-position-x")}}</li> + <li>{{cssxref("background-position-y")}}</li> + <li>{{cssxref("background-position-inline")}}</li> + <li>{{cssxref("background-position-block")}}</li> + <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Using multiple backgrounds</a></li> + <li>{{cssxref("transform-origin")}}</li> +</ul> diff --git a/files/pt-br/web/css/background-size/index.html b/files/pt-br/web/css/background-size/index.html new file mode 100644 index 0000000000..c37b0182b4 --- /dev/null +++ b/files/pt-br/web/css/background-size/index.html @@ -0,0 +1,255 @@ +--- +title: background-size +slug: Web/CSS/background-size +translation_of: Web/CSS/background-size +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <strong><code>background-size</code></strong> do <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica o tamanho das imagens de fundo. O tamanho da imagem pode ser totalmente ou apenas parcialmente comprimido com o objetivo de preservar sua proporção.</p> + +<pre class="brush: css no-line-numbers">/* Sintaxe */ +background-size: cover; +background-size: contain; + +/* Sintaxe de um valor */ +/* largura da imagem (height é setado como 'auto') */ +background-size: 50%; +background-size: 3em; +background-size: 12px; +background-size: auto; + +/* Sintaxe de dois valores */ +/* Primeiro valor: largura da imagem, segundo valor: altura */ +background-size: 50% auto; +background-size: 3em 25%; +background-size: auto 6px; +background-size: auto auto; + +/* Múltiplos valores de backgrounds para a imagem de fundo */ +/* Não confunda com background-size: auto auto */ +background-size: auto, auto; +background-size: 50%, 25%, 25%; +background-size: 6px, auto, contain; + +/* Valores globais */ +background-size: inherit; +background-size: initial; +background-size: unset; +</pre> + +<div class="hidden" id="background-size"> +<pre class="brush: html"><div id="container"> + <div class="subcontainer contain">contain</div> + <div class="subcontainer cover">cover</div> + <div class="subcontainer width">120px</div> + <div class="subcontainer width-height">120px 200px</div> +</div> +</pre> + +<pre class="brush: css">#container { + width: 100%; + display:flex; + justify-content: space-around; + height: 300px; + overflow: scroll; + background-color: #EEEEEE; +} + +.subcontainer { + width: 100%; + max-width: 200px; + margin: 8px; + padding: 5px; + background-color: white; + background-image: url("https://mdn.mozillademos.org/files/15195/eagle.jpg"); + background-repeat: no-repeat; + color: white; + font-family: monospace; +} + +.contain { + background-size: contain; +} + +.cover { + background-size: cover; +} + +.width { + background-size: 120px; +} + +.width-height { + background-size: 120px 200px; +} +</pre> +</div> + +<p>{{EmbedLiveSample("background-size", "100%", 300, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>O tamanho de uma única imagem de fundo pode ser especificado de três maneiras diferentes:</p> + +<ul> + <li>usando a palavra-chave <code><a href="#contain">contain</a></code></li> + <li>usando a palavra-chave <code><a href="#cover">cover</a></code></li> + <li>usando valores para <em>width</em> e <em>height</em></li> +</ul> + +<p>Para especificar usando <em>width</em> e <em>height</em>, você pode fornecer um ou dois valores:</p> + +<ul> + <li>se apenas um valor for fornecido, ele valerá para a <em>width</em> e height será<code><a href="#auto">auto</a></code>.</li> + <li>Se dois valores forem fornecidos, o primeiro corresponde a <em>width</em> e o segundo a <em>height</em>.</li> +</ul> + +<p>Cada valor pode ser um <code><a href="#length"><length></a></code>, uma <code><a href="#<percentage>"><percentage></a></code>, ou <code><a href="#auto">auto</a></code>.<br> + <br> + Por exemplo:</p> + +<pre class="brush: css">background-size: contain; + +background-size: 50%; +background-size: 3em; + +background-size: auto 1em; +background-size: 50% 25%;</pre> + +<p><br> + Para especificar o tamanho de fundo para mais de uma imagem, forneça múltiplos tamanhos separados por vírgula:</p> + +<pre class="brush: css">background-size: 50% 25%, contain, 3em;</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><a id="length" name="length"><code><length></code></a></dt> + <dd>Um valor <code>{{cssxref("<length>")}}</code> que ajusta a imagem de fundo para o comprimento especificado na dimensão correspondente. Comprimentos negativos não são permitidos.</dd> + <dt><a id="<percentage>" name="<percentage>"><code><percentage></code></a></dt> + <dd>Um valor {{cssxref("<percentage>")}} que ajusta a imagem de fundo na dimensão correspondente com a porcentagem especificada para a área do elemento pai, que é determinado pelo valor {{cssxref("background-origin")}}. A área correspondente ao elemento pai é, por padrão, a área que engloba o conteúdo da caixa e seu respectivo padding; a área pode também ser alterada para englobar apenas o conteúdo ou para a área contendo as bordas, o padding e o conteúdo. Se o {{cssxref("background-attachment","attachment")}} está <code>fixed</code>, a área do elemento pai é a área inteira do janela do navegador, não incluindo a área coberta pelas barras de rolagem (se estiverem presentes). Valores negativos de porcentagem não são permitidos.</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>Uma palavra-chave que ajusta a imagem de fundo para tal direção de modo que mantenha a proporção da imagem inalterada.</dd> + <dt><a id="contain" name="contain"><code>contain</code></a></dt> + <dd>Uma palavra-chave que aumenta o máximo possível a imagem mantendo a sua proporção (a imagem não fica esticada). A imagem tenta ocupar o espaço inteiro do container. Quando a imagem e o container tem diferentes dimensões, as áreas não preenchidas (tanto top/bottom ou left/right) são preenchidas com a cor de fundo.</dd> + <dt><a id="cover" name="cover"><code>cover</code></a></dt> + <dd>Uma palavra-chave que é o inverso de <code>contain</code>. Ajusta a imagem o mais largamente possível e mantém sua proporção (a imagem não fica esticada). A imagem "cobre" o container inteiro, tanto em altura como em largura. Quando a imagem e o container têm diferentes dimensões,<em>a imagem ultrapassa os limites do container</em> em qualquer direção, para continuar mantendo a proporção.</dd> +</dl> + +<p>A interpretação dos possíveis valores depende das dimensões intrínsecas da imagem (largura e altura) e da proporção intrínseca (proporção da largura e altura). Um imagem bitmap sempre tem dimensões intrínsecas e uma proporção intrínseca. Uma imagem pode conter ambas as dimensões intrínsecas (e portanto deve ter uma proporção intrínseca). Poderá contar também uma ou nenhuma dimensão intrínseca, e portanto pode ou não pode conter uma proporção intrínseca. Gradients são tratados como imagens sem dimensões ou proporções intrínsecas.</p> + +<div class="note"> +<p><strong>Nota: </strong>Esse comportamento mudou no Gecko 8.0 {{geckoRelease("8.0")}}. Antes disso, gradients eram tratados como imagens sem dimensões intrínsecas, porém com uma proporção intrínseca idêntica a da área do elemento pai.</p> +</div> + +<p>Imagens geradas por elementos usando {{cssxref("-moz-element")}} (que na realidade casa com um elemento) são atualmente tratadas como imagens com as dimensões do elemento, ou da área de posicionamento de fundo se o elemento é SVG, com a proporção intrínseca correspondente.</p> + +<div class="note"><strong>Nota:</strong> Este não é o comportamento atualmente especificado, que é que as dimensões intrínsecas e a proporção devem ser as do elemento em todos os casos.</div> + +<p>O tamanho renderizado da imagem de fundo é então computado da seguinte forma:</p> + +<dl> + <dt>Se ambos os componentes do <code>background-size</code> são especificados e não há <code>auto</code></dt> + <dd>A imagem de fundo é renderizada no tamanho especificado.</dd> + <dt>Se o <code>background-size</code> é <code>contain</code> ou <code>cover</code>:</dt> + <dd>A imagem é renderizada, preservando sua proporção intrínseca, com o maior tamanho contido, ou cobrindo a área do elemento pai. Se a imagem não tiver uma proporção intrínseca, então ela é renderizada no tamanho da área do elemento pai.</dd> + <dt>Se o <code>background-size</code> é <code>auto</code> ou <code>auto auto</code>:</dt> + <dd>Se a imagem tiver duas dimensões intrínsecas, ela é renderizada nesse tamanho. Se não tiver dimensões intrínsecas e nenhuma proporção intrínseca, ela é renderizada ao tamanho da área do elemento pai. Se não tiver dimensões, mas tiver uma proporção, é processado como se <code>contain</code> tivesse sido especificado. Se a imagem tiver uma dimensão intrínseca e uma proporção, ela é renderizada no tamanho determinado por essa dimensão e a proporção. Se a imagem tiver uma dimensão intrínseca mas nenhuma proporção, ela é processada usando a dimensão intrínseca e a dimensão correspondente da área do elemento pai. + <div class="note"><strong>Nota:</strong> imagens SVG tem um atributo <a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a> que é equivalente ao 'contain'. No Firefox 43, ao contrário do Chrome 52, um background-size especificado explicitamente faz com que <a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a> seja ignorado.</div> + </dd> + <dt>Se o background-size tem um componente <code>auto</code> e um componente não <code>auto</code>:</dt> + <dd>Se a imagem tiver uma proporção intrínseca, então use a dimensão especificada. Se a imagem não tiver uma proporção intrínseca, use a dimensão especificada para essa dimensão. Para a outra dimensão, use a dimensão intrínseca correspondente da imagem se houver uma. Se não existe essa dimensão intrínseca, use a dimensão correspondente da área do elemento pai.</dd> +</dl> + +<p>Observe que o dimensionamento de fundo para vectors que não possuem dimensões ou proporções intrínsecas ainda não está totalmente implementado em todos os navegadores. Tenha cuidado ao confiar no comportamento descrito acima e teste em vários navegadores (especificamente incluindo versões do Firefox 7 ou anteriores e Firefox 8 ou superior) para ter certeza de que diferentes renderizações são aceitáveis.</p> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html">Essa demonstração do <code>background-size: cover</code></a> e <a href="http://whereswalden.com/files/mozilla/background-size/page-contain.html">essa demonstração do <code>background-size: contain</code></a> foram feitas para você abrir em uma nova aba para ver como <code>contain</code> e <code>cover</code> se comportam quando as dimensões da área do elemento pai varia. <a href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">Essa séria de demonstrações de como <code>background-size</code> funciona e interage com outras propriedades <code>background-*</code> </a>devem ser suficientes para entender como usar <code>background-size</code> sozinho e em conjunto com outras propriedades.</p> + +<h2 id="Notas">Notas</h2> + +<p>Se você estiver especificando um gradient como plano de fundo e tiver especificado um <code>background-size</code> junto, é melhor não especificar um tamanho que use um único componente setado como auto ou seja especificado usando apenas um valor de largura (por exemplo, <code>background-size: 50%</code>). A renderização de gradients em tais casos mudou no Firefox 8 e, no momento, geralmente é inconsistente em todos os navegadores, pois nem todos implementam a renderização em total conformidade com a especificação <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size"><code>background-size</code> </a>do CSS3 e com a <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">especificação do CSS3 para valores d</a><a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">e gradient</a>.</p> + +<pre class="brush: css">.bar { + width: 50px; height: 100px; + background-image: gradient(...); + + /* NÃO RECOMENDADO */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* OKAY */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>Observe que, em particular, não é recomendável usar uma dimensão de pixel e uma dimensões <code>auto</code> com um gradient, porque é impossível replicar a renderização nas versões do Firefox antes de 8 e nos navegadores que não implementam a renderização do Firefox 8, sem saber o tamanho exato do elemento cujo plano de fundo está sendo especificado.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + +<p class="hidden">A tabela de compatibilidade nessa página é gerada por dados estruturados. Se você quer contribuir com os dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pull request.</p> + +<p>{{Compat("css.properties.background-size")}}</p> + +<h2 id="Soluções_alternativas">Soluções alternativas</h2> + +<h3 id="Para_Internet_Explorer_anterior_ao_IE8">Para Internet Explorer anterior ao IE8</h3> + +<p>Como o Internet Explorer 8 não suporta a propriedade <code>background-size</code>, é possível emular algumas de suas funcionalidades usando a propriedade não padrão <code>-ms-filter</code>:</p> + +<pre class="brush:css">-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";</pre> + +<p>Isso simula o valor <code>cover</code>.</p> + +<h3 id="No_Firefox_3.5">No Firefox 3.5</h3> + +<p>Enquanto essa propriedade foi adicionada no Firefox 3.6, é possível esticar totalmente a imagem no Firefox 3.5 usando {{cssxref("-moz-border-image")}}.</p> + +<pre class="brush:css">.foo { + background-image: url(bg-image.png); + + -webkit-background-size: 100% 100%; /* Safari 3.0 */ + -moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */ + -o-background-size: 100% 100%; /* Opera 9.5 */ + background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ + + -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */ +}</pre> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Multiple backgrounds</a></li> + <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li> +</ul> diff --git a/files/pt-br/web/css/background/index.html b/files/pt-br/web/css/background/index.html new file mode 100644 index 0000000000..81390eb8e3 --- /dev/null +++ b/files/pt-br/web/css/background/index.html @@ -0,0 +1,129 @@ +--- +title: background +slug: Web/CSS/background +tags: + - Fundo CSS + - Propriedades CSS + - Referencia +translation_of: Web/CSS/background +--- +<div><font><font>{{CSSRef ( "CSS Background")}}</font></font></div> + +<h2 id="Resumo"><font><font>Resumo</font></font></h2> + +<p><font><font>A propriedade CSS </font></font><strong><code><font><font>background</font></font></code></strong><font><font> é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Background</span></font></font></font><font><font> pode ser usado para definir os valores para um ou mais dos seguintes: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}} , {{cssxref("background-repeat")}}, {{cssxref("background-size")}} e {{cssxref("background-attachment")}}.</font></font></p> + +<p><font><font>O </font></font><code><font><font>fundo</font></font></code><font><font> CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.</font></font></p> + +<p><font><font>{{cssinfo}}</font></font></p> + +<h2 id="Sintaxe"><font><font>Sintaxe</font></font></h2> + +<pre class="brush: css"><font><font>/ * Usando uma <</font></font><code><font><font>cor-de-fundo</font></font></code><font><font>> * / +background: green;</font></font> +<font><font> +/ * Usando uma <</font></font><code><font><font>imagem-de-fundo</font></font></code><font><font>> e <</font></font><code><font><font>estilo-de-repetição</font></font></code><font><font>> * / +background: url("test.jpg") repeat-y;</font></font> +<font><font> +/ * Usando uma <box> e <</font></font><code><font><font>cor-de-fundo</font></font></code><font><font>> * / +background: border-box red;</font></font> +<font><font> +/ * Uma única imagem, centrado e escalado * / +background: no-repeat center/80% url( "../img/image.png");</font></font> +</pre> + +<div class="note"><strong><font><font>Nota:</font></font></strong><font><font> O {{cssxref ( "background-color")}} só pode ser definido no último fundo, como há apenas uma cor de fundo para todo o elemento.</font></font></div> + +<h3 id="Valores"><font><font>Valores</font></font></h3> + +<p><font><font>Um ou mais dos seguintes, por qualquer ordem:</font></font></p> + +<dl> + <dt><code><font><font><anexo></font></font></code></dt> + <dd><font><font>Veja {{cssxref ( "background-attachment")}}</font></font></dd> + <dt><code><font><font><box></font></font></code></dt> + <dd><font><font>Veja {{cssxref ( "background-clip")}}</font></font></dd> + <dt><code><font><font><cor-de-fundo></font></font></code></dt> + <dd><font><font>Veja {{cssxref ( "background-color")}}</font></font></dd> + <dt><code><font><font><imagem-de-fundo></font></font></code></dt> + <dd><font><font>Veja {{Cssxref ( "background-image")}}</font></font></dd> + <dt><code><font><font><posição></font></font></code></dt> + <dd><font><font>Veja {{cssxref ( "background-position")}}</font></font></dd> + <dt><code><font><font><estilo-de-repetição></font></font></code></dt> + <dd><font><font>Veja {{cssxref ( "background-repeat")}}</font></font></dd> + <dt><code><font><font><tamanho-do-fundo></font></font></code></dt> + <dd><font><font>Veja {{cssxref ( "background-size")}}. </font><font>Esta propriedade deve ser especificado após </font></font><strong><font><font><posição></font></font></strong><font><font> , separados com o caractere '/'.</font></font></dd> +</dl> + +<h3 id="Sintaxe_formal"><font><font>Sintaxe formal</font></font></h3> + +<pre class="syntaxbox"><font><font>{{csssyntax}}</font></font></pre> + +<h2 id="Exemplos"><font><font>Exemplos</font></font></h2> + +<h3 id="HTML"><font><font>HTML</font></font></h3> + +<pre class="brush: html"><font><font><p class="Topbanner"> + céu estrelado<br/> + Cintilando Cintilando<br/> + Céu estrelado +</p></font></font><font><font> +<p class="atencao">Este é um parágrafo<p></font></font></pre> + +<h3 id="CSS"><font><font>CSS</font></font></h3> + +<pre class="brush:css' highlight:[2,6];"><font><font>.atencao { </font></font><font><font> + background: red; </font></font><font><font> +}</font></font> +<font><font> +.Topbanner { </font></font><font><font> + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; </font></font><font><font> +}</font></font> +</pre> + +<h3 id="Resultado"><font><font>Resultado</font></font></h3> + +<p><font><font>{{EmbedLiveSample ( "Exemplos")}}</font></font></p> + +<h2 id="Especificações"><font><font>Especificações</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>Especificação</font></font></th> + <th scope="col"><font><font>estado</font></font></th> + <th scope="col"><font><font>Comente</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><font><font>{{SpecName ( 'Fundos CSS3', '# a-fundo', 'fundo')}}</font></font></td> + <td><font><font>{{Spec2 ( 'Fundos CSS3')}}</font></font></td> + <td><font><font>A propriedade taquigráfica foi estendido para suportar múltiplas origens e a nova {{cssxref("background-size")}}, {{cssxref("background-origem")}} e {{cssxref("background-clip")}} propriedades.</font></font></td> + </tr> + <tr> + <td><font><font>{{SpecName ( 'CSS2.1', '# propdef-fundo colors.html', 'background')}}</font></font></td> + <td><font><font>{{Spec2 ( 'CSS2.1')}}</font></font></td> + <td><font><font>Não ocorreram alterações significativas</font></font></td> + </tr> + <tr> + <td><font><font>{{SpecName ( 'CSS1', '#background', 'background')}}</font></font></td> + <td><font><font>{{Spec2 ( 'CSS1')}}</font></font></td> + <td><font><font>definição inicial</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador"><font><font>Compatibilidade do navegador</font></font></h2> + +<p class="hidden">A tabela de compatibilidade desta página é gerada por meio de dados estruturados. Se você pudesse contribuir com a criação de dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</p> + +<p>{{Compat("css.properties.background")}}</p> + +<h2 id="Veja_também"><font><font>Veja também</font></font></h2> + +<ul> + <li><font><font>{{Cssxref ( "- moz-fundo-inline-política")}}</font></font></li> + <li><a href="/en-US/docs/CSS/Using_CSS_gradients"><font><font>Usando gradientes</font></font></a></li> + <li><a href="/en-US/docs/CSS/Multiple_backgrounds"><font><font>Vários fundos</font></font></a></li> +</ul> diff --git a/files/pt-br/web/css/blend-mode/index.html b/files/pt-br/web/css/blend-mode/index.html new file mode 100644 index 0000000000..a32cb2876c --- /dev/null +++ b/files/pt-br/web/css/blend-mode/index.html @@ -0,0 +1,389 @@ +--- +title: <blend-mode> +slug: Web/CSS/blend-mode +translation_of: Web/CSS/blend-mode +--- +<div>{{CSSRef}}</div> + +<p><a href="/pt-BR/docs/Web/CSS/CSS_Tipos">O tipo básico de dados</a> <a href="/pt-BR/docs/Web/CSS">CSS</a> <strong><code><blend-mode></code></strong> (modo de mesclagem) descreve como as cores devem aparecer, quando objetos se sobrepõem. Usa-se nas propriedades {{cssxref("background-blend-mode")}} e {{cssxref("mix-blend-mode")}}.</p> + +<p>Para cada pixel sobreposto, o <code><strong>blend-mode</strong></code> obtém o valor da cor do pixel da frente e do pixel do fundo, faz um cálculo com esses valores e devolve um novo valor de cor.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>O tipo básico de dados <strong><code><blend-mode></code></strong> é definido usando uma palavra chave escolhida da lista abaixo.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><a id="normal" name="normal">normal</a></code></dt> + <dd> + <p>A cor firnal é a do pixel de cima, não importando a cor dor o pixel de baixo.<br> + O efeito é como duas folhas de papel opacas se sobrepondo.</p> + + <div id="normal_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: normal; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p> + </dd> + <dt><code><a id="multiply" name="multiply">multiply</a></code></dt> + <dd> + <p>A cor final é o resultado da multiplicação das cores de cima e de baixo.<br> + Quando uma das camadas for preta, a cor final será preta, enquanto uma camada branca não altera a cor final.<br> + O efeito é como duas imagens impressas sobrepostas em um filme transparente.</p> + + <div id="multiply_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: multiply; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p> + </dd> + <dt><code><a id="screen" name="screen">screen</a></code></dt> + <dd> + <p>A cor final é o resultado do inverso de cada cor, multiplicados um pelo outro e depois, o inverso desse resultado.<br> + Uma camada preta não altera o resultado final, enquanto uma camada branca resulta na cor final branca.<br> + O efeito é como o de duas imagens sobrepostas por um projetor, sobre uma tela de projeção.</p> + + <div id="screen_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: screen; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p> + </dd> + <dt><code><a id="overlay" name="overlay">overlay</a></code></dt> + <dd>A cor final será o resultado de <code>multiply</code>, se a cor de baixo for mais escura ou <code>screen</code>, se a cor de baixo for mais clara.<br> + Este <code>blend-mode</code> é equivalente a <code>hard-light</code> mas com as camadas invertidas. + <div id="overlay_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: overlay; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p> + </dd> + <dt><code><a id="darken" name="darken">darken</a></code></dt> + <dd> + <p>A cor final é composta pelos valores mais escuros dos canais de cores de cada uma das camadas.</p> + + <div id="darken_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: darken; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p> + </dd> + <dt><code><a id="lighten" name="lighten">lighten</a></code></dt> + <dd>A cor final é composta pelos valores mais claros de cada um dos canais de cores das camadas.</dd> + <dd> + <div id="lighten_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: lighten; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p> + </dd> + <dt><code><a id="color-dodge" name="color-dodge">color-dodge</a></code></dt> + <dd>A cor final é o resultado da divisão da cor de baixo pelo inverso da cor de cima.<br> + Um fundo preto não altera as cores. Uma cor de cima inversa a cor de baixo, resulta em uma cor bastante luminosa.<br> + Este <code>blend-mode</code> é similar a <code>screen</code>, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso.</dd> + <dd> + <div id="color-dodge_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color-dodge; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p> + </dd> + <dt><code><a id="color-burn" name="color-burn">color-burn</a></code></dt> + <dd> + <p>A cor final é o inverso da cor do fundo, dividido pelo valor da cor da frente e então inverte-se o resultado final.<br> + Se a cor de cima for branca, não haverá alteração. Se a cor de cima for o inverso da cor de baixo, resultará em uma cor preta.<br> + Este <code>blend-mode</code> é similar ao <code>multiply</code>, mas a cor de cima precisa apenas ser tão escura quanto o inverso da cor de baixo para fazer o resultado final ser preto.</p> + + <div id="color-burn_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color-burn; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p> + </dd> + <dt><code><a id="hard-light" name="hard-light">hard-light</a></code></dt> + <dd> + <p>A cor final é o resultado do <code>multiply</code> se a cor de cima for a mais escura, ou o resultado de <code>screen</code> se a cor de cima for mais clara.<br> + Este <code>blend-mode</code> é equivalente ao <code>overlay</code> mas com as camadas invertidas.<br> + O efeito é o de iluminar o fundo com um holofote muito forte e intenso.</p> + + <div id="hard-light_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: hard-light; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p> + </dd> + <dt><code><a id="soft-light" name="soft-light">soft-light</a></code></dt> + <dd> + <p>O resultado final é similar ao de <code>hard-light</code>, porém menos intenso.<br> + O efeito é o de iluminar o fundo com um holofote difuso.</p> + + <div id="soft-light_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: soft-light; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p> + </dd> + <dt><code><a id="difference" name="difference">difference</a></code></dt> + <dd> + <p>The final color is the result of subtracting the darker of the two colors from the lighter one.<br> + A black layer has no effect, while a white layer inverts the other layer's color.</p> + + <div id="difference_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: difference; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p> + </dd> + <dt><code><a id="exclusion" name="exclusion">exclusion</a></code></dt> + <dd> + <p>The final color is similar to <code>difference,</code> but with less contrast.<br> + As with <code>difference</code>, a black layer has no effect, while a white layer inverts the other layer's color.</p> + + <div id="exclusion_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: exclusion; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p> + </dd> + <dt><code><a id="hue" name="hue">hue</a></code></dt> + <dd> + <p>The final color has the <em>hue</em> of the top color, while using the <em>saturation</em> and <em>luminosity</em> of the bottom color.</p> + + <div id="hue_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: hue; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p> + </dd> + <dt><code><a id="saturation" name="saturation">saturation</a></code></dt> + <dd> + <p>The final color has the <em>saturation</em> of the top color, while using the <em>hue</em> and <em>luminosity</em> of the bottom color.<br> + A pure gray backdrop, having no saturation, will have no effect.</p> + + <div id="saturation_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: saturation; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p> + </dd> + <dt><code><a id="color" name="color">color</a></code></dt> + <dd> + <p>The final color has the<em> <em>hue</em></em> and <em><em>saturation</em> </em>of the top color, while using the <em>luminosity</em> of the bottom color.<br> + The effect preserves gray levels and can be used to colorize the foreground.</p> + + <div id="color_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p> + </dd> + <dt><code><a id="luminosity" name="luminosity">luminosity</a></code></dt> + <dd> + <p>The final color has the <em>luminosity</em> of the top color, while using the <em>hue</em> and <em>saturation</em> of the bottom color.<br> + This blend mode is equivalent to <code>color</code>, but with the layers swapped.</p> + + <div id="luminosity_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: luminosity; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p> + </dd> +</dl> + +<h2 id="Interpolation_of_blend_modes">Interpolation of blend modes</h2> + +<p>Changes between blends mode are not interpolated. Any change occurs immediately.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2> + + + +<p>{{Compat("css.types.blend-mode")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Properties that use this data type: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li> + <li><a href="http://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li> +</ul> diff --git a/files/pt-br/web/css/block-size/index.html b/files/pt-br/web/css/block-size/index.html new file mode 100644 index 0000000000..0bab1649ec --- /dev/null +++ b/files/pt-br/web/css/block-size/index.html @@ -0,0 +1,104 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - Propriedade CSS + - Propriedade Lógica CSS + - Referencia + - block-size +translation_of: Web/CSS/block-size +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS" title="CSS">CSS </a><strong><code>block-size</code></strong> define o tamanho horizontal ou vertical de um elemento bloco. Corresponde à propriedade {{cssxref("width")}} ou {{cssxref("height")}}, dependendo do valor do {{cssxref("writing-mode")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/block-size.html")}} </div> + +<p class="hidden">O código-fonte para este exemplo interativo está disponível em um repostitório no Github. Caso queira contribuir com os projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers">/* valores <length> */ +block-size: 300px; +block-size: 25em; + +/* valores <percentage> */ +block-size: 75%; + +/* valores de Keyword */ +block-size: 25em border-box; +block-size: 75% content-box; +block-size: max-content; +block-size: min-content; +block-size: available; +block-size: fit-content; +block-size: auto; + +/* valores globais */ +block-size: inherit; +block-size: initial; +block-size: unset; +</pre> + +<p>Se o modo de escrita está orientado verticalmente, o valor do <code>block-size</code> refere-se à largura do elemento; senão, refere-se à altura do elemento. Uma propriedade relacionada é {{cssxref("inline-size")}}, que define as outras dimensões do elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe_2">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<p>A propriedade <code>block-size</code> leva os mesmos valores que as propriedades {{cssxref("width")}} e {{cssxref("height")}}.</p> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="exampleText">Example text</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + block-size: 200px; +}</pre> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada através de dados estruturados. Se você quiser contribuir com dados, por favor, cheque <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("css.properties.block-size")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>As propriedades: {{cssxref("width")}} and {{cssxref("height")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> diff --git a/files/pt-br/web/css/border-left-color/index.html b/files/pt-br/web/css/border-left-color/index.html new file mode 100644 index 0000000000..e9ea7a2fb2 --- /dev/null +++ b/files/pt-br/web/css/border-left-color/index.html @@ -0,0 +1,109 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +translation_of: Web/CSS/border-left-color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">The <strong><code>border-left-color</code></strong> CSS property sets the color of an element's left <a href="/en-US/docs/Web/CSS/border">border</a>.</span> It can also be set with the shorthand CSS properties {{cssxref("border-color")}} or {{cssxref("border-left")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers language-css">/* <color> values */ +border-left-color: red; +border-left-color: #ffbb00; +border-left-color: rgb(255, 0, 0); +border-left-color: hsla(100%, 50%, 25%, 0.75); +border-left-color: currentcolor; +border-left-color: transparent; + +/* Global values */ +border-left-color: inherit; +border-left-color: initial; +border-left-color: unset; +</pre> + +<p>The <code>border-left-color</code> property is specified as a single value.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>The color of the left border.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="A_simple_div_with_a_border">A simple div with a border</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="mybox"> + <p>This is a box with a border around it. + Note which side of the box is + <span class="redtext">red</span>.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.mybox { + border: solid 0.3em gold; + border-left-color: red; + width: auto; +} + +.redtext { + color: red; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#propdef-border-left-color', 'border-left-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.border-left-color")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The border-related CSS shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-left")}}, and {{Cssxref("border-color")}}.</li> + <li>The color-related CSS properties for the other borders: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, and {{Cssxref("border-top-color")}}.</li> + <li>The other border-related CSS properties applying to the same border: {{cssxref("border-left-style")}} and {{cssxref("border-left-width")}}.</li> +</ul> diff --git a/files/pt-br/web/css/border-left/index.html b/files/pt-br/web/css/border-left/index.html new file mode 100644 index 0000000000..0e83f5098c --- /dev/null +++ b/files/pt-br/web/css/border-left/index.html @@ -0,0 +1,155 @@ +--- +title: border-left +slug: Web/CSS/border-left +translation_of: Web/CSS/border-left +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumo">Resumo</h2> + +<p>O propriedade <strong><code>border-left</code></strong> <a href="/en/CSS" title="CSS">CSS</a> é um atalho que define os valores de {{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, e {{ Cssxref("border-left-width") }}. Estas propriedades descrevem a borda esquerda de elementos.</p> + +<p>Os três valores da propriedade estenográfica pode ser especificada em qualquer ordem, e um ou dois deles podem ser omitidos.</p> + +<div class="note">Tal como acontece com todas as propriedades abreviadas, fronteira esquerda sempre define os valores de todas as propriedades que podem ser definidas, ainda que não são especificadas. Ele define aqueles que não são especificados para os valores padrão. Isso significa que: +<pre class="brush: css"> border-left-style: dotted; + border-left: thick green; +</pre> + +<p>é o mesmo que</p> + +<pre class="brush: css"> border-left-style: dotted; + border-left: none thick green; +</pre> + +<p>e o valor de {{ Cssxref("border-left-style") }} dado antes <code>border-left é ignorado</code>.</p> + +<p>Uma vez que o valor padrão de {{ Cssxref("border-left-style") }} é <code>none</code>, não especificando o border-style parte do valor significa que a propriedade especifica o valor padrão que é none e não significa nenhum border.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush:css">border-left: 1px; +border-left: 2px dotted; +border-left: medium dashed green; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><br-width> </code></dt> + <dd>Veja {{ Cssxref("border-left-width") }}.</dd> + <dt><code><br-style> </code></dt> + <dd>Veja {{ Cssxref("border-left-style") }}.</dd> + <dt><code><color> </code></dt> + <dd>Veja {{ Cssxref("border-left-color") }}.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class='box'> + <p>This box has a border on the left side.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.box { + background-color: #ffaabb; + border-left: 4px solid #000; + height: 100px; + width: 100px; +} + +.box p { + font-weight: bold; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>Não ocorreram alterações diretas, através da alteração dos valores para o {{ cssxref("border-left-color") }} se aplicam a ele.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Sem alterações significativas</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/border-radius/index.html b/files/pt-br/web/css/border-radius/index.html new file mode 100644 index 0000000000..1c71af8e01 --- /dev/null +++ b/files/pt-br/web/css/border-radius/index.html @@ -0,0 +1,332 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - border-radius +translation_of: Web/CSS/border-radius +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade CSS <strong>border-radius</strong> permite definir como bordas arredondadas são. A curva de cada esquina é definida usando um ou dois raios, definindo sua forma: círculo ou elipse.</p> + +<p><img alt="Imagens das esquinas arredondadas com CSS3: Sem esquina arredondada, arredondado usando um arco de círculo, arredondado usando um arco de elípse" class="default internal" src="/files/13813/border-radius-sh.png" style="height: 176px; width: 549px;"></p> + +<p>O raio é aplicável a todo o {{Cssxref("background")}}, mesmo se o elemento não tiver borda; a posição exata do recorte é definido pela propriedade {{Cssxref("background-clip")}}.</p> + +<p>Esta propriedade é um <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> para definir as quatro propriedades {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}} e {{Cssxref("border-bottom-left-radius")}}.</p> + +<div class="note">Como com qualquer propriedade shorthand, valores individuais herdados não são possíveis, isto é, border-radius: 0 0 inherit inherit, que substituiria definições parciais existentes. Neste caso, a propriedade individual longhand deve ser usada.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css"><strong>/* A sintaxe do primeiro raio permite de um a quatro valores */</strong> +/* O raio é definido para todos os 4 lados */ +border-radius: 10px; + +/* <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */ +border-radius: 10px 5%; + +/* <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */ +border-radius: 2px 4px 2px; + +/* <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */ +border-radius: 1px 0 3px 4px; + +<strong>/* A sintaxe do segundo raio permite de um a quatro valores</strong> */ +/* (first radius values) / <em>radius</em> */ +border-radius: 10px 5% / 20px; + +/* (first radius values) / <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */ +border-radius: 10px 5% / 20px 30px; + +/* (first radius values) / <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */ +border-radius: 10px 5px 2em / 20px 25px 30%; + +/* (first radius values) / <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */ +border-radius: 10px 5% / 20px 25em 30px 35em; + +border-radius: inherit; +</pre> + +<h3 id="Valores">Valores</h3> + +<table> + <tbody> + <tr> + <td style="vertical-align: top;"><em>radius</em></td> + <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td> + <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td> + <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-left</em></td> + <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-right</em></td> + <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>bottom-right</em></td> + <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>bottom-left</em></td> + <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.</td> + </tr> + <tr> + <td style="vertical-align: top;"><code>inherit</code></td> + <td> </td> + <td style="vertical-align: top;">Is a keyword indicating that all four values are inherited from their parent's element calculated value.</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><length></code></dt> + <dd>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data types. Negative values are invalid.</dd> + <dt><code><percentage></code></dt> + <dd>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.</dd> +</dl> + +<p>For example:</p> + +<pre class="brush: css">border-radius: 1em/5em; + +/* is equivalent to */ + +border-top-left-radius: 1em 5em; +border-top-right-radius: 1em 5em; +border-bottom-right-radius: 1em 5em; +border-bottom-left-radius: 1em 5em; +</pre> + +<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px; + +/* is equivalent to: */ + +border-top-left-radius: 4px 2px; +border-top-right-radius: 3px 4px; +border-bottom-right-radius: 6px 2px; +border-bottom-left-radius: 3px 4px; +</pre> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;"> border: solid 10px; + /* the border will curve into a 'D' */ + border-radius: 10px 40px 40px 10px; + +</pre> + +<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;"> border: groove 1em red; + border-radius: 2em; +</pre> + +<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;"> background: gold; + border: ridge gold; + border-radius: 13em/3em; +</pre> + +<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;"> border: none; + border-radius: 40px 10px; +</pre> + +<pre style="display: inline-block; margin: 10px; background: black; color: white; border: none; border-radius: 50%;"> border: none; + border-radius: 50%; +</pre> + +<h2 id="Live_Samples">Live Samples</h2> + +<p>Sample 1 : <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></p> + +<p>Sample 2 : <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></p> + +<p>Sample 3 : <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></p> + +<p>Sample 4 : <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></p> + +<p>Sample 5 : <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></p> + +<h2 id="Notas">Notas</h2> + +<ul> + <li>Prior to Firefox 50, dotted and dashed rounded border corners were rendered as solid; see {{bug("382721")}}.</li> + <li><code>border-radius</code> does not apply to table elements when {{Cssxref("border-collapse")}} is <code>collapse</code>.</li> + <li>Old versions of WebKit handle multiple values differently, see below.</li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("2.0")}}<sup>[10]</sup></p> + </td> + <td>1.0{{property_prefix("-webkit")}}<br> + 4.0<sup>[9]</sup></td> + <td>9.0</td> + <td>10.5<sup>[8]</sup></td> + <td>3.0{{property_prefix("-webkit")}}<br> + 5.0<sup>[9]</sup></td> + </tr> + <tr> + <td>Elliptical borders</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}<sup>[7]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[7]</sup></td> + </tr> + <tr> + <td>4 values for 4 corners</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0<sup>[6]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0<sup>[6]</sup></td> + </tr> + <tr> + <td>Percentages</td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup><br> + {{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>11.5<sup>[3]</sup></td> + <td>5.1<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>iOS Safari</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android Browser</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[10]</sup></td> + <td>3.2{{property_prefix("-webkit")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>2.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Elliptical borders</td> + <td>{{CompatVersionUnknown}}<sup>[10]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>4 values for 4 corners</td> + <td>{{CompatVersionUnknown}}<sup>[10]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Percentages</td> + <td>{{CompatVersionUnknown}}<sup>[10]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Gecko 2.0 {{geckoRelease("2.0")}} <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0 {{geckoRelease("12.0")}}. In order to conform to the CSS3 standard, Gecko 2.0 changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code>. Gecko 2.0 also makes rounded corners clip content and images (if {{cssxref("overflow")}}<code>: visible</code> is not set)</p> + +<p>Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{geckoRelease("13.0")}}.</p> + +<p>[2] <code><percentage></code> values are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>).</p> + +<p>[3] The implementation of <code><percentage></code> values was buggy in Opera prior to 11.50.</p> + +<p>[4] <code><percentage></code> values are not supported in iOS versions prior to 5 and Android versions prior to WebKit 532.</p> + +<p>[5] <code><percentage></code> values are implemented in a non-standard way prior to Gecko 2.0. Both horizontal and vertical radii were relative to the width of the border box.</p> + +<p>[6] Safari and Chrome versions prior to WebKit 532.5 support only one value for all four corners. For different radii the {{cssxref("border-top-left-radius", "border-top-left-radius", "#Examples")}} long form properties must be used.</p> + +<p>[7] Safari and Chrome versions prior to WebKit 532.5 don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all four corners. <code>-webkit-border-radius: 40px 10px;</code> is equivalent to <code>border-radius: 40px/10px;</code>.</p> + +<p>[8] In Opera prior to version 11.60, applying <code>border-radius</code> to replaced elements will not have rounded corners.</p> + +<p>[9] Current Chrome and Safari versions ignore {{cssxref("border-radius")}} on {{HTMLElement("select")}} elements unless {{cssxref("-webkit-appearance")}} is overridden to an appropriate value.</p> + +<p>[10] Prior to Gecko 50.0 {{geckoRelease("50.0")}}, border styles of rounded corners (with {{cssxref("border-radius")}}) were always rendered as if <code>border-style</code> was <code>solid</code>. This has been fixed in Gecko 50.0.</p> + +<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Border-radius-related CSS properties: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li> +</ul> diff --git a/files/pt-br/web/css/box-shadow/index.html b/files/pt-br/web/css/box-shadow/index.html new file mode 100644 index 0000000000..e94edec82e --- /dev/null +++ b/files/pt-br/web/css/box-shadow/index.html @@ -0,0 +1,265 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +translation_of: Web/CSS/box-shadow +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">O <strong><code>box-shadow</code></strong> é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, os separando com virgulas.</span> Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco e propagação do raio e cor.</p> + +<pre class="brush: css no-line-numbers notranslate">/* offset-x | offset-y | color */ +box-shadow: 60px -16px teal; + +/* offset-x | offset-y | blur-radius | color */ +box-shadow: 10px 5px 5px black; + +/* offset-x | offset-y | blur-radius | spread-radius | color */ +box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + +/* inset | offset-x | offset-y | color */ +box-shadow: inset 5em 1em gold; + +/* Any number of shadows, separated by commas */ +box-shadow: 3px 3px red, -1em 0 0.4em olive; + +/* Global keywords */ +box-shadow: inherit; +box-shadow: initial; +box-shadow: unset; +</pre> + +<pre class="brush: css no-line-numbers notranslate" style="">box-shadow: 60px -16px teal;</pre> + +<pre class="brush: css no-line-numbers notranslate" style="box-shadow: 10px 5px 5px black; float: left; margin: 1em;">box-shadow: 10px 5px 5px black;</pre> + +<pre class="brush: css no-line-numbers notranslate" style="">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre> + +<pre class="brush: css no-line-numbers notranslate" style="box-shadow: inset 5em 1em gold; float: left; margin: 1em;">box-shadow: inset 5em 1em gold;</pre> + +<pre class="brush: css no-line-numbers notranslate" style="box-shadow: 0 0 1em gold; float: left; margin: 1em;">box-shadow: 0 0 1em gold;</pre> + +<pre class="brush: css no-line-numbers notranslate" style="box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold;</pre> + +<pre class="brush: css no-line-numbers notranslate" style="box-shadow: inset 0 0 1em gold, 0 0 1em red; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre> + +<div class="cleared"></div> + +<p>A propriedade box-shadow permite que você adicione uma sombra em quase qualquer elemento. Se um {{cssxref ("border-radius")}} for especificado no elemento com uma box-shadow, a sombra assume os mesmos cantos arredondados. O comando z-ordering de múltiplas box-shadows é o mesmo que múltiplas <a href="/en-US/CSS/text-shadow">text shadows</a> (a primeira sombra especificada está na parte superior).</p> + +<p><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a> é uma ferrament interativa qu permite a criação de <code>box-shadow</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Especificando uma única box-shadow usando:</p> + +<ul> + <li>Dois, três ou quatro valores para <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. + + <ul> + <li>Se apenas dois valores forem definidos, eles serão interpretados como valores de <code><a href="#<offset-x> <offset-y>"><offset-x><offset-y></a></code>.</li> + <li>Se o terceiro valor for dados, é interpretado como <code><a href="#<blur-radius>"><blur-radius></a></code>.</li> + <li>Se o quarto valor for dados, é interpretado como <code><a href="#<spread-radius>"><spread-radius></a></code>.</li> + </ul> + </li> + <li>Opcionalmente, o atributo <code><a href="#inset">inset</a></code>.</li> + <li>Opcionalmente, o valor <code><a href="#<color>"><color></a></code>.</li> +</ul> + +<p>Para especificar mais de uma sombra, separe-as com virgula.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><a id="inset" name="inset"><code>inset</code></a></dt> + <dd>Se não for especificado, a sombra ganha o efeito de como se a caixa fosse aumentada acima do conteúdo).<br> + A presença da palavra-chave <code>inset</code> muda a sombra para dentro da moldura (como se o conteúdo estivesse pressionado dentro da caixa). As sombras de inserção são desenhadas dentro da borda (mesmo as transparentes), acima do plano de fundo, mas abaixo do conteúdo.</dd> + <dt><a id="<offset-x> <offset-y>" name="<offset-x> <offset-y>"><code><offset-x></code> <code><offset-y></code></a></dt> + <dd>Existem dois valores {{cssxref("<length>")}} para configurar o desvio (offset) da sombra:</dd> + <dd><code><offset-x></code> especifica a distância horizontal. Valores negativos colocarão a sombra à esquerda do elemento.</dd> + <dd><code><offset-y></code> especifca a distância vertical. Valores negativos colocam a sombra acima do elemento.</dd> + <dd>Consulte {{cssxref("<length>")}} para as unidades disponíveis.</dd> + <dd>Se ambos os valores forem <code>0</code>, a sombra será posicionada atrás do elemento (e poderá gerar um efeito de desfocagem caso <code><blur-radius></code> e/ou <code><spread-radius></code> estiverem configurados).</dd> + <dt><a id="<blur-radius>" name="<blur-radius>"><code><blur-radius></code></a></dt> + <dd>Este é um terceiro valor para {{cssxref("<length>")}}. Quanto maior for este valor, maior o efeito de desfocagem, desta forma a sombra se tornará maior e mais clara. Valores negativos não são permitidos. Se não for especificado, o valor padrão é <code>0</code> (os limites da sombra serão retos). A especificação não inclui um algoritmo exato de como o raio de esmaecimento deve ser calculado, no entanto, descreve o seguinte:</dd> + <dd> + <blockquote>...para uma sombra com bordas longas e retas, deverá ser criada uma transição de cor do comprimento da distância de desfocagem que é perpendicular e centralizada com as bordas da sombra, e isto deve variar da cor total da sombra do seu ponto central até totalmente transparente no ponto final fora dela.</blockquote> + </dd> + <dt><a id="<spread-radius>" name="<spread-radius>"><code><spread-radius></code></a></dt> + <dd>Este é um quarto valor de {{cssxref("<length>")}}. Valores positivos farão com que a sombra expanda e cresça maior, valores negativos farão com que a sombra encolha. Se não for especificado, o valor padrão é <code>0</code> (a sombra terá o mesmo tamanho do elemento)</dd> + <dt><a id="<color>" name="<color>"><code><color></code></a></dt> + <dd>Consulte {{cssxref("<color>")}} para possiveis palavras-chave e notações. Se não for especificada, a cor que será utilizada vai depender do navegador - geralmente é o valor da propriedade {{cssxref("color")}}, mas tenha em mente que o Safari atualmente imprime uma sombra transparente neste caso.</dd> +</dl> + +<h3 id="Interpolação">Interpolação</h3> + +<p>Each shadow in the list (treating <code>none</code> as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not <code>inset</code>, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one <code>inset</code> and the other not <code>inset</code>, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is <code>transparent</code>, all lengths are <code>0</code>, and whose <code>inset</code> (or not) matches the longer list.</p> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Live_examples">Live examples</h2> + +<ul> + <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li> + <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li> + <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></li> +</ul> + +<h2 class="cleared" id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>10.0<sup>[1]</sup><br> + 1.0{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[3]</sup><br> + {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td> + <td>9.0<sup>[2]</sup></td> + <td>10.5<sup>[1]</sup></td> + <td>5.1<sup>[1]</sup><br> + 3.0 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Multiple shadows</td> + <td>10.0<br> + 1.0{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1<br> + 3.0 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>inset</code> keyword</td> + <td>10.0<br> + 4.0{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1<br> + 5.0 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Spread radius</td> + <td>10.0<br> + 4.0{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1<br> + 5.0 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Edge</th> + <th>Safari Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td> + <p>5.0<sup>[1]</sup><br> + {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown }}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown }}{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Multiple shadows</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0<br> + {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>inset</code> keyword</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0<br> + {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Spread radius</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0<br> + {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p> + +<p>[2] Since version 5.5, Internet Explorer supports Microsoft's <a href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx">DropShadow</a> and <a href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx">Shadow</a> Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3). In order to get <code>box-shadow</code> in IE9 or later, you need to set {{cssxref("border-collapse")}} to <code>separate</code>.</p> + +<p>[3] Gecko 13 {{geckoRelease(13)}} removed support for <code>-moz-box-shadow</code>. Since then, only the unprefixed version is supported. Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p> + +<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{cssxref("<color>")}} data type</li> + <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> diff --git a/files/pt-br/web/css/box-sizing/index.html b/files/pt-br/web/css/box-sizing/index.html new file mode 100644 index 0000000000..2d2edba616 --- /dev/null +++ b/files/pt-br/web/css/box-sizing/index.html @@ -0,0 +1,71 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - Propriedades + - Web +translation_of: Web/CSS/box-sizing +--- +<p>A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos. É possível usar essa propriedade para emular o comportamento dos navegadores (browsers) que não suportam corretamente a especificação da propriedade CSS box model.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax">Sintaxe formal</a>: {{csssyntax("box-sizing")}} +</pre> + +<pre>box-sizing: content-box +box-sizing: border-box + +box-sizing: inherit +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>content-box</code></dt> + <dd>Essa é o estilo padrão, conforme especificado pela norma CSS. As propriedades {{Cssxref("width")}} (largura) e {{Cssxref("height")}} (altura) são medidas incluindo só o conteúdo, mas não o padding, border ou margin. Nota: Padding, border e margin serão fora da box. Exemplo.: Se .box {width: 350px} então se você aplicar uma propriedade {border: 10px solid black;} o resultado renderizado no navegador (browser) será .box {width: 370px;}</dd> + <dt><code>padding-box</code>{{experimental_inline}} {{obsolete_inline}}</dt> + <dd>As propriedades de largura ({{Cssxref("width")}}) e de altura ({{Cssxref("height")}}) incluem o tamanho padding size, mas não incluem a propriedade border ou margem.</dd> + <dt><code>border-box</code></dt> + <dd>As propriedades de largura ({{Cssxref("width")}}) e de altura ({{Cssxref("height")}}) incluem o tamanho padding size e a propriedade border, mas não incluem a propriedade margin.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css">/* funciona em Firefox, WebKit, Opera and IE8+ */ +/* exemplo de uso no navegador Firefox */ + +.exemplo { + -moz-box-sizing: border-box; + box-sizing: border-box; +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores_browsers">Compatibilidade dos navegadores (browsers)</h2> + +<p>{{Compat("css.properties.box-sizing")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/box_model">CSS box model</a> [Eng]</li> +</ul> diff --git a/files/pt-br/web/css/box_model/index.html b/files/pt-br/web/css/box_model/index.html new file mode 100644 index 0000000000..8c0db35cf6 --- /dev/null +++ b/files/pt-br/web/css/box_model/index.html @@ -0,0 +1,62 @@ +--- +title: Box model +slug: Web/CSS/box_model +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<h2 id="Resumo">Resumo</h2> + +<p>Em uma página WEB, cada elemento é representado como um <em>box </em>retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses <em>boxes</em> é o objetivo do mecanismo de renderização.</p> + +<p>No CSS, cada um desses <em>boxes </em>retangulares é descrita usando o <em>box model</em> padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: <strong>margin edge</strong>, <strong>border edge</strong>, <strong>padding edge</strong> e <strong>content edge</strong>.</p> + +<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> + +<p><a name="content"></a>A <strong>área de conteúdo </strong>(content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do <em>content edge</em>; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.</p> + +<p>Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.</p> + +<p><a name="padding"></a>A <strong>área de preenchimento</strong> (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do <em>padding edge,</em> e suas dimensões são a <em>largura do padding-box </em>e a <em>altura do padding-box.</em></p> + +<p>O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.</p> + +<p><a name="border"></a>A <strong>área de borda </strong>(border area<strong>)</strong> estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do <em>border edge</em>, e suas dimensões são a largura e a altura do <em>border-box. </em>Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.</p> + +<p><a name="margin"></a>A <strong>área de margem </strong>(margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do <em>margin edge,</em> e suas dimensões são a largura e a altura do <em>margin-box</em>.</p> + +<p>O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.</p> + +<p>Quando ocorre um <a href="/pt-BR/docs/Web/CSS/margin_collapsing" title="pt-BR/docs/Web/CSS/margin_collapsing">colapso de margens</a>, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.</p> + +<p>Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.</p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Embora mais precisamente formulada, não existem mudanças práticas</td> + </tr> + <tr> + <td>{{ SpecName("CSS1","#formatting-model")}}</td> + <td>{{ Spec2('CSS1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Reference" title="Referência CSS">Referência CSS</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li>Propriedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li> +</ul> diff --git a/files/pt-br/web/css/break-after/index.html b/files/pt-br/web/css/break-after/index.html new file mode 100644 index 0000000000..da446b6402 --- /dev/null +++ b/files/pt-br/web/css/break-after/index.html @@ -0,0 +1,187 @@ +--- +title: break-after +slug: Web/CSS/break-after +translation_of: Web/CSS/break-after +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <strong><code>break-after</code></strong> do <a href="/en-US/docs/Web/CSS">CSS</a> configura como uma quebra de página, coluna ou região deve se comportar após renderizar um elemento. Se nenhum elemento foi renderizado, a propriedade é ignorada.</p> + +<pre class="brush:css no-line-numbers">/* Generic break values */ +break-after: auto; +break-after: avoid; +break-after: always; +break-after: all; + +/* Page break values */ +break-after: avoid-page; +break-after: page; +break-after: left; +break-after: right; +break-after: recto; +break-after: verso; + +/* Column break values */ +break-after: avoid-column; +break-after: column; + +/* Region break values */ +break-after: avoid-region; +break-after: region; + +/* Global values */ +break-after: inherit; +break-after: initial; +break-after: unset; +</pre> + +<p>Each possible break point (in other words, each element boundary) is affected by three properties: the <code>break-after</code> value of the previous element, the {{cssxref("break-before")}} value of the next element, and the {{cssxref("break-inside")}} value of the containing element.</p> + +<p>To determine if a break must be done, the following rules are applied:</p> + +<ol> + <li>If any of the three concerned values is a <em>forced break value</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, or <code>region</code>), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the <code>break-before</code> value has precedence over the <code>break-after</code> value, which itself has precedence over the <code>break-inside</code> value).</li> + <li>If any of the three concerned values is an <em>avoid break value</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, or <code>avoid-column</code>), no such break will be applied at that point.</li> +</ol> + +<p>Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding <code>avoid</code> value.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code>break-after</code> property is specified as one of the keyword values from the list below.</p> + +<h3 id="Values">Values</h3> + +<h4 id="Generic_break_values">Generic break values</h4> + +<dl> + <dt><code>auto</code></dt> + <dd>Allows, but does not force, any break (page, column, or region) to be inserted right after the principal box.</dd> + <dt><code>avoid</code></dt> + <dd>Avoids any break (page, column, or region) from being inserted right after the principal box.</dd> + <dt><code>always</code> {{experimental_inline}}</dt> + <dd>Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.</dd> + <dt><code>all</code> {{experimental_inline}}</dt> + <dd>Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.</dd> +</dl> + +<h4 id="Page_break_values">Page break values</h4> + +<dl> + <dt><code>avoid-page</code></dt> + <dd>Avoids any page break right after the principal box.</dd> + <dt><code>page</code></dt> + <dd>Forces a page break right after the principal box.</dd> + <dt><code>left</code></dt> + <dd>Forces one or two page breaks right after the principal box, whichever will make the next page into a left page.</dd> + <dt><code>right</code></dt> + <dd>Forces one or two page breaks right after the principal box, whichever will make the next page into a right page.</dd> + <dt><code>recto</code> {{experimental_inline}}</dt> + <dd>Forces one or two page breaks right after the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)</dd> + <dt><code>verso</code> {{experimental_inline}}</dt> + <dd>Forces one or two page breaks right after the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)</dd> +</dl> + +<h4 id="Column_break_values">Column break values</h4> + +<dl> + <dt><code>avoid-column</code></dt> + <dd>Avoids any column break right after the principal box.</dd> + <dt><code>column</code></dt> + <dd>Forces a column break right after the principal box.</dd> +</dl> + +<h4 id="Region_break_values">Region break values</h4> + +<dl> + <dt><code>avoid-region</code> {{experimental_inline}}</dt> + <dd>Avoids any region break right after the principal box.</dd> + <dt><code>region</code> {{experimental_inline}}</dt> + <dd>Forces a region break right after the principal box.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Page_break_aliases">Page break aliases</h2> + +<p>For compatibility reasons, the legacy {{cssxref("page-break-after")}} property should be treated by browsers as an alias of <code>break-after</code>. This ensures that sites using <code>page-break-after</code> continue to work as designed. A subset of values should be aliased as follows:</p> + +<table> + <thead> + <tr> + <th scope="col">page-break-after</th> + <th scope="col">break-after</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>auto</code></td> + <td><code>auto</code></td> + </tr> + <tr> + <td><code>left</code></td> + <td><code>left</code></td> + </tr> + <tr> + <td><code>right</code></td> + <td><code>right</code></td> + </tr> + <tr> + <td><code>avoid</code></td> + <td><code>avoid</code></td> + </tr> + <tr> + <td><code>always</code></td> + <td><code>page</code></td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p>The <code>always</code> value of <code>page-break-*</code> was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to <code>page</code>, rather than the <code>always</code> value in the Level 4 spec.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fragmentation', '#break-between', 'break-after')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td>Adds the <code>recto</code> and <code>verso</code> keywords. Changes the media type of this property from <code>paged</code> to {{xref_cssvisual}}. Defines the breaking algorithm with different kinds of breaks.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td> + <td>{{Spec2('CSS3 Regions')}}</td> + <td>Extends the property to handle region breaks. Adds the <code>avoid-region</code> and <code>region</code> keywords.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-after')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Initial definition. Extends the CSS 2.1 {{cssxref("page-break-after")}} property to handle both page and column breaks.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<h3 id="Support_in_multi-column_layout">Support in multi-column layout</h3> + +<p>{{Compat("css.properties.break-after.multicol_context")}}</p> + +<h3 id="Support_in_paged_media">Support in paged media</h3> + +<p>{{Compat("css.properties.break-after.paged_context")}}</p> diff --git a/files/pt-br/web/css/calc()/index.html b/files/pt-br/web/css/calc()/index.html new file mode 100644 index 0000000000..b765f7c051 --- /dev/null +++ b/files/pt-br/web/css/calc()/index.html @@ -0,0 +1,164 @@ +--- +title: calc() +slug: Web/CSS/calc() +tags: + - CSS + - Calculate + - Função + - Função CSS + - Layout + - Web + - calc +translation_of: Web/CSS/calc() +--- +<div>{{CSSRef}}</div> + +<p>A função <strong><code>calc()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, e {{cssxref("<integer>")}} é permitido.</p> + +<pre class="brush: css no-line-numbers notranslate">/* propriedade: calc(expressão) */ +width: calc(100% - 80px); +</pre> + +<h2 id="Syntax">Syntax</h2> + +<p>A função <code>calc()</code> recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrão <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">operator precedence rules</a>:</p> + +<dl> + <dt><code>+</code></dt> + <dd>Adição.</dd> + <dt><code>-</code></dt> + <dd>Subtração.</dd> + <dt><code>*</code></dt> + <dd>Multiplicação. Pelo menos um dos argumentos deve ser um {{cssxref("<number>")}}.</dd> + <dt><code>/</code></dt> + <dd>Divisão. O operador da direita deve ser um {{cssxref("<number>")}}.</dd> +</dl> + +<p>Os operandos na expressão podem ser qualquer valor de sintaxe {{cssxref ("<length>")}}. Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.</p> + +<h3 id="Notas">Notas</h3> + +<ul> + <li>Divisão por 0 (zero) resulta em um erro gerado pelo HTML parser.</li> + <li>Os operadores + e - devem estar cercados por <strong>espaço em branco</strong>. Por exemplo, calc (50% -8px) será analisado como uma porcentagem seguida por um comprimento negativo - uma expressão inválida — enquanto calc (50% - 8px) é uma porcentagem seguida por um operador de subtração e um comprimento. Da mesma forma, calc (8px + -50%) é tratado como um comprimento seguido por um operador de adição e uma porcentagem negativa.</li> + <li>Os operadores <code>*</code> e <code>/</code> não requerem espaço em branco, mas adicioná-lo para consistência é permitido e recomendado.</li> + <li>Expressões matemáticas envolvendo porcentagens de larguras e alturas em colunas de tabela, grupos de coluna de tabela, linhas de tabela, grupos de linhas de tabela e células de tabela em tabelas de layout automáticas e fixas podem ser tratadas como se <code>auto</code> tivesse sido especificado.</li> + <li>É permitido aninhar funções <code>calc ()</code>, em cujo caso as internas são tratadas como parênteses simples.</li> +</ul> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Posicionando_um_objeto_na_tela_usando_margin">Posicionando um objeto na tela usando margin</h3> + +<p><code>calc()</code> torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:</p> + +<pre class="brush: css notranslate">.banner { + position: absolute; + left: 40px; + width: calc(100% - 80px); + border: solid black 1px; + box-shadow: 1px 2px; + background-color: yellow; + padding: 6px; + text-align: center; + box-sizing: border-box; +} +</pre> + +<pre class="brush: html notranslate"><div class="banner">This is a banner!</div></pre> + +<p>{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}</p> + +<h3 id="Dimensionar_campos_de_formulário_automaticamente_para_caber_em_seu_contêiner">Dimensionar campos de formulário automaticamente para caber em seu contêiner</h3> + +<p>Outro caso para <code>calc()</code> é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.</p> + +<p>Veja-mos no CSS:</p> + +<pre class="brush: css notranslate">input { + padding: 2px; + display: block; + width: calc(100% - 1em); +} + +#formbox { + width: calc(100% / 6); + border: 1px solid black; + padding: 4px; +} +</pre> + +<p>Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamos <code>calc()</code> novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:</p> + +<pre class="brush: html notranslate"><form> + <div id="formbox"> + <label>Type something:</label> + <input type="text"> + </div> +</form> +</pre> + +<p>{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}</p> + +<h3 id="calc_inserido_em_variáveis_de_CSS">calc( ) inserido em variáveis de CSS</h3> + +<p>Você também pode utilizar <code>calc()</code> com <a href="/en-US/docs/Web/CSS/CSS_Variables">variáveis de CSS</a>. Considere o seguinte código:</p> + +<pre class="brush: css notranslate">.foo { + --widthA: 100px; + --widthB: calc(var(--widthA) / 2); + --widthC: calc(var(--widthB) / 2); + width: var(--widthC); +}</pre> + +<p>Depois que todas as variáveis forem expandidas, o valor de <code>widthC</code> será <code>calc( calc( 100px / 2) / 2)</code>, então quando for atribuído à propriedade de largura <code>.foo</code>, todos os <code>calc()</code> internos (não importa o qquão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade <code>width</code> será eventualmente <code>calc( ( 100px / 2) / 2)</code>, i.e. <code>25px</code>. Resumindo: um <code>calc()</code> dentro de um <code>calc()</code> é idêntico à parênteses.</p> + +<h2 id="Questões_de_acessibilidade">Questões de acessibilidade</h2> + +<p>Quando <code>calc()</code> é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma <a href="/en-US/docs/Web/CSS/length#Relative_length_units">unidade de comprimento relativo</a>, por exemplo:</p> + +<pre class="brush: css notranslate">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>Isso garante que o tamanho do texto será redimensionado se a página for ampliada.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de pull.</div> + +<p>{{Compat("css.types.calc")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li> +</ul> diff --git a/files/pt-br/web/css/class_selectors/index.html b/files/pt-br/web/css/class_selectors/index.html new file mode 100644 index 0000000000..dc624c3733 --- /dev/null +++ b/files/pt-br/web/css/class_selectors/index.html @@ -0,0 +1,106 @@ +--- +title: Seletores de classe +slug: Web/CSS/Class_selectors +tags: + - CSS + - Classe + - Referencia + - Seletores +translation_of: Web/CSS/Class_selectors +--- +<p>O <strong>seletor de classes</strong> <a href="/en-US/docs/CSS">CSS</a> corresponde aos elementos com base no conteúdo de seus atributos <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class">class</a>.</code></p> + +<pre class="brush: css no-line-numbers notranslate">/* Todos os elementos com class="espaçoso" */ +.espaçoso { + margin: 2em; +} + +/* Todos os elementos <li> com class="espaçoso" */ +li.espaçoso { + margin: 2em; +} + +/* Todos os elementos <li> cujo conteúdo do atributo class possua "espaçoso" e "elegante" */ +/* Por exemplo, class="elegante antigo espaçoso" */ +li.espaçoso.elegante { + margin: 2em; +} +</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">.classe_nome { <em>propriedades de estilo</em> }</pre> + +<p>Observe que isso é o mesmo que <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">seletor de atributo</a></code>:</p> + +<pre class="syntaxbox notranslate">[classe~=classe_nome] { <em>propriedades de estilo</em> }</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.vermelho { + color: #f33; +} + +.amarelo-bg { + background: #ffa; +} + +.elegante { + font-weight: bold; + text-shadow: 4px 4px 3px #77f; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p class="vermelho">Este parágrafo tem o texto vermelho.</p> +<p class="vermelho amarelo-bg">Este parágrafo possui texto em vermelho e fundo amarelo.</p> +<p class="vermelho elegante">Este parágrafo possui texto em vermelho e uma propriedade de estilo "elegante".</p> +<p>Este é um parágrafo comum.</p> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sem mudança</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, por favor consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento (pull request).</div> + +<p>{{Compat("css.selectors.class")}}</p> diff --git a/files/pt-br/web/css/clear/index.html b/files/pt-br/web/css/clear/index.html new file mode 100644 index 0000000000..6b108c4ece --- /dev/null +++ b/files/pt-br/web/css/clear/index.html @@ -0,0 +1,239 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/clear +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <strong><code>clear do</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica se um elemento pode ter elementos <a href="/en-US/docs/CSS/float">flutuantes</a> ao seu lado ou se devem ser movidos para abaixo dele (clear). Essa propriedade se aplica à elementos flutuantes ou não flutuantes. </p> + +<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div> + +<p class="hidden">O fonte desse exemplo está armazenado em um repositório no Github. Se você gostaria de contribuir com esse exemplo, por favor clone o projeto <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</p> + +<p>Quando essa propriedade é aplicada em elementos não flutuantes, ele move a borda (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">border edge</a>) desse elemento para a borda da margem (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">margin edge</a>) de todos os elementos flutuantes relevantes. Ocorre um colapso das margens verticais dos elementos não flutuantes.</p> + +<p>As margens verticais entre dois elementos flutuantes não irão sofrer esse colapso. Quando aplicada a elementos flutuantes, a borda de margem (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">margin edge</a>) do elemento inferior é movida abaixo da borda de margem (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">border edge</a>) de todos os elementos flutuantes relevantes. Isso afeta a posição dos elementos flutuantes posteriores, sendo que os elementos flutuantes posteriores não podem ser posicionados acima dos anteriores.</p> + +<p>Os elementos flutuantes que devem ser limpos (clear) são os elementos anteriores dentro do mesmo contexto de bloco (<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a>).</p> + +<div class="note"> +<p><strong>Nota:</strong> se um elemento possuir apenas elementos flutuantes, sua altura é zerada. Se você quiser que o mesmo seja redimensionado, de modo que contenha elementos flutuantes dentro dele, você precisa limpar(clear) seus filhos automaticamente. Isso é chamado clearfix, e uma maneira de fazê-lo é adicionando um {{cssxref("::after")}} pseudo-elemento com a propriedade <code>clear.</code></p> + +<pre class="brush: css">#container::after { + content: ""; + display: block; + clear: both; +} +</pre> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valores chaves */ +clear: none; +clear: left; +clear: right; +clear: both; +clear: inline-start; +clear: inline-end; + +/* Valores globais */ +clear: inherit; +clear: initial; +clear: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>É uma palavra-chave que indica que o elemento não foi movido para baixo para limpar os elementos flutuantes anteriores.</dd> + <dt><code>left</code></dt> + <dd>É uma palavra-chave que indica que o elemento foi movido para baixo para limpar os últimos flutuantes da esquerda.</dd> + <dt><code>right</code></dt> + <dd>É uma palavra-chave que indica que o elemento foi movido para baixo para liberar os últimos elementos flutuantes.</dd> + <dt><code>both</code></dt> + <dd>É uma palavra-chave que indica que o elemento será movido para baixo para limpar os elementos flutuantes do lado esquerdo e direito.</dd> + <dt><code>inline-start</code></dt> + <dd>É uma palavra-chave que indica que o elemento será movido para baixo para limpar os elementos flutuantes no lado inicial de seu bloco, ou seja, os da esquerda flutuam nos scripts de ltr e os da direita nos scripts de rtl.</dd> + <dt><code>inline-end</code></dt> + <dd>É uma palavra-chave que indica que o elemento será movido para baixo para limpar os flutuantes no final de seu bloco, os da direita nos scripts de ltr e os flutuantes da esquerda nos scripts de rtl.</dd> +</dl> + +<h3 id="Sintaxe_2">Sintaxe</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="clear:_left" name="clear:_left">clear: left</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="left">This paragraph clears left.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.left { + border: 1px solid black; + clear: left; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width: 20%; +} +.red { + float: left; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 50%; +} +</pre> + +<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p> + +<h3 id="clear:_right" name="clear:_right">clear: right</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="right">This paragraph clears right.</p> +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.right { + border: 1px solid black; + clear: right; +} +.black { + float: right; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 50%; +}</pre> + +<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p> + +<h3 id="clear:_both" name="clear:_both">clear: both</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="both">This paragraph clears both.</p> +</div> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.both { + border: 1px solid black; + clear: both; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 45%; +}</pre> + +<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Adds the values <code>inline-start</code> and <code>inline-end</code></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes, though details are clarified.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#clear', 'clear')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos browsers</h2> + + + +<p>{{Compat("css.properties.clear")}}</p> + +<div> </div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">Box model</a></li> +</ul> diff --git a/files/pt-br/web/css/color/index.html b/files/pt-br/web/css/color/index.html new file mode 100644 index 0000000000..2248c1ebe8 --- /dev/null +++ b/files/pt-br/web/css/color/index.html @@ -0,0 +1,168 @@ +--- +title: Propriedade color do CSS +slug: Web/CSS/color +tags: + - CSS + - HTML + - Layout + - Web + - color +translation_of: Web/CSS/color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">A propriedade <strong><code>color</code></strong> do CSS definine o valor da cor de um elemento com seu conteúdo em texto e seus decorações (estilos). Também define o valorer da {{cssxref("currentcolor")}}, no qual pode ser usado um valor indireto de outra propriedade, e tem como padrão as cores de outras propriedades (enquanto não definida), tal como a propriedade {{cssxref("border-color")}}.</span></p> + +<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div> + +<p class="hidden"> </p> + +<p class="hidden">A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você gostaria de contribuir para o projeto de exemplos interativos, acesse <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie uma sugestão.</p> + +<p>Para uma visão geral de como usar a propriedade color e semelhantes no HTML, veja <a href="/en-US/docs/Web/CSS/Como_começar/Cor">Cor - CSS, como começar</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valores com Palavras-chave */ +color: white; /* Aqui será definida a cor atual*/ + +/* Valores com Palavras-chave */ +/* color define a cor do texto no elemento*/ +color: red; /* Define como 'vermelho'*/ +color: blue; /* Define como 'laranja'*/ +color: cyan; /* Define como 'verde-água'*/ + +/* Obs: Utilizando "light" antes da cor, ela ficará clara. + ex: lightblue; + E utilizando "dark", ela ficará mais escura. + ex: darkblue; +*/ + +/* Cores com valores Hexa-decimais, +ou seja de 1 à 15, sendo de 0 à 9 normais,mas de 10 à 15 +são as letras do alfabeto , logo de "a" à "f". */ + +color: #090; +color: #0099fg; +color: #090a; +color: #0099bcaa; + +/* Valores "rgb" ou "rgba", +ou seja, o primeiro é vermelho, o segundo é verde e +o terceiro é azul, o "a" é o nível de transparência da cor, +e vai de 0 à 1; +Ex: preto meio transparênte = rgba(255,255,255,0.5); */ + +color: rgb(34, 12, 64, 0.6); +color: rgba(34, 12, 64, 0.6); +color: rgb(34 12 64 / 0.6); +color: rgba(34 12 64 / 0.3); +color: rgb(34.0 12 64 / 60%); +color: rgba(34.6 12 64 / 30%); + +/* Valores "hsl()", sendo +hsl(<em>num da cor"1-369"</em>, <em>saturação"0-100"</em>, <em>luminosidade"<em>0-100")</em></em>*/ +color: hsl(30, 100%, 50%, 0.6); +color: hsla(30, 100%, 50%, 0.6); +color: hsl(30 100% 50% / 0.6); +color: hsla(30 100% 50% / 0.6); +color: hsl(30.0 100% 50% / 60%); +color: hsla(30.2 100% 50% / 60%); + +/* Valores globais, pega algun valor já definido, +para todo o <body>, por exemplo. */ +color: inherit; +color: initial; +color: unset; +</pre> + +<p>A propriedade <code>color</code> é especificada somente com o valor {{cssxref("<color>")}} .</p> + +<p>Note que o valor sempre será uniforme para {{cssxref("color")}}. Não podendo ter {{cssxref("<gradient>")}}(gradiente), que é atualmente um tipo para {{cssxref("<image>")}}.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd> Define a cor dos caracteres presentes no elemento a ser estilizado.</dd> +</dl> + +<h3 id="Syntaxe_formal">Syntaxe formal</h3> + +<pre class="syntaxbox">p { color: gray; }</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>A seguir, você verá várias maneira de tornar a cor de um texto num parágrafo vermelha:</p> + +<pre class="brush: css">p { color: red; } +p { color: #f00; } +p { color: #ff0000; } +p { color: rgb(255,0,0); } +p { color: rgb(100%, 0%, 0%); } +p { color: hsl(0, 100%, 50%); } + +/* 50% translúcido(transparênte) */ +p { color: rgba(255, 0, 0, 0.5); } +p { color: hsla(0, 100%, 50%, 0.5); } +</pre> + +<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2> + +<p>É extremamente crucial que todo site, contenha um contraste de cores adequado, para que pessoas com níveis baixos de visão tenha um aboa experiência ao utilizar o site.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td> + <td>{{Spec2('CSS4 Colors')}}</td> + <td>Adiciona syntaxes sem emendas para as funções <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> e <code>hsla()</code> . Permite valores alpha em <code>rgb()</code> e <code>hsl()</code>, dirando <code>rgba()</code> e <code>hsla()</code> em (descontinuada).<br> + Adiciona a palavra-chave <code>rebeccapurple</code>.<br> + Adiciona valores de cores hexa-decimais de 4 à 8 dígitos, where the last digit(s) represents the alpha value.<br> + Adiona as funcões <code>hwb()</code>, <code>device-cmyk()</code> e <code>color()</code> .</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Define <code>color</code> como animável.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Deprecia as cores do Sistema. Adiciona cores <a href="/en-US/docs/Web/SVG">SVG</a>. Adicionando as funções <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Adiciona a cor laranja <code>orange</code> color e o Sistema de Cores.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#color', 'color')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">A tabela de compatibilidade foi gerado utilizando dados estruturados da plataforma GitHub. Caso você queira ajudar com informações, por favor confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie sua sugestão.</div> + +<p>{{Compat("css.properties.color")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/color_value">Tipo de dado <color> no CSS.</a></li> +</ul> diff --git a/files/pt-br/web/css/color_value/index.html b/files/pt-br/web/css/color_value/index.html new file mode 100644 index 0000000000..501ae9fa46 --- /dev/null +++ b/files/pt-br/web/css/color_value/index.html @@ -0,0 +1,1521 @@ +--- +title: <color> +slug: Web/CSS/color_value +tags: + - CSS + - Layout + - Referencia + - Tipo de dado CSS + - Web +translation_of: Web/CSS/color_value +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>O tipo de dado <a href="/en-US/docs/Web/CSS">CSS</a> <code><color></code> indica uma <a class="external" href="https://en.wikipedia.org/wiki/SRGB">cor no espaço sRGB</a>. Uma cor pode ser descrita em qualquer uma destas formas:</p> + +<ul> + <li>usando uma <em>palavra-chave</em></li> + <li>usando o sistema de <a class="external" href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">coordenada-cúbica RGB</a> (via #-hexadecimal ou das notações funcional <code>rgb()</code> e <code>rgba()</code>)</li> + <li>usando o sistema de <a class="external" href="https://en.wikipedia.org/wiki/HSL_and_HSV">coordenada-cilíndrica HSL</a> (via <code>hsl()</code> e notações funcionais <code>hsla()</code> )</li> +</ul> + +<p>Observe que a lista de valores de cores aceitas foi estendida à medida que a especificação evoluiu, culminando com as cores CSS3 mais recentes.</p> + +<p>Associado à cor no espaço sRGB, um valor <color> também pode consistir de uma coordenada de <em>valor de transparência</em> <a class="external" href="https://en.wikipedia.org/wiki/Alpha_compositing">canal-alfa</a>, Indicando como a cor deve se <a class="external" href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">composta</a> com sua cor de fundo.</p> + +<p>Embora os valores de cores CSS sejam definidos com precisão, eles podem aparecer de forma diferente em dispositivos de saída diferentes. A maioria deles não está calibrada e alguns navegadores não suportam o <a href="https://pt.wikipedia.org/wiki/Perfil_de_cores_ICC">perfil de cores</a> dos dispositivos de saída. Sem estes, a renderização de cores pode variar muito.</p> + +<div class="note"><strong>Nota:</strong> A recomendação <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> do W3C aconselha fortemente aos autores web não usarem cor como o único meio para transmitir uma mensagem específica, ação ou resultado. Alguns usuários têm problemas em distinguir cores e as informações transmitidas podem não ser compreendidas. Claro, isso não impede o uso da cor, mas o seu uso apenas como o único meio para descrever certas coisas (veja <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Cor e contraste de cor</a> para mais informações).</div> + +<h2 id="Interpolação">Interpolação</h2> + +<p>Valores do tipo de dados CSS <code><color></code> podem ser interpolados para realizar animações ou para criar valores <gradient>. Nesse caso, eles são interpolados em cada um de seus componentes vermelho, verde, azul, cada um manipulado como um número real, de ponto flutuante. Observe que a interpolação de cores ocorre no <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">espaço de cores sRGBA alfa-pré-multiplicado</a> para evitar que cores cinzentas inesperadas apareçam. Nas animações, a velocidade da interpolação é determinada pela <a href="/en-US/docs/Web/CSS/timing-function">função de temporização</a> associada à animação.</p> + +<h2 id="Valores">Valores</h2> + +<p>Existem várias maneiras de descrever um valor <<code>color></code>.</p> + +<h3 id="Palavras-chave_de_cores">Palavras-chave de cores</h3> + +<p>As palavras-chave de cor são identificadores não sensíveis a maiúsculas e minúsculas que representam uma cor específica, ex.: <code>red</code>, <code>blue</code>, <code>brown</code>, ou <code>lightseagreen</code>. O nome descreve a cor, embora seja principalmente artificial. A lista de valores aceitos variou muito ao longo das diferentes especificações:</p> + +<ul> + <li>CSS nível 1 aceita apenas16 cores básicas, denominadas <em>cores VGA </em>já que foram tiradas do conjunto de cores exibíveis das placas gráficas <a class="external" href="https://pt.wikipedia.org/wiki/Video_Graphics_Array">VGA</a>.</li> + <li>CSS nível 2 Adicionou a palavra-chave <code>orange</code>.</li> + <li>Desde o início, os navegadores aceitaram outras cores, principalmente a lista de cores nomeadas X11 já que alguns dos primeiros navegadores foram aplicações X11, embora com algumas diferenças. O SVG 1.0 foi o primeiro padrão a definir formalmente essas palavras-chave; As cores no CSS nível 3 também formalmente definiram essas palavras-chave. Elas são muitas vezes referidas como <em>palavras-chave de cor estendida</em>, <em>cores X11</em> ou <em>cores SVG</em>.</li> +</ul> + +<p>Existem algumas restrições a serem consideradas ao usar palavras-chave:</p> + +<ul> + <li>Com exceção das 16 cores básicas comuns com HTML, as outras não podem ser usadas em HTML. O HTML vai converter esses valores desconhecidos com um algoritmo específico levando a cores completamente diferentes. Essas palavras-chave só devem ser usadas em SVG & CSS.</li> + <li>Palavras-chave desconhecidas tornam a propriedade CSS inválida. Propriedades inválidas sendo ignoradas, a cor não terá efeito. Esse é um comportamento diferente do HTML.</li> + <li>Nenhuma palavra-chave de core definida em CSS têm qualquer transparência — eles são cores simples, sólidas.</li> + <li>Várias palavras-chave indicam as mesmas cores: + <ul> + <li><code>darkgray</code> / <code>darkgrey</code></li> + <li><code>darkslategray</code> / <code>darkslategrey</code></li> + <li><code>dimgray</code> / <code>dimgrey</code></li> + <li><code>lightgray</code> / <code>lightgrey</code></li> + <li><code>lightslategray</code> / <code>lightslategrey</code></li> + <li><code>gray</code> / <code>grey</code></li> + <li><code>slategray</code> / <code>slategrey</code></li> + </ul> + </li> + <li>Embora os nomes das palavras-chave tenham sido tomadas pelos nomes de cores X11 habituais, a cor pode divergir da cor do sistema correspondente em sistemas X11 como estes são adaptados para o hardware específico pelo fabricante.</li> +</ul> + +<table> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Cor</th> + <th scope="col">Palavra-chave</th> + <th scope="col">valores hex RGB</th> + <th scope="col">Resultado</th> + </tr> + </thead> + <tbody> + <tr style="position: relative;"> + <td rowspan="16">{{SpecName("CSS1")}}</td> + <td style="background: #000;"> </td> + <td style="text-align: center;"><code>black</code></td> + <td><code>#000000</code></td> + <td style="background: black;"> </td> + </tr> + <tr> + <td style="background: #C0C0C0;"> </td> + <td style="text-align: center;"><code>silver</code></td> + <td><code>#c0c0c0</code></td> + <td style="background: silver;"> </td> + </tr> + <tr> + <td style="background: #808080;"> </td> + <td style="text-align: center;"><code>gray</code></td> + <td><code>#808080</code></td> + <td style="background: gray;"> </td> + </tr> + <tr> + <td style="background: #FFF;"> </td> + <td style="text-align: center;"><code>white</code></td> + <td><code>#ffffff</code></td> + <td style="background: white;"> </td> + </tr> + <tr> + <td style="background: #800000;"> </td> + <td style="text-align: center;"><code>maroon</code></td> + <td><code>#800000</code></td> + <td style="background: maroon;"> </td> + </tr> + <tr> + <td style="background: #F00;"> </td> + <td style="text-align: center;"><code>red</code></td> + <td><code>#ff0000</code></td> + <td style="background: red;"> </td> + </tr> + <tr> + <td style="background: #800080;"> </td> + <td style="text-align: center;"><code>purple</code></td> + <td><code>#800080</code></td> + <td style="background: purple;"> </td> + </tr> + <tr> + <td style="background: #F0F;"> </td> + <td style="text-align: center;"><code>fuchsia</code></td> + <td><code>#ff00ff</code></td> + <td style="background: fuchsia;"> </td> + </tr> + <tr> + <td style="background: #008000;"> </td> + <td style="text-align: center;"><code>green</code></td> + <td><code>#008000</code></td> + <td style="background: green;"> </td> + </tr> + <tr> + <td style="background: #0F0;"> </td> + <td style="text-align: center;"><code>lime</code></td> + <td><code>#00ff00</code></td> + <td style="background: lime;"> </td> + </tr> + <tr> + <td style="background: #808000;"> </td> + <td style="text-align: center;"><code>olive</code></td> + <td><code>#808000</code></td> + <td style="background: olive;"> </td> + </tr> + <tr> + <td style="background: #FF0;"> </td> + <td style="text-align: center;"><code>yellow</code></td> + <td><code>#ffff00</code></td> + <td style="background: yellow;"> </td> + </tr> + <tr> + <td style="background: #000080;"> </td> + <td style="text-align: center;"><code>navy</code></td> + <td><code>#000080</code></td> + <td style="background: navy;"> </td> + </tr> + <tr> + <td style="background: #00F;"> </td> + <td style="text-align: center;"><code>blue</code></td> + <td><code>#0000ff</code></td> + <td style="background: blue;"> </td> + </tr> + <tr> + <td style="background: #008080;"> </td> + <td style="text-align: center;"><code>teal</code></td> + <td><code>#008080</code></td> + <td style="background: teal;"> </td> + </tr> + <tr> + <td style="background: #0FF;"> </td> + <td style="text-align: center;"><code>aqua</code></td> + <td><code>#00ffff</code></td> + <td style="background: aqua;"> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td style="background: #FFA500;"> </td> + <td style="text-align: center;"><code>orange</code></td> + <td><code>#ffa500</code></td> + <td style="background: orange;"> </td> + </tr> + <tr> + <td rowspan="129">{{SpecName("CSS3 Colors")}}</td> + <td style="background: #f0f8ff;"> </td> + <td style="text-align: center;"><code>aliceblue</code></td> + <td><code>#f0f8ff</code></td> + <td style="background: aliceblue;"> </td> + </tr> + <tr> + <td style="background: #faebd7;"> </td> + <td style="text-align: center;"><code>antiquewhite</code></td> + <td><code>#faebd7</code></td> + <td style="background: antiquewhite;"> </td> + </tr> + <tr> + <td style="background: #7fffd4;"> </td> + <td style="text-align: center;"><code>aquamarine</code></td> + <td><code>#7fffd4</code></td> + <td style="background: aquamarine;"> </td> + </tr> + <tr> + <td style="background: #f0ffff;"> </td> + <td style="text-align: center;"><code>azure</code></td> + <td><code>#f0ffff</code></td> + <td style="background: azure;"> </td> + </tr> + <tr> + <td style="background: #f5f5dc;"> </td> + <td style="text-align: center;"><code>beige</code></td> + <td><code>#f5f5dc</code></td> + <td style="background: beige;"> </td> + </tr> + <tr> + <td style="background: #ffe4c4;"> </td> + <td style="text-align: center;"><code>bisque</code></td> + <td><code>#ffe4c4</code></td> + <td style="background: bisque;"> </td> + </tr> + <tr> + <td style="background: #ffebcd;"> </td> + <td style="text-align: center;"><code>blanchedalmond</code></td> + <td><code>#ffebcd</code></td> + <td style="background: blanchedalmond;"> </td> + </tr> + <tr> + <td style="background: #8a2be2;"> </td> + <td style="text-align: center;"><code>blueviolet</code></td> + <td><code>#8a2be2</code></td> + <td style="background: blueviolet;"> </td> + </tr> + <tr> + <td style="background: #a52a2a;"> </td> + <td style="text-align: center;"><code>brown</code></td> + <td><code>#a52a2a</code></td> + <td style="background: brown;"> </td> + </tr> + <tr> + <td style="background: #deb887;"> </td> + <td style="text-align: center;"><code>burlywood</code></td> + <td><code>#deb887</code></td> + <td style="background: burlywood;"> </td> + </tr> + <tr> + <td style="background: #5f9ea0;"> </td> + <td style="text-align: center;"><code>cadetblue</code></td> + <td><code>#5f9ea0</code></td> + <td style="background: cadetblue;"> </td> + </tr> + <tr> + <td style="background: #7fff00;"> </td> + <td style="text-align: center;"><code>chartreuse</code></td> + <td><code>#7fff00</code></td> + <td style="background: chartreuse;"> </td> + </tr> + <tr> + <td style="background: #d2691e;"> </td> + <td style="text-align: center;"><code>chocolate</code></td> + <td><code>#d2691e</code></td> + <td style="background: chocolate;"> </td> + </tr> + <tr> + <td style="background: #ff7f50;"> </td> + <td style="text-align: center;"><code>coral</code></td> + <td><code>#ff7f50</code></td> + <td style="background: coral;"> </td> + </tr> + <tr> + <td style="background: #6495ed;"> </td> + <td style="text-align: center;"><code>cornflowerblue</code></td> + <td><code>#6495ed</code></td> + <td style="background: cornflowerblue;"> </td> + </tr> + <tr> + <td style="background: #fff8dc;"> </td> + <td style="text-align: center;"><code>cornsilk</code></td> + <td><code>#fff8dc</code></td> + <td style="background: cornsilk;"> </td> + </tr> + <tr> + <td style="background: #dc143c;"> </td> + <td style="text-align: center;"><code>crimson</code></td> + <td><code>#dc143c</code></td> + <td style="background: crimson;"> </td> + </tr> + <tr> + <td style="background: #0ff;"> </td> + <td style="text-align: center;"><code>cyan</code></td> + <td><code>#00ffff</code></td> + <td style="background: cyan;"> </td> + </tr> + <tr> + <td style="background: #00008b;"> </td> + <td style="text-align: center;"><code>darkblue</code></td> + <td><code>#00008b</code></td> + <td style="background: darkblue;"> </td> + </tr> + <tr> + <td style="background: #008b8b;"> </td> + <td style="text-align: center;"><code>darkcyan</code></td> + <td><code>#008b8b</code></td> + <td style="background: darkcyan;"> </td> + </tr> + <tr> + <td style="background: #b8860b;"> </td> + <td style="text-align: center;"><code>darkgoldenrod</code></td> + <td><code>#b8860b</code></td> + <td style="background: darkgoldenrod;"> </td> + </tr> + <tr> + <td style="background: #a9a9a9;"> </td> + <td style="text-align: center;"><code>darkgray</code></td> + <td><code>#a9a9a9</code></td> + <td style="background: darkgray;"> </td> + </tr> + <tr> + <td style="background: #006400;"> </td> + <td style="text-align: center;"><code>darkgreen</code></td> + <td><code>#006400</code></td> + <td style="background: darkgreen;"> </td> + </tr> + <tr> + <td style="background: #a9a9a9;"> </td> + <td style="text-align: center;"><code>darkgrey</code></td> + <td><code>#a9a9a9</code></td> + <td style="background: darkgrey;"> </td> + </tr> + <tr> + <td style="background: #bdb76b;"> </td> + <td style="text-align: center;"><code>darkkhaki</code></td> + <td><code>#bdb76b</code></td> + <td style="background: darkkhaki;"> </td> + </tr> + <tr> + <td style="background: #8b008b;"> </td> + <td style="text-align: center;"><code>darkmagenta</code></td> + <td><code>#8b008b</code></td> + <td style="background: darkmagenta;"> </td> + </tr> + <tr> + <td style="background: #556b2f;"> </td> + <td style="text-align: center;"><code>darkolivegreen</code></td> + <td><code>#556b2f</code></td> + <td style="background: darkolivegreen;"> </td> + </tr> + <tr> + <td style="background: #ff8c00;"> </td> + <td style="text-align: center;"><code>darkorange</code></td> + <td><code>#ff8c00</code></td> + <td style="background: darkorange;"> </td> + </tr> + <tr> + <td style="background: #9932cc;"> </td> + <td style="text-align: center;"><code>darkorchid</code></td> + <td><code>#9932cc</code></td> + <td style="background: darkorchid;"> </td> + </tr> + <tr> + <td style="background: #8b0000;"> </td> + <td style="text-align: center;"><code>darkred</code></td> + <td><code>#8b0000</code></td> + <td style="background: darkred;"> </td> + </tr> + <tr> + <td style="background: #e9967a;"> </td> + <td style="text-align: center;"><code>darksalmon</code></td> + <td><code>#e9967a</code></td> + <td style="background: darksalmon;"> </td> + </tr> + <tr> + <td style="background: #8fbc8f;"> </td> + <td style="text-align: center;"><code>darkseagreen</code></td> + <td><code>#8fbc8f</code></td> + <td style="background: darkseagreen;"> </td> + </tr> + <tr> + <td style="background: #483d8b;"> </td> + <td style="text-align: center;"><code>darkslateblue</code></td> + <td><code>#483d8b</code></td> + <td style="background: darkslateblue;"> </td> + </tr> + <tr> + <td style="background: #2f4f4f;"> </td> + <td style="text-align: center;"><code>darkslategray</code></td> + <td><code>#2f4f4f</code></td> + <td style="background: darkslategray;"> </td> + </tr> + <tr> + <td style="background: #2f4f4f;"> </td> + <td style="text-align: center;"><code>darkslategrey</code></td> + <td><code>#2f4f4f</code></td> + <td style="background: darkslategrey;"> </td> + </tr> + <tr> + <td style="background: #00ced1;"> </td> + <td style="text-align: center;"><code>darkturquoise</code></td> + <td><code>#00ced1</code></td> + <td style="background: darkturquoise;"> </td> + </tr> + <tr> + <td style="background: #9400d3;"> </td> + <td style="text-align: center;"><code>darkviolet</code></td> + <td><code>#9400d3</code></td> + <td style="background: darkviolet;"> </td> + </tr> + <tr> + <td style="background: #ff1493;"> </td> + <td style="text-align: center;"><code>deeppink</code></td> + <td><code>#ff1493</code></td> + <td style="background: deeppink;"> </td> + </tr> + <tr> + <td style="background: #00bfff;"> </td> + <td style="text-align: center;"><code>deepskyblue</code></td> + <td><code>#00bfff</code></td> + <td style="background: deepskyblue;"> </td> + </tr> + <tr> + <td style="background: #696969;"> </td> + <td style="text-align: center;"><code>dimgray</code></td> + <td><code>#696969</code></td> + <td style="background: dimgray;"> </td> + </tr> + <tr> + <td style="background: #696969;"> </td> + <td style="text-align: center;"><code>dimgrey</code></td> + <td><code>#696969</code></td> + <td style="background: dimgrey;"> </td> + </tr> + <tr> + <td style="background: #1e90ff;"> </td> + <td style="text-align: center;"><code>dodgerblue</code></td> + <td><code>#1e90ff</code></td> + <td style="background: dodgerblue;"> </td> + </tr> + <tr> + <td style="background: #b22222;"> </td> + <td style="text-align: center;"><code>firebrick</code></td> + <td><code>#b22222</code></td> + <td style="background: firebrick;"> </td> + </tr> + <tr> + <td style="background: #fffaf0;"> </td> + <td style="text-align: center;"><code>floralwhite</code></td> + <td><code>#fffaf0</code></td> + <td style="background: floralwhite;"> </td> + </tr> + <tr> + <td style="background: #228b22;"> </td> + <td style="text-align: center;"><code>forestgreen</code></td> + <td><code>#228b22</code></td> + <td style="background: forestgreen;"> </td> + </tr> + <tr> + <td style="background: #dcdcdc;"> </td> + <td style="text-align: center;"><code>gainsboro</code></td> + <td><code>#dcdcdc</code></td> + <td style="background: gainsboro;"> </td> + </tr> + <tr> + <td style="background: #f8f8ff;"> </td> + <td style="text-align: center;"><code>ghostwhite</code></td> + <td><code>#f8f8ff</code></td> + <td style="background: ghostwhite;"> </td> + </tr> + <tr> + <td style="background: #ffd700;"> </td> + <td style="text-align: center;"><code>gold</code></td> + <td><code>#ffd700</code></td> + <td style="background: gold;"> </td> + </tr> + <tr> + <td style="background: #daa520;"> </td> + <td style="text-align: center;"><code>goldenrod</code></td> + <td><code>#daa520</code></td> + <td style="background: goldenrod;"> </td> + </tr> + <tr> + <td style="background: #adff2f;"> </td> + <td style="text-align: center;"><code>greenyellow</code></td> + <td><code>#adff2f</code></td> + <td style="background: greenyellow ;"> </td> + </tr> + <tr> + <td style="background: #808080;"> </td> + <td style="text-align: center;"><code>grey</code></td> + <td><code>#808080</code></td> + <td style="background: grey;"> </td> + </tr> + <tr> + <td style="background: #f0fff0;"> </td> + <td style="text-align: center;"><code>honeydew</code></td> + <td><code>#f0fff0</code></td> + <td style="background: honeydew;"> </td> + </tr> + <tr> + <td style="background: #ff69b4;"> </td> + <td style="text-align: center;"><code>hotpink</code></td> + <td><code>#ff69b4</code></td> + <td style="background: hotpink;"> </td> + </tr> + <tr> + <td style="background: #cd5c5c;"> </td> + <td style="text-align: center;"><code>indianred</code></td> + <td><code>#cd5c5c</code></td> + <td style="background: indianred;"> </td> + </tr> + <tr> + <td style="background: #4b0082;"> </td> + <td style="text-align: center;"><code>indigo</code></td> + <td><code>#4b0082</code></td> + <td style="background: indigo;"> </td> + </tr> + <tr> + <td style="background: #fffff0;"> </td> + <td style="text-align: center;"><code>ivory</code></td> + <td><code>#fffff0</code></td> + <td style="background: ivory;"> </td> + </tr> + <tr> + <td style="background: #f0e68c;"> </td> + <td style="text-align: center;"><code>khaki</code></td> + <td><code>#f0e68c</code></td> + <td style="background: khaki;"> </td> + </tr> + <tr> + <td style="background: #e6e6fa;"> </td> + <td style="text-align: center;"><code>lavender</code></td> + <td><code>#e6e6fa</code></td> + <td style="background: lavender;"> </td> + </tr> + <tr> + <td style="background: #fff0f5;"> </td> + <td style="text-align: center;"><code>lavenderblush</code></td> + <td><code>#fff0f5</code></td> + <td style="background: lavenderblush ;"> </td> + </tr> + <tr> + <td style="background: #7cfc00;"> </td> + <td style="text-align: center;"><code>lawngreen</code></td> + <td><code>#7cfc00</code></td> + <td style="background: lawngreen;"> </td> + </tr> + <tr> + <td style="background: #fffacd;"> </td> + <td style="text-align: center;"><code>lemonchiffon</code></td> + <td><code>#fffacd</code></td> + <td style="background: lemonchiffon;"> </td> + </tr> + <tr> + <td style="background: #add8e6;"> </td> + <td style="text-align: center;"><code>lightblue</code></td> + <td><code>#add8e6</code></td> + <td style="background: lightblue;"> </td> + </tr> + <tr> + <td style="background: #f08080;"> </td> + <td style="text-align: center;"><code>lightcoral</code></td> + <td><code>#f08080</code></td> + <td style="background: lightcoral;"> </td> + </tr> + <tr> + <td style="background: #e0ffff;"> </td> + <td style="text-align: center;"><code>lightcyan</code></td> + <td><code>#e0ffff</code></td> + <td style="background: lightcyan;"> </td> + </tr> + <tr> + <td style="background: #fafad2;"> </td> + <td style="text-align: center;"><code>lightgoldenrodyellow</code></td> + <td><code>#fafad2</code></td> + <td style="background: lightgoldenrodyellow ;"> </td> + </tr> + <tr> + <td style="background: #d3d3d3;"> </td> + <td style="text-align: center;"><code>lightgray</code></td> + <td><code>#d3d3d3</code></td> + <td style="background: lightgray;"> </td> + </tr> + <tr> + <td style="background: #90ee90;"> </td> + <td style="text-align: center;"><code>lightgreen</code></td> + <td><code>#90ee90</code></td> + <td style="background: lightgreen;"> </td> + </tr> + <tr> + <td style="background: #d3d3d3;"> </td> + <td style="text-align: center;"><code>lightgrey</code></td> + <td><code>#d3d3d3</code></td> + <td style="background: lightgrey;"> </td> + </tr> + <tr> + <td style="background: #ffb6c1;"> </td> + <td style="text-align: center;"><code>lightpink</code></td> + <td><code>#ffb6c1</code></td> + <td style="background: lightpink;"> </td> + </tr> + <tr> + <td style="background: #ffa07a;"> </td> + <td style="text-align: center;"><code>lightsalmon</code></td> + <td><code>#ffa07a</code></td> + <td style="background: lightsalmon;"> </td> + </tr> + <tr> + <td style="background: #20b2aa;"> </td> + <td style="text-align: center;"><code>lightseagreen</code></td> + <td><code>#20b2aa</code></td> + <td style="background: lightseagreen;"> </td> + </tr> + <tr> + <td style="background: #87cefa;"> </td> + <td style="text-align: center;"><code>lightskyblue</code></td> + <td><code>#87cefa</code></td> + <td style="background: lightskyblue;"> </td> + </tr> + <tr> + <td style="background: #778899;"> </td> + <td style="text-align: center;"><code>lightslategray</code></td> + <td><code>#778899</code></td> + <td style="background: lightslategray;"> </td> + </tr> + <tr> + <td style="background: #778899;"> </td> + <td style="text-align: center;"><code>lightslategrey</code></td> + <td><code>#778899</code></td> + <td style="background: lightslategrey;"> </td> + </tr> + <tr> + <td style="background: #b0c4de;"> </td> + <td style="text-align: center;"><code>lightsteelblue</code></td> + <td><code>#b0c4de</code></td> + <td style="background: lightsteelblue;"> </td> + </tr> + <tr> + <td style="background: #ffffe0;"> </td> + <td style="text-align: center;"><code>lightyellow</code></td> + <td><code>#ffffe0</code></td> + <td style="background: lightyellow;"> </td> + </tr> + <tr> + <td style="background: #32cd32;"> </td> + <td style="text-align: center;"><code>limegreen</code></td> + <td><code>#32cd32</code></td> + <td style="background: limegreen;"> </td> + </tr> + <tr> + <td style="background: #faf0e6;"> </td> + <td style="text-align: center;"><code>linen</code></td> + <td><code>#faf0e6</code></td> + <td style="background: linen;"> </td> + </tr> + <tr> + <td style="background: #66cdaa;"> </td> + <td style="text-align: center;"><code>mediumaquamarine</code></td> + <td><code>#66cdaa</code></td> + <td style="background: mediumaquamarine;"> </td> + </tr> + <tr> + <td style="background: #0000cd;"> </td> + <td style="text-align: center;"><code>mediumblue</code></td> + <td><code>#0000cd</code></td> + <td style="background: mediumblue;"> </td> + </tr> + <tr> + <td style="background: #ba55d3;"> </td> + <td style="text-align: center;"><code>mediumorchid</code></td> + <td><code>#ba55d3</code></td> + <td style="background: mediumorchid;"> </td> + </tr> + <tr> + <td style="background: #9370db;"> </td> + <td style="text-align: center;"><code>mediumpurple</code></td> + <td><code>#9370db</code></td> + <td style="background: mediumpurple;"> </td> + </tr> + <tr> + <td style="background: #3cb371;"> </td> + <td style="text-align: center;"><code>mediumseagreen</code></td> + <td><code>#3cb371</code></td> + <td style="background: mediumseagreen;"> </td> + </tr> + <tr> + <td style="background: #7b68ee;"> </td> + <td style="text-align: center;"><code>mediumslateblue</code></td> + <td><code>#7b68ee</code></td> + <td style="background: mediumslateblue;"> </td> + </tr> + <tr> + <td style="background: #00fa9a;"> </td> + <td style="text-align: center;"><code>mediumspringgreen</code></td> + <td><code>#00fa9a</code></td> + <td style="background: mediumspringgreen;"> </td> + </tr> + <tr> + <td style="background: #48d1cc;"> </td> + <td style="text-align: center;"><code>mediumturquoise</code></td> + <td><code>#48d1cc</code></td> + <td style="background: mediumturquoise;"> </td> + </tr> + <tr> + <td style="background: #c71585;"> </td> + <td style="text-align: center;"><code>mediumvioletred</code></td> + <td><code>#c71585</code></td> + <td style="background: mediumvioletred;"> </td> + </tr> + <tr> + <td style="background: #191970;"> </td> + <td style="text-align: center;"><code>midnightblue</code></td> + <td><code>#191970</code></td> + <td style="background: midnightblue;"> </td> + </tr> + <tr> + <td style="background: #f5fffa;"> </td> + <td style="text-align: center;"><code>mintcream</code></td> + <td><code>#f5fffa</code></td> + <td style="background: mintcream;"> </td> + </tr> + <tr> + <td style="background: #ffe4e1;"> </td> + <td style="text-align: center;"><code>mistyrose</code></td> + <td><code>#ffe4e1</code></td> + <td style="background: mistyrose;"> </td> + </tr> + <tr> + <td style="background: #ffe4b5;"> </td> + <td style="text-align: center;"><code>moccasin</code></td> + <td><code>#ffe4b5</code></td> + <td style="background: moccasin;"> </td> + </tr> + <tr> + <td style="background: #ffdead;"> </td> + <td style="text-align: center;"><code>navajowhite</code></td> + <td><code>#ffdead</code></td> + <td style="background: navajowhite;"> </td> + </tr> + <tr> + <td style="background: #fdf5e6;"> </td> + <td style="text-align: center;"><code>oldlace</code></td> + <td><code>#fdf5e6</code></td> + <td style="background: oldlace;"> </td> + </tr> + <tr> + <td style="background: #6b8e23;"> </td> + <td style="text-align: center;"><code>olivedrab</code></td> + <td><code>#6b8e23</code></td> + <td style="background: olivedrab;"> </td> + </tr> + <tr> + <td style="background: #ff4500;"> </td> + <td style="text-align: center;"><code>orangered</code></td> + <td><code>#ff4500</code></td> + <td style="background: orangered;"> </td> + </tr> + <tr> + <td style="background: #da70d6;"> </td> + <td style="text-align: center;"><code>orchid</code></td> + <td><code>#da70d6</code></td> + <td style="background: orchid;"> </td> + </tr> + <tr> + <td style="background: #eee8aa;"> </td> + <td style="text-align: center;"><code>palegoldenrod</code></td> + <td><code>#eee8aa</code></td> + <td style="background: palegoldenrod;"> </td> + </tr> + <tr> + <td style="background: #98fb98;"> </td> + <td style="text-align: center;"><code>palegreen</code></td> + <td><code>#98fb98</code></td> + <td style="background: palegreen;"> </td> + </tr> + <tr> + <td style="background: #afeeee;"> </td> + <td style="text-align: center;"><code>paleturquoise</code></td> + <td><code>#afeeee</code></td> + <td style="background: paleturquoise;"> </td> + </tr> + <tr> + <td style="background: #db7093;"> </td> + <td style="text-align: center;"><code>palevioletred</code></td> + <td><code>#db7093</code></td> + <td style="background: palevioletred;"> </td> + </tr> + <tr> + <td style="background: #ffefd5;"> </td> + <td style="text-align: center;"><code>papayawhip</code></td> + <td><code>#ffefd5</code></td> + <td style="background: papayawhip;"> </td> + </tr> + <tr> + <td style="background: #ffdab9;"> </td> + <td style="text-align: center;"><code>peachpuff</code></td> + <td><code>#ffdab9</code></td> + <td style="background: peachpuff;"> </td> + </tr> + <tr> + <td style="background: #cd853f;"> </td> + <td style="text-align: center;"><code>peru</code></td> + <td><code>#cd853f</code></td> + <td style="background: peru;"> </td> + </tr> + <tr> + <td style="background: #ffc0cb;"> </td> + <td style="text-align: center;"><code>pink</code></td> + <td><code>#ffc0cb</code></td> + <td style="background: pink;"> </td> + </tr> + <tr> + <td style="background: #dda0dd;"> </td> + <td style="text-align: center;"><code>plum</code></td> + <td><code>#dda0dd</code></td> + <td style="background: plum;"> </td> + </tr> + <tr> + <td style="background: #b0e0e6;"> </td> + <td style="text-align: center;"><code>powderblue</code></td> + <td><code>#b0e0e6</code></td> + <td style="background: powderblue;"> </td> + </tr> + <tr> + <td style="background: #bc8f8f;"> </td> + <td style="text-align: center;"><code>rosybrown</code></td> + <td><code>#bc8f8f</code></td> + <td style="background: rosybrown;"> </td> + </tr> + <tr> + <td style="background: #4169e1;"> </td> + <td style="text-align: center;"><code>royalblue</code></td> + <td><code>#4169e1</code></td> + <td style="background: royalblue;"> </td> + </tr> + <tr> + <td style="background: #8b4513;"> </td> + <td style="text-align: center;"><code>saddlebrown</code></td> + <td><code>#8b4513</code></td> + <td style="background: saddlebrown;"> </td> + </tr> + <tr> + <td style="background: #fa8072;"> </td> + <td style="text-align: center;"><code>salmon</code></td> + <td><code>#fa8072</code></td> + <td style="background: salmon;"> </td> + </tr> + <tr> + <td style="background: #f4a460;"> </td> + <td style="text-align: center;"><code>sandybrown</code></td> + <td><code>#f4a460</code></td> + <td style="background: sandybrown;"> </td> + </tr> + <tr> + <td style="background: #2e8b57;"> </td> + <td style="text-align: center;"><code>seagreen</code></td> + <td><code>#2e8b57</code></td> + <td style="background: seagreen;"> </td> + </tr> + <tr> + <td style="background: #fff5ee;"> </td> + <td style="text-align: center;"><code>seashell</code></td> + <td><code>#fff5ee</code></td> + <td style="background: seashell;"> </td> + </tr> + <tr> + <td style="background: #a0522d;"> </td> + <td style="text-align: center;"><code>sienna</code></td> + <td><code>#a0522d</code></td> + <td style="background: sienna;"> </td> + </tr> + <tr> + <td style="background: #87ceeb;"> </td> + <td style="text-align: center;"><code>skyblue</code></td> + <td><code>#87ceeb</code></td> + <td style="background: skyblue;"> </td> + </tr> + <tr> + <td style="background: #6a5acd;"> </td> + <td style="text-align: center;"><code>slateblue</code></td> + <td><code>#6a5acd</code></td> + <td style="background: slateblue;"> </td> + </tr> + <tr> + <td style="background: #708090;"> </td> + <td style="text-align: center;"><code>slategray</code></td> + <td><code>#708090</code></td> + <td style="background: slategray;"> </td> + </tr> + <tr> + <td style="background: #708090;"> </td> + <td style="text-align: center;"><code>slategrey</code></td> + <td><code>#708090</code></td> + <td style="background: slategrey;"> </td> + </tr> + <tr> + <td style="background: #fffafa;"> </td> + <td style="text-align: center;"><code>snow</code></td> + <td><code>#fffafa</code></td> + <td style="background: snow;"> </td> + </tr> + <tr> + <td style="background: #00ff7f;"> </td> + <td style="text-align: center;"><code>springgreen</code></td> + <td><code>#00ff7f</code></td> + <td style="background: springgreen;"> </td> + </tr> + <tr> + <td style="background: #4682b4;"> </td> + <td style="text-align: center;"><code>steelblue</code></td> + <td><code>#4682b4</code></td> + <td style="background: steelblue;"> </td> + </tr> + <tr> + <td style="background: #d2b48c;"> </td> + <td style="text-align: center;"><code>tan</code></td> + <td><code>#d2b48c</code></td> + <td style="background: tan;"> </td> + </tr> + <tr> + <td style="background: #d8bfd8;"> </td> + <td style="text-align: center;"><code>thistle</code></td> + <td><code>#d8bfd8</code></td> + <td style="background: thistle;"> </td> + </tr> + <tr> + <td style="background: #ff6347;"> </td> + <td style="text-align: center;"><code>tomato</code></td> + <td><code>#ff6347</code></td> + <td style="background: tomato;"> </td> + </tr> + <tr> + <td style="background: #40e0d0;"> </td> + <td style="text-align: center;"><code>turquoise</code></td> + <td><code>#40e0d0</code></td> + <td style="background: turquoise;"> </td> + </tr> + <tr> + <td style="background: #ee82ee;"> </td> + <td style="text-align: center;"><code>violet</code></td> + <td><code>#ee82ee</code></td> + <td style="background: violet;"> </td> + </tr> + <tr> + <td style="background: #f5deb3;"> </td> + <td style="text-align: center;"><code>wheat</code></td> + <td><code>#f5deb3</code></td> + <td style="background: wheat;"> </td> + </tr> + <tr> + <td style="background: #f5f5f5;"> </td> + <td style="text-align: center;"><code>whitesmoke</code></td> + <td><code>#f5f5f5</code></td> + <td style="background: whitesmoke;"> </td> + </tr> + <tr> + <td style="background: #9acd32;"> </td> + <td style="text-align: center;"><code>yellowgreen</code></td> + <td><code>#9acd32</code></td> + <td style="background: yellowgreen;"> </td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td style="background: #639;"> </td> + <td style="text-align: center;"><code>rebeccapurple</code></td> + <td><code>#663399</code></td> + <td style="background: rebeccapurple;"> </td> + </tr> + </tbody> +</table> + +<p>A cor <code>rebeccapurple</code> é equivalente à cor <code>#639</code>, e mais informações sobre por que foi introduzida pode ser encontrada neste post no blog Codepen por Trezy "<a href="https://codepen.io/trezy/post/honoring-a-great-man">Honoring a Great Man</a>" (em inglês)</p> + +<h3 id="palavra-chave_transparent"><code>palavra-chave transparent</code></h3> + +<p>A palavra-chave <code>transparent </code>representa uma cor totalmente transparente, isto é, a cor vista será a cor de fundo. Tecnicamente, é um preto com canal alfa no seu valor mínimo e é um atalho para <code>rgba(0,0,0,0)</code>.</p> + +<div class="note"><strong>Nota histórica</strong><br> +A palavra-chave <code>transparent</code> não era uma cor verdadeira no CSS nível 2 (Revisão 1). Era uma palavra-chave específica que poderia ser usada no lugar de um valor <code><color></code> regular em duas propriedades CSS: {{Cssxref("background")}} e {{Cssxref("border")}}. Ela foi adicionada essencialmente para permitir a substituição de cores sólidas herdadas.<br> +<br> +Com o apoio da opacidade através de <a class="external" href="https://en.wikipedia.org/wiki/Alpha_compositing">canais alfal</a>, <code>transparent</code> foi redefinida como uma cor verdadeira no Cores CSS nível 3 permitindo seu uso em qualquer lugar onde for exigido um valor para <code><color></code>, como a propriedade {{Cssxref("color")}}.</div> + +<h3 id="palavra-chave_currentcolor"><code>palavra-chave currentcolor</code></h3> + +<p>A palavra-chave <code>currentcolor</code> representa o valor calculado da propriedade {{Cssxref("color")}} dos elementos . Ela permite que as propriedades de cor sejam herdadas por propriedades ou propriedades de elemento filho que não a herdam por padrão.</p> + +<p>Ela também pode ser usada em propriedades que herdam o valor calculado da propriedade {{Cssxref ("color")}} do elemento e será equivalente à palavra-chave <code>inherit</code> nesses elementos, se houver.</p> + +<h4 id="Exemplo_ao_vivo">Exemplo ao vivo</h4> + +<p>A cor da linha (uma div preenchida com cor) se adapta à cor de sua propriedade {{Cssxref ("color")}}, herdada de seu pai.</p> + +<div style="width: 50%;"> +<h5 id="Exemplo_1">Exemplo 1</h5> + +<pre class="brush: html"><div style="color:darkred"> +A cor deste texto é a mesma da linha: <div style="background:currentcolor; height:1px"></div> + Mais algum texto. +</div> +</pre> + +<p>{{EmbedLiveSample('Live_example_1')}}</p> + +<h5 id="Exemplo_2">Exemplo 2</h5> + +<pre class="brush: html"><div style="color:blue; border-bottom: 1px dashed currentcolor;"> +A cor deste texto é a mesma da linha: <div style="background:currentcolor; height:1px"></div> + Mais algum texto. +</div> </pre> + +<p>{{EmbedLiveSample('Live_example_2')}}</p> +</div> + +<h3 id="rgb()"><a id="rgb"><code>rgb()</code></a></h3> + +<div class="note"> +<p><strong>Nota</strong>: Na especificação Módulo de cor CSS Color nível 4, a rgba() foi definida como uma função herdada com gramática e comportamento idênticos à rgb(); na verdade, um apelido. Mais para frente, ambas podem aceitar exatamente os mesmos parâmetros.</p> +</div> + +<p>Colors can be defined using the red-green-blue (RGB) model in two ways:</p> + +<dl> + <dt>Hexadecimal notation <code>#RRGGBB,</code> <code>#RGB</code></dt> + <dd> + <ul style="margin-bottom: 0;"> + <li>"<code>#</code>", followed by six hexadecimal characters (0-9, A-F), where the first two digits represent the red part, the second two the green part and the last two the blue part.</li> + <li>"<code>#</code>", followed by three hexadecimal characters (0-9, A-F), where the first digit represents the red part, the second the green part and the last one the blue part.</li> + </ul> + The three-digit RGB notation (<code>#RGB</code>) and the six-digit form (<code>#RRGGBB</code>) are equal, for example <code>#f03</code> and <code>#ff0033</code> represent the same color.</dd> + <dt>Functional Notation <code>rgb(R,G,B)</code></dt> + <dd>"<code>rgb</code>", followed by three {{cssxref("<integer>")}} or three {{cssxref("<percentage>")}} values, plus an optional alpha value that specifies the transparency of the color (this can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}})<br> + The integer number 255 corresponds to 100%, and to F or FF in the hexadecimal notation.</dd> +</dl> + +<pre class="plain">/* These examples all specify the same RGB color: */ + +#f03 +#F03 +#ff0033 +#FF0033 +rgb(255,0,51) +rgb(255, 0, 51) +<s>rgb(255, 0, 51.2)</s> /* ERROR! Don't use fractions, use integers */ +rgb(100%,0%,20%) +rgb(100%, 0%, 20%) +<s>rgb(100%, 0, 20%)</s> /* ERROR! Don't mix up integer and percentage notation */ + +/* whitespace syntax */ +rgb(255 0 0) + +/* optional alpha value */ +rgb(255,0,0,0.4) <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red */ </span> +rgb(255,0,0,40%) <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red with percentage value for alpha</span><span style="background: rgba(255,0,0,0.4);"> */ </span> +rgb(255 0 0 / 0.4) <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red */ </span> +rgb(255 0 0 / 40%) <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red with percentage value for alpha */ </span> + +</pre> + +<h3 id="hsl()"><a id="hsl"><code>hsl()</code></a></h3> + +<div class="note"> +<p><strong>Note</strong>: In the CSS Color Module Level 4 spec, <code>hsla()</code> has been defined as a legacy function with identical grammar and behaviour to <code>hsl()</code>; in effect, an alias. Going forward, both can accept exactly the same parameters.</p> +</div> + +<p>Colors can also be defined via hue, saturation, and lightness, or HSL, by using the <code>hsl()</code> functional notation. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).</p> + +<p><strong>Hue </strong>is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is given as a unitless {{cssxref("<number>")}}. By definition <strong>red=0=360</strong>, and the other colors are spread around the circle, so <strong>green=120</strong>, <strong>blue=240</strong>, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.</p> + +<p>Saturation and lightness are represented as percentages.<br> + <code>100%</code> is full <strong>saturation</strong>, and<code> 0%</code> is a shade of grey.<br> + <code>100%</code> <strong>lightness</strong> is white, <code>0%</code> lightness is black, and <code>50%</code> lightness is “normal.”</p> + +<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0, 100%,50%) <span style="background-color: hsl(0,100%,50%);"> /* red */ </span> +hsl(30, 100%,50%) <span style="background: hsl(30,100%,50%);"> </span> +hsl(60, 100%,50%) <span style="background: hsl(60,100%,50%);"> </span> +hsl(90, 100%,50%) <span style="background: hsl(90,100%,50%);"> </span> +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* green */ </span> +hsl(150,100%,50%) <span style="background: hsl(150,100%,50%);"> </span> +hsl(180,100%,50%) <span style="background: hsl(180,100%,50%);"> </span> +hsl(210,100%,50%) <span style="background: hsl(210,100%,50%);"> </span> +hsl(240,100%,50%) <span style="background: hsl(240,100%,50%);"> /* blue */ </span> +hsl(270,100%,50%) <span style="background: hsl(270,100%,50%);"> </span> +hsl(300,100%,50%) <span style="background: hsl(300,100%,50%);"> </span> +hsl(330,100%,50%) <span style="background: hsl(330,100%,50%);"> </span> +hsl(360,100%,50%) <span style="background: hsl(360,100%,50%);"> /* red */ </span> + +hsl(120,100%,25%) <span style="background: hsl(120,100%,25%);"> /* dark green */ </span> +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* green */ </span> +hsl(120,100%,75%) <span style="background: hsl(120,100%,75%);"> /* light green */ </span> + +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* green */ </span> +hsl(120, 67%,50%) <span style="background: hsl(120,67%,50%);"> </span> +hsl(120, 33%,50%) <span style="background: hsl(120,33%,50%);"> </span> +hsl(120, 0%,50%) <span style="background: hsl(120,0%,50%);"> </span> + +hsl(120, 60%,70%) <span style="background: hsl(120,60%,70%);"> /* pastel green */ </span> + +/* whitespace syntax */ +hsl(120 60% 70%) <span style="background: hsl(120,60%,70%);"> /* pastel green */ </span> + +/* angle values for hue component; also accepts rad, grad, turn */ +hsl(120deg 60% 70%) <span style="background: hsl(120,60%,70%);"> /* pastel green */ </span> + +/* optional alpha value */ +hsl(240,100%,50%,0.05) <span style="background: hsla(240,100%,50%,0.05);"> /* 5% opaque blue */ </span> +hsl(240,100%,50%,5%) <span style="background: hsla(240,100%,50%,0.05);"> /* 5% opaque blue with percentage value for alpha */ </span> +hsl(240 100% 50% / 0.05) <span style="background: hsla(240,100%,50%,0.05);">/* 5% opaque blue */ +</span>hsl(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);">/* 5% opaque blue with percentage value for alpha */</span> +</pre> + +<h3 id="rgba()"><a id="rgba"><code>rgba()</code></a></h3> + +<p>Colors can be defined in the Red-green-blue-alpha model (RGBa) in two ways:</p> + +<dl> + <dt>Hexadecimal notation <code>#RRGGBBAA and #RGBA</code></dt> + <dd> + <ul style="margin-bottom: 0;"> + <li>"<code>#</code>", followed by eight hexadecimal characters (0-9, A-F), where the first two digits represent the red part, the second two the green part, the third two the blue part and the last two the transparency.</li> + <li>"<code>#</code>", followed by four hexadecimal characters (0-9, A-F), where the first digit represents the red part, the second the green part, the third one the blue part and the last one the transparency.</li> + </ul> + The four-digit RGB notation (<code>#RGBA</code>) and the eight-digit form (<code>#RRGGBBAA</code>) are equal, for example, <code>#f038</code> and <code>#ff003388</code> represent the same color.</dd> + <dt>using the <code>rgba()</code> functional notation.</dt> + <dd>RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.<br> + <strong>a</strong> means opacity: 0=transparent; 1=opaque;</dd> +</dl> + +<pre class="brush: css">#f030 <span style="background: #f030;"> /* 0% opaque red */ </span> +#F03F <span style="background: #F03F;"> /* full opaque red */ </span> +#ff003300 <span style="background: #ff003300;"> /* 0% opaque red */ </span> +#FF003388 <span style="background: #FF003388;"> /* 50% opaque red */ </span> +rgba(255,0,0,0.1) <span style="background: rgba(255,0,0,0.1);"> /* 10% opaque red */ </span> +rgba(255,0,0,0.4) <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red */ </span> +rgba(255,0,0,0.7) <span style="background: rgba(255,0,0,0.7);"> /* 70% opaque red */ </span> +rgba(255,0,0, 1) <span style="background: rgba(255,0,0,1);"> /* full opaque red */ </span> + +/* whitespace syntax */ +rgba(255 0 0 / 0.4) <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red */ </span> + +/* percentage value for alpha */ +rgba(255 0 0 / 40%) <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red */ </span> +</pre> + +<div class="note"> +<p><strong>Note</strong>: In the CSS Color Module Level 4 spec, <code>rgba()</code> has been defined as a legacy function with identical grammar and behaviour to <code>rgb()</code>; in effect, an alias. Going forward, both can accept exactly the same parameters.</p> +</div> + +<h3 id="hsla()"><a id="hsla"><code>hsla()</code></a></h3> + +<p>Colors can be defined in the hue-saturation-lightness-alpha model (HSLa) using the <code>hsla()</code> functional notation. HSLa extends the HSL color model to include the alpha channel, allowing specification of the opacity of a color.<br> + <strong>a</strong> means opacity: 0=transparent; 1=opaque;</p> + +<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240,100%,50%,0.05) <span style="background: hsla(240,100%,50%,0.05);"> /* 5% opaque blue */ </span> +hsla(240,100%,50%, 0.4) <span style="background: hsla(240,100%,50%,0.4);"> /* 40% opaque blue */ </span> +hsla(240,100%,50%, 0.7) <span style="background: hsla(240,100%,50%,0.7);"> /* 70% opaque blue */ </span> +hsla(240,100%,50%, 1) <span style="background: hsla(240,100%,50%,1);"> /* full opaque blue */ </span> + +/* whitespace syntax */ +hsla(240 100% 50% / 0.05) <span style="background: hsla(240,100%,50%,0.05);">/* 5% opaque blue */ </span> + +/* percentage value for alpha */ +hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);">/* 5% opaque blue */ </span> + +/* angle values for hue component; also accepts rad, grad, turn */ +hsla(240deg 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);">/* 5% opaque blue */ </span> +hsla(240deg,100%,50%, 0.4) <span style="background: hsla(240,100%,50%,0.4);"> /* 40% opaque blue */ </span> +</pre> + +<div class="note"> +<p><strong>Note</strong>: In the CSS Color Module Level 4 spec, <code>hsla()</code> has been defined as a legacy function with identical grammar and behaviour to <code>hsl()</code>; in effect, an alias. Going forward, both can accept exactly the same parameters.</p> +</div> + +<h3 id="System_Colors">System Colors</h3> + +<p>Not all system colors are supported on all systems. {{deprecated_inline}} for use on public web pages.</p> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> + <dt>ActiveBorder</dt> + <dd>Active window border.</dd> + <dt>ActiveCaption</dt> + <dd>Active window caption. Should be used with <code>CaptionText</code> as foreground color.</dd> + <dt>AppWorkspace</dt> + <dd>Background color of multiple document interface.</dd> + <dt>Background</dt> + <dd>Desktop background.</dd> + <dt>ButtonFace</dt> + <dd>Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with the <code>ButtonText</code> foreground color.</dd> + <dt>ButtonHighlight</dt> + <dd>The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd> + <dt>ButtonShadow</dt> + <dd>The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd> + <dt>ButtonText</dt> + <dd>Text on push buttons. Should be used with the <code>ButtonFace</code> or <code>ThreeDFace</code> background color.</dd> + <dt>CaptionText</dt> + <dd>Text in caption, size box, and scrollbar arrow box. Should be used with the <code>ActiveCaption</code> background color.</dd> + <dt>GrayText</dt> + <dd>Grayed (disabled) text.</dd> + <dt>Highlight</dt> + <dd>Item(s) selected in a control. Should be used with the <code>HighlightText</code> foreground color.</dd> + <dt>HighlightText</dt> + <dd>Text of item(s) selected in a control. Should be used with the <code>Highlight</code> background color.</dd> + <dt>InactiveBorder</dt> + <dd>Inactive window border.</dd> + <dt>InactiveCaption</dt> + <dd>Inactive window caption. Should be used with the <code>InactiveCaptionText</code> foreground color.</dd> + <dt>InactiveCaptionText</dt> + <dd>Color of text in an inactive caption. Should be used with the <code>InactiveCaption</code> background color.</dd> + <dt>InfoBackground</dt> + <dd>Background color for tooltip controls. Should be used with the <code>InfoText</code> foreground color.</dd> + <dt>InfoText</dt> + <dd>Text color for tooltip controls. Should be used with the <code>InfoBackground</code> background color.</dd> + <dt>Menu</dt> + <dd>Menu background. Should be used with the <code>MenuText</code> or <code>-moz-MenuBarText</code> foreground color.</dd> + <dt>MenuText</dt> + <dd>Text in menus. Should be used with the <code>Menu</code> background color.</dd> + <dt>Scrollbar</dt> + <dd>Background color of scroll bars.</dd> + <dt>ThreeDDarkShadow</dt> + <dd>The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd> + <dt>ThreeDFace</dt> + <dd>The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the <code>ButtonText</code> foreground color.</dd> + <dt>ThreeDHighlight</dt> + <dd>The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two<br> + concentric layers of surrounding border.</dd> + <dt>ThreeDLightShadow</dt> + <dd>The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two<br> + concentric layers of surrounding border.</dd> + <dt>ThreeDShadow</dt> + <dd>The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd> + <dt>Window</dt> + <dd>Window background. Should be used with the <code>WindowText</code> foreground color.</dd> + <dt>WindowFrame</dt> + <dd>Window frame.</dd> + <dt>WindowText</dt> + <dd>Text in windows. Should be used with the <code>Window</code> background color.</dd> +</dl> + +<h3 id="Mozilla_System_Color_Extensions">Mozilla System Color Extensions</h3> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> + <dt>-moz-ButtonDefault</dt> + <dd>The border color that goes around buttons that represent the default action for a dialog box.</dd> + <dt>-moz-ButtonHoverFace</dt> + <dd>The background color of a button that the mouse pointer is over (which would be <code>ThreeDFace</code> or <code>ButtonFace</code> when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverText</code> foreground color.</dd> + <dt>-moz-ButtonHoverText</dt> + <dd>The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverFace background</code> color.</dd> + <dt>-moz-CellHighlight</dt> + <dd>Background color for selected item in a tree widget. Should be used with the <code>-moz-CellHighlightText</code> foreground color. See also <code>-moz-html-CellHighlight</code>.</dd> + <dt>-moz-CellHighlightText</dt> + <dd>Text color for a selected item in a tree. Should be used with the <code>-moz-CellHighlight background</code> color. See also <code>-moz-html-CellHighlightText</code>.</dd> + <dt>-moz-Combobox</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the <code>-moz-ComboboxText</code> foreground color. In versions prior to 1.9.2, use <code>-moz-Field</code> instead.</dd> + <dt>-moz-ComboboxText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the <code>-moz-Combobox</code> background color. In versions prior to 1.9.2, use <code>-moz-FieldText</code> instead.</dd> + <dt>-moz-Dialog</dt> + <dd>Background color for dialog boxes. Should be used with the <code>-moz-DialogText</code> foreground color.</dd> + <dt>-moz-DialogText</dt> + <dd>Text color for dialog boxes. Should be used with the <code>-moz-Dialog</code> background color.</dd> + <dt>-moz-dragtargetzone</dt> + <dt>-moz-EvenTreeRow</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-OddTreeRow</code>.</dd> + <dt>-moz-Field</dt> + <dd>Text field background color. Should be used with the <code>-moz-FieldText</code> foreground color.</dd> + <dt>-moz-FieldText</dt> + <dd>Text field text color. Should be used with the <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, or <code>-moz-OddTreeRow</code> background color.</dd> + <dt>-moz-html-CellHighlight</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>.</dd> + <dt>-moz-html-CellHighlightText</dt> + <dd>{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlight</code> background color. Prior to Gecko 1.9, use <code>-moz-CellHighlightText</code>.</dd> + <dt>-moz-mac-accentdarkestshadow</dt> + <dt>-moz-mac-accentdarkshadow</dt> + <dt>-moz-mac-accentface</dt> + <dt>-moz-mac-accentlightesthighlight</dt> + <dt>-moz-mac-accentlightshadow</dt> + <dt>-moz-mac-accentregularhighlight</dt> + <dt>-moz-mac-accentregularshadow</dt> + <dt>-moz-mac-chrome-active</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> + <dt>-moz-mac-chrome-inactive</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> + <dt>-moz-mac-focusring</dt> + <dt>-moz-mac-menuselect</dt> + <dt>-moz-mac-menushadow</dt> + <dt>-moz-mac-menutextselect</dt> + <dt>-moz-MenuHover</dt> + <dd>Background color for hovered menu items. Often similar to <code>Highlight</code>. Should be used with the <code>-moz-MenuHoverText</code> or <code>-moz-MenuBarHoverText</code> foreground color.</dd> + <dt>-moz-MenuHoverText</dt> + <dd>Text color for hovered menu items. Often similar to <code>HighlightText</code>. Should be used with the <code>-moz-MenuHover</code> background color.</dd> + <dt>-moz-MenuBarText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to <code>MenuText</code>. Should be used on top of <code>Menu</code> background.</dd> + <dt>-moz-MenuBarHoverText</dt> + <dd>Color for hovered text in menu bars. Often similar to <code>-moz-MenuHoverText</code>. Should be used on top of <code>-moz-MenuHover</code> background.</dd> + <dt>-moz-nativehyperlinktext</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.</dd> + <dt>-moz-OddTreeRow</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-EvenTreeRow</code>.</dd> + <dt>-moz-win-communicationstext</dt> + <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd> + <dt>-moz-win-mediatext</dt> + <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd> +</dl> + +<h3 id="Mozilla_Color_Preference_Extensions">Mozilla Color Preference Extensions</h3> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;"> + <dt>-moz-activehyperlinktext</dt> + <dd>User's preference for text color of active links. Should be used with the default document background color.</dd> + <dt>-moz-default-background-color</dt> + <dd>{{Gecko_minversion_inline("5.0")}} User's preference for the document background color.</dd> + <dt>-moz-default-color</dt> + <dd>{{Gecko_minversion_inline("5.0")}} User's preference for the text color.</dd> + <dt>-moz-hyperlinktext</dt> + <dd>User's preference for the text color of unvisited links. Should be used with the default document background color.</dd> + <dt>-moz-visitedhyperlinktext</dt> + <dd>User's preference for the text color of visited links. Should be used with the default document background color.</dd> +</dl> + +<h2 id="Specificações">Specificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}</td> + <td>{{Spec2('CSS4 Colors')}}</td> + <td>Added <code>rebeccapurple</code>, four- (<code>#RGBA</code>) and eight-digit (<code>#RRGGBBAA</code>) hexadecimal notations, <code>rgba()</code> and <code>hsla()</code> as aliases of <code>rgb()</code> and <code>hsl()</code> (both with identical parameter syntax), space-separated function parameters rather than commas, percentages for alpha values, and angles for the hue component in <code>hsl()</code> colors.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Deprecated system-colors; added SVG colors; added <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> functional notation.</td> + </tr> + <tr style="vertical-align: top;"> + <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}</td> + <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td> + <td style="vertical-align: top;">Added the <code>orange</code> color and the system-colors.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '<color>')}}</td> + <td style="vertical-align: top;">{{Spec2('CSS1')}}</td> + <td style="vertical-align: top;">Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>keywords colors</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>3.0 <sup>[1]</sup></td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>#RRGGBB</code>, <code>#RGB</code></td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>rgb()</code></td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>hsl()</code></td> + <td>1.0</td> + <td>1.0 (1.5)</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>rgba()</code>, <code>hsla()</code></td> + <td>1.0</td> + <td>3.0 (1.9)</td> + <td>9.0</td> + <td>10.0</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>currentcolor</code></td> + <td>1.0</td> + <td>1.5 (1.8)</td> + <td>9.0</td> + <td>9.5</td> + <td>4.0 (528)</td> + </tr> + <tr> + <td><code>transparent</code></td> + <td>1.0</td> + <td>3.0 (1.9)</td> + <td>9.0 <sup>[2]</sup></td> + <td>10.0</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>rebeccapurple</code></td> + <td>38.0</td> + <td>{{CompatGeckoDesktop("33")}}</td> + <td>11</td> + <td>25.0</td> + <td>7.1</td> + </tr> + <tr> + <td><code>#RRGGBBAA</code>, <code>#RGBA</code></td> + <td>52.0</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatUnknown}}</td> + <td>39.0</td> + <td>9.1</td> + </tr> + <tr> + <td><code>rgba()</code> and <code>hsla()</code> as aliases of <code>rgb()</code> and <code>hsl()</code><br> + Space-separated function parameters rather than commas<br> + Percentages for alpha values<br> + Angles for the hue component in <code>hsl()</code> colors.</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("52")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>rgba()</code>, <code>hsla()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>rebeccapurple</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("33")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + <tr> + <td><code>#RRGGBBAA</code>, <code>#RGBA</code></td> + <td>52.0</td> + <td>{{CompatGeckoMobile("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>rgba()</code> and <code>hsla()</code> as aliases of <code>rgb()</code> and <code>hsl()</code><br> + Space-separated function parameters rather than commas<br> + Percentages for alpha values<br> + Angles for the hue component in <code>hsl()</code> colors.</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The 'e'-grey colors (with an e) (<code>grey</code>, <code>darkgrey</code>, <code>darkslategrey</code>, <code>dimgrey</code>, <code>lightgrey</code>, <code>lightslategrey</code>) are only supported since IE 8.0. IE 3 to IE 7 only support the 'a' variants: <code>gray</code>, <code>darkgray</code>, <code>darkslategray</code>, <code>dimgray</code>, <code>lightgray</code>, <code>lightslategray</code>.</p> + +<p>[2] IE 7-8 supports the <code>transparent</code> keyword only for {{Cssxref("background")}} and {{cssxref("border")}}. <code>color: transparent;</code> is drawn black in IE. IE6 renders transparent borders as black, as well.</p> + +<p>[3] This feature is supported in Chrome Canary since version 52.0.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>The {{Cssxref("opacity")}} property, allowing to define the transparency of color at the element level.</li> + <li>The {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}} properties.</li> +</ul> diff --git a/files/pt-br/web/css/comentário/index.html b/files/pt-br/web/css/comentário/index.html new file mode 100644 index 0000000000..dabb46a04f --- /dev/null +++ b/files/pt-br/web/css/comentário/index.html @@ -0,0 +1,49 @@ +--- +title: Comentário +slug: Web/CSS/Comentário +tags: + - CSS + - CSS Reference + - Iniciante +translation_of: Web/CSS/Comments +--- +<div>ios{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>Comments are used to add explanatory notes or prevent the browser from interpreting parts of the style sheet.</p> + +<p>Comments can be placed where ever white space is allowed within a style sheet.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">/* Comment */</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css">/* A single line comment */ + +/* +A comment +which stretches +over several +lines +*/ +</pre> + +<h2 id="Notas">Notas</h2> + +<p>The <code>/* */</code> comment syntax is used for both single and multi line comments. There is no other way to specify comments in external style sheets. However, when using the <code><style></code> element, you may use <code><!-- --></code> to hide CSS from older browsers, although this is not recommended. As in most programming languages that use the <code>/* */</code> comment syntax, comments cannot be nested. In other words, the first instance of <code>*/</code> that follows an instance of <code>/*</code> closes the comment.</p> + +<h2 id="Especificações">Especificações</h2> + +<ul> + <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Syntax and basic data types #comments</a></li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/pt-br/web/css/contain/index.html b/files/pt-br/web/css/contain/index.html new file mode 100644 index 0000000000..dda6afe29e --- /dev/null +++ b/files/pt-br/web/css/contain/index.html @@ -0,0 +1,134 @@ +--- +title: contain +slug: Web/CSS/contain +translation_of: Web/CSS/contain +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>A propriedade <strong><code>contain</code></strong> permite que um autor indique que elemento e seus conteúdos são, na medida do possível, <em>independente</em> do resto da árvore do documento. Isso permite que o navegador recalcule o layout, estilo, pintura, tamanho ou alguma combinação deles para uma área limitada do DOM e não da página inteira. </p> + +<pre class="brush: css no-line-numbers">/* Sem contenção de layout. */ +contain: none; + +/* Ativa a contenção para layout, estilo, pintura, e tamanho. */ +contain: strict; + +/* Ativa a contenção para layout, estilo, e pintura. */ +contain: content; + +/* Ativa a contenção para um elemento. */ +contain: size; + +/* Ativa a contenção de layout para um elemento. */ +contain: layout; + +/* Ativa a contenção de estilo para um elemento. */ +contain: style; + +/* Ativa a contenção de pintura para um elemento. */ +contain: paint; +</pre> + +<p>Esta propriedade é útil em páginas que contêm um monte de widgets que são todos independentes, uma vez que pode ser usado para impedir que as regras CSS de um widget mude outras coisas na página.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Indica que o elemento processa como normal, sem contenção aplicada.</dd> + <dt>strict</dt> + <dd>Indica que todas as regras de contenção são aplicadas ao elemento. Isso equivale a<code>contain: size layout style paint</code>.</dd> + <dt>content</dt> + <dd>Indica que todas as regras de contenção, exceto <em>size</em> são aplicadas ao elemento. Isso equivale a <code>contain: layout style paint</code>.</dd> + <dt>size</dt> + <dd>Indica que o elemento pode ser dimensionado sem a necessidade de examinar seus dependentes para alterações de tamanho.</dd> + <dt>layout</dt> + <dd>Indica que nada fora do elemento pode afetar seu layout interno e vice-versa. </dd> + <dt>style</dt> + <dd>Indica que, para propriedades que podem ter efeitos em mais do que apenas um elemento e seus descendentes, esses efeitos não escape o elemento que contém.</dd> + <dt>paint</dt> + <dd>Indica que os descendentes do elemento não são exibidos fora de seus limites. Se um elemento estiver fora da tela ou de outra forma não visível, seus descendentes também são garantidos para não ser visível.</dd> +</dl> + +<h3 id="Sintaxe_Formal">Sintaxe Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Containment')}}</td> + <td>{{Spec2('CSS Containment')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(52.0)}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>40</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(52.0)}}</td> + <td>{{CompatChrome(52.0)}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>40</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature implemented behind the preference <code>layout.css.contain.enabled</code>, defaulting to <code>false</code>, currently only supporting the values <code>none</code> and <code>paint</code> (see {{bug(1170781)}}). See {{bug(1150081)}} for the overall implementation status.</p> diff --git a/files/pt-br/web/css/content/index.html b/files/pt-br/web/css/content/index.html new file mode 100644 index 0000000000..603f0e9511 --- /dev/null +++ b/files/pt-br/web/css/content/index.html @@ -0,0 +1,322 @@ +--- +title: content +slug: Web/CSS/content +tags: + - Propriedade CSS + - Referencia +translation_of: Web/CSS/content +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>content</code></strong> é usada com os pseudoelementos {{cssxref("::before")}} e {{cssxref("::after")}} para gerar conteúdo em um elemento. Objetos inseridos usando a propriedade <code>content</code> são <em><a href="/pt-BRS/docs/CSS/Replaced_element" title="CSS/Replaced_element">elementos substituídos</a> anônimos</em>.</p> + +<pre class="brush: css no-line-numbers">/* Palavras-chave que não podem ser combinadas com outros valores */ +content: normal; +content: none; + +/* Valores <string> com caracteres especiais devem ser escritos */ +/* com escape Unicode, por exemplo \00A0 para &nbsp; */ +content: "prefixo"; + +/* Valores <url> */ +content: url("http://www.example.com/test.png"); + +/* Valores <counter> */ +content: counter(contador_capitulo); +content: counters(contador_secao, "."); + +/* Valores attr() associados ao valor do atributo HTML */ +content: attr(valor string); + +/* Palavras-chave que variam com o idioma e posição */ +content: open-quote; +content: close-quote; +content: no-open-quote; +content: no-close-quote; + +/* Com exceção de normal e none, vários valores */ +/* podem ser usados simultaneamente */ +content: open-quote chapter_counter; + +/* Valores globais */ +content: inherit; +content: initial; +content: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>O pseudoelemento não será gerado.</dd> + <dt><code>normal</code></dt> + <dd>Equivalente a <code>none</code> para os pseudoelementos <code>::before</code> e <code>::after</code>.</dd> + <dt>{{cssxref("<string>")}}</dt> + <dd>Um ou mais caracteres de texto.</dd> + <dt>{{cssxref("<url>")}}</dt> + <dd>Uma URL que designa um recurso externo (como uma imagem). Se o recurso não puder ser exibido, ele será ignorado ou um <em lang="en">placeholder</em> será exibido no seu lugar.</dd> + <dt>{{cssxref("<counter>")}}</dt> + <dd>O valor de um contador CSS, geralmente um número. Ele pode ser exibido usando a função <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter%28%29" title="A documentação sobre este tópico ainda não foi escrita; por favor, considere dar a sua contribuição nela!"><code>counter()</code></a> ou <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/counters%28%29" title="A documentação sobre este tópico ainda não foi escrita; por favor, considere dar a sua contribuição nela!"><code>counters()</code></a>.</dd> + <dd> + <p>A função <code>counter()</code> tem duas formas: 'counter(<var>nome</var>)' ou 'counter(<var>nome</var>, <var>estilo</var>)'. O texto gerado será o valor do contador mais próximo do nome fornecido no pseudoelemento. Ele será formatado com o estilo especificado (o padrão é <code>decimal</code>).</p> + + <p>A função <code>counters()</code> também tem duas formas: 'counters(<var>nome</var>, <var>string</var>)' ou 'counters(<var>nome</var>, <var>separador</var>, <var>estilo</var>)'. O texto gerado será o valor de todos os contadores com o mesmo nome no escopo do pseudoelemento, do mais afastado ao mais próximo, separados pelo separador especificado. Os contadores serão exibidos no estilo indicado (o padrão é <code>decimal</code>).</p> + </dd> + <dt><code>attr(x)</code></dt> + <dd>O valor do atributo <code>x</code> do elemento. Se não houver um atributo <code>x</code>, uma <em lang="en">string</em> vazia será retornada. A diferenciação de maiúsculas e minúsculas dependerá da linguagem do documento.</dd> + <dt><code>open-quote</code> | <code>close-quote</code></dt> + <dd>Esses valores serão substituídos pela <em lang="en">string</em> apropriada da propriedade {{cssxref("quotes")}}.</dd> + <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> + <dd>Não introduzem nenhum conteúdo, mas aumentam (ou diminuem) o nível de aninhamento de aspas.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Cabeçalhos_e_citações">Cabeçalhos e citações</h3> + +<p>Este exemplo insere aspas ao redor de citações e adiciona a palavra "Capítulo" antes dos cabeçalhos.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h1>5</h1> +<p>De acordo com o Sr. Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was + lucky enough to invent the Web at the time when the Internet + already existed - and had for a decade and a half.</q> + Devemos entender que não há nada fundamentalmente errado em criar + algo com base nas contribuições de outras pessoas. +</p> + +<h1>6</h1> +<p>De acordo com o Manifesto Mozilla, + <q cite="https://www.mozilla.org/about/manifesto/">As pessoas + precisam ter a capacidade de moldar a Internet e suas + experiências com ela.</q> + Portanto, podemos concluir que contribuir para a Web aberta pode + proteger nossas próprias experiências individuais nela. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">q { + color: blue; +} + +q::before { + content: open-quote; +} + +q::after { + content: close-quote; +} + +h1::before { + content: "Cap\00EDtulo "; /* O espaço no final cria uma separação + entre o conteúdo adicionado e o + resto do conteúdo */ +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}</p> + +<h3 id="Imagem_combinada_com_texto">Imagem combinada com texto</h3> + +<p>Este exemplo insere uma imagem antes do <em lang="en">link</em>. Se a imagem não for encontrada, o texto será exibido no seu lugar.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><a href="https://www.mozilla.org/">Mozilla Home Page</a></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">a::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: "; + font: x-small Arial, sans-serif; + color: gray; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}</p> + +<h3 id="Alterando_classes_específicas">Alterando classes específicas</h3> + +<p>Este exemplo insere texto adicional no final de itens especiais em uma lista.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><h2>Categoriass mais vendidas</h2> +<ol> + <li>Suspenses políticos</li> + <li class="new-entry">Histórias de terror</li> + <li>Biografias</li> + <li class="new-entry">Romances de Vampiros</li> +</ol></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.new-entry::after { + content: " Novo!"; /* O espaço no final cria uma separação + entre o conteúdo adicionado e o + resto do conteúdo */ + color: red; +}</pre> + +<h4 id="Resultado_3">Resultado</h4> + +<p>{{EmbedLiveSample('Targeting_classes', '100%', 160)}}</p> + +<h3 id="Imagens_e_atributos_de_elementos">Imagens e atributos de elementos</h3> + +<p>Este exemplo insere uma imagem antes de cada <em lang="en">link</em> e adiciona o conteúdo do seu atributo <code>id</code> depois.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><ul> + <li><a id="moz" href="http://www.mozilla.org/"> + Mozilla Home Page</a></li> + <li><a id="mdn" href="https://developer.mozilla.org/"> + Mozilla Developer Network</a></li> +</ul></pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css">a { + text-decoration: none; + border-bottom: 3px dotted navy; +} + +a::after { + content: " (" attr(id) ")"; +} + +#moz::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ; +} + +#mdn::before { + content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ; +} + +li { + margin: 1em; +} +</pre> + +<h4 id="Resultado_4">Resultado</h4> + +<p>{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td> + <td>{{Spec2("CSS3 Content")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>8.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Suporte a <code>url()</code></td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>8.0</td> + <td>9.5</td> + <td>1.0</td> + </tr> + <tr> + <td>Suporte a <code>url()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref("::after")}}</li> + <li>{{Cssxref("::before")}}</li> + <li>{{Cssxref("quotes")}}</li> +</ul> diff --git a/files/pt-br/web/css/css_animations/detecting_css_animation_support/index.html b/files/pt-br/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..f26773f0c9 --- /dev/null +++ b/files/pt-br/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,99 @@ +--- +title: Detectando suporte a animação CSS +slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +tags: + - Animações CSS + - Avançado + - CSS + - Guía + - JavaScript + - Lixo + - Referencia +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +<div>{{CSSRef}}</div> + +<p>Animações CSS torna possível a criação de conteúdo animado e criativo utilizando nada além de CSS. No entando, haverá momentos em que este recurso não estará disponível, e você pode querer lidar com isso utilizando um código JavaScript que simule um efeito semelhante. Este artigo, baseado <a href="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">neste post do blog</a> de Chris Heilmann, demonstra uma técnica para fazer isso.</p> + +<h2 id="Testando_por_suporte_de_animação_CSS">Testando por suporte de animação CSS</h2> + +<p>Este código irá verificar se o suporte a animação CSS está disponível:</p> + +<pre class="brush: js">var animation = false, + animationstring = 'animation', + keyframeprefix = '', + domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), + pfx = '', + elem = document.createElement('div'); + +if( elem.style.animationName !== undefined ) { animation = true; } + +if( animation === false ) { + for( var i = 0; i < domPrefixes.length; i++ ) { + if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { + pfx = domPrefixes[ i ]; + animationstring = pfx + 'Animation'; + keyframeprefix = '-' + pfx.toLowerCase() + '-'; + animation = true; + break; + } + } +} +</pre> + +<p>Para iniciantes definimos algumas variáveis. Assumimos que a animação não é suportada iniciando <code>animation</code> com <code>false</code>. Setamos <code>animationstring</code> com <code>animation</code> que é a propriedade que desejamos setar posteriormente para com <code>true</code>. Criamos um <em>array</em> de prefixos de navegadores para percorrê-lo e setamos <code>pfx</code> com uma <em>string</em> vazia.</p> + +<p>Então verificamos se a propriedade CSS {{ cssxref("animation-name") }} na coleção de estilo do elemento especificado pelo nome <code>elem</code> está definido. Isto significa que o navegador suporta animação CSS sem nenhum prefixo.</p> + +<p>Se o navegador não suporta animação não prefixada e <code>animation</code> permanece <code>falso</code>, iteramos através de todas as possibilidade de prefixos dos principais navegadores que prefixam esta propriedade e acrescentamos este prefixo ao atributo <code>AnimationName</code>.</p> + +<p>Quando a execução deste código termina, o valor de <code>animation</code> será <code>false</code> se não houver suporte a animação CSS, ou <code>true</code> no caso contrário. Se seja <code>true</code> tanto a propriedade de nome de animação quanto o prefixo de <em>keyframe</em> estarão corretos. Se utiliza o novo Firefox, a propriedade será <code>MozAnimation</code> e o prefixo de <em>keyframe</em> <code>-moz-</code>, para o Chrome será <code>WebkitAnimation</code> e <code>-webkit-</code>. Observe que os navegadores não deixam fácil a adoção de <em>camelCase</em> ou hifenização.</p> + +<h2 id="Animando_utilizando_a_sintaxe_correta_para_navegadores_diferentes">Animando utilizando a sintaxe correta para navegadores diferentes</h2> + +<p>Agora que sabe se a animação CSS é suportada ou não, nós iremos animar.</p> + +<pre class="brush: js">if( animation === false ) { + + // chamada para a animação em JavaScript + +} else { + elem.style[ animationstring ] = 'rotate 1s linear infinite'; + + var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ + 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ + 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ + '}'; + + if( document.styleSheets && document.styleSheets.length ) { + + document.styleSheets[0].insertRule( keyframes, 0 ); + + } else { + + var s = document.createElement( 'style' ); + s.innerHTML = keyframes; + document.getElementsByTagName( 'head' )[ 0 ].appendChild( s ); + + } + +} +</pre> + +<p>Este código analisa o valor de <code>animation</code>; se é <code>false</code>, saberemos que precisaremos utilizar nosso código JavaScript para executar a animação. Por outro lado, podemos usar o JavaScript para criar um efeito de animação CSS desejado.</p> + +<p>Modificar a propriedade de animação é fácil; basta atualizar seu valor na coleção de estilos. No entanto, adicionar <em>keyframes</em> é mais difícil, pois não é definito utilizando a sintaxe tradicional do CSS (que torna-o mais flexível, mas difícil em definir de um script).</p> + +<p>Para definir nosso <em>keyframes</em> usando JavaScript, precisamos escrevê-lo como uma <em>string</em> CSS. Tudo que precisamos é setar a variável <code>keyframes</code>, prefixando cada atributo que será construído. Esta variável, uma vez construída, contém a descrição completa de todos os <em>keyframes</em> necessários pela nossa sequência de animação.</p> + +<p>A tarefa seguinte é adicionar os <em>keyframes</em> ao CSS da página. A primeira coisa a se fazer é procurar se existe uma folha de estilos no documento; caso exista, inserimos a descrição do <em>keyframe</em> nesta folha de estilo; isto é feito nas linhas 13-15.</p> + +<p>Se não existe uma folha de estilos, um novo elemento {{ HTMLElement("style") }} é criado, e seu conteúdo é setado com o valor dos <em>keyframes</em>. Então o novo elemento {{ HTMLElement("style") }} é inserido no {{ HTMLElement("head") }} do documento, adicionando assim uma nova folha de estilos ao documento.</p> + +<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">View on JSFiddle</a></p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en/CSS/CSS_animations">Animações CSS</a></li> +</ul> diff --git a/files/pt-br/web/css/css_animations/index.html b/files/pt-br/web/css/css_animations/index.html new file mode 100644 index 0000000000..7c953b2359 --- /dev/null +++ b/files/pt-br/web/css/css_animations/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation-delay")}}</li> + <li>{{cssxref("animation-direction")}}</li> + <li>{{cssxref("animation-duration")}}</li> + <li>{{cssxref("animation-fill-mode")}}</li> + <li>{{cssxref("animation-iteration-count")}}</li> + <li>{{cssxref("animation-name")}}</li> + <li>{{cssxref("animation-play-state")}}</li> + <li>{{cssxref("animation-timing-function")}}</li> +</ul> +</div> + +<h3 id="CSS_At-rules">CSS At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@keyframes")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt> + <dd>Describes a technique for detecting if the browser supports CSS animations.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt> + <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + 43.0</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>12{{property_prefix("-o")}}<br> + 12.10<sup>[2]</sup></td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{property_prefix("-webkit")}} [1]<br> + 4.0 {{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p> + +<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li> +</ul> + +<p> </p> diff --git a/files/pt-br/web/css/css_animations/tips/index.html b/files/pt-br/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..48df63997b --- /dev/null +++ b/files/pt-br/web/css/css_animations/tips/index.html @@ -0,0 +1,105 @@ +--- +title: CSS Animations tips and tricks +slug: Web/CSS/CSS_Animations/Tips +tags: + - Animações CSS + - CSS + - Comofazer + - Exemplo + - Tutorial +translation_of: Web/CSS/CSS_Animations/Tips +--- +<p><span class="seoSummary">Animações CSS tornam possível fazer coisas incríveis com os elementos que compoem seus documentos e aplicativos. No entanto, existem coisas que você pode querer fazer que não são óbvias, ou jeitos espertos de fazer coisas que você pode não ter pensado de imediato. Esse artigo é uma coleção de dicas e truques que descobrimos que podem tornar seu trabalho mais fácil, incluindo como rodar uma animação parada novamente.</span></p> + +<h2 id="Run_an_animation_again" name="Run_an_animation_again">Rode uma animação novamente</h2> + +<p>A especificação <a href="/en-US/docs/Web/CSS/CSS_Animations">Animações CSS</a> não oferece um modo de rodar uma animação novamente. Não existe um método mágico <code>resetAnimation()</code> nos elementos, e você não pode nem mesmo apenas atribuir o {{cssxref("animation-play-state")}} do elemento para <code>"running"</code> de novo. Ao invés disso, você tem que usar macetes para fazer com que uma animação parada reexecute.</p> + +<p>Aqui está um modo de fazer o qual achamos estável e confiável o suficiente para sugerir à você.</p> + +<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> + +<p>Primeiro, vamos definir o HTML para uma {{HTMLElement("div")}} que gostaríamos de animar e um botão que vai executar (ou reexecutar) a animação.</p> + +<pre class="brush: html"><div class="box"> +</div> + +<div class="runButton">Clique em mim para rodar a animação</div></pre> + +<h3 id="Conteúdo_CSS">Conteúdo CSS</h3> + +<p>Agora vamos definir a animação em sí usando CSS. Algum CSS que não é importante (o estilo do botão "Rodar" em sí) não é mostrado aqui, por brevidade.</p> + +<div class="hidden"> +<pre class="brush: css">.runButton { + cursor: pointer; + width: 300px; + border: 1px solid black; + font-size: 16px; + text-align: center; + margin-top: 12px; + padding-top: 2px; + padding-bottom: 4px; + color: white; + background-color: darkgreen; + font: 14px "Open Sans", "Arial", sans-serif; +}</pre> +</div> + +<pre class="brush: css">@keyframes colorchange { + 0% { background: yellow } + 100% { background: blue } +} + +.box { + width: 100px; + height: 100px; + border: 1px solid black; +} + +.changing { + animation: colorchange 2s; +}</pre> + +<p>Existem duas classes aqui. A classe "<code>box</code>" é a descrição básica da aparência da caixa, sem nenhuma informação de animação inclusa. Os detalhes da animação são incluídos na classe "<code>changing</code>", a qual diz que o {{cssxref("@keyframes")}} chamado <code>"colorchange"</code> deveria ser usado no decorrer de dois segundos para animar a caixa.</p> + +<p>Perceba que por isso a caixa não começa com nenhum efeito de animação configurado, então não será animada.</p> + +<h3 id="Conteúdo_JavaScript">Conteúdo JavaScript</h3> + +<p>A seguir vamos olhar para o JavaScript que faz o trabalho. O macete dessa técnica está na função <code>play()</code> , a qual é chamada quando o usuário clica no botão de "rodar".</p> + +<pre class="brush: js">function play() { + document.querySelector(".box").className = "box"; + window.requestAnimationFrame(function(time) { + window.requestAnimationFrame(function(time) { + document.querySelector(".box").className = "box changing"; + }); + }); +}</pre> + +<p>Isso parece esquisito, não parece? É porque a única maneira de executar uma animação novamente é removendo o efeito de animação, deixar o documento recomputar os estilos para que ele saiba que você fez isso, e então adicionar o efeito de animação de volta ao elemento. Para fazer isso acontecer temos que ser criativos.</p> + +<p>Aqui está o que acontece quando a função <code>play()</code> é chamada:</p> + +<ol> + <li>The box's list of CSS classes is reset to simply <code>"box"</code>. This has the effect of removing any other classes currently applied to the box, including the <code>"changing"</code> class that handles animation. In other words, we're removing the animation effect from the box. However, changes to the class list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change.</li> + <li>To be sure that the styles are recalculated, we use {{domxref("window.requestAnimationFrame()")}}, specifying a callback. Our callback gets executed just before the next repaint of the document. The problem for us is that because it's before the repaint, the style recomputation hasn't actually happened yet! So...</li> + <li>Our callback cleverly calls <code>requestAnimationFrame()</code> a second time! This time, the callback is run before the next repaint, which is after the style recomputation has occurred. This callback adds the <code>"changing"</code> class back onto the box, so that the repaint will start the animation once again.</li> +</ol> + +<p>Claro, também precisamos adicionar um tratador de evento para o nosso botão de "rodar" para que ele de fato faça algo:</p> + +<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Animações CSS</li> + <li>Usando Animações CSS</li> + <li>{{domxref("Window.requestAnimationFrame()")}}</li> +</ul> diff --git a/files/pt-br/web/css/css_animations/usando_animações_css/index.html b/files/pt-br/web/css/css_animations/usando_animações_css/index.html new file mode 100644 index 0000000000..4bdd91ad9f --- /dev/null +++ b/files/pt-br/web/css/css_animations/usando_animações_css/index.html @@ -0,0 +1,332 @@ +--- +title: Usando animações CSS +slug: Web/CSS/CSS_Animations/Usando_animações_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +<p>{{SeeCompatTable}}{{CSSRef}}</p> + +<p>Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.</p> + +<p>Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:</p> + +<ol> + <li>São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.</li> + <li>As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.</li> + <li>Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.</li> +</ol> + +<h2 id="Configurando_a_animação">Configurando a animação</h2> + +<p>Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade {{ cssxref("animation") }} ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso <strong>não</strong> configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) {{ cssxref("@keyframes") }} como descrito em {{ anch("Defining the animation sequence using keyframes") }} abaixo.</p> + +<p>As sub-propriedades da propriedade {{cssxref("animation")}} são:</p> + +<dl> + <dt>{{ cssxref("animation-delay") }}</dt> + <dd>Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.</dd> + <dt>{{ cssxref("animation-direction") }}</dt> + <dd>Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.</dd> + <dt>{{ cssxref("animation-duration") }}</dt> + <dd>Configura o tempo que uma animação deveria levar para completar um ciclo.</dd> + <dt>{{ cssxref("animation-iteration-count") }}</dt> + <dd>Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.</dd> + <dt>{{ cssxref("animation-name") }}</dt> + <dd>Especifica o nome da regra com parênteses (at-rule) {{ cssxref("@keyframes") }} at-rule descrevendo os keyframes da animação.</dd> + <dt>{{ cssxref("animation-play-state") }}</dt> + <dd>Permite voce pausar e resumir a sequência da animação.</dd> + <dt>{{ cssxref("animation-timing-function") }}</dt> + <dd>Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.</dd> + <dt>{{ cssxref("animation-fill-mode") }}</dt> + <dd>Configura que valores são aplicados pela animação antes e depois de se executar.</dd> +</dl> + +<h2 id="Definindo_a_sequência_de_animação_usando_keyframes">Definindo a sequência de animação usando keyframes</h2> + +<p>Uma vez que você configurou a sincronização da animação, você precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) {{cssxref("@keyframes")}}. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.</p> + +<p>Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma {{cssxref("percentage")}} para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.</p> + +<p>Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<div class="note"><strong>Nota </strong>Os exemplos aqui não usam nenhum prefixo nas propriedades de animação CSS. Navegadores mais antigos podem precisar de prefixos; os exemplos ao vivo que você pode clicar pra ver em seu navegadores também incluem as versões prefixadas -webkit.</div> + +<h3 id="Fazendo_o_texto_deslizar_através_da_janela_do_navegador">Fazendo o texto deslizar através da janela do navegador</h3> + +<p>Esse exemplo simples estiliza o elemento {{HTMLElement("p")}} onde o elemento então desliza para dentro vindo de fora da lateral direita da janela do navegador.</p> + +<p>Perceba que animações como essa podem fazer com que a página se torne mais larga que a janela do navegador. Para evitar esse problema coloque o elemento a ser animado dentro de um container, e atribua {{cssxref("overflow")}}<code>:hidden</code> ao container.</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300% + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<p>O estilo para o elemento {{ HTMLElement("p") }} aqui especifica que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade {{cssxref("animation-duration")}}, e que o nome da regra com parênteses (at-rule){{cssxref("@keyframes")}} definindo os keyframes para a sequência de animação é nomeado por "slidein".</p> + +<p>Se quiséssemos quaisquer estilização customizada no elemento {{ HTMLElement("p") }} para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customizada a não ser o efeito da animação.</p> + +<p>Os keyframes são definidos utilizando-se as regras{{cssxref("@keyframes") }}. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.</p> + +<p>O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento {{ HTMLElement("p") }}, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.</p> + +<pre class="brush: html"> </pre> + +<p>A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.</p> + +<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p> + +<h3 id="Adicionando_outro_keyframe">Adicionando outro keyframe</h3> + +<p>Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:</p> + +<pre class="brush: css">75% { + font-size: 300%; + margin-left: 25%; + width: 150%; +} +</pre> + +<pre class="brush: css hidden">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"> </pre> + +<p>A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.</p> + +<p>Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%.</p> + +<p>{{EmbedLiveSample("Adicionando_outro_keyframe","100%","250")}}</p> + +<h3 id="Faça_repetir-se">Faça repetir-se</h3> + +<p>Para fazer a animação se repetir, simplesmente use a propriedade{{ cssxref("animation-iteration-count") }} para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar <code>infinite</code> para que a animação se repita indefinidamente:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; +} +</pre> + +<pre class="brush: css hidden">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"> </pre> + +<p>A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz linda e sonolenta.</p> + +<p>{{EmbedLiveSample("Faça_repetir-se","100%","250")}}</p> + +<h3 id="Fazendo_a_animação_se_mover_para_trás_e_para_frente">Fazendo a animação se mover para trás e para frente</h3> + +<p>Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade {{cssxref("animation-direction")}}:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<pre class="brush: css hidden">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre><code><p> A Lagarta e Alice olharam-se por algum tempo em silêncio: +finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a +ela com uma voz lânguida e sonolenta.</p></code></pre> + +<p>{{EmbedLiveSample("Fazendo_a_animação_se_mover_para_trás_e_para_frente","100%","250")}}</p> + +<h3 id="Usando_eventos_de_animação">Usando eventos de animação</h3> + +<p>Você pode ter controle adicional sobre animações -- como também informações úteis sobre elas -- através do uso de eventos de animação. Esses eventos, representados pelo objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , podem ser usados para detectar quando animações iniciam, terminam, e começam uma nova iteração. Cada evento inclui o tempo no qual ele ocorreu como também o nome da animação que lançou o evento.</p> + +<p>Nós vamos modificar o exemplo de deslizamento de texto para gerar alguma informação sobre cada evento de animação quando ele ocorrer, para que possamos perceber como eles funcionam.</p> + +<h4 id="Adicionando_o_CSS">Adicionando o CSS</h4> + +<p>Nós começamos criando o CSS para a animação. Essa animação vai durar por 3 segundos, se chamar "slidein", repetir 3 vezes, e alternar a direção cada vez. No {{ cssxref("@keyframes") }}, a largura (width) e a margem esquerda (margin-left) são manipulados para fazer o elemento deslizar na tela.</p> + +<pre class="brush: css">.slidein { + -moz-animation-duration: 3s; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -moz-animation-name: slidein; + -webkit-animation-name: slidein; + animation-name: slidein; + -moz-animation-iteration-count: 3; + -webkit-animation-iteration-count: 3; + animation-iteration-count: 3; + -moz-animation-direction: alternate; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +@-moz-keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +} + +@-webkit-keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +} + +@keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +}</pre> + +<h4 id="Adicionando_animação_a_lista_de_eventos">Adicionando animação a lista de eventos</h4> + +<p>Nós vamos usar o código JavaScript para escutar todos três possíveis eventos de animação. Esse código configura nossos escutadores de evento; nós o chamamos quando o documento é primeiramente carregado para configurar as coisas.</p> + +<pre class="brush: js">var e = document.getElementById("watchme"); +e.addEventListener("animationstart", listener, false); +e.addEventListener("animationend", listener, false); +e.addEventListener("animationiteration", listener, false); + +e.className = "slidein"; + +</pre> + +<p>Isso é simplesmente código padrão; você pode ter detalhes sobre como ele funciona na documentação para {{ domxref("element.addEventListener()") }}. A última coisa que este código faz é atribuir a classe no elemento o qual estaremos animando para "deslizar" (slidein); nós fazemos isso para iniciar a animação.</p> + +<p>Por que? Porque o evento <code>animationstart</code> dispara assim que a animação começa, e no nosso caso, isso acontece antes do nosso código rodar. Então nós mesmos vamos iniciar a animação através de atribuição da classe do elemento para o estilo que é animado depois do ocorrido.</p> + +<h4 id="Recebendo_os_eventos">Recebendo os eventos</h4> + +<p>Os eventos são entregues à função <code>listener()</code>, a qual é mostrada abaixo.</p> + +<pre class="brush: js">function listener(e) { + var l = document.createElement("li"); + switch(e.type) { + case "animationstart": + l.innerHTML = "Started: elapsed time is " + e.elapsedTime; + break; + case "animationend": + l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; + break; + case "animationiteration": + l.innerHTML = "New loop started at time " + e.elapsedTime; + break; + } + document.getElementById("output").appendChild(l); +} +</pre> + +<p>Esse código também é bem simples. Ele simplemente olha no {{ domxref("event.type") }} para determinar qual tipo de evento de animação ocorreu, então adiciona uma nota apropriada no {{ HTMLElement("ul") }} (lista não ordenada) que estamos usando para logar esses eventos.</p> + +<p>A saída, quando tudo foi dito e feito, parece com algo assim:</p> + +<ul> + <li>Started: elapsed time is 0</li> + <li>New loop started at time 3.01200008392334</li> + <li>New loop started at time 6.00600004196167</li> + <li>Ended: elapsed time is 9.234000205993652</li> +</ul> + +<p>Perceba que os tempos são bem próximos, mas não exatamente iguais, àqueles esperados dado o tempo estabelecido quando a animação foi configurada. Perceba também que após a ultima iteração da animação, o evento <code>animationiteration</code> não é enviado; ao invés disso, o evento <code>animationend</code> é enviado.</p> + +<h4 id="O_HTML">O HTML</h4> + +<p>Apenas por questão de completude, aqui está o HTML que exibe o conteúdo da pagina, incluindo a lista na qual o script insere informação sobre os eventos recebidos:</p> + +<pre class="brush: html"> </pre> + +<h1 id="Veja-me_mover">Veja-me mover</h1> + +<p>Este exemplo mostra como usar animações CSS para fazer o elemento <code> H1 </code> se mover pela página.</p> + +<p>Além disso, emitimos algum texto sempre que um evento de animação dispara, para que você possa vê-los em ação.</p> + +<ul id="output"> +</ul> + +<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> + <li><a href="/en/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detectando suporte de animação CSS</a></li> +</ul> diff --git a/files/pt-br/web/css/css_background_and_borders/index.html b/files/pt-br/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..87b26bd607 --- /dev/null +++ b/files/pt-br/web/css/css_background_and_borders/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-image")}}</li> + <li>{{cssxref("border-image-outset")}}</li> + <li>{{cssxref("border-image-repeat")}}</li> + <li>{{cssxref("border-image-slice")}}</li> + <li>{{cssxref("border-image-source")}}</li> + <li>{{cssxref("border-image-width")}}</li> + <li>{{cssxref("border-left")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-radius")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-width")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt> + <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt> + <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..cd35421288 --- /dev/null +++ b/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,57 @@ +--- +title: Multiple backgrounds +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +<p>{{CSSRef}}</p> + +<p>Com <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.</p> + +<p>Especificar planos de fundo múltplos é fácil:</p> + +<pre class="brush: css">.minhaClasse { + background: fundo1, fundo2, ..., fundoN; +} +</pre> + +<p>Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: <span class="lang lang-*"> </span>{{ cssxref("background") }}<span class="lang lang-*">, </span>{{ cssxref("background-attachment") }}<span class="lang lang-*">, </span>{{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:</p> + +<pre class="brush: css">.multi_bg_example { + background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), + -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), + url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); + background-repeat: no-repeat, no-repeat, repeat; + background-position: bottom right, left, right; +} +</pre> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Captura de Tela</td> + <td class="header" style="width: 202px;">Demonstração</td> + </tr> + <tr> + <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td> + <td style=""> </td> + </tr> + </tbody> +</table> + +<p>Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Usando degradês</a></li> +</ul> diff --git a/files/pt-br/web/css/css_basic_user_interface/index.html b/files/pt-br/web/css/css_basic_user_interface/index.html new file mode 100644 index 0000000000..a8acf19b3b --- /dev/null +++ b/files/pt-br/web/css/css_basic_user_interface/index.html @@ -0,0 +1,74 @@ +--- +title: CSS Basic User Interface +slug: Web/CSS/CSS_Basic_User_Interface +tags: + - CSS + - CSS Basic User Interface + - Overview + - Reference +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Basic User Interface</strong> é um módulo CSS que permite definir a renderização e a funcionalidade de recursos relacionados à interface do usuário.</p> + +<h2 id="Referência">Referência</h2> + +<h3 id="Propriedades">Propriedades</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("box-sizing")}}</li> + <li>{{CSSxRef("cursor")}}</li> + <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li> + <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("outline")}}</li> + <li>{{CSSxRef("outline-width")}}</li> + <li>{{CSSxRef("outline-style")}}</li> + <li>{{CSSxRef("outline-color")}}</li> + <li>{{CSSxRef("outline-offset")}}</li> + <li>{{CSSxRef("resize")}}</li> + <li>{{CSSxRef("text-overflow")}}</li> + <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h2 id="Guias">Guias</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">Usando valores URL na propriedade <code>cursor</code></a></dt> + <dd>Explica como uma URL pode ser usada com a propriedade {{CSSxRef("cursor")}} para criar cursores personalizados.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Basic UI")}}</td> + <td>{{Spec2("CSS4 Basic UI")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Basic UI")}}</td> + <td>{{Spec2("CSS3 Basic UI")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "ui.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/css/css_box_model/index.html b/files/pt-br/web/css/css_box_model/index.html new file mode 100644 index 0000000000..41f2f7cf8b --- /dev/null +++ b/files/pt-br/web/css/css_box_model/index.html @@ -0,0 +1,170 @@ +--- +title: CSS Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - CSS Reference + - Modelo de Caixa CSS + - NeedsTranslation + - Overview + - Referencia CSS + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Box Model (Modelo de Caixa CSS)</strong> é um módulo de CSS que define caixas retangulares, incluindo preenchimento (padding) e margem (margin), que são gerados por elementos e dispostos de acordo com o <a href="/en-US/docs/Web/CSS/Visual_formatting_model">modelo de formato visual</a>.</p> + +<h2 id="Referência">Referência</h2> + +<h3 id="Propriedades">Propriedades</h3> + +<h4 id="Propriedades_que_controlam_o_fluxo_de_conteúdo_em_uma_caixa">Propriedades que controlam o fluxo de conteúdo em uma caixa</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-decoration-break")}}</li> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("overflow")}}</li> + <li>{{cssxref("overflow-x")}}</li> + <li>{{cssxref("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Propriedades_que_controlam_o_tamanho_de_uma_caxia">Propriedades que controlam o tamanho de uma caxia</h4> + +<div class="index"> +<ul> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("min-width")}}</li> +</ul> +</div> + +<h4 id="Propriedades_que_controlam_as_margens_de_uma_caixa">Propriedades que controlam as margens de uma caixa</h4> + +<div class="index"> +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-top")}}</li> +</ul> +</div> + +<h4 id="Propriedades_que_controlam_o_preenchimento_padding_de_uma_caixa">Propriedades que controlam o preenchimento (padding) de uma caixa</h4> + +<div class="index"> +<ul> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-top")}}</li> +</ul> +</div> + +<h4 id="Outras_propriedades">Outras propriedades</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> +</div> + +<h2 id="Guias_e_ferramentas">Guias e ferramentas</h2> + +<dl> + <dt></dt> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introdução ao modelo de caixa CSS</a></dt> + <dd>Explicações de uma concepção fundamental no CSS, o modelo de caixa: descreve o sentido de margem, preenchimento, tambem como as diferentes áreas da caixa.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Dominando o colapso da margem</a></dt> + <dd>Na maioria dos casos, duas margens adjacentes são colapsadas em uma. Este artigo descreve quando isso acontecwe e como controlar isso.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Gerador de sombra de caixa</a></dt> + <dd>Uma ferramenta interativa que permite criar sombras visualmente e gerar a sintaxe necessária para a propriedade {{cssxref("box-shadow")}}.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/margin_collapsing/index.html new file mode 100644 index 0000000000..cb658d4131 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/margin_collapsing/index.html @@ -0,0 +1,74 @@ +--- +title: Dominando margin collapsing +slug: Web/CSS/CSS_Box_Model/margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Intermediario(2) + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div dir="ltr">{{CSSRef}}</div> + +<div dir="ltr">As margens <a href="/pt-BR/docs/Web/CSS/margin-top">superior</a> e <a href="/en-US/docs/Web/CSS/margin-bottom">inferior</a> dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como <strong>margin collapsing</strong>. Note que as margens de<a href="/pt-BR/docs/Web/CSS/float"> elementos flutuantes</a> e <a href="/pt-BR/docs/Web/CSS/position#Absolute_positioning">posicionados de forma absoluta</a> nunca colapsam.</div> + +<div dir="ltr"> </div> + +<p dir="ltr">Margin collapsing ocorre em três casos básicos:</p> + +<dl> + <dt dir="ltr">Irmãos adjacentes</dt> + <dd dir="ltr">As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar ser <a href="/en-US/docs/Web/CSS/clear">limpado</a> devido ao uso de floats em elementos anteriores ). Por exemplo:</dd> + <dd> + <pre class="brush: html"> <p>A margem inferior deste parágrafo é colapsada...</p> + <p>... com margem superior deste parágrafo.</p> +</pre> + </dd> + <dt dir="ltr">Pai e primeiro/último filho</dt> + <dd dir="ltr">Se não houver border, padding, parte inline, <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formatação de bloco</a> criado ou <a href="/en-US/docs/Web/CSS/clear">livre</a> para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.</dd> + <dd dir="ltr"> </dd> +</dl> + +<dl> + <dt dir="ltr">Blocos vázios</dt> + <dd dir="ltr">Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.</dd> + <dd dir="ltr"> </dd> +</dl> + +<p dir="ltr">Algumas coisas podem ser observadas:</p> + +<ul dir="ltr"> + <li>Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.</li> + <li>Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.</li> + <li>Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).</li> + <li>Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados. </li> +</ul> + +<p dir="ltr">Margens de <a href="/pt-BR/docs/Web/CSS/float">elementos flutuantes</a> e <a href="/pt-BR/docs/Web/CSS/position#Absolute_positioning">posicionados de forma absoluta</a> nunca colapsam.</p> + +<h2 dir="ltr" id="Especificações">Especificações</h2> + +<table class="standard-table" dir="ltr"> + <thead> + <tr> + <th scope="col">Espeficicações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 dir="ltr" id="Veja_Também">Veja Também</h2> + +<ul> + <li dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> + <li dir="ltr">{{css_key_concepts}}</li> +</ul> diff --git a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html b/files/pt-br/web/css/css_colors/seletor_de_cores/index.html new file mode 100644 index 0000000000..a98aaf9342 --- /dev/null +++ b/files/pt-br/web/css/css_colors/seletor_de_cores/index.html @@ -0,0 +1,3241 @@ +--- +title: Seletor de cores +slug: Web/CSS/CSS_Colors/seletor_de_cores +tags: + - CSS + - Cores CSS + - Cores HTML + - Ferramenta para Seleção de Cores CSS + - Ferramenta para Seleção de Cores HTML + - Ferramentas + - Seletor de Cores + - Seletor de Cores CSS + - Seletor de Cores HTML + - cor + - cores +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +<div style="display: none;"> +<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html notranslate"> <div id="container"> + <div id="palette" class="block"> + <div id="color-palette"></div> + <div id="color-info"> + <div class="title"> CSS Color </div> + </div> + </div> + + <div id="picker" class="block"> + <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> + <div id="picker-samples" sample-id="master"></div> + <div id="controls"> + <div id="delete"> + <div id="trash-can"></div> + </div> + <div id="void-sample" class="icon"></div> + </div> + </div> + + <div id="canvas" data-tutorial="drop"> + <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" + data-max="20" data-sensivity="10"></div> + </div> + </div> + +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css notranslate">/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + width: 420px; + margin: 0; + border: 1px solid #DDD; + background-color: #FFF; + display: table; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + cursor: default; +} + +/* HSV format - Hue-Saturation-Value(Brightness) */ +.ui-color-picker .picking-area { + background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; + + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + + background-color: #F00; +} + +/* HSL format - Hue-Saturation-Lightness */ +.ui-color-picker[data-mode='HSL'] .picking-area { + background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background-color: #F00; +} + +.ui-color-picker .picker { + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #FFF; + position: absolute; + top: 45%; + left: 45%; +} + +.ui-color-picker .picker:before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #FFF; + float: left; +} + +.ui-color-picker .hue { + background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); +} + +.ui-color-picker .alpha { + border: 1px solid #CCC; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); +} + +.ui-color-picker .alpha-mask { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); +} + +.ui-color-picker .slider-picker { + width: 2px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; +} + +/* input HSV and RGB */ + +.ui-color-picker .info { + width: 200px; + margin: 5px; + float: left; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + width: 64px; + margin: 5px 2px; + float: left; +} + +.ui-color-picker .input .name { + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; +} + +.ui-color-picker .input input { + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #DDD; + text-align: center; + float: right; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + display: none; +} + +.ui-color-picker .input[data-topic="hexa"] > input { + width: 90px; + height: 24px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Preview color */ +.ui-color-picker .preview { + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #DDD; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + float: left; + position: relative; +} + +.ui-color-picker .preview:before { + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +.ui-color-picker .preview-color { + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.5); + position: absolute; + z-index: 1; +} + +.ui-color-picker .switch_mode { + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #DDD; + background-color: #EEE; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * COLOR PICKER TOOL + */ + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + box-shadow: 0 0 5px 0 #999; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +/** + * Resize Handle + */ +.resize-handle { + width: 10px; + height: 10px; + background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +[data-hidden='true'] { + display: none; +} + +[data-collapsed='true'] { + height: 0 !important; +} + +.block { + display: table; +} + + +/** + * Container + */ +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + display: table; +} + +/** + * Picker Zone + */ + +#picker { + padding: 10px; + width: 980px; +} + +.ui-color-picker { + padding: 3px 5px; + float: left; + border-color: #FFF; +} + +.ui-color-picker .switch_mode { + display: none; +} + +.ui-color-picker .preview-color:hover { + cursor: move; +} + +/** + * Picker Container + */ + +#picker-samples { + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; + + transition: all 0.2s; +} + +#picker-samples .sample { + width: 40px; + height: 40px; + margin: 5px; + border: 1px solid #DDD; + position: absolute; + float: left; + transition: all 0.2s; +} + +#picker-samples .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#picker-samples .sample[data-active='true'] { + border-color: #999; +} + +#picker-samples .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#picker-samples #add-icon { + width: 100%; + height: 100%; + position: relative; + box-shadow: inset 0px 0px 2px 0px #DDD; +} + +#picker-samples #add-icon:hover { + cursor: pointer; + border-color: #DDD; + box-shadow: inset 0px 0px 5px 0px #CCC; +} + +#picker-samples #add-icon:before, +#picker-samples #add-icon:after { + content: ""; + position: absolute; + background-color: #EEE; + box-shadow: 0 0 1px 0 #EEE; +} + +#picker-samples #add-icon:before { + width: 70%; + height: 16%; + top: 42%; + left: 15%; +} + +#picker-samples #add-icon:after { + width: 16%; + height: 70%; + top: 15%; + left: 42%; +} + +#picker-samples #add-icon:hover:before, +#picker-samples #add-icon:hover:after { + background-color: #DDD; + box-shadow: 0 0 1px 0 #DDD; +} + +/** + * Controls + */ + +#controls { + width: 110px; + padding: 10px; + float: right; +} + +#controls #picker-switch { + text-align: center; + float: left; +} + +#controls .icon { + width: 48px; + height: 48px; + margin: 10px 0; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #DDD; + display: table; + float: left; +} + +#controls .icon:hover { + cursor: pointer; +} + +#controls .picker-icon { + background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); +} + +#controls #void-sample { + margin-right: 10px; + background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); + background-position: center left; +} + +#controls #void-sample[data-active='true'] { + border-color: #CCC; + background-position: center right; +} + +#controls .switch { + width: 106px; + padding: 1px; + border: 1px solid #CCC; + font-size: 14px; + text-align: center; + line-height: 24px; + overflow: hidden; + float: left; +} + +#controls .switch:hover { + cursor: pointer; +} + +#controls .switch > * { + width: 50%; + padding: 2px 0; + background-color: #EEE; + float: left; +} + +#controls .switch [data-active='true'] { + color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-color: #777; +} + +/** + * Trash Can + */ + +#delete { + width: 100%; + height: 94px; + background-color: #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + + text-align: center; + color: #777; + + position: relative; + float: right; +} + +#delete #trash-can { + width: 80%; + height: 80%; + border: 2px dashed #FFF; + border-radius: 5px; + background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; + + position: absolute; + top: 10%; + left: 10%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + transition: all 0.2s; +} + +#delete[drag-state='enter'] { + background-color: #999; +} + +/** + * Color Theme + */ + +#color-theme { + margin: 0 8px 0 0; + border: 1px solid #EEE; + display: inline-block; + float: right; +} + +#color-theme .box { + width: 80px; + height: 92px; + float: left; +} + +/** + * Color info box + */ +#color-info { + width: 360px; + float: left; +} + +#color-info .title { + width: 100%; + padding: 15px; + font-size: 18px; + text-align: center; + background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); + background-repeat:no-repeat; + background-position: center left 30%; +} + +#color-info .copy-container { + position: absolute; + top: -100%; +} + +#color-info .property { + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; +} + +#color-info .property > * { + float: left; +} + +#color-info .property .type { + width: 60px; + height: 100%; + padding: 0 16px 0 0; + text-align: right; +} + +#color-info .property .value { + width: 200px; + height: 100%; + padding: 0 10px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 16px; + color: #777; + text-align: center; + background-color: #FFF; + border: none; +} + +#color-info .property .value:hover { + color: #37994A; +} + +#color-info .property .value:hover + .copy { + background-position: center right; +} + +#color-info .property .copy { + width: 24px; + height: 100%; + padding: 0 5px; + background-color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); + background-repeat: no-repeat; + background-position: center left; + border-left: 1px solid #EEE; + text-align: right; + float: left; +} + +#color-info .property .copy:hover { + background-position: center right; +} + + +/** + * Color Palette + */ + +#palette { + width: 1000px; + padding: 10px 0; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + background-color: #EEE; + color: #777; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#color-palette { + width: 640px; + font-family: Arial, Helvetica, sans-serif; + color: #777; + float: left; +} + +#color-palette .container { + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; +} + +#color-palette .container > * { + float: left; +} + +#color-palette .title { + width: 100px; + padding: 0 10px; + text-align: right; + line-height: inherit; +} + +#color-palette .palette { + width: 456px; + height: 38px; + margin: 3px; + padding: 3px; + display: table; + background-color: #FFF; +} + +#color-palette .palette .sample { + width: 30px; + height: 30px; + margin: 3px; + position: relative; + border: 1px solid #DDD; + float: left; + transition: all 0.2s; +} + +#color-palette .palette .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#color-palette .controls { +} + +#color-palette .controls > * { + float: left; +} + +#color-palette .controls > *:hover { + cursor: pointer; +} + +#color-palette .controls .lock { + width: 24px; + height: 24px; + margin: 10px; + padding: 3px; + background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); + background-repeat: no-repeat; + background-position: bottom right; +} + +#color-palette .controls .lock:hover { + /*background-image: url('images/unlocked-hover.png');*/ + background-position: bottom left; +} + +#color-palette .controls .lock[locked-state='true'] { + /*background-image: url('images/locked.png');*/ + background-position: top left ; +} + +#color-palette .controls .lock[locked-state='true']:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; +} + +/** + * Canvas + */ + +#canvas { + width: 100%; + height: 300px; + min-height: 250px; + border-top: 1px solid #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + position: relative; + float: left; +} + +#canvas[data-tutorial='drop'] { + text-align: center; + font-size: 30px; + color: #777; +} + +#canvas[data-tutorial='drop']:before { + content: "Drop colors here to compare"; + width: 40%; + padding: 30px 9% 70px 11%; + + background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); + background-repeat: no-repeat; + background-position: left 35px top 60%; + + text-align: right; + + border: 3px dashed rgb(221, 221, 221); + border-radius: 15px; + + position: absolute; + top: 50px; + left: 20%; +} + +#canvas[data-tutorial='drop']:after { + content: "adjust, change or modify"; + width: 40%; + font-size: 24px; + position: absolute; + top: 130px; + left: 32%; + z-index: 2; +} + +#canvas [data-tutorial='dblclick'] { + background-color: #999 !important; +} + +#canvas [data-tutorial='dblclick']:before { + content: "double click to activate"; + width: 80px; + color: #FFF; + position: absolute; + top: 10%; + left: 20%; + z-index: 2; +} + +#canvas .sample { + width: 100px; + height: 100px; + min-width: 20px; + min-height: 20px; + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.3); +} + +#canvas .sample:hover { + cursor: move; +} + +#canvas .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#canvas .sample:hover > * { + cursor: pointer; + display: block !important; +} + +#canvas .sample .resize-handle { + display: none; +} + +#canvas .sample .pick { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; + position: absolute; + top: 0; + left: 0; + display: none; +} + +#canvas .sample .delete { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; + position: absolute; + top: 0; + right: 0; + display: none; +} + + +/** + * Canvas controls + */ + +#canvas .toggle-bg { + width: 16px; + height: 16px; + margin: 5px; + background: url("images/canvas-controls.png") center left no-repeat; + position: absolute; + top: 0; + right: 0; +} + +#canvas .toggle-bg:hover { + cursor: pointer; +} + +#canvas[data-bg='true'] { + background: none; +} + +#canvas[data-bg='true'] .toggle-bg { + background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; +} + +#zindex { + height: 20px; + margin: 5px; + font-size: 16px; + position: absolute; + opacity: 0; + top: -10000px; + left: 0; + color: #777; + float: left; + transition: opacity 1s; +} + +#zindex input { + border: 1px solid #DDD; + font-size: 16px; + color: #777; +} + +#zindex .ui-input-slider-info { + width: 60px; +} + +#zindex[data-active='true'] { + top: 0; + opacity: 1; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js notranslate">'use strict'; + +var UIColorPicker = (function UIColorPicker() { + + function getElemById(id) { + return document.getElementById(id); + } + + var subscribers = []; + var pickers = []; + + /** + * RGBA Color class + * + * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + * @param lightness 0-100 + */ + + function Color(color) { + + if(color instanceof Color === true) { + this.copy(color); + return; + } + + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + this.lightness = 0; + this.format = 'HSV'; + } + + function RGBColor(r, g, b) { + var color = new Color(); + color.setRGBA(r, g, b, 1); + return color; + } + + function RGBAColor(r, g, b, a) { + var color = new Color(); + color.setRGBA(r, g, b, a); + return color; + } + + function HSVColor(h, s, v) { + var color = new Color(); + color.setHSV(h, s, v); + return color; + } + + function HSVAColor(h, s, v, a) { + var color = new Color(); + color.setHSV(h, s, v); + color.a = a; + return color; + } + + function HSLColor(h, s, l) { + var color = new Color(); + color.setHSL(h, s, l); + return color; + } + + function HSLAColor(h, s, l, a) { + var color = new Color(); + color.setHSL(h, s, l); + color.a = a; + return color; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + this.format = '' + obj.format; + this.lightness = obj.lightness; + }; + + Color.prototype.setFormat = function setFormat(format) { + if (format === 'HSV') + this.format = 'HSV'; + if (format === 'HSL') + this.format = 'HSL'; + }; + + /*========== Methods to set Color Properties ==========*/ + + Color.prototype.isValidRGBValue = function isValidRGBValue(value) { + return (typeof(value) === 'number' && isNaN(value) === false && + value >= 0 && value <= 255); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) + this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === 'r' || name === 'g' || name === 'b') { + if(this.isValidRGBValue(value) === false) + return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 359) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.RGBtoHSV(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === 'HSL') + return; + + this.setFormat('HSL'); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHSV = function convertToHSV() { + if (this.format === 'HSV') + return; + + this.setFormat('HSV'); + this.RGBtoHSV(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === 'HSV') { + this.HSVtoRGB(); + return; + } + + if (this.format === 'HSL') { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === 'HSV') { + this.RGBtoHSV(); + return; + } + + if (this.format === 'HSL') { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HSVtoRGB = function HSVtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = light - C/2; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.RGBtoHSV = function RGBtoHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = (1 - Math.abs(2 * lightness - 1)); + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / X; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; + var a = ''; + var v = ''; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'rgb' + a + rgb + v + ')'; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === 'HSV') { + var color = new Color(this); + color.setFormat('HSL'); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ''; + var v = ''; + var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'hsl' + a + hsl + v + ')'; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener('mousedown', function(e) { + callback(e); + document.addEventListener('mousemove', callback); + }); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute('data-mode'); + var topic = this.node.getAttribute('data-topic'); + + this.topic = topic; + this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); + this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); + this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); + this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); + + this.createAlphaArea(); + + this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); + this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); + this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); + this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'picking-area'; + picker.className = 'picker'; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'hue'; + picker.className ='slider-picker'; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var area = document.createElement('div'); + var mask = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'alpha'; + mask.className = 'alpha-mask'; + picker.className = 'slider-picker'; + + this.alpha_area = area; + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(area, this.updateAlphaSlider.bind(this)); + + area.appendChild(mask); + mask.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement('div'); + var preview_color = document.createElement('div'); + + preview_box.className = 'preview'; + preview_color.className = 'preview-color'; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { + var wrapper = document.createElement('div'); + var input = document.createElement('input'); + var info = document.createElement('span'); + + wrapper.className = 'input'; + wrapper.setAttribute('data-topic', topic); + info.textContent = title; + info.className = 'name'; + input.setAttribute('type', 'text'); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { + + var button = document.createElement('div'); + button.className = 'switch_mode'; + button.addEventListener('click', function() { + if (this.picker_mode === 'HSV') + this.setPickerMode('HSL'); + else + this.setPickerMode('HSV'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + var picker_offset = 5; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + if (this.picker_mode === 'HSV') + this.color.setHSV(this.color.hue, saturation, value); + if (this.picker_mode === 'HSL') + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x - picker_offset + 'px'; + this.color_picker.style.top = y - picker_offset + 'px'; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('value', value); + this.notify('lightness', value); + this.notify('saturation', saturation); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + // TODO 360 => 359 + var hue = ((359 * x) / width) | 0; + // if (hue === 360) hue = 359; + + this.updateSliderPosition(this.hue_picker, x); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_area.offsetLeft; + var width = this.alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x); + this.updatePreviewColor(); + + this.notify('alpha', this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + this.notify('hue', this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + var offset = 5; + + if (this.picker_mode === 'HSV') + value = this.color.value; + if (this.picker_mode === 'HSL') + value = this.color.lightness; + + var x = (this.color.saturation * size / 100) | 0; + var y = size - (value * size / 100) | 0; + + this.color_picker.style.left = x - offset + 'px'; + this.color_picker.style.top = y - offset + 'px'; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { + elem.style.left = Math.max(pos - 3, -2) + 'px'; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var offset = 1; + var pos = (this.color.hue * size / 360 ) | 0; + this.hue_picker.style.left = pos - offset + 'px'; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_area.clientWidth; + var offset = 1; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos - offset + 'px'; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHSV(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName('r', value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName('g', value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName('b', value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) + this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if(color instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + + this.notify('hue', this.color.hue); + this.notify('saturation', this.color.saturation); + this.notify('value', this.color.value); + this.notify('lightness', this.color.lightness); + + this.notify('alpha', this.color.a); + this.notify('hexa', this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== 'HSV' && mode !== 'HSL') + return; + + this.picker_mode = mode; + this.node.setAttribute('data-mode', this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) + pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) + pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) + return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) + subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-color-picker'); + var size = elem.length; + for (var i = 0; i < size; i++) + new ColorPicker(elem[i]); + }; + + return { + init : init, + Color : Color, + RGBColor : RGBColor, + RGBAColor : RGBAColor, + HSVColor : HSVColor, + HSVAColor : HSVAColor, + HSLColor : HSLColor, + HSLAColor : HSLAColor, + setColor : setColor, + getColor : getColor, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPickerMode : setPickerMode + }; + +})(); + + + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +'use strict'; + +window.addEventListener("load", function() { + ColorPickerTool.init(); +}); + +var ColorPickerTool = (function ColorPickerTool() { + + /*========== Get DOM Element By ID ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + /*========== Make an element resizable relative to it's parent ==========*/ + + var UIComponent = (function UIComponent() { + + function makeResizable(elem, axis) { + var valueX = 0; + var valueY = 0; + var action = 0; + + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) + return; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + document.body.setAttribute('data-resize', axis); + document.addEventListener('mousemove', mouseMove); + document.addEventListener('mouseup', resizeEnd); + }; + + var mouseMove = function mouseMove(e) { + if (action >= 0) + elem.style.width = e.clientX - valueX + 'px'; + if (action <= 0) + elem.style.height = e.clientY - valueY + 'px'; + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + if (axis === 'width') action = 1; + else if (axis === 'height') action = -1; + else axis = 'both'; + + handle.className = 'resize-handle'; + handle.setAttribute('data-resize', axis); + handle.addEventListener('mousedown', resizeStart); + elem.appendChild(handle); + }; + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + e.preventDefault(); + e.stopPropagation(); + + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + return { + makeResizable : makeResizable, + makeDraggable : makeDraggable + }; + + })(); + + /*========== Color Class ==========*/ + + var Color = UIColorPicker.Color; + var HSLColor = UIColorPicker.HSLColor; + + /** + * ColorPalette + */ + var ColorPalette = (function ColorPalette() { + + var samples = []; + var color_palette; + var complementary; + + var hideNode = function(node) { + node.setAttribute('data-hidden', 'true'); + }; + + var ColorSample = function ColorSample(id) { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.node = node; + this.color = new Color(); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('click', this.pickColor.bind(this)); + + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { + this.color.copy(color); + var hue = (steps * degree + this.color.hue) % 360; + if (hue < 0) hue += 360; + this.color.setHue(hue); + this.updateBgColor(); + }; + + ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { + var saturation = color.saturation + value * steps; + if (saturation <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setSaturation(saturation); + this.updateBgColor(); + }; + + ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { + var lightness = color.lightness + value * steps; + if (lightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setLightness(lightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { + var brightness = color.value + value * steps; + if (brightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setValue(brightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { + var alpha = parseFloat(color.a) + value * steps; + if (alpha <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.a = parseFloat(alpha.toFixed(2)); + this.updateBgColor(); + }; + + ColorSample.prototype.pickColor = function pickColor() { + UIColorPicker.setColor('picker', this.color); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'palette-samples'); + }; + + var Palette = function Palette(text, size) { + this.samples = []; + this.locked = false; + + var palette = document.createElement('div'); + var title = document.createElement('div'); + var controls = document.createElement('div'); + var container = document.createElement('div'); + var lock = document.createElement('div'); + + container.className = 'container'; + title.className = 'title'; + palette.className = 'palette'; + controls.className = 'controls'; + lock.className = 'lock'; + title.textContent = text; + + controls.appendChild(lock); + container.appendChild(title); + container.appendChild(controls); + container.appendChild(palette); + + lock.addEventListener('click', function () { + this.locked = !this.locked; + lock.setAttribute('locked-state', this.locked); + }.bind(this)); + + for(var i = 0; i < size; i++) { + var sample = new ColorSample(); + this.samples.push(sample); + palette.appendChild(sample.node); + } + + this.container = container; + this.title = title; + }; + + var createHuePalette = function createHuePalette() { + var palette = new Palette('Hue', 12); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 12; i++) { + palette.samples[i].updateHue(color, 30, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var createSaturationPalette = function createSaturationPalette() { + var palette = new Palette('Saturation', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 11; i++) { + palette.samples[i].updateSaturation(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + /* Brightness or Lightness - depends on the picker mode */ + var createVLPalette = function createSaturationPalette() { + var palette = new Palette('Lightness', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + if(color.format === 'HSL') { + palette.title.textContent = 'Lightness'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateLightness(color, -10, i); + } + else { + palette.title.textContent = 'Value'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateBrightness(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var isBlankPalette = function isBlankPalette(container, value) { + if (value === 0) { + container.setAttribute('data-collapsed', 'true'); + return true; + } + + container.removeAttribute('data-collapsed'); + return false; + }; + + var createAlphaPalette = function createAlphaPalette() { + var palette = new Palette('Alpha', 10); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 10; i++) { + palette.samples[i].updateAlpha(color, -0.1, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var init = function init() { + color_palette = getElemById('color-palette'); + + createHuePalette(); + createSaturationPalette(); + createVLPalette(); + createAlphaPalette(); + + }; + + return { + init : init, + getSampleColor : getSampleColor + }; + + })(); + + /** + * ColorInfo + */ + var ColorInfo = (function ColorInfo() { + + var info_box; + var select; + var RGBA; + var HEXA; + var HSLA; + + var updateInfo = function updateInfo(color) { + if (color.a | 0 === 1) { + RGBA.info.textContent = 'RGB'; + HSLA.info.textContent = 'HSL'; + } + else { + RGBA.info.textContent = 'RGBA'; + HSLA.info.textContent = 'HSLA'; + } + + RGBA.value.value = color.getRGBA(); + HSLA.value.value = color.getHSLA(); + HEXA.value.value = color.getHexa(); + }; + + var InfoProperty = function InfoProperty(info) { + + var node = document.createElement('div'); + var title = document.createElement('div'); + var value = document.createElement('input'); + var copy = document.createElement('div'); + + node.className = 'property'; + title.className = 'type'; + value.className = 'value'; + copy.className = 'copy'; + + title.textContent = info; + value.setAttribute('type', 'text'); + + copy.addEventListener('click', function() { + value.select(); + }); + + node.appendChild(title); + node.appendChild(value); + node.appendChild(copy); + + this.node = node; + this.value = value; + this.info = title; + + info_box.appendChild(node); + }; + + var init = function init() { + + info_box = getElemById('color-info'); + + RGBA = new InfoProperty('RGBA'); + HSLA = new InfoProperty('HSLA'); + HEXA = new InfoProperty('HEXA'); + + UIColorPicker.subscribe('picker', updateInfo); + + }; + + return { + init: init + }; + + })(); + + /** + * ColorPicker Samples + */ + var ColorPickerSamples = (function ColorPickerSamples() { + + var samples = []; + var nr_samples = 0; + var active = null; + var container = null; + var samples_per_line = 10; + var trash_can = null; + var base_color = new HSLColor(0, 50, 100); + var add_btn; + var add_btn_pos; + + var ColorSample = function ColorSample() { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.index = nr_samples++; + this.node = node; + this.color = new Color(base_color); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('dragover' , allowDropEvent); + node.addEventListener('drop' , this.dragDrop.bind(this)); + + this.updatePosition(this.index); + this.updateBgColor(); + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updatePosition = function updatePosition(index) { + this.index = index; + this.posY = 5 + ((index / samples_per_line) | 0) * 52; + this.posX = 5 + ((index % samples_per_line) | 0) * 52; + this.node.style.top = this.posY + 'px'; + this.node.style.left = this.posX + 'px'; + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.activate = function activate() { + UIColorPicker.setColor('picker', this.color); + this.node.setAttribute('data-active', 'true'); + }; + + ColorSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'picker-samples'); + }; + + ColorSample.prototype.dragDrop = function dragDrop(e) { + e.stopPropagation(); + this.color = Tool.getSampleColorFrom(e); + this.updateBgColor(); + }; + + ColorSample.prototype.deleteSample = function deleteSample() { + container.removeChild(this.node); + samples[this.uid] = null; + nr_samples--; + }; + + var updateUI = function updateUI() { + updateContainerProp(); + + var index = 0; + var nr = samples.length; + for (var i=0; i < nr; i++) + if (samples[i] !== null) { + samples[i].updatePosition(index); + index++; + } + + AddSampleButton.updatePosition(index); + }; + + var deleteSample = function deleteSample(e) { + trash_can.parentElement.setAttribute('drag-state', 'none'); + + var location = e.dataTransfer.getData('location'); + if (location !== 'picker-samples') + return; + + var sampleID = e.dataTransfer.getData('sampleID'); + samples[sampleID].deleteSample(); + console.log(samples); + + updateUI(); + }; + + var createDropSample = function createDropSample() { + var sample = document.createElement('div'); + sample.id = 'drop-effect-sample'; + sample.className = 'sample'; + container.appendChild(sample); + }; + + var setActivateSample = function setActivateSample(e) { + if (e.target.className !== 'sample') + return; + + unsetActiveSample(active); + Tool.unsetVoidSample(); + CanvasSamples.unsetActiveSample(); + active = samples[e.target.getAttribute('sample-id')]; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var updateContainerProp = function updateContainerProp() { + samples_per_line = ((container.clientWidth - 5) / 52) | 0; + var height = 52 * (1 + (nr_samples / samples_per_line) | 0); + container.style.height = height + 10 + 'px'; + }; + + var AddSampleButton = (function AddSampleButton() { + var node; + var _index = 0; + var _posX; + var _posY; + + var updatePosition = function updatePosition(index) { + _index = index; + _posY = 5 + ((index / samples_per_line) | 0) * 52; + _posX = 5 + ((index % samples_per_line) | 0) * 52; + + node.style.top = _posY + 'px'; + node.style.left = _posX + 'px'; + }; + + var addButtonClick = function addButtonClick() { + var sample = new ColorSample(); + container.appendChild(sample.node); + updatePosition(_index + 1); + updateUI(); + }; + + var init = function init() { + node = document.createElement('div'); + var icon = document.createElement('div'); + + node.className = 'sample'; + icon.id = 'add-icon'; + node.appendChild(icon); + node.addEventListener('click', addButtonClick); + + updatePosition(0); + container.appendChild(node); + }; + + return { + init : init, + updatePosition : updatePosition + }; + })(); + + var init = function init() { + container = getElemById('picker-samples'); + trash_can = getElemById('trash-can'); + + AddSampleButton.init(); + + for (var i=0; i<16; i++) { + var sample = new ColorSample(); + container.appendChild(sample.node); + } + + AddSampleButton.updatePosition(samples.length); + updateUI(); + + active = samples[0]; + active.activate(); + + container.addEventListener('click', setActivateSample); + + trash_can.addEventListener('dragover', allowDropEvent); + trash_can.addEventListener('dragenter', function() { + this.parentElement.setAttribute('drag-state', 'enter'); + }); + trash_can.addEventListener('dragleave', function(e) { + this.parentElement.setAttribute('drag-state', 'none'); + }); + trash_can.addEventListener('drop', deleteSample); + + UIColorPicker.subscribe('picker', function(color) { + if (active) + active.updateColor(color); + }); + + }; + + return { + init : init, + getSampleColor : getSampleColor, + unsetActiveSample : unsetActiveSample + }; + + })(); + + /** + * Canvas Samples + */ + var CanvasSamples = (function CanvasSamples() { + + var active = null; + var canvas = null; + var samples = []; + var zindex = null; + var tutorial = true; + + var CanvasSample = function CanvasSample(color, posX, posY) { + + var node = document.createElement('div'); + var pick = document.createElement('div'); + var delete_btn = document.createElement('div'); + node.className = 'sample'; + pick.className = 'pick'; + delete_btn.className = 'delete'; + + this.uid = samples.length; + this.node = node; + this.color = color; + this.updateBgColor(); + this.zIndex = 1; + + node.style.top = posY - 50 + 'px'; + node.style.left = posX - 50 + 'px'; + node.setAttribute('sample-id', this.uid); + + node.appendChild(pick); + node.appendChild(delete_btn); + + var activate = function activate() { + setActiveSample(this); + }.bind(this); + + node.addEventListener('dblclick', activate); + pick.addEventListener('click', activate); + delete_btn.addEventListener('click', this.deleteSample.bind(this)); + + UIComponent.makeDraggable(node); + UIComponent.makeResizable(node); + + samples.push(this); + canvas.appendChild(node); + return this; + }; + + CanvasSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + CanvasSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + CanvasSample.prototype.updateZIndex = function updateZIndex(value) { + this.zIndex = value; + this.node.style.zIndex = value; + }; + + CanvasSample.prototype.activate = function activate() { + this.node.setAttribute('data-active', 'true'); + zindex.setAttribute('data-active', 'true'); + + UIColorPicker.setColor('picker', this.color); + InputSliderManager.setValue('z-index', this.zIndex); + }; + + CanvasSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + zindex.removeAttribute('data-active'); + }; + + CanvasSample.prototype.deleteSample = function deleteSample() { + if (active === this) + unsetActiveSample(); + canvas.removeChild(this.node); + samples[this.uid] = null; + }; + + CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { + this.node.style.top = posY - this.startY + 'px'; + this.node.style.left = posX - this.startX + 'px'; + }; + + var canvasDropEvent = function canvasDropEvent(e) { + var color = Tool.getSampleColorFrom(e); + + if (color) { + var offsetX = e.pageX - canvas.offsetLeft; + var offsetY = e.pageY - canvas.offsetTop; + var sample = new CanvasSample(color, offsetX, offsetY); + if (tutorial) { + tutorial = false; + canvas.removeAttribute('data-tutorial'); + var info = new CanvasSample(new Color(), 100, 100); + info.node.setAttribute('data-tutorial', 'dblclick'); + } + } + + }; + + var setActiveSample = function setActiveSample(sample) { + ColorPickerSamples.unsetActiveSample(); + Tool.unsetVoidSample(); + unsetActiveSample(); + active = sample; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var createToggleBgButton = function createToggleBgButton() { + var button = document.createElement('div'); + var state = false; + button.className = 'toggle-bg'; + canvas.appendChild(button); + + button.addEventListener('click', function() { + console.log(state); + state = !state; + canvas.setAttribute('data-bg', state); + }); + }; + + var init = function init() { + canvas = getElemById('canvas'); + zindex = getElemById('zindex'); + + canvas.addEventListener('dragover', allowDropEvent); + canvas.addEventListener('drop', canvasDropEvent); + + createToggleBgButton(); + + UIColorPicker.subscribe('picker', function(color) { + if (active) active.updateColor(color); + }); + + InputSliderManager.subscribe('z-index', function (value) { + if (active) active.updateZIndex(value); + }); + + UIComponent.makeResizable(canvas, 'height'); + }; + + return { + init : init, + unsetActiveSample : unsetActiveSample + }; + + })(); + + var StateButton = function StateButton(node, state) { + this.state = false; + this.callback = null; + + node.addEventListener('click', function() { + this.state = !this.state; + if (typeof this.callback === "function") + this.callback(this.state); + }.bind(this)); + }; + + StateButton.prototype.set = function set() { + this.state = true; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.unset = function unset() { + this.state = false; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.subscribe = function subscribe(func) { + this.callback = func; + }; + + + /** + * Tool + */ + var Tool = (function Tool() { + + var samples = []; + var controls = null; + var void_sw; + + var createPickerModeSwitch = function createPickerModeSwitch() { + var parent = getElemById('controls'); + var icon = document.createElement('div'); + var button = document.createElement('div'); + var hsv = document.createElement('div'); + var hsl = document.createElement('div'); + var active = null; + + icon.className = 'icon picker-icon'; + button.className = 'switch'; + button.appendChild(hsv); + button.appendChild(hsl); + + hsv.textContent = 'HSV'; + hsl.textContent = 'HSL'; + + active = hsl; + active.setAttribute('data-active', 'true'); + + function switchPickingModeTo(elem) { + active.removeAttribute('data-active'); + active = elem; + active.setAttribute('data-active', 'true'); + UIColorPicker.setPickerMode('picker', active.textContent); + }; + + var picker_sw = new StateButton(icon); + picker_sw.subscribe(function() { + if (active === hsv) + switchPickingModeTo(hsl); + else + switchPickingModeTo(hsv); + }); + + hsv.addEventListener('click', function() { + switchPickingModeTo(hsv); + }); + hsl.addEventListener('click', function() { + switchPickingModeTo(hsl); + }); + + parent.appendChild(icon); + parent.appendChild(button); + }; + + var setPickerDragAndDrop = function setPickerDragAndDrop() { + var preview = document.querySelector('#picker .preview-color'); + var picking_area = document.querySelector('#picker .picking-area'); + + preview.setAttribute('draggable', 'true'); + preview.addEventListener('drop', drop); + preview.addEventListener('dragstart', dragStart); + preview.addEventListener('dragover', allowDropEvent); + + picking_area.addEventListener('drop', drop); + picking_area.addEventListener('dragover', allowDropEvent); + + function drop(e) { + var color = getSampleColorFrom(e); + UIColorPicker.setColor('picker', color); + }; + + function dragStart(e) { + e.dataTransfer.setData('sampleID', 'picker'); + e.dataTransfer.setData('location', 'picker'); + }; + }; + + var getSampleColorFrom = function getSampleColorFrom(e) { + var sampleID = e.dataTransfer.getData('sampleID'); + var location = e.dataTransfer.getData('location'); + + if (location === 'picker') + return UIColorPicker.getColor(sampleID); + if (location === 'picker-samples') + return ColorPickerSamples.getSampleColor(sampleID); + if (location === 'palette-samples') + return ColorPalette.getSampleColor(sampleID); + }; + + var setVoidSwitch = function setVoidSwitch() { + var void_sample = getElemById('void-sample'); + void_sw = new StateButton(void_sample); + void_sw.subscribe( function (state) { + void_sample.setAttribute('data-active', state); + if (state === true) { + ColorPickerSamples.unsetActiveSample(); + CanvasSamples.unsetActiveSample(); + } + }); + }; + + var unsetVoidSample = function unsetVoidSample() { + void_sw.unset(); + }; + + var init = function init() { + controls = getElemById('controls'); + + var color = new Color(); + color.setHSL(0, 51, 51); + UIColorPicker.setColor('picker', color); + + setPickerDragAndDrop(); + createPickerModeSwitch(); + setVoidSwitch(); + }; + + return { + init : init, + unsetVoidSample : unsetVoidSample, + getSampleColorFrom : getSampleColorFrom + }; + + })(); + + var init = function init() { + UIColorPicker.init(); + InputSliderManager.init(); + ColorInfo.init(); + ColorPalette.init(); + ColorPickerSamples.init(); + CanvasSamples.init(); + Tool.init(); + }; + + return { + init : init + }; + +})(); + +</pre> +</div> + +<p>{{CSSRef}}</p> + +<p>Esta ferramenta facilita a criação, ajuste e experimentação com cores personalizadas para uso na web. Ela também facilita a conversão entre vários formatos de cores suportados por CSS, incluindo cores HEXA, RGB (vermelho, verde, azul) e HSL (tonalidade, saturação, luminosidade). Controle sobre o canal alfa também é suportado nos formatos RGB (rgba) e (hsla).</p> + +<p>Enquanto você ajusta os parâmetros que definem a cor, ela é apresentada nos 3 formatos padrão para CSS web. Além disso, com base na seleção de cor atual, é gerada uma paleta para HSL, HSV e também alfa. O selecionador de cor estilo "conta-gotas" pode alternar os estilos HSL e HSV. Você também pode testar as cores e ver como elas se sobrepõem umas sobre às outras. </p> + +<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p> + +<p>As cores geradas por você acima podem ser usadas em qualquer lugar em que a cor é usada em CSS e HTML, a menos que seja indicado de outra forma.</p> + +<h2 id="Veja_também">Veja também</h2> + +<p>Para mais aplicações de cores, veja:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Aplicando cores para elementos HTML com CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamentação de textos e estilo de fonte</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Estilização de bordas com CSS</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Mudando estilos de cores de fundo com CSS</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Cores e contrastes de cores</a></li> +</ul> diff --git a/files/pt-br/web/css/css_columns/index.html b/files/pt-br/web/css/css_columns/index.html new file mode 100644 index 0000000000..ea227ced5d --- /dev/null +++ b/files/pt-br/web/css/css_columns/index.html @@ -0,0 +1,114 @@ +--- +title: CSS Columns +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Columns +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Columns</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flow between columns and how gaps and rules are handled.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("break-after")}}</li> + <li>{{cssxref("break-before")}}</li> + <li>{{cssxref("break-inside")}}</li> + <li>{{cssxref("column-count")}}</li> + <li>{{cssxref("column-fill")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("column-rule")}}</li> + <li>{{cssxref("column-rule-color")}}</li> + <li>{{cssxref("column-rule-style")}}</li> + <li>{{cssxref("column-rule-width")}}</li> + <li>{{cssxref("column-span")}}</li> + <li>{{cssxref("column-width")}}</li> + <li>{{cssxref("columns")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Using CSS multi-column layouts</a></dt> + <dd>Step-by-step tutorial about how to build layouts using several columns.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Multicol')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} {{property_prefix('-webkit')}}</td> + <td>{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}</td> + <td>10</td> + <td>11.1<br> + 15{{property_prefix('-webkit')}}</td> + <td>3.0 (522){{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1{{property_prefix('-webkit')}}</td> + <td>{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}</td> + <td>10</td> + <td>11.5<br> + 32{{property_prefix('-webkit')}}</td> + <td>3.2{{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/css_display/index.html b/files/pt-br/web/css/css_display/index.html new file mode 100644 index 0000000000..426aece9cd --- /dev/null +++ b/files/pt-br/web/css/css_display/index.html @@ -0,0 +1,110 @@ +--- +title: CSS Display +slug: Web/CSS/CSS_Display +translation_of: Web/CSS/CSS_Display +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Display</strong> É um módulo de CSS que define como a árvore da caixa de formatação CSS é gerada a partir da árvore de elementos do documento e define as propriedades que a controlam.</p> + +<h2 id="Referência">Referência</h2> + +<h3 id="CSS_Propriedades">CSS Propriedades</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("display")}}</li> +</ul> +</div> + +<h3 id="CSS_tipos_de_dados">CSS tipos de dados</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("<display-outside>")}}</li> + <li>{{CSSxRef("<display-inside>")}}</li> + <li>{{CSSxRef("<display-listitem>")}}</li> + <li>{{CSSxRef("<display-box>")}}</li> + <li>{{CSSxRef("<display-internal>")}}</li> + <li>{{CSSxRef("<display-legacy>")}}</li> +</ul> +</div> + +<h2 id="Guias">Guias</h2> + +<h3 id="CSS_Fluxo_Layout_(display_block_display_inline)">CSS Fluxo Layout (<code style="white-space: nowrap;">display: block</code>, <code style="white-space: nowrap;">display: inline</code>)</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Layout de bloco e embutido no fluxo normal</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Layout de fluxo e Overflow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Layout de fluxo e modos de gravação</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Contextos de formatação explicados</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">No fluxo e fora do fluxo</a></li> +</ul> + +<h3 id="display_flex"><code style="white-space: nowrap;">display: flex</code></h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceitos básicos de flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinhando itens em um container Flex</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Relações de controle de itens flexíveis ao longo do eixo principal</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Combinações Flexbox entre navegadores</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Dominando o agrupamento de itens flexíveis</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Pedido de itens flexíveis</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relação do flexbox com outros métodos de layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilidade com versões anteriores do Flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Casos de uso típicos do Flexbox</a></li> +</ul> + +<h3 id="display_grid"><code style="white-space: nowrap;">display: grid</code></h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceitos básicos de layout de grade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relação com outros métodos de layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamento baseado em linha</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de modelo de grade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout usando linhas de grade nomeadas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamento automático no layout da grade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alinhamento de caixa no layout da grade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grades, valores lógicos e modos de escrita</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Layout e acessibilidade da grade CSS</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Layout de grade CSS e aprimoramento progressivo</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizando layouts comuns usando grades</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Display", "#the-display-properties", "display")}}</td> + <td>{{Spec2("CSS3 Display")}}</td> + <td>Adicionado <code style="white-space: nowrap;">run-in</code>, <code>flow</code>, <code style="white-space: nowrap;">flow-root</code>, <code>contents</code> e valores de várias palavras-chave.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "visuren.html#display-prop", "display")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Adicionados os valores do modelo de tabela e <code style="white-space: nowrap;">inline-block</code>.</td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#display", "display")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Definição inicial. Valores básicos: <code>none</code>, <code>block</code>, <code>inline</code> e <code style="white-space: nowrap;">list-item</code>.</td> + </tr> + </tbody> +</table> + +<p>Além do nível de especificação de exibição CSS 3, outras especificações definem o comportamento de vários valores da exibição.</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("css.properties.display", 10)}}</p> diff --git a/files/pt-br/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/pt-br/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..971912174f --- /dev/null +++ b/files/pt-br/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,209 @@ +--- +title: Aligning Items in a Flex Container +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +<p>{{CSSRef}}</p> + +<p class="summary">Uma das razões pela qual flexbox rapidamente despertou interesse dos desenvolvedores web é que ela trouxe capacidade de alinhamento apropriada para web pela primeira vez. Tem capacidade de alinhamento vertical apropriada, e assim finalmente podemos de modo fácil centralizar uma caixa. Neste guia, veremos detalhadamente como as propriedades de alinhamento e justificação funcionam no Flexbox.</p> + +<p>Para centralizar nossa caixa nós usamos a propriedade <code>align-items</code> para alinhar nosso item no eixo transversal, que neste caso é o eixo do bloco indo verticalmente. Nós usamos <code>justify-content</code> para alinhar o item no eixo principal, que neste caso é o eixo indo horizontalmente.</p> + +<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> + +<p>Você pode dar uma olhada no código deste exemplo abaixo. Altere o tamanho do container ou elemento aninhado e o elemento aninhado sempre permanece centralizado.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> + +<h2 id="Propriedades_que_controlam_o_alinhamento">Propriedades que controlam o alinhamento</h2> + +<p>As propriedades que nós veremos neste guia são as seguintes.</p> + +<ul> + <li>{{cssxref("justify-content")}} — controla o alinhamento de todos os itens no eixo principal.</li> + <li>{{cssxref("align-items")}} — controla o alinhamento de todos os itens no eixo transversal.</li> + <li>{{cssxref("align-self")}} — controla o alinhamento individual de um item no eixo transversal.</li> + <li>{{cssxref("align-content")}} — descrito na especificação como “packing flex lines”; controla o espaço entre as linhas no eixo transversal.</li> +</ul> + +<p>Nós também descobriremos como margens automáticas podem ser utilizadas para o alinhamento no flexbox.</p> + +<div class="note"> +<p><strong>Note</strong>: The alignment properties in Flexbox have been placed into their own specification — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.</p> +</div> + +<h2 id="The_Cross_Axis">The Cross Axis</h2> + +<p>As propriedades <code>align-items</code> e <code>align-self</code> controlam o alinhamento dos nossos itens no eixo transversal, em colunas se <code>flex-direction</code> é <code>row</code> e entre linhas se <code>flex-direction</code> é <code>column</code>.</p> + +<p>Nós estamos usando o alinhamento transversal na maioria dos exemplos. Se adicionarmos <code>display: flex</code> para um contêiner, todos os itens filhos se tornam itens flexíveis organizados em uma linha. Todos irão se esticar para serem tão altos quanto o item mais alto, pois este item define a altura dos itens no eixo transversal. Se o seu contêiner possui uma altura definida, então os itens se estenderão para esta altura, independemente da quantidade de conteúdo que está dentro deste item.</p> + +<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> + +<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> + +<p>A razão pela qual os itens passam a ter a mesma altura é que o valor inicial do <code>align-items</code>, a propriedade que controla o alinhamento do eixo transversal, está definida como <code>stretch</code>.</p> + +<p>Nós podemos usar outros valores para controlar como os itens se alinham:</p> + +<ul> + <li><code>align-items: flex-start</code></li> + <li><code>align-items: flex-end</code></li> + <li><code>align-items: center</code></li> + <li><code>align-items: stretch</code></li> + <li><code>align-items: baseline</code></li> +</ul> + +<p>No exemplo abaixo, o valor do <code>align-items</code> está definido como <code>stretch</code>. Tente outros valores e veja como todos os itens se alinham no contêiner.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p> + +<h3 id="Alinhando_um_item_com_align-self">Alinhando um item com <code>align-self</code></h3> + +<p>A propriedade <code>align-items</code> adiciona a propriedade <code>align-self</code> em todos os itens flex como um grupo. Ou seja, você pode explicitamente declarar a propriedade <code>align-self</code> para impactar um único item. A propriedade <code>align-self</code> aceita todos os mesmo valores que <code>align-items</code> mais o valor <code>auto</code>, que irá resetar o valor que está configurado no container flex.</p> + +<p>Neste próximo exemplo, o container flex possui <code>align-items: flex-start</code>, que implica em todos os itens estarem alinhados ao início do eixo transversal. Foquei no primeiro item usando o seletor <code>first-child</code> e configurei este item para <code>align-self: stretch</code>; outro item foi selecionado usando a classe <code>selected</code> e <code>align-self: center</code>. Você pode mudar o valor do <code>align-items</code> ou mudar o valor do <code>align-self</code> para focar em itens individuais para ver como funciona.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}</p> + +<h3 id="Changing_the_main_axis">Changing the main axis</h3> + +<p>So far we have looked at the behaviour when our <code>flex-direction</code> is <code>row</code>, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> + +<p>If we change our <code>flex-direction</code> to column, <code>align-items</code> and <code>align-self</code> will align the items to the left and right.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> + +<p>You can try this out in the example below, which has a flex container with <code>flex-direction: column</code> yet otherwise is exactly the same as the previous example.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p> + +<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property">Aligning content on the cross axis — the align-content property</h2> + +<p>So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the <code>align-content</code> property to control the distribution of space between the rows. In the specification this is described as <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">packing flex lines</a>.</p> + +<p>For <code>align-content</code> to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.</p> + +<p>The <code>align-content</code> property takes the following values:</p> + +<ul> + <li><code>align-content: flex-start</code></li> + <li><code>align-content: flex-end</code></li> + <li><code>align-content: center</code></li> + <li><code>align-content: space-between</code></li> + <li><code>align-content: space-around</code></li> + <li><code>align-content: stretch</code></li> + <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of <code>align-content</code> is <code>space-between</code>, which means that the available space is shared out <em>between</em> the flex lines, which are placed flush with the start and end of the container on the cross axis.</p> + +<p>Try out the other values to see how the <code>align-content</code> property works.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p> + +<p>Once again we can switch our <code>flex-direction</code> to <code>column</code> in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p> + +<div class="note"> +<p><strong>Note</strong>: the value <code>space-evenly</code> is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.</p> +</div> + +<p>See the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentation for <code>justify-content</code> on MDN</a> for more details on all of these values and browser support.</p> + +<h2 id="Aligning_content_on_the_main_axis">Aligning content on the main axis</h2> + +<p>Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — <code>justify-content</code>. This is because we are only dealing with items as a group on the main axis. With <code>justify-content</code> we control what happens with available space, should there be more space than is needed to display the items.</p> + +<p>In our initial example with <code>display: flex</code> on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of <code>justify-content</code> being <code>flex-start</code>. Any available space is placed at the end of the items.</p> + +<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>The <code>justify-content</code> property accepts the same values as <code>align-content</code>.</p> + +<ul> + <li><code>justify-content: flex-start</code></li> + <li><code>justify-content: flex-end</code></li> + <li><code>justify-content: center</code></li> + <li><code>justify-content: space-between</code></li> + <li><code>justify-content: space-around</code></li> + <li><code>justify-content: stretch</code></li> + <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>In the example below, the value of <code>justify-content</code> is <code>space-between</code>. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p> + +<p>If the main axis is in the block direction because <code>flex-direction</code> is set to <code>column</code>, then <code>justify-content</code> will distribute space between items in that dimension as long as there is space in the flex container to distribute.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p> + +<h3 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h3> + +<p>Remember that with all of these alignment methods, the values of <code>flex-start</code> and <code>flex-end</code> are writing mode-aware. If the value of <code>justify-content</code> is <code>start</code> and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.</p> + +<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.</p> + +<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>The live example below has the <code>direction</code> property set to <code>rtl</code> to force a right-to-left flow for our items. You can remove this, or change the values of <code>justify-content</code> to see how flexbox behaves when the start of the inline direction is on the right.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p> + +<h2 id="Alignment_and_flex-direction">Alignment and flex-direction</h2> + +<p>The start line will also change if you change the <code>flex-direction</code> property — for example using <code>row-reverse</code> instead of <code>row</code>.</p> + +<p>In this next example I have items laid out with <code>flex-direction: row-reverse</code> and <code>justify-content: flex-end</code>. In a left to right language the items all line up on the left. Try changing <code>flex-direction: row-reverse</code> to <code>flex-direction: row</code>. You will see that the items now move to the right hand side.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p> + +<p>While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. <code>flex-start</code> will be where the start of a sentence of text would begin.</p> + +<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>You can switch them to display in the block direction for the language of your document by selecting <code>flex-direction: column</code>. Then <code>flex-start</code> will then be where the top of your first paragraph of text would start.</p> + +<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. <code>flex-start</code> will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.</p> + +<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<h2 id="Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</h2> + +<p>We don’t have a <code>justify-items</code> or <code>justify-self</code> property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.</p> + +<p>A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a <code>justify-self</code> property, however consider the image below. I have three items on one side and two on the other. If I were able to use <code>justify-self</code> on item <em>d</em>, it would also change the alignment of item <em>e</em> that follows, which may or may not be my intention.</p> + +<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> + +<p>Instead we can target item 4 and separate it from the first three items by giving it a <code>margin-left</code> value of <code>auto</code>. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.</p> + +<p>In this live example, I have flex items arranged simply into a row with the basic flex values, and the class <code>push</code> has <code>margin-left: auto</code>. You can try removing this, or adding the class to another item to see how it works.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p> + +<h2 id="Future_alignment_features_for_Flexbox">Future alignment features for Flexbox</h2> + +<p>At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the <code>space-evenly</code> value for <code>align-content</code> and <code>justify-content</code> properties.</p> + +<p>The Box Alignment module also includes other methods of creating space between items, such as the <code>column-gap</code> and <code>row-gap</code> feature as seen in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. The inclusion of these properties in Box Alignment means that in future we should be able to use <code>column-gap</code> and <code>row-gap</code> in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.</p> + +<p>My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, and I have also compared how alignment works in these specifications in my <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box Alignment in Grid Layout</a></li> +</ul> diff --git a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html new file mode 100644 index 0000000000..05318caa79 --- /dev/null +++ b/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html @@ -0,0 +1,239 @@ +--- +title: Conceitos básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox +tags: + - CSS + - Flex + - Tutorial + - conceitos + - conteiner + - eixos + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary">O <em>Flexible Box Module</em>, geralmente chamado de <em>flexbox</em>, foi projetado tanto como um modelo de <em>layout</em> unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do <em>flexbox</em>, as quais exploraremos com mais detalhes no restante deste guia.</p> + +<p>Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com <em>o layout </em>em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de <a href="/pt-PT/docs/Web/CSS/layout_de_grelha_css">CSS - Layout de Grade</a>, que permite o controle simultâneo das colunas e linhas.</p> + +<h2 id="Os_eixos_do_flexbox">Os eixos do <em>flexbox</em></h2> + +<p>Ao se utilizar o <em>flexbox</em>, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade <code><a href="https://developer.mozilla.org/pt-PT/docs/Web/CSS/flex-direction" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!">flex-direction</a></code> e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.</p> + +<h3 id="Eixo_principal">Eixo principal</h3> + +<p>Conforme descrito acima, a propriedade <code>flex-direction</code> define a direção do eixo principal e pode tem quatro valores possíveis:</p> + +<ul> + <li><code>row</code></li> + <li><code>row-reverse</code></li> + <li><code>column</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p>Se o valor escolhido for <code>row</code> (linha) ou <code>row-reverse</code> (linha reversa), seu eixo principal se moverá ao longo da linha — na <strong>direção inline</strong>.</p> + +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p>Se o valor escolhido for <code>column</code> (coluna) ou <code>column-reverse</code> (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na <strong>direção block</strong>.</p> + +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + +<h3 id="Eixo_transversal">Eixo transversal</h3> + +<p>O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade <code>flex-direction</code> estiver definida nas linhas, como <code>row</code> ou <code>row-reverse</code>, o eixo transversal estará na direção das colunas, como <code>column</code> ou <code>column-reverse</code>.</p> + +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + +<p>Se o eixo principal for definido nas colunas, como <code>column</code> ou <code>column-reverse</code>, então o eixo transversal estará na direção das linhas, como <code>row</code> ou <code>row-reverse</code>.</p> + +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + +<p>Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o <em>flexbox</em> possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.</p> + +<h2 id="Linhas_de_Início_e_Fim">Linhas de Início e Fim</h2> + +<p>Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.</p> + +<p>Essa discussão sobre a relação entre o <em>flexbox</em> e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos <em>flex</em> fluem.</p> + +<p>Se o valor da propriedade <code>flex-direction</code> for <code>row (linha)</code>, considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.</p> + +<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.</p> + +<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.</p> + +<p>Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.</p> + +<h2 id="Contêiner_Flex">Contêiner <em>Flex</em></h2> + +<p>A área de um documento que faz uso do <em>flexbox</em> é chamada de <strong>contêiner <em>flex</em></strong>. Para criar essa estrutura, define-se o valor da propriedade {{cssxref("display")}} do elemento representado pelo contêiner como <code>flex</code> ou <code>inline-flex</code>. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo <em>flex</em>. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:</p> + +<ul> + <li>Exibição em linha (o padrão do <code>flex-direction</code> é <code>row</code>).</li> + <li>Alinhamento na borda inicial do eixo principal.</li> + <li>Não há expansão no eixo principal, mas pode haver contração.</li> + <li>Haverá expansão vertical para preencher a altura do eixo transversal.</li> + <li>A propriedade {{cssxref("flex-basis")}} estará definida como <code>auto</code>.</li> + <li>A propriedade {{cssxref("flex-wrap")}} estará definida como <code>nowrap</code>.</li> +</ul> + +<p>O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.</p> + +<p>É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p> + +<h3 id="Propriedade_flex-direction">Propriedade <em><code>flex-direction</code></em></h3> + +<p>A propriedade {{cssxref("flex-direction")}} permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade <code>flex-direction </code>como<code> row-reverse</code> (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.<br> + <br> + Se mudarmos a <code>flex-direction</code> para a <code>column</code> (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para <code>column-reverse</code> (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.<br> + <br> + No exemplo prático abaixo tem-se a propriedade <code>flex-direction</code> definida como <code>row-reverse</code>. Experimente os outros valores - <code>row</code>, <code>column</code> e <code>column-reverse</code> - para ver o que acontece com o conteúdo.<br> + <br> + {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> + +<h2 id="Quebra_de_linha_com_flex-wrap">Quebra de linha com <em>"<strong>flex-wrap</strong>"</em></h2> + +<p>Embora o <em>flexbox</em> seja um modelo unidimensional, é possível fazer com que elementos <em>flex</em> sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner <em>flex</em>. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade {{cssxref("flex-wrap")}} com o valor <code>wrap</code>. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.</p> + +<p>O exemplo prático abaixo contém elementos <em>flex</em> aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade <code>flex-wrap</code> está definida como <code>wrap</code>, os itens serão reorganizados em mais de uma linha. Trocando-se para <code>nowrap</code>, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do <code>nowrap</code> causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> + +<p>Saiba mais sobre o empacotamento de itens flexíveis no guia <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Masterização de Empacotamento de Itens Flexíveis</a> (em Inglês).</p> + +<h2 id="Propriedade_abreviada_flex-flow">Propriedade abreviada <em>flex-flow</em></h2> + +<p>Pode-se combinar as propriedades <code>flex-direction</code> e <code>flex-wrap</code> de forma abreviada através da propriedade {{cssxref("flex-flow")}}. O primeiro valor especificado é o <code>flex-direction</code> e o segundo valor é o <code>flex-wrap</code>.</p> + +<p>No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> ou <code>column-reverse</code>, e também altere o segundo para <code>wrap</code> e <code>nowrap</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> + +<h2 id="Expansão_encolhimento_e_tamanho_dos_elementos_flex">Expansão, encolhimento e tamanho dos elementos <em>flex</em></h2> + +<p>Para ter mais controle sobre os elementos <em>flex</em> é possível alterá-los diretamente utilizando as três propriedades abaixo:</p> + +<ul> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<p>Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Taxas de Controle de Elementos Flex ao Longo do Eixo Principal</a> (em inglês).</p> + +<p>Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de <strong>espaço disponível</strong>. Quando se modifica o valor das propriedades acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.</p> + +<p>Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o <em>flexbox </em>posicionará esse espaço após o último item.</p> + +<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.</p> + +<h3 id="Propriedade_flex-basis">Propriedade <em><code>flex-basis</code></em></h3> + +<p>A propriedade <code>flex-basis </code>define o tamanho inicial dos elementos, em unidades de <em>pixel</em>, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é <code>auto </code>— neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade <code>flex-basis</code>.</p> + +<p>Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se <code>display: flex</code> no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.</p> + +<h3 id="Propriedade_flex-grow">Propriedade <em><code>flex-grow</code></em></h3> + +<p>Com a propriedade <code>flex-grow</code> definida como um inteiro positivo, os elementos <em>flex</em> podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no <code>flex-basis</code>. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.</p> + +<p>Atribuir o valor 1 à propriedade <code>flex-grow</code> fará com que o espaço disponível no contêiner <em>flex</em> seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.</p> + +<p>Como visto no parágrafo anterior, a propriedade <code>flex-grow</code> pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).</p> + +<h3 id="Propriedade_flex-shrink">Propriedade <code>flex-shrink</code></h3> + +<p>Enquanto a propriedade <code>flex-grow </code>permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade <code>flex-shrink</code> faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade <code>flex-shrink </code>seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade <code>flex-basis</code>. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade <code>flex-shrink</code> receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.</p> + +<p>O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.</p> + +<div class="note"> +<p>Note que os valores para as propriedades<code> flex-grow</code> e <code>flex-shrink</code> são proporcionais. Particularmente, se tivermos todos os nossos elementos definidos como flex: <code>1 1 200px</code> e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: <code>2 1 200px</code>. Entretanto, podemos escrever flex: <code>10 1 200px</code> e flex: <code>20 1 200px</code> se quisermos.</p> +</div> + +<h3 id="Abreviatura_para_os_valores_das_propriedades_flex">Abreviatura para os valores das propriedades flex</h3> + +<p>As propriedades <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação {{cssxref("flex")}}. A abreviatura <code>flex</code> permite definir os três valores na seguinte ordem:<code> flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p> + +<p>O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação <code>flex</code>; lembre-se que o primeiro campo corresponde à propriedade <code>flex-grow</code>, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade <code>flex-shrink</code> e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade <code>flex-basis</code>, que define o valor base, em unidades de <em>pixel</em>, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p> + +<p>Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:</p> + +<ul> + <li><code>flex: initial</code></li> + <li><code>flex: auto</code></li> + <li><code>flex: none</code></li> + <li><code>flex: <positive-number></code></li> +</ul> + +<p>Definir <code>flex: initial</code> reseta os elementos para valores-padrão do Flexbox, sendo equivale a <code>flex: 0 1 auto</code>. Neste ultimo caso, o valor da propriedade <code>flex-grow</code> é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade <code>flex-basis</code>. o valor da propriedade <code>flex-shrink</code> é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade <code>flex-basis</code> é <code>auto</code> e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.</p> + +<p>Definir <code>flex: auto</code> é equivalente a <code>flex: 1 1 auto</code>. Essa configuração é semelhante a <code>flex:initial</code>, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.</p> + +<p>Definir <code>flex: none</code> irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever <code>flex: 0 0 auto</code>. O elementos não poderão crescer ou diminuir, mas serão criados usando o <em>flexbox</em> com a propriedade <code>flex-basis</code> com o valor <code>auto</code>.</p> + +<p>Outra abreviação normalmente vista em tutoriais é <code>flex: 1</code> ou <code>flex: 2</code> e assim por diante, o que equipara-se a <code>flex: 1 1 0</code>. Os elementos podem crescer ou diminuir a partir da propriedade <code>flex-basis</code> com valor nulo.</p> + +<p>Teste essas formas abreviadas no exemplo prático abaixo:</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p> + +<h2 id="Alinhamento_justificação_e_distribuição_de_espaço_livre_entre_os_elementos">Alinhamento, justificação e distribuição de espaço livre entre os elementos</h2> + +<p>Um atributo chave do <em>flexbox</em> é a capacidade de alinhar e justificar os elementos <em>flex</em> nos eixos principal e transversal e distribuir o espaço entre eles.</p> + +<h3 id="Propriedade_align-items">Propriedade <code>align-items</code></h3> + +<p>A propriedade {{cssxref("align-items")}} irá alinhar os elementos no eixo transversal.</p> + +<p>O valor inicial desta propriedade é <code>stretch</code> e é por essa razão que, por padrão, os elementos <em>flex</em> se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.</p> + +<p>Pode-se definir a propriedade <code>align-items</code> como <code>flex-start</code>, de modo que os elementos fiquem alinhados com topo do contêiner, <code>flex-end</code> para alinhá-los a partir da base ou <code>center</code>, para que o alinhamento seja centralizado.</p> + +<p>Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade <strong>align-items</strong>:</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> + +<h3 id="Propriedade_justify-content">Propriedade <code>justify-content</code></h3> + +<p>A propriedade {{cssxref("justify-content")}} é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (<code>row </code>ou <code>column</code>) é definida a partir da propriedade <code>flex-direction</code>. O valor inicial é <code>flex-start</code>, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como <code>flex-end</code>, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou <code>center</code>, para alinhá-los ao centro.</p> + +<p>O valor <code>space-between</code> pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor <code>space-around</code>.</p> + +<p>Tente os seguintes valores da propriedada <code>justify-content</code> no exemplo prático abaixo:</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> + +<p>No artigo <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinhando Elementos em um Contêiner Flex</a> (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.</p> + +<h2 id="Próximos_passos">Próximos passos</h2> + +<p>Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">como essa especificação se relaciona com outras partes do CSS</a> (em inglês). </p> diff --git a/files/pt-br/web/css/css_flexible_box_layout/index.html b/files/pt-br/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..7bf920f341 --- /dev/null +++ b/files/pt-br/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,111 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Flexible</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h2 id="Guia">Guia</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Usando CSS flexBox</a></dt> + <dd>tutorial passo-à-passo de como construir layouts com o FlexBox</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Usando flexBox na organização de aplicações web</a></dt> + <dd>Tutorial ensinando como usar o flexBox no contexto de aplicações web</dd> +</dl> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_Do_Browser">Compatibilidade Do Browser</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<br> + 11.0</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/pt-br/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/pt-br/web/css/css_flexible_box_layout/ordering_flex_items/index.html new file mode 100644 index 0000000000..953f5598d6 --- /dev/null +++ b/files/pt-br/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -0,0 +1,131 @@ +--- +title: Ordering Flex Items +slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +<p>{{CSSRef}}</p> + +<p>Os novos métodos de layout, como Flexbox e Grid, trazem a possibilidade de controlar a ordem do conteúdo. Neste artigo, veremos como você pode alterar a ordem visual do seu conteúdo ao usar o Flexbox. Também consideraremos as implicações de reordenar itens do ponto de vista da acessibilidade..</p> + +<h2 id="Reverse_the_display_of_the_items">Reverse the display of the items</h2> + +<p>the {{cssxref("flex-direction")}} property can take one of four values:</p> + +<ul> + <li><code>row</code></li> + <li><code>column</code></li> + <li><code>row-reverse</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p>The first two values keep the items in the same order that they appear in the document source order and display them sequentially from the start line.</p> + +<p><img alt="The items are displayed in a row starting on the left." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p><img alt="The items are displayed as a column starting from the top " src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>The second two values reverse the items by switching the start and end lines.</p> + +<p><img alt="The items are displayed in reverse order starting on the right-hand line." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="The items are displayed in a column in reverse order starting at the bottom line." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>Remember that the start line relates to writing modes. The row-related examples above demonstrate how <code>row</code> and <code>row-reverse</code> work in a left-to-right language such as English. If you are working in a right-to-left language like Arabic then <code>row</code> would start on the right, <code>row-reverse</code> on the left.</p> + +<p><img alt="Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p> + +<p>This can seem like a neat way to display things in reverse order however you should be mindful that the items are only <em>visually</em> displayed in reverse order. The specification says the following on this matter:</p> + +<blockquote> +<p>“Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a></p> +</blockquote> + +<p>If your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order.</p> + +<p>If you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source. The specification continues with a warning not to use reordering to fix issues in your source:</p> + +<blockquote> +<p>“Authors <em>must not</em> use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.”</p> +</blockquote> + +<div class="note"> +<p><strong>Note</strong>: For some years Firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers. This has now been fixed. You should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so.</p> +</div> + +<p>In the live example below I have added a focus style in order that as you tab from link to link you can see which is highlighted. If you change the order using <code>flex-direction</code> you can see how the tab order continues to follow the order that the items are listed in the source.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p> + +<p>In the same way that changing the value of <code>flex-direction</code> does not change the order in which items are navigated to, changing this value does not change paint order. It is a visual reversal of the items only.</p> + +<h2 id="The_order_property">The <code>order</code> property</h2> + +<p>In addition to reversing the order in which flex items are visually displayed, you can target individual items and change where they appear in the visual order with the {{cssxref("order")}} property.</p> + +<p>The <code>order</code> property is designed to lay the items out in <em>ordinal groups</em>. What this means is that items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.</p> + +<p>As an example, I have 5 flex items, and assign <code>order</code> values as follows:</p> + +<ul> + <li>Source item 1: <code>order: 2</code></li> + <li>Source item 2: <code>order: 3</code></li> + <li>Source item 3: <code>order: 1</code></li> + <li>Source item 4: <code>order: 3</code></li> + <li>Source item 5: <code>order: 1</code></li> +</ul> + +<p>These items would be displayed on the page in the following order:</p> + +<ul> + <li>Source item 3: <code>order: 1</code></li> + <li>Source item 5: <code>order: 1</code></li> + <li>Source item 1: <code>order: 2</code></li> + <li>Source item 2: <code>order: 3</code></li> + <li>Source item 4: <code>order: 3</code></li> +</ul> + +<p><img alt="Items have a number showing their source order which has been rearranged." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p> + +<p>You can play around with the values in this live example below and see how that changes the order. Also, try changing <code>flex-direction</code> to <code>row-reverse</code> and see what happens — the start line is switched so the ordering begins from the opposite side.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p> + +<p>Flex items have a default <code>order</code> value of <code>0</code>, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit <code>order</code> value.</p> + +<p>You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of <code>-1</code>. As this is lower than 0 the item will always be displayed first.</p> + +<p>In the live code example below I have items laid out using Flexbox. By changing which item has the class <code>active</code> assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p> + +<p>The items are displayed in what is described in the specification as <em>order-modified document order</em>. The value of the order property is taken into account before the items are displayed.</p> + +<p>Order also changes the paint order of the items; items with a lower value for <code>order</code> will be painted first and those with a higher value for <code>order</code> painted afterwards.</p> + +<h2 id="The_order_property_and_accessibility">The order property and accessibility</h2> + +<p>Use of the <code>order</code> property has exactly the same implications for accessibility as changing the direction with <code>flex-direction</code>. Using <code>order</code> changes the order in which items are painted, and the order in which they appear visually. It does not change the sequential navigation order of the items. Therefore if a user is tabbing between the items, they could find themselves jumping around your layout in a very confusing way.</p> + +<p>By tabbing around any of the live examples on this page, you can see how order is potentially creating a strange experience for anyone not using a pointing device of some kind. To read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources.</p> + +<ul> + <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li> + <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">HTML Source Order vs CSS Display Order</a></li> + <li><a href="https://alastairc.uk/2017/06/the-responsive-order-conflict/">The Responsive Order Conflict for Keyboard Focus</a></li> +</ul> + +<h2 id="Use_cases_for_order">Use cases for order</h2> + +<p>There are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. Used carefully the <code>order</code> property can allow for some useful common patterns to be easily implemented.</p> + +<p>You might have a design, perhaps a card that will display a news item. The heading of the news item is the key thing to highlight and would be the element that a user might jump to if they were tabbing between headings to find content they wanted to read. The card also has a date; the finished design we want to create is something like this.</p> + +<p><img alt="A design component with a date, then heading and then content." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p> + +<p>Visually the date appears above the heading, in the source. However, if the card was read out by a screen reader I would prefer that the title was announced first and then the publication date. We can make this so using the <code>order</code> property.</p> + +<p>The card is going to be our flex container, with <code>flex-direction</code> set to column. I then give the date an <code>order</code> of <code>-1</code>. This pulls it up above the heading.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p> + +<p>These small tweaks are the sort of cases where the <code>order</code> property makes sense. Keep the logical order as the reading and tab order of the document, and maintain that in the most accessible and structured fashion. Then use <code>order</code> for purely visual design tweaks. When doing so take care that you are not reordering items that could be accessed by the keyboard as a user is tabbing around. Especially when using newer layout methods you should ensure that your browser testing includes testing the site using keyboard only, rather than a mouse or touchscreen. You will quickly see if your development choices make getting around the content difficult.</p> diff --git a/files/pt-br/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..ec50aab3fe --- /dev/null +++ b/files/pt-br/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,135 @@ +--- +title: Casos típicos de uso do Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +<p>{{CSSRef}}</p> + +<p class="summary">In this guide we will take a look at some of the common use cases for flexbox — those places where it makes more sense than another layout method.</p> + +<h2 id="Por_que_escolher_flexbox">Por que escolher flexbox?</h2> + +<p>In a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another. As you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items. These are the uses that flexbox was designed for. You can read more about the difference between flexbox and CSS Grid Layout in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of Flexbox to other layout methods</a>, where we discuss how flexbox fits into the overall picture of CSS Layout.</p> + +<p>In reality we also often use Flexbox for jobs that might be better done by Grid Layout, as a fallback for Grid, and also in order to get alignment capabilities. This is something that may well change once Box Alignment is implemented in Block Layout. In this guide I look at some of the typical things you might use flexbox for today.</p> + +<h2 id="Navegação">Navegação</h2> + +<p>A common pattern for navigation is to have a list of items displayed as a horizontal bar. This pattern, as basic as it seems, was difficult to achieve before flexbox. It forms the most simple of flexbox examples, and could be considered the ideal flexbox use case.</p> + +<p>When we have a set of items that we want to display horizontally, we may well end up with additional space. We need to decide what to do with that space, and have a couple of options. We either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space.</p> + +<h3 id="Space_distributed_outside_the_items">Space distributed outside the items</h3> + +<p>To distribute the space between or around the items we use the alignment properties in flexbox, and the {{cssxref("justify-content")}} property. You can read more about this property in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a flex container</a>, which deals with aligning items on the main axis.</p> + +<p>In the below live example we display the items at their natural size and by using <code>justify-content: space-between</code> make equal amounts of space between the items. You can change how the space is distributed using the <code>space-around</code> value, or where supported, <code>space-evenly</code>. You could also use <code>flex-start</code> to place the space at the end of the items, <code>flex-end</code> to place it before them, or <code>center</code> to centre the navigation items.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p> + +<h3 id="Space_distributed_within_the_items">Space distributed within the items</h3> + +<p>A different pattern for navigation would be to distribute the available space within the items themselves, rather than create space between them. In this case we would use the {{cssxref("flex")}} properties to allow items to grow and shrink in proportion to one another as described in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling ratios of flex items along the main axis</a>.</p> + +<p>If I wanted all of my navigation items to have equal width, then I might use <code>flex: auto</code>, which is the shorthand for <code>flex: 1 1 auto</code> — all items grow and shrink from a flex-basis of auto. This would mean that the longer item would have more space.</p> + +<p>In the live example below try changing <code>flex: auto</code> to <code>flex: 1</code>. This is the shorthand for <code>flex: 1 1 0</code> and causes all of the items become the same width, as they are working from a flex-basis of 0 allowing all of the space to be distributed evenly.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p> + +<h2 id="Split_navigation">Split navigation</h2> + +<p>Another way to align items on the main axis is to use auto margins. This enables the design pattern of a navigation bar where one group of items are aligned left and another group aligned right.</p> + +<p>Here we are using the auto margins technique described in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</a>. The items are aligned on the main axis with <code>flex-start</code> as this is the initial behaviour of flexbox, and we are aligning the item on the right by giving it a left margin of auto. You can move the class from one item to another to change where the split happens.</p> + +<p>Also in this example we are using margins on the flex items to create a gap between items, and a negative margin on the container in order that the items still remain flush with the right and left edges. Until the <code>gap</code> properties from the Box Alignment specification are implemented in flexbox, we have to use margins in this way if we want to create a gutter between items.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p> + +<h2 id="Center_item">Center item</h2> + +<p>Before flexbox, developers would joke that the hardest problem in web design was vertical centering. This has now been made straightforward using the alignment properties in flexbox, as the following live example shows.</p> + +<p>You can play with the alignment, aligning the item to the start with <code>flex-start</code> or end with <code>flex-end</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p> + +<p>In the future we may not need to make a container a flex container just to centre a single item, as the Box Alignment properties will ultimately be implemented in Block layout. For now however, if you need to properly centre one thing inside another, flexbox is the way to do it. As in the above example, make a container into a flex container, and then use either <code>align-items</code> on the parent element or target the flex item itself with <code>align-self</code>.</p> + +<h2 id="Card_layout_pushing_footer_down">Card layout pushing footer down</h2> + +<p>Whether you use flexbox or CSS Grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid component. This means that if you have variable amounts of content, the card will stretch to the height of the grid area or flex container. Any content inside uses regular block layout, meaning that on a card with less content the footer will rise up to the bottom of the content rather than stick to the bottom of the card.</p> + +<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> + +<p>Flexbox can solve this. We make the card a flex container, with {{cssxref("flex-direction")}}<code>: column</code>. We then set the content area to <code>flex: 1</code>, which is the shorthand for <code>flex: 1 1 0</code> — the item can grow and shrink from a flex basis of <code>0</code>. As this is the only item that can grow, it takes up all available space in the flex container and pushes the footer to the bottom. If you remove the <code>flex</code> property from the live example you will see how the footer then moves up to sit directly under the content.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p> + +<h2 id="Media_objects">Media objects</h2> + +<p>The media object is a common pattern in web design — this pattern has an image or other element to one side and text to the right. Ideally a media object should be able to be flipped — moving the image from left to right.</p> + +<p>We see this pattern everywhere, used for comments, and anywhere we need to display images and descriptions. With flexbox we can allow the part of the media object containing the image to take its sizing information from the image, and then the body of the media object flexes to take up the remaining space.</p> + +<p>In the live example below you can see our media object. I have used the alignment properties to align the items on the cross axis to <code>flex-start</code>, and then set the <code>.content</code> flex item to <code>flex: 1</code>. As with our column layout card pattern above, using <code>flex: 1</code> means this part of the card can grow.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p> + +<p>Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.</p> + +<p>To prevent the image growing too large, add a {{cssxref("max-width")}} to the image. As that side of the media object is using the initial values of flexbox it can shrink but not grow, and uses a <code>flex-basis</code> of auto. Any {{cssxref("width")}} or max-width applied to the image will become the <code>flex-basis</code>.</p> + +<pre class="brush: css notranslate">.image img { + max-width: 100px; +} +</pre> + +<p>You could also allow both sides to grow and shrink in proportion. If you set both sides to <code>flex: 1</code>, they will grow and shrink from a {{cssxref("flex-basis")}} of 0, so you will end up with two equal-sized columns. You could either take the content as a guide and set both to <code>flex: auto</code>, in which case they would grow and shrink from the size of the content or any size applied directly to the flex items such as a width on the image.</p> + +<pre class="brush: css notranslate">.media .content { + flex: 1; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<p>You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to <code>flex: 1</code> and the content side to <code>flex: 3</code>. This will mean they use a <code>flex-basis</code> of <code>0</code> but distribute that space at different rates according to the <code>flex-grow</code> factor you have assigned. The flex properties we use to do this are described in detail in the guide <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling ratios of flex items along the main axis</a>.</p> + +<pre class="brush: css notranslate">.media .content { + flex: 3; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<h3 id="Flipping_the_media_object">Flipping the media object</h3> + +<p>To switch the display of the media object so that the image is on the right and the content is on the left we can use the <code>flex-direction</code> property set to <code>row-reverse</code>. The media object now displays the other way around. I have achieved this in the live example by adding a class of <code>flipped</code> alongside the existing <code>.media</code> class. This means you can see how the display changes by removing that class from the html.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p> + +<h2 id="Form_controls">Form controls</h2> + +<p>Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an {{htmlelement("input")}} element paired with a {{htmlelement("button")}}, perhaps for a search form or where you simply want your visitor to enter an email address.</p> + +<p>Flexbox makes this type of layout easy to achieve. I have contained my <code><button></code> and <code><input></code> field in a wrapper which I have given a border and set to <code>display: flex</code>. I then use the flex properties to allow the <code><input></code> field to grow, while the button does not grow. This means we have a pair of fields, with the text field growing and shrinking as the available space changes.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p> + +<p>You could add a label or icon to the left as easily as we popped the button onto the right. I have added a label, and other than some styling for background colour I didn’t need to change the layout. The stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p> + +<p>Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>While exploring the above patterns you have hopefully started to see how you can think through the best way to use flexbox to achieve the result that you want. Quite often you have more than one choice. Mix items that cannot stretch with those that can, use the content to inform the size, or allow flexbox to share out space in proportion. It’s up to you. </p> + +<p>Think about the best way to present the content that you have and then see how flexbox or other layout methods can help you achieve it.</p> diff --git a/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..1078b0dbae --- /dev/null +++ b/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,728 @@ +--- +title: Conceitos básicos de Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +tags: + - CSS + - CSS Grids + - Guias(2) + - Layout +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> introduz um sistema bi-dimensional de grid (literalmente "grades") para CSS. Grids podem ser usados para o design de layouts de grandes seções de uma webpage, assim como de pequenos elementos de interface. Esse artigo apresenta o CSS Grid Layout e a terminologia que é parte da especificação CSS Grid Layout Level 1. As funcionalidades demonstradas neste resumo serão posteriormente explicadas em maiores detalhes nas demais seções desse guia.</p> + +<h2 id="O_que_é_grid">O que é grid?</h2> + +<p>Grid é uma malha formada pela interseção de um conjunto de linhas horizontais e um conjunto de linhas verticais – um dos conjuntos define colunas e outro linhas. Dentro de um grid, respeitando-se a configuração criada pelas suas linhas, pode-se inserir elementos da marcação. As CSS grid layout preveem as seguintes funcionalidades:</p> + +<h3 id="Dimensões_fixas_ou_flexíveis">Dimensões fixas ou flexíveis</h3> + +<p>Você pode criar grids com dimensões fixas – por exemplo: definindo dimensões em pixels. Ou criar grids com dimensões flexíveis definindo-as com uso de porcentagem ou da nova unidade CSS <code>fr</code> criada para esse propósito.</p> + +<h3 id="Posicionamento_de_itens">Posicionamento de itens</h3> + +<p>Você pode posicionar com precisão itens de uma página usando o número que define uma linha do grid, usando nomes ou ainda fazendo referência a uma determinada região do grid. Existe ainda um algorítmo de controle do posicionamento de itens da página que não possuem uma posição capaz de ser explícitamente definida no grid.</p> + +<h3 id="Criação_de_grids_adicionais">Criação de grids adicionais</h3> + +<p>Além da possibilidade de se criar um grid inicial para o layout a Especificação prevê também a possibilidade de se adicionar linhas e colunas para layoutar conteúdos adicionados fora do grid inicial. Funcionalidades tal como adicionar "tantas colunas quanto necessárias em um grid container existente" são previstas nas Especificações.</p> + +<h3 id="Alinhamento">Alinhamento</h3> + +<p>Estão previstas funcionalidades de alinhamento que possibilitam controlar o alinhamento dos itens de uma página posicionados no grid e também o alinhamento do próprio grid como um todo.</p> + +<h3 id="Controle_sobre_conteúdos_sobrepostos">Controle sobre conteúdos sobrepostos</h3> + +<p>Em uma célula do grid podem ser posicionados mais de um item da página e também é possível que se defina sobreposição parcial de áreas. Esse controle de layers é feito com uso de {{cssxref("z-index")}}.</p> + +<p>CSS Grid Layout é uma poderosa especificação que se for combinada com outras partes do CSS, tal como <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, possibilita a criação de layouts que até então eram impossíveis de serem criados com CSS. Tudo começa com a criação de um grid dentro de um <strong>grid container</strong>.</p> + +<h2 id="Grid_container">Grid container</h2> + +<p>Cria-se um <em>grid container</em> com as declarações CSS <code>display: grid</code> ou <code>display: inline-grid</code> para um elemento da marcação. Assim declarando, todos os elementos <em>filhos diretos</em> daquele container se transformam em <em>grid items</em>.</p> + +<p>No exemplo mostrado a seguir um elemento div container ao qual foi atribuída a classe wrapper contém cinco elementos filhos.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>Façamos de <code>.wrapper</code> um grid container.</p> + +<pre class="brush: css">.wrapper { + display: grid; +} +</pre> + +<div class="hidden"> +<pre class="syntaxbox"><span class="seoSummary">*</span> {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +}</pre> +</div> + +<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p> + +<p>Todos os elementos filhos diretos agora são grid items. Observando a renderização em um navegador web você não notará nenhuma diferença em relação a renderização já conhecida de um elemento container com seus cinco elementos filhos, pois no exemplo foi criado um grid constítuido de uma única coluna para acomodar os elementos filhos. A partir desse ponto você pode achar mais útil trabalhar no <em>Firefox Developer Edition</em>, que possui o <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> disponÍvel como parte das Ferramentas do desenvolvedor. Se você ver este exemplo no Firefox e inspecionar o Grid, você verá um pequeno ícone ao lado do valor Grid (na propiedade <em>display</em> do elemento container). Clique nele e o Grid neste elemento será sobreposto na janela do navegador. </p> + +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> + +<p>À medida que você aprende e depois trabalha com <em>CSS Grid Layout</em>, esta ferramenta lhe dará uma idéia melhor do que está acontecendo com suas <em>Grids</em> visualmente.</p> + +<p>Se nós queremos começar a fazer isso parecer mais com os <em>Grids layouts</em> , nós precisamos adicionar <em>collumn tracks</em>.</p> + +<h2 id="Grid_Tracks">Grid Tracks</h2> + +<p>Nós definimos linhas e colunas no nosso grid com as propriedades {{cssxref("grid-template-columns")}} e {{cssxref("grid-template-rows")}}. Isso define o grid tracks. Um <em>grid track</em> é o espaço entre duas linhas em um grid. Na imagem abaixo você pode ver um track highlighter – o track na primeira linha do nosso grid.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> + +<p>Posso adicionar ao exemplo anterior a propriedade <code>grid-template-columns</code>, depois definir o tamanho da column tracks.</p> + +<p>Agora criei um grid com três colunas fixas de 200px. Os itens filhos serão dispostos nessa grade, um em cada célula da grade.</p> + +<div id="grid_first"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 200px 200px 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> +</div> + +<h3 id="A_unidade_fr">A unidade <code>fr</code></h3> + +<p>Nas propriedades de grid podem ser utilizadas quaisquer unidades de medida. Para nos ajudar a criar layouts flexíveis utilizando o grid, foi criada uma unidade nova. A unidade <code>fr </code>representa uma fração do espaço disponível no container do grid. A próxima definição de grid cria três espaços com tamanhos iguais que aumentam e diminuem de acordo com o espaço disponível. </p> + +<div id="fr_unit_ls"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('fr_unit_ls', '220', '180') }}</p> +</div> + +<p>No próximo exemplo, criamos um container <code>.wrapper com uma coluna de 2fr</code> e duas colunas de <code>1fr</code>. Portanto, o espaço disponível será dividido em quatro partes. Duas partes serão para a primeira coluna e uma parte para cada um das próximas duas colunas. </p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} +</pre> + +<p>Nesse exemplo final, nós misturamos unidades de medida fixa com as de fração. A primeira coluna tem <code>500px</code>, que será fixa. O espaço disponível restante será dividido em três partes, sendo uma parte para a segunda coluna e mais duas partes para a terceira coluna.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 500px 1fr 2fr; +} +</pre> + +<h3 id="Track_listings_com_a_notação_repeat()">Track listings com a notação <code>repeat()</code></h3> + +<p>Grids grandes, com muitas tracks podem usar a notação <code>repeat()</code> para repetir todas ou uma seção de track listing. Por exemplo a definição de grid a seguir:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<p>Também pode ser escrita como:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>A notação repeat ( ) pode ser usada apenas para uma parte da track listing. No próximo exemplo estou criando um grid com uma coluna inicial de 20-pixels, repetindo uma sessão de 6 colunas de <code>1fr</code>, e por fim uma coluna de 20-pixels.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 20px repeat(6, 1fr) 20px; +} +</pre> + +<p>A notação Repeat tem como parâmetro um track listing, sendo assim você pode usá-lo para criar um padrão de repetição de tracks. Neste exemplo meu grid terá 10 tracks, uma trilha de <code>1fr</code> seguida por uma trilha de <code>2fr</code> , repetida cinco vezes.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr 2fr); +} +</pre> + +<h3 id="O_grid_implícito_e_explícito">O grid implícito e explícito</h3> + +<p>Ao criar nosso grid de exempo definimos nossa coluna de trilhas com a propriedade {{cssxref("grid-template-columns")}}, mas adicionalmente deixamos o grid criar as linhas necessárias para qualquer outro conteúdo. Estas linhas são criadas no grid implícito. O grid explícito é constituído por linhas e colunas que você define com {{cssxref("grid-template-columns")}} e {{cssxref("grid-template-rows")}}. Se você posicionar algo fora do grid definido, ou caso devido à quantidado de conteúdo mais trilhas de grid sejam necessárias, o grid então cria linhas e colunas no grid implícito. Estas trilhas serão seu tamanho definido automaticamente por padrão, resultando em seu tamanho ser basedo no conteúdo que elas contém.</p> + +<p>Você também pode definir o tamanho do conjunto para trilhas criadas na grid implícita com as propriedades {{cssxref("grid-auto-rows")}} e {{cssxref("grid-auto-columns")}}.</p> + +<p>No exemplo abaixo usamos <code>grid-auto-rows</code> para garantir que as trilhas criadas na grid implícita tem 200 pixels de altura.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '210', '410') }}</p> + +<h3 id="Track_sizing_and_minmax()">Track sizing and <code>minmax()</code></h3> + +<p>Quando criando um grid explícito ou definindo o tamanho para as colunas e linha serem criadas automáticamente podemos querer dar um tamanho minimo para os tracks, mas assegure que eles expandam para o tamanho necessário do conteúdo adicionado. Por exemplo eu gostaria que as minhas linhas nunca colapsem para um tamanho menor que 100 pixels, mas se o meu conteúdo aumentar até 300 pixels de altura eu gostaria que a linha aumentasse para essa mesma altura.</p> + +<p>Grid tem uma solução para isso com a função {{cssxref("minmax", "minmax()")}}. No próximo exemplo estou usando <code>minmax()</code> no valor de {{cssxref("grid-auto-rows")}}. Automaticamente as linhas criadas terão uma altura mínima de 100 pixels, e a máxima de <code>auto</code>. Usar <code>auto</code> significa que o tamanho vai olhar para o conteúdo e, assim, esticar para que a linha tenha o espaço necessário.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two + <p>I have some more content in.</p> + +<p>This makes me taller than 100 pixels.</p> +</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Track_sizing_and_minmax()', '230', '490') }}</p> + +<h2 id="Linhas_de_grid">Linhas de grid</h2> + +<p>Devemos observar que quando definimos um grid definimos as trilhas do grid, não as linhas. O grid então nos devolve linhas numeradas para usarmos ao posicionar itens. Em nossa grid de 3 colunas por duas linhas, temos quatro linhas de colunas.</p> + +<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> + +<p>Linhas são numeradas de acordo a forma de escrita do documento. Em uma linguagem da esquerda para a direita, a linha 1 está à esquerda do grid. Em uma linguagem da direita para a esquerda, ela está no lado direito do grid. Linhas também podem ser nomeadas, e veremos como fazer isso em um guia posterior nessa série.</p> + +<h3 id="Posicionando_itens_contra_linhas">Posicionando itens contra linhas</h3> + +<p>Exploraremos posicionamento de itens baseado em linhas em um artigo posterior. O exemplo a seguir mostra como fazer isso de forma simples. Quando posicionar um item, focamos a linha - ao invés do rastro.</p> + +<p>Nesse exemplo eu estou posicionando os primeiros dois itens do nosso grid de três colunas, usando as propriedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} e {{cssxref("grid-row-end")}}. Da esquerda para a direita, o primeiro item é posicionado contra a linha da coluna 1, e vai até a linha da coluna 4, que no nosso caso é a linha do extremo direito do grid. Começa na linha 1 e termina na linha 3, tendo uma expansão de duas linhas.</p> + +<p>O segundo item inicia na linha da coluna 1, e expande uma linha. Esse é o padrão, então não preciso especificar a linha final. Também vai da linha 3 a linha 5. Os outros itens serão posicionados de acordo com espaço disponível no grid.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Positioning_items_against_lines', '220', '410') }}</p> + +<p>Não esqueça que o <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> pode ser usado no Firefox Developer Tools para ver como os itens estão posicionados no grid.</p> + +<h2 id="Células_do_grid">Células do grid</h2> + +<p>Uma célula de grid é a menor unidade em um grid. Conceitualmente é como se fosse uma célula de tabela. Como vimos em nossos exemplos anteriores, uma vez que o grid é definido como o pai os itens filhos serão organizados cada um em uma célula do grid definido. Na imagem abaixo, temos destacado a primeira célula do grid.</p> + +<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> + +<h2 id="Áreas_do_grid">Áreas do grid</h2> + +<p>Itens podem se espalhar por uma ou mais células ambas entre linhas ou colunas, e isto cria uma <em>área de grid. </em>Áreas de grid devem ser retangulares – não é possível criar uma área em L por exemplo. A área destacada se espalha por duas trilhas de linhas e duas trilhas de colunas.</p> + +<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> + +<h2 id="Gutters">Gutters</h2> + +<p><em>Gutters</em> ou <em>alleys </em>(espaçamentos ou separadores) entre células do grid podem ser criadas usando a propriedade {{cssxref("grid-column-gap")}} e {{cssxref("grid-row-gap")}} ou de forma resumida {{cssxref("grid-gap")}}. No exemplo abaixo, criamos um espaço vazio de 10 pixels entre colunas e um espaço vazio de <code>1em</code> entre linhas.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 10px; + grid-row-gap: 1em; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Gutters') }}</p> + +<p>Qualquer espaço utilizado entre espaços vazios ou <em>gaps</em> deverá ser considerado antes do espaço ser designado para as trilhas de tamanho flexível <code>fr</code> , e <em>gaps</em> agem para propósitos de tamanho como uma trilha de grid normal, entretanto você não pode colocar coisa alguma em um <em>gap</em> Em termos de posicionamento baseado em linhas, o <em>gap</em> age como uma linha preenchida (<em>fat line</em>).</p> + +<h2 id="Aninhando_grids">Aninhando grids</h2> + +<p>Um item de grid pode se tornar um container de grid. No exemplo a seguir, temos o grid de três colunas criadas anteriormente, com nossos dois itens posicionados. Neste caso o primeiro item possui dois sub itens. Como estes itens não são filhos diretos do grid eles não participam no layout do grid e dessa forma são exibidos no fluxo normal do documento.</p> + +<div id="nesting"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> + +<p>Se definimos <code>box1</code> como <code>display: grid</code> podemos dar uma definição de tracks e ela também se tornará uma grid. Os itens então são dispostos nesse novo grid.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('nesting', '600', '410') }}</p> + +<p>Nesse caso o grid aninhado não possui relação com o pai. Como é possível perceber no exemplo ele não herdou o {{cssxref("grid-gap")}} do pai e as linhas no grid aninhado não estão alinhadas com as linhas do grid pai.</p> + +<h3 id="Subgrid">Subgrid</h3> + +<p>No nível das especificações do grid tem uma <em>feature</em> chamada <em>subgrid</em> que nos permitiria criar grids aninhados que usa aquilo que foi definido no grid pai.</p> + +<div class="note"> +<p>Subgrids ainda não foram implementados em nenhum browser, e as especificações são sujeitas a mudanças.</p> +</div> + +<p>Na especificação atual, no exemplo acima editaríamos o grid aninhado usando <code>display: subgrid</code> ao invés de <code>display: grid</code>, e remover o que havia sido definido. O grid aninhado vai usar as propriedades definidas no pai para dispor os itens.</p> + +<p>Note que o grid aninhado está nas duas dimensões — linhas e colunas. Não há garantia de que o grid implícito funcione com subgrid. Por isso é necessário que haja certeza de que o grid pai tem linhas e colunas suficientes para todos os sub itens.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: subgrid; +} +</pre> + +<h2 id="Sobrepondo_itens_com_z-index">Sobrepondo itens com <code>z-index</code></h2> + +<p>Itens de uma mesma grade podem ocupar uma mesma célula. Se retornarmos ao nosso exemplo com itens dispostos pela linha, podemos fazer com que dois se sobreponham.</p> + +<div id="l_ex"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('l_ex', '210', '410') }}</p> + +<p>O container <code>box2</code> está sobrepondo <code>box1</code>, é renderizado acima pois vem depois na ordem.</p> + +<h3 id="Manipulando_a_ordem">Manipulando a ordem</h3> + +<p>Podemos controlar a ordem na qual os itens irão empilhar-se usando a propriedade <code>z-index</code>. Se <code>box2</code> recebe um <code>z-index</code> menor que <code>box1</code> será mostrado abaixo de <code>box1</code>.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + z-index: 2; +} +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; + z-index: 1; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Controlling_the_order', '210', '410') }}</p> + +<h2 id="Próximos_Passos">Próximos Passos</h2> + +<p>Nesse artigo abordamos um pouco da especificação do Grid Layout. Pratique com os exemplos propostos, depois disso passe para a próxima parte onde estudaremos mais a fundo o CSS Grid Layout.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guias</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propriedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossário</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pt-br/web/css/css_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..28ebe9c2d6 --- /dev/null +++ b/files/pt-br/web/css/css_grid_layout/index.html @@ -0,0 +1,191 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - Layout + - Referências +translation_of: Web/CSS/CSS_Grid_Layout +--- +<div class="note"> +<p>CSS Grid será suportado por vários navegadores até meados de 2017. O suporte em navegadores antigos pode ser obtido habilitando-se uma flag que permite o uso da API. Nesse caso não se esqueça de consultar e fazer referência a cada propriedade e funcionalidade da especificação para certificar-se da sua compatibilidade, bem como para obter maiores informações.</p> +</div> + +<p><strong>CSS Grid layout</strong> é uma especificação do W3C projetada para proporcionar um método bi-dimensional para criação de layout CSS que oferece a possibilidade de "layoutar" itens da página com uso de linhas e colunas. CSS grid poderá ser usado para obter uma infinidade de diferentes layouts. O diferencial desse método de criação de layouts reside na possibilidade de se dividir uma página em grandes regiões e de se definir o relacionamento em termos de medidas, posicionamento e camadas entre os diferentes componentes da marcação HTML.</p> + +<p>Tal como as tabelas, grid layout permite ao autor alinhar os componentes da página fazendo uso de linhas e colunas. Contudo ao contrário das tabelas, grid layout não se baseia em estruturação de conteúdos, possibilitando uma enorme variedade de layouts, o que não é possível de se obter com uso de tabelas. Por exemplo: elementos filhos de um grid container podem ser posicionados à vontade se sobrepondo ou mudando de layer, de modo idêntico como se faz com uso das funcionalidades do nosso já conhecido posicionamento CSS.</p> + +<h2 id="Basic_Example" name="Basic_Example">Exemplo básico</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box a">a</div> + <div class="box b">b</div> + <div class="box c">c</div> + <div class="box d">d</div> + <div class="box e">e</div> + <div class="box f">f</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate"><code class="cm-s-default" id="actual-css-code"><span class="cm-qualifier">.wrapper</span> { +<span class="cm-property"> display</span>: <span class="cm-variable">grid</span>; + <span class="cm-property">grid-template-columns</span>: <span class="cm-number">100px</span> <span class="cm-number">100px</span> <span class="cm-number">100px</span>; +<span class="cm-error cm-property"> grid-gap</span>: <span class="cm-number">10px</span>; +<span class="cm-property"> background-color</span>: <span class="cm-atom">#fff</span>; +<span class="cm-property"> color</span>: <span class="cm-atom">#444</span>; +} + +<span class="cm-qualifier">.box</span> { +<span class="cm-property"> background-color</span>: <span class="cm-atom">#444</span>; +<span class="cm-property"> color</span>: <span class="cm-atom">#fff</span>; +<span class="cm-property"> border-radius</span>: <span class="cm-number">5px</span>; +<span class="cm-property"> padding</span>: <span class="cm-number">20px</span>; +<span class="cm-property"> font-size</span>: <span class="cm-number">150%</span>; +}</code></pre> + +<h2 id="Referência">Referência</h2> + +<h3 id="Propriedades_CSS">Propriedades CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="Funções_CSS">Funções CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> +</ul> +</div> + +<h3 id="Glossário">Glossário</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Guias">Guias</h2> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceitos básicos de Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relação do Grid Layout com outros métodos de layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout usando grid lines nomeadas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamento Automático CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alinhamento Box no CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Valores Lógicos e Modos de Escrita</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout e Acessibilidade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid e Aprimoramento Progressivo</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realizando layouts comuns usando CSS Grid</a></li> +</ul> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Referência</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guias</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceitos básicos de grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relação com outros métodos de layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamento baseado em linha</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout usando grid lines nomeadas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamento Automático no grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alinhamento box no grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, Valores Lógicos e Modos de Escrita</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout e Acessibilidade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout e Aprimoramento Progressivo</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizando layouts comuns usando CSS Grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propriedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossário</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..358ada6d07 --- /dev/null +++ b/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,640 @@ +--- +title: Relationship of grid layout to other layout methods +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +<p> </p> + +<p>O CSS Grid Layout foi projetado para funcionar junto com outras partes do CSS, como parte de um sistema completo para fazer o layout. Neste guia, explicarei como uma grade se encaixa com outras técnicas que você já pode estar usando.</p> + +<h2 id="Grid_e_flexbox">Grid e flexbox</h2> + +<p>A diferença básica entre CSS Grid Layout e CSS Flexbox Layout é que o flexbox foi projetado para layout em uma dimensão - uma linha ou uma coluna. A grade foi projetada para layout bidimensional - linhas e colunas ao mesmo tempo. As duas especificações compartilham alguns recursos comuns, e se você já aprendeu a usar o flexbox, as semelhanças devem ajudá-lo a se familiarizar com o Grid.</p> + +<h3 id="Layout_unidimensional_versus_bidimensional">Layout unidimensional versus bidimensional</h3> + +<p>Um exemplo simples pode demonstrar a diferença entre layouts unidimensionais e bidimensionais.</p> + +<p>Neste primeiro exemplo, estou usando o flexbox para criar um conjunto de caixas. Eu tenho cinco itens filhos no meu contêiner e dei valores de propriedades flexíveis para que eles possam crescer e encolher de uma base flexível de 200 pixels.</p> + +<p>Eu também defini a propriedade {{cssxref ("flex-wrap")}} para agrupar, de modo que, se o espaço no contêiner ficar muito estreito para manter a base flexível, os itens serão agrupados em uma nova linha.</p> + +<p> </p> + +<div id="onedtwod"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + flex-wrap: wrap; +} +.wrapper > div { + flex: 1 1 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> + +<p> </p> + +<p>Na imagem, você pode ver que dois itens foram envolvidos em uma nova linha. Esses itens estão compartilhando o espaço disponível e não se alinhando abaixo dos itens acima. Isso ocorre porque quando você envolve itens flexíveis, cada nova linha (ou coluna ao trabalhar por coluna) se torna um novo contêiner flexível. Distribuição de espaço acontece em toda a linha.</p> + +<p>Uma questão comum, então, é como alinhar esses itens. É aqui que você deseja um método de layout bidimensional: Você quer controlar o alinhamento por linha e coluna, e é aí que a grade entra.</p> + +<p> </p> + +<h3 id="The_same_layout_with_CSS_grids">The same layout with CSS grids</h3> + +<p>Neste próximo exemplo, eu crio o mesmo layout usando Grid. Desta vez, temos três faixas de coluna 1fr. Não precisamos definir nada nos itens em si; eles se estabelecerão em cada célula da grade criada. Como você pode ver, eles ficam em uma grade rígida, alinhando-se em linhas e colunas. Com cinco itens, temos uma lacuna no final da segunda linha.</p> + +<p> </p> + +<p> </p> + +<div class="Two_Dimensional_With_Grid"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> +</div> + +<p>A simple question to ask yourself when deciding between grid or flexbox is:</p> + +<ul> + <li>do I only need to control the layout by row <u><em>or</em></u> column – use a flexbox</li> + <li>do I need to control the layout by row <u><em>and</em></u> column – use a grid</li> +</ul> + +<h3 id="Content_out_or_layout_in">Content out or layout in?</h3> + +<p>In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space <em>on that line</em>.</p> + +<p>Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.</p> + +<p>If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.</p> + +<h3 id="Box_alignment">Box alignment</h3> + +<p>The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to at least create the visual effect of.</p> + +<p>The alignment properties from the flexbox specification have been added to a new specification called <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. This means that they can be used in other specifications, including Grid Layout. In the future, they may well apply to other layout methods as well.</p> + +<p>In a later guide in this series, I’ll be taking a proper look at Box Alignment and how it works in Grid Layout. For now, here is a comparison between simple examples of flexbox and grid.</p> + +<p>In the first example, which uses flexbox, I have a container with three items inside. The wrapper {{cssxref("min-height")}} is set, so it defines the height of the flex container. I have set {{cssxref("align-items")}} on the flex container to <code>flex-end</code> so the items will line up at the end of the flex container. I have also set the {{cssxref("align-self")}} property on <code>box1</code> so it will override the default and stretch to the height of the container and on <code>box2</code> so it aligns to the start of the flex container.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + align-items: flex-end; + min-height: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: flex-start; +} +</pre> + +<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p> + +<h3 id="Alignment_in_CSS_Grids">Alignment in CSS Grids</h3> + +<p>This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to <code>start</code> and <code>end</code> rather than <code>flex-start</code> and <code>flex-end</code>. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: end; + grid-auto-rows: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: start; +} +</pre> + +<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p> + +<h3 id="The_fr_unit_and_flex-basis">The <code>fr</code> unit and <code>flex-basis</code></h3> + +<p>We have already seen how the <code>fr</code> unit works to assign a proportion of available space in the grid container to our grid tracks. The <code>fr</code> unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the <code>flex</code> properties in flexbox while still enabling the creation of a layout in two dimensions.</p> + +<p>If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.</p> + +<p>In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.</p> + +<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4> + +<p>We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the <code>auto-fill</code> and <code>auto-fit</code> properties.</p> + +<p>In this next example, I have used the <code>auto-fill</code> keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); +} +</pre> + +<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p> + +<h3 id="A_flexible_number_of_tracks">A flexible number of tracks</h3> + +<p>This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining <code>auto-fill</code> and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with <code>minmax</code>. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be <code>1fr</code>. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the <code>1fr</code> maximum as an instruction to share out the remaining space between the items.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} +</pre> + +<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p> + +<p>We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.</p> + +<h2 id="Grid_and_absolutely_positioned_elements">Grid and absolutely positioned elements</h2> + +<p>Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.</p> + +<h3 id="A_grid_container_as_containing_block">A grid container as containing block</h3> + +<p>To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item <code>position: absolute</code> it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.</p> + +<p>In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has <code>position: relative</code> and so becomes the positioning context of this item.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3"> + This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into. + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; + position: relative; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: absolute; + top: 40px; + left: 40px; +} +</pre> + +<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p> + +<p>You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.</p> + +<p>If we remove <code>position:</code> <code>absolute</code> from the rules for <code>.box3</code> you can see how it would display without the positioning.</p> + +<h3 id="A_grid_container_as_parent">A grid container as parent</h3> + +<p>If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove <code>position:</code> <code>relative</code> from the wrapper above, positioning context is from the viewport, as shown in this image.</p> + +<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> + +<p>Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.</p> + +<h3 id="With_a_grid_area_as_the_parent">With a grid area as the parent</h3> + +<p>If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside <code>.box3</code> of the grid.</p> + +<p>I have given <code>.box3</code> position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three + <div class="abspos"> + This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area. + </div> + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: relative; +} +.abspos { + position: absolute; + top: 40px; + left: 40px; + background-color: rgba(255,255,255,.5); + border: 1px solid rgba(0,0,0,0.5); + color: #000; + padding: 10px; +} +</pre> + +<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p> + +<h2 id="Grid_and_display_contents">Grid and <code>display: contents</code></h2> + +<p>A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and <code>display: contents</code>. The <code>contents</code> value of the display property is a new value that is described in the <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> as follows:</p> + +<blockquote> +<p>“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”</p> +</blockquote> + +<p>If you set an item to <code>display:</code> <code>contents</code> the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.</p> + +<div id="Display_Contents_Before"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; +} + +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p> +</div> + +<p>If I now add <code>display:</code> <code>contents</code> to the rules for <code>box1</code>, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.</p> + +<div id="Display_Contents_After"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + display: contents; +} +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p> +</div> + +<p>This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use <code>display:</code> <code>contents</code> in a similar way with flexbox to enable nested items to become flex items.</p> + +<p>As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout to get the different effects you need.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox Guides</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column Layout Guides</a></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values, and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html b/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html new file mode 100644 index 0000000000..e14ba15c2d --- /dev/null +++ b/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html @@ -0,0 +1,47 @@ +--- +title: Implementando sprites de imagens em CSS +slug: Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +<div>{{cssRef}}</div> + +<p><strong>Sprites de imagens</strong> são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.</p> + +<div class="note"> +<p><strong>Nota:</strong> Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.</p> +</div> + +<h2 id="Implementação">Implementação</h2> + +<p>Suponha que uma imagem é dada a cada item com a classe <code>toolbtn</code>:</p> + +<pre class="brush:css">.toolbtn { + background: url(myfile.png); + display: inline-block; + height: 20px; + width: 20px; +}</pre> + +<p>A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de {{cssxref("url()")}} em background , ou como {{cssxref("background-position")}} . Por exemplo:</p> + +<pre class="brush:css">#btn1 { + background-position: -20px 0px; +} + +#btn2 { + background-position: -40px 0px; +}</pre> + +<p>Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe <code>toolbtn</code> atribuída e estão sendo afetados pela regra da imagem acima).</p> + +<p>De forma similar, você pode criar um efeito de hover com:</p> + +<pre class="brush:css">#btn:hover { + background-position: <var><pixels para direita></var>px <var><pixels para baixo></var>px; +}</pre> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Demo completa em CSS Tricks</a></li> +</ul> diff --git a/files/pt-br/web/css/css_images/index.html b/files/pt-br/web/css/css_images/index.html new file mode 100644 index 0000000000..b3e23ab194 --- /dev/null +++ b/files/pt-br/web/css/css_images/index.html @@ -0,0 +1,152 @@ +--- +title: CSS Images +slug: Web/CSS/CSS_Images +tags: + - CSS + - CSS Images + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Images +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Images</strong> is a module of CSS that defines what types of images can be used (the {{cssxref("<image>")}} type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("image-orientation")}}</li> + <li>{{cssxref("image-rendering")}}</li> + <li>{{cssxref("object-fit")}}</li> + <li>{{cssxref("object-position")}}</li> +</ul> +</div> + +<h3 id="Functions">Functions</h3> + +<div class="index"> +<ul> + <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li> + <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li> + <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li> + <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> + <li>{{cssxref("element", "element()")}}</li> +</ul> +</div> + +<h3 id="Data_types">Data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("<image>")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></dt> + <dd>Presents a specific type of CSS images, <em>gradients</em>, and how to create and use these.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Implementing image sprites in CSS</a></dt> + <dd>Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Standardizes the <code>-webkit</code> prefixed gradient value functions</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td> </td> + </tr> + <tr> + <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#url', '<url>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/css_lists_and_counters/index.html b/files/pt-br/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..6da7c24f6d --- /dev/null +++ b/files/pt-br/web/css/css_lists_and_counters/index.html @@ -0,0 +1,135 @@ +--- +title: CSS Lists and Counters +slug: Web/CSS/CSS_Lists_and_Counters +tags: + - CSS + - CSS Lists and Counters + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Lists and Counters</strong> is a module of CSS that defines how lists are layed out, how the list marker can be styled and how authors can create new counters.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("list-style-image")}}</li> + <li>{{cssxref("list-style-type")}}</li> + <li>{{cssxref("list-style-position")}}</li> + <li>{{cssxref("list-style")}}</li> + <li>{{cssxref("counter-reset")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li> </li> +</ul> +</div> + +<h3 id="At-rules">At-rules</h3> + +<dl> + <dt>{{cssxref("@counter-style")}}</dt> + <dd> + <div class="index"> + <ul> + <li>{{cssxref("@counter-style/system","system")}}</li> + <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li> + <li>{{cssxref("@counter-style/negative", "negative")}}</li> + <li>{{cssxref("@counter-style/prefix", "prefix")}}</li> + <li>{{cssxref("@counter-style/suffix", "suffix")}}</li> + <li>{{cssxref("@counter-style/range", "range")}}</li> + <li>{{cssxref("@counter-style/pad", "pad")}}</li> + <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li> + <li>{{cssxref("@counter-style/fallback", "fallback")}}</li> + </ul> + </div> + </dd> +</dl> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation">Consistent list indentation</a></dt> + <dd>Explains how to reach a consistent indentation between different browsers.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Using CSS counters</a></dt> + <dd>Describes how to use counters to be able to use numbering outside of traditionnal list element, or to perform complex counting.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Lists')}}</td> + <td>{{ Spec2('CSS3 Lists') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'generate.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html b/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..2fb2dac4bd --- /dev/null +++ b/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,115 @@ +--- +title: Using CSS counters +slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">Contadores CSS são em essência, as variáveis mantidas pelo CSS cujos valores podem ser incrementado por regras do CSS para controlar quantas vezes eles são usados.Isso permite ajustar a aparência do conteúdo com base na sua colocação no documento.</span> contadores CSS são uma implementação de <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Contadores automáticos e numeração </a>em CSS 2.1.</p> + +<p>O valor de um contador é manipulado através da utilização de {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} pode ser exibido em uma página usando o <code>counter()</code> ou <code>counters()</code> função da propriedade de <code><a href="/en-US/docs/CSS/content" title="CSS/content">conteúdo</a></code>.</p> + +<h2 id="Using_counters" name="Using_counters">Usando contadores</h2> + +<p>Para usar um contador, tem quer definir um valor para ele (ele é 0 default). Para adicionar o valor do contador em um elemento, use a função <code>counter()</code>. O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.</p> + +<pre class="brush: css notranslate">body { + counter-reset: section; /* Set the section counter to 0 */ +} +h3::before { + counter-increment: section; /* Increment the section counter*/ + content: "Section" counter(section) ": "; /* Display the counter */ +} +</pre> + +<p>Exemplo:</p> + +<pre class="brush: html notranslate"><h3>Introduction</h3> +<h3>Body</h3> +<h3>Conclusion</h3></pre> + +<p>{{ EmbedLiveSample('Using_counters', 300,200) }}</p> + +<h2 id="Nesting_counters" name="Nesting_counters">Nesting counters</h2> + +<p>Um contador CSS pode ser especialmente útil para fazer listas descritas porque uma nova instância de um contador CSS é criado automaticamente em elementos filho . Usando a função <code>counters()</code>, uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta CSS :</p> + +<pre class="brush: css notranslate">ol { + counter-reset: section; /* Creates a new instance of the + section counter with each ol + element */ + list-style-type: none; +} +li::before { + counter-increment: section; /* Increments only this instance + of the section counter */ + content: counters(section,".") " "; /* Adds the value of all instances + of the section counter separated + by a ".". */ + /* if you need to support < IE8 then + make sure there is no space after + the ',' */ +} +</pre> + +<p>Combinado com o seguinte HTML:</p> + +<pre class="brush: html notranslate"><ol> + <li>item</li> <!-- 1 --> + <li>item <!-- 2 --> + <ol> + <li>item</li> <!-- 2.1 --> + <li>item</li> <!-- 2.2 --> + <li>item <!-- 2.3 --> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + </ol> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + <li>item</li> <!-- 2.3.3 --> + </ol> + </li> + <li>item</li> <!-- 2.4 --> + </ol> + </li> + <li>item</li> <!-- 3 --> + <li>item</li> <!-- 4 --> +</ol> +<ol> + <li>item</li> <!-- 1 --> + <li>item</li> <!-- 2 --> +</ol></pre> + +<p>Produz este resultado:</p> + +<p>{{ EmbedLiveSample('Nesting_counters',400,'100%') }}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Veja mais</h2> + +<ul> + <li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li> + <li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li> +</ul> + +<p><em>There is an additional example available at <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. This blog entry was posted on November 01, 2006, but appears to be accurate.</em></p> diff --git a/files/pt-br/web/css/css_positioning/index.html b/files/pt-br/web/css/css_positioning/index.html new file mode 100644 index 0000000000..b88e028585 --- /dev/null +++ b/files/pt-br/web/css/css_positioning/index.html @@ -0,0 +1,65 @@ +--- +title: CSS Positioning +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Positioning</strong> é um módulo do CSS que define como ficam a posição dos elementos relativos e absolutos da página.</p> + +<h2 id="Referências">Referências</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("clear")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("float")}}</li> + <li>{{cssxref("left")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("z-index")}}</li> +</ul> +</div> + +<h2 id="Roteiro">Roteiro</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Entendendo o CSS z-index</a></dt> + <dd>Apresenta o conceito de contexto de empilhamento e explica como funciona o atributo z-index, com diversos exemplos.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Positioning') }}</td> + <td>{{ Spec2('CSS3 Positioning') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/css/css_reference/index.html b/files/pt-br/web/css/css_reference/index.html new file mode 100644 index 0000000000..1afbf4890e --- /dev/null +++ b/files/pt-br/web/css/css_reference/index.html @@ -0,0 +1,75 @@ +--- +title: Referência de CSS +slug: Web/CSS/CSS_Reference +translation_of: Web/CSS/Reference +--- +{{CSSRef}} + +<p>Use esta <strong>referência de CSS</strong> para navegar por um índice alfabético das propriedades padrão do <a href="/en/CSS" title="CSS">CSS</a>, <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a>, <a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">pseudo-elementos</a>, tipos de dados e <a href="/en/CSS/At-rule" title="At-rule">@-rules</a>.</p> + +<p>Esta referência lista não somente as propriedades do CSS1 e CSS2.1, mas também referências para qualquer propriedade, conceito padronizado ou estabilizado do CSS3.</p> + +<p>Veja também <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS_Reference/Mozilla_Extensions">Extensões CSS Mozilla </a>para propriedades específicas do Gecko prefixadas com <code>-moz</code> e <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="WebKit extensions">Extensões CSS do WebKit</a> para propriedades específicas do WebKit. Veja <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/" title="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Visão geral de propriedades CSS prefixadas por distribuidor</a> por Peter Beverloo para todas as propriedades prefixadas.</p> + +<p>{{ CSS_Ref() }}</p> + +<h2 id="Seletores">Seletores</h2> + +<ul> + <li>Seletores básicos + <ul> + <li><a class="internal" href="/en/CSS/Type_selectors" title="en/CSS/Type selectors">Seletores de tipo</a> <code>elementname</code></li> + <li><a class="internal" href="/En/CSS/Class_selectors" title="en/CSS/Class selectors">Seletores de classe</a> <code>.classname</code></li> + <li><a class="internal" href="/En/CSS/ID_selectors" title="en/CSS/ID selectors">Seletores de ID</a> <code>#idname</code></li> + <li><a class="internal" href="/en/CSS/Universal_selectors" title="en/CSS/Universal selectors">Seletores universais</a> <code>* ns|* *|*</code></li> + <li><a class="internal" href="/en/CSS/Attribute_selectors" title="en/CSS/Attribute selectors">Seletores de atributo</a> + <ul style="-moz-column-width: 14em; -webkit-columns: 14em; margin: 0; padding: 0; list-style-type: none;"> + <li><code>[attribute]</code></li> + <li><code>[attribute="value"]</code></li> + <li><code>[attribute~="value"]</code></li> + <li><code>[attribute|="value"] </code></li> + <li><code>[attribute^="value"]</code></li> + <li><code>[attribute$="value"]</code></li> + <li><code>[attribute*="value"] </code></li> + <li><code>[ns|attribute]</code></li> + </ul> + </li> + </ul> + </li> + <li>Combinadores + <ul> + <li><a class="internal" href="/en/CSS/Adjacent_sibling_selectors" title="en/CSS/Adjacent sibling selectors">Combinadores equivalentes adjacentes</a> <code>A + B</code></li> + <li><a class="internal" href="/En/CSS/General_sibling_selectors" title="en/CSS/General sibling selectors">Combinadores equivalentes gerais</a> <code>A ~ B</code></li> + <li><a class="internal" href="/en/CSS/Child_selectors" title="en/CSS/Child selectors">Combinadores filhos</a> <code>A > B</code></li> + <li><a class="internal" href="/en/CSS/Descendant_selectors" title="en/CSS/Descendant selectors">Combinadores descendentes</a> <code>A B</code></li> + </ul> + </li> + <li><a class="internal" href="/en/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">Pseudo-elementos</a></li> + <li><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes"><span class="internal">Pseudo-classes</span></a></li> +</ul> + +<h2 id="Miscelânea">Miscelânea</h2> + +<ul> + <li>{{ Cssxref("Comments") }}</li> + <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Consultas de mídias</a></li> + <li><a href="/en/CSS_Counters" title="CSS Counters">Contadores</a></li> + <li><a href="/en/CSS/Using_CSS_gradients" title="Using gradients">Gradientes</a></li> + <li><a href="/En/CSS/Using_CSS_transforms" title="https://developer.mozilla.org/En/CSS/Using_CSS_transforms">Transformações</a></li> +</ul> + +<h2 id="Conceitos">Conceitos</h2> + +<ul> + <li><a href="/en/CSS/Syntax" title="Syntax">Sintaxe do CSS</a></li> + <li><a href="/en/CSS/At-rule" title="en/CSS/At-rule">Regra At</a></li> + <li><a href="/en/CSS/Comments" title="en/CSS/Comments">Comentários</a></li> + <li><a class="internal" href="/en/CSS/Specificity" title="en/CSS/specificity">Especificidade</a></li> + <li><a class="internal" href="/en/CSS/initial_value" title="en/CSS/initial value">Valor inicial</a></li> + <li><a class="internal" href="/en/CSS/inheritance" title="en/CSS/inheritance">Herança</a></li> + <li><a class="internal" href="/en/CSS/specified_value" title="en/CSS/specified value">Valor especificado</a></li> + <li><a class="internal" href="/en/CSS/computed_value" title="en/CSS/computed value">Valor computado</a></li> + <li><a class="internal" href="/en/CSS/used_value" title="en/CSS/used value">Valor usado</a></li> + <li><a class="internal" href="/en/CSS/actual_value" title="en/CSS/actual value">Valor corrente</a></li> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">Modelo de caixa</a></li> +</ul> diff --git a/files/pt-br/web/css/css_tipos/index.html b/files/pt-br/web/css/css_tipos/index.html new file mode 100644 index 0000000000..79256061ae --- /dev/null +++ b/files/pt-br/web/css/css_tipos/index.html @@ -0,0 +1,64 @@ +--- +title: Tipos básicos de dados CSS +slug: Web/CSS/CSS_Tipos +tags: + - CSS + - CSS tipos de dados + - Referencia + - Visão Geral +translation_of: Web/CSS/CSS_Types +--- +<div>{{CssRef}}</div> + +<p><strong>Tipos básicos de dados CSS</strong> definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de <a href="https://www.w3.org/TR/css3-values/#component-types">tipo de valor do componente</a>.<br> + <br> + Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".</p> + +<h2 id="Referência">Referência</h2> + +<div class="index"> +<ul> + <li>{{cssxref("<angle>")}}</li> + <li>{{cssxref("<basic-shape>")}}</li> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("<color>")}}</li> + <li>{{cssxref("<custom-ident>")}}</li> + <li>{{cssxref("<filter-function>")}}</li> + <li>{{cssxref("<flex>")}}</li> + <li>{{cssxref("<frequency>")}}</li> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<integer>")}}</li> + <li>{{cssxref("<length>")}}</li> + <li>{{cssxref("<number>")}}</li> + <li>{{cssxref("<percentage>")}}</li> + <li>{{cssxref("<position>")}}</li> + <li>{{cssxref("<ratio>")}}</li> + <li>{{cssxref("<resolution>")}}</li> + <li>{{cssxref("<shape-box>")}}</li> + <li>{{cssxref("<single-transition-timing-function>")}}</li> + <li>{{cssxref("<string>")}}</li> + <li>{{cssxref("<time>")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li>{{cssxref("<url>")}}</li> +</ul> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/css/css_transforms/index.html b/files/pt-br/web/css/css_transforms/index.html new file mode 100644 index 0000000000..56f6df6745 --- /dev/null +++ b/files/pt-br/web/css/css_transforms/index.html @@ -0,0 +1,145 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +translation_of: Web/CSS/CSS_Transforms +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("backface-visibility")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("perspective-origin")}}</li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("transform-box")}}</li> + <li>{{cssxref("transform-origin")}}</li> + <li>{{cssxref("transform-style")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt> + <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transforms') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + 36</p> + </td> + <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td> + <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 10.0</td> + <td>10.5{{property_prefix("-o")}}<br> + 12.10<br> + 15.0{{property_prefix("-webkit")}}<br> + 23</td> + <td>3.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>3D Support</td> + <td>12.0{{property_prefix("-webkit")}}<br> + 36</td> + <td>10.0{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10.0</td> + <td>15.0{{property_prefix("-webkit")}}<br> + 23</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<br> + 11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>11.5{{property_prefix("-webkit")}}</td> + <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>3D Support</td> + <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22{{property_prefix("-webkit")}}</td> + <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p> + +<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.</p> + +<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p> + +<p>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p> + +<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p> + +<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p> + +<p> </p> diff --git a/files/pt-br/web/css/css_transforms/using_css_transforms/index.html b/files/pt-br/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..168cc81c3d --- /dev/null +++ b/files/pt-br/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,222 @@ +--- +title: Usando CSS transforms +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +<div>{{CSSRef}}</div> + +<p>Mudando coordenadas no espaço da tela o <strong>CSS transforms </strong>permite que a posição do conteúdo afetado seja alterada sem afetar o fluxo de informação da página. Elas são implementadas usando um conjunto de propriedades CSS que permitem alterações lineares em elementos HTML. Essas alterações incluem rotação, inclinações, alteração da escala e tradução tanto em 2D quanto em 3D.</p> + +<h2 id="Propriedades_de_CSS_transforms">Propriedades de CSS transforms</h2> + +<p>Duas propriedades principais são usadas para definir o CSS transforms: {{ cssxref("transform") }} and {{ cssxref("transform-origin") }}</p> + +<dl> + <dt>{{ cssxref("transform-origin") }}</dt> + <dd>Define a posição de origem do elemento. Por padrão esta posição é o canto superior esquerdo do elemento e pode ser movido. É utilizado para muitas alterações, como rotação, alteração de escala e inclinação, que precisam de um ponto especifico como parâmetro.</dd> + <dt>{{ cssxref("transform") }}</dt> + <dd>Define qual alteração será feita no elemento. Pode-se usar mais de um efeito separado-os por um espaço. Tais efeitos serão aplicados um após o outro, na ordem determinada no código.</dd> +</dl> + +<h3 id="Exemplo_Rotação">Exemplo: Rotação</h3> + +<p>Este exemplo cria um iframe que permite que a página inicial do Google seja utilizada com uma rotação de 90 graus a partir do canto inferior esquerdo</p> + +<p><a class="internal" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Veja um exemplo funcionando</a><br> + <a class="internal" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Veja uma foto do exemplo</a></p> + +<pre class="brush: html"><div style="transform: rotate(90deg); transform-origin: bottom left;"> + <iframe src="http://www.google.com/" width="500" height="600"></iframe> +</div> +</pre> + +<h3 id="Example_Inclinando_e_Movendo">Example: Inclinando e Movendo</h3> + +<p>Este exemplo cria um iframe que permite que você use a página inicial do Google inclinada em 10 graus no eixo X.</p> + +<p><a class="external" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Veja um exemplo funcionando</a><br> + <a class="internal" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">View uma foto do exemplo</a></p> + +<pre class="brush: html"><div style="transform: skewx(10deg) translatex(150px); + transform-origin: bottom left;"> + <iframe src="http://www.google.com/" width="600" height="500"></iframe> +</div> +</pre> + +<h2 id="Propriedades_especificas_3D_do_CSS">Propriedades especificas 3D do CSS</h2> + +<p>Trabalhar com propriedades CSS em 3D é um pouco mais difícil. Você tem que começar configurando o espaço 3D dando perspectiva a ele, então você tem que configurar como os elementos 2D irão se comportar no espaço.</p> + +<h3 id="Configurando_uma_perspectiva">Configurando uma perspectiva</h3> + +<p>O primeiro elemento a ser configurado é a perspectiva. É ela a responsável pela sensação de 3D. Quanto mais longe o objeto estiver do usuário, menor ele é.</p> + +<p>Quanto será a sensação de encolhimento é definida pela propriedade {{ cssxref("perspective") }}. Quanto menor o valor, mais profundidade terá o objeto.</p> + +<div> +<table class="standard-table"> + <tbody> + <tr> + <td><code>perspective:0;</code></td> + <td><code>perspective:150px;</code></td> + <td><code>perspective:300px;</code></td> + <td><code>perspective:600px;</code></td> + </tr> + <tr> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 0; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 150px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 600px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<p>O segundo elemento a ser configurado é a posição de visão, que será definida pela propriedade {{ cssxref("perspective-origin") }}. Por padrão a perspectiva é centralizada, o que nem sempre é o ideal.</p> + +<div> +<table class="standard-table"> + <tbody> + <tr> + <td><code>perspective-origin:150px 150px;</code></td> + <td><code>perspective-origin:50% 50%;</code></td> + <td><code>perspective-origin:-50px -50px;</code></td> + </tr> + <tr> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 50% 50%;"> + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: -50% -50%;"> + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<p>Feito isso, você pode trabalhar com elementos 3D.</p> + +<h3 id="Elementos_2D_em_espaço_3D">Elementos 2D em espaço 3D</h3> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en/Using_Deviceorientation_In_3D_Transforms" title="Using Deviceorientation In 3D Transforms">Usando deviceorientation com 3D Transforms</a></li> +</ul> diff --git a/files/pt-br/web/css/css_transitions/index.html b/files/pt-br/web/css/css_transitions/index.html new file mode 100644 index 0000000000..de2b11a35c --- /dev/null +++ b/files/pt-br/web/css/css_transitions/index.html @@ -0,0 +1,61 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS Transitions + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Transitions +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Transitions</strong> is a module of CSS that lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("transition")}}</li> + <li>{{cssxref("transition-delay")}}</li> + <li>{{cssxref("transition-duration")}}</li> + <li>{{cssxref("transition-property")}}</li> + <li>{{cssxref("transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt> + <dd>Step-by-step tutorial about how to create transitions using CSS. This article describes each relevant CSS property and explains how they interact with each other.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related to CSS Transitions, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> provide finer control over animated properties.</li> +</ul> diff --git a/files/pt-br/web/css/css_transitions/using_css_transitions/index.html b/files/pt-br/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..2e1b4e331f --- /dev/null +++ b/files/pt-br/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1075 @@ +--- +title: Using CSS transitions +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +<p>{{CSSref}}</p> + +<p><span class="seoSummary"><strong>CSS transitions</strong> provê uma forma de controlar a velocidade de uma animação quando há mudanças de propriedades CSS. Ao invés de uma propriedade entrar em vigor imediatamente, você pode fazer com que as mudanças em uma propriedade ocorram durante um periodo de tempo. Por exemplo, se você mudar a cor de um elemento de branco para preto, a alteração será instantanea. Utilizando transições CSS, as alterações acontecem em uma intervalo de tempo que seguem uma curva de aceleração, e todas podem ser personalizadas</span></p> + +<p>Animações que envolvem transições entre dois estados geralmente são chamadas de <em>transições implicitas, </em>como os estados entre o começo e o fim são implicitamente definidos pelo browser</p> + +<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> + +<p>Animações CSS permitem que você decida quais propriedades animar (listando-os explicitamente), quando a animação deve começar (definindo o delay), quão longa a transição será (definindo a duração), e como a transição irá ocorrer (definindo o tempo da função, linear ou rápido no início, lento no final).</p> + +<h2 id="Quais_propriedade_CSS_podem_transicionadas">Quais propriedade CSS podem transicionadas?</h2> + +<p>Você mesmo pode definir qual propriedade será transicionada e de qual maneira. E isso permite a criação de transições complexas. Como não faz sentido animar algumas propriedades, existe uma lista finita <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties">com propriedades que podem ser transicionadas</a>.</p> + +<div class="note">Observação: A lista de propriedades que podem ser animadas sofre alterações a medida que a especificação se desenvolve.</div> + +<p class="note">O valor <code>automatico</code> , geralmente é complexo. A especificação recomenda não animar com valores automaticos. Alguns <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Headers/User-Agent">user agents</a>, como aqueles baseados no Genko, implementam esse requisito, como aqueles baseados no WebKit, são menos rigosos. Animações CSS que utlizam o valor <code>automatico,</code> podem levar resultados imprevisiveis, dependendo do Browser e da versão, e isso pode ser evitado.</p> + +<h2 id="Definindo_transições">Definindo transições</h2> + +<p>Transições CSS são controladas usando a propriedade {{cssxref("transition")}}. Essa é a melhor maneira de configurar uma transição, assim evitamos parâmetros fora de sintonia, o que pode ser muito frustrante desperdiçar tanto tempo debuggando CSS.</p> + +<p>Você pode controlar componentes individuais da transição com a seguinte sub propriedade:</p> + +<p><strong>(Observe que essas transições fazem um loop infinitamente apenas para o propósito de nossos exemplos; <code>transitions</code> apenas visualizam a mudança na propriedade de começo ao fim. Se você precisar de visualizações desse loop, procure na propriedade {{cssxref("animation")}}.)</strong></p> + +<dl> + <dt>{{cssxref("transition-property")}}</dt> + <dd>Especifica o nome ou nomes das propriedades CSS que as transições serão aplicadas. Somente as propriedades listadas aqui serão animadas durante a transição; alterações e todas outras propriedades ocorrem instantaneamente.</dd> + <dt>{{cssxref("transition-duration")}}</dt> + <dt></dt> + <dd>Especifica a duração em que as transições devem ocorrer. Você pode especificar uma única duração que se aplica a todas as propriedades durante a transição ou vários valores para permitir que cada propriedade faça a transição em um período de tempo diferente. + <div> + <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 0.5s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 0.5s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transformv color; + transition-duration: 0.5s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div> + </div> + + <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 1s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top -webkit-transform color; + -webkit-transition-duration: 1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform color; + transition-duration: 1s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; + -webkit-transition-duration: 1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 1s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_1s",275,150)}}</div> + </div> + + <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 2s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 2s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 2s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_2s",275,150)}}</div> + </div> + + <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 4s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 4s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 4s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_4s",275,150)}}</div> + </div> + </div> + </dd> + <dt>{{cssxref("transition-timing-function")}}</dt> + <dt></dt> + <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;"> Especifica uma função para definir como os valores intermediários das propriedades são calculados. As<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function"> timing functions</a> determinam como os valores intermediários da transição são calculados. A maioria das funções de temporização pode ser especificada fornecendo o gráfico da função correspondente, conforme definido por quatro pontos definindo um bezier cúbico. Você também pode escolher o <a href="http://easings.net/">Easing Functions Cheat Sheet</a>. + <div class="cleared"> + <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: ease</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: ease; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: ease; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div> + </div> + + <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: linear</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div> + </div> + + <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: step-end</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: step-end; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: step-end; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div> + </div> + + <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: steps(4, end)</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: steps(4, end); +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: steps(4, end); +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div> + </div> + </div> + </dd> + <dt>{{cssxref("transition-delay")}}</dt> + <dd>Define quanto tempo esperar entre o momento que uma propriedade é alterada e a transição começa. + <div> + <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 0.5s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { + width: 250px; + height: 125px; +} + +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 0.5s; + transition-timing-function: linear; +} + +.box1 { + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 0.5s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> + </div> + + <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 1s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { + width: 250px; + height: 125px; +} + +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 1s; + transition-timing-function: linear; +} + +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 1s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_1s",275,150)}}</div> + </div> + + <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 2s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { + width: 250px; + height: 125px; +} + +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 2s; + transition-timing-function: linear; +} + +.box1 { + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 2s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_2s",275,150)}}</div> + </div> + + <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 4s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { + width: 250px; + height: 125px; +} + +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 4s; + transition-timing-function: ease-in-out; +} + +.box1 { + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 4s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_4s",275,150)}}</div> + </div> + </div> + </dd> +</dl> + +<p>A sintaxe do CSS é abreviada da seguinte forma:</p> + +<pre class="brush: css">div { + transition: <property> <duration> <timing-function> <delay>; +}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_simples">Exemplo simples</h3> + +<p>Esse exemplo executa uma transição de com duração de 4 segundos de delay entre o tempo que o usuário passa o mouse sobre o elemento (evento mouseover), e o início do efeito da animação</p> + +<pre class="brush: css">#delay { + font-size: 14px; + transition-property: font-size; + transition-duration: 4s; + transition-delay: 2s; +} + +#delay:hover { + font-size: 36px; +} +</pre> + +<h3 id="Exemplo_de_multiplicas_animações_de_propriedades">Exemplo de multiplicas animações de propriedades </h3> + +<div class="hidden"> +<h4 id="Conteúdo_HTML">Conteúdo HTML</h4> + +<pre class="brush: html; highlight:[3]"><body> + <p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p> + <div class="box">Sample</div> +</body></pre> +</div> + +<h4 id="Conteúdo_CSS">Conteúdo CSS</h4> + +<pre class="brush: css; highlight:[8,9]">.box { + border-style: solid; + border-width: 1px; + display: block; + width: 100px; + height: 100px; + background-color: #0000FF; + -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s; + transition: width 2s, height 2s, background-color 2s, transform 2s; +} + +.box:hover { + background-color: #FFCCCC; + width: 200px; + height: 200px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +</pre> + +<p>{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}</p> + +<h3 id="Quando_os_tamanhos_dos_valores_das_listas_das_propriedades_são_de_tamanhos_diferentes">Quando os tamanhos dos valores das listas das propriedades são de tamanhos diferentes</h3> + +<p>Se alguma propriedade da lista de valores for menor que os outros, esse valor será repetido para que eles correspondam. Por exemplo:</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s; +} +</pre> + +<p>Isso é tratado como se fosse:</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s, 3s, 5s; +}</pre> + +<p>Da mesma forma, se um valor da propriedade da lista, for maior que a {{cssxref("transition-property")}}, ela será truncada, então você terá o seguinte CSS:</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s, 2s, 1s; +}</pre> + +<p>Isso pode ser interpretado como:</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s; +}</pre> + +<h3 id="Usando_transições_ao_destacar_menus">Usando transições ao destacar menus</h3> + +<p>Um uso comum de css é para destacar os itens do menu, como hover quando o usúario passa o mouse sobre um elemento. É facíl fácil usar transições CSS para tornar o efeito mais atraente;</p> + +<p>Antes de olharmos para os códigos, você poderia dar uma olhada nesse <a href="https://codepen.io/anon/pen/WOEpva">live demo</a> (assumindo que seu browser suporte transições).</p> + +<p>Primeiro, nós criamos o menu utilizando apenas HTML</p> + +<pre class="brush: html"><nav> + <a href="#">Home</a> + <a href="#">About</a> + <a href="#">Contact Us</a> + <a href="#">Links</a> +</nav></pre> + +<p>Em seguida, nós implementamos o CSS para implementar o visual e aparência do nosso menu. As partes relevantes são serão mostrada aqui:</p> + +<pre class="brush: css">a { + color: #fff; + background-color: #333; + transition: all 1s ease-out; +} + +a:hover, +a:focus { + color: #333; + background-color: #fff; +} +</pre> + +<p>Este CSS estabelece a aparência do menu, com as cores de fundo e texto mudando quando o o ocorre o evento de {{cssxref(":hover")}} e estado de {{cssxref(":focus")}}.</p> + +<h2 id="Exemplos_JavaScript">Exemplos JavaScript</h2> + +<div class="note"> +<p>Cuidados devem ser tomados ao usar uma transição imediatamente após:</p> + +<ul> + <li>adding the element to the DOM using <code>.appendChild()</code></li> + <li>removing an element's <code>display: none;</code> property.</li> +</ul> + +<p>This is treated as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a <code>window.setTimeout()</code> of a handful of milliseconds before changing the CSS property you intend to transition to.</p> +</div> + +<h3 id="Using_transitions_to_make_JavaScript_functionality_smooth">Using transitions to make JavaScript functionality smooth</h3> + +<p>Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example.</p> + +<pre class="brush: html"><p>Click anywhere to move the ball</p> +<div id="foo"></div> +</pre> + +<p>Using JavaScript you can make the effect of moving the ball to a certain position happen:</p> + +<pre class="brush: js">var f = document.getElementById('foo'); +document.addEventListener('click', function(ev){ + f.style.transform = 'translateY('+(ev.clientY-25)+'px)'; + f.style.transform += 'translateX('+(ev.clientX-25)+'px)'; +},false); +</pre> + +<p>With CSS you can make it smooth without any extra effort. Simply add a transition to the element and any change will happen smoothly:</p> + +<pre class="brush: css">p { + padding-left: 60px; +} + +#foo { + border-radius: 50px; + width: 50px; + height: 50px; + background: #c00; + position: absolute; + top: 0; + left: 0; + transition: transform 1s; +} +</pre> + +<p>Você pode brincar um pouco aqui: <a href="http://jsfiddle.net/9h261pzo/291/">http://jsfiddle.net/9h261pzo/291/</a></p> + +<h3 id="Detectando_o_começo_e_a_completude_de_uma_transição">Detectando o começo e a completude de uma transição</h3> + +<p>Você pode usar o evento {{event("transitionend")}} para detectar a uma animação que estava sendo executada chegou ao fim. Esse é o objeto {{domxref("TransitionEvent")}}, que possúi duas propriedades adicionadas além do objeto típico </p> + +<dl> + <dt><code>propertyName</code></dt> + <dd>A string indicando o nome da propriedade CSS cuja transição será completada</dd> +</dl> + + + +<dl> + <dt><code>elapsedTime</code></dt> + <dd>A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of {{cssxref("transition-delay")}}.</dd> +</dl> + +<p>As usual, you can use the {{domxref("EventTarget.addEventListener", "addEventListener()")}} method to monitor for this event:</p> + +<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true); +</pre> + +<p>Você detecta o começo de uma transição usando {{event("transitionrun")}} (antes do delay) e {{event("transitionstart")}} (depois do delay):</p> + +<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true); +el.addEventListener("transitionstart", signalStart, true);</pre> + +<div class="note"><strong>Observação</strong>: O evento <code>transitionend</code> não dispara se a transição é abortada antes de a transição ser concluída, porque o efeito é feito com {{cssxref("display")}}<code>: none</code></div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '', '')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definição Inícial</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>The {{domxref("TransitionEvent")}} interface and the {{event("transitionend")}} event.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Utilizando animações css</a></li> +</ul> diff --git a/files/pt-br/web/css/cursor/index.html b/files/pt-br/web/css/cursor/index.html new file mode 100644 index 0000000000..9a9c6af5af --- /dev/null +++ b/files/pt-br/web/css/cursor/index.html @@ -0,0 +1,529 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - Cursor + - Referencia +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade CSS <strong>cursor</strong> especifica o cursor do mouse mostrado quando o ponteiro do mouse está sobre um elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css notranslate">/* Keywords */ +cursor: pointer; +cursor: auto; + +/* Usando URL e cordenadas */ +cursor: url(cursor1.png) 4 12, auto; +cursor: url(cursor2.png) 2 2, pointer; + +/* Valores globais */ +cursor: inherit; +cursor: initial; +cursor: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><<code>uri</code>></dt> + <dd>Uma url(...) ou uma lista de url(...) separada por vírgula, apontando para uma arquivo de imagem. Mais que uma {{cssxref("<uri>")}} pode ser fornecida como fallback, em caso de alguns tipos de imagem não ser suportado. Um fallback não-URL (um ou mais dos outros valores) <strong>deve</strong> estar no final da lista de fallbacks. Veja <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Usando valores URL para a propriedade cursor</a> para mais detalhes.</dd> + <dt><code><x></code> <code><y></code> {{experimental_inline}}</dt> + <dd>Coordenadas x e y opcionais. Dois números não-negativos, sem unidade e menores que 32.</dd> + <dt>Keyword values</dt> + <dd> + <p><strong style="color: red; font-size: big;">Mova o mouse sobre os valores para testar:</strong></p> + + <table class="standard-table"> + <tbody> + <tr> + <th>Categoria</th> + <th style="width: 7.5em;">Valor CSS</th> + <th>Actual</th> + <th>Descrição</th> + </tr> + <tr style="cursor: auto;"> + <td rowspan="3">General</td> + <td><code>auto</code></td> + <td> </td> + <td>O brower determina o cursor para ser exibido baseado no contexto atual.</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor padrão, tipicamente uma seta.</td> + </tr> + <tr style="cursor: none;"> + <td><code>none</code></td> + <td> </td> + <td>Nenhum cursor é mostrado.</td> + </tr> + <tr style="cursor: context-menu;"> + <td rowspan="5" style="cursor: auto;">Links & status</td> + <td><code>context-menu</code></td> + <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td> + <td>Um menu de contexto está disponível sob o cursor.<br> + Somente IE 10 e superior implementou esta propriedade no Windows: {{Bug("258960")}}.</td> + </tr> + <tr style="cursor: help;"> + <td><code>help</code></td> + <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td> + <td>Indicando que ajuda está disponível.</td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td> + <td>E.g. Usado quando pairando o cursor sobre links, tipicamente uma mão.</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td> + <td>O programa está processando em segundo plano. mas o o usuário ainda pode interagir com a interface (diferente de <code>wait</code>).</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td> + <td>O programa está ocupado (às vezes uma ampulheta ou relógio).</td> + </tr> + <tr style="cursor: cell;"> + <td rowspan="4" style="cursor: auto;">Selection</td> + <td><code>cell</code></td> + <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td> + <td>Indica que a célula pode ser selecionada.</td> + </tr> + <tr style="cursor: crosshair;"> + <td><code>crosshair</code></td> + <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor de cruz, normalmente usado para indicar seleção em uma imagem bitmap.</td> + </tr> + <tr style="cursor: text;"> + <td><code>text</code></td> + <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td> + <td>Indica que o texto pode ser selecionado, normalmente um I maiúsculo.</td> + </tr> + <tr style="cursor: vertical-text;"> + <td><code>vertical-text</code></td> + <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td> + <td>Indica que o texto vertical text can be selected, normalmente um I maiúsculo virado de lado.</td> + </tr> + <tr style="cursor: alias;"> + <td rowspan="5" style="cursor: auto;">Drag and drop</td> + <td><code>alias</code></td> + <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td> + <td>Indicating an alias or shortcut is to be created.</td> + </tr> + <tr style="cursor: copy;"> + <td><code>copy</code></td> + <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td> + <td>Indica que algo será copiado.</td> + </tr> + <tr style="cursor: move;"> + <td><code>move</code></td> + <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td> + <td>O item sob o mouse pode ser movido.</td> + </tr> + <tr style="cursor: no-drop;"> + <td><code>no-drop</code></td> + <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td> + <td>Cursor showing that a drop is not allowed at the current location.<br> + {{bug("275173")}} on Windows and Mac OS X, "no-drop is the same as not-allowed".</td> + </tr> + <tr style="cursor: not-allowed;"> + <td><code>not-allowed</code></td> + <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor showing that something cannot be done.</td> + </tr> + <tr style="cursor: all-scroll;"> + <td rowspan="15" style="cursor: auto;">Resize & scrolling</td> + <td><code>all-scroll</code></td> + <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor showing that something can be scrolled in any direction (panned).<br> + {{bug("275174")}} on Windows, "<em>all-scroll</em> is the same as <em>move</em>".</td> + </tr> + <tr style="cursor: col-resize;"> + <td><code>col-resize</code></td> + <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td> + <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.</td> + </tr> + <tr style="cursor: row-resize;"> + <td><code>row-resize</code></td> + <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td> + <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td> + </tr> + <tr style="cursor: n-resize;"> + <td><code>n-resize</code></td> + <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td> + <td rowspan="8" style="cursor: auto;">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.</td> + </tr> + <tr style="cursor: e-resize;"> + <td><code>e-resize</code></td> + <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: s-resize;"> + <td><code>s-resize</code></td> + <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: w-resize;"> + <td><code>w-resize</code></td> + <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ne-resize;"> + <td><code>ne-resize</code></td> + <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nw-resize;"> + <td><code>nw-resize</code></td> + <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: se-resize;"> + <td><code>se-resize</code></td> + <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: sw-resize;"> + <td><code>sw-resize</code></td> + <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ew-resize;"> + <td><code>ew-resize</code></td> + <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td> + <td rowspan="4" style="cursor: auto;">Indicates a bidirectional resize cursor.</td> + </tr> + <tr style="cursor: ns-resize;"> + <td><code>ns-resize</code></td> + <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nesw-resize;"> + <td><code>nesw-resize</code></td> + <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td> + </tr> + <tr style="cursor: nwse-resize;"> + <td><code>nwse-resize</code></td> + <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style=""> + <td rowspan="2">Zoom</td> + <td><code>zoom-in</code></td> + <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Indicates that something can be zoomed (magnified) in or out.</p> + </td> + </tr> + <tr style=""> + <td><code>zoom-out</code></td> + <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td> + </tr> + <tr id="grab" style=""> + <td rowspan="2">Grab</td> + <td><code>grab</code></td> + <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Indicates that something can be grabbed (dragged to be moved).</p> + </td> + </tr> + <tr style=""> + <td><code>grabbing</code></td> + <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css notranslate">.foo { + cursor: crosshair; +} + +/* use velor prefixado se "zoom-in" não for suportado */ +.bar { + cursor: -webkit-zoom-in; + cursor: zoom-in; +} + +/* valor padrão como fallback para url() deve ser fornecido (não funciona sem) */ +.baz { + cursor: url(hyper.cur), auto; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Adição de várias keywords e sintaxe de posicionamento para url().</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>auto</code>, <code>crosshair</code>, <code>default</code>, <code>move</code>, <code>text</code>, <code>wait</code>, <code>help</code>,<br> + <code>n-resize</code>, <code>e-resize</code>, <code>s-resize</code>, <code>w-resize</code>,<br> + <code>ne-resize</code>, <code>nw-resize</code>, <code>se-resize</code>, <code>sw-resize</code></td> + <td>1.0</td> + <td>1.0</td> + <td>4.0<sup>[1]</sup></td> + <td>7.0</td> + <td>1.2</td> + </tr> + <tr> + <td><code>pointer</code>, <code>progress</code></td> + <td>1.0</td> + <td>1.0</td> + <td>6.0</td> + <td>7.0</td> + <td>1.2</td> + </tr> + <tr> + <td><code>url()</code></td> + <td>1.0</td> + <td>1.5<br> + 4.0<sup>[2]</sup></td> + <td>6.0</td> + <td>{{CompatUnknown}}</td> + <td>3.0</td> + </tr> + <tr> + <td>Positioning syntax for <code>url()</code> values {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>not-allowed</code>, <code>no-drop</code>, <code>vertical-text</code>, <code>all-scroll</code>,<br> + <code>col-resize</code>, <code>row-resize</code></td> + <td>1.0</td> + <td>1.5</td> + <td>6.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>alias</code>, <code>cell</code>, <code>copy</code>,<br> + <code>ew-resize</code>, <code>ns-resize</code>, <code>nesw-resize</code>, <code>nwse-resize</code></td> + <td>1.0</td> + <td>1.5</td> + <td>10.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>context-menu</code></td> + <td>1.0<sup>[3]</sup></td> + <td>1.5<sup>[3]</sup></td> + <td>10.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>none</code></td> + <td>5.0</td> + <td>3.0</td> + <td>9.0</td> + <td>15.0</td> + <td>5.0</td> + </tr> + <tr> + <td><code>inherit</code></td> + <td>1.0</td> + <td>1.0</td> + <td>8.0</td> + <td>9.0</td> + <td>1.2</td> + </tr> + <tr> + <td><code>zoom-in</code>, <code>zoom-out</code></td> + <td> + <p>1.0 {{property_prefix("-webkit-")}}<br> + 37</p> + </td> + <td>1.0 {{property_prefix("-moz-")}}<br> + 24.0</td> + <td>{{CompatNo}}</td> + <td>11.6<br> + 15-23 {{property_prefix("-webkit-")}}<br> + 24</td> + <td>3.0 {{property_prefix("-webkit-")}}<br> + 9</td> + </tr> + <tr> + <td><code>grab</code>, <code>grabbing</code></td> + <td>1.0 {{property_prefix("-webkit-")}}<br> + 22.0 {{property_prefix("-webkit-")}}<sup>[4]</sup></td> + <td>1.5 {{property_prefix("-moz-")}}<br> + 27.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{property_prefix("-webkit-")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>auto</code>, <code>crosshair</code>, <code>default</code>, <code>move</code>, <code>text</code>, <code>wait</code>, <code>help</code>,<br> + <code>n-resize</code>, <code>e-resize</code>, <code>s-resize</code>, <code>w-resize</code>,<br> + <code>ne-resize</code>, <code>nw-resize</code>, <code>se-resize</code>, <code>sw-resize</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>pointer</code>, <code>progress</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>url()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Positioning syntax for <code>url()</code> values {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>not-allowed</code>, <code>no-drop</code>, <code>vertical-text</code>, <code>all-scroll</code>,<br> + <code>col-resize</code>, <code>row-resize</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>alias</code>, <code>cell</code>, <code>copy</code>,<br> + <code>ew-resize</code>, <code>ns-resize</code>, <code>nesw-resize</code>, <code>nwse-resize</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>context-menu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>none</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>inherit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>zoom-in</code>, <code>zoom-out</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>grab</code>, <code>grabbing</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] No IE11, quando cursor é aplicado em um elemento e este elemento está por baixo de um menu {{HTMLElement("select")}} aberto e o usuário paira sobre um item do menu {{HTMLElement("select")}} que está no sobre o elemento em questão, o cursor deste elemento será mostrado em vez do cursor do {{HTMLElement("select")}}. Veja <a href="https://connect.microsoft.com/IE/feedbackdetail/view/963961">IE bug 963961</a>.</p> + +<p>[2] Suporte para este foi adicionado no Mac OS X.</p> + +<p>[3] Apenas suportado no Mac OS X e Linux.</p> + +<p>[4] Suporte para isto foi adicionado no Windows.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Usando valores URL para a propriedade cursor</a></li> + <li>{{cssxref("pointer-events")}}</li> + <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Propriedade cursor (MSDN)</a></li> +</ul> diff --git a/files/pt-br/web/css/descendant_combinator/index.html b/files/pt-br/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..f77d910101 --- /dev/null +++ b/files/pt-br/web/css/descendant_combinator/index.html @@ -0,0 +1,108 @@ +--- +title: Descendant combinator +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><span class="tlid-translation translation" lang="pt"><span title="">O <strong>combinador descendente</strong> - normalmente representado por um caractere de espaço simples </span></span>(<code> </code>)<span class="tlid-translation translation" lang="pt"><span title=""> - combina dois seletores para que os elementos correspondidos pelo segundo seletor sejam selecionados se eles tiverem um elemento ancestral (pai, pai ou mãe, pai ou mãe, etc.) correspondente ao primeiro seletor.</span> <span title="">Os seletores que utilizam um combinador descendente são chamados de seletores descendentes.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span class="tlid-translation translation" lang="pt"><span title="">Listar itens descendentes da lista</span></span> "my-things" */ +ul.my-things li { + margin: 2em; +}</pre> + +<p><span class="tlid-translation translation" lang="pt"><span title="">O combinador descendente é tecnicamente um ou mais caracteres de espaço em branco do {{Glossary ("CSS")}} -</span></span> <span class="tlid-translation translation" lang="pt"><span title="">o caractere de espaço e/ou um dos quatro caracteres de controle: </span></span> <span class="tlid-translation translation" lang="pt"><span title="">retorno de carro (</span></span>carriage return<span class="tlid-translation translation" lang="pt"><span title="">), </span></span> <span>Quebra de página</span> ( form feed)<span class="tlid-translation translation" lang="pt"><span title="">, nova linha e caracteres de tabulação </span></span>— <span class="tlid-translation translation" lang="pt"><span title="">entre dois seletores na ausência de outro combinador. </span></span> <span class="tlid-translation translation" lang="pt"><span title="">Além disso, os caracteres de espaço em branco dos quais o combinador é composto podem conter qualquer número de comentários CSS.</span></span></p> + +<h2 id="Sintaxe"><span class="tlid-translation translation" lang="pt"><span title="">Sintaxe</span></span></h2> + +<pre class="syntaxbox"><var>selector1</var> <var>selector2</var> { + <var>/* </var> <span class="tlid-translation translation" lang="pt"><span title="">declarações de propriedade</span></span> <var> */</var> +}</pre> + +<h2 id="Exemplo"><span class="tlid-translation translation" lang="pt"><span title="">Exemplo</span></span></h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">li { + list-style-type: disc; +} + +li li { + list-style-type: circle; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li> + <div>Item 1</div> + <ul> + <li>Subitem A</li> + <li>Subitem B</li> + </ul> + </li> + <li> + <div>Item 2</div> + <ul> + <li>Subitem A</li> + <li>Subitem B</li> + </ul> + </li> +</ul> +</pre> + +<h3 id="Resultado"><span class="tlid-translation translation" lang="pt"><span title="">Resultado</span></span></h3> + +<p>{{EmbedLiveSample("Example", "100%", 160)}}</p> + +<h2 id="Especificações"><span class="tlid-translation translation" lang="pt"><span title="">Especificações</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><span class="tlid-translation translation" lang="pt"><span title="">Especificação</span></span></th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Browser"><span class="tlid-translation translation" lang="pt"><span title="">Compatibilidade dos </span></span>Browser<span class="tlid-translation translation" lang="pt"><span title=""> </span></span></h2> + + + +<p>{{Compat("css.selectors.descendant")}}</p> + +<h2 id="Veja_também"><span class="tlid-translation translation" lang="pt"><span title="">Veja também</span></span></h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></li> +</ul> diff --git a/files/pt-br/web/css/display-box/index.html b/files/pt-br/web/css/display-box/index.html new file mode 100644 index 0000000000..7aec5790c6 --- /dev/null +++ b/files/pt-br/web/css/display-box/index.html @@ -0,0 +1,112 @@ +--- +title: <display-box> +slug: Web/CSS/display-box +translation_of: Web/CSS/display-box +--- +<div>{{CSSRef}}</div> + +<p class="summary">Essas palavras-chave definem se um elemento gera caixas de exibição.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<dl> + <dt><code>contents</code> {{Experimental_Inline}}</dt> + <dd>Esses elementos não produzem uma caixa específica por si mesmos. Eles são substituídos por sua pseudo-caixa e suas caixas filho. Observe que a especificação CSS Display Level 3 define como o <code>contents</code> + <p>o valor deve afetar "elementos incomuns" - elementos que não são renderizados apenas pelos conceitos da caixa CSS, como elementos substituídos. Consulte o Apêndice B: Efeitos da exibição: conteúdo em Elementos incomuns para obter mais detalhes.</p> + + <p>Devido a um erro nos navegadores, atualmente isso remove o elemento da árvore de acessibilidade - os leitores de tela não analisam o que está dentro. Consulte a seção Preocupações com acessibilidade abaixo para obter mais detalhes.</p> + </dd> + <dt><code>none</code></dt> + <dd>Desativa a exibição de um elemento para que não tenha efeito no layout (o documento é renderizado como se o elemento não existisse). Todos os elementos descendentes também têm a exibição desativada.<br> + Para que um elemento ocupe o espaço que normalmente ocuparia, mas sem renderizar nada, use o {{CSSxRef("visibility")}} propriedade em vez disso.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Neste primeiro exemplo, o parágrafo com uma classe de segredo é definido como <code>display: none</code>; a caixa e qualquer conteúdo agora não são renderizados.</p> + +<h3 id="display_none">display: none</h3> + +<h4 id="HTML">HTML</h4> + +<div id="Hide_element"> +<pre class="brush: html"><p>Visible text</p> +<p class="secret">Invisible text</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p.secret { + display: none; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Hide_element", "100%", 60)}}</p> +</div> + +<div id="Display_contents"> +<h3 id="display_contents">display: contents</h3> + +<p>Neste exemplo, o externo {{htmlelement("div")}} possui uma borda vermelha de 2 pixels e uma largura de 300 px. No entanto, também tem<code>display: contents</code> especificado, portanto, este <code><div></code> não será renderizado, a borda e a largura não serão mais aplicadas e o elemento filho será exibido como se o pai nunca tivesse existido.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="outer"> + <div>Inner div.</div> +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.outer { + border: 2px solid red; + width: 300px; + display: contents; +} + +.outer > div { + border: 1px solid green; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Display_contents", 300, 60)}}</p> +</div> + +<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2> + +<p>As implementações atuais na maioria dos navegadores removerão da árvore de acessibilidade qualquer elemento com um <code>display</code> valor de <code>contents</code>. Isso fará com que o elemento - e em algumas versões do navegador, seus elementos descendentes - não sejam mais anunciados pela tecnologia de leitura de tela. Esse é um comportamento incorreto de acordo com a especificação CSSWG.</p> + +<ul> + <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Marcação mais acessível com display: conteúdo | Hidde de Vries</a></li> + <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Exibição: conteúdo não é uma redefinição de CSS | Adrian Roselli</a></li> +</ul> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<h3 id="Support_of_contents">Support of <code>contents</code></h3> + +<p>{{Compat("css.properties.display.contents", 10)}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("display")}} + <ul> + <li>{{CSSxRef("<display-outside>")}}</li> + <li>{{CSSxRef("<display-inside>")}}</li> + <li>{{CSSxRef("<display-listitem>")}}</li> + <li>{{CSSxRef("<display-internal>")}}</li> + <li>{{CSSxRef("<display-legacy>")}}</li> + </ul> + </li> + <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Exibição: conteúdo não é uma redefinição de CSS | Adrian Roselli</a></li> + <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Marcação mais acessível com display: contents - hiddedevries.nl</a></li> +</ul> diff --git a/files/pt-br/web/css/display-inside/index.html b/files/pt-br/web/css/display-inside/index.html new file mode 100644 index 0000000000..64c09da01a --- /dev/null +++ b/files/pt-br/web/css/display-inside/index.html @@ -0,0 +1,121 @@ +--- +title: <display-inside> +slug: Web/CSS/display-inside +translation_of: Web/CSS/display-inside +--- +<div>{{CSSRef}}</div> + +<p class="summary">Essas palavras-chave especificam o interior do elemento{{CSSxRef("display")}} type, que define o tipo de contexto de formatação que apresenta seu conteúdo (supondo que seja um elemento não substituído). Essas palavras-chave são usadas como valores do <code>display</code> e pode ser usada para fins legados como uma única palavra-chave ou conforme definido na especificação do Nível 3, juntamente com um valor do {{CSSxRef("<display-outside>")}} palavras-chave.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>O <code><display-inside></code> O valor é definido usando uma palavra-chave da lista abaixo:</p> + +<dl> + <dt><code>flow</code> {{Experimental_Inline}}</dt> + <dd>O elemento expõe seu conteúdo usando o layout de fluxo (layout em bloco e em linha).<br> + Se o seu tipo de exibição externo for + <p><code>inline</code> ou <code>run-in</code>,</p> + + <p>e estiver participando de um contexto de formatação em bloco ou em linha, gera uma caixa em linha. Caso contrário, ele gera uma caixa de contêiner de bloco.</p> + + <p>Dependendo do valor de outras propriedades como</p> + + <p>{{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) e se ele próprio participa de um contexto de formatação em bloco ou embutido, ele estabelece um novo contexto de formatação de bloco (BFC) para seu conteúdo ou integra seu conteúdo ao contexto de formatação pai.</p> + </dd> + <dt><code>flow-root</code> {{Experimental_Inline}}</dt> + <dd>O elemento gera uma caixa de elemento de bloco que estabelece um novo contexto de formatação de bloco, definindo onde está a raiz da formatação.</dd> + <dt><code>table</code></dt> + <dd>Esses elementos se comportam como HTML{{HTMLElement("table")}} elementos. Ele define uma caixa no nível do bloco.</dd> + <dt><code>flex</code></dt> + <dd>O elemento se comporta como um elemento de bloco e expõe seu conteúdo de acordo com o modelo flexbox.</dd> + <dt><code>grid</code></dt> + <dd>O elemento se comporta como um elemento de bloco e expõe seu conteúdo de acordo com o modelo de grade.</dd> + <dt><code>ruby</code> {{Experimental_Inline}}</dt> + <dd>O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de formatação ruby. Ele se comporta como o HTML correspondente{{HTMLElement("ruby")}} elementos.</dd> +</dl> + +<div class="note"> +<p><strong>Nota: Navegadores que suportam a sintaxe de dois valores, encontrando apenas o valor interno, como quando</strong><code>display: flex</code> or <code>display: grid</code> especificado, definirá seu valor externo como <code>block</code>. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento a ser <code>display: grid</code>, você esperaria que a caixa criada no contêiner da grade fosse uma caixa no nível do bloco.</p> +</div> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Neste exemplo, a caixa pai foi fornecida <code>display: flow-root</code> e assim estabelece um novo BFC e contém o item flutuado.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="box"> + <div class="float">I am a floated box!</div> + <p>I am content inside the container.</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.box { + background-color: rgb(224, 206, 247); + border: 5px solid rebeccapurple; + display: flow-root; +} + +.float { + float: left; + width: 200px; + height: 150px; + background-color: white; + border:1px solid black; + padding: 10px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", "100%", 180)}}</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</p> + +<h3 id="Suporte_a_vários_valores_de_palavras-chave">Suporte a vários valores de palavras-chave</h3> + +<p>{{Compat("css.properties.display.multi-keyword_values", 10)}}</p> + +<h3 id="Suporte_de_fluxo-raiz">Suporte de fluxo-raiz</h3> + +<p>{{Compat("css.properties.display.flow-root", 10)}}</p> + +<h3 id="Suporte_de_tabela">Suporte de tabela</h3> + +<p>{{Compat("css.properties.display.table_values", 10)}}</p> + +<h3 id="Suporte_de_grade">Suporte de grade</h3> + +<p>{{Compat("css.properties.display.grid", 10)}}</p> + +<h3 id="Suporte_de_flex">Suporte de flex</h3> + +<p>{{Compat("css.properties.display.flex", 10)}}</p> + +<h3 id="Suporte_de_ruby">Suporte de ruby</h3> + +<p>{{Compat("css.properties.display.ruby_values", 10)}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("display")}} + <ul> + <li>{{CSSxRef("<display-outside>")}}</li> + <li>{{CSSxRef("<display-listitem>")}}</li> + <li>{{CSSxRef("<display-internal>")}}</li> + <li>{{CSSxRef("<display-box>")}}</li> + <li>{{CSSxRef("<display-legacy>")}}</li> + </ul> + </li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceitos básicos do Flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceitos básicos de layout de grade</a></li> +</ul> diff --git a/files/pt-br/web/css/display-internal/index.html b/files/pt-br/web/css/display-internal/index.html new file mode 100644 index 0000000000..edd5179e5f --- /dev/null +++ b/files/pt-br/web/css/display-internal/index.html @@ -0,0 +1,69 @@ +--- +title: <display-internal> +slug: Web/CSS/display-internal +translation_of: Web/CSS/display-internal +--- +<div>{{CSSRef}}</div> + +<p class="summary">Alguns modelos de layout, como <code>table</code> e <code>ruby</code> Alguns modelos de layout, como possuem uma estrutura interna complexa, com várias funções diferentes que seus filhos e descendentes podem preencher. Esta página define os valores de exibição "internos", que só têm significado nesse modo de layout específico.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Salvo indicação em contrário, o tipo de exibição interno e o tipo de exibição externo de elementos que usam esses valores de exibição são definidos para a palavra-chave fornecida.</p> + +<dl> + <dt><code>table-row-group</code></dt> + <dd>Esses elementos se comportam como{{HTMLElement("tbody")}} HTML elementos.</dd> + <dt><code>table-header-group</code></dt> + <dd>Esses elementos se comportam como{{HTMLElement("thead")}} HTML elementos.</dd> + <dt><code>table-footer-group</code></dt> + <dd>Esses elementos se comportam como {{HTMLElement("tfoot")}} HTML elementos.</dd> + <dt><code>table-row</code></dt> + <dd>Esses elementos se comportam como {{HTMLElement("tr")}} HTML elementos.</dd> + <dt><code>table-cell</code></dt> + <dd>Esses elementos se comportam como {{HTMLElement("td")}} HTML elementos.</dd> + <dt><code>table-column-group</code></dt> + <dd>Esses elementos se comportam como{{HTMLElement("colgroup")}} HTML elementos.</dd> + <dt><code>table-column</code></dt> + <dd>Esses elementos se comportam como {{HTMLElement("col")}} HTML elementos.</dd> + <dt><code>table-caption</code></dt> + <dd>Esses elementos se comportam como{{HTMLElement("caption")}} HTML elementos.</dd> + <dt><code>ruby-base</code> {{Experimental_Inline}}</dt> + <dd>Esses elementos se comportam como{{HTMLElement("rb")}} HTML elementos.</dd> + <dt><code>ruby-text</code> {{Experimental_Inline}}</dt> + <dd>Esses elementos se comportam como {{HTMLElement("rt")}} HTML elementos.</dd> + <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt> + <dd>Esses elementos se comportam como{{HTMLElement("rbc")}} HTML elementos gerado como caixas anônimas.</dd> + <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt> + <dd>Esses elementos se comportam como {{HTMLElement("rtc")}} HTML elementos.</dd> +</dl> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<h3 id="Suporte_de_valores_de_tabela">Suporte de valores de tabela</h3> + +<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code>, and <code>table-row-group</code></p> + +<p>{{Compat("css.properties.display.table_values", 10)}}</p> + +<h3 id="Suporte_de_valores_de_rubi">Suporte de valores de rubi</h3> + +<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code>, and <code>ruby-text-container</code></p> + +<p>{{Compat("css.properties.display.ruby_values", 10)}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("display")}} + <ul> + <li>{{CSSxRef("<display-outside>")}}</li> + <li>{{CSSxRef("<display-inside>")}}</li> + <li>{{CSSxRef("<display-listitem>")}}</li> + <li>{{CSSxRef("<display-box>")}}</li> + <li>{{CSSxRef("<display-legacy>")}}</li> + </ul> + </li> +</ul> diff --git a/files/pt-br/web/css/display-legacy/index.html b/files/pt-br/web/css/display-legacy/index.html new file mode 100644 index 0000000000..c4bf7e06c2 --- /dev/null +++ b/files/pt-br/web/css/display-legacy/index.html @@ -0,0 +1,102 @@ +--- +title: <display-legacy> +slug: Web/CSS/display-legacy +translation_of: Web/CSS/display-legacy +--- +<div>{{CSSRef}}</div> + +<p class="summary">O CSS 2 usou uma sintaxe de palavra-chave única para o <code>display</code> , exigindo palavras-chave separadas para variantes em nível de bloco e em linha do mesmo modo de layout. Esta página detalha esses valores.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<dl> + <dt><code>inline-block</code></dt> + <dd> + <p>O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído).</p> + + <p>É equivalente a <code style="font-size: 1rem; letter-spacing: -0.00278rem;">inline flow-root</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p> + </dd> + <dt><code>inline-table</code></dt> + <dd>O <code>inline-table</code> O valor não possui um mapeamento direto em HTML. Ele se comporta como um HTML{{HTMLElement("table")}} elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.<br> + <br> + É equivalente a <code>inline table</code>.</dd> + <dt><code>inline-flex</code></dt> + <dd>O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.<br> + <br> + É equivalente a <code>inline flex</code>.</dd> + <dt><code>inline-grid</code></dt> + <dd>O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.<br> + <br> + É equivalente a <code>inline grid</code>.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>No exemplo abaixo, estamos criando um contêiner flex inline com a palavra-chave herdada inline-flex.</p> + +<div id="Example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="container"> + <div>Flex Item</div> + <div>Flex Item</div> +</div> + +Not a flex item +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.container { + display: inline-flex; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 300, 150)}}</p> +</div> + +<p>Na nova sintaxe, o contêiner flex inline seria criado usando dois valores, inline para o tipo de exibição externo e flex para o tipo de exibição interno.</p> + +<pre class="brush: css">.container { + display: inline flex; +}</pre> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<h3 id="Suporte_deinline-block">Suporte de<code>inline-block</code></h3> + +<p>{{Compat("css.properties.display.inline-block", 10)}}</p> + +<h3 id="Suporte_deinline-table">Suporte de<code>inline-table</code></h3> + +<p>{{Compat("css.properties.display.inline-table", 10)}}</p> + +<h3 id="Suporte_deinline-flex">Suporte de<code>inline-flex</code></h3> + +<p>{{Compat("css.properties.display.inline-flex", 10)}}</p> + +<h3 id="Suporte_deinline-grid">Suporte de<code>inline-grid</code></h3> + +<p>{{Compat("css.properties.display.inline-grid", 10)}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("display")}} + <ul> + <li>{{CSSxRef("<display-outside>")}}</li> + <li>{{CSSxRef("<display-inside>")}}</li> + <li>{{CSSxRef("<display-listitem>")}}</li> + <li>{{CSSxRef("<display-internal>")}}</li> + <li>{{CSSxRef("<display-box>")}}</li> + </ul> + </li> +</ul> diff --git a/files/pt-br/web/css/display-listitem/index.html b/files/pt-br/web/css/display-listitem/index.html new file mode 100644 index 0000000000..6d45a8e82d --- /dev/null +++ b/files/pt-br/web/css/display-listitem/index.html @@ -0,0 +1,63 @@ +--- +title: <display-listitem> +slug: Web/CSS/display-listitem +translation_of: Web/CSS/display-listitem +--- +<div>{{CSSRef}}</div> + +<p class="summary">O <code style="white-space: nowrap;">list-item</code> palavra-chave faz com que o elemento gere um<code>::marker</code> pseudoelemento com o conteúdo especificado por sua {{CSSxRef("list-style")}} propriedades (por exemplo, um marcador) junto com uma caixa principal do tipo especificado para seu próprio conteúdo.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Um valor único de <code style="white-space: nowrap;">list-item</code> fará com que o elemento se comporte como um item da lista. Isso pode ser usado junto com{{CSSxRef("list-style-type")}} e {{CSSxRef("list-style-position")}}.</p> + +<p><code style="white-space: nowrap;">list-item</code> também pode ser combinado com qualquer {{CSSxRef("<display-outside>")}} palavra-chave e o <code>flow</code> ou <code style="white-space: nowrap;">flow-root</code> {{CSSxRef("<display-inside>")}} palavras-chave.</p> + +<div class="note"> +<p><strong>Nota: Nos navegadores que suportam a sintaxe de dois valores, se nenhum valor interno for especificado, o padrão será</strong><code>flow</code>. Se nenhum valor externo for especificado, a caixa principal terá um tipo de exibição externo de<code>block</code>.</p> +</div> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><div class="fake-list">I will display as a list item</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">.fake-list { + display: list-item; + list-style-position: inside; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", "100%", 150)}}</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<h3 id="Suporte_delist-item">Suporte de<code>list-item</code></h3> + +<p>{{Compat("css.properties.display.list-item", 10)}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("display")}} + <ul> + <li>{{CSSxRef("<display-outside>")}}</li> + <li>{{CSSxRef("<display-inside>")}}</li> + <li>{{CSSxRef("<display-internal>")}}</li> + <li>{{CSSxRef("<display-box>")}}</li> + <li>{{CSSxRef("<display-legacy>")}}</li> + </ul> + </li> +</ul> diff --git a/files/pt-br/web/css/display-outside/index.html b/files/pt-br/web/css/display-outside/index.html new file mode 100644 index 0000000000..84b0676bcd --- /dev/null +++ b/files/pt-br/web/css/display-outside/index.html @@ -0,0 +1,77 @@ +--- +title: <display-outside> +slug: Web/CSS/display-outside +translation_of: Web/CSS/display-outside +--- +<div>{{CSSRef}}</div> + +<p class="summary">O <code><display-outside></code> as palavras-chave especificam a parte externa do elemento {{CSSxRef("display")}} type, que é essencialmente seu papel no layout de fluxo. Essas palavras-chave são usadas como valores do <code>display</code> e pode ser usada para fins legados como uma única palavra-chave ou conforme definido na especificação do Nível 3, juntamente com um valor do {{CSSxRef("<display-inside>")}} palavras-chave.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>O <code><display-outside></code> O valor é definido usando uma palavra-chave da lista abaixo:</p> + +<h3 id="Valor">Valor</h3> + +<dl> + <dt><code>block</code></dt> + <dd>O elemento gera uma caixa de elemento de bloco, gerando quebras de linha antes e depois do elemento, quando no fluxo normal.</dd> + <dt><code>inline</code></dt> + <dd>O elemento gera uma ou mais caixas de elementos embutidos que não geram quebras de linha antes ou depois de si mesmas. No fluxo normal, o próximo elemento estará na mesma linha se houver espaço</dd> + <dt><code>run-in</code> {{Experimental_Inline}}</dt> + <dd>O elemento gera uma caixa de introdução. Se o irmão adjacente do elemento definido como<code>display: run-in</code> box é uma caixa de bloco, o <code>run-in</code> box se torna a primeira caixa embutida da caixa de bloco a seguir.</dd> + <dd>Os elementos de entrada funcionam como linhas ou blocos, dependendo dos elementos circundantes. Ou seja: Se a caixa de introdução contém uma caixa de bloco, o mesmo que bloco. Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco. Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.<br> + <br> + </dd> +</dl> + +<div class="note"> +<p><strong>Nota: Navegadores que suportam a sintaxe de dois valores, encontrando apenas o valor externo, como quando</strong><code>display: block</code> ou <code>display: inline</code> especificado, definirá o valor interno como<code>flow</code>. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento a ser bloco, seria de esperar que os filhos desse elemento participassem do layout de fluxo normal em bloco e em linha.</p> +</div> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}} +</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>No exemplo a seguir, os elementos de extensão (normalmente exibidos como elementos embutidos) são definidos como <code>display: block</code> e, assim, divida em novas linhas e expanda para preencher seu contêiner na dimensão embutida.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>span 1</span> +<span>span 2</span></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + display: block; + border: 1px solid rebeccapurple; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", 300, 60)}}</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("css.properties.display.display-outside", 10)}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("display")}} + <ul> + <li>{{CSSxRef("<display-inside>")}}</li> + <li>{{CSSxRef("<display-listitem>")}}</li> + <li>{{CSSxRef("<display-internal>")}}</li> + <li>{{CSSxRef("<display-box>")}}</li> + <li>{{CSSxRef("<display-legacy>")}}</li> + </ul> + </li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Layout de bloco e embutido no fluxo normal</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Contextos de formatação explicados</a></li> +</ul> diff --git a/files/pt-br/web/css/display/index.html b/files/pt-br/web/css/display/index.html new file mode 100644 index 0000000000..1b97bc92fe --- /dev/null +++ b/files/pt-br/web/css/display/index.html @@ -0,0 +1,355 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - Posicionamento CSS + - Propriedades CSS +translation_of: Web/CSS/display +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade CSS <code>display </code>especifica o tipo de caixa de renderização usada por um elemento. No HTML, os valores padrões da propriedade <code>display </code>são feitas a partir do comportamento descrito nas especificações HTML ou da folha de estilo padrão do navegador/usuário. O valor padrão em XML é inline.</p> + +<p><span style="line-height: 1.5;">Além dos muitos tipos diferentes de exibição de caixa, o valor </span><code style="font-size: 14px;">none </code><span style="line-height: 1.5;">permite desativar a exibição de um elemento; quando você usa </span><code style="font-size: 14px;">none</code><span style="line-height: 1.5;">, todos os elementos descendentes também tem a sua exibição desativada. O documento é renderizado como se o elemento não existisse na árvore do documento.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">S</a>intaxe formal: {{csssyntax("display")}} +</pre> + +<pre>display: none + +display: inline +display: block +display: list-item +display: inline-block +display: inline-table +display: table +display: table-cell +display: table-column +display: table-column-group +display: table-footer-group +display: table-header-group +display: table-row +display: table-row-group +display: flex +display: inline-flex +display: grid +display: inline-grid +display: run-in + +display: inherit +</pre> + +<h3 id="Valores">Valores</h3> + +<p><em><strong>display-value</strong></em></p> + +<dl> + <dd>É a palavra-chave para definir tipo de renderização que será usada no elemento. Os valores possiveis e seus significados são: + <table class="standard-table" style="width: 100%;"> + <thead> + <tr> + <td class="header" colspan="1">Value set</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="4">Valores Básicos (CSS 1)</td> + <td><code>none</code></td> + <td> + <p>Desabilita a exibição do elemento (sem afetar o layout); todos os elementos filhos também tem sua exibição desabilitada. O documento é renderizado como se o elemento não existisse.</p> + + <p>Para renderizar as dimensões de caixa do elemento, tendo ainda seu conteúdo "invisivel", veja a propriedade {{cssxref("visibility")}}.</p> + </td> + </tr> + <tr> + <td><code>inline</code></td> + <td>O elemento gera uma ou mais caixas de elementos inline.</td> + </tr> + <tr> + <td><code>block</code></td> + <td>O elemento gera uma caixa de elemento de bloco.</td> + </tr> + <tr> + <td><code>list-item</code></td> + <td>O elemento gera uma caixa de bloqueio para o conteúdo e uma caixa embutida de item de lista separada.</td> + </tr> + <tr> + <td>Valores estendidos(CSS 2.1)</td> + <td><code>inline-block</code></td> + <td>O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído)</td> + </tr> + <tr> + <td colspan="1" rowspan="10">Valores do modelo de tabela(CSS 2.1)</td> + <td><code>inline-table</code></td> + <td>O<code> inline-table </code>O valor não possui um mapeamento direto em HTML. Se comporta como um{{HTMLElement("table")}} HTML elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.</td> + </tr> + <tr> + <td><code>table</code></td> + <td>Comporta-se como o{{HTMLElement("table")}} HTML elemento. Ele define uma caixa no nível do bloco.</td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td>Comporta-se como o{{HTMLElement("caption")}} HTML elemento.</td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td>Comporta-se como o {{HTMLElement("td")}} HTML elemento</td> + </tr> + <tr> + <td><code>table-column</code></td> + <td>Esses elementos se comportam como o correspondente {{HTMLElement("col")}} HTML elementos.</td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td>Esses elementos se comportam como o correspondente{{HTMLElement("colgroup")}} HTML elementos.</td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td>Esses elementos se comportam como o correspondente {{HTMLElement("tfoot")}} HTML elementos</td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td>Esses elementos se comportam como o correspondente{{HTMLElement("thead")}} HTML elementos</td> + </tr> + <tr> + <td><code>table-row</code></td> + <td>Comporta-se como o {{HTMLElement("tr")}} HTML elemento</td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td>Esses elementos se comportam como o correspondente {{HTMLElement("tbody")}} HTML elementos</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Valores do modelo Flexbox (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> + <td><code>flex</code></td> + <td>O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo flexbox.</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td>O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Valores do modelo de caixa de grade (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td> + <td><code>grid</code></td> + <td> + <p>O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo de grade.</p> + + <div class="note">Como isso é experimental, a maioria dos navegadores não suporta. Preste atenção especialmente que <code>-moz-grid</code> não é a versão prefixada disso, mas um modelo de layout XUL que não deve ser usado em um site.</div> + </td> + </tr> + <tr> + <td><code>inline-grid</code></td> + <td>O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.</td> + </tr> + <tr> + <td>Valores experimentais {{experimental_inline}}</td> + <td><code>run-in</code></td> + <td> + <ul> + <li>Se a caixa de entrada contiver uma caixa de bloco, o mesmo que bloco.</li> + <li>Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco.</li> + <li>Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.</li> + </ul> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<p><a href="/samples/cssref/display.html">Ver exemplos ao vivo</a></p> + +<pre class="brush: css">p.secret { display: none } +<p style="display:none"> invisible text </p> +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#display', 'display')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Adicionado o <code>run-in</code> valor.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Grid', '#grid-declaration0', 'display')}}</td> + <td>{{Spec2('CSS3 Grid')}}</td> + <td>Adicionado os valores do modelo da caixa de grade.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Adicionado os valores do modelo de caixa flexível.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Foram adicionados os valores do modelo de tabela e <code>inline-block<em>.</em></code></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#display', 'display')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Valores básicos:<code>none</code>, <code>block</code>, <code>inline</code>, e <code>list-item</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadores compatíveis </h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td><code>none</code>, <code>inline</code> e <code>block</code></td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td>1.0</td> + <td>3.0 (1.9)</td> + <td>5.5 (-7.0)<br> + apenas elementos inline naturais</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>list-item</code></td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>6.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td> + <td>1.0<br> + Não antes dos elementos inline</td> + <td rowspan="2">{{CompatNo}}</td> + <td rowspan="2">8.0</td> + <td rowspan="2">7.0</td> + <td>1.0 (85)<br> + Não antes dos elementos inline</td> + </tr> + <tr> + <td> + <p>4.0</p> + + <p>Removido em 32</p> + </td> + <td>5.0 (532.5)</td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td>1.0</td> + <td>3.0 (1.9)</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-colgroup</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, and <code>table-caption</code></td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>flex</code></td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop("18.0")}}(behind a pref) [1]</td> + <td>{{CompatNo}}</td> + <td>12.50</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop("18.0")}}(behind a pref) [1]</td> + <td>{{CompatNo}}</td> + <td>12.50</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>grid</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10.0{{property_prefix("-ms")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>inline-grid</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10.0{{property_prefix("-ms")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Para ativar o suporte ao flexbox, no Firefox 18 e 19, o usuário precisa alterar a preferência about: config "layout.css.flexbox.enabled" para <code>true</code>. O flexbox de várias linhas é suportado desde Firefox 28.</p> + +<h2 id="Veja_mais">Veja mais</h2> + +<ul> + <li>{{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssxref("position")}}</li> +</ul> diff --git a/files/pt-br/web/css/element()/index.html b/files/pt-br/web/css/element()/index.html new file mode 100644 index 0000000000..f52f5eb6e7 --- /dev/null +++ b/files/pt-br/web/css/element()/index.html @@ -0,0 +1,101 @@ +--- +title: element +slug: Web/CSS/element() +tags: + - Background + - CSS + - CSS4-images + - Função CSS + - Layout + - Web +translation_of: Web/CSS/element() +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>A função <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>element()</code></strong> define uma {{cssxref("<image>")}} gerada de um elemento HTML qualquer. Essa imagem é <strong><em>dinamica</em></strong>, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.</p> + +<p>Um cenario particularmente util para usar esta função seria colocar uma imagem em um elemento {{HTMLElement("canvas")}}, e então usar-lo como um <em>background</em>.</p> + +<p>Em navegadores Gecko, você pode usar o metodo não padronizado {{domxref("document.mozSetImageElement()")}} para mudar o elemento sendo usado como <em>background</em> por um elemento de <em>background </em>selecionado por CSS.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate">element( <em>id</em> )</pre> + +<p>Onde:</p> + +<dl> + <dt><code>id</code></dt> + <dd>É o ID de um elemento para usar como background, especificado usando o atributo HTML #<em>id</em> no elemento.</dd> +</dl> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<p>Esses exemplos podem ser <a href="/samples/cssref/moz-element.html" title="https://developer.mozilla.org/samples/cssref/moz-element.html">vistos em tempo real</a> em versões do Firefox que suportam <code>-moz-element()</code>.</p> + +<h3 id="Um_exemplo_de_alguma_maneira_real">Um exemplo de alguma maneira real</h3> + +<p>Esse exemplo usa uma {{HTMLElement("div")}} escondida como <em>background</em>. O elemento de <em>background</em> tem um gradiente, mas tambem um texto que é usado como parte do <em>background</em>.</p> + +<pre class="notranslate"><code><div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;"> + <p>This box uses the element with the #myBackground1 ID as its background!</p> +</div> + +<div style="overflow:hidden; height:0;"> + <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> + <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p> + </div> +</div></code></pre> + +<p>A {{HTMLElement("div")}} com ID "myBackground1" é usada como <em>background</em>, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".</p> + +<p><img alt="example1.png" class="default internal" src="/@api/deki/files/4624/=example1.png"></p> + +<h3 id="Um_exemplo_ainda_mais_bizarro">Um exemplo ainda mais bizarro</h3> + +<p>Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como <em>background</em>. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.</p> + +<pre class="brush: html notranslate"><div style="width:400px; height:100px; background:-moz-element(#myBackground2);"> +</div> + +<div style="overflow:hidden; height:0;"> + <button id="myBackground2" type="button">Evil button!</button> +</div> +</pre> + +<p><img alt="example2.png" class="default internal" src="/@api/deki/files/4625/=example2.png"></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificação</th> + <th>Estatus</th> + <th>Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Actualmente adiado para o CSS4.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2> + +<p> </p> + + + +<p>{{Compat("css.types.image.element")}}</p> + +<p> </p> + +<h2 id="See_also" name="See_also">Veja tambem</h2> + +<ul> + <li>{{domxref("document.mozSetImageElement()")}}</li> +</ul> diff --git a/files/pt-br/web/css/elemento_substituido/index.html b/files/pt-br/web/css/elemento_substituido/index.html new file mode 100644 index 0000000000..22ba1b8ad0 --- /dev/null +++ b/files/pt-br/web/css/elemento_substituido/index.html @@ -0,0 +1,40 @@ +--- +title: Elemento substituído +slug: Web/CSS/Elemento_substituido +translation_of: Web/CSS/Replaced_element +--- +<div>{{CSSRef()}}</div> + +<h2 id="Sumario">Sumario</h2> + +<p>In CSS, a <strong>replaced element</strong> is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are:</p> + +<ul> + <li>{{HTMLElement("iframe")}}</li> + <li>{{HTMLElement("video")}}</li> + <li>{{HTMLElement("embed")}}</li> + <li>{{HTMLElement("img")}}</li> +</ul> + +<p>Some elements are treated as replaced elements only in specific cases:</p> + +<ul> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("canvas")}}</li> + <li>{{HTMLElement("object")}}</li> + <li>{{HTMLElement("applet")}}</li> +</ul> + +<p>The only form control that is also a replaced element is {{HTMLElement("input")}} of the image type. All other form controls are non-replaced elements.</p> + +<p>Objects inserted using the CSS {{cssxref("content")}} properties are <em>anonymous replaced elements</em>.</p> + +<p>CSS handles replaced elements specifically in some cases, like when calculating margins and some <code>auto</code> values.</p> + +<p>Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSS_key_concepts()}}</li> +</ul> diff --git a/files/pt-br/web/css/env()/index.html b/files/pt-br/web/css/env()/index.html new file mode 100644 index 0000000000..113a0b2f84 --- /dev/null +++ b/files/pt-br/web/css/env()/index.html @@ -0,0 +1,134 @@ +--- +title: env() +slug: Web/CSS/env() +tags: + - CSS + - CSS Function + - CSS Variables + - Draft + - Reference + - Variables + - env + - env() +translation_of: Web/CSS/env() +--- +<div>{{CSSRef}}</div> + +<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>env()</code></strong> pode ser usada para inserir o valor de uma variável de ambiente definida pelo agente do usuário em seu CSS, de uma maneira semelhante à função {{cssxref("var")}} e <a href="/pt-BR/docs/Web/CSS/--*">propriedades personalizadas</a>. A diferença é que, além de serem definidas pelo agente do usuário em vez de serem definidas pelo usuário, as variáveis de ambiente têm escopo global para um documento, enquanto as propriedades personalizadas têm um escopo para o(s) elemento(s) no(s) qual(is) é/são declarado(s).</p> + +<pre class="brush: css notranslate">body { + padding: + env(safe-area-inset-top, 20px) + env(safe-area-inset-right, 20px) + env(safe-area-inset-bottom, 20px) + env(safe-area-inset-left, 20px); +}</pre> + +<p>Além disso, ao contrário das propriedades personalizadas, que não podem ser usadas fora do escopo das declarações, a função <code>env()</code> pode ser usada em qualquer parte do valor de uma propriedade ou em qualquer parte de um <em>descriptor</em> (por exemplo, regras <a href="/pt-BR/docs/Web/CSS/@media">Media</a>). À medida que a especificação evolui, essa também pode ser usada em outros lugares, como em seletores.</p> + +<p>Originalmente fornecido pelo navegador iOS para permitir que os desenvolvedores coloquem seu conteúdo em uma <em>safe area</em> (área segura) na janela de visualização, os valores de <code>safe-area-inset-*</code> definidos na especificação podem ser usados para ajudar a garantir que o conteúdo seja visível até mesmo para usuários que usam uma tela não retangular.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css notranslate">/* Usando os quatro valores de inserção <em>safe area</em> sem valores de <em>fallback </em>*/ +env(safe-area-inset-top); +env(safe-area-inset-right); +env(safe-area-inset-bottom); +env(safe-area-inset-left); + +/* Usando-os com valores de <em>fallback</em> */ +env(safe-area-inset-top, 20px); +env(safe-area-inset-right, 1em); +env(safe-area-inset-bottom, 0.5vh); +env(safe-area-inset-left, 1.4rem); +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code id="safe-area-inset-top" style="white-space: nowrap;">safe-area-inset-top</code>, <code id="safe-area-inset-right" style="white-space: nowrap;">safe-area-inset-right</code>, <code id="safe-area-inset-bottom" style="white-space: nowrap;">safe-area-inset-bottom</code>, <code id="safe-area-inset-left" style="white-space: nowrap;">safe-area-inset-left</code></dt> + <dd>As variáveis <code>safe-area-inset-*</code> são quatro variáveis de ambiente que definem um retângulo por seus valores de inserção: <em>top, right, bottom</em> e <em>left </em>a partir da borda da janela de visualização, no qual é seguro colocar o conteúdo sem o risco de ser cortado pela forma de um visor não retangular. Para janelas de visualização retangulares, como o monitor de um laptop comum, seu valor é igual a zero. Para telas não retangulares - como um visor de um relógio redondo - os quatro valores definidos pelo agente do usuário formam um retângulo de modo que todo o conteúdo dentro do retângulo seja visível.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Ao contrário de outras propriedades CSS, os nomes de propriedades definidos pelo agente do usuário fazem distinção entre maiúsculas e minúsculas.</p> +</div> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox notranslate">{{cssSyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O exemplo abaixo faz uso do segundo parâmetro opcional de <code>env()</code>, que permite fornecer um valor de <em>fallback </em>caso a variável de ambiente não esteja disponível.</p> + +<pre class="brush: html notranslate"><p> + Se a função <code>env()</code> é suportada em seu navegador, + o texto deste parágrafo deverá estar na borda <i>top</i>, <i>right</i> e <i>bottom</i>, + ter 50px de preenchimento entre a borda e o texto. O CSS é equivalente + ao preenchimento: <code>padding: 0 0 0 50px</code>, + porque, ao contrário de outras propriedades CSS, os nomes de + propriedades do agente do usuário diferenciam letras maiúsculas de + minúsculas. +</p></pre> + +<pre class="brush: css notranslate">p { + width: 300px; + border: 2px solid red; + padding: + env(safe-area-inset-top, 50px) + env(safe-area-inset-right, 50px) + env(safe-area-inset-bottom, 50px) + env(SAFE-AREA-INSET-LEFT, 50px); +}</pre> + +<p>{{EmbedLiveSample("Exemplos")}}</p> + +<h3 id="Exemplo_com_valores">Exemplo com valores</h3> + +<pre class="brush: css notranslate">padding: env(safe-area-inset-bottom, 50px); /* zero para todos agentes do usuário que são retangulares*/ +padding: env(Safe-area-inset-bottom, 50px); /* 50px porque as propriedades do agente do usuário diferenciam maiúsculas de minúsculas */ +padding: env(x, 50px 20px); /* como se estivesse preenchendo: '50px 20px' que foram definidos, porque x não é uma variável de ambiente válida */ +padding: env(x, 50px, 20px); /* ignorado '50px, 20px' porque não é um valor de preenchimento válido e x não é uma variável de ambiente válida */ +</pre> + +<p>A sintaxe <em>fallback</em>, como de propriedades customizadas, permite vírgulas. Mas se o valor da propriedade não suportar vírgulas, o valor não é válido.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: As propriedades do agente do usuário não são redefinidas pela propriedade <a href="/en-US/docs/Web/CSS/all">all</a>.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}</td> + <td>{{Spec2("CSS3 Environment Variables")}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + + + +<p>{{Compat("css.properties.custom-property.env")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("var", "var(…)")}}</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Variables">CSS Custom Properties for Cascading Variables</a></li> + <li><a href="/en-US/docs/Web/CSS/--*">Custom Properties (--*)</a></li> + <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Using CSS custom properties (variables)</a></li> + <li>{{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}}</li> +</ul> diff --git a/files/pt-br/web/css/filter-function/grayscale()/index.html b/files/pt-br/web/css/filter-function/grayscale()/index.html new file mode 100644 index 0000000000..b495a0dbbf --- /dev/null +++ b/files/pt-br/web/css/filter-function/grayscale()/index.html @@ -0,0 +1,39 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale() +tags: + - CSS + - Efeito filtro + - Filtros + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/grayscale() +--- +<div>{{cssref}}</div> + +<p>O <code><strong>grayscale()</strong></code> é uma função do <a href="/en-US/docs/Web/CSS">CSS</a> que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". {{cssxref("<filter-function>")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">grayscale(<em>quantidade</em>)</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">quantidade</span></font></dt> + <dd>A quantia da conversão é especificada em {{cssxref ("<number>")}} (número) ou {{cssxref ("<percentage>")}} (porcentagem). Um valor de <code>100%</code> indica que a cor está compeltamente dentro da escala de cinza. Um valor de <code>0%</code> não altera as cores da imagem, que permanecerá igual a original. Valores entre <code>0%</code> e <code>100%</code> são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.</dd> +</dl> + +<pre class="brush: css">grayscale(0) /* Não afeta a imagem */ +grayscale(.7) /* .7 => 70% de branco&preto */ +grayscale(100%) /* Completamente em branco&preto */</pre> + +<h2 id="Veja_também">Veja também </h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> diff --git a/files/pt-br/web/css/filter-function/index.html b/files/pt-br/web/css/filter-function/index.html new file mode 100644 index 0000000000..e07f2f87a1 --- /dev/null +++ b/files/pt-br/web/css/filter-function/index.html @@ -0,0 +1,68 @@ +--- +title: <filter-function> +slug: Web/CSS/filter-function +tags: + - CSS + - CSS Data Type + - Filter Effects + - NeedsCompatTable + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/filter-function +--- +<div>{{cssref}}</div> + +<p>The <code><strong><filter-function></strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a graphical effect that can change the appearance of an input image. It is used in the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code><filter-function></code> data type is specified using one of the filter functions listed below. Each function requires an argument which, if invalid, results in no filter being applied.</p> + +<dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur">blur()</a></code></dt> + <dd>Blurs the image.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness">brightness()</a></code></dt> + <dd>Makes the image brighter or darker.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast">contrast()</a></code></dt> + <dd>Increases or decreases the image's contrast.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow">drop-shadow()</a></code></dt> + <dd>Applies a drop shadow behind the image.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale">grayscale()</a></code></dt> + <dd>Converts the image to grayscale.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate">hue-rotate()</a></code></dt> + <dd>Changes the overall hue of the image.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert">invert()</a></code></dt> + <dd>Inverts the colors of the image.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity">opacity()</a></code></dt> + <dd>Makes the image transparent.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate">saturate()</a></code></dt> + <dd>Super-saturates or desaturates the input image.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia">sepia()</a></code></dt> + <dd>Converts the image to sepia.</dd> +</dl> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Properties that use this data type: {{cssxref("filter")}} and {{cssxref("backdrop-filter")}}</li> +</ul> diff --git a/files/pt-br/web/css/filter-function/opacity()/index.html b/files/pt-br/web/css/filter-function/opacity()/index.html new file mode 100644 index 0000000000..8e41945429 --- /dev/null +++ b/files/pt-br/web/css/filter-function/opacity()/index.html @@ -0,0 +1,40 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity() +tags: + - Efeitos de Filtro + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/opacity() +--- +<div>{{cssref}}</div> + +<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>opacity()</code></strong> aplica transparência às amostras na imagem inputada. Seu resultado é uma {{cssxref("<filter-function>")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> Essa função é similar à propriedade {{Cssxref("opacity")}} mais estabelecida. A diferença é que com filtros, alguns browsers fornecem aceleração de hardware para uma melhor performance.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">opacity(<em>amount</em>)</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>amount</code></dt> + <dd>A quantidade de conversão, especificada com um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de <code>0%</code> é completamente transparente, enquanto que um valor de <code>100%</code> mantém o input inalterado. Valores entre <code>0%</code> e <code>100%</code> são multiplicadores lineares do efeito. O valor de lacuna para interpolação é <code>1</code>.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css notranslate">opacity(0%) /* Completamente transparente */ +opacity(50%) /* 50% transparente */ +opacity(1) /* Nenhum efeito */</pre> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> + <li>Propriedade CSS {{cssxref("opacity")}}</li> +</ul> diff --git a/files/pt-br/web/css/filter-function/sepia()/index.html b/files/pt-br/web/css/filter-function/sepia()/index.html new file mode 100644 index 0000000000..0ad03c1c1f --- /dev/null +++ b/files/pt-br/web/css/filter-function/sepia()/index.html @@ -0,0 +1,35 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia() +tags: + - Efeitos de Filtro + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/sepia() +--- +<div>{{cssref}}</div> + +<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>sepia()</code></strong> converte a imagem inputada em sépia, dando uma aparência mais amarelada/marrom e quente. Seu resultado é uma {{cssxref("<filter-function>")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">sepia(<em>amount</em>)</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>amount</code></dt> + <dd>A quantidade de conversão, especificada por um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de <code>100%</code> é completamente sépia, enquanto que um valor de <code>0%</code> mantém o input inalterado. Valores entre <code>0%</code> e <code>100%</code> são multiplicadores lineares do efeito. O valor de lacuna para interpolação é <code>0</code>.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css notranslate">sepia(0) /* Sem efeito */ +sepia(.65) /* 65% sépia */ +sepia(100%) /* Completamente sépia */</pre> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> diff --git a/files/pt-br/web/css/flex-direction/index.html b/files/pt-br/web/css/flex-direction/index.html new file mode 100644 index 0000000000..53dabec16b --- /dev/null +++ b/files/pt-br/web/css/flex-direction/index.html @@ -0,0 +1,153 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - CSS Flexbox + - Documentação + - Propriedade CSS +translation_of: Web/CSS/flex-direction +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-direction</code></strong> define como os itens flexíveis são colocados no contêiner flexível, definindo o eixo principal e a direção (normal ou invertido).</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> + + + +<p>Observer que os valores <code>row</code> e <code>row-reverse</code> são afetados pela direcionalidade do contêiner flexível. Se seu atributo {{HTMLAttrxRef("dir")}} for <strong><code>ltr</code></strong>, <strong><code>row</code></strong> representa o eixo horizontal orientado da esquerda para a direita, e <code>row-reverse</code> está orientado da direita para esquerda; Se seu atributo <strong><code>rtl</code></strong>, <strong><code>row</code> </strong> representa o eixo orientado da direita para a esquerda e <code>row-reverse</code> da esquerda para a direita.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* The direction text is laid out in a line */ +flex-direction: row; + +/* Like <row>, but reversed */ +flex-direction: row-reverse; + +/* The direction in which lines of text are stacked */ +flex-direction: column; + +/* Like <column>, but reversed */ +flex-direction: column-reverse; + +/* Global values */ +flex-direction: inherit; +flex-direction: initial; +flex-direction: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Os seguintes valores são aceitos:</p> + +<dl> + <dt><code>row</code></dt> + <dd>O eixo principal do flex container é definido para ser o mesmo que a direção do texto. Os <strong>pontos de</strong> <strong>início </strong>e <strong>término </strong>principais são iguais à direção do conteúdo.</dd> + <dt><code>row-reverse</code></dt> + <dd>Se comporta da mesma forma que <code>row</code> porém os <strong>pontos de inicio</strong> e <strong>término </strong> seram invertidos (permutados).</dd> + <dt><code>column</code></dt> + <dd>O eixo principal do flex container é igual ao eixo do bloco. Os <strong>pontos de início</strong> e <strong>término </strong>principais são iguais aos pontos de antes e depois do modo de escrita.</dd> + <dt><code>column-reverse</code></dt> + <dd>Se comporta da mesma forma que <code>column</code> porém os <strong>pontos de</strong> <strong>inicio </strong>e <strong>término </strong> seram invertidos (permutados).</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><h4>This is a Column-Reverse</h4> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> +</div> +<h4>This is a Row-Reverse</h4> +<div id="content1"> + <div class="box1" style="background-color:red;">A</div> + <div class="box1" style="background-color:lightblue;">B</div> + <div class="box1" style="background-color:yellow;">C</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#content { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: flex; + flex-direction: column-reverse; +} + +.box { + width: 50px; + height: 50px; +} + +#content1 { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: flex; + flex-direction: row-reverse; +} + +.box1 { + width: 50px; + height: 50px; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction')}}</p> + +<h2 id="Accessibility_Concerns">Accessibility Concerns</h2> + +<p>Usar a propriedade <code>flex-direction</code> com o valores de <code>row-reverse</code> or <code>column-reverse</code> vai criar uma desconexão entre a apresentação visual do conteúdo e a ordem do DOM. Isso afetará adversamente os usuários com problemas de visão navegando com o auxílio de tecnologia assistiva, como um leitor de tela. Se a oredem visual (CSS) for importante, os usuários de leitores de tela não terão acesso à ordem de leitura correta.</p> + +<ul> + <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.flex-direction")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> +</ul> diff --git a/files/pt-br/web/css/flex-flow/index.html b/files/pt-br/web/css/flex-flow/index.html new file mode 100644 index 0000000000..db281a2699 --- /dev/null +++ b/files/pt-br/web/css/flex-flow/index.html @@ -0,0 +1,89 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - flex-box +translation_of: Web/CSS/flex-flow +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-flow</code></strong> é uma <a href="/en-US/docs/Web/CSS/Shorthand_properties">junção</a> das propriedades {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers">/* flex-flow: <'flex-direction'> */ +flex-flow: row; +flex-flow: row-reverse; +flex-flow: column; +flex-flow: column-reverse; + +/* flex-flow: <'flex-wrap'> */ +flex-flow: nowrap; +flex-flow: wrap; +flex-flow: wrap-reverse; + +/* flex-flow: <'flex-direction'> and <'flex-wrap'> */ +flex-flow: row nowrap; +flex-flow: column wrap; +flex-flow: column-reverse wrap-reverse; + +/* Global values */ +flex-flow: inherit; +flex-flow: initial; +flex-flow: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Consulte {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}} para ver os detalhes sobre os valores.</p> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css;highlight:3">elemento { + /* O eixo principal é a direção do bloco com main-start e main-end invertidos. + * Os itens flex estão dispostos em múltiplas linhas */ + flex-flow: column-reverse wrap; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("css.properties.flex-flow")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Guia de Flexbox CSS: <em><a href="/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox">Conceitos básicos de flexbox</a></em></li> + <li>Guia de Flexbox CSS: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenando itens flex</a></em></li> +</ul> diff --git a/files/pt-br/web/css/flex-wrap/index.html b/files/pt-br/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..a73e5626eb --- /dev/null +++ b/files/pt-br/web/css/flex-wrap/index.html @@ -0,0 +1,162 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS Flex Box + - Propriedades CSS + - Referencia +translation_of: Web/CSS/flex-wrap +--- +<div>{{ CSSRef}}</div> + +<p>A propriedade <a href="/en-US/docs/CSS">CSS</a> <strong><code>flex-wrap</code></strong> define se os itens flexíveis são forçados a ficarem na mesma linha ou se podem ser quebradas em varias linhas. Se o argumento for valido, ele define a direção em que as linhas são empilhadas.</p> + +<p>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</p> + + + +<p>Veja <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> para mais propriedades e informação.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap; /* Default value */ +flex-wrap: wrap; +flex-wrap: wrap-reverse; + +/* Global values */ +flex-wrap: inherit; +flex-wrap: initial; +flex-wrap: unset; +</pre> + +<p>A propriedade <code>flex-wrap</code> é especificada como uma unica palavra-chave escolhida na lista de valores abaixo.</p> + +<h3 id="Valores">Valores</h3> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Os seguintes valores são aceitos</span></span> :</p> + +<dl> + <dt><code>nowrap</code></dt> + <dd>Os itens flexíveis são agrupados em uma unica linha, o que pode fazer com que o flex container transborde. <span class="tlid-translation translation" lang="pt"><span title="">O</span></span> <strong>cross-start</strong> <span class="tlid-translation translation" lang="pt"><span title=""> é equivalente ao <strong>início </strong>ou <strong>antes</strong>, dependendo do valor da </span></span> {{cssxref("flex-direction")}}. Este é o valor padrão.</dd> + <dt><code>wrap</code></dt> + <dd>Os itens flexíveis são quebrados em multiplas linhas. O <strong>cross-start </strong> <span class="tlid-translation translation" lang="pt"><span title="">é equivalente a iniciar ou antes</span></span> dependendo do valor do <code>flex-direction</code> e <strong>cross-end</strong> é o oposto do especificado <strong>cross-start</strong>.</dd> + <dt><code>wrap-reverse</code></dt> + <dd>Se comporta da mesma maneira que o <code>wrap</code> mas a de linha<span> ocorre na direção contrária, ou seja, para a linha acima.</span></dd> +</dl> + +<h2 id="Formal_definição">Formal definição</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Definindo_valores_em_um_flex_container_wrap">Definindo valores em um flex container wrap</h3> + +<h4 id="HTML">HTML</h4> + +<div id="Live_Sample"> +<pre class="brush: html notranslate"><h4>This is an example for flex-wrap:wrap </h4> +<div class="content"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +<h4>This is an example for flex-wrap:nowrap </h4> +<div class="content1"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +<h4>This is an example for flex-wrap:wrap-reverse </h4> +<div class="content2"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">/* Common Styles */ +.content, +.content1, +.content2 { + color: #fff; + font: 100 24px/100px sans-serif; + height: 150px; + text-align: center; +} + +.content div, +.content1 div, +.content2 div { + height: 50%; + width: 300px; +} +.red { + background: orangered; +} +.green { + background: yellowgreen; +} +.blue { + background: steelblue; +} + +/* Flexbox Styles */ +.content { + display: flex; + flex-wrap: wrap; +} +.content1 { + display: flex; + flex-wrap: nowrap; +} +.content2 { + display: flex; + flex-wrap: wrap-reverse; +} + +</pre> +</div> + +<h4 id="Resultados">Resultados</h4> + +<p>{{ EmbedLiveSample('Setting_flex_container_wrap_values', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificação</th> + <th>Status</th> + <th>Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + + + +<p>{{Compat("css.properties.flex-wrap")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Guia CSS Flexbox: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>Guia CSS Flexbox: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li> +</ul> diff --git a/files/pt-br/web/css/flex/index.html b/files/pt-br/web/css/flex/index.html new file mode 100644 index 0000000000..f7c7c55fc7 --- /dev/null +++ b/files/pt-br/web/css/flex/index.html @@ -0,0 +1,267 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +<div>{{CSSRef}}</div> + +<p>A propriedade flex do CSS, define como um ítem será posicionado para no espaço disponível dentro de seu container.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div> + + + +<h2 id="Propriedades">Propriedades</h2> + +<p>Esta propriedade é uma abreviação das seguintes propriedades CSS:</p> + +<ul> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<div id="flex"> +<pre class="hidden brush: html notranslate"><div class="flex-container"> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item auto">auto</div> +</div> + +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item initial">initial</div> + <div class="item initial">initial</div> +</div> + +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item none">none</div> +</div> + +<div class="flex-container"> + <div class="item initial">initial</div> + <div class="item none">none</div> + <div class="item none">none</div> +</div> + +<div class="flex-container"> + <div class="item four">4</div> + <div class="item two">2</div> + <div class="item one">1</div> +</div> +</pre> + +<pre class="hidden brush: css notranslate">* { + box-sizing: border-box; +} + +.flex-container { + background-color: #F4F7F8; + resize: horizontal; + overflow: hidden; + display: flex; + margin: 1em; +} + +.item { + margin: 1em; + padding: 0.5em; + width: 110px; + min-width: 0; + background-color: #1B5385; + color: white; + font-family: monospace; + font-size: 13px; +} + +.initial { + flex: initial; +} + +.auto { + flex: auto; +} + +.none { + flex: none; +} + +.four { + flex: 4; +} + +.two { + flex: 2; +} + +.one { + flex: 1; +} +</pre> + +<p>{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}</p> + +<p>By default flex items don't shrink below their minimum content size. To change this, set the item's {{cssxref("min-width")}} or {{cssxref("min-height")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Propriedades principais */ +flex: auto; +flex: initial; +flex: none; + +/* Valor único, sem unidade: flex-grow */ +flex: 2; + +/* Valor único, unidade width/height: flex-basis */ +flex: 10em; +flex: 30%; +flex: min-content; + +/* Dois valores: flex-grow | flex-basis */ +flex: 1 30px; + +/* Dois valores: flex-grow | flex-shrink */ +flex: 2 2; + +/* Três valores: flex-grow | flex-shrink | flex-basis */ +flex: 2 2 10%; + +/* Valores globais */ +flex: inherit; +flex: initial; +flex: unset; +</pre> + +<p>The <code>flex</code> property may be specified using one, two, or three values.</p> + +<ul> + <li><strong>One-value syntax</strong>: the value must be one of: + + <ul> + <li>a <code><number></code>: In this case it is interpreted as <code>flex: <number> 1 0</code>; the <code><a href="#<'flex-shrink'>"><flex-shrink></a></code> value is assumed to be 1 and the <code><a href="#<'flex-basis'>"><flex-basis></a></code> value is assumed to be <code>0</code>.</li> + <li>one of the keywords: <code><a href="#none">none</a></code>, <code><a href="#auto">auto</a></code>, or <code>initial</code>.</li> + </ul> + </li> + <li><strong>Two-value syntax</strong>: the first value must be a {{cssxref("<number>")}} and it is interpreted as <code><a href="#<'flex-grow'>"><flex-grow></a></code>. The second value must be one of: + <ul> + <li>a {{cssxref("<number>")}}: then it is interpreted as <code><a href="#<'flex-shrink'>"><flex-shrink></a></code>.</li> + <li>a valid value for {{cssxref("width")}}: then it is interpreted as <code><a href="#<'flex-basis'>"><flex-basis></a></code>.</li> + </ul> + </li> + <li><strong>Three-value syntax:</strong> the values must be in the following order: + <ol> + <li>a {{cssxref("<number>")}} for <code><a href="#<'flex-grow'>"><flex-grow></a></code>.</li> + <li>a {{cssxref("<number>")}} for <code><a href="#<'flex-grow'>"><flex-shrink></a></code>.</li> + <li>a valid value for {{cssxref("width")}} for <code><a href="#<'flex-basis'>"><flex-basis></a></code>.</li> + </ol> + </li> +</ul> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><code>initial</code></dt> + <dd>The item is sized according to its <code>width</code> and <code>height</code> properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "<code>flex: 0 1 auto</code>".</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>The item is sized according to its <code>width</code> and <code>height</code> properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "<code>flex: 1 1 auto</code>".</dd> + <dt><a id="none" name="none"><code>none</code></a></dt> + <dd>The item is sized according to its <code>width</code> and <code>height</code> properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "<code>flex: 0 0 auto</code>".</dd> + <dt><a id="<'flex-grow'>" name="<'flex-grow'>"><code><'flex-grow'></code></a></dt> + <dd>Defines the {{cssxref("flex-grow")}} of the flex item. Negative values are considered invalid. Defaults to <code>1</code> when omitted.</dd> + <dt><a id="<'flex-shrink'>" name="<'flex-shrink'>"><code id="<'flex-shrink'>"><'flex-shrink'></code></a></dt> + <dd>Defines the {{cssxref("flex-shrink")}} of the flex item. Negative values are considered invalid. Defaults to <code>1</code> when omitted.</dd> + <dt><a id="<'flex-basis'>" name="<'flex-basis'>"><code id="<'flex-basis'>"><'flex-basis'></code></a></dt> + <dd>Defines the {{cssxref("flex-basis")}} of the flex item. A preferred size of <code>0</code> must have a unit to avoid being interpreted as a flexibility. Defaults to <code>0</code> when omitted.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: css notranslate">#flex-container { + display: flex; + flex-direction: row; +} + +#flex-container > .flex-item { + flex: auto; +} + +#flex-container > .raw-item { + width: 5rem; +} +</pre> + +<pre class="brush: html notranslate"><div id="flex-container"> + <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> + <div class="raw-item" id="raw">Raw box</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: js notranslate">var flex = document.getElementById("flex"); +var raw = document.getElementById("raw"); +flex.addEventListener("click", function() { + raw.style.display = raw.style.display == "none" ? "block" : "none"; +}); +</pre> + +<pre class="brush: css notranslate">#flex-container { + width: 100%; + font-family: Consolas, Arial, sans-serif; +} + +#flex-container > div { + border: 1px solid #f00; + padding: 1rem; +} + +#flex-container > .raw-item { + border: 1px solid #000; +} +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example','100%','60')}}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.flex")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> +</ul> diff --git a/files/pt-br/web/css/float/index.html b/files/pt-br/web/css/float/index.html new file mode 100644 index 0000000000..e75e2c4c06 --- /dev/null +++ b/files/pt-br/web/css/float/index.html @@ -0,0 +1,290 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS +translation_of: Web/CSS/float +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade <strong>float</strong> do CSS determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu containêr, onde textos e elementos em linha irão se posicionar ao seu redor.</p> + +<p>Um elemento flutuante é um tipo de elemento cujo valor de <code>float </code>é diferente de <code>none.</code></p> + +<p>{{cssinfo}}</p> + +<p>Como <code>float</code> implica o uso the <em>block layout, </em>ele modifica o valor computado de {{cssxref("display")}} em alguns casos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Valor Especificado</th> + <th scope="col">Valor Computado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>inline</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td><code>table</code></td> + </tr> + <tr> + <td><code>table-row</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>flex</code></td> + <td><code>flex</code>, porém <code>float</code> não produz efeito em tais elementos</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td><code>inline-flex</code>, porém <code>float</code> não produz efeito em tais elementos</td> + </tr> + <tr> + <td><em>other</em></td> + <td><em>unchanged</em></td> + </tr> + </tbody> +</table> + +<div class="note"><strong>Nota</strong>: Se você está se referindo a essa propriedade do Javascript como um membro do objeto {{domxref("element.style")}}, você deve referir-se a <code>cssFloat. </code>Observe também que as versões 8 e posteriores referem-se a <code>styleFloat. </code>Esta é uma exceção à regra de que o nome do membro DOM é o nome em estilo <em>camel-case </em>do nome CSS separado por traço (e se deve ao fato de que "float" é uma palavra reservada em Javascript, tal qual a necessidade de especificar "class" como "className" e "for" como "htmlFor").</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">float: left; +float: right; +float: none; +float: inline-start; +float: inline-end; + +/* Global values */ +float: inherit; +float: initial; +float: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>left</code></dt> + <dd>É uma palavra-chave que indica que o elemento deve flutuar à esquerda do bloco.</dd> + <dt><code>right</code></dt> + <dd>É uma palavra-chave que indica que o elemento deve flutuar à direita do bloco.</dd> + <dt><code>none</code></dt> + <dd>É uma palavra-chave que indica que o elemtno não deve flutuar.</dd> + <dt><code>inline-start</code> {{experimental_inline}}</dt> + <dd>É uma palavra-chave que indica que o elemento deve flutuar no lado inicial do seu bloco, ou seja, o lado esquerdo em scripts <code>ltr</code> e no direito em scripts <code>rtl</code>.</dd> + <dt><code>inline-end</code> {{experimental_inline}}</dt> + <dd>É uma palavra-chave que indica que o elemento deve flutuar no lado final do seu bloco, ou seja, o lado direito em scripts <code>ltr</code> e no esquerdo em scripts <code>rtl</code>.</dd> +</dl> + +<h3 id="Sintaxe_Formal">Sintaxe Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><style type="text/css"> + div { border: solid red; max-width: 70ex; } + h4 { float: left; margin: 0; } +</style> + +<div> + <h4>HELLO!</h4> + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. +</div></pre> + +<p>{{ EmbedLiveSample('Exemplos', '', '', '', 'Web/CSS/float') }}</p> + +<div style="border: solid red; max-width: 70ex;"> +<h4 id="HELLO!" style="float: left; margin: 0;">HELLO!</h4> +This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> + +<h3 id="sect1"> </h3> + +<h3 id="Como_floats_são_posicionados">Como <code>floats</code> são posicionados</h3> + +<p>Como mencionado acima, quando um elemento é flutuado ele é retirado do seu fluxo normal no documento. Ele é reposicionado à esquerda ou à direita até tocar a borda do seu próprio <em>box </em>ou outro elemento flutuante.</p> + +<p>Na imagem abaixo, existem 3 quadrados vermelho. Dois flutuando à esquerda e um flutuando à direita. Observe que o segundo quadrado vermelho à esquerda é posicionado à direita do primeiro. Quadrados adicionais poderiam continuar sendo empilhados à direita até que eles completassem o box, após isso eles iriam para próxima linha. </p> + +<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p> + +<h3 id="Limpando_floats">Limpando <em>floats</em></h3> + +<p>No exemplo abaixo, os elementos flutuantes são menores verticalmente que o bloco de texto com os quais estão flutuando. Apesar disso, se o texto não fosse comprido o bastante para passar abaixo do limite inferior de todos os <em>floats, </em>nos veríamos efeitos não previstos. Se o parágrafo abaixo, por enquanto, somente lê "Lorem ipsum dolor sit amet,", e fosse seguido por outro cabeçalho do mesmo estilo de cabeçaljo "Floats Example", o segundo cabeçalho iria aparecer entre os dois <em>boxes</em> vermelhos. Muito provavelmente, queremos que o próximo título seja alinhado à esquerda. Para conseguir isso, precisamos limpar os <em>floats</em>.</p> + +<p>O jeito mais simples de limpar os floats neste exemplo é adicionar a propriedade {{Cssxref("clear")}} para o próximo cabeçalho que queremos assegurar que esteja alinhado à esquerda. </p> + +<pre class="brush:css">h2.secondHeading { clear: both; } +</pre> + +<p>Porém, este método apenas funciona se não existirem outros elementos com o mesmo <a href="/en-US/docs/Web/CSS/block_formatting_context" rel="internal">block formatting context</a> aos quais nós queiramos que o cabeçalho continue aparecendo ao lado horizontalmente. Se o nosso<code> H2</code> possui irmãos os quais são barras laterais flutuadas à esquerda e à direita, usar <code>clear </code>irá forçá-lo a aparecer abaixo das duas barras laterais, o que provavelmente não é o que queríamos.</p> + +<p>Se limpar <code>floats </code>em um elemento não é uma opção, uma outra abordagem é limitar o contexto de formatação do bloco do containêr flutuante. Referindo-se ao exemplo acima novamente, aparentemente todos os três quadrados vermelhos possuem um elemento paragrafo <code>P</code> . Nós podemos atribuir a propiedade {{Cssxref("overflow")}} neste paragrafo para <code>hidden</code> ou <code>auto</code> para obrigá-lo a expandir para contê-los, porém não permitirá que os mesmos parágrafos pulem fora do limite inferior.</p> + +<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; } +</pre> + +<div class="note"><strong>Nota:</strong> Atribuir <code>overflow </code>para<code> scroll </code>irá conter também qualquer elemento filho flutuante, mas mostrará as barras de rolagem não importando o comprimento vertical do elemento. Aqui nós estamos atribuindo <code>height </code>como <code>auto </code>mesmo sendo este o padrão para indicar que o containêr deve crescer para acomodar seu conteúdo. </div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Adiciona os valores <code>inline-start</code> e <code>inline-end</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td> + <p>Muitos valores novos, nem todos claramente definidos ainda. Qualquer diferença em comportamento não relacionado a novas funções são involutárias; por favor informe.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sem mudanças</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#float', 'float')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>inline-start</code>, <code>inline-end</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("45")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>1.0</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>inline-start</code>, <code>inline-end</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("45")}} [1]</td> + <td>2.5</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Habilitado por padrão no Nightly e Aurora (Dev edition); para ativar em uma versão <em>release</em> ou <em>beta</em>, você precisa alterar o <code>layout.css.float-logical-values.enabled</code> para <code>true</code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/block_formatting_context">Block formatting context</a></li> +</ul> diff --git a/files/pt-br/web/css/font-family/index.html b/files/pt-br/web/css/font-family/index.html new file mode 100644 index 0000000000..0d9bb5dc45 --- /dev/null +++ b/files/pt-br/web/css/font-family/index.html @@ -0,0 +1,238 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - Fontes CSS + - Lay + - Propriedade CSS + - Refer + - Web +translation_of: Web/CSS/font-family +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade <code>font-family do</code> CSS permite que se faça uma lista de prioridades de familias de fontes e/ou nomes genéricos de famílias a serem especificados para um elemento selecionado. Ao contrário da maioria das demais propriedades CSS, os valores são separados por vírgula para indicar quais são as alternativas. O Browser irá utilizar a primeira fonte da lista que for encontrada no computador, ou poderá fazer o dowload utilizando a informação contida na regra {{cssxref("@font-face")}}.</p> + +<p>Programadores WEB devem sempre adicionar pelo menos uma família genérica para a lista de <span style="font-family: consolas,monaco,andale mono,monospace;">font-family, </span>já que não há garantia que aquela fonte específica está instalada no computador, ou possa ser baixada pela regra {{cssxref("@font-face")}}. A família genérica permite o browser selecionar uma fonte aceita pelo computador, quando necessário.</p> + +<p>É também conveniente usar de antemão a propriedade {{cssxref("font")}} para definir a <code>font-size</code> e outras propriedades relacionadas a fonte todas de uma só vez.</p> + +<div class="note"><strong>Nota:</strong> A propriedade <code>font-family</code> especifica a lista de fontes, da prioridade mais alta para a mais baixa. + +<pre dir="ltr" id="tw-target-text">A seleção de fontes não para simplesmente na primeira fonte nomeada na lista que está no sistema do usuário. Em vez disso, a seleção de fontes é feita um caractere de cada vez, para que, se uma fonte disponível não tiver um glifo que possa exibir um caracter necessário, as fontes disponíveis mais tarde sejam tentadas. No entanto, isso não funciona no Internet Explorer 6 ou anterior. + +Quando uma fonte está disponível apenas em alguns estilos, variantes ou tamanhos, essas propriedades também podem influenciar qual família de fontes é escolhida.</pre> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-family")}} +</pre> + +<pre>font-family: Gill Sans Extrabold, sans-serif +font-family: "Goudy Bookletter 1911", sans-serif + +font-family: sans-serif +font-family: serif +font-family: fantasy +font-family: cursive +font-family: monospace + +font-family: inherit +</pre> + +<h3 id="Valores">Valores</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code><family-name></code></td> + <td>O nome de uma fonte. Por exemplo, "Times" e "Helvetica" são font families. Nomes de fonte-família contém espaços em branco para serem citados..</td> + </tr> + <tr> + <td><code><generic-name></code></td> + <td> + <p>Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in case when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the a last alternative in the list of font family names.</p> + + <dl> + <dt><code>serif</code></dt> + <dd style='font-family: Palatino,"Palatino Linotype",Palladio,"URW Palladio",serif;'>Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.<br> + E.g. Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif</dd> + <dt><code>sans-serif</code></dt> + <dd style='font-family: "Trebuchet MS","Liberation Sans","Nimbus Sans L",sans-serif;'>Glyphs have stroke endings that are plain.<br> + E.g. 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif</dd> + <dt><code>monospace</code></dt> + <dd style='font-family: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;'>All glyphs have the same fixed width.<br> + E.g. "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace</dd> + <dt><code>cursive</code></dt> + <dd>Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.</dd> + <dt><code>fantasy</code></dt> + <dd>Fantasy fonts are primarily decorative fonts that contain playful representations of characters.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<h3 id="Valid_family_names">Valid family names</h3> + +<p>Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.</p> + +<p>For example, the following declarations are valid:</p> + +<pre>font-family: Gill Sans Extrabold, sans-serif; +font-family: "Goudy Bookletter 1911", sans-serif;</pre> + +<p>The following declarations are <strong>invalid</strong>:</p> + +<pre>font-family: Goudy Bookletter 1911, sans-serif; +font-family: Red/Black, sans-serif; +font-family: "Lucida" Grande, sans-serif; +font-family: Ahem!, sans-serif; +font-family: test@foo, sans-serif; +font-family: #POUND, sans-serif; +font-family: Hawaii 5-0, sans-serif;</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example_1">Example 1</h3> + +<pre class="brush: css">body { + font-family: "Gill Sans Extrabold", Helvetica, sans-serif; +} + +.receipt { + font-family: Courier, "Lucida Console", monospace; +} +</pre> + +<h3 id="Example_2">Example 2</h3> + +<pre class="brush: css">.exampleserif { + font-family: Times, "Times New Roman", Georgia, serif; +} + +.examplesansserif { + font-family: Verdana, Arial, Helvetica, sans-serif; +} + +.examplemonospace { + font-family: "Lucida Console", Courier, monospace; +} + +.examplecursive { + font-family: cursive; +} + +.examplefantasy { + font-family: fantasy; +} +</pre> + +<pre class="brush: html"><div class="exampleserif"> +This is an example of a serif font. +</div> + +<div class="examplesansserif"> +This is an example of a sans-serif font. +</div> + +<div class="examplemonospace"> +This is an example of a monospace font. +</div> + +<div class="examplecursive"> +This is an example of a cursive font. +</div> + +<div class="examplefantasy"> +This is an example of a fantasy font. +</div></pre> + +<h4 id="Live_Sample">Live Sample</h4> + +<p>{{ EmbedLiveSample('Example_2','600','120') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-family', 'font-familiy')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/font-feature-settings/index.html b/files/pt-br/web/css/font-feature-settings/index.html new file mode 100644 index 0000000000..dff644c1b5 --- /dev/null +++ b/files/pt-br/web/css/font-feature-settings/index.html @@ -0,0 +1,182 @@ +--- +title: font-feature-settings +slug: Web/CSS/font-feature-settings +tags: + - CSS + - Fontes CSS + - Propriedade CSS + - Referencia +translation_of: Web/CSS/font-feature-settings +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade <strong><code>font-feature-settings</code></strong> do CSS te dá controle sobre tipografia avançada nas fontes do tipo OpenType.</p> + +<div class="note"><strong>Nota:</strong> Sempre que possível, deve usar o {{cssxref("font-variant")}} propriedade abreviada ou uma propriedade extensa associada, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.<br> +<br> +Esta propriedade é um recurso de baixo nível projetado para lidar com casos especiais onde não existe outra maneira de habilitar ou acessar um recurso de fonte OpenType.<br> +<br> +Em particular, esta propriedade CSS não deve ser usada para habilitar small caps.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css notranslate">/* Use the default settings */ +font-feature-settings: normal; + +/* Set values for OpenType feature tags */ +font-feature-settings: "smcp"; +font-feature-settings: "smcp" on; +font-feature-settings: "swsh" 2; +font-feature-settings: "smcp", "swsh" 2; + +/* Global values */ +font-feature-settings: inherit; +font-feature-settings: initial; +font-feature-settings: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Text is laid out using default settings.</dd> + <dt><code><feature-tag-value></code></dt> + <dd>Ao renderizar texto, a lista de características OpenType é passada para o mecanismo de layout de texto para ativar ou desativar recursos do tipo de letra. A tag é sempre uma {{cssxref("<string>")}} de 4 caracteres ASCII. Se possuir mais ou menos caracteres ou conter caracteres fora da faixa U+20 - U+7E, toda a propriedade é invalida.<br> + O valor é um inteiro positivo. As duas palavras-chaves <code>on</code> e <code>off</code> são sinônimos de <code>1</code> e <code>0</code> respectivamente. Se nenhum valor é definido, o padrão é <code>1</code>. Para características OpenType não-booleanas (ex. <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">stylistic alternates</a>), o valor implica em um glifo particular para ser selecionado; para valores booleanos, é um interruptor.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css notranslate">/* use small-cap alternate glyphs */ +.smallcaps { font-feature-settings: "smcp" on; } + +/* convert both upper and lowercase to small caps (affects punctuation also) */ +.allsmallcaps { font-feature-settings: "c2sc", "smcp"; } + +/* enable historical forms */ +.hist { font-feature-settings: "hist"; } + +/* disable common ligatures, usually on by default */ +.noligs { font-feature-settings: "liga" 0; } + +/* enable tabular (monospaced) figures */ +td.tabular { font-feature-settings: "tnum"; } + +/* enable automatic fractions */ +.fractions { font-feature-settings: "frac"; } + +/* use the second available swash character */ +.swash { font-feature-settings: "swsh" 2; } + +/* enable stylistic set 7 */ +.fancystyle { + font-family: Gabriola; /* available on Windows 7, and on Mac OS */ + font-feature-settings: "ss07"; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacão</th> + <th scope="col">Estado</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td> + <p>16.0 {{property_prefix("-webkit")}}<br> + {{CompatChrome(48.0)}} (unprefixed)</p> + </td> + <td> + <p>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}} [1]<br> + {{CompatGeckoDesktop("29.0")}} {{property_prefix("-moz")}} [2]<br> + {{CompatGeckoDesktop("34.0")}} [3]</p> + </td> + <td>10.0</td> + <td>15.0 {{property_prefix("-webkit")}}</td> + <td>{{CompatSafari("9.1")}} (partial support in versions 4.0-6.0)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatAndroid(4.4)}}</td> + <td>{{CompatChrome(48.0)}} (unprefixed)</td> + <td>{{CompatChrome(48.0)}} (unprefixed)</td> + <td> + <p>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}} [1]<br> + {{CompatGeckoDesktop("29.0")}} {{property_prefix("-moz")}} [2]<br> + {{CompatGeckoDesktop("34.0")}} [3]</p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera("24")}}</td> + <td><span style="font-size: 12px; line-height: 18px;">{{CompatSafari("9.3")}} (partial support in versions 3.2-6.1)</span></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Gecko 2.0 (Firefox 4.0) to Gecko 14.0 (Firefox 14.0) included, Gecko supported an older syntax, slightly different from the modern one: <a href="http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/" title="http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/">OpenType Font Feature support in Firefox 4</a>.</p> + +<p>[2] The <a href="http://mpeg.chiariglione.org/standards/mpeg-4/open-font-format/text-isoiec-cd-14496-22-3rd-edition">ISO/IEC CD 14496-22 3rd edition</a> suggests to use the <code>ssty</code> feature to provide glyph variants adjusted to be more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the <a href="/en-US/docs/Web/MathML">MathML</a> rendering engine. It also suggests applying the <code>dtls</code> feature to letters when positing mathematical accent over it, in order to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can always override via CSS the default values determined by the MathML rendering engine.</p> + +<p>[3] Starting with Firefox 34, the version prefixed with <code>-moz-</code> is only kept for backward compatibility purpose. It is controlled by the <code>layout.css.prefixes.font-features</code>, defaulting to <code>true</code>. The prefixed property will be removed in the future.</p> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li><a href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf" title="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf">FontFont OpenType User Guide (pdf)</a></li> + <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a> (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).</li> +</ul> diff --git a/files/pt-br/web/css/font-kerning/index.html b/files/pt-br/web/css/font-kerning/index.html new file mode 100644 index 0000000000..59005e877f --- /dev/null +++ b/files/pt-br/web/css/font-kerning/index.html @@ -0,0 +1,166 @@ +--- +title: font-kerning +slug: Web/CSS/font-kerning +translation_of: Web/CSS/font-kerning +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>font-kerning</code></strong> controla o o uso da informação de kerning, que é, o controle de como as letras serão espaçadas. A informação de kerning é armazenada na fonte, e se a fonte é <em>well-kerned</em>, essa caracteristica permite que o espaçamento entre caracteres seja muito parecido, independente dos caracteres.</p> + +<p><img alt="Example of font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p> + +<pre class="brush:css no-line-numbers">font-kerning: auto; +font-kerning: normal; +font-kerning: none; + +/* Global values */ +font-kerning: inherit; +font-kerning: initial; +font-kerning: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>This keyword defers to the browser regarding whether to use kerning. When the font size is small, font kerning may look strange and browsers will disable it. This is the default value.</dd> + <dt><code>normal</code></dt> + <dd>This keyword requires kerning to be applied.</dd> + <dt><code>none</code></dt> + <dd>This keyword prevents the browser from using the kerning information stored in the font.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush:css">p { + font-kerning: none; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>32<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}<sup>[2]</sup></td> + <td>10<sup>[3]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>7</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}<sup>[2]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>7</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Requires prefix -webkit-font-kerning. First version supporting this property is not known.</p> + +<p>[2] Experimental implementation was available since Gecko 24. It was governed by the preference <code>layout.css.font-features.enabled</code> defaulting to <code>true</code> on Nightly and Aurora only.</p> + +<p>[3] OpenType layout features might be supported using font-feature-settings property, however individual font-kerning property is not supported.</p> + +<h2 id="Kerning_Demo" name="Kerning_Demo">Kerning Demo</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="kern"></div> +<div id="nokern"></div> +<textarea id="input">AV T. ij</textarea></pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">#nokern, #kern { + font-size: 2rem; + font-family: serif; +} +#nokern { + font-kerning: none; +} +#kern { + font-kerning: normal; +}</pre> + +<h3 id="JS_Content">JS Content</h3> + +<pre class="brush: js">var input = document.getElementById('input'), + kern = document.getElementById('kern'), + nokern = document.getElementById('nokern'); +input.addEventListener('keyup', function() { + kern.textContent = input.value; /* Update content */ + nokern.textContent = input.value; +}); +kern.textContent = input.value; /* Initialize content */ +nokern.textContent = input.value; +</pre> + +<p>{{ EmbedLiveSample('Kerning_Demo') }}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}}.</li> +</ul> diff --git a/files/pt-br/web/css/font-size/index.html b/files/pt-br/web/css/font-size/index.html new file mode 100644 index 0000000000..3560b57bc6 --- /dev/null +++ b/files/pt-br/web/css/font-size/index.html @@ -0,0 +1,234 @@ +--- +title: font-size +slug: Web/CSS/font-size +translation_of: Web/CSS/font-size +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">A propriedade <strong><code>font-size</code></strong> no <a href="/en-US/docs/Web/CSS">CSS</a> estabelece o tamanho da fonte.</span> Esta propriedade também é usada para computaro tamanho de <code>em</code>, <code>ex</code>, e outras unidades {{cssxref("<length>")}} relativas.</p> + +<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers">/* <absolute-size> values */ +font-size: xx-small; +font-size: x-small; +font-size: small; +font-size: medium; +font-size: large; +font-size: x-large; +font-size: xx-large; + +/* <relative-size> values */ +font-size: smaller; +font-size: larger; + +/* <length> values */ +font-size: 12px; +font-size: 0.8em; + +/* <percentage> values */ +font-size: 80%; + +/* Global values */ +font-size: inherit; +font-size: initial; +font-size: unset; +</pre> + +<p>The <code>font-size</code> property is specified in one of the following ways:</p> + +<ul> + <li>As one of the <a href="#absolute-size">absolute-size</a> or <a href="#relative-size">relative-size</a> keywords</li> + <li>As a <code><length></code> or a <code><percentage></code>, relative to the parent element's font size</li> +</ul> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt id="absolute-size"><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code></dt> + <dd>Absolute-size keywords, based on the user's default font size (which is <code>medium</code>).</dd> + <dt id="relative-size"><code>larger</code>, <code>smaller</code></dt> + <dd>Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.</dd> + <dt id="<length>">{{cssxref("<length>")}}</dt> + <dd> + <p>A positive {{cssxref("<length>")}} value. For most font-relative units (such as <code>em</code> and <code>ex</code>), the font size is relative to the parent element's font size.</p> + + <p>For font-relative units that are root-based (such as <code>rem</code>), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.</p> + </dd> + <dt id="<percentage>">{{cssxref("<percentage>")}}</dt> + <dd> + <p>A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.</p> + </dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> To maximize accessibility, it is generally best to use values that are relative to the user's default font size.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Possible_approaches">Possible approaches</h2> + +<p>There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.</p> + +<h3 id="Keywords">Keywords</h3> + +<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the {{HTMLElement("body")}} element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p> + +<h3 id="Pixels">Pixels</h3> + +<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p> + +<p>Font sizing settings can also be used in combination. For example, if a parent element is set to <code>16px</code> and its child element is set to <code>larger</code>, the child element displays larger than the parent element in the page.</p> + +<div class="note"><strong>Note:</strong> Defining font sizes in <code>px</code> is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size from the browser. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.</div> + +<h3 id="Ems">Ems</h3> + +<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.</p> + +<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p> + +<pre class="brush: plain">em = desired element pixel value / parent element font-size in pixels</pre> + +<p>For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).</p> + +<p>The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.</p> + +<p>One important fact to keep in mind: em values compound. Take the following HTML and CSS:</p> + +<pre class="brush: css">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6em; +}</pre> + +<pre class="brush: html"><div> +<span>Outer <span>inner</span> outer</span> +</div> +</pre> + +<p>The result is:</p> + +<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> + +<p>Assuming that the browser's default <code>font-size</code> is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner {{HTMLElement("span")}}'s <code>font-size</code> is 1.6em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p> + +<h3 id="Rems">Rems</h3> + +<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.</p> + +<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p> + +<pre class="brush: css">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6rem; +} +</pre> + +<p>Then we apply this CSS to the same HTML, which looks like this:</p> + +<pre class="brush: html"><span>Outer <span>inner</span> outer</span></pre> + +<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> + +<p>In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's <code>font-size</code> has been left at the default value of 16px).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example_1">Example 1</h3> + +<pre class="brush: css">/* Sets paragraph text to be very large */ +p { font-size: xx-large; } + +/* Sets <h1> text to be 2.5 times the size + of the text around it */ +h1 { font-size: 250%; } + +/* Sets text enclosed within span tag to be 16px */ +span { font-size: 16px; } +</pre> + +<h3 id="Example_2">Example 2</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.small { + font-size: xx-small; +} +.larger { + font-size: larger; +} +.point { + font-size: 24pt; +} +.percent { + font-size: 200%; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h1 class="small">Small H1</h1> +<h1 class="larger">Larger H1</h1> +<h1 class="point">24 point H1</h1> +<h1 class="percent">200% H1</h1></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Example_2','600','200')}}</p> + +<h2 id="Notes">Notes</h2> + +<p><code>em</code> and <code>ex</code> units on the {{cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{cssxref("font-size")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>font-size</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.font-size")}}</p> diff --git a/files/pt-br/web/css/font-variation-settings/index.html b/files/pt-br/web/css/font-variation-settings/index.html new file mode 100644 index 0000000000..c0c7a280f8 --- /dev/null +++ b/files/pt-br/web/css/font-variation-settings/index.html @@ -0,0 +1,145 @@ +--- +title: font-variation-settings +slug: Web/CSS/font-variation-settings +translation_of: Web/CSS/font-variation-settings +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>font-variation-settings</code></strong> fornece controle de baixo nível sobre características de <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">variable font</a>, especificando os nomes dos quatro eixos das características que você deseja variar, juntamente com seus valores.</p> + +<div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div> + +<p class="hidden">A código fonte deste exemplo interativo está armazenado em um repositório no GitHub. Se você deseja contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p> + +<div class="note"><strong>Note</strong>: This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. {{cssxref("font-weight")}}, {{cssxref("font-style")}}).</div> + +<div class="note"><strong>Note</strong>: font characteristics set using <code>font-variation-settings</code> will always override those set using the corresponding basic font properties, e.g. <code>font-weight</code>, no matter where they appear in the cascade. <span class="zhc-markdown-block zhc-markdown-block--html">In some browsers, this is currently only true when the <code>@font-face</code> declaration includes a <code>font-weight</code> range.</span></div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers">/* Usar as configurações padrão */ +font-variation-settings: normal; + +/* Definir valores para os nomes dos eixos de fontes variáveis */ +font-variation-settings: "XHGT" 0.7; + +/* Valores globais */ +font-variation-settings: inherit; +font-variation-settings: initial; +font-variation-settings: unset; +</pre> + +<h3 id="Values">Values</h3> + +<p>O valor desta propriedade pode assumir uma de duas formas:</p> + +<dl> + <dt><code>normal</code></dt> + <dd>O texto é colocado usando as configurações padrão.</dd> + <dt><code><string> <number></code></dt> + <dd>Ao renderizar texto, a lista de nomes dos eixos de fontes variáveis é passada para o mecanismo de layout de texto para ativar ou desativar os recursos de fonte. Cada configuração é sempre um ou mais pares que consistem em um {{cssxref("<string>")}} de 4 caracteres ASCII seguidos por um {{cssxref("number")}} indicando o valor do eixo a ser definido. Se a <code><string></code> tiver mais ou menos caracteres ou contiver caracteres fora do intervalo de códigos U+20 - U+7E, toda a propriedade será inválida. O <code><number></code> pode ser fracionário ou negativo, dependendo do intervalo de valores disponível em sua fonte, conforme definido pelo designer da fonte.</dd> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Eixos_registrados_e_personalizados">Eixos registrados e personalizados</h2> + +<p>Os eixos de fontes variáveis vêm em dois tipos: <strong>registrados</strong> e <strong>personalizados</strong>.</p> + +<p>Os eixos registrados são os mais comumente encontrados - comuns o suficiente para que os autores das especificações considerassem que valia a pena padronizar. Observe que isso não significa que o autor precise incluir tudo isso em sua fonte.</p> + +<p>Aqui estão os eixos registrados, juntamente com suas propriedades CSS correspondentes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag do Eixo</th> + <th scope="col">Propriedade CSS</th> + </tr> + </thead> + <tbody> + <tr> + <td>"wght"</td> + <td>{{cssxref("font-weight")}}</td> + </tr> + <tr> + <td>"wdth"</td> + <td>{{cssxref("font-stretch")}}</td> + </tr> + <tr> + <td>"slnt" (slant)</td> + <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td> + </tr> + <tr> + <td>"ital"</td> + <td>{{cssxref("font-style")}}: <code>italic</code></td> + </tr> + <tr> + <td>"opsz"</td> + <td> + <p>{{cssxref("font-optical-sizing")}}</p> + </td> + </tr> + </tbody> +</table> + +<p>Os eixos personalizados podem ser qualquer coisa que o designer da fonte deseje variar em sua fonte, por exemplo, alturas ascendentes ou descendentes, o tamanho das serifas ou qualquer outra coisa que possam imaginar. Qualquer eixo pode ser usado desde que seja dado um eixo exclusivo de 4 caracteres. Alguns acabam se tornando mais comuns e podem até se registrar com o tempo.</p> + +<div class="note"> +<p><strong>Nota</strong>: As tags de eixo registrados são identificadas usando tags minúsculas, enquanto os eixos personalizados devem receber tags maiúsculas. Observe que os designers de fontes não são forçados a seguir essa prática de maneira alguma, e alguns não o fazem. O ponto importante aqui é que as tags de eixo diferenciam maiúsculas de minúsculas.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja abaixo exemplos interativos que demonstram os eixos registrados. Você pode encontrar vários outros exemplos de fontes variáveis em nosso <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a>, <a class="external external-icon" href="https://v-fonts.com/" rel="noopener">v-fonts.com</a>, e <a class="external external-icon" href="https://www.axis-praxis.org/" rel="noopener">axis-praxis.org</a>.</p> + +<div class="warning"> +<p><strong>Aviso</strong>: Para usar fontes variáveis em seu sistema operacional, você precisa verificar se está atualizado. Por exemplo, os sistemas operacionais Linux precisam da versão mais recente do Linux Freetype, e o macOS anterior à 10.13 não suportam fontes variáveis. Se o seu sistema operacional não estiver atualizado, você não poderá usar fontes variáveis em páginas da Web ou no Firefox Developer Tools.</p> +</div> + +<h3 id="Peso_wght">Peso (wght)</h3> + +<p>O CSS do exemplo a seguir pode ser editado para permitir que você mude os valores de peso da fonte.</p> + +<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div> + +<h3 id="Inclinação_slnt">Inclinação (slnt)</h3> + +<p>O CSS do exemplo a seguir pode ser editado para permitir que você mude os valores oblíquos / oblíquos da fonte.</p> + +<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div> + +<p>{{Compat("css.properties.font-variation-settings")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></li> + <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li> + <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li> +</ul> diff --git a/files/pt-br/web/css/font-weight/index.html b/files/pt-br/web/css/font-weight/index.html new file mode 100644 index 0000000000..33d4118762 --- /dev/null +++ b/files/pt-br/web/css/font-weight/index.html @@ -0,0 +1,284 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +translation_of: Web/CSS/font-weight +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade <a href="/en-US/docs/CSS" title="CSS">CSS </a><code>font-weight</code> especifica o peso ou a intensidade da fonte (ex.: negrito). Algumas fontes oferecem apenas as opções <code>normal</code> e negrito.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">font-weight: normal; +font-weight: bold; + +/* Relativo ao elemento pai */ +font-weight: lighter; +font-weight: bolder; + +font-weight: 100; +font-weight: 200; +font-weight: 300; +font-weight: 400; +font-weight: 500; +font-weight: 600; +font-weight: 700; +font-weight: 800; +font-weight: 900; + +/* Valores globais */ +font-weight: inherit; +font-weight: initial; +font-weight: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Peso normal. O mesmo que <code>400</code>.</dd> + <dt><code>bold</code></dt> + <dd>Peso negrito. O mesmo que <code>700</code>.</dd> + <dt><code>lighter</code></dt> + <dd>Um peso de fonte mais claro que o elemento pai (dentre os pesos disponíveis da fonte).</dd> + <dt><code>bolder</code></dt> + <dd>Um peso de fonte mais escuro que o elemento pai (dentre os pesos disponíveis da fonte).</dd> + <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt> + <dd>Pesos numéricos para fontes que oferecem mais que normal e negrito.</dd> +</dl> + +<h3 id="Contingência">Contingência</h3> + +<p>Caso o dado peso solicitado não esteja disponível, a seguinte heurística é usada para determinar o peso efetivo a ser usado:</p> + +<ul> + <li>Se solicitado um peso maior que <code>500</code>, usa-se o próximo peso mais escuro (ou, se não houver, usa-se o próximo mais claro).</li> + <li>Se solicitado um peso menor que <code>400</code>, usa-se o próximo peso mais claro (ou, se não houver, usa-se o próximo mais escuro).</li> + <li>Se solicitado o peso <code>400</code>, usa-se o peso <code>500</code>. Se <code>500</code> não estiver disponível, usa-se a heurística para peso menor do que 500.</li> + <li>Se solicitado o peso <code>500</code>, usa-se o peso <code>400</code>. Se <code>400</code> não estiver disponível, usa-se a heurística para peso menor do que 400.</li> +</ul> + +<p>Isto significa que para fontes que oferecem apenas <code style="font-style: normal;">normal</code> e negrito, <code style="font-style: normal;">100</code>-<code>500</code> significa normal, e <code style="font-style: normal;">600</code>-<code style="font-style: normal;">900</code> significa negrito.</p> + +<h3 id="Significado_de_pesos_relativos">Significado de pesos relativos</h3> + +<p>Quando for solicitado <code>lighter</code> ou <code>bolder</code>, a seguinte tabela é usada para calcular o peso absoluto do elemento:</p> + +<table> + <thead> + <tr> + <th>Valor herdado</th> + <th><code>bolder</code></th> + <th><code>lighter</code></th> + </tr> + </thead> + <tbody> + <tr> + <th>100</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>200</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>300</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>400</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>500</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>600</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>700</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>800</th> + <td>900</td> + <td>700</td> + </tr> + <tr> + <th>900</th> + <td>900</td> + <td>700</td> + </tr> + </tbody> +</table> + +<h3 id="Mapeamento_de_nomes_comuns_de_pesos">Mapeamento de nomes comuns de pesos</h3> + +<p>Os valores de 100 a 900 correspondem grosseiramente aos seguintes nomes comuns de pesos:</p> + +<dl> + <dt><code>100</code></dt> + <dd>Thin (Hairline)</dd> + <dt><code>200</code></dt> + <dd>Extra Light (Ultra Light, Ultra Fino)</dd> + <dt><code>300</code></dt> + <dd>Light (Fino)</dd> + <dt><code>400</code></dt> + <dd>Normal</dd> + <dt><code>500</code></dt> + <dd>Medium (Médio)</dd> + <dt><code>600</code></dt> + <dd>Semi Bold (Demi Bold, Semi Negrito)</dd> + <dt><code>700</code></dt> + <dd>Bold (Negrito)</dd> + <dt><code>800</code></dt> + <dd>Extra Bold (Ultra Bold, Super Negrito)</dd> + <dt><code>900</code></dt> + <dd>Black (Heavy)</dd> +</dl> + +<h3 id="Interpolação">Interpolação</h3> + +<p>Um valor de <code>font-weight</code> é interpolado com passos discretos (múltiplos de 100). A interpolação acontece no espaço de números reais e depois é feita uma conversão para números inteiros por arredondamento para o múltiplo de 100 mais próximo. Valores exatamente entre dois múltiplos de 100 são arredondados para mais.</p> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Alice was beginning to get very tired of sitting by her sister on the + bank, and of having nothing to do: once or twice she had peeped into the + book her sister was reading, but it had no pictures or conversations in + it, 'and what is the use of a book,' thought Alice 'without pictures or + conversations?' +</p> + +<div>I'm heavy<br/> + <span>I'm lighter</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">/* Set paragraph text to be bold. */ +p { + font-weight: bold; +} + +/* Set div text to two steps darker than + normal but less than a standard bold. */ +div { + font-weight: 600; +} + +/* Sets text enclosed within span tag + to be one step lighter than the parent. */ +span { + font-weight: lighter; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Exemplos","400","300")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Sem alterações.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Permite animação do atributo <code>font-weight</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sem alterações.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>6.0</td> + <td>6.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/general_sibling_combinator/index.html b/files/pt-br/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..e718cb7283 --- /dev/null +++ b/files/pt-br/web/css/general_sibling_combinator/index.html @@ -0,0 +1,117 @@ +--- +title: General sibling selectors +slug: Web/CSS/General_sibling_combinator +translation_of: Web/CSS/General_sibling_combinator +--- +<div><span class="s1">{{CSSRef("Selectors")}}</span></div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O <strong>combinador geral de irmãos</strong> (~) separa dois seletores e corresponde ao segundo elemento somente se ele for precedido pelo primeiro, e ambos compartilham um pai comum.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">elemento_anterior ~ elemento_alvo { <em>propriedades de e</em><em>stilo</em> } +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: css">p ~ span { + color: red; +}</pre> + +<pre class="brush: html"><span>Este não é vermelho.</span> +<p>Aqui temos um parágrafo.</p> +<code>Aqui temos um pouco de código.</code> +<span>E aqui há um span vermelho!</span> +<code>Mais código...</code> +<span>E este também é um span vermelho!</span> +</pre> + +<p>{{ EmbedLiveSample('Example', 280, 120) }}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Renomeia o combinador como "irmão subsequente".</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>7</td> + <td>9</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Veja_mais">Veja mais</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a></li> +</ul> diff --git a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html new file mode 100644 index 0000000000..90723ea85c --- /dev/null +++ b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html @@ -0,0 +1,127 @@ +--- +title: Cascata e herança +slug: Web/CSS/Getting_Started/Cascading_and_inheritance +tags: + - Guía + - Iniciante +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">Primeiros Passos (Tutorial CSS)</a>; Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.</span></p> + +<h2 class="clearLeft" id="Informação_Cascata_e_Herança">Informação: Cascata e Herança</h2> + +<p>O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.</p> + +<p>Existem três fontes principais de estilos que constituem a cascata. São elas:</p> + +<ul> + <li>Os estilos padrões do navegador;</li> + <li>Os estilos especificados pelos usarios que estão lendo o documento;</li> + <li>Os estilos criados pelo desenvolvedor. Que podem ser incluidos em três locais: + <ul> + <li>Em um arquivo externo: Este tutorial utiliza principalmente este método de definição de estilos</li> + <li>No inico do documento: Este método é usado apenes para estilos que se aplicam a uma única página.</li> + <li>Em um elemento específico: Este método é pouco recomendado, mas pode ser utilizado para testes.</li> + </ul> + </li> +</ul> + +<p>O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> + +<p>Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.</p> + +<p>Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo <code>userContent.css</code> do seu navegador.</p> + +<p>Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.</p> +</div> + +<p>Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }} vem em negrito. Isto vem das configurações padrão do seu navegador.</p> + +<p>Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).</p> + +<p>Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.</p> + +<p>Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.</p> + +<p>Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.</p> + +<p>Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.</p> + +<p>Mais detalhes</p> + +<div class="tuto_details"> +<p>CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. </p> + +<p>Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.</p> + +<p>Se você quiser saber todos os detalhes da cascata e herança, consulte <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na especificação do CSS</p> +</div> + +<h2 id="Ação_Usando_herança">Ação: Usando herança</h2> + +<ol> + <li>Edite o seu arquivo CSS.</li> + <li>Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element: + <pre class="brush:css">p {color: blue; text-decoration: underline;} +</pre> + </li> + <li>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.<br> + + <p>Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.</p> + </li> +</ol> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> +</table> + +<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> + <caption>Antes</caption> + <tbody> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <caption>Depois</caption> + <tbody> + <tr> + <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">Desafio</div> +Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> + +<pre class="brush: css">p {color: blue; } +strong {color: red; text-decoration: underline;} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução do desafio.</a></div> + +<h2 id="Qual_o_próximo">Qual o próximo?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, <p> e <strong>, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seletores</a>.</p> diff --git a/files/pt-br/web/css/getting_started/como_css_funciona/index.html b/files/pt-br/web/css/getting_started/como_css_funciona/index.html new file mode 100644 index 0000000000..d8759320b8 --- /dev/null +++ b/files/pt-br/web/css/getting_started/como_css_funciona/index.html @@ -0,0 +1,125 @@ +--- +title: Como o CSS funciona +slug: Web/CSS/Getting_Started/Como_CSS_funciona +tags: + - 'CSS:PrimeirosPassos' + - Guía + - Iniciante + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. </span></p> + +<h2 class="clearLeft" id="Informação_Como_o_CSS_funciona">Informação: Como o CSS funciona</h2> + +<p>Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:</p> + +<ol> + <li>O navegador converte a linguagem de marcação e o CSS no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.</li> + <li>O navegador exibe o conteúdo do DOM.</li> +</ol> + +<p>Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando <em>tags</em>, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui <em>tags </em>emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '<' e '>'. Para a tag final, coloque um '/' depois do '<' e antes do nome do elemento.</p> + +<p>Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.</p> + +<p>O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.</p> + +<p>Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> +No seu documento de exemplo, a tag <p> e seu final </p> criam um recipiente: + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h2 id="Exemplo_em_tempo_real">Exemplo em tempo real</h2> + +<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> + +<p>No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós '<em>strongs</em>' e os nós de texto. Os nós <em>'strong'</em> são eles próprios pais, com nós de texto como filhos.</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<h2 id="Ação_Analisando_um_DOM">Ação: Analisando um DOM</h2> + +<h3 id="Utilizando_Inspetor_DOM">Utilizando Inspetor DOM</h3> + +<p>Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on <a href="/en/DOM_Inspector" title="en/DOM_Inspector">Inspetor DOM</a> do Mozilla (DOMi) para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).</p> + +<ol> + <li>Use seu navegador Mozilla para abrir seu documento HTML de exemplo.</li> + <li>Na barra de menu do seu navegador, escolha <strong>Ferramentas > Inspetor DOM</strong>, ou <strong>Ferramentas > Desenvolvimento Web > Inspetor DOM</strong>. + <div class="tuto_details"> + <div class="tuto_type">Mais detalhes</div> + + <p>Se o seu navegador Mozilla não ter o DOMi, você pode <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">instalá-lo a partir do site de Add-ons </a> e reiniciar seu navegador. Depois, retorne para esse tutorial.</p> + + <p>Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.</p> + </div> + </li> + <li>No DOMi, expanda o nó do seu documento clicando em suas flechas. + <p><strong>Nota: </strong> Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.</p> + + <p>Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.</p> + + <p>Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Desafio</div> + +<p>No DOMi, clique em um nó <em><strong><small>STRONG</small></strong></em>.</p> + +<p>Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.</p> + + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para o desafio.</a></div> + +<h3 id="Usando_Raio-X_Goggles_da_Web">Usando Raio-X Goggles da Web</h3> + +<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web </a>exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.</p> + +<ol> + <li>Vá para a página inicial do <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web</a>.</li> + <li>Arraste o link do <em>bookmarklet </em>na página para a barra de ferramentas do seu navegador.</li> + <li>Abra o seu documento HTML de exemplo.</li> + <li>Ative o Raio-X Goggles da Web clicando no <em>bookmarklet </em>na sua barra de ferramentas.</li> + <li>Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.</li> +</ol> + +<h2 id="O_que_vem_depois">O que vem depois?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">próxima página</a> explica mais sobre essas interações.</p> diff --git a/files/pt-br/web/css/getting_started/index.html b/files/pt-br/web/css/getting_started/index.html new file mode 100644 index 0000000000..bca1143a34 --- /dev/null +++ b/files/pt-br/web/css/getting_started/index.html @@ -0,0 +1,97 @@ +--- +title: Iniciando com o CSS +slug: Web/CSS/Getting_Started +tags: + - CSS + - Guia(2) + - Guía + - Iniciante + - Web +translation_of: Learn/CSS/First_steps +--- +<p> </p> + +<h2 id="Introdução">Introdução</h2> + +<p>Esse tutorial é uma introdução ao <em>Cascading Style Sheets</em> (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:</p> + +<ul> + <li>A Parte I ilustra as características padrão do CSS que funcionam em todos os navegadores Mozilla e também em qualquer outro dentre os mais modernos.</li> +</ul> + +<ul> + <li>A Parte II conta com alguns exemplos de características especiais que funcionam nos navegadores Mozilla mas não necessariamente em outros ambientes.</li> +</ul> + +<p>Esse tutorial é baseado na <a href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificação do CSS 2.1</a>.</p> + +<h3 id="Quem_deve_usar_esse_tutorial">Quem deve usar esse tutorial?</h3> + +<p>Esse tutorial é, principalmente, para iniciantes no CSS.</p> + +<p>Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.</p> + +<p>Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.</p> + +<p>Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.</p> + +<h3 id="O_que_você_precisa_saber_antes_de_começar">O que você precisa saber antes de começar?</h3> + +<p>Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.</p> + +<p>Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.</p> + +<p>Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, <strong>você pode ignorá-las</strong>. O software referenciado por esse tutorial inclui:</p> + +<ul> + <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> +</ul> + +<p><strong>Nota: </strong>O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.</p> + +<h3 id="Como_usar_esse_tutorial">Como usar esse tutorial</h3> + +<p>Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.</p> + +<p>Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.</p> + +<p>Para testar seu entendimento, faça o desafio do fim de cada página. <strong>Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.</strong></p> + +<p>Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda <em>Mais detalhes</em> (<em>More details</em>). Utilize os links para encontrar informações de referência sobre o CSS.</p> + +<h2 id="Parte_I_do_Tutorial">Parte I do Tutorial</h2> + +<p>Uma guia básico passo a passo do CSS</p> + +<ol> + <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">O que é o CSS</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Porque usar o CSS</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como o CSS funciona</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascata e herança</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Seletores</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">CSS legível</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Estilos de texto</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Cores</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Conteúdo</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Listas</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Caixas</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tabelas</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Mídia</a></strong></li> +</ol> + +<h2 id="Parte_II_do_Tutorial">Parte II do Tutorial</h2> + +<p>Exemplos do uso do CSS juntamente com outras tecnologias</p> + +<ol> + <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Gráficos SVG</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dados XML</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Ligações XBL</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfaces de usuário XUL</a></strong></li> +</ol> + +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/pt-br/web/css/getting_started/javascript/index.html b/files/pt-br/web/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..e4ceadbb9b --- /dev/null +++ b/files/pt-br/web/css/getting_started/javascript/index.html @@ -0,0 +1,139 @@ +--- +title: JavaScript e CSS +slug: Web/CSS/Getting_Started/JavaScript +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>Esta é a pirmeira sessão da Parte II do <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">Tutorial de CSS</a>. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.</p> +<p>Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.</p> +<p>Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.</p> +<p>Sessão Anterior (da Parte I): <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br> + Próxima sessão: <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p> +<h3 id="Information:_JavaScript" name="Information:_JavaScript">Informação: JavaScript</h3> +<p>JavaScript é um <em>programming language</em>. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.</p> +<p>JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica</p> +<p>Há três formas de fazer isso:</p> +<ul> + <li>Trabalhando com lista de documentos de stylesheets—por exemplo: adicionando, removendo ou adicionando uma stylesheet.</li> + <li>Trabalhando com as regras em uma stylesheet—por exemplo: adicionando, removendo ou modificando uma regra.</li> + <li>Trabalhando com um documento individual na DOM—modificando seu estilo independentemente do stylesheetsdo documento.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + Mais detalhes</caption> + <tbody> + <tr> + <td>Para mais informações sobre JavaScript, veja a página <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> nesta wiki.</td> + </tr> + </tbody> +</table> +<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">Ação: Uma demonstração de JavaScript</h3> +<p>Faça um novo documento em HTML, <code>doc5.html</code>. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:</p> +<div style="width: 48em;"> + <pre class="brush:html;"><!DOCTYPE html> +<html> + +<head> +<title>Mozilla CSS Getting Started - JavaScript demonstration</title> +<link rel="stylesheet" type="text/css" href="style5.css" /> +<script type="text/javascript" src="script5.js"></script> +</head> + +<body> +<h1>JavaScript sample</h1> + +<div id="square"></div> + +<button type="button" onclick="doDemo(this);">Click Me</button> + +</body> +</html> +</pre> +</div> +<p>Crie um novo arquivo CSS, <code>style5.css</code>. Copie e cole o conteúdo daqui:</p> +<div style="width: 48em;"> + <pre class="brush:css;">/*** JavaScript demonstration ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; +} + +button { + padding: .5em 2em; +} +</pre> +</div> +<p>Crie um novo arquivo de texto, <code>script5.js</code>. Coie e cole o conteúdo daqui:</p> +<div style="width: 48em;"> + <pre class="brush:js;">// JavaScript demonstration +function doDemo (button) { + var square = document.getElementById("square"); + square.style.backgroundColor = "#fa4"; + button.setAttribute("disabled", "true"); + setTimeout(clearDemo, 2000, button); +} + +function clearDemo (button) { + var square = document.getElementById("square"); + square.style.backgroundColor = "transparent"; + button.removeAttribute("disabled"); +} +</pre> +</div> +<p>Abra o documento no seu Browser e pressione o botão.</p> +<p>Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:</p> +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>JavaScript demonstration</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>JavaScript demonstration</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<div class="note"> + <strong>Notas importantes </strong>sobre esta demonstração: + <ul> + <li>Os links do documento HTML document linca a como usual, e também linca o script.</li> + <li>O script trabalha com elementos individuais no DOM. Ele modifica o square's style diretamente. Ele modifica o estilo dos botões indiretamente mudando um atributo.</li> + <li>Em JavaScript, <code>document.getElementById("square")</code> é similar em função ao seletor CSS <code>#square</code>.</li> + <li>Em JavaScript, <code>backgroundColor</code> corresponde à propriedade CSS<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">background-color</code><span style="line-height: 1.5em;">. JavaScript não permite hífens em nomes, então "camelCase" é usada no lugar dele.</span></li> + <li>Seu browser tem uma regra built-in CSS para<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">button{{ mediawiki.external('disabled=\"true\"') }}</code><span style="line-height: 1.5em;"> ela muda a aparência dos botões quando está disabilitado.</span></li> + </ul> +</div> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption> + Desafio</caption> + <tbody> + <tr> + <td> + <p>Mude o script e então o <span style="line-height: inherit;">square salta para a direita em 20 em quando muda as cores, e salta de volta depois.</span></p> + </td> + </tr> + </tbody> +</table> +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">Veja a solução deste desafio.</a></p> +<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.428em; line-height: inherit;">O que vem agora?</span></p> +<p>Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Di</a>scussão.</p> +<p>Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras <span style="line-height: inherit;">stylesheets) para selecionar elementos. A próxima página demonstra isso: </span><strong style="line-height: inherit;"><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> diff --git a/files/pt-br/web/css/getting_started/lists/index.html b/files/pt-br/web/css/getting_started/lists/index.html new file mode 100644 index 0000000000..481c1f58c5 --- /dev/null +++ b/files/pt-br/web/css/getting_started/lists/index.html @@ -0,0 +1,271 @@ +--- +title: Manipulando Listas +slug: Web/CSS/Getting_Started/Lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}</p> + +<p><font><font>Este é o 10º seção do </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="EN-US / docs / Web / Guia / CSS / Introdução"><font><font>CSS Introdução</font></font></a><font><font> tutorial; </font><font>ele descreve como você pode usar CSS para especificar o aparecimento de listas. </font><font>Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.</font></font></p> + +<h2 class="clearLeft" id="Informação_Lists"><font><font>Informação: Lists</font></font></h2> + +<p><font><font>Se você aceitou o desafio na </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/ en-US / docs / Web / Guia / CSS / Getting_Started / Conteúdo"><font><font>última </font></font></a><font><font>seção, </font><font>em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.</font></font></p> + +<p><font><font>CSS proporciona propriedades especiais que são projetados para listas. </font><font>Geralmente é mais conveniente usar estas propriedades sempre que puder.</font></font></p> + +<p><font><font>Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.</font></font></p> + +<p><font><font>O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.</font></font></p> + +<h3 id="Listas_não_ordenadas"><font><font>Listas não ordenadas</font></font></h3> + +<p><font><font>Em uma lista </font></font><em><font><font>desordenada</font></font></em><font><font>, cada item da lista é marcado da mesma forma.</font></font></p> + +<p><font><font>CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:</font></font></p> + +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code><font><font>disc</font></font></code></li> + <li style="list-style-type: circle;"><code><font><font>circle</font></font></code></li> + <li style="list-style-type: square;"><code><font><font>square</font></font></code></li> +</ul> + +<p style="list-style-type: square;"> none</p> + +<p><font><font>Alternativamente, você pode especificar o URL de uma imagem.</font></font></p> + +<div class="tuto_example"> +<div class="tuto_type"><font><font>Exemplo</font></font></div> + +<p><font><font>Essas regras especificam diferentes marcadores para diferentes classes de item da lista:</font></font></p> + +<pre class="brush:css"><font><font>li.open {list-style: circle;} </font></font><font><font> +li.closed {list-style: disc;}</font></font> +</pre> + +<p><font><font>Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):</font></font></p> + +<pre class="brush: html"><font><font><ul> </font></font><font><font> + <li class="open"> Lorem ipsum </ li> </font></font><font><font> + <li class="closed"> dolor sit </ li> + <li class="closed"> Amet consectetuer </ li> + <li class="open"> Magna aliquam </ li> + <li class="closed"> Autem veleum </ li> +</ ul></font></font> +</pre> + +<p><font><font>O resultado pode parecer:</font></font></p> + +<p><font><font>{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}</font></font></p> +</div> + +<h3 id="Listas_ordenadas"><font><font>Listas ordenadas</font></font></h3> + +<p><font><font>Em uma lista<em>ordenada</em></font></font><font><font> , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.</font></font></p> + +<p><font><font>Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:</font></font></p> + +<ul style="padding-left: 2em;"> + <li><code>decimal</code></li> + <li><code>lower-roman</code></li> + <li><code>upper-roman</code></li> + <li><code>lower-latin</code></li> + <li><code>upper-latin</code></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type"><font><font>Exemplo</font></font></div> + +<p><font><font>Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe </font></font><code><font><font>informações, os itens são identificados com letras maiúsculas.</font></font></code></p> + +<pre><code><ol class="info"> + <li>Lorem ipsum</li> + <li>Dolor sit</li> + <li>Amet consectetuer</li> + <li>Magna aliquam</li> + <li>Autem veleum</li> +</ol></code></pre> + +<pre class="brush:css"><font><font>ol.info {list-style: upper-latin;} +</font></font></pre> + +<p><font><font>O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:</font></font></p> + +<p><font><font>{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}</font></font></p> +</div> + +<div class="tuto_details"> +<div class="tuto_type"><font><font>Mais detalhes</font></font></div> + +<p><font><font>O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. </font><font>Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. </font><font>Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.</font></font></p> + +<p><font><font>Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. </font><font>No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.</font></font></p> + +<p><font><font>Browsers diferem na maneira de implementar os estilos para listas. </font><font>Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</font></font></p> +</div> + +<h3 id="Contadores"><font><font>Contadores</font></font></h3> + +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong><font><font>Nota: </font></font></strong><font><font> Alguns navegadores não suportam contadores. </font><font>O </font></font><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html"><font><font>conteúdo CSS e compatibilidade do navegador</font></font></a><font><font> página no </font></font><a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/"><font><font>site de modo Quirks</font></font></a><font><font> contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. </font><font>Páginas individuais na </font></font><a href="/en-US/docs/Web/CSS/Reference" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference"><font><font>referência CSS</font></font></a><font><font> neste local também têm tabelas de compatibilidade do navegador.</font></font></p> +</div> + +<p><font><font>Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. </font><font>Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</font></font></p> + +<p><font><font>Para especificar a numeração, você precisa de um </font></font><em><font><font>contador</font></font></em><font><font> com um nome que você especificar.</font></font></p> + +<p><font><font>Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. </font><font>O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.</font></font></p> + +<p><font><font>Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.</font></font></p> + +<p><font><font>Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o </font></font><code><font><font>conteúdo</font></font></code><font><font> da propriedade (como você fez na página anterior, </font><font>Conteúdo) </font><font>.</font></font></p> + +<p><font><font>No valor do </font></font><code><font><font>conteúdo</font></font></code><font><font> de propriedade, especifique </font></font><code><font><font>counter ()</font></font></code><font><font> com o nome de seu contador. </font><font>Opcionalmente especifique um tipo. </font><font>Os tipos são os mesmos que na </font></font><strong><font><font>lista ordenada</font></font></strong><font><font> secção acima.</font></font></p> + +<p><font><font>Normalmente, o elemento que apresenta o contador também incrementa-lo.</font></font></p> + +<div class="tuto_example"> +<div class="tuto_type"><font><font>Exemplo</font></font></div> + +<p><font><font>Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe </font><font>numeradas:</font></font></p> + +<pre class="brush:css"><font><font>h3.numbered {counter-reset: mynum;} +</font></font></pre> + +<p> </p> + +<p><font><font>Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe </font><font>numeradas:</font></font></p> + +<pre class="brush: html"><font><font><p class = "numbered"> Lorem ipsum </ p> +<p class = "numbered"> dolor sit </ p> +<p class = "numbered"> Amet consectetuer </ p> +<p class = "numbered"> Magna aliquam </ p> +<p class = "numbered"> Autem veleum </ p></font></font> +</pre> + +<pre class="brush:css"><font><font>body </font></font><font><font> + {counter-reset: </font></font><font><font> +mynum;} </font></font><font><font> +p.numbered:before + {content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;}</font></font> +</pre> + +<p><font><font>O resultado se parece com isso:</font></font></p> + +<p><font><font>{{ EmbedLiveSample("Contadores", '300', '200', '') }}</font></font></p> +</div> + +<div class="tuto_details"> +<div class="tuto_type"><font><font>Mais detalhes</font></font></div> + +<p><font><font>Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.</font></font></p> + +<p><font><font>Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. </font><font>No exemplo acima, os contadores estão em negrito mas os itens da lista não são.</font></font></p> + +<p><font><font>Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. </font><font>Para mais detalhes, consulte </font></font><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters"><font><font>contadores automáticos e numeração</font></font></a><font><font> em CSS Specification.</font></font></p> +</div> + +<h2 id="Listas_denominadas_Ação"><font><font>Listas denominadas: Ação</font></font></h2> + +<p><font><font>Crie um novo documento HTML, </font><font>doc2.html. </font><font>Copie e cole o conteúdo daqui:</font></font></p> + +<pre class="brush:html;"><font><font><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html></font></font> + +</pre> + +<p><font><font>Faça uma nova folha de estilo, </font><font>style2.css. </font><font>Copie e cole o conteúdo daqui:</font></font></p> + +<pre class="brush:css;"><font><font>/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +}</font></font> +</pre> + +<p><font><font>Se o layout e comentário não são a seu gosto, alterá-los.</font></font></p> + +<p><font><font>Abra o documento no seu browser. </font><font>Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. </font><font>Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):</font></font></p> + +<p><font><font>{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}</font></font></p> + +<div class="tuto_example"> +<div class="tuto_type"><font><font>Desafios</font></font></div> + +<p><font><font>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:</font></font></p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p><strong>The oceans</strong></p> + + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p><font><font>Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:</font></font></p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p><strong>(A) The oceans</strong></p> + + <p><strong>. . .</strong></p> + + <p><strong>(B) Numbered paragraphs</strong></p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="EN-US / docs / Web / Guia / CSS / Introdução / desafio soluções # Lists"><font><font>Ver soluções para esses desafios.</font></font></a></p> + +<h2 id="Qual_o_proximo"><font><font>Qual o proximo?</font></font></h2> + +<p><font><font>{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. </font><font>A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, </font><font>caixas.</font></font></p> diff --git a/files/pt-br/web/css/getting_started/oque_é_css/index.html b/files/pt-br/web/css/getting_started/oque_é_css/index.html new file mode 100644 index 0000000000..b72101c453 --- /dev/null +++ b/files/pt-br/web/css/getting_started/oque_é_css/index.html @@ -0,0 +1,111 @@ +--- +title: O que é CSS +slug: Web/CSS/Getting_Started/Oque_é_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de <span class="seoSummary"> i<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">ntrodução as CSS </a> e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.</span></p> + +<h2 class="clearLeft" id="O_que_é_CSS">O que é CSS ?</h2> + +<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).</p> + +<p>Um <em>documento</em> é um conjunto de informações que são estruturadas utilizando uma <em>linguagem de marcação</em>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Examples</div> + +<ul> + <li>Um documento, é uma página da web como esta que você está lendo.<br> + A informação que você vê em uma página web é geralmente estruturado utilizando a linguagem de marcação HTML (HyperText Markup Language).</li> + <li>Dialogos, também chamados de Janelas Modais de um aplicativo, são frequentemente documentos.<br> + Tais diálogos podem também ser estruturados usando linguagem de marcação, como XUL. Este é frequentemente o caso em aplicações Mozilla, mas não é um caso comum.</li> +</ul> +</div> + +<p>Neste tutorial, temos boxes com o título <strong>Mais detalhes c</strong>omo o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.</p> + +<p>Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.</p> + +<p>Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/en/HTML" title="en/HTML">HTML</a></td> + <td>para paginas web</td> + </tr> + <tr> + <td><a href="/en/XML" title="en/XML">XML</a></td> + <td>para documentos estruturados em geral</td> + </tr> + <tr> + <td><a href="/en/SVG" title="en/SVG">SVG</a></td> + <td>para gráficos</td> + </tr> + <tr> + <td><a href="/en/XUL" title="en/XUL">XUL</a></td> + <td>para interfaces de usuários em Mozilla</td> + </tr> + </tbody> +</table> + +<p>Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.</p> +</div> + +<p><em>Apresentar</em> um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente — por exemplo, na tela de um computador, projetor ou impressora.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta um documento a um usuário é chamado de <em>user agent</em> (UA), no Brasil <span style="background-color: rgb(244, 244, 244);"><em>agente de usuário</em></span>. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.</p> + +<p>Para mais definições formais sobre terminologia relacionadas com CSS, veja <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definições</a> na especificação CSS.</p> +</div> + +<h2 id="Ação_Criando_um_documento">Ação: Criando um documento</h2> + +<ol> + <li>Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.</li> + <li>Copie e cole o código HTML abaixo . Salve o arquivo usando o nome <code>doc1.html</code> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Documento de exemplo</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. + <p>Você deve ver o texto com as letras iniciais em negrito, como este:</p> + + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>O que você vê no seu navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.</p> + </li> +</ol> + +<h2 id="O_que_veremos_depois">O que veremos depois?</h2> + +<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na <a href="/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">próxima seção</a> você usará CSS para especificar o estilo.</p> diff --git a/files/pt-br/web/css/getting_started/porque_usar_css/index.html b/files/pt-br/web/css/getting_started/porque_usar_css/index.html new file mode 100644 index 0000000000..1219d9c096 --- /dev/null +++ b/files/pt-br/web/css/getting_started/porque_usar_css/index.html @@ -0,0 +1,105 @@ +--- +title: Por que usar CSS? +slug: Web/CSS/Getting_Started/Porque_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary">Esta segunda parte do <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.</span></p> + +<h2 class="clearLeft" id="Informação_Por_que_usar_CSS">Informação: Por que usar CSS?</h2> + +<p>As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag <head> do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos na tag <head> de seu documento.</p> + +<p>Uma folha de estilo externa, tem muitas vantagens.:</p> + +<ul> + <li>Ajuda a evitar código repetido</li> + <li>Facilita a manutenção</li> + <li>Permite fazer mudança no site inteiro alterando apenas um arquivo.</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> + +<p>Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..</p> + +<p>Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo juntamente com o conteúdo da página.</p> + +<p>Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.</p> +</div> + +<p>Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo. Mais adiante neste tutorial, você verá algumas exceções a esta disposição.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.</p> + +<p>Por exemplo, você pode usar a tag <b> para fazer o texto em negrito, e pode especificar a cor de fundo na sua tag <body>.</p> + +<p>Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.</p> +</div> + +<h2 id="Ação_Criando_uma_folha_de_estilo">Ação: Criando uma folha de estilo</h2> + +<ol> + <li><span id="result_box" lang="pt"><span class="hps">Crie outro</span> <span class="hps">arquivo de texto</span> <span class="hps">no mesmo</span> <span class="hps">diretório que o documento</span> <span class="hps">doc1.html</span> <span class="hps">você criou</span> <span class="hps">na primeira seção</span><span>.</span></span></li> + <li>Salve seu documento como: <code>style1.css</code>. Este arquivo será sua folha de estilos.</li> + <li>Em seu CSS, cole a linha abaixo, e salve o arquivo: + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="Linkando_seu_documento_para_sua_folha_de_estilo">Linkando seu documento para sua folha de estilo</h3> + +<ol> + <li>Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: + <pre class="brush: html; highlight:[6];"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Documento Simples com CSS</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type">Desafio</div> + +<p>Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.</p> + +<p>Encontre mais cinco nomes de cores que as CSS trabalham.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para este desafio.</a></div> + +<h2 id="O_que_veremos">O que veremos?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">aprender mais</a> sobre como seu navegador trabalha e exibe um documento.</p> diff --git a/files/pt-br/web/css/getting_started/seletores/index.html b/files/pt-br/web/css/getting_started/seletores/index.html new file mode 100644 index 0000000000..22b53c2049 --- /dev/null +++ b/files/pt-br/web/css/getting_started/seletores/index.html @@ -0,0 +1,429 @@ +--- +title: Seletores +slug: Web/CSS/Getting_Started/Seletores +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span class="seoSummary">Esta é a 5ª seção de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">Primeiros passos (Tutorial Css)</a>, ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.</span></p> + +<h2 class="clearLeft" id="Informações_Seletores">Informações: Seletores</h2> + +<p>CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:</p> + +<pre class="brush: css">strong { + color: red; +} +</pre> + +<p>No CSS, este código inteiro é uma <em>regra</em>. Esta regra inicia com <code>strong</code>, que é um <em>seletor</em>. Ele seleciona os elementos do DOM aos quais a regra se aplica.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>A parte dentro das chaves é a <em>declaração</em>.</p> + +<p>A palavra-chave <code>color</code> é uma <em>propriedade e</em> <code>red</code> é um <em>valor</em>.</p> + +<p>O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.</p> + +<p>Esse tutorial se refere ao seletor <code>strong</code> como um seletor de <em>tag</em>. A Especificação do CSS se refere a este seletor como seletor de <em>tipo</em>.</p> +</div> + +<p>Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.</p> + +<p>Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.</p> + +<p>Dois atributos são especiais para o CSS. São eles o <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> e o <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> + +<h3 id="Seletores_com_Classe">Seletores com Classe</h3> + +<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.</p> + +<p>Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.</p> + +<h3 id="Seletores_com_ID">Seletores com ID</h3> + +<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.</p> + +<p>Em seu CSS, digite cerquilha <strong>(#)</strong> antes do ID quanto estiver usando em um seletor ID.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> +Esta tag HTML tem tanto um atributo <code>class</code> quanto um atributo <code>id</code>: + +<pre class="brush: html"><p class="chave" id="principal"> +</pre> + +<p>O valor de <strong>id</strong>, <code>principal</code>, precisa ser unico no documento, mas outras tags no documento podem ter o atributo <strong>class</strong> com o mesmo nome, <code>chave</code>.</p> + +<p>Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe <code>chave</code>. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)</p> + +<pre class="brush: css">.chave { + color: green; +} +</pre> + +<p>Esta regra torna negrito um elemento com <strong>id</strong> <code>principal</code>:</p> + +<pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> + +<h3 id="Seletores_de_Atributo">Seletores de Atributo</h3> + +<p>Você não está restrito aos dois atributos especiais, class e id. Você pode especificar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">outros atributos</a> usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:</p> + +<dl> + <dt><code>[disabled]</code></dt> + <dd>Seleciona todos os elementos com o atributo "disabled".</dd> + <dt><code>[type='button']</code></dt> + <dd>Seleciona todos os elementos do tipo "button".</dd> + <dt><code>[class~=key]</code></dt> + <dd><font><font>Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). </font><font>Funcionalmente equivalente a </font></font><code>.key</code><font><font>.</font></font></dd> + <dt><code>[lang|=es]</code></dt> + <dd>Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).</dd> + <dt>[title*="example" i]</dt> + <dd><font>Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. </font><font>Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.</font></dd> + <dt><code>a[href^="https://"]</code></dt> + <dd>Seleciona links seguros.</dd> + <dt><code>img[src$=".png"]</code></dt> + <dd>IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.</dd> +</dl> + +<h3 id="Seletores_de_pseudo-classes">Seletores de pseudo-classes</h3> + +<p><font><font>Uma </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="pt-BR / docs / Web / Guide / CSS / Pseudo-classes"><font><font>pseudo-classe</font></font></a><font><font> em CSS </font><font>é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. </font><font>Por exemplo </font></font> {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.</p> + +<p>Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Syntax</div> + +<pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> + +<h4 id="Lista_de_pseudo-classes">Lista de pseudo-classes</h4> + +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> + +<h2 id="Informação_Especificidade">Informação: Especificidade</h2> + +<p>Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais <a href="/en-US/docs/Web/CSS/Specificity">específico</a>. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que têm a classe com o nome <code>key</code>. O seletor <code>p.key</code> seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe <code>key</code>.</p> +</div> + +<p>Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.</p> + +<p>Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.</p> + +<h2 id="Information_Selectors_based_on_relationships">Information: Selectors based on relationships</h2> + +<p>CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.</p> + +<table id="relselectors"> + <caption>Common selectors based on relationships</caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Any E element that is a <em>child</em> (i.e. direct descendant) of an A element</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Any E element that is the <em>first child</em> of its parent</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td> + </tr> + </tbody> +</table> + +<p>You can combine these to express complex relationships.</p> + +<p>You can also use the symbol <code>*</code> (asterisk) to mean "any element".</p> + +<div class="tuto_example"> +<div class="tuto_type">Example</div> + +<p>An HTML table has an <code>id</code> attribute, but its rows and cells do not have individual identifiers:</p> + +<pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + +<p>These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:</p> + +<pre class="brush:css"> #data-table-1 td:first-child {text-decoration: underline;} + #data-table-1 td:first-child + td {text-decoration: line-through;} +</pre> + +<p>The result looks like:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 18em;"> + <tbody> + <tr> + <td><u>Prefix</u></td> + <td><s>0001</s></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">More details</div> + +<p>In the usual way, if you make a selector more specific, then you increase its priority.</p> + +<p>If you use these techniques, you avoid the need to specify <code>class</code> or <code>id</code> attributes on so many tags in your document. Instead, CSS does the work.</p> + +<p>In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.</p> + +<p>For more examples about tables, see <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> in the CSS Reference page.</p> +</div> + +<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2> + +<ol> + <li>Edit your HTML file, and duplicate the paragraph by copying and pasting it.</li> + <li>Then add <strong>id</strong> and <strong>class</strong> attributes to the first copy, and an <strong>id</strong> attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Now edit your CSS file. Replace the entire contents with: + <pre class="brush:css">strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; } +</pre> + </li> + <li>Save the files and refresh your browser to see the result: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>You can try rearranging the lines in your CSS file to show that the order has no effect.</p> + + <p>The class selectors <code>.carrot</code> and <code>.spinach</code> have priority over the tag selector <code>strong</code>.</p> + + <p>The ID selector <code>#first</code> has priority over the class and tag selectors.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Challenges</div> + +<ol> + <li>Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<ol> + <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: + + <pre class="brush: css">#second { color: blue; } +</pre> + A more specific selector, <code>p#second</code> also works.</li> + <li>Change the selector of the new rule to be a tag selector using <code>p</code>: + <pre class="brush: css">p { color: blue; } +</pre> + </li> +</ol> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2> + +<ol> + <li>Create an HTML file with following content: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html> +</pre> + </li> + <li>Now edit your CSS file. Replace the entire contents with: + <pre class="brush: css">a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +} +</pre> + </li> + <li>Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h2 id="Action_Using_selectors_based_on_relationships_and_pseudo-classes">Action: Using selectors based on relationships and pseudo-classes</h2> + +<p>With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create <strong>pure-CSS dropdown menus</strong> (that is only CSS, without using <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). The essence of this technique is the creation of a rule like the following:</p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> + +<p>to be applied to an HTML structure like the following:</p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p>See our complete <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> for a possible cue.</p> + +<h2 id="What_next">What next?</h2> + +<p>Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> diff --git a/files/pt-br/web/css/grid-auto-flow/index.html b/files/pt-br/web/css/grid-auto-flow/index.html new file mode 100644 index 0000000000..ae212a18a6 --- /dev/null +++ b/files/pt-br/web/css/grid-auto-flow/index.html @@ -0,0 +1,207 @@ +--- +title: grid-auto-flow +slug: Web/CSS/grid-auto-flow +tags: + - pt-br +translation_of: Web/CSS/grid-auto-flow +--- +<p>A propriedade de CSS <strong><code>grid-auto-flow </code></strong> controla como o algoritmo de arrumação automática funciona, especificando exatamente como os itens fluirão no grid.</p> + +<pre class="brush: css no-line-numbers">/* Keywords Chaves */ +grid-auto-flow: row; +grid-auto-flow: column; +grid-auto-flow: dense; +grid-auto-flow: row dense; +grid-auto-flow: column dense; + +/* Valores globais */ +grid-auto-flow: inherit; +grid-auto-flow: initial; +grid-auto-flow: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Esta propriedade pode ser de duas maneiras:</p> + +<ul> + <li>uma única keyword (palavra-chave): <code>row(linha)</code>, <code>column</code>(coluna), ou <code>dense(denso)</code>.</li> + <li>duas keywords (palavras-chave): <code>row dense(linha densa)</code> ou <code>column dense(coluna densa)</code>.</li> +</ul> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>row (linha)</code></dt> + <dd>Keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloca os itens preenchendo cada linha de uma vez, adicionando novas linhas se necessário. Se nem <code>row</code>(linha) ou <code>column(coluna) </code>for especificado, <code>row (linha)</code> é assumido.</dd> + <dt><code>column (coluna)</code></dt> + <dd>É uma keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloque os itens preenchendo colunas, adicionando novas se necessário.</dd> +</dl> + +<dl> + <dt><code>dense (denso)</code></dt> + <dd>Keyword (palavra-chave) que determina que o algoritmo de arrumação automática use um formato de compactação "denso", que tenta preencher os espaços anteriores do grid caso receba itens menores após. Isto talvez deixe os itens fora de ordem, preenchendo espaços deixados por itens maiores.</dd> + <dd>Se omitido, o algoritmo "esparso" é utilizado, onde o algoritmo de arrumação somente "avança" no grid ao colocar os itens, nunca voltando para preencher os espaços. Isso garante que todos os itens colocados automaticamente apareçam "em ordem", mesmo que deixem espaçs que poderiam ser preenchidos por itens posteriores.</dd> +</dl> + +<h3 id="Sintaxe_Formal">Sintaxe Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> + <div id="item4"></div> + <div id="item5"></div> +</div> +<select id="direction" onchange="changeGridAutoFlow()"> + <option value="column">column</option> + <option value="row">row</option> +</select> +<input id="dense" type="checkbox" onchange="changeGridAutoFlow()"> +<label for="dense">dense</label> +</pre> + +<h3 id="Conteúdo_CSS">Conteúdo CSS</h3> + +<pre class="brush: css; highlight[7]">#grid { + height: 200px; + width: 200px; + display: grid; + grid-gap: 10px; + grid-template: repeat(4, 1fr) / repeat(2, 1fr); + grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ +} + +#item1 { + background-color: lime; + grid-row-start: 3; +} + +#item2 { + background-color: yellow; +} + +#item3 { + background-color: blue; +} + +#item4 { + grid-column-start: 2; + background-color: red; +} + +#item5 { + background-color: aqua; +}</pre> + +<pre class="brush: js; hidden">function changeGridAutoFlow() { + var grid = document.getElementById("grid"); + var direction = document.getElementById("direction"); + var dense = document.getElementById("dense"); + var gridAutoFlow = direction.value === "row" ? "row" : "column"; + + if (dense.checked) { + gridAutoFlow += " dense"; + } + + grid.style.gridAutoFlow = gridAutoFlow; +}</pre> + +<p>{{EmbedLiveSample("Example", "200px", "230px")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + + + +<p>{{Compat("css.properties.grid-auto-flow")}}</p> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>Propriedades CSS relacionadas: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid")}}</li> + <li>Guia de Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Arrumação automática no grid layout </a></em></li> + <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduzindo arrumação automática no grid e ordem</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guias</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceitos básicos do grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relacionamento com outros tipos de layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Arrumação baseada em linha</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout usando named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Arrumação automática no grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alinhamento de Box no grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values e writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout e Acessibilidade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout e Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Identificando layouts comuns usando grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propriedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossário</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pt-br/web/css/grid-template-columns/index.html b/files/pt-br/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..f096700b56 --- /dev/null +++ b/files/pt-br/web/css/grid-template-columns/index.html @@ -0,0 +1,193 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +tags: + - CSS + - CSS Grid +translation_of: Web/CSS/grid-template-columns +--- +<p>A propriedade <code>grid-template-columns</code> do CSS define os nomes das linhas e funções de dimensionamento (track sizing) do {{glossary("grid column", "grid columns")}}.</p> + +<pre class="brush: css no-line-numbers notranslate">/* valores padrão */ +grid-template-columns: none; + +/* exemplos de <track-list> */ +grid-template-columns: 100px 1fr; +grid-template-columns: [linename] 100px; +grid-template-columns: [linename1] 100px [linename2 linename3]; +grid-template-columns: minmax(100px, 1fr); +grid-template-columns: fit-content(40%); +grid-template-columns: repeat(3, 200px); + +/* exemplos de <auto-track-list> */ +grid-template-columns: 200px repeat(auto-fill, 100px) 300px; +grid-template-columns: minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-columns: [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-columns: [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; + +/* definições de herança */ +grid-template-columns: inherit; +grid-template-columns: initial; +grid-template-columns: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Alternativas">Alternativas</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Indica que não há uma grade explícita. Colunas serão automaticamente geradas e seu tamanho será determinado pela propriedade {{cssxref("grid-auto-columns")}}.</dd> + <dt><code><length></code></dt> + <dd>Tamanho não negativo.</dd> + <dt><code><percentage></code></dt> + <dd>Is a non-negative {{cssxref("percentage", "<percentage>")}} value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as <code>auto</code>.<br> + The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.</dd> + <dt><code><flex></code></dt> + <dd>Is a non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code><flex></code>-sized track takes a share of the remaining space in proportion to its flex factor. + <p>When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, <flex>)</code>).</p> + </dd> + <dt id="max-content"><code>max-content</code></dt> + <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd> + <dt><code>min-content</code></dt> + <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd> + <dt><code>{{cssxref("minmax", "minmax(min, max)")}}</code></dt> + <dd>Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code><flex></code> value sets the track’s flex factor. It is invalid as a minimum.</dd> + <dt id="auto"><code>auto</code></dt> + <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd> + <dd> + <p class="note">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.</p> + </dd> + <dt id="fit-content()"><code>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</code></dt> + <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd> + <dt>{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}</dt> + <dd>Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css notranslate">#grid { + display: grid; + width: 100%; + grid-template-columns: 50px 1fr; +} + +#areaA { + background-color: lime; +} + +#areaB { + background-color: yellow; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="grid"> + <div id="areaA">A</div> + <div id="areaB">B</div> +</div></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples", "100%", "20px")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_o_navegador">Compatibilidade com o navegador</h2> + + + +<p>{{Compat("css.properties.grid-template-columns")}}</p> + +<h2 id="Leia_Mais">Leia Mais</h2> + +<ul> + <li>Propriedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li> + <li>Guia do <em>layout</em> em grade: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li> + <li>Tutorial em vídeo: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><strong><a href="/en-US/docs/Web/CSS/Reference">Referência do CSS</a></strong></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS: Layout em grid</a></li> + <li data-default-state="open"><a href="#"><strong>Guia</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propriedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossário</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pt-br/web/css/grid-template-rows/index.html b/files/pt-br/web/css/grid-template-rows/index.html new file mode 100644 index 0000000000..daff379e41 --- /dev/null +++ b/files/pt-br/web/css/grid-template-rows/index.html @@ -0,0 +1,204 @@ +--- +title: grid-template-rows +slug: Web/CSS/grid-template-rows +translation_of: Web/CSS/grid-template-rows +--- +<p>A propriedade <strong><code>grid-template-rows</code></strong> do CSS define o nome das linhas e funções de dimensionamento (track sizing) do {{glossary("grid rows", "grid rows")}}.</p> + +<p>{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}</p> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Keyword value */ +grid-template-rows: none; + +/* <track-list> values */ +grid-template-rows: 100px 1fr; +grid-template-rows: [linename] 100px; +grid-template-rows: [linename1] 100px [linename2 linename3]; +grid-template-rows: minmax(100px, 1fr); +grid-template-rows: fit-content(40%); +grid-template-rows: repeat(3, 200px); + +/* <auto-track-list> values */ +grid-template-rows: 200px repeat(auto-fill, 100px) 300px; +grid-template-rows: minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-rows: [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-rows: [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; + +/* Valores globais */ +grid-template-rows: inherit; +grid-template-rows: initial; +grid-template-rows: unset; +</pre> + +<p>Esta propriedade pode ser especificada como:</p> + +<ul> + <li>com a palavra-chave <code>none</code></li> + <li>ou um valor <code><track-list></code> </li> + <li>ou um valor <code><auto-track-list></code> </li> +</ul> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>É uma palavra-chave que indica que não há uma grid explícita. Qualquer linha irá ser implicitamente gerada e seu tamanho será determinado pela a propriedade {{cssxref("grid-auto-rows")}} .</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>É um comprimento não negativo.</dd> + <dt>{{cssxref("percentage", "<percentagem>")}}</dt> + <dd>É um valor de {{cssxref("percentage", "<percentagem>")}} não negativo, relativo ao tamanho do bloco do grid contêiner. Se o tamanho do grid contêiner depender do tamanho de suas tracks, então a percentagem deve ser tratada como <code>auto</code>. <br> + As contribuições de tamanho inerentes da track podem ser ajustados ao tamanho do grid contêiner, e aumentar o tamanho final da track pelo o valor mínimo que respeitará a percentagem.</dd> + <dt>{{cssxref("<flex_value>","<flex>")}}</dt> + <dd>Is a non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code><flex></code>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, <flex>)</code>).</dd> + <dt><code>max-content</code></dt> + <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd> + <dt><code>min-content</code></dt> + <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd> + <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt> + <dd>Is a functional notation that defines a size range, greater than or equal to <em>min</em>, and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code><flex></code> value sets the track’s flex factor. It is invalid as a minimum.</dd> + <dt><code>auto</code></dt> + <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd> + <dd> + <p class="note">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.</p> + </dd> + <dt>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> + <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd> + <dt>{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}</dt> + <dd>Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">#grid { + display: grid; + height: 100px; + grid-template-rows: 30px 1fr; +} + +#areaA { + background-color: lime; +} + +#areaB { + background-color: yellow; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div id="areaA">A</div> + <div id="areaB">B</div> +</div></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", "40px", "100px")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.grid-template-rows")}}</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li> + <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pt-br/web/css/grid/index.html b/files/pt-br/web/css/grid/index.html new file mode 100644 index 0000000000..7b9826ed26 --- /dev/null +++ b/files/pt-br/web/css/grid/index.html @@ -0,0 +1,187 @@ +--- +title: grid +slug: Web/CSS/grid +translation_of: Web/CSS/grid +--- +<p>A propriedade <strong><code>grid</code></strong> do CSS é uma <a href="/en-US/docs/Web/CSS/Shorthand_properties">abreviação</a> das propriedades que definem todas as propriedades da grade explícita ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, e {{cssxref("grid-template-areas")}}), e todas as propriedades implícitas da grade ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, e {{cssxref("grid-auto-flow")}}), em uma única declaração.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div> + +<p class="hidden">A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p> + +<div class="note"> +<p><strong><font><font>Nota:</font></font></strong><font><font> Você pode especificar apenas as propriedades explícitas </font></font><em><font><font>ou</font></font></em><font><font> implícitas da grade em uma única declaração</font></font> <code>grid</code>. <font>As subpropriedades que você não especifica são definidas como seu valor inicial, como é normal para abreviações. </font><font>Além disso, as propriedades da medianiz NÃO são redefinidas por essa abreviação.</font></p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css no-line-numbers">/* <'grid-template'> values */ +grid: none; +grid: "a" 100px "b" 1fr; +grid: [linename1] "a" 100px [linename2]; +grid: "a" 200px "b" min-content; +grid: "a" minmax(100px, max-content) "b" 20%; +grid: 100px / 200px; +grid: minmax(400px, min-content) / repeat(auto-fill, 50px); + +/* <'grid-template-rows'> / + [ auto-flow && dense? ] <'grid-auto-columns'>? values */ +grid: 200px / auto-flow; +grid: 30% / auto-flow dense; +grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; +grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; + +/* [ auto-flow && dense? ] <'grid-auto-rows'>? / + <'grid-template-columns'> values */ +grid: auto-flow / 200px; +grid: auto-flow dense / 30%; +grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); +grid: auto-flow dense 40% / [line1] minmax(20em, max-content); + +/* Global values */ +grid: inherit; +grid: initial; +grid: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'grid-template'></code></dt> + <dd>Define o {{cssxref("grid-template")}} incluindo {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-areas")}}.</dd> + <dt><code><'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?</code></dt> + <dd>Configura um fluxo automático definindo as faixas de linha explicitamente por meio da propriedade {{cssxref("grid-template-rows")}} (e a propriedade {{cssxref("grid-template-columns")}} para <code>none</code>) e especificando como repetir automaticamente as faixas da coluna via {{cssxref("grid-auto-columns")}} (e setando {{cssxref("grid-auto-rows")}} para <code>auto</code>). {{cssxref("grid-auto-flow")}} também é definido para a <code>column</code>, de acordo com <code>dense</code>, se especificado. + <p>Todas as outras subpropriedades <code>grid</code> são redefinidas para seus valores iniciais.</p> + </dd> + <dt><code>[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'></code></dt> + <dd>Configura um fluxo automático definindo as faixas da coluna explicitamente por meio da propriedade {{cssxref("grid-template-columns")}} (e a propriedade {{cssxref("grid-template-rows")}} para <code>none</code>) e especificando como repetir automaticamente as faixas de linha via {{cssxref("grid-auto-rows")}} (e setando {{cssxref("grid-auto-columns")}} para <code>auto</code>). {{cssxref("grid-auto-flow")}} também é definido para <code>row</code> de acordo com <code>dense</code>, se especificado. + <p><font><font>Todas as outras </font></font><font><font>subpropriedades</font></font> <code>grid</code> são redefinidas para seus valores iniciais.</p> + </dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> + +<pre class="brush: html"><div id="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="Conteúdo_CSS">Conteúdo CSS</h3> + +<pre class="brush: css">#container { + display: grid; + grid: repeat(2, 60px) / auto-flow 80px; +} + +#container > div { + background-color: #8ca0ff; + width: 50px; + height: 50px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", "100%", 150)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div> + +<p>{{Compat("css.properties.grid")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Propriedades CSS relacionadas: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> + <li>Guia de Layout de Grade: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li> + <li>Guia de Layout de Grade: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><strong><a href="#">Guias</a></strong> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propriedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossário</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pt-br/web/css/height/index.html b/files/pt-br/web/css/height/index.html new file mode 100644 index 0000000000..7d06fb0534 --- /dev/null +++ b/files/pt-br/web/css/height/index.html @@ -0,0 +1,192 @@ +--- +title: height +slug: Web/CSS/height +translation_of: Web/CSS/height +--- +<div>{{CSSRef()}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A propriedade <code>height</code> do CSS determina a altura da área do conteúdo de um elemento. A <a href="/en-US/docs/CSS/box_model#content" title="CSS/Box_model#content">área de conteúdo</a> consiste no <code>padding</code>, <code>margin</code> e <code>border </code>do elemento.</p> + +<p>As propriedades {{Cssxref("min-height")}} e {{Cssxref("max-height")}} sobrepõem a {{Cssxref("height")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxe formal</a>: <code class="language-html">[<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>length</span><span class="punctuation token">></span></span> | <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>percentage</span><span class="punctuation token">></span></span>] && [border-box | content-box]? | available | min-content | max-content | fit-content | complex | auto</code> +</pre> + +<pre>height: auto /* auto keyword */ + +height: 120px /* <length> values */ +height: 10em + +height: 75% /* <percentage> values */ + +height: inherit +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code style="font-size: 14px;"><length></code></dt> + <dd>Veja {{cssxref("<length>")}} para unidades disponíveis.</dd> + <dt><code style="font-size: 14px;"><percentage></code></dt> + <dd>Especificada como uma {{cssxref("<percentage>")}} da altura do conteúdo do bloco.</dd> + <dt><code style="font-size: 14px;">border-box </code>{{ experimental_inline }}</dt> + <dd>Se presente, o último {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado a caixa de borda do elemento.</dd> + <dt><code style="font-size: 14px;">content-box</code> {{ experimental_inline }}</dt> + <dd>Se presente, o último {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado a caixa de conteúdo do elemento.</dd> + <dt><code style="font-size: 14px;">auto</code></dt> + <dd>O navegador calculará a altura do conteúdo especificado.</dd> + <dt><code style="font-size: 14px;">max-content</code> {{ experimental_inline }}</dt> + <dd>A altura máxima intrínseca.</dd> + <dt><code style="font-size: 14px;">min-content</code> {{ experimental_inline }}</dt> + <dd>A altura mínima intrínseca.</dd> + <dt><code style="font-size: 14px;">available</code> {{ experimental_inline }}</dt> + <dd>Altura da caixa menos margem vertical, borda e padding.</dd> + <dt><code style="font-size: 14px;">fit-content</code> {{ experimental_inline }}</dt> + <dd>O maior de: + <ul> + <li>a altura mínima intrínseca</li> + <li>a menor entre a altura intrínseca preferida e a altura disponível</li> + </ul> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="red"> + <span>I'm 50 pixels tall.</span> +</div> +<div id="green"> + <span>I'm 25 pixels tall.</span> +</div> +<div id="parent"> + <div id="child"> + <span>I'm half the height of my parent.</span> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 250px; + margin-bottom: 5px; + border: 3px solid #999999; +} + +#red { + height: 50px; +} + +#green { + height: 25px; +} + +#parent { + height: 100px; +} + +#child { + height: 50%; + width: 75%; +} +</pre> + +<p>{{EmbedLiveSample('Exemplos')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Lists <code>height</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#height', 'height')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">box model</a>, {{Cssxref("width")}}, {{Cssxref("box-sizing")}}, {{Cssxref("min-height")}}, {{Cssxref("max-height")}}</li> +</ul> diff --git a/files/pt-br/web/css/hifens/index.html b/files/pt-br/web/css/hifens/index.html new file mode 100644 index 0000000000..c8e718562f --- /dev/null +++ b/files/pt-br/web/css/hifens/index.html @@ -0,0 +1,902 @@ +--- +title: hifens +slug: Web/CSS/hifens +translation_of: Web/CSS/hyphens +--- +<div>{{CSSRef}}</div> + +<div>A propriedade <a href="/en-US/docs/">CSS</a> <strong><code>hyphens</code></strong> especifica como palavras devem ser hifenizadas quando o há quebra de texto em múltiplas linhas. Você pode prevenir a hifenização completamente, especificar pontos manualmente, ou permitir que o navegador insira automaticamente quando apropriado.</div> + +<div> </div> + +<pre class="brush:css no-line-numbers">hyphens: none; +hyphens: manual; +hyphens: auto; + +/* Valores globais */ +hyphens: inherit; +hyphens: initial; +hyphens: unset; +</pre> + +<p>Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a>,</code> e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo <code><a href="/en-US/docs/Web/SVG/Attribute/xml:lang">xml:lang</a>.</code></p> + +<div class="note"> +<p><strong>Nota:</strong> As regras que definem como a hifenização é realizada não são explicitamente definidas pela especificação, então a hifenização exata pode variar de navegador para navegador.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A propriedade <code>hyphens</code> é especificada como uma única palavra-chave escolhida da lista abaixo.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.</dd> + <dt><code>manual</code></dt> + <dd>Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} para mais detalhes.</dd> + <dt><code>auto</code></dt> + <dd>O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.</dd> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> O comportamento da configuração <code>auto</code> requer que a propriedade idioma seja indicada corretamente para que as regras de hifenização sejam selecionadas. Você deve especificar o idioma utilizando o atributo HTML <code>lang</code> para garantir que a hifenização automática seja aplicada na linguagem de sua escolha.</p> +</div> + +<h2 id="Oportunidades_sugeridas_de_quebra_de_linha">Oportunidades sugeridas de quebra de linha</h2> + +<p>Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:</p> + +<dl> + <dt>U+2010 (HYPHEN)</dt> + <dd>O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.</dd> + <dt>U+00AD (SHY)</dt> + <dd>Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar <code>&shy;</code> para inserir um hífen suave.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Este exemplo usa três classes, uma para cada configuração possível da propriedade <code>hyphens</code>.</p> + +<pre class="brush: html"><ul> + <li><code>none</code>: sem hífen; transbordar se necessário + <p lang="en" class="none">An extreme&shy;ly long English word</p> + </li> + <li><code>manual</code>: hífen apenas em &amp;hyphen; ou &amp;shy; (se necessário) + <p lang="en" class="manual">An extreme&shy;ly long English word</p> + </li> + <li><code>auto</code>: hífen onde o algorítmo decidir (se necessário) + <p lang="en" class="auto">An extreme&shy;ly long English word</p> + </li> +</ul> +</pre> + +<pre class="brush: css">p { + width: 55px; + border: 1px solid black; + } +p.none { + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +p.manual { + -webkit-hyphens: manual; + -ms-hyphens: manual; + hyphens: manual; +} +p.auto { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} +</pre> + +<figure> +<p>{{EmbedLiveSample("Example", "100%", "470'")}}</p> +</figure> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Condição</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td> + <td>{{Spec2("CSS3 Text")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(13.0)}}{{property_prefix("-webkit")}}<sup>[1]</sup><br> + {{CompatChrome(55.0)}} (unprefixed)</td> + <td> + <p>{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("43.0")}}</p> + </td> + <td>{{CompatIE("10.0")}}{{property_prefix("-ms")}}<sup>[3]</sup></td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatSafari(5.1)}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Afrikaans (af, af-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Bulgarian (bg, bg-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Catalan (ca, ca-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Croatian (hr, hr-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Czech (cs, cs-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Danish (da, da-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Dutch (nl, nl-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for English (en, en-*)</td> + <td>{{CompatChrome(55.0)}} (unprefixed)</td> + <td>{{CompatGeckoDesktop("6.0")}}<sup>[4]</sup></td> + <td>10.0</td> + <td>{{CompatOpera(44)}}</td> + <td>5.1<sup>[5]</sup></td> + </tr> + <tr> + <td>Hyphenation dictionary for Esperanto (eo, eo-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Estonian (et, et-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Finnish (fi, fi-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for French (fr, fr-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Galician (gl, gl-*)</td> + <td>{{CompatUnknown}}</td> + <td>9.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Hungarian (hu, hu-*)</td> + <td>{{CompatUnknown}}</td> + <td>9.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Icelandic (is, is-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Interlingua (ia, ia-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Italian (it, it-*)</td> + <td>{{CompatUnknown}}</td> + <td>9.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Kurmanji (kmr, kmr-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Latin (la, la-*)</td> + <td>{{CompatVersionUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Lithuanian (lt, lt-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Mongolian (mn, mn-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Polish (pl, pl-*)</td> + <td>{{CompatUnknown}}</td> + <td>31.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Portuguese (pt, pt-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0<sup>[6]</sup></td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Brazilian Portuguese (pt-BR)</td> + <td>{{CompatUnknown}}</td> + <td>8.0<sup>[6]</sup></td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Russian (ru, ru-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Slovenian (sl, sl-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Spanish (es, es-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Swedish (sv, sv-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Turkish (tr, tr-*)</td> + <td>{{CompatUnknown}}</td> + <td>9.0</td> + <td>10.0</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Ukrainian (uk, uk-*)</td> + <td>{{CompatUnknown}}</td> + <td>9.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + </tr> + <tr> + <td>Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Welsh (cy, cy-*)</td> + <td>{{CompatUnknown}}</td> + <td>8.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for other languages</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid("4.0")}}{{property_prefix("-webkit")}}<sup>[1]</sup></td> + <td>{{CompatChrome(55.0)}} (unprefixed)</td> + <td>{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("43.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatSafari(4.2)}}{{property_prefix("-webkit")}}</td> + <td>{{CompatChrome(55.0)}} (unprefixed)</td> + </tr> + <tr> + <td>Hyphenation dictionary for Afrikaans (af, af-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Bulgarian (bg, bg-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Catalan (ca, ca-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Croatian (hr, hr-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Czech (cs, cs-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Danish (da, da-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Dutch (nl, nl-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for English (en, en-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(55.0)}} (unprefixed)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(55.0)}} (unprefixed)</td> + </tr> + <tr> + <td>Hyphenation dictionary for Esperanto (eo, eo-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Estonian (et, et-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Finnish (fi, fi-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for French (fr, fr-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Galician (gl, gl-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Hungarian (hu, hu-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Icelandic (is, is-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Interlingua (ia, ia-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Italian (it, it-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Kurmanji (kmr, kmr-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Latin (la, la-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Lithuanian (lt, lt-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Mongolian (mn, mn-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Polish (pl, pl-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Portuguese (pt, pt-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Brazilian Portuguese (pt-BR)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Russian (ru, ru-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Slovenian (sl, sl-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Spanish (es, es-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Swedish (sv, sv-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Turkish (tr, tr-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Ukrainian (uk, uk-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for Welsh (cy, cy-*)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Hyphenation dictionary for other languages</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <strong>Sem hifenização automática</strong>, apenas <code>-webkit-hyphens: none</code> é suportado.</p> + +<p>[2] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Gecko. Veja <a href="#Notes_on_supported_languages">a nota abaixo</a> para ver a lista completa destas linguagens.</p> + +<p>[3] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Internet Explorer. Veja <a href="#Notes_on_supported_languages">a nota abaixo</a> para ver a lista completa destas linguagens.</p> + +<p>[4] Usa um dicionário en-US.</p> + +<p>[5] en-GB e en-US usam dicionários diferentes.</p> + +<p>[6] Usa um dicionário Português.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref("content")}}</li> +</ul> diff --git a/files/pt-br/web/css/id_selectors/index.html b/files/pt-br/web/css/id_selectors/index.html new file mode 100644 index 0000000000..8615966dfb --- /dev/null +++ b/files/pt-br/web/css/id_selectors/index.html @@ -0,0 +1,124 @@ +--- +title: Seletores de ID +slug: Web/CSS/ID_selectors +tags: + - Beginner + - CSS + - CSS Reference + - Iniciante + - Referencia + - Referencia CSS + - Selectors + - Seletores +translation_of: Web/CSS/ID_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p>Em um documento HTML, os seletores de ID do CSS selecionam um elemento baseado no conteúdo de seu atributo {{htmlattrxref("ID")}}, o qual deve ser exatamente igual ao valor dado ao seletor.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">#valor_id { <em>propriedades de estilo</em> }</pre> + +<p>Note que isso é equivalente aos seguintes {{Cssxref("Attribute_selectors", "seletores de atributo")}}:</p> + +<pre class="syntaxbox">[id=valor_id] { <em>propriedades de estilo</em> }</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: css">span#identificado { + background-color: DodgerBlue; +} +</pre> + +<pre class="brush: html"><span id="identificado">Aqui um span com um pouco de texto.</span> +<span>Aqui outro.</span> +</pre> + +<p>{{EmbedLiveSample("Exemplo", 200, 50)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_Navegadores">Compatibilidade nos Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/image-set()/index.html b/files/pt-br/web/css/image-set()/index.html new file mode 100644 index 0000000000..97dc21d76e --- /dev/null +++ b/files/pt-br/web/css/image-set()/index.html @@ -0,0 +1,78 @@ +--- +title: image-set() +slug: Web/CSS/image-set() +translation_of: Web/CSS/image-set() +--- +<div>{{cssref}}</div> + +<p class="summary">A notação de função CSS <code>image-set()</code> é um método de deixar o navegador escolher a imagem CSS mais apropriada de um dado conjunto, principalmente para telas de alta densidade de pixels.</p> + +<p>Resolução e largura de banda diferem por dispositivo e acesso à rede. A função <code>image-set()</code> oferece a resolução de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de opções de imagem — cada uma com uma declaração de resolução associada — da qual o navegador escolhe o mais apropriado para o dispositivo e as configurações. A resolução pode ser usada como um proxy para o tamanho do arquivo — um agente de usuário em uma conexão móvel lenta, com uma tela de alta resolução, pode preferir receber imagens de baixa resolução em vez de aguardar uma imagem de alta resolução carregar.</p> + +<p><code>image-set()</code> permite que o autor forneça opções em vez de determinar o que cada usuário individual precisa.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">image-set() = image-set( <image-set-option># ) +where <image-set-option> = [ <image> | <string> ] <resolution> and + <string> is an <url> +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Mais comumente, você verá um valor de <code>url()</code> <code><string></code>, mas o <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> pode ser qualquer tipo de imagem, exceto para um conjunto de imagens. A função <code>image-set()</code> não pode ser aninhada dentro de outra função <code>image-set()</code>.</p> + +<p>unidades <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code> incluem <code>x </code>ou <code>ddpx,</code> para pontos por unidade de pixel, <code>dpi</code>, para pontos por polegada, e <code>dpcm</code> para pontos per centímetro. Toda imagem dentro de <code>image-set()</code> deve ter uma única resolução.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x, + "cat-2x.png" 2x);</pre> + +<p>Este exemplo mostra como usar <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> para fornecer duas opções alternativas {{cssxref("background-image")}}, escolhidas dependendo da resolução necessária: uma versão normal e uma versão de alta-resolução.</p> + +<h2 id="Preocupações_de_Acessibilidade">Preocupações de Acessibilidade</h2> + +<p>Tecnologia assistiva não pode analisar imagens de fundo. Se a imagem contiver informações críticas para entender a finalidade geral da página, é melhor descrevê-la semanticamente no documento.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificação</th> + <th>Status</th> + <th>Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre navegadores</h2> + + + +<p>{{Compat("css.types.image.image-set")}}</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{cssxref("image")}}</li> + <li>{{cssxref("_image", "image()")}}</li> + <li>{{cssxref("element")}}</li> + <li>{{cssxref("url")}}</li> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> diff --git a/files/pt-br/web/css/imagem/index.html b/files/pt-br/web/css/imagem/index.html new file mode 100644 index 0000000000..fe9631cb30 --- /dev/null +++ b/files/pt-br/web/css/imagem/index.html @@ -0,0 +1,157 @@ +--- +title: <image> +slug: Web/CSS/imagem +tags: + - CSS + - CSS imagens + - Layout + - Referencia + - Tipo de data CSS + - Web + - graficos +translation_of: Web/CSS/image +--- +<div>{{CSSRef}}</div> + +<p>O <a href="/en-US/docs/Web/CSS">tipo de data CSS </a><strong><code><image></code></strong> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("<url>")}}, e imagens geradas dinamicamente, geradas por {{cssxref("<gradient>")}} ou {{cssxref("element()")}}. Imagens podem ser usadas em inumeras propriedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("cursor")}}, e {{cssxref("list-style-image")}}.</p> + +<h2 id="Tipos_de_imagens">Tipos de imagens</h2> + +<p>CSS pode lidar com os seguintes tipos de imagens:</p> + +<ul> + <li>Imagens com <span class="short_text" id="result_box" lang="pt"><span><em>dimensões intrínsecas </em>(tamanho natural), tipo um </span></span>JPEG, PNG, ou outro <a href="https://en.wikipedia.org/wiki/Raster_graphics">formato rasterizado</a>.</li> + <li>Imagens com <em>multiplas <span class="short_text" id="result_box" lang="pt"><span>dimensões intrínsecas, </span></span></em> + <div id="gt-res-content"> + <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="pt"><span>existente em várias versões dentro de um único arquivo, como alguns formatos .ico. (Nesse caso, a </span></span><span class="short_text" id="result_box" lang="pt"><span>dimensões intrínsecas serão a largura da imagem na área e a proporção mais semelhante à caixa contendo.)</span></span></div> + </div> + </li> + <li>Imagens sem <span class="short_text" id="result_box" lang="pt"><span>dimensões intrínsecas mas com um aspecto intrínseco entre a largura e altura, como um SVG ou outro</span></span> <a href="https://en.wikipedia.org/wiki/Vector_graphics">vetor</a>.</li> + <li id="no_intrinsic">Imagens com nenhuma <span class="short_text" id="result_box" lang="pt"><span>dimensões intrínsecas, e nenhuma relação de aspecto intrínseco</span></span><span class="short_text" lang="pt"><span> </span></span>como um gradiente CSS.</li> +</ul> + +<p>CCS determina um tamanho concreto do objeto usando (1)<span class="short_text" id="result_box" lang="pt"><span> <em>suas dimensões intrínsecas;</em></span></span> (2) <span class="short_text" id="result_box" lang="pt"><span><em>seu tamanho especificado,</em> definido por propriedades CSS como</span></span> {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) <em>é o tamanho padrão,</em> <span id="result_box" lang="pt"><span>determinado pelo tipo de propriedade em que a imagem é usada</span></span>:</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Tipo de objeto</th> + <th>Tamanho do objeto padrão</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("background-image")}}</td> + <td>O tamanho da <span class="short_text" id="result_box" lang="pt"><span>área de posicionamento</span></span> do fundo do elemento<span class="short_text" id="result_box" lang="pt"><span>.</span></span></td> + </tr> + <tr> + <td>{{cssxref("list-style-image")}}</td> + <td>O tamanho de um carácter <code>1em</code></td> + </tr> + <tr> + <td>{{cssxref("border-image")}}</td> + <td>O tamanho da área da imagem da borda do elemento</td> + </tr> + <tr> + <td>{{cssxref("cursor")}}</td> + <td><span id="result_box" lang="pt"><span>O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente</span></span></td> + </tr> + <tr> + <td>{{cssxref("border-image-source")}}</td> + <td>?</td> + </tr> + <tr> + <td>{{cssxref("mask-image")}}</td> + <td>?</td> + </tr> + <tr> + <td>{{cssxref("shape-outside")}}</td> + <td>?</td> + </tr> + <tr> + <td>{{cssxref("mask-border-source")}}</td> + <td>?</td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="pt"><span>Substituí o conteúdo</span></span>, <span class="short_text" id="result_box" lang="pt"><span>como quando combinando </span></span>{{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})</td> + <td>Um 300px × 150px <span class="short_text" id="result_box" lang="pt"><span>retângulo</span></span></td> + </tr> + </tbody> +</table> + +<p>O tamanho do objeto concreto é calculado usando o seguinte algoritimo:</p> + +<ul> + <li>Se o tamanho especificado define <em>tanto a largura quanto a altura, </em>esses valores serão usado no tamanho concreto do objeto.</li> + <li>Se o tamanho especificado define apenas a largura ou a altura, o valor que falta é determind se o valor espeficiado ado usando a <span class="short_text" id="result_box" lang="pt"><span>relação intrínseca, se existir algum, as dimensões intrínsecas</span></span><span class="short_text" lang="pt"><span> se o valoer espeficicado combinar, </span></span><span class="short_text" id="result_box" lang="pt"><span>ou o tamanho do objeto padrão para esse valor ausente.</span></span></li> + <li>Se o tamanho especificado define nem largura ou altura, o tamanho concreto é calculado <span id="result_box" lang="pt"><span>de modo que corresponda à proporção intrínseca da imagem mas sem</span></span><span class="short_text" id="result_box" lang="pt"><span> exceder o tamanho padrão do objeto em qualquer dimensão. Se a imagem não tiver relação de aspecto intrínseco</span></span><span class="short_text" lang="pt"><span>, o </span></span><span class="short_text" id="result_box" lang="pt"><span>relação de aspecto intrínseco do objeto é aplicado para ser usado; se esse objeto for vazio, a largura ou altura que faltam são retirados do tamanho de objeto padrão.</span></span></li> +</ul> + +<div class="note"><strong>Nota:</strong> Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção <a href="/en-US/docs/Web/CSS/image#Browser_compatibility">compatibilidade dos navegadores </a><span class="short_text" lang="pt"><span>para mais detalhes</span></span>.</div> + +<h2 id="Sintaxe"><span class="short_text" id="result_box" lang="pt"><span>Sintaxe</span></span></h2> + +<p>O tipo de data <code><image></code> pode ser representado por qualquer item seguinte:</p> + +<ul> + <li>Uma imagem denotada pelo tipo de data {{cssxref("<url>")}}</li> + <li>Um tipo de data {{cssxref("<gradient>")}}</li> + <li>Uma parte da página web, definida pela função {{cssxref("element", "element()")}}</li> +</ul> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Imagens_válidas">Imagens válidas</h3> + +<pre>url(test.jpg) /* Uma <url>, enquanto test.jpg é uma imagem real */ +linear-gradient(blue, red) /* Um <gradient> */ +element(#realid) /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */ +</pre> + +<h3 id="Imagens_inválidas">Imagens inválidas</h3> + +<pre class="example-bad">cervin.jpg /* Um arquivo imagem deve ser definido usando a função url(). */ +url(report.pdf) /* Um arquivo apontado pela função url() deve ser uma imagem. */ +element(#fakeid) /* Um elemento ID deve ser um ID existente na página. */ +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#typedef-image', '<image>')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td><span class="short_text" id="result_box" lang="pt"><span>Adiciona</span></span> {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Definição inicial. Depois disso, não existe definição explicita do tipo de data <code><image>.</code> Imagens podem ser somente definidas usando a notação funciona <code>url()</code> .</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador"><span class="short_text" id="result_box" lang="pt"><span>Compatibilidade do navegador</span></span></h2> + +<p> </p> + + + +<p>{{Compat("css.types.image")}}</p> + +<p> </p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("element()")}}</li> +</ul> diff --git a/files/pt-br/web/css/index.html b/files/pt-br/web/css/index.html new file mode 100644 index 0000000000..95d26a6966 --- /dev/null +++ b/files/pt-br/web/css/index.html @@ -0,0 +1,99 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Estilos + - Landing + - Layout + - Referencia +translation_of: Web/CSS +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong>CSS</strong> (<strong><em>Cascading Style Sheets</em> ou Folhas de Estilo em Cascata)</strong> é uma linguagem de <a href="/pt-BR/docs/Web/API/StyleSheet">estilo</a> usada para descrever a apresentação de um documento escrito em<a href="/pt-BR/HTML" title="HTML"> HTML</a> ou em <a href="/pt-BR/docs/Glossary/XML" title="XML">XML</a> (incluindo várias linguagens em XML como <a href="/pt-BR/SVG" title="SVG">SVG</a>, <a href="/pt-BR/docs/Web/MathML">MathML</a> ou <a href="/pt-BR/XHTML">XHTML</a>). O CSS descreve como elementos são mostrados na tela, no papel, na fala ou em outras mídias.</p> + +<p>CSS é uma das principais linguagens da <strong>open web</strong> e é padronizada em navagadores web de acordo com as <a class="external" href="http://w3.org/Style/CSS/#specs">especificação da W3C</a>. Desenvolvido em níveis, o CSS1 está atualmente obsoleto, o CSS2.1 é uma recomendação e o <a href="/pt-BR/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, agora dividido em pequenos módulos, está progredindo para a sua padronização.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>Introdução CSS</span> + + <p>Se você é novo no desenvolvimento web, certifique-se de ler nosso artigo <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a> para aprender o que é CSS e como usá-lo.</p> + </li> + <li><span>Tutoriais CSS</span> + <p>Nossa <a href="/pt-BR/docs/Aprender/CSS">área de aprendizado CSS</a> contém diversos tutoriais para levá-lo do nível iniciante ao avançado, cobrindo todos os fundamentos.</p> + </li> + <li><span>Referências CSS</span> + <p>Nossa <a href="/pt-BR/docs/Web/CSS/CSS_Reference">extensa referência CSS</a> para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tutoriais">Tutoriais</h2> + +<p>Nossa <a href="/pt-BR/docs/Aprender/CSS">área de aprendizado CSS</a> contempla múltiplos módulos que ensinam CSS desde o início — não é necessário conhecimento prévio.</p> + +<p><strong><a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">Introdução ao CSS</a></strong></p> + +<p>Esse módulo inicia com o funcionamento básico do CSS, incluindo seletores e propriedades, escrever regras CSS, aplicar CSS ao HTML, como especificar comprimento, cor, e outras unidades em CSS, cascata e herança, o básico do modelo de caixas, e depuração de CSS.</p> + +<p><strong><a href="/en-US/docs/Learn/CSS/Styling_text">Estilização do texto</a></strong></p> + +<p>Esse módulo discute os fundamentos da estilização de textos, incluindo a definição de fontes, negritos, itálicos, linhas e espaçamentos de letras, sombras e outras propriedades de textos.</p> + +<p><strong><a href="/en-US/docs/Learn/CSS/Styling_boxes">Estilização de caixas</a></strong></p> + +<p>Esse módulo foca na estilização de caixas, um dos passos fundamentais para o layout de uma página web. Nesse módulo nós recapitulamos o modelo de caixas, então abordamos o controle do layout das caixas definindo margens, bordas e preenchimento, cores de fundo customizadas, imagens e outras características extravagantes como sombras e filtros em caixas.</p> + +<p><strong><a href="/pt-BR/docs/Learn/CSS/CSS_layout">Layout CSS</a></strong></p> + +<p>Neste ponto nós já vimos os fundamentos do CSS, como estilizar texto e estilizar e manipular caixas que contém seu conteúdo. Agora veremos como posicionar suas caixas no lugar certo em relação à janela de exibição e um ao outro. Nós cobrimos os pré-requisitos necessários e agora você pode se aprofundar no layout do CSS com diferentes configurações de exibição, métodos tradicionais de layout envolvendo float e posicionamento, e modernas ferramentas para layout como flexbox.</p> + +<h2 id="Referências">Referências</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Reference">Referências CSS</a>: Essa extensa referência para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.</li> + <li>Conceitos chave do CSS: + <ul> + <li>A <a href="/pt-BR/docs/Web/CSS/sintaxe">sintaxe e formas da linguagem</a></li> + <li><a href="/pt-BR/docs/Web/CSS/Specificity">Especificidade</a>, <a href="/pt-BR/docs/Web/CSS/inheritance">herança</a> e <a href="/en-US/docs/Web/CSS/Cascade">cascata</a></li> + <li><a href="/pt-BR/docs/Web/CSS/box_model">Box model</a> e <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/margin_collapsing">colapso de margem</a></li> + <li>O <a href="/en-US/docs/Web/CSS/Containing_block">containing block</a></li> + <li><a href="/pt-BR/docs/Web/Guide/CSS/Understanding_z_index/O_contexto_de_empilhamento">Empilhamento</a> e <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block-formatting context</a></li> + <li>Valores <a href="/pt-BR/docs/Web/CSS/valor_inicial">iniciais</a>, <a href="/pt-BR/docs/Web/CSS/valor_computado">computados</a>, <a href="/pt-BR/docs/Web/CSS/Valor_usado">usados</a> e <a href="/pt-BR/docs/Web/CSS/Valor_atual">reais</a></li> + <li><a href="/pt-BR/docs/Web/CSS/Shorthand_properties">Propriedades abreviadas do CSS</a></li> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li><a href="/pt-BR/docs/Web/CSS/Media_Queries">Media queries</a></li> + </ul> + </li> +</ul> +</div> + +<div class="section"> +<h2 class="Tools" id="Livro_de_receitas">Livro de receitas</h2> + +<p>O <a href="/en-US/docs/Web/CSS/Layout_cookbook">livro de receitas de layout CSS</a> tem como objetivo juntar receitas para padrões comuns de layout, coisas que você pode precisar para implementar em seus sites. Além de prover código você pode usá-lo como ponto de partida em seus projetos, essas receitas destacam as diferentes formas de utilização das especificações de layout e as escolhas que você pode fazer como desenvolvedor.</p> + +<h2 class="Tools" id="Ferramentas_para_desenvolvimento_de_CSS">Ferramentas para desenvolvimento de CSS</h2> + +<ul> + <li>Você pode usar o <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> para verificar se o seu CSS é válido. Essa é uma ferramenta indispensável de depuração.</li> + <li><a href="/pt-BR/docs/Tools">As Ferramentas do Firefox para desenvolvedores</a> permitem ver e editar o CSS de uma página ao vivo usando as ferramentas de <a href="/pt-BR/docs/Tools/Page_Inspector">Inspeção</a> e <a href="/pt-BR/docs/Tools/Style_Editor">Editor de Estilo</a>.</li> + <li><a class="link-https" href="https://addons.mozilla.org/pt-BR/firefox/addon/60">O complemento Web Developer</a> para Firefox também permite a observação e edição de CSS ao vivo dos sites visualizados.</li> + <li>A comunidade web criou várias outras<a href="/pt-BR/docs/Web/CSS/Tools"> pequenas ferramentas CSS</a> para você usar.</li> +</ul> +</div> +</div> +</section> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/Demos_of_open_web_technologies">CSS demos</a>: Inspire-se explorando criativos exemplos das mais recentes tecnologias CSS em ação.</li> + <li>Linguagens web nas quais o CSS é frequentemente aplicado: <a href="/pt-BR/docs/Web/HTML">HTML</a>, <a href="/pt-BR/docs/Web/SVG">SVG</a>, <a href="/pt-BR/docs/Web/MathML">MathML</a>, <a href="/pt-BR/docs/Web/XHTML">XHTML</a> e <a href="/pt-BR/docs/Glossary/XML">XML</a>.</li> + <li>Tecnologias Mozilla que usam extensivamente o CSS: <a href="/pt-BR/docs/XUL">XUL</a>, <a href="/pt-BR/docs/Extensions">complementos</a> e <a href="/pt-BR/Add-ons/Themes">temas</a> do <a href="/pt-BR/Firefox">Firefox</a> e <a href="/pt-BR/docs/Mozilla/Thunderbird">Thunderbird.</a></li> +</ul> diff --git a/files/pt-br/web/css/inheritance/index.html b/files/pt-br/web/css/inheritance/index.html new file mode 100644 index 0000000000..c93b19440b --- /dev/null +++ b/files/pt-br/web/css/inheritance/index.html @@ -0,0 +1,53 @@ +--- +title: Herança +slug: Web/CSS/inheritance +tags: + - CSS + - Guide + - Guía + - Web +translation_of: Web/CSS/inheritance +--- +<h2 id="Resumo">Resumo</h2> + +<p>O resumo de cada <a href="/pt-BR/docs/Web/CSS/Reference" title="Referência CSS">definição de propriedade do CSS</a> diz se tal propriedade é herdada por padrão ("Inherited": sim) ou é não herdada por padrão ("Inherited": não). Isso controla o que ocorre quando nenhum valor é especificado para uma propriedade em um elemento.</p> + +<h2 id="Propriedades_herdadas" name="Propriedades_herdadas">Propriedades herdadas</h2> + +<p>Quando nenhum valor de uma <strong>propriedade herdada</strong> foi especificado em um elemento, o elemento obtém o <a href="/pt-BR/docs/Web/CSS/computed_value" title="valor computado">valor computado</a> desta propriedade em seu elemento pai. Apenas o elemento raiz do documento obtém o <a href="/pt-BR/docs/Web/CSS/initial_value" title="valor inicial">valor inicial</a> dado no resumo da propriedade.</p> + +<p>Um exemplo típico de uma propriedade herdada é a propriedade {{ Cssxref("color") }}. Dadas as seguintes regras de estilo:</p> + +<pre class="brush: css">p { color: green }</pre> + +<p>e o markup:</p> + +<pre class="brush: html"><p>Este paragrafo tem <em>texto enfatizado</em> dentro dele.</p></pre> + +<p>As palavras "texto enfatizado" vão aparecer em verde, já que o elemento <code>em</code> herdou o valor da propriedade {{ Cssxref("color") }} do elemento <code>p</code>. Ele <em>não</em> obtém o valor inicial da propriedade (o qual é a cor usada pelo elemento raiz quando a página não especifica nenhuma cor).</p> + +<h2 id="Propriedades_nao_herdadas" name="Propriedades_nao_herdadas">Propriedades não herdadas</h2> + +<p>Quando nenhum valor para uma <strong>propriedade não herdada</strong> (algumas vezes chamada de <strong>reset property</strong> em código Mozilla) é especificado em um elemento, o elemento obtém o <a href="/pt-BR/docs/CSS/initial_value" title="valor inicial">valor inicial</a> desta propriedade (como especificado no resumo da propriedade).</p> + +<p>Um exemplo típico de uma propriedade não herdada é a propriedade {{ Cssxref("border") }}. Dadas as seguintes regras de estilo:</p> + +<pre class="brush: css"> p { border: medium solid }</pre> + +<p>e o markup</p> + +<pre class="brush: html"> <p>Este paragrafo tem <em>texto enfatizado</em> dentro dele.</p></pre> + +<p>As palavras "texto enfatizado" não vão ter uma borda (já que o valor inicial de {{ Cssxref("border-style") }} é <code>none</code>).</p> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>A palavra-chave {{ Cssxref("inherit") }} permite aos autores especificar explicitamente a herança. Ela funciona tanto em propriedades herdadas como não herdadas.</p> + +<h2 id="Veja_tambem" name="Veja_tambem">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/CSS/Reference" title="Referência CSS">Referência CSS</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li>{{ Cssxref("inherit") }}</li> +</ul> diff --git a/files/pt-br/web/css/initial/index.html b/files/pt-br/web/css/initial/index.html new file mode 100644 index 0000000000..71d1c66431 --- /dev/null +++ b/files/pt-br/web/css/initial/index.html @@ -0,0 +1,80 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - Estado inicial + - Herança + - Iniciante + - Referencia + - User-agent + - estado padrão +translation_of: Web/CSS/initial +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">A palavra-chave CSS <strong><code>initial</code></strong> CSS se aplica ao <a href="/pt-BR/docs/Web/CSS/initial_value">valor inicial (ou padrão)</a> de uma propriedade para um elemento. Este valor inicial é definido pelo navegador. Este valor pode ser aplicado em qualquer propriedade CSS.</span> Isto inclui também o atalho CSS {{cssxref("all")}}, no qual o <code>initial</code> pode ser utilizado para restaurar todas as propriedades CSS para o seu estado inicial.</p> + +<div class="note"> +<p><strong>Nota:</strong> Em <a href="/pt-BR/docs/Web/CSS/inheritance#propriedades_herdadas">propriedades herdadas</a>, O valor inicial pode ser inesperado. Neste caso, considere o uso dos termos {cssxref("inherit")}}, {{cssxref("unset")}}, ou {{cssxref("revert")}}.</p> +</div> + +<h2 id="Exemplo">Exemplo</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + <span>Este texto é vermelho.</span> + <em>Este texto está em sua cor inicial (normalmente preto).</em> + <span>Este texto está em vermelho de novo :) </span> +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p { + color: red; +} + +em { + color: initial; +}</pre> + +<p>{{EmbedLiveSample('Exemplo')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}</td> + <td>{{Spec2('CSS4 Cascade')}}</td> + <td>No changes from Level 3.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td> + <td>{{Spec2('CSS3 Cascade')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("css.types.global_keywords.initial")}}</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>Utilize {{cssxref("unset")}} para definir uma propriedade para o seu valor herdado caso haja herança, ou para o seu valor inicial, caso não haja..</li> + <li>Utilize {{cssxref("revert")}} para redefinir uma propriedade ao valor estabelecido pela folha de estilo <a href="/en-US/docs/Web/HTTP/Headers/User-Agent">user-agent</a> (ou por seus estilos de usuário, se existir algum).</li> + <li>Utilize {{cssxref("inherit")}} para fazer uma propriedade de elemento a mesma de seu elemento pai.</li> + <li>A propriedade {{cssxref("all")}} permite que você redefina todas as propriedades para os seus estados initial, inherited, reverted, or unset de uma vez.</li> +</ul> diff --git a/files/pt-br/web/css/inline-size/index.html b/files/pt-br/web/css/inline-size/index.html new file mode 100644 index 0000000000..0d8dcb62a1 --- /dev/null +++ b/files/pt-br/web/css/inline-size/index.html @@ -0,0 +1,93 @@ +--- +title: inline-size +slug: Web/CSS/inline-size +translation_of: Web/CSS/inline-size +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>A propriedade do <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inline-size</code></strong> define o tamanho horizontal e vertical de um elemento bloco. Ele é correspondente a cada propriedade {{cssxref("width")}} ou a {{cssxref("height")}}, dependendo do valor de {{cssxref("writing-mode")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inline-size: 300px; +inline-size: 25em; + +/* <percentage> values */ +inline-size: 75%; + +/* Keyword values */ +inline-size: 25em border-box; +inline-size: 75% content-box; +inline-size: max-content; +inline-size: min-content; +inline-size: available; +inline-size: fit-content; +inline-size: auto; + +/* Global values */ +inline-size: inherit; +inline-size: initial; +inline-size: unset; +</pre> + +<p>Se o writing mode é orientado verticalmente, o valor de <code>inline-size</code> relaciona a altura do elemento; ao contrário, está relacionado a largura do elemento. A propriedade relacionada é a {{cssxref("block-size")}}, no qual define a outra dimensão do elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<h3 id="Valores">Valores</h3> + +<p>A propriedade <code>inline-size</code> aproveita os mesmos valores que as propriedades {{cssxref("width")}} e {{cssxref("height")}}.</p> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="exampleText">Texto de Exemplo</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.exampleText{ + writing-mode: vertical-rl; + background-color: yellow; + inline-size: 110px; +}</pre> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegador">Compatibilidade com Navegador</h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada por dados estruturados. Se você gostaria de contribuir com esses dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie nos um pull request.</div> + +<p>{{Compat("css.properties.inline-size")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>As propriedades físicas mapeadas: {{cssxref("width")}} e {{cssxref("height")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> diff --git a/files/pt-br/web/css/isolation/index.html b/files/pt-br/web/css/isolation/index.html new file mode 100644 index 0000000000..49c169d491 --- /dev/null +++ b/files/pt-br/web/css/isolation/index.html @@ -0,0 +1,154 @@ +--- +title: isolation +slug: Web/CSS/isolation +translation_of: Web/CSS/isolation +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>isolation</code></strong> define se o elemento deve criar um novo {{glossary("stacking context")}}.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +isolation: auto; +isolation: isolate; + +/* Global values */ +isolation: inherit; +isolation: initial; +isolation: unset; +</pre> + +<p>É especialmente útil em conjunto com {{cssxref("background-blend-mode")}} que mistura os fundos em um dado stacking context: ela permite isolar grupos de elementos dos seus fundos e misturar as suas cores.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Uma das palavras-chave listadas abaixo.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>É uma palavra-chave indicando que um novo stacking context deve ser criado somente se uma das propriedades aplicadas ao elemento requererem.</dd> + <dt><code>isolate</code></dt> + <dd>É uma palavra-chave indicando que um novo stacking context deve ser criado.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><div id="b" class="a"> + <div id="d"> + <div class="a c">auto</div> + </div> + <div id="e"> + <div class="a c">isolate</div> + </div> +</div> +</pre> + +<pre class="brush: css">.a { + background-color: rgb(0,255,0); +} +#b { + width: 200px; + height: 210px; +} +.c { + width: 100px; + height: 100px; + border: 1px solid black; + padding: 2px; + mix-blend-mode: difference; +} +#d { + isolation: auto; +} +#e { + isolation: isolate; +}</pre> + +<p>{{ EmbedLiveSample('Examples', "230", "230") }}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#isolation', 'Isolation') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{CompatGeckoDesktop('36')}}</td> + <td>{{CompatNo()}}</td> + <td>30</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{CompatGeckoMobile('36')}}</td> + <td>{{CompatNo()}}</td> + <td>36</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li> +</ul> diff --git a/files/pt-br/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/pt-br/web/css/layout_cookbook/breadcrumb_navigation/index.html new file mode 100644 index 0000000000..6f478482a9 --- /dev/null +++ b/files/pt-br/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -0,0 +1,57 @@ +--- +title: Navegação "Migalha de Pão" +slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +tags: + - CSS + - Layout + - Migalha de pão + - Navegação + - cookbook + - flexbox +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +<div>{{CSSRef}}</div> + +<p class="summary">A navegação "migalha de pão" ajuda o usuário a enteder sua localização no site, fornecendo uma trilha de navegação de volta à pagina inicial.</p> + +<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p> + +<h2 id="Exigências">Exigências</h2> + +<p>Os itens tipicamente são exibidos em linha com um separador para indicar uma hierarquia entre páginas individuais.</p> + +<h2 id="Receita">Receita</h2> + +<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p> + +<div class="note"> +<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Baixe esse examplo</a></p> +</div> + +<h2 id="Faça_escolhas">Faça escolhas</h2> + +<p>Esse padrão é apresentado usando um layout flexível simples demonstrando como uma linha de CSS pode nos fornecer nossa navegação. Os separadores são adicionados usando o conteúdo gerado por CSS. Você pode alterá-las para qualquer separador que desejar.</p> + +<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2> + +<p>Eu utilizei os atributos <code>aria-label</code> e <code>aria-current</code> para ajudar os usuários a entender o que é essa navegação e onde a página atual está na estrutura. Veja os links relacionados para mais informações.</p> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<p>Os vários métodos de layout têm diferente suporte para o navegador. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.</p> + +<div class="hidden"> +<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nós envie seu pull request.</p> +</div> + +<h4 id="Flexbox">Flexbox</h4> + +<p>{{Compat("css.properties.flex")}}</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Fornecendo uma trilha de "migalha de pão"</a></li> + <li><a href="https://tink.uk/using-the-aria-current-attribute/">Usando o atributo aria-current</a></li> +</ul> diff --git a/files/pt-br/web/css/layout_cookbook/index.html b/files/pt-br/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..c829a8e4d3 --- /dev/null +++ b/files/pt-br/web/css/layout_cookbook/index.html @@ -0,0 +1,85 @@ +--- +title: CSS Layout cookbook +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - Layout + - livro de receitas + - receitas +translation_of: Web/CSS/Layout_cookbook +--- +<div>{{CSSRef}}</div> + +<p class="summary">O livro de receitas (Cookbook) de layout CSS visa reunir receitas para padrões de layout comuns, coisas que você pode precisar implementar em seus próprios sites. Além de fornecer código que você pode usar como ponto de partida em seus projetos, essas receitas destacam as diferentes maneiras pelas quais as especificações de layout podem ser usadas e as escolhas que você pode fazer como desenvolvedor.</p> + +<div class="note"> +<p><strong>Note</strong>: Se você é novo no layout CSS, então primeiro você pode dar uma olhada em nosso módulo de aprendizado de layout CSS, pois isso lhe dará o básico de que você precisa para usar as receitas aqui.</p> +</div> + +<h2 id="As_Receitas">As Receitas</h2> + +<table class="standard-table" style="height: 543px; width: 1188px;"> + <thead> + <tr> + <th scope="col">Recipe</th> + <th scope="col">Description</th> + <th scope="col">Layout Methods</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></td> + <td>Uma caixa de duas colunas com uma imagem de um lado e um texto descritivo do outro, por ex. um post no facebook ou um tweet.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td> + <td>Quando escolher layout de múltiplas colunas, flexbox ou grid para suas colunas.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td> + <td>Como centralizar um item horizontalmente e verticalmente.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td> + <td>Criando um rodapé que fica na parte inferior do contêiner ou viewport quando o conteúdo é menor.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></td> + <td>Um padrão de navegação em que alguns links são visualmente separados dos outros.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></td> + <td>Criando uma lista de links para permitir que o visitante navegue de volta pela hierarquia da página.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></td> + <td>Uma lista de itens com um acessório para exibir uma contagem.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td> + <td>Links para páginas de conteúdo (como resultados de pesquisa).</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></td> + <td>Um componente de notas/cartão, exibido em uma grade de notas/cartão.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></td> + <td>Para alinhar o conteúdo da grade em um wrapper central, ao mesmo tempo em que permite que os itens sejam quebrados.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a></td> + </tr> + </tbody> +</table> + +<h2 id="Contribuir_com_uma_receita">Contribuir com uma receita</h2> + +<p>Como com todo o MDN, gostaríamos que você contribuísse com uma receita no mesmo formato que os mostrados acima. Veja esta página para um modelo e diretrizes para escrever seu próprio exemplo.</p> diff --git a/files/pt-br/web/css/layout_cookbook/media_objects/index.html b/files/pt-br/web/css/layout_cookbook/media_objects/index.html new file mode 100644 index 0000000000..d62d36fb4e --- /dev/null +++ b/files/pt-br/web/css/layout_cookbook/media_objects/index.html @@ -0,0 +1,80 @@ +--- +title: 'Recipe: Media objects' +slug: Web/CSS/Layout_cookbook/Media_objects +translation_of: Web/CSS/Layout_cookbook/Media_objects +--- +<div>{{CSSRef}}</div> + +<p class="summary">O <em>Media Object</em> (Objeto de Mídia) é um padrão que vemos em toda web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Nomeado por Nicole Sullivan</a> refere-se a uma caixa de duas colunas com uma imagem de um lado e texto descritivo do outro, por ex. uma postagem no facebook ou tweet.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p> + +<h2 id="Exigências">Exigências</h2> + +<p>O Padrão Media Object precisa de algumas ou todas as seguintes características:</p> + +<ul> + <li>Empilhados no Celular, duas colunas no Computador.</li> + <li>A imagem pode estar à esquerda ou à direita.</li> + <li>A imagem pode ser pequena ou grande.</li> + <li>Media Objects (Objetos de Mídia) podem ser aninhados.</li> + <li>O Media Object deve limpar o conteúdo, não importando o tamanho.</li> +</ul> + +<h2 id="A_receita">A receita</h2> + +<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p> + +<div class="note"> +<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Download this example</a></p> +</div> + +<h2 id="Escolhas_feitas">Escolhas feitas</h2> + +<p>Eu escolhi usar o <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Layout de Grade </a>para o Media Object (Objeto de Layout), pois ele permite controlar o layout em duas dimensões quando preciso. Isso significa que, quando temos um rodapé, com conteúdo curto acima, o rodapé pode ser empurrado para a parte inferior do Media Object (Objeto de Layout).</p> + +<p>Outro motivo para usar o Layout de Gride é para que eu possa usar {{cssxref("fit-content")}} para o tamanho da faixa de imagem. Usando <code>fit-content</code> com um tamanho máximo de 200 pixels, quando temos uma imagem pequena como o ícone, a faixa fica tão grande quanto o tamanho dessa imagem — o tamanho <code>max-content</code>. Se a imagem for maior, a faixa para de crescer em 200 pixels e, como a imagem possui {{cssxref("max-width ")}} de 100% aplicado, ele diminui para que continue a caber dentro da coluna.</p> + +<p>Usando {{cssxref("grid-template-areas")}} para alcançar o layout, eu posso ver o padrão no CSS. Eu defino minha grade quando tivermos uma largura máxima de 500 pixels, em dispositivos menores o Media Object empilha.</p> + +<p>Uma opção para o padrão é girá-lo para mudar a imagem para o outro lado — isso é feito adicionando a classe <code>media-flip</code>, que define um modelo de grade invertida, fazendo com que o layout seja espelhado.</p> + +<p>Quando aninhamos um media object (Objeto de Layout) dentro do outro, precisamons colocá-lo na segunda faixa no layout regular, e na primeira faixa quando invertida.</p> + +<h2 id="Fallbacks_Alternativas_Plano_B">Fallbacks (Alternativas, Plano B)</h2> + +<p>Existem várias alternativas possíveis para esse padrão, dependendo dos navegadores que você deseja oferecer suporte. Um bom exemplo seria flutuar a imagem para a esquerda e adicionar uma correção clara à caixa para garantir que ela contivesse as flutuações.</p> + +<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p> + +<div class="note"> +<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Baixe este examplo</a></p> +</div> + +<p>Depois que os elementos flutuantes se tornam itens da grade, o flutuador não se aplica mais; portanto, você não precisa fazer nada de especial para limpá-lo.</p> + +<p>O que você precisará fazer é remover as margens aplicadas ao item e as larguras que não precisamos em um contexto de grade (nós temos o {{cssxref("gap")}} propriedade para controlá-lo em grades, e a faixa assume o controle do dimensionamento).</p> + +<h2 id="Recursos_relevantes_no_MDN">Recursos relevantes no MDN</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Layout Grade CSS </a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Aprimoramento progressivo e Layout de Grid</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Usando áreas de modelo de Grade</a></li> + <li><a href="/en-US/docs/Web/CSS/fit-content">Conteúdo Adequado</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de Modelo de Grade</a></li> +</ul> + +<h2 id="Compatibilidade_do_Navegador">Compatibilidade do Navegador</h2> + +<p>Os vários métodos de layout tem suporte diferente para os navegadores. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.</p> + +<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</p> + +<h4 id="Áreas_de_Modelo_de_Grade">Áreas de Modelo de Grade</h4> + +<p>{{Compat("css.properties.grid-template-areas")}}</p> + +<h4 id="Flutuador">Flutuador</h4> + +<p>{{Compat("css.properties.float")}}</p> diff --git a/files/pt-br/web/css/letter-spacing/index.html b/files/pt-br/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..11ae4a85d0 --- /dev/null +++ b/files/pt-br/web/css/letter-spacing/index.html @@ -0,0 +1,118 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +translation_of: Web/CSS/letter-spacing +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>letter-spacing</code></strong> específica o comportamento do espaçamento entre caracteres de texto.</p> + +<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* Keyword value */ +letter-spacing: normal; + +/* <length> values */ +letter-spacing: 0.3em; +letter-spacing: 3px; +letter-spacing: .3px; + +/* Global values */ +letter-spacing: inherit; +letter-spacing: initial; +letter-spacing: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>O espaçamento de letras normal para a fonte atual. Ao contrário de um valor de 0, essa palavra-chave permite que o {{glossary("agente do usuário")}} altere o espaço entre os caracteres para justificar o texto.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>Especifica o espaço adicional entre caracteres, além do espaço padrão entre os caracteres. Os valores podem ser negativos, mas pode haver limites específicos da implementação. Os agentes de usuário podem não aumentar ou diminuir o espaço inter-personagem para justificar o texto.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="normal">letter spacing</p> +<p class="em-wide">letter spacing</p> +<p class="em-wider">letter spacing</p> +<p class="em-tight">letter spacing</p> +<p class="px-wide">letter spacing</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.normal { letter-spacing: normal; } +.em-wide { letter-spacing: 0.4em; } +.em-wider { letter-spacing: 1em; } +.em-tight { letter-spacing: -0.05em; } +.px-wide { letter-spacing: 6px; } +</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Examples', 440, 185) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>letter-spacing</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial SVG definition.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.letter-spacing")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{cssxref("font-kerning")}}</li> +</ul> diff --git a/files/pt-br/web/css/line-break/index.html b/files/pt-br/web/css/line-break/index.html new file mode 100644 index 0000000000..5a66eb6999 --- /dev/null +++ b/files/pt-br/web/css/line-break/index.html @@ -0,0 +1,64 @@ +--- +title: line-break +slug: Web/CSS/line-break +translation_of: Web/CSS/line-break +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>A propriedade CSS <strong><code>line-break</code></strong> é usada para especificar como (ou se) quebrar linhas.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* Keyword values */ +line-break: auto; +line-break: loose; +line-break: normal; +line-break: strict; + +/* Valores Globais */ +line-break: inherit; +line-break: initial; +line-break: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>quebra o texto usando a regra padrão de quebra de linha.</dd> + <dt><code>loose</code></dt> + <dd>quebra o texto usando a regra de quebra de linha que é mais curta, como um jornal.</dd> + <dt><code>normal</code></dt> + <dd>quebra o texto usando a regra padrão de quebra de linha.</dd> + <dt><code>strict</code></dt> + <dd>quebra o texto usando uma regra rigorosa para a quebra de linha.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + +<p>{{Compat("css.properties.line-break")}}</p> diff --git a/files/pt-br/web/css/margin-bottom/index.html b/files/pt-br/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..a2990e2ba6 --- /dev/null +++ b/files/pt-br/web/css/margin-bottom/index.html @@ -0,0 +1,135 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +translation_of: Web/CSS/margin-bottom +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>margin-bottom</code></strong> define a <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">margin area</a> na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div> + +<p class="hidden">A fonte desse exemplo interativo é armazenada em um repositório do GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envia um pull request</p> + +<p><img alt="The effect of the CSS margin-bottom property on the element box" src="/files/4045/margin-bottom.svg" style="border: 1px solid; display: block; height: 130px; margin-left: auto; margin-right: auto; width: 400px;"></p> + +<p>A propriedade não tem efeito em non-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced</a> elementos inline, como {{HTMLElement("span")}} ou {{HTMLElement("code")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +margin-bottom: 10px; /* Um tamanho absoluto */ +margin-bottom: 1em; /* relativo ao tamanho do texto */ +margin-bottom: 5%; /* relativo à largura do container do bloco mais próximo */ + +/* Keyword values */ +margin-bottom: auto; + +/* Global values */ +margin-bottom: inherit; +margin-bottom: initial; +margin-bottom: unset; +</pre> + +<p>A propriedade <code>margin-bottom</code> é especificada como a palavra chave <code>auto</code>, ou a <code><length></code>, ou a<code><percentage></code>. Esse valor pode ser positivo, zero ou negativo</p> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>O tamanho de uma margin com um valor fixo</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>O tamanho de uma margin como porcentagem, é relativa com o <em>tamanho</em> do bloco pai.</dd> + <dt><code>auto</code></dt> + <dd>O navegador seleciona um valor adequado para usar. Veja {{cssxref("margin")}}.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="container"> +<div class="box0">Box 0</div> +<div class="box1">Box 1</div> +<div class="box2">Box one's negative margin pulls me up</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<p>CSS para definir margin-bottom e height</p> + +<pre class="brush: css">.box0 { + margin-bottom:1em; + height:3em; +} +.box1 { + margin-bottom:-1.5em; + height:4em; +} +.box2 { + border:1px dashed black; + border-width:1px 0; + margin-bottom:2em; +} + +</pre> + +<p>Algumas definições para container e divs, para que o os efeitos de margin possam ser vistos com mais clareza</p> + +<pre class="brush: css">.container { + background-color:orange; + width:320px; + border:1px solid black; +} +div { + width:320px; + background-color:gold; +}</pre> + +<p>{{ EmbedLiveSample('Example',350,200) }}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Nenhuma mudança significativa</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definir o <code>margin-bottom</code> como "animavel"</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Remove seu efeito nos elementos in-line.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade dos Browsers</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request</div> + +<p>{{Compat("css.properties.margin-bottom")}}</p> diff --git a/files/pt-br/web/css/margin-top/index.html b/files/pt-br/web/css/margin-top/index.html new file mode 100644 index 0000000000..5151416465 --- /dev/null +++ b/files/pt-br/web/css/margin-top/index.html @@ -0,0 +1,145 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +translation_of: Web/CSS/margin-top +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p><img alt="The effect of the CSS margin-top property on the element box" src="/files/4101/margin-top.svg" style="border-style: solid; border-width: 1px; float: left; margin-bottom: 2em; margin-right: 1em;"><span class="seoSummary">A propriedade CSS <strong><code>margin-top</code></strong> de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.</span></p> + +<p><span class="seoSummary">Essa propriedade não tem efeito em <em>elementos non-replaced</em> inline elements, como {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush:css">/* Valores <length> */ +margin-top: 10px; /* An absolute length */ +margin-top: 1em; /* A length relative to the text size */ +margin-top: 5%; /* A margin relative to the nearest block container's width */ + +/* Valores padrão */ +margin-top: auto; + +/* Valores globais */ +margin-top: inherit; +margin-top: initial; +margin-top: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Especifica um tamanho fixo. Veja {{cssxref("<length>")}} para possíveis valores.</dd> + <dt><code><porcentagem></code></dt> + <dd>Um {{cssxref("<percentage>")}} sempre relativo ao <strong>width</strong> do bloco.</dd> + <dt><code>auto</code></dt> + <dd>Veja {{cssxref("margin")}}.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush:css;">.content { margin-top: 5%; } +.sidebox { margin-top: 10px; } +.logo { margin-top: -5px; } +#footer { margin-top: 1em; } +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Sem mudança significativa.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Define <code>margin-top</code> como animável.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Remove esse efeito em elementos inline.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>Valor auto</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/margin/index.html b/files/pt-br/web/css/margin/index.html new file mode 100644 index 0000000000..037d22b5b0 --- /dev/null +++ b/files/pt-br/web/css/margin/index.html @@ -0,0 +1,172 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <strong><code>margin</code></strong> do <a href="/pt-BR/docs/Web/CSS" title="CSS">CSS</a> define a <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">área de margem</a> nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, e {{cssxref("margin-left")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div> + +<p class="hidden">O código fonte para este exemplo interativo está armazenado em um repositório GitHub. Se você desejar contribuir para o projeto de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um <em>pull request</em>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers">/* Aplica para todos os quatro lados */ +margin: 1em; + +/* vertical | horizontal */ +margin: 5% auto; + +/* topo | horizontal | inferior */ +margin: 1em auto 2em; + +/* topo | direita | inferior | esquerda */ +margin: 2px 1em 0 auto; + +/* Valores globais */ +margin: inherit; +margin: initial; +margin: unset; +</pre> + +<p>A propriedade <code>margin</code> pode ser especificada usando um, dois, três ou quatro valores. Cada valor deve ser um <code><a href="#<length>"><length></a></code>, uma <code><a href="#<percentage>"><percentage></a></code>, ou a palavra-chave <code><a href="#auto">auto</a></code>. Cada valor pode ser positivo, zero ou negativo.</p> + +<ul> + <li>Quando <strong>um</strong> valor é especificado, a mesma margem é aplicada para <strong>todos os quatro lados</strong>.</li> + <li>Quando <strong>dois</strong> valores são especificados, a primeira margem é aplicada aos <strong>lados</strong> <strong>superior e inferior,</strong> e a segunda aos <strong>lados</strong> <strong>esquerdo e direito</strong>.</li> + <li>Quando <strong>três</strong> valores são especificados, a primeira margem é apliacada ao <strong>topo</strong>, a segunda aos <strong>lados</strong> <strong>esquerdo e direito</strong>, e a terceira ao <strong>lado</strong> <strong>inferior</strong>.</li> + <li>Quando <strong>quatro</strong> valores são especificados, as margens são aplicadas aos lados <strong>superior</strong>, <strong>direito</strong>, <strong>inferior</strong> e <strong>esquerdo</strong>, nesta ordem (sentido horário).</li> +</ul> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><strong>{{cssxref("length")}}</strong></dt> + <dd>O tamanho da margem como um valor fixo.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>O tamanho da margem como um percetual, relativo à <em>largura</em> do bloco em que o elemento está contido.</dd> + <dt><code>auto</code></dt> + <dd>O navegador seleciona uma margem adequada para utilizar. Por exemplo, em alguns casos este valor pode ser utilizado para centralizar o elemento.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_simples">Exemplo simples</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="center">Este elemento está centralizado.</div> + +<div class="outside">Este elemento está posicionado fora de seu bloco recipiente.</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2,8]">.center { + margin: auto; + background: lime; + width: 66%; +} + +.outside { + margin: 3rem 0 0 -3rem; + background: cyan; + width: 66%; +}</pre> + +<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p> + +<h3 id="Mais_exemplos">Mais exemplos</h3> + +<pre class="brush: css">margin: 5%; /* todos os lados: margem de 5% */ + +margin: 10px; /* todos os lados: margem de 10px */ + +margin: 1.6em 20px; /* topo e inferior: margem de 1.6em */ + /* esquerda e direita: margem de 20px */ + +margin: 10px 3% 1em; /* topo: margem de 10px */ + /* esquerda e direita: margem de 3% */ + /* inferior: margem de 1em */ + +margin: 10px 3px 30px 5px; /* topo: margem de 10px */ + /* direita: margem de 3px */ + /* inferior: margem de 30px */ + /* esquerda: margem de 5px */ + +margin: 2em auto; /* topo e inferior: margem de 2em */ + /* caixa está horizontalmente centralizada */ + +margin: auto; /* topo e inferior: margem de 0 */ + /* caixa está horizontalmente centralizada */ +</pre> + +<h2 id="Notas">Notas</h2> + +<h3 id="Centralização_horizontal">Centralização horizontal</h3> + +<p>Para centralizar algo horizontalmente em navegadores modernos, você pode utilizar <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code></p> + +<p>Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox, estes não estão disponíveis. Para centralizar um elemento dentro de seu pai, use <code>margin: 0 auto;</code> .</p> + +<h3 id="Colapso_de_margens">Colapso de margens</h3> + +<p>Às vezes, as margens superior e inferior de elementos são colapsadas em uma única margem que é igual à maior das duas margens. Veja <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/margin_collapsing">Dominando margin collapsing</a> para mais informações.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>Nenhuma mudança significativa.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Define <code>margin</code> como animável.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Remove seu efeito em elementos <em>inline</em>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div class="hidden">A tabela de compatibildade nesta página é gerada de um dados estruturados. Se você desejar contribuir com estes dados, por favor, faça <em>check out</em> do <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um <em>pull request</em>.</div> + +<p>{{Compat("css.properties.margin")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li> + <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Margin collapsing</a></li> +</ul> diff --git a/files/pt-br/web/css/max-width/index.html b/files/pt-br/web/css/max-width/index.html new file mode 100644 index 0000000000..b734872b64 --- /dev/null +++ b/files/pt-br/web/css/max-width/index.html @@ -0,0 +1,200 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - Dimensões + - Layout + - Limites + - Máximo + - Propriedade CSS + - Referencia + - largura + - max-width + - 'receita:propriedade-css' + - tamanho +translation_of: Web/CSS/max-width +--- +<div>{{CSSRef}}</div> + +<div>A propriedade <strong><code>max-width</code></strong> do <a href="/en-US/docs/CSS">CSS</a> estabelece a largura máxima de um elemento. Ele evita que o <a href="/en-US/docs/Web/CSS/used_value">valor usado</a> da propriedade {{ cssxref("width") }} se torne maior que o valor especificado por <code>max-width</code>.</div> + +<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div> + +<p class="hidden">O código dos exemplos interativos está armazenado em um repositório GitHub. Se você gostaria de contribuir com o projeto exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</p> + +<p><code>max-width</code> substitui {{cssxref("width")}}, mas {{cssxref("min-width")}} substitui <code>max-width</code>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css no-line-numbers notranslate">/* <length> valor */ +max-width: 3.5em; + +/* <porcentagem> valor */ +max-width: 75%; + +/* Valores de keyword */ +max-width: none; +max-width: max-content; +max-width: min-content; +max-width: fit-content; +max-width: fill-available; + +/* Valores Globais */ +max-width: inherit; +max-width: initial; +max-width: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Define a <code>max-width</code> como um valor absoluto.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Define a <code>max-width</code> como uma porcentagem da largura do bloco que o contém.</dd> +</dl> + +<h4 id="Valores_Keyword">Valores Keyword</h4> + +<dl> + <dt><code>none</code></dt> + <dd>A largura não possui valor máximo. (padrão)</dd> + <dt><code>max-content</code>{{experimental_inline()}}</dt> + <dd>A <code>max-width</code> intrínseca preferida.</dd> + <dt><code>min-content</code>{{experimental_inline()}}</dt> + <dd>O mínimo <code>max-width</code> intrínseco.</dd> + <dt><code>fit-content({{cssxref("<length-percentage>")}})</code></dt> + <dd>Use a fórmula <code>fit-content</code> com o espaço disponível substituído pelo argumento especificado, i.e. <code>min(max-content, max(min-content, <em>argumento</em>)).</code></dd> +</dl> + +<h4 id="Preocupações_de_Acessibilidade">Preocupações de Acessibilidade</h4> + +<p>Certifique-se que os elementos definidos com <code>max-width</code> não sejam truncados e/ou não obscureçam outros conteúdos quando a página for ampliada para aumentar o tamanho do texto.</p> + +<dl> + <dt><code>fill-available</code>{{experimental_inline()}}</dt> + <dd>A largura contida do bloco sem o margin, border e padding horizontal. (Note que alguns navegadores implementaram um nome antigo para essa keyword, <code>available</code>.)</dd> + <dt><code>fit-content</code>{{experimental_inline()}}</dt> + <dd>O mesmo que <code>max-content.</code></dd> +</dl> + +<h4 id="Sintaxe_formal">Sintaxe formal</h4> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h4 id="Exemplos">Exemplos</h4> + +<h3 id="Definindo_a_largura_máxima_em_pixels">Definindo a largura máxima em pixels</h3> + +<p>Neste exemplo, o "filho" terá 150 pixels de largura ou a largura do "pai", o que for menor:</p> + +<div id="basic-max-width-demo"> +<pre class="brush: html notranslate"><div id="pai"> + <div id="filho"> + Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. + </div> +</div> +</pre> + +<pre class="brush: css notranslate">#pai { + background: lightblue; + width: 300px; +} + +#filho { + background: gold; + width: 100%; + max-width: 150px; +} +</pre> +</div> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("<code>Setting_max_width_in_pixels</code>", 350, 100)}}</p> + + + + + + + +<p>O valor de <code>fit-content</code> pode ser usado para atribuir o comprimento de um elemento no tamanho intrínseco necessário pelo seu conteúdo:</p> + +<div id="fit-content-demo"> +<pre class="brush: html notranslate" style="display: none;"><div id="parent"> + <div id="child"> + Child Text + </div> +</div> +</pre> + +<pre class="brush: css notranslate">#parent { + background: lightblue; + width: 300px; +} + +#child { + background: gold; + width: 100%; + max-width: -moz-fit-content; + max-width: -webkit-fit-content; +} +</pre> +</div> + +<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p> + +<h2 id="Preocupações_de_acessibilidade">Preocupações de acessibilidade</h2> + +<p>Garantir que os elementos atribuidos com <code>max-width</code> não estejam cortados e/ou não obscureça outro conteúdo quando a página é ampliada para aumentar o tamanho do texto. </p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Adiciona o <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, e <code>fill-available</code> keywords.<em> </em>(Ambos CSS3 Box e CSS3 Writing Modes são rascunhos usados para definir essas keywords, mas foram substituídas por essa especificação.<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Define <code>max-width</code> como animável.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade com navegador</h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada por dados estruturados. Se você gostaria de contribuir com esses dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie nos um pull request.</div> + +<p>{{Compat("css.properties.max-width")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li> + <li><a href="/en/CSS/box_model" title="en/CSS/box_model">The box model</a>, {{ Cssxref("box-sizing") }}</li> +</ul> diff --git a/files/pt-br/web/css/media_queries/index.html b/files/pt-br/web/css/media_queries/index.html new file mode 100644 index 0000000000..6cdfdb621f --- /dev/null +++ b/files/pt-br/web/css/media_queries/index.html @@ -0,0 +1,118 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - Design Responsivo + - Media Queries + - Referencia + - media query +translation_of: Web/CSS/Media_Queries +--- +<div>{{CSSRef}}</div> + +<p><strong>Media Queries</strong> (consultas de mídia ) são um módulo de CSS que definem expressões, permitindo ajustar visualizações a uma variedade específica de dispositivos de saída sem mudar o conteúdo.</p> + +<h2 id="Referências">Referências</h2> + +<h3 id="At-rules">At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@import")}}</li> + <li>{{cssxref("@media")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries">Usando Media Queries</a></dt> + <dd>Apresenta o que fazem as media queries (consultas de mídia) e explica as possíveis expressões.</dd> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt> + <dd>Explains how to test a media query programmatically, from JavaScript.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop(1.7)}}</td> + <td>9.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.7)}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/microsoft_extensions/index.html b/files/pt-br/web/css/microsoft_extensions/index.html new file mode 100644 index 0000000000..5779ec6065 --- /dev/null +++ b/files/pt-br/web/css/microsoft_extensions/index.html @@ -0,0 +1,114 @@ +--- +title: Extensões CSS da Microsoft +slug: Web/CSS/Microsoft_Extensions +translation_of: Web/CSS/Microsoft_Extensions +--- +<div>{{CSSRef}}</div> + +<p><font>Aplicativos da Microsoft, como Edge e Internet Explorer, suportam uma série de extensões especiais da <strong>Microsoft para <a href="/en-US/docs/Web/CSS">css</a></strong>. Essas extensões são prefixadas com .</font><code>-ms-</code></p> + +<h2 id="Propriedades_somente_para_Microsoft_evite_usar_em_sites">Propriedades somente para Microsoft (evite usar em sites)</h2> + +<div class="note"> +<p><strong>Nota:</strong> Essas propriedades funcionarão apenas em aplicativos da Microsoft e não estão em uma faixa de padrões.</p> +</div> + +<div class="index"> +<ul> + <li>{{CSSxRef("-ms-acelerador")}}</li> + <li>{{CSSxRef("-ms-block-progression")}}</li> + <li>{{CSSxRef("-ms-content-zoom-chaining")}}</li> + <li>{{CSSxRef("-ms-content-zooming")}}</li> + <li>{{CSSxRef("-ms-content-zoom-limit")}}</li> + <li>{{CSSxRef("-ms-content-zoom-limit-max")}}</li> + <li>{{CSSxRef("-ms-content-zoom-limit-min")}}</li> + <li>{{CSSxRef("-ms-content-zoom-snap")}}</li> + <li>{{CSSxRef("-ms-content-zoom-snap-points")}}</li> + <li>{{CSSxRef("-ms-content-zoom-snap-type")}}</li> + <li>{{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-flow-from")}}</li> + <li>{{CSSxRef("-ms-flow-into")}}</li> + <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li> + <li>{{CSSxRef("-ms-hifenate-limit-chars")}}</li> + <li>{{CSSxRef("-ms-hifenate-limit-lines")}}</li> + <li>{{CSSxRef("-ms-hifenate-limit-zone")}}</li> + <li>{{CSSxRef("-ms-ime-align")}}</li> + <li>{{CSSxRef("-ms-overflow-style")}}</li> + <li>{{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-scrollbar-seta-cor")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-scrollbar-base-cor")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef("-ms-scroll-chaining")}}</li> + <li>{{CSSxRef("-ms-scroll-limit")}}</li> + <li>{{CSSxRef("-ms-scroll-limit-x-max")}}</li> + <li>{{CSSxRef("-ms-scroll-limit-x-min")}}</li> + <li>{{CSSxRef("-ms-scroll-limit-y-max")}}</li> + <li>{{CSSxRef("-ms-scroll-limit-y-min")}}</li> + <li>{{CSSxRef("-ms-scroll-rails")}}</li> + <li>{{CSSxRef("-ms-scroll-snap-points-x")}}</li> + <li>{{CSSxRef("-ms-scroll-snap-points-y")}}</li> + <li>{{CSSxRef("-ms-scroll-snap-x")}}</li> + <li>{{CSSxRef("-ms-scroll-snap-y")}}</li> + <li>{{CSSxRef("-ms-scroll-translation")}}</li> + <li>{{CSSxRef("-ms-text-autospace")}}</li> + <li>{{CSSxRef("-ms-touch-select")}}</li> + <li>{{CSSxRef("-ms-wrap-flow")}}</li> + <li>{{CSSxRef("-ms-wrap-margin")}}</li> + <li>{{CSSxRef("-ms-wrap-through")}}</li> + <li>{{CSSxRef("zoom")}}</li> +</ul> +</div> + +<h2 id="Pseudo-elements">Pseudo-elements</h2> + +<div class="index"> +<ul> + <li>{{CSSxRef("::-ms-browse")}}</li> + <li>{{CSSxRef("::-ms-check")}}</li> + <li>{{CSSxRef("::-ms-clear")}}</li> + <li>{{CSSxRef("::-ms-expand")}}</li> + <li>{{CSSxRef("::-ms-fill")}}</li> + <li>{{CSSxRef("::-ms-fill-lower")}}</li> + <li>{{CSSxRef("::-ms-fill-upper")}}</li> + <li>{{CSSxRef("::-ms-reveal")}}</li> + <li>{{CSSxRef("::-ms-thumb")}}</li> + <li>{{CSSxRef("::-ms-ticks-after")}}</li> + <li>{{CSSxRef("::-ms-ticks-before")}}</li> + <li>{{CSSxRef("::-ms-tooltip")}}</li> + <li>{{CSSxRef("::-ms-track")}}</li> + <li>{{CSSxRef("::-ms-value")}}</li> +</ul> +</div> + +<h2 id="Media_features">Media features</h2> + +<div class="index"> +<ul> + <li>{{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}</li> +</ul> +</div> + +<h2 id="CSS-related_DOM_APIs">CSS-related DOM APIs</h2> + +<div class="index"> +<ul> + <li>{{DOMxRef("msContentZoomFactor")}}</li> + <li>{{DOMxRef("msGetPropertyEnabled")}}</li> + <li>{{DOMxRef("msGetRegionContent")}}</li> + <li>{{DOMxRef("MSRangeCollection")}}</li> + <li>{{DOMxRef("msRegionOverflow")}}</li> +</ul> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS Extensions</a></li> + <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">WebKit CSS Extensions</a></li> + <li><a href="/en-US/docs/Web/API/Microsoft_API_extensions">Microsoft API Extensions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Microsoft_JavaScript_extensions">Microsoft JavaScript Extensions</a></li> +</ul> diff --git a/files/pt-br/web/css/min-height/index.html b/files/pt-br/web/css/min-height/index.html new file mode 100644 index 0000000000..7b1a9b36f2 --- /dev/null +++ b/files/pt-br/web/css/min-height/index.html @@ -0,0 +1,181 @@ +--- +title: min-height +slug: Web/CSS/min-height +translation_of: Web/CSS/min-height +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A propriedade <code>min-height</code> do CSS é usado para definir a altura mínima de um determinado elemento. Ele impede que o valor usado da propriedade {{ Cssxref("height") }} se torne menor que o valor especificado para min-height.<br> + O valor de {{ Cssxref("min-height") }} substitui os dois {{ Cssxref("max-height") }} e {{ Cssxref("height") }}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax"><span id="ouHighlight__0_5TO0_6">Sintaxe</span></h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">sintaxe forma</a>: {{csssyntax("min-height")}} +</pre> + +<pre>min-height: 3.5em +min-height: 10% +min-height: max-content +min-height: min-content +min-height: fit-content +min-height: fill-available + +min-height: inherit +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>O valor fixo mínimo da altura. Veja {{cssxref("<length>")}} para possíveis unidades. Valores negativos fazem da declaração inválida.</dd> + <dt><code><percentage></code></dt> + <dd>O valor fixo mínimo da altura expressado como uma {{cssxref("<percentage>")}} do conteúdo da altura do bloco. Valores negativos fazem da declaração inválida.</dd> + <dt><code>max-content</code> {{ experimental_inline() }}</dt> + <dd>The intrinsic preferred height.</dd> + <dt><code>min-content</code> {{ experimental_inline() }}</dt> + <dd>The intrinsic minimum height.</dd> + <dt><code>fill-available</code>{{ experimental_inline() }}</dt> + <dd>The containing block height minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, <code>available</code>.</dd> + <dt><code>fit-content</code> {{ experimental_inline() }}</dt> + <dd>According CSS3 Box, this is a synonym of <code>min-content.</code> CSS3 Sizing defines a more complex algorithm, but no browser implements it, even in an experimental way.</dd> +</dl> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: css">table { min-height: 75%; } + +form { min-height: 0; } +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col"><span id="ouHighlight__0_6TO0_9">Comentário</span></th> + </tr> + <tr> + <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords.<br> + <em>Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>An <a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">earlier revision of the spec</a> added the <code>auto</code> keyword and used it as the initial value. The CSSWG subsequently resolved to revert this change, however. As of March 29, 2013, the latest <a href="http://dev.w3.org/csswg/css-flexbox/">Editor's Draft</a> doesn't modify the <code>min-width</code> property anymore (i.e. it no longer introduces the <code>auto</code> value).</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>min-height</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>7.0</td> + <td>4.0</td> + <td>1.0<br> + 2.0.2 (416) for positioned elements</td> + </tr> + <tr> + <td>applies to <code><table> </code>[1]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-</code><code>available</code> {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>auto</code>{{obsolete_inline(22)}}</td> + <td>21.0</td> + <td>{{ CompatGeckoDesktop("16.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>12.10</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>auto</code> as initial value{{obsolete_inline(22)}}</td> + <td>21.0</td> + <td>{{ CompatGeckoDesktop("18.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>12.10</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas">Notas</h3> + +<p>[1] CSS 2.1 explicitly leaves the behavior of <code>min-height </code>with {{ HTMLElement("table") }} undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now.</p> + +<p>[2] Due to bug ({{bug("307866")}}) Firefox doesn't hande <code>min-height</code> on elements with <code>display: table-*</code>.</p> + +<h2 id="See_also" name="See_also">Ver também</h2> + +<ul> + <li>{{ Cssxref("width") }}, {{ Cssxref("height") }}, {{ Cssxref("max-height") }}</li> + <li>The <a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">box model</a>, {{ Cssxref("min-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("max-height") }}</li> +</ul> diff --git a/files/pt-br/web/css/mix-blend-mode/index.html b/files/pt-br/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..c8677e6545 --- /dev/null +++ b/files/pt-br/web/css/mix-blend-mode/index.html @@ -0,0 +1,164 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - Propriedade CSS +translation_of: Web/CSS/mix-blend-mode +--- +<p>{{CSSRef}}</p> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>A propriedade <strong><code>mix-blend-mode</code></strong> descreve como um elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush:css">/* Valores para esta propriedade */ +mix-blend-mode: normal; +mix-blend-mode: multiply; +mix-blend-mode: screen; +mix-blend-mode: overlay; +mix-blend-mode: darken; +mix-blend-mode: lighten; +mix-blend-mode: color-dodge; +mix-blend-mode: color-burn; +mix-blend-mode: hard-light; +mix-blend-mode: soft-light; +mix-blend-mode: difference; +mix-blend-mode: exclusion; +mix-blend-mode: hue; +mix-blend-mode: saturation; +mix-blend-mode: color; +mix-blend-mode: luminosity; + +/* Valores globais */ +mix-blend-mode: initial; +mix-blend-mode: inherit; +mix-blend-mode: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><blend-mode></code></dt> + <dd>É uma {{cssxref("<blend-mode>")}} que descreve qual mesclagem deve ser aplicada. Podem ser descritos vários valores, separados por vírgula.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: html"><svg> + <circle cx="40" cy="40" r="40" fill="red"/> + <circle cx="80" cy="40" r="40" fill="lightgreen"/> + <circle cx="60" cy="80" r="40" fill="blue"/> +</svg></pre> + +<pre class="brush:css">circle { mix-blend-mode: screen; }</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples", "100%", "180")}}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{CompatGeckoDesktop('32.0')}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>8.0</td> + </tr> + <tr> + <td>SVG</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop('32.0')}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{CompatGeckoMobile('32.0')}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>8.0</td> + </tr> + <tr> + <td>SVG</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile('32.0')}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also"> </h2> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("background-blend-mode")}}</li> +</ul> diff --git a/files/pt-br/web/css/modelo_layout/index.html b/files/pt-br/web/css/modelo_layout/index.html new file mode 100644 index 0000000000..883cdbd4a4 --- /dev/null +++ b/files/pt-br/web/css/modelo_layout/index.html @@ -0,0 +1,25 @@ +--- +title: Modelo de layout +slug: Web/CSS/Modelo_layout +translation_of: Web/CSS/Layout_mode +--- +<p>O modelo de layout <a href="/en-US/docs/Web/CSS">CSS</a>, às vezes abreviado por <em>layout</em>, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:</p> + +<ul> + <li><em>Block layout</em>, designed for laying out documents. The block layout contains document-centric features, like the ability to <a href="/en-US/docs/Web/CSS/float"><em>float</em></a> elements or to lay them out over <a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts"><em>multiple columns</em></a>.</li> + <li><em>Inline layout</em>, designed for laying out text.</li> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Table"><em>Table layout</em></a>, designed for laying out tables.</li> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Positioning"><em>Positioned layout</em></a>, designed for positioning elements without much interaction with other elements.</li> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout"><em>Flexible box layout</em></a>, designed for laying out complex pages that can be resized smoothly.</li> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Grid_Layout"><em>Grid layout</em></a>, designed for laying out elements relative to a fixed grid.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> Not all <a href="/en-US/docs/Web/CSS/Reference">CSS properties</a> apply to all <em>layout modes</em>. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.</p> +</div> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/pt-br/web/css/modelo_visual/index.html b/files/pt-br/web/css/modelo_visual/index.html new file mode 100644 index 0000000000..a37a0cc7b0 --- /dev/null +++ b/files/pt-br/web/css/modelo_visual/index.html @@ -0,0 +1,227 @@ +--- +title: Modelo de formatação visual +slug: Web/CSS/Modelo_Visual +tags: + - CSS + - CSS conceitos basicos + - Intermediário +translation_of: Web/CSS/Visual_formatting_model +--- +<p>{{CSSRef}}</p> + +<p class="summary"><span class="seoSummary">The CSS <em>visual formatting model</em> is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS. </span></p> + +<p>The visual formatting model transforms each element of the document and generates zero, one, or several boxes that conform to the CSS box model. The layout of each box is defined by:</p> + +<ul> + <li>The dimensions of the box: precisely defined or constrained, or not.</li> + <li>The type of box: inline, inline-level, atomic inline-level, block.</li> + <li>The <a href="/en-US/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">positioning scheme</a>: in the normal flow, a float, or absolute positioning.</li> + <li>The other elements in the tree: its children and neighbors.</li> + <li>The {{glossary("viewport")}} size and position.</li> + <li>Intrinsic dimensions of contained images.</li> + <li>Other external information.</li> +</ul> + +<p>The model renders a box, in relation to the edge of its <em>containing block</em>. Usually, a box establishes the containing block for its descendants. However, a box is not constrained by its containing block; when a box's layout goes outside the containing block, it is said to <em>overflow</em>.</p> + +<h2 id="Gerando_um_Box"> Gerando um Box</h2> + +<p>Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect how the visual formatting is done. The type of the box generated depends on the value of the {{ cssxref("display") }} CSS property.</p> + +<h3 id="Block-level_elements_and_block_boxes">Block-level elements and block boxes</h3> + +<p>An element is said to be <em>block-level</em> when the calculated value of its {{ cssxref("display") }} CSS property is: <code>block</code>, <code>list-item</code>, or <code>table</code>. A block-level element is visually formatted as a block (e.g., paragraph), intended to be vertically stacked.</p> + +<p>Each block-level box participates in a <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block formatting context</a>. Each block-level element generates at least one block-level box, called the <em>principal block-level</em><em> box</em>. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.</p> + +<p>The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">positioning scheme</a>.</p> + +<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">A block-level box may also be a block container box. A <em>block container box</em> is a box that contains only other block-level boxes, or creates an <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">inline formatting context</a>, thus containing only inline boxes.</p> + +<p>It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.</p> + +<p>Block-level boxes that also are block container boxes are called <em>block boxes</em>.</p> + +<h4 id="Anonymous_block_boxes">Anonymous block boxes</h4> + +<p>In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called <em>anonymous boxes</em>.</p> + +<p>Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the <code>inherit</code> value, and all non-inheritable CSS properties, have the <code>initial</code> value.</p> + +<p>Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.</p> + +<h3 id="Exemplo">Exemplo</h3> + +<p>If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have <code>display:block</code> :</p> + +<pre class="syntaxbox"><code><div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div></code></pre> + +<p>Two anonymous block boxes are created: one for the text before the paragraph (<code>Some inline text</code>), and another for the text after it (<code>followed by more inline text</code>). This builds the following block structure:</p> + +<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> + +<p>Leading to:</p> + +<pre>Some inline text +followed by a paragraph +followed by more inline text. +</pre> + +<p>Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the <code>initial</code> value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the<code> initial</code> value for that property, and thus the background of the <code><div></code> is visible. A specific background color can be applied to the <code><p></code> box. Similarly, the two anonymous boxes always use the same color for their text.</p> + +<p>Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an <em>anonymous block box</em>, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.</p> + +<p>If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.</p> + +<h3 id="Exemplo_2">Exemplo</h3> + +<p>If we take the following HTML code, with {{ HTMLElement("p") }} have <code>display:inline</code> and {{ HTMLElement("span") }} have <code>display:block</code> :</p> + +<pre class="syntaxbox"><code><p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p></code></pre> + +<p>Two anonymous block boxes are created, one for the text before the span Element (<code>Some <em>inline</em> text</code>) and one for the text after it (<code>followed by more inline text</code>), which gives the following block structure:</p> + +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> + +<p>Which leads to:</p> + +<pre>Some inline text +followed by a paragraph +followed by more inline text. +</pre> + +<h3 id="Inline-level_elements_and_inline_boxes">Inline-level elements and inline boxes</h3> + +<p>An element is said to be <em>inline-level</em> when the calculated value of its {{ cssxref("display") }} CSS property is: <code>inline</code>, <code>inline-block</code> or <code>inline-table</code>. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.</p> + +<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> + +<div class="warning"> +<p>This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2</p> +</div> + +<p>Inline-level elements generate <em>inline-level boxes</em> that are defined as boxes participating to an <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">inline formatting context</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p> + +<div class="note"><strong>Note:</strong> Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are <strong>not</strong> inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.</div> + +<div class="note">Atomic inline boxes cannot be split into several lines in an inline formatting context. +<div style="-moz-column-width: 30em;"> +<pre><style> + span { + display:inline; /* default value*/ + } +</style> +<div style="width:20em;"> + The text in the span <span>can be split in several + lines as it</span> is an inline box. +</div> +</pre> + +<p>which leads to:</p> + +<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div> + +<pre><style> + span { + display:inline-block; + } +</style> +<div style="width:20em;"> + The text in the span <span>cannot be split in several + lines as it</span> is an inline-block box. +</div> +</pre> + +<p>which leads to:</p> + +<div style="width: 20em;">The text in the span <span style="display: inline-block;">cannot be split into several lines as it</span> is an inline-block box.</div> +</div> +</div> + +<h4 id="Anonymous_inline_boxes">Anonymous inline boxes</h4> + +<p>As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to <code>initial</code> for all others.</p> + +<p>The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.</p> + +<div class="note">Example TBD</div> + +<h3 id="Outros_tipos_de_boxes">Outros tipos de boxes</h3> + +<h4 id="Line_boxes">Line boxes</h4> + +<p><em>Line boxes</em> are generated by the <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a> to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are <a href="/en-US/docs/CSS/float" title="float">floats</a>, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.</p> + +<p>These boxes are technical, and Web authors do not usually have to bother with them.</p> + +<h4 id="Run-in_boxes">Run-in boxes</h4> + +<p><em>Run-in boxes</em>, defined using <code>display:run-in</code>, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.</p> + +<div class="note"><strong>Note:</strong> Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered <em>experimental</em>. They should not be used in production.</div> + +<h4 class="note" id="Model-induced_boxes">Model-induced boxes</h4> + +<p>Besides the inline and block formatting contexts, CSS specifies several additional <em>content models</em> that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:</p> + +<ul> + <li>The <a href="/en-US/docs/CSS/table-layout" title="table-layout">table content model</a> may create a <em>table wrapper box</em> and a <em>table box</em>, but also specific boxes like <em>caption boxes</em>.</li> + <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-column content model</a> may create <em>column boxes</em> between the container box and the content<em>.</em></li> + <li>The experimental grid, or flex-box content models, also create additional types of boxes.</li> +</ul> + +<h4 id="Positioning_schemes">Positioning schemes</h4> + +<p>Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:</p> + +<ul> + <li>The <em>normal flow</em> - positions each box one after the other.</li> + <li>The <em>floats</em> algorithm - extracts the box from the normal flow and put it to the side of the containing box.</li> + <li>The <em>absolute positioning</em> scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.</li> +</ul> + +<h3 id="Normal_flow">Normal flow</h3> + +<p>In the <em>normal flow</em>, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value <code>static</code> or <code>relative</code>, and if the CSS {{ cssxref("float") }} is set to the value <code>none</code>.</p> + +<h3 id="Exemplo_3">Exemplo</h3> + +<div class="note">When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:<br> +<br> +[image]<br> +<br> +When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:<br> +<br> +[image]</div> + +<p class="note">There are two sub-cases of the normal flow: static positioning and relative positioning:</p> + +<ul> + <li class="note">In <em>static positioning</em>, triggered by the value <code>static</code> of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.<br> + [image]</li> + <li class="note">In <em>relative</em><em> positioning</em>, triggered by the value <code>relative</code> of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</li> +</ul> + +<h3 id="Floats">Floats</h3> + +<p>In the <em>float positioning scheme</em>, specific boxes (called <em>floating boxes</em> or simply <em>floats)</em> are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.</p> + +<p>The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than <code>none</code> and {{ cssxref("position") }} to <code>static</code> or <code>relative</code>. If {{ cssxref("float") }} is set to <code>left</code>, the float is positioned at the beginning of the line box. If set to <code>right</code>, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.</p> + +<p>[image]</p> + +<h3 id="Absolute_positioning">Absolute positioning</h3> + +<p>In the <em>absolute positioning scheme</em>, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">containing block</a> using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</p> + +<p>An element is absolutely positioned if the {{ cssxref("position") }} is set to <code>absolute</code> or <code>fixed</code>.</p> + +<p>With a <em>fixed positioned element</em>, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.</p> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/pt-br/web/css/number/index.html b/files/pt-br/web/css/number/index.html new file mode 100644 index 0000000000..dd5297f721 --- /dev/null +++ b/files/pt-br/web/css/number/index.html @@ -0,0 +1,92 @@ +--- +title: <number> +slug: Web/CSS/number +tags: + - CSS + - Layout + - Referencia CSS + - Tipo de Dado Númerico + - Tipo de dado CSS + - Tipos de Dados CSS + - Web +translation_of: Web/CSS/number +--- +<p>{{CSSRef}}</p> + +<p>O <a href="/en-US/docs/Web/CSS/CSS_Types">tipo de dado CSS</a> <strong><code><number></code></strong> representa um número, sendo esse ou um inteiro ou um componente fracional.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A sintaxe de <code><number></code> estende a sintaxe de {{CSSxRef("<integer>")}}. Um valor fracional é representado por um <strong><code>.</code></strong> seguido de um ou mais dígitos decimais e pode ser anexado a número inteiro. Não existe uma unidade associada aos números.</p> + +<h2 id="Interpolação">Interpolação</h2> + +<p>Quando animado, os valores de <code><number></code> são interpolados como números reais e de ponto flutuante. A velocidade da interpolação é determinada pelo<a href="/en-US/docs/Web/CSS/timing-function"> tempo da função</a> associada à animação.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Números_Válidos">Números Válidos</h3> + +<pre class="syntaxbox example-good">12 Um <integer> puro é também um <number>. +4.01 Fração positiva +-456.8 Fração negativa +0.0 Zero ++0.0 Zero inciado por um + +-0.0 Zero iniciado por um - +.60 Um número fracional sem ser iniciado por zero +10e3 Notação científica +-3.4e-2 Notação científica complexa +</pre> + +<h3 id="Números_Inválidos">Números Inválidos</h3> + +<pre class="syntaxbox example-bad">12. Números decimais devem ser seguidos por pelo menos um dígito. ++-12.2 Só um sinal +/- é permitido. +12.1.1 Só um ponto decimal é permitido. +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Values", "#numbers", "<number>")}}</td> + <td>{{Spec2("CSS4 Values")}}</td> + <td>Nenhuma mudança significante.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Values", "#numbers", "<number>")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td>Nenhuma mudança significante.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "syndata.html#numbers", "<number>")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definição explícita.</td> + </tr> + <tr> + <td>{{SpecName("CSS1", "", "<number>")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Definição implícita..</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + + + +<p>{{Compat("css.types.number")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{CSSxRef("<integer>")}}</li> +</ul> diff --git a/files/pt-br/web/css/object-fit/index.html b/files/pt-br/web/css/object-fit/index.html new file mode 100644 index 0000000000..261e5585e9 --- /dev/null +++ b/files/pt-br/web/css/object-fit/index.html @@ -0,0 +1,206 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +translation_of: Web/CSS/object-fit +--- +<div>{{ CSSRef }}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>A propriedade CSS <code>object-fit</code> especifica como o conteúdo de um elemento substituído deve ser ajustado à caixa estabelecida pela altura e largura usadas.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}}</pre> + +<pre><code>object-fit: fill</code> +<code>object-fit: contain</code> +<code>object-fit: cover</code> +<code>object-fit: none</code> +<code>object-fit: scale-down</code> +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>fill</code></dt> + <dd>O conteúdo substituído é dimensionado para preencher a caixa de conteúdo do elemento: o tamanho concreto do objeto é a largura e a altura usadas do elemento.</dd> + <dt><code>contain</code></dt> + <dd>O conteúdo substituído é dimensionado para manter sua proporção enquanto se encaixa na caixa de conteúdo do elemento: seu tamanho de objeto concreto é resolvido como uma restrição de restrição em relação à largura e altura usadas do elemento.</dd> + <dt><code>cover</code></dt> + <dd>O conteúdo substituído é dimensionado para manter sua proporção e preencher toda a caixa de conteúdo do elemento: seu tamanho de objeto concreto é resolvido como uma restrição de capa contra a largura e a altura usadas do elemento.</dd> + <dt><code>none</code></dt> + <dd>O conteúdo substituído não é redimensionado para caber dentro da caixa de conteúdo do elemento: o tamanho do objeto concreto do objeto é determinado usando o algoritmo de tamanho padrão sem tamanho especificado e um tamanho de objeto padrão igual à largura e altura usadas do elemento substituído.</dd> + <dt><code>scale-down</code></dt> + <dd>O conteúdo é dimensionado se <code>none</code> ou <code>contain</code> for especificado, o que resultaria em um tamanho menor de objeto concreto.</dd> +</dl> + +<h2 id="Example" name="Example">Exemplos</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div> + <h2>object-fit: fill</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/> + + <h2>object-fit: contain</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/> + + <h2>object-fit: cover</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/> + + <h2>object-fit: none</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/> + + <h2>object-fit: scale-down</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> + +</div></pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">h2 { + font-family: Courier New, monospace; + font-size: 1em; + margin: 1em 0 0.3em; +} + +div { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: flex-start; + height: 940px; +} + +img { + width: 150px; + height: 100px; + border: 1px solid #000; +} + +.narrow { + width: 100px; + height: 150px; + margin-top: 10px; +} + +.fill { + object-fit: fill; +} + +.contain { + object-fit: contain; +} + +.cover { + object-fit: cover; +} + +.none { + object-fit: none; +} + +.scale-down { + object-fit: scale-down; +} +</pre> + +<h3 id="Output">Output</h3> + +<p>{{ EmbedLiveSample('Example', 500, 450) }}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>The <code>from-image</code> and <code>flip</code> keywords have been added.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>31.0</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.60{{ property_prefix("-o") }}<br> + 19.0</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4.4</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.5{{ property_prefix("-o") }}<br> + 24</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>Other image-related CSS properties: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> + <li>An <a href="https://github.com/anselmh/object-fit">object-fit polyfill</a> for browsers not supporting it.</li> +</ul> diff --git a/files/pt-br/web/css/offset/index.html b/files/pt-br/web/css/offset/index.html new file mode 100644 index 0000000000..5bf849fdda --- /dev/null +++ b/files/pt-br/web/css/offset/index.html @@ -0,0 +1,158 @@ +--- +title: offset +slug: Web/CSS/offset +tags: + - CSS + - Experimental + - Não-padrão + - Precisa de Conteúdo + - Propriedade CSS + - Racunho + - Referencia +translation_of: Web/CSS/offset +--- +<div>{{SeeCompatTable}}{{CSSRef}}{{draft}}</div> + +<p>A propriedade CSS <strong><code>offset</code></strong> é uma propriedade abreviada para animar um elemento ao longo de um caminho definido.</p> + +<div class="note"> +<p>As primeiras versões da especificação chamam essa propriedade de <code>motion</code>.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css">/* Posição do offset */ +offset: auto +offset: 10px 30px; +offset: none; + +/* Caminho do offset */ +offset: ray(45deg closest-side); +offset: path(M 100 100 L 300 100 L 200 300 z); +offset: url(arc.svg); + +/* Caminho do offset com distância e/ou rotação */ +offset: url(circle.svg) 100px; +offset: url(circle.svg) 40%; +offset: url(circle.svg) 30deg; +offset: url(circle.svg) 50px 20deg; + +/* Incluindo âncora no offset */ +offset: ray(45deg closest-side) / 40px 20px; +offset: url(arc.svg) 2cm / 0.5cm 3cm; +offset: url(arc.svg) 30deg / 50px 100px; +</pre> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examplo">Examplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="offsetElement"></div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@keyframes move { + from { + offset-distance: 0%; + } + + to { + offset-distance: 100%; + } +} + +#offsetElement { + width: 50px; + height: 50px; + background-color: blue; + offset: path("M 100 100 L 300 100 L 200 300 z") auto; + animation: move 3s linear infinite; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", 350, 350)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificação</th> + <th>Status</th> + <th>Comentário</th> + </tr> + <tr> + <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td> + <td>{{Spec2('Motion Path Level 1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br> + {{CompatChrome(55.0)}} (as <code>offset</code>)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br> + {{CompatChrome(55.0)}} (as <code>offset</code>)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br> + {{CompatChrome(55.0)}} (as <code>offset</code>)</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/opacity/index.html b/files/pt-br/web/css/opacity/index.html new file mode 100644 index 0000000000..41afe896ae --- /dev/null +++ b/files/pt-br/web/css/opacity/index.html @@ -0,0 +1,212 @@ +--- +title: opacity +slug: Web/CSS/opacity +translation_of: Web/CSS/opacity +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade CSS <strong>opacity</strong> especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto.</p> + +<p>O valor aplica-se ao elemento como um todo, incluindo seu conteúdo, apesar de o valor não ser herdado por elementos filhos. Assim, um elemento e seus elementos filhos têm todos a mesma opacidade relativa ao background do elemento, mesmo se o elemento e seus elementos filhos tiverem opacidades diferentes entre si.</p> + +<p>Se você <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">não quer aplicar a opacidade ao elemento filho</a> - use isto:</p> + +<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre> + +<p>Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/Understanding_z_index/O_contexto_de_empilhamento">contexto de empilhamento</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* Totalmente opaco */ +opacity: 1; +opacity: 1.0; + +/* Translúcido */ +opacity: 0.6; + +/* Totalmente transparente */ +opacity: 0.0; +opacity: 0; + +/* Valores globais */ +opacity: inherit; +opacity: initial; +opacity: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><number></code></dt> + <dd>É um {{cssxref("number")}} no intervalo de 0.0 a 1.0, sendo estes incluídos, representando a opacidade do canal, que é o valor de seu canal alfa. Qualquer valor fora do intervalo, apesar de válido, é aproximado ao valor mais próximo dentro do intervalo.</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <th>Valor</th> + <th>Significado</th> + </tr> + <tr> + <td><code>0</code></td> + <td>O elemento é totalmente transparente (isto é, invisível).</td> + </tr> + <tr> + <td>Qualquer {{cssxref("number")}} entre 0 e 1</td> + <td>O elemento é translúcido (isto é, o background é visível).</td> + </tr> + <tr> + <td><code>1</code></td> + <td>O elemento é totalmente opaco (sólido).</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre>{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<pre class="brush: css">div { background-color: yellow; } +.light { + opacity: 0.2; /* Mal consegue ver o texto acima do background */ +} +.medium { + opacity: 0.5; /* Vê o texto mais claramente acima do background */ +} +.heavy { + opacity: 0.9; /* Vê o texto muito claramente acima do background */ +} +</pre> + +<pre class="brush: html"><div class="light">Você mal vê isso.</div> +<div class="medium">Isso é mais fácil de ver.</div> +<div class="heavy">Isso é muito fácil de ver.</div> +</pre> + +<p>{{EmbedLiveSample('Basic_example', '640', '64')}}</p> + +<h3 id="Opacidade_diferente_com_hover">Opacidade diferente com <code>:hover</code></h3> + +<pre class="brush: css">img.opacity { + opacity: 1; + filter: alpha(opacity=100); /* IE8 e anteriores */ + zoom: 1; /* Ativa "hasLayout" no IE 7 e anteriores */ +} + +img.opacity:hover { + opacity: 0.5; + filter: alpha(opacity=50); + zoom: 1; +}</pre> + +<pre class="brush: html"><img src="//developer.mozilla.org/media/img/mdn-logo.png" + alt="MDN logo" width="128" height="146" + class="opacity"> + +</pre> + +<p>{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Define opacity como animável.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_browsers">Compatibilidade com browsers</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup><br> + 8.0<br> + 4.0</td> + <td>9.0</td> + <td>1.2 (125)<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.7")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup><br> + 8.0<br> + 4.0</td> + <td>9.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>[1] Anterior ao Gecko 1.7 (Firefox 0.9) , a propriedade <code>-moz-opacity</code> foi implementada de uma maneira não-padronizada (herdada). Com o Firefox 0.9, o comportamento mudou e a propriedade foi renomeada para <code>opacity.</code> Desde então, <code>-moz-opacity </code>foi suportada somente como um alias para <code>opacity</code>.</p> + +<p>Gecko 1.9.1 {{geckoRelease("1.9.1")}} e posteriores não suportam <code>-moz-opacity</code> e o suporte para <code>MozOpacity</code> no JavaScript foi removido no Gecko 13 {{geckoRelease("13")}}. A partir de agora, você deve simplesmente usar <code>opacity</code>.</p> + +<p>[2] Anterior à versão 9, Internet Explorer não suporta <code>opacity</code>, em vez disso ele suporta uma propriedade <code>filter</code> com <code>alpha(opacity=xx)</code> ou <code>"alpha(opacity=xx)"</code> como valor (ambas são sinônimos). Do IE4 até o IE9 foi suportado a forma extendida <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>. IE8introduziu <code>-ms-filter</code>, a qual é sinônimo de <code>filter</code>. Ambas foram removidas no IE10.</p> + +<p>[3] Similar à <code>-moz-opacity</code>, <code>-khtml-opacity</code> tem estado morta desde o início de 2004 (lançamento do Safari 1.2).<br> + Konqueror nunca teve suporte para <code>-khtml-opacity</code> e tem suportado a propriedade <code>opacity</code> desde a versão 4.0.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li> +</ul> diff --git a/files/pt-br/web/css/outline/index.html b/files/pt-br/web/css/outline/index.html new file mode 100644 index 0000000000..905cf7315a --- /dev/null +++ b/files/pt-br/web/css/outline/index.html @@ -0,0 +1,135 @@ +--- +title: outline +slug: Web/CSS/outline +translation_of: Web/CSS/outline +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade <a href="/en-US/docs/CSS">CSS</a> <strong><code>outline</code></strong> é uma propriedade abreviada para configurar uma ou mais das propriedades de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} e {{cssxref("outline-color")}} em uma única declaração. Na maioria dos casos o uso abreviado é preferível e mais conveniente.</p> + +<p>Contornos se diferenciam de bordas das seguintes maneiras:</p> + +<ul> + <li>Contornos não ocupam espaços, eles são desenhados acima do conteúdo.</li> + <li>Contornos podem não ser retangulares. Eles são retangulares no Gecko/Firefox. Mas por exemplo, Opera desenha uma forma não retangular em torno de uma construção como este:<br> + <strong style="color: orange;">TEXT<span style="font-size: xx-large;">TEXT</span>TEXT</strong></li> +</ul> + +<div>{{cssinfo}}</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css">/* largura | estilo | cor */ +outline: 1px solid white; + +/* Valores globais */ +outline: inherit; +outline: initial; +outline: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Um, dois ou três valores, dada em ordem arbitrária:</p> + +<dl> + <dt><code><'outline-width'></code></dt> + <dd>Veja {{Cssxref("outline-width")}}.</dd> + <dt><code><'outline-style'></code></dt> + <dd>Veja {{Cssxref("outline-style")}}.</dd> + <dt><code><'outline-color'></code></dt> + <dd>Desde Gecko 1.9 (Firefox 3), o valor da propriedade {{Cssxref("color")}} (cor de primeiro plano) é usado. Veja {{Cssxref("outline-color")}}.</dd> +</dl> + +<h3 id="Sintaxe_completa">Sintaxe completa</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p><span style="outline: solid;">outline: solid;</span> | <span style="outline: dashed red;">outline: dashed red;</span> | <span style="outline: dotted 1px;">outline: dotted 1px;</span> | <span style="outline: ridge thick violet;">outline: ridge thick violet;</span> | <span style="outline: ridge 5px yellow;">outline: custom 5px;</span></p> + +<pre class="brush: css">/* duas declarações identicas */ + +:link:hover { outline: 1px solid #000; } +:link:hover { outline: solid black 1px; }</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.5 (1.8)<sup>[1]</sup></td> + <td>8.0</td> + <td>7.0</td> + <td>1.2 (125)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.8)}} [1]</td> + <td>8.0</td> + <td>6.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Em navegadores anteriores à <a href="/en-US/docs/Gecko">Gecko</a> 1.8 (<a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) um efeito semelhante pode ser conseguido utilizando <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extension</a> {{Cssxref("-moz-outline")}}.</p> + +<p>Firefox <a href="http://stackoverflow.com/questions/10662902/css-outline-different-behavior-behavior-on-webkit-gecko">inclui elementos posicionados absolutamente dentro do contorno</a> ({{bug("687311")}}).</p> diff --git a/files/pt-br/web/css/overflow/index.html b/files/pt-br/web/css/overflow/index.html new file mode 100644 index 0000000000..1bcf5b2865 --- /dev/null +++ b/files/pt-br/web/css/overflow/index.html @@ -0,0 +1,166 @@ +--- +title: overflow +slug: Web/CSS/overflow +translation_of: Web/CSS/overflow +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>A propriedade <code>overflow</code> especifica quando o conteúdo de um elemento de nível de bloco deve ser cortado, exibido com barras de rolagem ou se transborda do elemento.</p> + +<p>O uso da propriedade <code>overflow</code> com valor diferente de <code>visible</code> (seu valor padrão), criará um novo <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">contexto de formatação de bloco</a>. Isto é tecnicamente necessário para evitar que um conteúdo flutuante que entre em contato com o objeto dentro da área de rolamento e quebre as linhas do conteúdo para ajustar a disposição do texto. A quebra das linhas ocorre sempre que a barra de rolagem é utilizada, tornando a experiência de rolagem lenta.</p> + +<div class="note"> +<p><strong>Nota</strong>: Ao definir a propredade <code>scrollTop</code> para o <code>elemento</code> HTML relevante, mesmo que o valor de <code>overflow </code>seja <code>hidden,</code> o conteúdo ainda pode precisar rolar.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">overflow: visible | hidden | scroll | {{ cssxref("auto") }} | {{ cssxref("inherit") }}</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>Valor padrão. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.</dd> + <dt><code>hidden</code></dt> + <dd>O conteúdo é cortado e nenhuma barra de rolagem é exibida.</dd> + <dt><code>scroll</code></dt> + <dd>O conteúdo é acessível através de barras de rolagem que são exibidas mesmo que o conteúdo não precise. Isso evita o problema de barras de rolagem aparecendo e desaparecendo quando o conteúdo é dinâmico. Impressoras podem imprimir o conteúdo vazado.</dd> + <dt><code>auto</code></dt> + <dd>Depende do navegador utilizado. Navegadores desktop como o Firefox geralmente exibem barras de rolagem apenas quando necessário.</dd> +</dl> + +<h4 id="Mozilla_Extensions" name="Mozilla_Extensions">Extensões da Mozilla</h4> + +<dl> + <dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}</dt> + <dd>Use <code>overflow:hidden</code> no lugar.</dd> + <dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}</dt> + <dd>O uso de {{ Cssxref("overflow-x") }} e {{ Cssxref("overflow-y") }} é preferido.</dd> + <dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}</dt> + <dd>O uso de {{ Cssxref("overflow-x") }} e {{ Cssxref("overflow-y") }} é preferido.</dd> + <dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt> + <dd>É mantido principalmente para uso interno e por temas. Desabilita o rolamento de elementos raiz de XML e <code><html></code>, <code> <body></code> mediante o uso das setas do teclado ou scroll do mouse.</dd> +</dl> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: css">p { + width: 12em; + border: dotted; + overflow: visible; /* Exibe o conteúdo de forma vazada, fora da caixa de conteúdo */ +} +</pre> + +<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre>p { overflow: hidden; /* Esconde o conteúdo excedente */ } +</pre> + +<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre>p { overflow: scroll; /* Sempre exibe barras de rolagem */ } +</pre> + +<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre>p { overflow: auto; /* Exibe barras de rolagem apenas se necessário */ } +</pre> + +<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>Sem alteração.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_(Gecko)_Notes" name="Firefox_(Gecko)_Notes">Notas sobre o Firefox (Gecko)</h3> + +<p>Até o Firefox 3.6 (Gecko 1.9.2), a propriedade<code> overflow </code>é incorretamente aplicada para elementos de grupo de tabela (<code><thead></code> , <code><tbody></code> , <code><tfoot></code>). Este comportamento foi corrigido em versões posteriores.</p> + +<h3 id="Internet_Explorer_Notes" name="Internet_Explorer_Notes">Notas sobre o Internet Explorer</h3> + +<p>Internet Explorer 4 até 6 torna mais largos elementos com <code>overflow:visible </code>(valor padrão) para acomodar todo o conteúdo.<code> height/width </code>comportam-se como<code> min-height/min-width</code>.</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>Propriedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}</li> +</ul> diff --git a/files/pt-br/web/css/padding-left/index.html b/files/pt-br/web/css/padding-left/index.html new file mode 100644 index 0000000000..22eb78adac --- /dev/null +++ b/files/pt-br/web/css/padding-left/index.html @@ -0,0 +1,147 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - CSS Padding + - La + - Reference + - Referencia + - Web +translation_of: Web/CSS/padding-left +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p><code>A propriedade <a href="/en/CSS" title="CSS">CSS</a> padding-left</code> é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. <a href="https://developer.mozilla.org/en/CSS/box_model#padding" title="http://developer.mozilla.org/en/CSS/Box_model#padding">padding area</a> <span id="ouHighlight__17_18TO24_24">é</span><span id="noHighlight_0.37112006289722665"> </span><span id="ouHighlight__20_22TO26_26">o</span><span id="noHighlight_0.6534700772538158"> </span><span id="ouHighlight__24_28TO28_33">espaço</span><span id="noHighlight_0.13116577021599884"> </span><span id="ouHighlight__30_36TO35_39">entre</span><span id="noHighlight_0.15139449256887139"> </span><span id="ouHighlight__38_40TO41_41">o</span><span id="noHighlight_0.17539196984450844"> </span><span id="ouHighlight__42_48TO43_50">conteúdo</span><span id="noHighlight_0.8779008758520587"> </span><span id="ouHighlight__50_51TO52_53">do</span><span id="noHighlight_0.873582381662804"> </span><span id="ouHighlight__53_63TO55_62">elemento</span><span id="noHighlight_0.8308349729274138"> </span><span id="ouHighlight__65_67TO64_64">e</span><span id="noHighlight_0.37729169619452807"> </span><span id="ouHighlight__69_72TO66_66">a</span><span id="noHighlight_0.4411109226872705"> </span><span id="ouHighlight__74_79TO68_72">borda</span><span id="noHighlight_0.075289951394655">.</span> <span id="ouHighlight__82_82TO75_76">Um</span><span id="noHighlight_0.6061021317865614"> </span><span id="ouHighlight__93_97TO78_82">valor</span><span id="noHighlight_0.6949002345432238"> </span><span id="ouHighlight__84_91TO84_91">negativo</span><span id="noHighlight_0.2344563426194184"> </span><span id="ouHighlight__102_104TO93_95">não</span><span id="noHighlight_0.22723106369831958"> </span><span id="ouHighlight__99_100TO97_97">é</span><span id="noHighlight_0.44876607103253296"> </span><span id="ouHighlight__106_112TO99_107">permitido</span><span id="noHighlight_0.5590915585798831">.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Syntax formal</a>: {{csssyntax("padding-left")}} +</pre> + +<pre>padding-left: 0.5em; +padding-left: 0; +padding-left: 2cm; +padding-left: 10% + +padding-left: inherit +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd> + <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> + <div><span id="ouHighlight__0_8TO0_9">Especifica</span><span id="noHighlight_0.1714015144406409"> </span><span id="ouHighlight__10_10TO11_13">uma</span><span id="noHighlight_0.8247662008546957"> </span><span id="ouHighlight__27_31TO15_21">largura</span><span id="noHighlight_0.7805001312577078"> </span><span id="ouHighlight__21_25TO23_26">fixa</span><span id="noHighlight_0.1525507882368624"> </span><span id="ouHighlight__12_19TO28_35">positiva</span><span id="noHighlight_0.16332571431491472">.</span> <span id="ouHighlight__0_2TO0_7">Consulte </span>{{cssxref("<length>")}} <span id="ouHighlight__27_29TO30_33">para</span><span id="noHighlight_0.6646400009278141"> </span><span id="ouHighlight__31_37TO35_48">obter detalhes</span><span id="noHighlight_0.5130446632552423">.</span></div> + </div> + </dd> + <dt><code><percentage></code></dt> + <dd><span id="ouHighlight__0_0TO0_1">Um</span><span id="noHighlight_0.45621228535944436"> </span><span id="ouHighlight__2_11TO3_12">percentual</span><span id="noHighlight_0.2848767381419872"> </span><span id="ouHighlight__13_27TO14_23">em relação</span><span id="noHighlight_0.6673035689744921"> </span><span id="ouHighlight__29_31TO25_25">a</span><span id="noHighlight_0.6559476142543237"> </span><span id="ouHighlight__33_37TO27_33">largura</span><span id="noHighlight_0.04053615582239656"> </span><span id="ouHighlight__39_40TO35_36">do</span><span id="noHighlight_0.945525910620689"> </span><span id="ouHighlight__57_61TO38_42">bloco.</span></dd> +</dl> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: css">.content { padding-left: 5%; } +.sidebox { padding-left: 10px; } +</pre> + +<h2 id="Especificações"><span id="ouHighlight__0_13TO0_13">Especificações</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><span id="ouHighlight__0_12TO0_12">Especificação</span></th> + <th scope="col">Status</th> + <th scope="col"><span id="ouHighlight__0_6TO0_9">Comentário</span></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td> + <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> + <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.9362666398150816"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.03095057428070891">.</span></div> + </div> + </td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td><span id="ouHighlight__0_6TO0_5">Define </span><code>padding-left</code> <span id="ouHighlight__21_22TO34_37">como</span><span id="noHighlight_0.04535255120305759"> </span><span id="ouHighlight__24_33TO39_48">animatable</span><span id="noHighlight_0.8100392147421572">.</span></td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> + <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> + <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.9362666398150816"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.03095057428070891">.</span></div> + </div> + </td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-left', 'padding-left') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td> + <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> + <div><span id="ouHighlight__8_17TO0_8">Definição</span><span id="noHighlight_0.6594384050639374"> </span><span id="ouHighlight__0_6TO10_16">inicial</span><span id="noHighlight_0.46693875834835863">.</span></div> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade do Navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><span id="ouHighlight__0_6TO0_6">Recurso</span></th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/padding/index.html b/files/pt-br/web/css/padding/index.html new file mode 100644 index 0000000000..dc89652bd8 --- /dev/null +++ b/files/pt-br/web/css/padding/index.html @@ -0,0 +1,189 @@ +--- +title: padding +slug: Web/CSS/padding +translation_of: Web/CSS/padding +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">A propriedade <strong><code>padding</code></strong> define uma a distância entre o conteúdo de um elemento e suas bordas.</span> É um atalho que evita definir uma distância para cada lado separadamente (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p> + +<pre class="brush:css no-line-numbers">/* Aplica-se à todas as bordas */ +padding: 1em; + +/* vertical | horizontal */ +padding: 5% 10%; + +/* superior | horizontal | inferior */ +padding: 1em 2em 2em; + +/* superior | direita | inferior | esquerda */ +padding: 2px 1em 0 1em; + +/* Valores globais */ +padding: inherit; +padding: initial; +padding: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A propriedade <code>padding</code> pode ser utilizada usando um, dois, três ou todos os quatro valores. Cada valor é um <code><a href="#<length>"><comprimento></a></code> ou uma <code><a href="#<percentage>"><porcentagem></a></code>.</p> + +<ul> + <li>Quando<strong> um</strong> único é valor utilizado, ele se aplica a todos os <strong>quatro lados</strong>.</li> + <li>Se<strong> Dois</strong> valores forem utilizados o primeiro se aplica às bordas verticais (<strong>superior e inferior</strong>) e o segundo se aplica às bordas horizontais (<strong>esquerda e direita</strong>).</li> + <li>Quando<strong> Três</strong> valores são utilizados o primeiro se aplica à borda <strong>superior</strong>, o segundo será utilizado tanto para a borda <strong>esquerda quanto para a borda direita</strong>. O terceiro será aplicado à borda <strong>inferior</strong>.</li> + <li>Com<strong> Quatro</strong> valores a ordem de aplicação é: <strong>superior, direita, inferior e esquerda</strong> (de acordo com o movimento dos ponteiros do relógio).</li> +</ul> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><a id="<length>" name="<length>"><code><comprimento></code></a></dt> + <dd>Media do comprimento. Não pode ser negativo. Veja {{cssxref("<length>")}} para maiores detalhes.</dd> + <dt><a id="<percentage>" name="<percentage>"><code><porcentagem></code></a></dt> + <dd>Valor percentual que é aplicado em relação à <strong>largura</strong> do bloco contido.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css"> padding: 5%; /* padding 5% em todos os lados */ +</pre> + +<pre class="brush: css"> padding: 10px; /* padding 10px em todos os lados */ +</pre> + +<pre class="brush: css"> padding: 10px 20px; /* 10px acima e abaixo */ + /* 20px esquerda e direita */ +</pre> + +<pre class="brush: css"> padding: 10px 3% 20px; /* 10px acima */ + /* 3% esquerda e direita */ + /* 20px abaixo */ +</pre> + +<pre class="brush: css"> padding: 1em 3px 30px 5px; /* acima 1em padding */ + /* direita 3px padding */ + /* abaixo 30px padding */ + /* esquerda 5px padding */ +</pre> + +<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p> + +<h2 id="Live_Sample" name="Live_Sample">Amostra</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><h4>Hello world!</h4> +<h3>O padding é diferente nesta linha.</h3> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">h4{ + background-color: green; + padding: 50px 20px 20px 50px; +} + +h3{ + background-color: blue; + padding: 400px 50px 50px 400px; +} +</pre> + +<p>{{ LiveSampleLink('Live_Sample', 'Amostra') }}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Observações</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>Sem alteração</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Sem alteração</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding', 'padding') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li> +</ul> diff --git a/files/pt-br/web/css/page-break-before/index.html b/files/pt-br/web/css/page-break-before/index.html new file mode 100644 index 0000000000..7aabf15439 --- /dev/null +++ b/files/pt-br/web/css/page-break-before/index.html @@ -0,0 +1,142 @@ +--- +title: page-break-before +slug: Web/CSS/page-break-before +translation_of: Web/CSS/page-break-before +--- +<div>{{CSSRef}}</div> + +<div class="blockIndicator warning">Esta propriedade foi substituída pela propriedade {{cssxref("break-before")}}.</div> + +<p>A propriedade CSS <strong><code>page-break-before</code></strong> ajusta as "quebras de páginas" <em>antes</em> do elemento atual.</p> + +<p>Esta propriedade aplica-se para elementos em bloco (block) que geram uma caixa. Não será aplicada em uma {{ HTMLElement("div") }} vazia que não irá gerar uma caixa (box).</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +page-break-before: auto; +page-break-before: always; +page-break-before: avoid; +page-break-before: left; +page-break-before: right; +page-break-before: recto; +page-break-before: verso; + +/* Global values */ +page-break-before: inherit; +page-break-before: initial; +page-break-before: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Page_break_aliases">Page break aliases</h2> + +<p>A propriedade <code>page-break-before</code> agora é uma propriedade legada, substituída por {{cssxref("break-before")}}.</p> + +<p>Por motivos de compatibilidade, <code>page-break-before</code> é tratada pelos navegadores como um alias de <code>break-before</code>. Isso garante que sites usando <code>page-break-before</code> continuem a funcionar. Um subconjunto de valores deve manter aliases como a seguir:</p> + +<table> + <thead> + <tr> + <th scope="col">page-break-before</th> + <th scope="col">break-before</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>auto</code></td> + <td><code>auto</code></td> + </tr> + <tr> + <td><code>left</code></td> + <td><code>left</code></td> + </tr> + <tr> + <td><code>right</code></td> + <td><code>right</code></td> + </tr> + <tr> + <td><code>avoid</code></td> + <td><code>avoid</code></td> + </tr> + <tr> + <td><code>always</code></td> + <td><code>page</code></td> + </tr> + </tbody> +</table> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Initial value. Automatic page breaks (neither forced nor forbidden).</dd> + <dt><code>always</code></dt> + <dd>Always force page breaks before the element.</dd> + <dt><code>avoid</code></dt> + <dd>Avoid page breaks before the element.</dd> + <dt><code>left</code></dt> + <dd>Force page breaks before the element so that the next page is formatted as a left page.</dd> + <dt><code>right</code></dt> + <dd>Force page breaks before the element so that the next page is formatted as a right page.</dd> + <dt><code>recto</code> {{experimental_inline}}</dt> + <dd>If pages progress left-to-right, then this acts like <code>right</code>. If pages progress right-to-left, then this acts like <code>left</code>.</dd> + <dt><code>verso</code> {{experimental_inline}}</dt> + <dd>If pages progress left-to-right, then this acts like <code>left</code>. If pages progress right-to-left, then this acts like <code>right</code>.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css">/* avoid page break before the div */ +div.note { + page-break-before: avoid; +} +</pre> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Adds the values <code>recto</code> and <code>verso</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>Extends the element that this property applies to table rows and table row groups.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.page-break-before")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> + <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}}</li> + <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> +</ul> diff --git a/files/pt-br/web/css/pointer-events/index.html b/files/pt-br/web/css/pointer-events/index.html new file mode 100644 index 0000000000..4d04ba119b --- /dev/null +++ b/files/pt-br/web/css/pointer-events/index.html @@ -0,0 +1,178 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +translation_of: Web/CSS/pointer-events +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade CSS <code>pointer-events </code>permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o <a href="/en-US/docs/Web/API/event.target">alvo</a> do evento do mouse. Quando essa propriedade não é especificada, as mesmas características do valor <code>visiblePainted </code>é aplicada no conteúdo SVG.<code> </code></p> + +<p>Além de indicar que este elemento não é o alvo do evento do mouse, o valor <code>none</code> instrui o evento do mouse a "passar" o elemento e tudo que está "abaixo" deste elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css">pointer-events: auto; +pointer-events: none; +pointer-events: visiblePainted; +pointer-events: visibleFill; +pointer-events: visibleStroke; +pointer-events: visible; +pointer-events: painted; +pointer-events: fill; +pointer-events: stroke; +pointer-events: all; + +pointer-events: inherit; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>O elemento se comporta como se a propriedade <code>pointer-events</code> não fosse especificada. Em conteúdo SVG, esse valor e o valor <code>visiblePainted </code>tem o mesmo efeito.</dd> + <dt><code>none</code></dt> + <dd>O elemento nunca é o <a href="/en-US/docs/Web/API/event.target">alvo</a> de eventos do mouse; contudo, o evento do mouse pode direcionar seus elementos descendentes se esses descendentes tiverem algum outro valor configurado no <code>pointer-events.</code> Nessas circunstâncias, os eventos do mouse vão acionar eventos de escuta em seus elementos pai conforme apropriado no seu caminho de/para o descendente, durante as fases do evento captura/<a href="/en-US/docs/Web/API/event.bubbles">borbulha.</a></dd> + <dt><code>visiblePainted</code></dt> + <dd>Apenas SVG. O elemento pode apenas ser alvo de um evento de mouse quando a propriedade <code>visibility</code> é definida como <code>visible</code> e quando o cursor do mouse estiver sobre o interior (exemplo: “preenchimento”) do elemento e a propriedade <code>fill</code> tiver um valor exceto <code>none</code>, ou quando o cursor do mouse estiver sobre o perímetro(exemplo: “linha”) do elemento e a propriedade <code>stroke</code> estiver definida com um valor exceto <code>none</code>.</dd> + <dt><code>visibleFill</code></dt> + <dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento mouse quando a propriedade <code>visibility</code> é definida como <code>visible</code> e quando o cursor do mouse estiver sobre o interior (exemplo: “preenchimento”) do elemento. O valor da propriedade <code>fill</code> não afeta o processamento dos eventos.</dd> + <dt><code>visibleStroke</code></dt> + <dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando a propriedade <code>visibility</code> é definida como <code>visible</code> e quando o cursor do mouse estiver sobre o perímetro (exemplo: "linha") do elemento. O valor da propriedade <code>stroke</code> não afeta o processamento do evento.</dd> + <dt><code>visible</code></dt> + <dd>Apenas SVG. O elemento pode ser o alvo de um evento de mouse quando a propriedade <code>visibility</code> é definida como <code>visible</code> e o cursor do mouse estiver sobre ou no interior (exemplo: preenchimento) ou perímetro (exemplo: linha) do elemento. O valor do <code>fill</code> e <code>stroke</code> não afeta o processamento do evento.</dd> + <dt><code>painted</code></dt> + <dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o cursor do mouse estiver sobre o interior (exemplo: “preenchimento”) do elemento e a propriedade <code>fill</code> definida com valor diferente de <code>none</code>, ou quando o cursor do mouse estiver no perímetro(exemplo: “linha”) do elemento e a propriedade <code>stroke</code> definida com valor diferente de <code>none</code>. O valor da propriedade <code>visibility</code> não afeta o processamento do evento.</dd> + <dt><code>fill</code></dt> + <dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o ponteiro estiver sobre o interior (exemplo: preenchimento) do elemento. Os valores das propriedades <code>fill </code>e <code>visibility</code> não afetam o processamento do evento.</dd> + <dt><code>stroke</code></dt> + <dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o ponteiro estiver sobre o perímetro (exemplo: linha) do elemento. Os valores das propriedades <code>stroke</code> e <code>visibility</code> não afetam o processamento do evento.</dd> + <dt><code>all</code></dt> + <dd>Apenas SVG. O elemento apenas pode ser alvo do evento do mouse quando o ponteiro estiver sobre o interior (exemplo: preenchimento) ou perímetro (exemplo: linha) do elemento. Os valores das propriedades <code>fill</code>, <code>stroke</code> e <code>visibility</code> não afetam o processamento do evento.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax("pointer-events")}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_1">Exemplo 1</h3> + +<pre class="brush:css">/* Exemplo 1: Fazer todas img não reagir a qualquer evento de mouse tal como arrastar, passar sobre, clique etc */ +img { + pointer-events: none; +}</pre> + +<h3 id="Example_2" name="Example_2">Exemplo 2</h3> + +<p>Makes the link to http://example.com non-reactive.</p> + +<pre class="brush:html"><ul> + <li><a href="https://developer.mozilla.org">MDN</a></li> + <li><a href="http://example.com">example.com</a></li> +</ul></pre> + +<pre class="brush:css">a[href="http://example.com"] { + pointer-events: none; +}</pre> + +<div>{{EmbedLiveSample('Example_2', "500", "100")}}</div> + +<h2 id="Notas">Notas</h2> + +<p>Note que previnir um elemento de ser o alvo de eventos de mouse usando <code>pointer-events </code>não necessariamente quer dizer que o evento ouvinte do mouse desde elemento <em>não pode </em>ou <em>não vai se</em> desencadeado. Se um dos elementos filhos tem <code>pointer-events</code> explicitamente definidos para <em>permitir</em> que o filho seja o alvo do evento do mouse, então qualquer evento direcionado para este filho vai passar através do pai como o evento se deslocando ao longo da cadeia pai, e os ouvintes do evento gatilho do pai conforme o caso. Claro que qualquer atividade do mouse em um ponto da tela que é coberto pelo pai, mas não pelo filho, não será capturado por qualquer filho ou pai (isso vai “através” do pai e qualquer alvo que está abaixo).</p> + +<p>Nós gostaríamos de fornecer um controle de textura mais refinado (do que apenas <code>auto</code> e <code>none</code>) em HTML para que partes de um elemento fizessem com que os eventos mouse “capturem” , e quando. Para nos ajudar a decidir como <code>pointer-events </code>devem ser estendido para HTML, se você tem qualquer coisa particular que você gostaria de fazer com essa propriedade, então por favor adicione na seção Caso de Uso <a href="https://wiki.mozilla.org/SVG:pointer-events">dessa wiki page</a> (não se preocupe sobre ficar organizado ).</p> + +<p>Esta propriedade pode também ser usada para alcançar melhores taxas de quadros durante a rolagem. De fato, enquanto rola a página, o mouse passa sobre alguns elementos, então efeitos <a href="/en-US/docs/Web/CSS/:hover">hover</a> se aplicam. Contudo, esses efeitos são muitas vezes despercebidas pelo usuário e principalmente resultam em uma rolagem ruim. Aplicar <code>pointer-events:</code> <code>none</code> no <code>body</code> desabilita eventos de mouse incluindo hover que resultam em uma performance melhor de rolagem.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>Se extende para elementos HTML, embora presente nos primeiros rascunhos do Módulo Básico de Interface do Usuário do CSS nivel 3, foi empurrado para o <a href="http://wiki.csswg.org/spec/css4-ui#pointer-events">nível 4</a>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte SVG</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>9.0</td> + <td>9.0 (2.0)</td> + <td>3.0 (522)</td> + </tr> + <tr> + <td>Conteúdo HTML/XML</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>11.0</td> + <td>15.0</td> + <td>4.0 (530)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>The SVG attribute {{SVGAttr("pointer-events")}}</li> + <li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li> + <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></li> +</ul> diff --git a/files/pt-br/web/css/position/index.html b/files/pt-br/web/css/position/index.html new file mode 100644 index 0000000000..92f398b013 --- /dev/null +++ b/files/pt-br/web/css/position/index.html @@ -0,0 +1,319 @@ +--- +title: position +slug: Web/CSS/position +translation_of: Web/CSS/position +--- +<div>{{CSSRef}}</div> + +<div>A propriedade <strong><code>position</code></strong>, encontrada no <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>, define como um elemento pode ser posicionado (renderizado) no documento (página). Essa propriedade (<strong><code>position</code></strong>) pode ser acompanhada de outras, tais como, {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}}, que determinam como ficará a localização final do objeto, permitindo seu deslocamento, como será apresentado adiante.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div> + + + +<h3 id="Tipos_de_posicionamentos">Tipos de posicionamentos</h3> + +<ul> + <li>Um <strong>elemento posicionado</strong> é um elemento cujo valor de sua posição pode ser <a href="/en-US/docs/CSS/computed_value">computado (calculado)</a> como <code>relative</code>, <code>absolute</code>, <code>fixed</code>, or <code>sticky</code>. ( Em outras palavras, são todos esses, com excessão do <code>static</code>, sendo estático o valor como padrão do elemento.)</li> + <li>Um elemento denominado com<strong> posicionamento relativo</strong>, ou <strong>relatively positioned element</strong>, é um elemento cuja função é <a href="/en-US/docs/CSS/computed_value">calculada</a> ao ser definida a <code>position</code> como valor <code>relative</code>. Com isso, a propriedade {{Cssxref("top")}} e {{Cssxref("bottom")}} determinam o deslocamento ou projeção vertical a posição padrão do elemento que estava definida por <code>static</code>; Não sendo outro, o {{Cssxref("left")}} e o {{Cssxref("right")}}, por sua vez, determinam o deslocamento horizontal.</li> + <li>Um elemento denominado com <strong>posicionamento absoluto</strong>, ou <strong>absolutely positioned element</strong>, é um elemento determinado e calculado ao atribuir ao <code>position</code> o valor <code>absolute</code> ou <code>fixed</code>. Com {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}} é possível especificar o deslocamento das laterais (bordas) dos blocos que contém (<a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a>) os elementos. (O containing block, ou blocos que envolvem um elemento é definido como um antecessor relativo ao qual o elemento está posicionado, acomplado ou englobado. Se por ventura o elemento tiver definido margens (margin), ele são adicionados ao deslocamento (offset). O elemento estabelecerá um novo <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formatação do bloco</a> (BFC) para seus conteúdos.</li> + <li>Um elemento denominado com <strong>posicionamento adesivo</strong> ( ! ), ou <strong>stickily positioned element</strong>, é um elemento determinado e calculado ao atribuir ao <code>position</code> como valor <code>sticky</code>. Sendo tratado como um posicionamento relativo até que ultrapasse (atinja) os limites do <a href="/pt-BR/docs/docs/Web/CSS/Containing_Block">bloco no qual está contido</a>. (Se assemelha a configurar a propriedade {{Cssxref("top")}} com um valor diferente de automatático (auto)) Dentro do seu fluxo principal (fluxo raiz, ou o contêiner no qual ele desloca-se), No momento que há o deslocamento da página o elemento é tratado como "preso" ou "stuck" até encontrar-se com as paredes opostas do <a href="/pt-BR/docs/docs/Web/CSS/Containing_Block">bloco no qual esteja contido</a>.</li> +</ul> + +<p>Maior parte do tempo, um <strong>elemento de posicionamento absoluto</strong> que tem {{Cssxref("height")}} e {{Cssxref("width")}} configurados como <code>auto</code> são dimensionados de acordo com seu conteúdo interno. However, non-<a href="/en-US/docs/Web/CSS/Replaced_element">replaced</a>, absolutely positioned elements can be made to fill the available vertical space by specifying both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, <code>auto</code>). They can likewise be made to fill the available horizontal space by specifying both {{Cssxref("left")}} and {{Cssxref("right")}} and leaving {{Cssxref("width")}} as <code>auto</code>.</p> + +<p>Exceto para esses casos descritos abaixo (para elementos de posicionamento absoluto que preenchem o espaço disponível):</p> + +<ul> + <li>Se ambos <code>top</code> e <code>bottom</code> são definidos (tecnicamento não sendo <code>auto</code>), <code>top</code> prevalece.</li> + <li>Se ambos <code>left</code> e <code>right</code> são definidos, <code>left</code> prevalece quando {{Cssxref("direction")}} é <code>ltr</code> (Direção da escrita Portuguesa, Japonês na horizontal, etc.) e <code>right</code> prevalece quando {{Cssxref("direction")}} for configurado <code>rtl</code> ( Padrão de escrita em idiomas como Persa, Arabe, Hebraico, etc.).</li> +</ul> + +<h2 id="Sintáxe">Sintáxe</h2> + +<p>A propriedade <code>position</code> é definida com apenas uma palavra-chave da lista abaixo.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt id="static"><code>static</code></dt> + <dd>The element is positioned according to the normal flow of the document. The {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} properties have <em>no effect</em>. This is the default value.</dd> + <dt id="relative"><code>relative</code></dt> + <dd>The element is positioned according to the normal flow of the document, and then offset <em>relative to itself</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were <code>static</code>.</dd> + <dd>This value creates a new <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. Its effect on <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, and <code>table-caption</code> elements is undefined.</dd> + <dt id="absolute"><code>absolute</code></dt> + <dd>The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a>. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>.</dd> + <dd>This value creates a new <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. The margins of absolutely positioned boxes do not <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">collapse</a> with other margins.</dd> + <dt id="fixed"><code>fixed</code></dt> + <dd>The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a> established by the {{glossary("viewport")}}, except when one of its ancestors has a <code>transform</code>, <code>perspective</code>, or <code>filter</code> property set to something other than <code>none</code> (see the <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with <code>perspective</code> and <code>filter</code> contributing to containing block formation.) Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>.</dd> + <dd>This value always creates a new <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. In printed documents, the element is placed in the same position on <em>every page</em>.</dd> + <dt id="sticky"><code>sticky</code></dt> + <dd>The element is positioned according to the normal flow of the document, and then offset relative to its<em> nearest scrolling ancestor</em> and <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a> (nearest block-level ancestor), including table-related elements, based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements.</dd> + <dd>This value always creates a new <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when <code>overflow</code> is <code>hidden</code>, <code>scroll</code>, <code>auto</code>, or <code>overlay</code>), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd> +</dl> + +<h3 id="Sintáxe_formal">Sintáxe formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Relative_positioning" name="Relative_positioning">Posicionamento relativo</h3> + +<p>Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.box { + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; +} + +#two { + position: relative; + top: 20px; + left: 20px; + background: blue; +} +</pre> + +<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p> + +<h3 id="Absolute_positioning" name="Absolute_positioning">Posicionamento absoluto</h3> + +<p>Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its <em>nearest positioned ancestor</em> (i.e., the nearest ancestor that is not <code>static</code>). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">W3C definition</a>), which is the containing block of the document's root element.</p> + +<p>A simple example follows:</p> + +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> + +<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p> + +<h3 id="Fixed_positioning" name="Fixed_positioning">Posicionamento fixo</h3> + +<p>Fixed positioning is similar to absolute positioning, with the exception that the element's <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a> is the initial containing block established by the <em>viewport</em>, unless any ancestor has <code>transform</code>, <code>perspective</code>, or <code>filter</code> property set to something other than <code>none</code> (see <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), which then causes that ancestor to take the place of the elements <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a>. This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div class="outer"> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <div class="box" id="one">One</div> +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">.box { + width: 100px; + height: 100px; + background: red; + color: white; +} + +#one { + position: fixed; + top: 80px; + left: 10px; + background: blue; +} + +.outer { + width: 500px; + height: 300px; + overflow: scroll; + padding-left: 150px; +} +</pre> + +<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p> + +<h3 id="Sticky_positioning" name="Sticky_positioning">Posicionamento Adesivo</h3> + +<p>Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For instance...</p> + +<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre> + +<p>...would position the element with id <em>one</em> relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.</p> + +<p>A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.</p> + +<p>You must specify a threshold with at least one of <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><dl> + <div> + <dt>A</dt> + <dd>Andrew W.K.</dd> + <dd>Apparat</dd> + <dd>Arcade Fire</dd> + <dd>At The Drive-In</dd> + <dd>Aziz Ansari</dd> + </div> + <div> + <dt>C</dt> + <dd>Chromeo</dd> + <dd>Common</dd> + <dd>Converge</dd> + <dd>Crystal Castles</dd> + <dd>Cursive</dd> + </div> + <div> + <dt>E</dt> + <dd>Explosions In The Sky</dd> + </div> + <div> + <dt>T</dt> + <dd>Ted Leo &amp; The Pharmacists</dd> + <dd>T-Pain</dd> + <dd>Thrice</dd> + <dd>TV On The Radio</dd> + <dd>Two Gallants</dd> + </div> +</dl> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + +dl > div { + background: #FFF; + padding: 24px 0 0 0; +} + +dt { + background: #B8C1C8; + border-bottom: 1px solid #989EA4; + border-top: 1px solid #717D85; + color: #FFF; + font: bold 18px/21px Helvetica, Arial, sans-serif; + margin: 0; + padding: 2px 0 0 12px; + position: -webkit-sticky; + position: sticky; + top: -1px; +} + +dd { + font: bold 20px/45px Helvetica, Arial, sans-serif; + margin: 0; + padding: 0 0 0 12px; + white-space: nowrap; +} + +dd + dd { + border-top: 1px solid #CCC; +} +</pre> + +<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Ensure that elements positioned with an <code>absolute</code> or <code>fixed</code> value do not obscure other content when the page is zoomed to increase text size.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Performance_Accessibility">Performance & Accessibility</h3> + +<p>Scrolling elements containing <code>fixed</code> or <code>sticky</code> content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 <abbr title="frames per second">fps</abbr>, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add {{cssxref("will-change", "will-change: transform")}} to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.</p> + +<h2 id="Specifications" name="Specifications"><span class="tlid-translation translation" lang="pt"><span title="">Especificações</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td> + <td>{{Spec2('CSS3 Positioning')}}</td> + <td>Adds <code>sticky</code> property value.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2> + + + +<p>{{Compat("css.properties.position")}}</p> diff --git a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html b/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html new file mode 100644 index 0000000000..273c7765e3 --- /dev/null +++ b/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html @@ -0,0 +1,76 @@ +--- +title: 'Privacidade e o seletor :visited' +slug: 'Web/CSS/Privacidade_e_o_seletor_:visited' +tags: + - CSS + - Guía + - Pseudo-classe + - Referencia + - Segurança + - Seletores +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +<div>{{cssref}}</div> + +<p>Antes de 2010, o seletor <a href="/en-US/docs/Web/CSS">CSS</a> {{ cssxref(":visited") }} permitia que websites descobrissem o histórico de navegação dos usuários e quais sites estes haviam visitado. Isto foi feito por meio do {{domxref("window.getComputedStyle")}} e outras tecnicas. Este processo era fácil de ser feito, e tornou possível não somente determinar onde os usuários estiveram na internet, mas também poderia ser usado para descobrir um monte de informação sobre a identidade destes.</p> + +<p>Para contornar este problema, {{ Gecko("2") }} implementou atualizações de privacidade para limitar a quantidade de informações que poderiam ser obtidas através dos links visitados. Outros navegadores também fizeram mudanças similares.</p> + +<h2 id="Pequenas_mentiras_brancas">Pequenas mentiras brancas</h2> + +<p>Para preservar a privacidade dos usuários, Firefox e outros navegadores irão mentir para aplicações webs sob certas circustâncias:</p> + +<ul> + <li>O método <code>window.getComputedStyle</code>, e funções similares tal como {{ domxref("element.querySelector") }}, sempre retornarão valores indicando que os usuários nunca visitaram quaisquer links em uma página.</li> + <li>Se você usa seletores como <strong>seletores de irmãos</strong> como <code>:visited + span</code>, o elemento imediato (<code>span</code> neste exemplo) será estilizado como se o link não houvesse sido visitado.</li> + <li>Em raros casos, se você está utilizando elementos de links aninhados e o elemento que está sendo correspondido é diferente do link cuja presença no histórico está sendo testado, o elemento também será renderizado como se o link não houvesse sido visitado.</li> +</ul> + +<h2 id="Limites_para_estilos_de_links_visitados">Limites para estilos de links visitados</h2> + +<p>Você pode estilizar links visitados, porém existem limites de quais estilos você pode usar. Somente os seguintes estilos podem ser aplicados para links visitados:</p> + +<ul> + <li>{{ cssxref("color") }}</li> + <li>{{ cssxref("background-color") }}</li> + <li>{{ cssxref("border-color") }} (e suas subpropriedades)</li> + <li>{{ cssxref("column-rule-color") }}</li> + <li>{{ cssxref("outline-color") }}</li> + <li>As partes de cor dos atributos {{SVGAttr("fill")}} e {{SVGAttr("stroke")}}</li> +</ul> + +<p>Em adição, mesmo para os estilos acima, você não poderá alterar a transparência entre links visitados e não visitados, ou de outra maneira você seria capaz de usar <code><a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba()</a></code>, <code><a href="/en-US/docs/Web/CSS/color_value#hsla()">hsla()</a></code>, ou a palavra chave <code><a href="/en-US/docs/Web/CSS/color_value#transparent">transparent</a></code>.</p> + +<p>Aqui está um exemplo de como estilizar com as restrições acima mencionadas:</p> + +<pre class="brush: css">:link { + outline: 1px dotted blue; + background-color: white; + /* O valor padrão de background-color é `transparent`. Você precisa + especificar um valor diferente, caso contrário as mudanças + feitas em :visited não se aplicam. */ +} + +:visited { + outline-color: orange; /* Links visitados tem contornos laranja */ + background-color: green; /* Links visitados tem um fundo verde */ + color: yellow; /* Links visitados tem texto amarelo */ +} +</pre> + +<h2 id="Impacto_nos_desenvolvedores_web">Impacto nos desenvolvedores web</h2> + +<p>No geral, essas restrições estas restrições não deveriam afetar desenvolvedores web tão significamente. Eles poderiam, como sempre, They may, no entanto, requerer essas seguintes mudanças nos sites existentes:</p> + +<ul> + <li>Usar imagens de fundo para estilizar links baseados se eles foram visitados não irá funcionar, desde que apenas cores podem ser usadas para estilizar links visitados.</li> + <li>As cores que são transparentes deixarão de aparecer se estilizados em seletores <code>:visited</code>.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/" title="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">privacy-related changes coming to CSS :visited</a> em Mozilla Hacks (em inglês)</li> + <li><a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/" title="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">Plugging the CSS History Leak</a> em the Mozilla Security Blog (em inglês)</li> + <li><a class="external" href="http://dbaron.org/mozilla/visited-privacy">Preventing attacks on a user's history through CSS :visited selectors </a> (em inglês)</li> +</ul> diff --git a/files/pt-br/web/css/pseudo-classes/index.html b/files/pt-br/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..40cb2ea24c --- /dev/null +++ b/files/pt-br/web/css/pseudo-classes/index.html @@ -0,0 +1,143 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - CSS Referência + - Intermediário + - Seletores +translation_of: Web/CSS/Pseudo-classes +--- +<p>{{ CSSRef() }}</p> + +<p>Uma <em><strong>pseudo-classe</strong></em> CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado. Por exemplo, {{Cssxref(":hover")}} pode ser usado para alterar a cor de um botão quando o usuário passar o cursor sobre ele.</p> + +<pre class="brush: css no-line-numbers notranslate">/*Qualquer botão sobre o qual o ponteiro do usuário esteja passando sobre*/ +button:hover { + color: blue; +}</pre> + +<p>Pseudo-classes permitem que você aplique um estilo a um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação ({{CSSxRef(":visited")}}, por exemplo), o status do seu conteúdo (como {{ CSSxRef(":checked")}} em certos elementos de um formulário), ou a posição do mouse (como {{CSSxRef(":hover")}}, que permite saber se o mouse está sobre um elemento ou não).</p> + +<div class="note"> +<p><strong>Observação:</strong> Diferentemente das pseudo-classes, <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elementos</a> podem ser usados para estilizar uma <em>parte específica</em> de um elemento.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">seletor:pseudo-classe { + propriedade: valor; +} +</pre> + +<p>Assim como nas classes regulares, você pode encadear juntas quantas pseudo-classes você desejar em um seletor.</p> + +<h2 id="Índice_de_pseudo-classes_padrão">Índice de pseudo-classes padrão</h2> + +<div class="index"> +<ul> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> +</ul> +</div> + +<h2 id="Especificações"><span>Especificações</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Fullscreen') }}</td> + <td>{{ Spec2('Fullscreen') }}</td> + <td>Define <code>:fullscreen</code>.</td> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Nenhuma mudança de {{ SpecName('HTML5 W3C') }}.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Define <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>, e <code>:matches()</code>.<br> + Nenhuma mudança significante das pseudo-classes definidas em {{SpecName('CSS3 Selectors')}} e {{SpecName('HTML5 W3C')}} (embora o significado semântico que não foram retomadas).</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define o siginificado semântico no contexto do HTML <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, e <code>:indeterminate</code>.<br> + Define <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code>, e <code>:dir()</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Define <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, e <code>:read-write</code>, mas sem associar significado semântico.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Define <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, e <code>:not()</code>.<br> + Denife a sintaxe de <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, e <code>:indeterminate</code>, mas sem o significado semântico associado. Nenhuma mudança significativa, para as pseudo-classes definidas em {{SpecName('CSS2.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Define <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, e <code>:focus</code>.<br> + Nenhuma mudança significativa, para as pseudo-classes definidas em{{SpecName('CSS1')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Define <code>:link</code>, <code>:visited</code>, e <code>:active</code>, mas sem o significado semântico associado.</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ Cssxref("pseudo-elements") }}</li> +</ul> diff --git a/files/pt-br/web/css/pseudo-elementos/index.html b/files/pt-br/web/css/pseudo-elementos/index.html new file mode 100644 index 0000000000..a457c9ac9a --- /dev/null +++ b/files/pt-br/web/css/pseudo-elementos/index.html @@ -0,0 +1,104 @@ +--- +title: Pseudo-elementos +slug: Web/CSS/Pseudo-elementos +tags: + - CSS + - Principiantes + - Pseudo-elementos + - Referencia + - Seletores +translation_of: Web/CSS/Pseudo-elements +--- +<div>{{ CSSRef() }}</div> + +<div>Um <strong>pseudo-elemento</strong> CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento {{CSSxRef("::first-line")}} aplica o estilo apenas na primeira linha de um parágrafo.</div> + +<div></div> + +<pre class="brush: css no-line-numbers notranslate">/* A primeira linha de todo elemento <p>. */ +p::first-line { + color: blue; + text-transform: uppercase; +}</pre> + +<div class="note"> +<p><strong>Observação:</strong> Diferentemente dos pseudo-elementos, {{cssxref("pseudo-classes")}} podem ser utilizadas para estilizar um elemento baseado em seu <em>estado</em>.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">seletor::pseudo-elemento { + propriedade: valor; +} +</pre> + +<p>Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.</p> + +<p class="note"><strong>Observação:</strong> Como regra, os dois pontos devem ser usados duas vezes (<code>::</code>) ao invés de uma única vez (<code>:</code>). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.</p> + +<h2 id="Índice_de_pseudo-elementos_comuns">Índice de pseudo-elementos comuns</h2> + +<div class="index"> +<ul> + <li>{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ cssxref("::cue")}}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::selection") }}</li> + <li>{{ Cssxref("::slotted") }}</li> + <li>{{ Cssxref("::backdrop") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> +</ul> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versão mais baixa</th> + <th>Suporte de</th> + </tr> + <tr> + <td rowspan="2">Internet Explorer</td> + <td>8.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>9.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>1.0 (1.5)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Opera</td> + <td>4.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>7.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a></li> +</ul> diff --git a/files/pt-br/web/css/radial-gradient()/index.html b/files/pt-br/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..1479f4b77b --- /dev/null +++ b/files/pt-br/web/css/radial-gradient()/index.html @@ -0,0 +1,209 @@ +--- +title: radial-gradient() +slug: Web/CSS/radial-gradient() +translation_of: Web/CSS/radial-gradient() +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumo">Resumo</h2> + +<p>A função do CSS <code>radial-gradient()</code> cria uma {{cssxref("<image>")}} que representa um gradiente de cores irradiando de uma origem, o <em>centro</em> do gradiente. O resultado dessa função é um objeto do CSS do tipo {{cssxref("<gradient>")}}.</p> + +<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Gradientes radiais são definidos pelo seu <em>centro</em>, o contorno e a posição da <em>forma de fechamento (ending shape)</em> e as <em>paradas de cor (color stops)</em>. O gradiente radial consiste de formas concêntricas uniformemente escaladas partindo do centro até sua forma de fechamento, indo potencialmente além, com a mesma forma da forma de fechamento. As paradas de cor são posicionadas num <em>raio de gradiente virtual</em> saindo do centro horizontalmente para a direita. O posicionamento das porcentagens das paradas de cor são relativas à interseção entre a forma de fechamento e esse raio de gradiente representando <code>100%</code>. Cada forma é monocromática e a cor, definida pela cor no raio de gradiente que intersecta.</p> + +<p>Formas de fechamento podem ser apenas círculo <code>(circle)</code> ou elipse <code>(ellipse)</code>.</p> + +<p>Como qualquer outro gradiente, um gradiente radial do CSS não é uma <a href="color_value" rel="custom"><code><cor></code></a> do CSS, mas uma imagem <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">sem dimensões intrínsecas</a>, i. e. uma imagem sem tamanho natural ou preferencial, tampouco proporção. Seu tamanho concreto será idêntico ao tamanho do elemento ao qual for aplicado.</p> + +<p>A função <code>radial-gradient</code> não permite criar gradientes repetitivos. Para esse efeito, use a função do CSS {{ Cssxref("repeating-radial-gradient") }}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre style=""><code>Gramática formal: radial-gradient( [ circle || <a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length"><length></a> ] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , +| [ ellipse || [<a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage" title="/en-US/docs/CSS/percentage"><percentage></a> ]{2}] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , +| [ [ circle | ellipse ] || <extent-keyword> ] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , +| at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> , +<color-stop> [ , <color-stop> ]+ ) +</code></pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><position></code></dt> + <dd>Uma {{cssxref("<position>")}}, interpretada da mesma forma que {{Cssxref("background-position")}} ou {{Cssxref("transform-origin")}}. Se omitida, assume o padrão <code>center</code>.</dd> + <dt><code><shape></code></dt> + <dd>A forma do gradiente. Esse valor é <code>circle</code> (indicando que a forma do gradiente é um círculo com raio constante) ou <code>ellipse</code> (indicando que a forma é uma elipse com os eixos alinhados ao elemento). O valor padrão é <code>ellipse</code>.</dd> + <dt><code><size></code></dt> + <dd>O tamanho do gradiente. Essa valor é uma das {{anch("Restrições de tamanho")}} listada abaixo.</dd> + <dt><code><color-stop></code></dt> + <dd>Representando uma cor fixa num determinado ponto, esse valor é composto por um valor {{cssxref("<color>")}}, seguido de uma posição de parada opcional (uma {{cssxref("<percentage>")}} ou uma {{cssxref("<length>")}} referente ao raio de gradiente virtual). Uma porcentagem de <code>0%</code>, ou um tamanho de <code>0</code> representa o centro do gradiente e o valor <code>100%</code> a interseção da forma de fechamento com o raio de gradiente virtual. Valores de porcentagem intermediários são posicionados linearmente no raio de gradiente.</dd> + <dt><code><extent-keyword></code></dt> + <dd>Palavras-chave descrevendo quão grande a forma de fechamento deve ser. Os possíveis valores são:</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <th>Constante</th> + <th>Descrição</th> + </tr> + <tr> + <td><code>closest-side</code></td> + <td>A forma de fechamento do gradiente encontra o lado do elemento mais próximo ao seu centro (para círculos) ou encontra ambos os lados vertical e horizontal mais próximos ao centro (para elipses).</td> + </tr> + <tr> + <td><code>closest-corner</code></td> + <td>A forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais próximo ao seu centro.</td> + </tr> + <tr> + <td><code>farthest-side</code></td> + <td>Similar ao closest-side, mas a forma de fechamento fica com o tamanho necessário para encontrar o lado do elemento mais distante do centro do gradiente (ou lados vertical e horizontal).</td> + </tr> + <tr> + <td><code>farthest-corner</code></td> + <td>A forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais distante de seu centro.</td> + </tr> + </tbody> + </table> + Rascunhos preliminares incluiam outras palavras-chave (<code>cover</code> e <code>contain</code>) como sinônimos dos valores do padrão <span class="st"><code>farthest-corner</code></span> e <code>closest-side</code> respectivamente. Use somente os valores do padrão, uma vez que algumas implementações podem já ter removido suporte a esses valores mais antigos.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<div style="">ellipse farthest-corner</div> + +<pre class="notranslate">background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); +</pre> + +<div style="">470px 47px</div> + +<pre class="notranslate">background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%); +</pre> + +<div style="">farthest-corner</div> + +<pre class="notranslate">background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);</pre> + +<div style="">16px radius fuzzy circle</div> + +<pre class="notranslate">background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()') }}</td> + <td>{{ Spec2('CSS3 Images') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico (suporte à função <code>radial-gradient()</code>, mas não necessariamente com a sintaxe final)</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br> + {{ CompatGeckoDesktop("16") }}</td> + <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> + <td>10.0 <sup><a href="#bc1">[1]</a></sup></td> + <td>11.60{{ property_prefix("-o") }}</td> + <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td> + </tr> + <tr> + <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxe legada do webkit</a> {{ non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.0{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> + </tr> + <tr> + <td>Sintaxe <code>at</code> (sintaxe do padrão final)</td> + <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br> + {{ CompatGeckoDesktop("16") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>11.60{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup><br> + Presto 2.12 will remove the prefix.</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br> + {{ CompatGeckoMobile("16") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxe legada do webkit</a> {{ non-standard_inline() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Sintaxe <code>at</code> (sintaxe do padrão final)</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("10") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br> + {{ CompatGeckoMobile("16") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 a 9.0 suportam a funcionalidade proprietária <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> + +<p><sup><a name="bc2">[2]</a></sup> WebKit desde 528 suporta a função legada <a class="external" href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Veja também o <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15" title="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">suporte atual</a> para gradientes radiais.</p> + +<p><sup><a name="bc3">[3]</a></sup> Firefox 3.6 e Webkit implementaram uma sintaxe anterior, prefixada.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("repeating-radial-gradient") }}, {{ cssxref("linear-gradient") }}</li> + <li>Proposta original do WebKit: <a class="external" href="http://webkit.org/blog/175/introducing-css-gradients/" title="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li> + <li>Nova implementação do WebKit: <a class="external" href="http://webkit.org/blog/1424/css3-gradients/" title="http://webkit.org/blog/1424/css3-gradients/">http://webkit.org/blog/1424/css3-gradients/</a></li> +</ul> diff --git a/files/pt-br/web/css/repeating-linear-gradient()/index.html b/files/pt-br/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..e2be000120 --- /dev/null +++ b/files/pt-br/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,153 @@ +--- +title: repeating-linear-gradient +slug: Web/CSS/repeating-linear-gradient() +translation_of: Web/CSS/repeating-linear-gradient() +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary">Summary</h2> + +<p>A função CSS <code>repeating-linear-gradient</code> cria uma {{cssxref("<image>")}} de repetidos gradientes. Isso funciona da mesma forma, e recebe os mesmos argumentos dos gradientes lineares básicos, como descrito em {{ cssxref("linear-gradient") }}, mas ele automaticamente repete as paradas das cores infinitamente em ambas as direções, com suas posições trocadas por múltiplos da diferença entre a posição da última parada de cor e a posição da primeira.</p> + +<p>The consequence is that an end color of a gradient always coincide with a start color. If both are not identical, this will result in a sharp transition.</p> + +<p>Like any other gradient, a repeating CSS linear gradient is not a CSS <span class="lang lang-en"><code><a href="color_value" rel="custom"><color></a></code> </span> but an image with <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">no intrinsic dimensions</a>; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.</p> + +<p>Mozilla currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}. You specify a gradient value instead of an image URL.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox notranslate">Formal grammar: repeating-linear-gradient( [ <a href="/en-US/CSS/angle" title="angle"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) + \---------------------------------/ \----------------------------/ + Definition of the gradient line List of color stops + + where <code><side-or-corner> = [left | right] || [top | bottom]</code> + and <code><color-stop> = <color> [ <percentage> | <length> ]?</code> +</pre> + +<pre class="notranslate">repeating-linear-gradient( 45deg, blue, red ); /* A repeating gradient on 45deg axe starting blue and finishing red */ +repeating-linear-gradient( to left top, blue, red); /* A repeating gradient going from the bottom right to the top left + starting blue and finishing red */ + +repeating-linear-gradient( 0deg, blue, green 40%, red ); /* A repeating gradient going from the bottom to top, starting blue, + being green after 40% and finishing red */ +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><side-or-corner></code></dt> + <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br> + The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code><color-stop></code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd> + <dt><code><angle></code></dt> + <dd>An angle of direction for the gradient. See {{ cssxref("<angle>") }}.</dd> + <dt><code><color-stop></code></dt> + <dd>This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{cssxref("<length>")}} along the gradient axis).<br> + Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css notranslate">background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px); +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()') }}</td> + <td>{{ Spec2('CSS3 Images') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br> + {{ CompatGeckoDesktop("16") }}</td> + <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> + <td>10.0 <sup><a href="#bc1">[1]</a></sup></td> + <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td> + <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> + </tr> + <tr> + <td>On any properties that accept {{cssxref("<image>")}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td> + </tr> + <tr> + <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup><br> + Removed in {{ CompatGeckoDesktop("16") }}</td> + <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> + <td>10.0</td> + <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td> + <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td> + </tr> + <tr> + <td><code>to </code>syntax</td> + <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}<sup><a href="#bc4">[4]</a></sup><br> + {{ CompatGeckoDesktop("16") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>11.60{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup><br> + Presto 2.12 will remove the prefix.</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> + +<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> + +<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> + +<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p> + +<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p> + +<pre class="notranslate">-moz-repeating-linear-gradient(to top left, blue, red);</pre> + +<p>is the same as:</p> + +<pre class="notranslate">-moz-repeating-linear-gradient(bottom right, blue, red);</pre> + +<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("linear-gradient", "linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li> + <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }}.</li> +</ul> diff --git a/files/pt-br/web/css/ruby-align/index.html b/files/pt-br/web/css/ruby-align/index.html new file mode 100644 index 0000000000..f67cfc1262 --- /dev/null +++ b/files/pt-br/web/css/ruby-align/index.html @@ -0,0 +1,239 @@ +--- +title: ruby-align +slug: Web/CSS/ruby-align +tags: + - CSS + - Propriedade + - Referencia + - Referencia CSS +translation_of: Web/CSS/ruby-align +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Summary">Summary</h2> + +<p>A propriedade <code><strong>ruby-align</strong></code> do CSS define a distribuição dos direfentes elementos do ruby sobre a base.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* Valores chave */ +ruby-align: start; +ruby-align: center; +ruby-align: space-between; +ruby-align: space-around; + +/* Valores globais */ +ruby-align: inherit; +ruby-align: initial; +ruby-align: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>start</code></dt> + <dd>É uma palavra-chave indicando que o ruby será alinhado com o início do texto base.</dd> + <dt><code>center</code></dt> + <dd>É uma palavra-chave indicando que o ruby será alinhado no meio do texto base.</dd> + <dt><code>space-between</code></dt> + <dd>É uma palavra-chave indicando que o espaço extra será distruibuído entre os elementos do ruby.</dd> + <dt><code>space-around</code></dt> + <dd>É uma palavra-chave indicando que o espaço extra será distruibuído entre os elementos do ruby e em torno deles.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Esse HTML irá renderizar diferentemente com cada valor do <code>ruby-align</code>:</p> + +<pre class="brush: html"><ruby> + <rb>Esse é um grande texto para verificar</rb> + <rp>（</rp><rt>ruby curto</rt><rp>）</rp> +</ruby> +</pre> + +<h3 id="Ruby_alinhado_no_ínicio_do_texto_base">Ruby alinhado no ínicio do texto base</h3> + +<pre class="brush: html" style="display: none;"><ruby> + <rb>This is a long text to check</rb> + <rp>（</rp><rt>short ruby</rt><rp>）</rp> +</ruby> +</pre> + +<pre class="brush: css">ruby { + ruby-align:start; +}</pre> + +<p>Isso dará o seguinte resultado:</p> + +<p>{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}</p> + +<h3 id="Ruby_alinhado_no_centro_do_texto_base">Ruby alinhado no centro do texto base</h3> + +<pre class="brush: html" style="display: none;"><ruby> + <rb>This is a long text to check</rb> + <rp>（</rp><rt>short ruby</rt><rp>）</rp> +</ruby> +</pre> + +<pre class="brush: css">ruby { + ruby-align:center; +}</pre> + +<p>Isso dará o seguinte resultado:</p> + +<p>{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}</p> + +<h3 id="Espaço_extra_distribuído_entre_os_elementos_do_ruby">Espaço extra distribuído entre os elementos do ruby</h3> + +<pre class="brush: html" style="display: none;"><ruby> + <rb>This is a long text to check</rb> + <rp>（</rp><rt>short ruby</rt><rp>）</rp> +</ruby> +</pre> + +<pre class="brush: css">ruby { + ruby-align:space-between; +}</pre> + +<p>Isso dará o seguinte resultado:</p> + +<p>{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}</p> + +<h3 id="Espaço_extra_distribuído_entre_os_elementos_do_ruby_e_em_torno_deles">Espaço extra distribuído entre os elementos do ruby e em torno deles</h3> + +<pre class="brush: html" style="display: none;"><ruby> + <rb>This is a long text to check</rb> + <rp>（</rp><rt>short ruby</rt><rp>）</rp> +</ruby> +</pre> + +<pre class="brush: css">ruby { + ruby-align:space-around; +}</pre> + +<p>Isso dará o seguinte resultado:</p> + +<p>{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_elements", 180, 40)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td>Definição inicital</td> + </tr> + </tbody> +</table> + +<h2 id="Compatilibade_de_Navegador">Compatilibade de Navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Aspecto</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Desde a versão 9 o Internet Explorer implementa um rascunho inicial do Ruby do CSS onde o <code>ruby-align</code> tinha os seguintes valores: <code>auto</code>, <code>left</code>, <code>center</code>, <code>right</code>, <code>distribute-letter</code>, <code>distribute-space</code>, and <code>line-edge</code>. Aqui está uma simples tabela de conversão:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Sintaxe do IE</th> + <th scope="col">Sintaxe padrão</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>auto</code></td> + <td>Não usa <code>ruby-align</code></td> + </tr> + <tr> + <td><code>left</code></td> + <td>Usa <code>start</code> (em scripts ltr)</td> + </tr> + <tr> + <td><code>center</code></td> + <td><code>center</code></td> + </tr> + <tr> + <td><code>right</code></td> + <td>Usa <code>start</code> (em scripts rtl)</td> + </tr> + <tr> + <td><code>distribute-letter</code></td> + <td>Nenhum equivalente direto, usa <code>space-between</code> ou <code>space-around</code></td> + </tr> + <tr> + <td><code>distribute-space</code></td> + <td><code>space-around</code></td> + </tr> + <tr> + <td><code>line-edge</code></td> + <td>Nenhum equivalente direto.</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Elementos Ruby do HTML: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, and {{HTMLElement("rtc")}}.</li> + <li>Propriedades Ruby do CSS: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li> +</ul> diff --git a/files/pt-br/web/css/scroll-behavior/index.html b/files/pt-br/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..13c2ca294c --- /dev/null +++ b/files/pt-br/web/css/scroll-behavior/index.html @@ -0,0 +1,172 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +tags: + - CSS + - CSS PROPRIEDADE SCROLL + - CSS SCROLL + - PROPRIEDADES DO CSS + - REFERENCIA DE SCROLL +translation_of: Web/CSS/scroll-behavior +--- +<div>{{ CSSRef }}</div> + +<p>A propriedade css <strong><code>scroll-behavior</code></strong> especifica o comportamento de rolagem para uma caixa de scrolling, quando a rolagem acontece devido às APIs do CSSOM. Qualquer outro scroll, aqueles que são executados pelo usuário, não são afetados por esta propriedade. Quando esta propriedade é especificada no elemento raiz, ela se aplica à viewport.</p> + +<p>User agents podem ignorar essa propriedade.</p> + +<pre class="brush:css no-line-numbers">/* Valores das palavras-chave */ +scroll-behavior: auto; +scroll-behavior: smooth; + +/* Valores globais */ +scroll-behavior: inherit; +scroll-behavior: initial; +scroll-behavior: unset; +</pre> + +<p>Note que qualquer outro scroll, tem essa tal performace para o usuario, essa propriedade não é afetada. Quando esta propriedade é especificada na raiz do elemento então aplicamos na instancia do viewport. </p> + +<p>Os usuarios que agem com está propriedade pode ignora-lá.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<p>O <code>scroll-behavior</code> é uma propriedade específica, com um valor de uma palavra-chave listada abaixo.</p> + +<h3 class="brush:css" id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>A caixa de rolagem rola instantaneamente.</dd> + <dt><code>smooth</code></dt> + <dd>A caixa de scroll rola de forma suave usando uma função de temporização definida pelo usuário em um período de tempo. Os agentes do usuário devem seguir as convenções da plataforma, se houver.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><nav> + <a href="#page-1">1</a> + <a href="#page-2">2</a> + <a href="#page-3">3</a> +</nav> +<scroll-container> + <scroll-page id="page-1">1</scroll-page> + <scroll-page id="page-2">2</scroll-page> + <scroll-page id="page-3">3</scroll-page> +</scroll-container></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + display: inline-block; + width: 50px; + text-decoration: none; +} +nav, scroll-container { + display: block; + margin: 0 auto; + text-align: center; +} +nav { + width: 339px; + padding: 5px; + border: 1px solid black; +} +scroll-container { + display: block; + width: 350px; + height: 200px; + overflow-y: scroll; + scroll-behavior: smooth; +} +scroll-page { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font-size: 5em; +} +</pre> + +<h3 id="Saída">Saída</h3> + +<p>{{ EmbedLiveSample('Example', "100%", 250) }}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Especificações inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com navegador</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>61<sup>[1]</sup></td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Suporte ao Chrome e Opera, habilitando "<strong>Smooth Scrolling</strong>" ou "<strong>Enable experimental web platform features</strong>".</p> diff --git a/files/pt-br/web/css/scrollbar-color/index.html b/files/pt-br/web/css/scrollbar-color/index.html new file mode 100644 index 0000000000..6b368ab66b --- /dev/null +++ b/files/pt-br/web/css/scrollbar-color/index.html @@ -0,0 +1,119 @@ +--- +title: scrollbar-color +slug: Web/CSS/scrollbar-color +translation_of: Web/CSS/scrollbar-color +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><span class="seoSummary">A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>scrollbar-color</code></strong> define as cores da barra de rolagem do navegador.</span></p> + +<p><strong>Track</strong> refere-se ao fundo da barra de rolagem, que normalmente é fixa, independente da posição da página.</p> + +<p><strong>Thumb</strong> refere-se a parte móvel da barra de rolagem, um botão auxiliar que flutua acima da <strong>Track</strong>.</p> + +<p>{{CSSInfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush: css">/* Palavras reservadas */ +scrollbar-color: auto; +scrollbar-color: dark; +scrollbar-color: light; + +/* Nomes de <color> */ +scrollbar-color: rebeccapurple green; /* Duas cores válidas. +O primeiro valor aplica-se ao <strong>Thumb</strong>, o segundo ao <strong>Track </strong>*/ + +/* Valores globais */ +scrollbar-color: inherit; +scrollbar-color: initial; +scrollbar-color: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><scrollbar-color></code></dt> + <dd>Define a cor da scrollbar. + <table class="standard-table"> + <tbody> + <tr> + <td><code>auto</code></td> + <td> + <p>Valor padrão de renderização do background da scrollbar (Track), caso não sejam definidos outros valores.</p> + </td> + </tr> + <tr> + <td><code>dark</code></td> + <td> + <p>Mostra uma scrollbar mais escura, podendo ser um estilo padrão definido pelo navegador, ou personalizado com cores escuras.</p> + </td> + </tr> + <tr> + <td><code>light</code></td> + <td>Mostra uma scrollbar mais clara, podendo ser um estilo padrão definido pelo navegador, ou personalizado com cores escuras.</td> + </tr> + <tr> + <td><code><color> <color></code></td> + <td>A primeira cor é aplicada à <strong>thumb</strong>, a segunda cor ao <strong>track</strong></td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>Note</strong>: User Agents must apply any <code>scrollbar-color</code> value set on the root element to the viewport.</p> + </div> + </dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">.scroller { + width: 300px; + height: 100px; + overflow-y: scroll; + scrollbar-color: rebeccapurple green; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div></pre> + +<h3 id="Result">Result</h3> + +<div>{{EmbedLiveSample("Example")}}</div> + +<h2 id="Cuidados_de_acessibilidade">Cuidados de acessibilidade</h2> + +<p>When using <code>scrollbar-color</code> property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See <a href="https://www.w3.org/TR/WCAG20-TECHS/G183.html">Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1</a>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}</td> + <td>{{Spec2("CSS Scrollbars")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<div>{{Compat("css.properties.scrollbar-color")}}</div> diff --git a/files/pt-br/web/css/seletor_de_atributos/index.html b/files/pt-br/web/css/seletor_de_atributos/index.html new file mode 100644 index 0000000000..88881a61ea --- /dev/null +++ b/files/pt-br/web/css/seletor_de_atributos/index.html @@ -0,0 +1,158 @@ +--- +title: Seletor de atributos +slug: Web/CSS/Seletor_de_atributos +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p>O <strong>seletor de atributos </strong>combina elementos baseado no valor de um atributo dado.</p> + +<pre class="brush: css no-line-numbers">/* <a> elementos com um atributo de título */ +a[title] { + color: purple; +} + +/* <a> elementos combinando com um href "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* <a> elementos com um href contendo "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* <a> elementos com href terminando em ".org" */ +a[href$=".org"] { + font-style: italic; +}</pre> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd>Representa um elemento com atributo de nome <em>attr</em>.</dd> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd>Representa um elemento com um atributo de nome <em>attr</em>, o qual o valor é exatamente <em>value.</em></dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd>Representa um elemento com um atributo de nome <em>attr, </em>o qual <em>value </em>é uma lista de palavras separadas por espaços, e uma dessas é exatamente <em>value.</em></dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd>Representa um elemento com um atributo de nome <em>attr </em> o qual o valor pode ser exatamente <em>value </em>ou pode começar com <em>value </em>imediatamente seguido por hífen <code>-</code> (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd>Representa um elemento com um atributo com nome <em>attr </em>que tem um valor prefixado (precedido) por <em>value.</em></dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd>Representa um elemento com um atributo de nome <em>attr </em>que tem como sufixo (seguido) por <em>value.</em></dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd>Representa um elemento com um atributo de nome <em>attr </em>o qual valor contém ao menos uma ocorrência de <em>value </em>contido na string.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>Adiciona um <code>i</code> (ou <code>I</code>) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Links">Links</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Links internos, começando com "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Links com "example" em qualquer lugar da URL */ +a[href*="example"] { + background-color: silver; +} + +/* Links com "insensitive" em qualquer lugar da URL, + independentemente da capitalização */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Links com final ".org" */ +a[href$=".org"] { + color: red; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Links')}}</p> + +<h3 id="Languages">Languages</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Todas divs com um atributo `lang` em negrito. */ +div[lang] { font-weight: bold; } +/* Todas divs com US English em azul (blue). */ +div[lang~="en-us"] { color: blue; } +/* Todas divs onde Portuguese esta em verde (green). */ +div[lang="pt"] { color: green; } +/* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). */ +div[lang|="zh"] { color: red; } +/* Todas divs com Traditional Chinese `data-lang` que é purple. */ +/* Nota: Você também poderia usar atributos separados por hífen com aspas duplas */ +div[data-lang="zh-TW"] { color: purple; } +</pre> + +<p> </p> + +<h4 id="HTML_2">HTML</h4> + +<pre><code><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">?世界您好！</div></code></pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Languages')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Adiciona um modificador para a seleção do valor do atributo ASCII </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibilidade">Browser compatibilidade</h2> + + + +<p>{{Compat("css.selectors.attribute")}}</p> diff --git a/files/pt-br/web/css/seletor_universal/index.html b/files/pt-br/web/css/seletor_universal/index.html new file mode 100644 index 0000000000..15e64a08ca --- /dev/null +++ b/files/pt-br/web/css/seletor_universal/index.html @@ -0,0 +1,105 @@ +--- +title: Seletor universal +slug: Web/CSS/Seletor_universal +tags: + - CSS + - Referências + - Seletores +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef}}</div> + +<p>O <strong>seletor universal</strong> do CSS (<code>*</code>) aplica estilos a elementos de qualquer tipo.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona todos os elementos */ +* { + color: green; +}</pre> + +<p>A partir do CSS3, o asterisco pode ser combinado com {{cssxref("CSS_Namespaces", "namespaces")}}:</p> + +<ul> + <li><code>ns|*</code> - aplica a todos os elementos no namespace <em>ns</em></li> + <li><code>*|*</code> - aplica a todos elementos</li> + <li><code>|*</code> - aplica a todos os elementos que não tem namespaces declarados</li> +</ul> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">* { <em>propriedades de estilo</em> }</pre> + +<p>O asterisco é opcional para seletores simples. Por exemplo, <code>*.atencao</code> e <code>.atencao</code> são equivalentes.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* [lang^=pt] { + color: green; +} + +*.atencao { + color: red; +} + +*#conteudoprincipal { + border: 1px solid blue; +} + +.flutuando { + float: left +} + +/* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando */ +.flutuando + * { + clear: left; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="atencao"> + <span lang="pt-br">Um span verde</span> em um parágrafo vermelho. +</p> +<p id="conteudoprincipal" lang="pt-pt"> + <span class="atencao">Um span vermelho</span> em um parágrafo verde. +</p></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Exemplos')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sem mudanças</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Browsers">Compatibilidade dos Browsers</h2> + +<div class="hidden">A tabela de compatibilidade nessa página é gerada a partir de dados estruturados. Se você gostaria de contribuir com esses dados, favor checar aqui <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos enviar um pull request.</div> + +<p>{{Compat("css.selectors.universal")}}</p> diff --git a/files/pt-br/web/css/seletores_css/index.html b/files/pt-br/web/css/seletores_css/index.html new file mode 100644 index 0000000000..644d9d87e9 --- /dev/null +++ b/files/pt-br/web/css/seletores_css/index.html @@ -0,0 +1,150 @@ +--- +title: Seletores CSS +slug: Web/CSS/Seletores_CSS +tags: + - CSS + - Referência(2) + - Seletores + - Seletores CSS +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef}}</div> + +<p>Os Seletores definem quais elementos um conjunto de regras CSS se aplica.</p> + +<h2 id="Seletores_Básicos">Seletores Básicos</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Seletor por tag</a></dt> + <dd>Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.<br> + <strong>Sintaxe:</strong> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><em>nome-da-tag</em></span></font><br> + <strong>Exemplo:</strong> <code>input</code> corresponderá a qualquer elemento {{HTMLElement('input')}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Seletor por classe</a></dt> + <dd>Este seletor básico escolhe elementos baseados no valor de seu atributo <code>classe</code>.<strong> Sintaxe:</strong> <code>.<em>nome-da-classe</em></code><br> + <strong>Examplo:</strong> <code>.index</code> irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).</dd> + <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Seletor por ID</a></dt> + <dd>Este seletor básico escolhe nós baseados no valor do atributo <code>id</code>. Deve existir apenas um elemento com o mesmo ID no mesmo documento.<br> + <strong>Sintaxe:</strong> <code>#<em>nome-do-id</em></code><br> + <strong>Exemplo:</strong> <code>#toc</code> irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).</dd> + <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Seletores universais</a></dt> + <dd>Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.<br> + <strong>Sintaxe:</strong> <code>* ns|* *|*</code><br> + <strong>Exemplo:</strong> <code>*</code> irá corresponder a todos os elementos do documento.</dd> + <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Seletores por atributo</a></dt> + <dd>Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.<br> + <strong>Sintaxe:</strong> <code>[atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]</code><br> + <strong>Exemplo:</strong> <code>[autoplay]</code> irá corresponder a todos os elementos que possuirem o atributo <code>autoplay</code> (para qualquer valor).</dd> +</dl> + +<h2 id="Combinadores">Combinadores</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Seletores de irmãos adjacentes</a></dt> + <dd>O combinador <code>+</code> seleciona os nós que seguem imediatamente o elemento especificado anteriormente.<br> + <strong>Sintaxe:</strong> <code><var>A</var> + <var>B</var></code><br> + <strong>Exemplo:</strong> <code>ul + li</code> irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Seletores gerais de irmãos</a></dt> + <dd>O combinador <code>~</code> seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.<br> + <strong>Sintaxe:</strong> <code><var>A</var> ~ <var>B</var></code><br> + <strong>Exemplo:</strong> <code>p ~ span</code> irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.</dd> + <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Seletor de filhos</a></dt> + <dd>O combinador <code>></code> selecina nós que são filhos diretos do elemento especificado anteriormente.<br> + <strong>Sintaxe:</strong> <code><var>A</var> > <var>B</var></code><br> + <strong>Exemplo:</strong> <code>ul > li</code> irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.</dd> + <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Seletor de descendentes</a></dt> + <dd>O combinador <code> </code> seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).<br> + <strong>Sintaxe:</strong> <code>A B</code><br> + <strong>Exemplo:</strong> <code>div span</code> irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.</dd> +</dl> + +<h2 id="Pseudo-classes">Pseudo-classes</h2> + +<p><a href="/pt-BR/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.</p> + +<h2 id="Pseudo-elementos">Pseudo-elementos</h2> + +<p><a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">Pseudo-elementos</a> são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.5</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/shorthand_properties/index.html b/files/pt-br/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..f993c40fc5 --- /dev/null +++ b/files/pt-br/web/css/shorthand_properties/index.html @@ -0,0 +1,140 @@ +--- +title: Propriedades shorthand +slug: Web/CSS/Shorthand_properties +translation_of: Web/CSS/Shorthand_properties +--- +<h2 id="Definition" name="Definition">Definição</h2> + +<p><dfn>Propriedades shorthand (tradução literal: Propriedades abreviadas) são propriedades de CSS que deixam você setar os valores de outras propriedades de CSS simultaneamente. Usando shorthand property, um desenvolvedor web pode escrever folhas de estilo mais concisas e legíveis,economizando tempo e energia.</dfn></p> + +<p>A especificação CSS define como shorthand properties, o grupo de propriedades com o mesmo tema. Ex: a propriedade CSS {{cssxref("background")}} é uma propriedade shorthand que é capaz de definir o valor de {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, e {{cssxref("background-position")}}. Assim também,como as propriedades comuns e relacionadas a fonte podem ser definidas e usadas com o shorthand {{cssxref("font")}},e os diferentes margins em volta de um box podem ser definidas com o shorthand {{cssxref("margin")}}.</p> + +<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Casos específicos</h2> + +<p>Mesmo sendo convenientes para se usar, existem alguns casos que precisam ser analisados antes de usar:</p> + +<ol> + <li>Um valor que não especificado é setado seu valor inicial. Isso parece uma anedota, mas realmente significa que sobrescreve valores previamente setados. Por exemplo: + <pre>background-color: red; +background: url(images/bg.gif) no-repeat top right; +</pre> + não irá setar a cor do background para vermelho, mas para {{cssxref("background-color")}}'s padrão, transparente, como a segunda regra tem precedência.</li> + <li>Apenas propriedades individuais são herdadas. Como valores que faltam são substituidos pelo seu valor inicial, é impossivel herdar valores individuais os omitindo. O valor <code>inherit </code>pode ser aplicado a uma propriedade, mas num total e não como uma palavra-chave para um valor ou outro. Isso significa que a unica forma de um valor específico ser herdado é usando a propriedade em longhand com o valor <code>inherit</code>.</li> + <li>Propriedades shorthand tentam não forçar uma ordem específica para os valores das propriedades que elas substituem. Isso funciona bem quando essas propriedades usam valores de diferentes tipos, como a ordem não tem importância, isso funciona bem quando essas propriedades usam valores de diferentes tipos, como a ordem não tem importância, mas isso não funciona tão facilmente quando várias propriedades podem ter valores idênticos. O tratamento destes casos está agrupado em várias categorias: + <ol> + <li>Propriedades shorthand que lidam com valores da borda de um box, como {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, sempre usam um consistente 1-para-4 valor de sintaxe representando essas bordas: + <table> + <tbody> + <tr> + <td><img alt="border1.png" src="/files/3646/border1.png"></td> + <td><em>A sintaxe de um valor</em>: <code>border-width: 1em</code> — O valor único representa todas as bordas</td> + </tr> + <tr> + <td><img alt="border2.png" src="/files/3647/border2.png"></td> + <td><em>As sintaxes de dois valores</em>: <code>border-width: 1em 2em</code> — O primeiro valor representa a vertical, isto é, as bordas superior e inferior, a segunda as horizontais, que é a esquerda e a direita.</td> + </tr> + <tr> + <td><img alt="border3.png" src="/files/3648/border3.png"></td> + <td><em>As sintaxes de três valores</em>: <code>border-width: 1em 2em 3em</code> — O primeiro valor representa a borda superior, a segunda, a horizontal, que é esquerda e direita, e o terceiro valor a borda inferior</td> + </tr> + <tr> + <td><img alt="border4.png" src="/files/3649/border4.png"></td> + <td> + <p><em>As sintaxes de quatro valores</em>:<code>border-width: 1em 2em 3em 4em</code> — Os quatro valores representam as margens superior, direita, inferior e esquerda, respectivamente, sempre nessa ordem, que é no sentido horário começando pelo topo (a letra inicial de Top-Right-Bottom-Left corresponde à ordem da consoante da palavra <em>trouble</em>: TRBL)</p> + </td> + </tr> + </tbody> + </table> + </li> + <li>Também parecido, shorthand que lidam com os cantos de um box {{cssxref("border-radius")}}, sempre usam 1-para-4-valor de sintaxe representando esses cantos: + <table> + <tbody> + <tr> + <td><img alt="corner1.png" src="/files/3650/corner1.png"></td> + <td><em>A sintaxe de um valor</em>: <code>border-radius: 1em</code> — O valor único representa todos os cantos</td> + </tr> + <tr> + <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> + <td><em>As sintaxes de dois valores</em>: <code>border-radius: 1em 2em</code> — O primeiro valor representa o canto superior esquerdo e inferior direito, o segundo o superior direito e inferior esquerdo</td> + </tr> + <tr> + <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> + <td><em>As sintaxes de três valores</em>: <code>border-radius: 1em 2em 3em</code> — O primeiro valor representa o canto superior esquerdo, o segundo o canto superior direito eo inferior esquerdo e o terceiro o canto inferior direito</td> + </tr> + <tr> + <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> + <td> + <p><em>As sintaxes de quatro valores</em>: <code>border-radius: 1em 2em 3em 4em</code> — Os quatro valores representam os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo respectivamente, sempre nessa ordem, que é no sentido horário começando no canto superior esquerdo.</p> + </td> + </tr> + </tbody> + </table> + </li> + </ol> + </li> +</ol> + +<h2 id="Background_Properties" name="Background_Properties">Propriedades de background</h2> + +<p>Um background com as seguintes declarações:</p> + +<pre>background-color: #000; +background-image: url(images/bg.gif); +background-repeat: no-repeat; +background-position: top right;</pre> + +<p>Pode ser resumido em uma unica declaração:</p> + +<pre>background: #000 url(images/bg.gif) no-repeat top right;</pre> + +<p>(A forma shorthand é o equivalente as propriedades longhand acima, mais <code>background-attachment: scroll</code>, em CSS3, algumas propriedades adicionais.)</p> + +<h2 id="Font_Properties" name="Font_Properties">Propriedades de fonte</h2> + +<p>As seguintes declarações:</p> + +<pre>font-style: italic; +font-weight: bold; +font-size: .8em; +line-height: 1.2; +font-family: Arial, sans-serif;</pre> + +<p>Podem ser resumidas a:</p> + +<pre>font: italic bold .8em/1.2 Arial, sans-serif;</pre> + +<p><br> + Essa declaração shorthand é o equivalente as declarações longhand acima, mais <code>font-variant: normal</code> e <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> + +<h2 id="Border_Properties" name="Border_Properties">Propriedades de borda</h2> + +<p>Com a borda, o width (largura), color (cor), podem ser simplificados em uma declaração. Por exemplo,</p> + +<pre>border-width: 1px; +border-style: solid; +border-color: #000;</pre> + +<p>Podem ser escritas como</p> + +<pre>border: 1px solid #000;</pre> + +<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Propriedades de margin e padding</h2> + +<p>As versões shorthand de margin e padding funcionam da mesma maneira. As seguintes declarações CSS:</p> + +<pre>margin-top: 10px; +margin-right: 5px; +margin-bottom: 10px; +margin-left: 5px;</pre> + +<p>são as mesmas da seguinte declaração (note que os valores estão em ordem horária: top, right, bottom e left(TRBL, mesmas consoantes de TRBL "trouble"))</p> + +<pre>margin: 10px 5px 10px 5px;</pre> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li>{{css_key_concepts}}</li> + <li>Propriedades shorthand : {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("animation")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}.</li> +</ul> diff --git a/files/pt-br/web/css/sintaxe/index.html b/files/pt-br/web/css/sintaxe/index.html new file mode 100644 index 0000000000..4d6ff0bf1c --- /dev/null +++ b/files/pt-br/web/css/sintaxe/index.html @@ -0,0 +1,70 @@ +--- +title: Sintaxe +slug: Web/CSS/sintaxe +translation_of: Web/CSS/Syntax +--- +<p>O Objetivo básico da linguagem de folhas de estilo em cascata (<a href="/en/CSS" title="CSS">CSS</a>) é permitir que um motor do navegador pinte elementos na página com características específicas como cores, posições, ou decorações. A sintaxe <em>CSS </em>reflete estes objetivos e seus blocos de contrução básicos são:</p> + +<ul> + <li>A <strong>propriedade</strong> é um identificador que possui um nome legível, que define o que será considerado ou editado;</li> + <li>O <strong>valor</strong> descreve como o recurso será tratado pelo motor. Cada propriedade possui um conjunto de valores válidos, definida por uma gramática formal, bem como um significado semântico, implementado para o motor do navegador.</li> +</ul> + +<h2 id="Declarações_do_CSS">Declarações do CSS</h2> + +<p>A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de <strong>declaração</strong>, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem <span id="result_box" lang="pt"><span class="hps">adequadamente</span><span>, a fim de</span> exibí-lo<span class="hps"> </span><span class="hps">com o estilo</span> correto<span class="hps">.</span></span></p> + +<p>Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, '<code>:</code>' (<code>U+003A COLON</code>), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.</p> + +<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Existem mais de <a href="https://developer.mozilla.org/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">100 propriedades diferentes</a> no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.</p> + +<h2 id="Blocos_de_declaração_CSS">Blocos de declaração CSS</h2> + +<p>Declarações são agrupadas em <strong>blocos</strong>, que estão delimitados na estrutura com uma chave de abertura, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), e fechadas com outra, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>). Os blocos as vezes podem estar aninhados, a abertura e fechamento de chaves no bloco CSS deve ser realizada.</p> + +<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Esses blocos são chamados de <strong>blocos de declaração</strong> e as declarações dentro deles são separadas por, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Um bloco de declaração pode não conter nenhuma declaração. Espaços em branco em volta das declarações não são consideradas. Não é necessário que a última declaração possua ponto e vírgula, apesar de ser considerada uma boa prática pois previne o esquecimento de acrescê-la quando for necessário aumentar o bloco.</p> + +<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p> + +<div class="note">O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML <a href="/en/HTML/Global_attributes#attr-style" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-style"><code>style</code></a>.</div> + +<h2 id="Regras_CSS">Regras CSS</h2> + +<p>Se as folhas de estilo pudessem apenas aplicar uma declaração para cada elemento de uma página da web, eles seriam bem limitados. O principal objetivo é aplicar diferentes declarações a diferentes partes do documento.</p> + +<p>O CSS associa as condições com os blocos de declaração. Cada bloco (válido) é precedido por um ou mais seletores, separados por vírgula, que são condições selecionando alguns elementos da página. O grupo de seletores é chamado de regra.<img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Um elemento pode ser modificado por diversos seletores, e por isso por diversas regras que potencialmente podem conter diversas propriedades, com diferentes valores, o CSS padrão define aquele que possui a precedência e que será aplicado: esse é o tal algoritmo em <a href="/pt-BR/docs/Web/CSS/Getting_Started/Cascading_and_inheritance">cascata</a>.</p> + +<div class="note">É importante perceber que quando uma regra é caracterizada por um grupo de seletores que são algum tipo de atalho com cada um sendo um simples seletor isso não se aplica a validade da regra por si só.<br> +<br> +Isso leva a uma importante consequência: se apenas um dos seletores for inválido, como usar uma pseudo-classe ou pseudo-elemento desconhecido, todo o <em>seletor</em> é inválido e por isso toda a regra é ignorada (invalidada também).</div> + +<h2 id="CSS_statements">CSS statements</h2> + +<p>Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.</p> + +<p>A <strong>statement</strong> is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).</p> + +<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p> + +<p>There are different kinds of statements:</p> + +<ul> + <li><strong>Rulesets</strong> (or <em>rules</em>) that, as seen, associate a collection of CSS declarations to a condition described by a selector.</li> + <li><strong>At-rules</strong> that start with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of <a href="/en/CSS/At-rule" title="At-rule">at-rules</a>, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@charset") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}).</li> +</ul> + +<p>Any statement which isn't a rule or an at-rule is invalid and ignored.</p> + +<p><a name="nested_statements">There is another group of statements, the <strong>nested statements</strong>, these are statements that can be used in a specific subset of at-rules, the <em>conditional group rules</em>. These statements only apply if a specific condition is matched: the <code>@media</code> at-rule content is applied only if the device on which runs the browser matches the expressed condition; the <code>@document</code> at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only <em>rulesets</em> could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in </a><a href="/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ CSS_key_concepts()}}</li> +</ul> diff --git a/files/pt-br/web/css/sintexe_valor/index.html b/files/pt-br/web/css/sintexe_valor/index.html new file mode 100644 index 0000000000..d14bcaecdf --- /dev/null +++ b/files/pt-br/web/css/sintexe_valor/index.html @@ -0,0 +1,436 @@ +--- +title: Sintexe do valor +slug: Web/CSS/Sintexe_valor +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/Value_definition_syntax +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong>CSS value definition syntax</strong>, a formal grammar, is used for defining the set of valid values for a CSS property or function.</span> In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).</p> + +<p class="summary">The definition syntax describes which values are allowed and the interactions between them. A component can be a <em>keyword</em>, some characters considered as a <em>literal</em>, or a value of a given CSS data type or of another CSS property.</p> + +<h2 id="Tipos_de_componente"><span class="short_text" id="result_box" lang="pt"><span>Tipos de componente</span></span></h2> + +<h3 id="Keywords">Keywords</h3> + +<h4 id="Generic_keywords">Generic keywords</h4> + +<p>A keyword with a predefined meaning appears literally, without quotation marks. For example: <code>auto</code>, <code>smaller</code> or <code>ease-in</code>.</p> + +<h4 id="The_specific_case_of_inherit_initial_and_unset">The specific case of <code>inherit</code>, <code>initial</code> and <code>unset</code></h4> + +<p>All CSS properties accept the keywords <code>inherit</code>, <code>initial</code> and <code>unset</code>, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.</p> + +<h3 id="Literals">Literals</h3> + +<p>In CSS, a few characters can appear on their own, like the slash ('<code>/</code>') or the comma ('<code>,</code>'), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate component that are of the same type, but belong to different properties.</p> + +<p>Both symbols appear literally in a value definition.</p> + +<h3 id="Data_types">Data types</h3> + +<h4 id="Basic_data_types">Basic data types</h4> + +<p>Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called <em>basic data types</em>, they are represented with their name surrounded by the symbol '<code><</code>' and '<code>></code>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …</p> + +<h4 id="Non-terminal_data_types">Non-terminal data types</h4> + +<p>Less common data types, called <em>non-terminal data types</em>, are also surrounded by '<code><</code>' and '<code>></code>'.</p> + +<p>Non-terminal data types are of two kinds:</p> + +<ul> + <li>data types <em>sharing the same name of a property</em>, put between quotes. In this case, the data type shares the same set of values as the property. They are often used in the definition of shorthand properties.</li> + <li>data type <em>not sharing the same name of a property</em>. These data types are very close to the basic data types. They only differ from the basic data types in the physical location of their definition. In this case, the definition is usually physically very close to the definition of the property using them.</li> +</ul> + +<h2 id="Component_value_combinators">Component value combinators</h2> + +<h3 id="Brackets">Brackets</h3> + +<p><em>Brackets</em> enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to <strong>group components to bypass the precedence rules</strong>.</p> + +<pre class="syntaxbox">bold [ thin && <length> ]</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold thin 2vh</code></li> + <li><code>bold 0 thin</code></li> + <li><code>bold thin 3.5em</code></li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>thin bold 3em</code>, as <code>bold</code> is juxtaposed with the component defined by the brackets, it must appear before it.</li> +</ul> + +<h3 id="Juxtaposition">Juxtaposition</h3> + +<p>Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called <em>juxtaposition</em>. All juxtaposed components are <strong>mandatory and should appear in the exact order</strong>.</p> + +<pre class="syntaxbox">bold <length> , thin +</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold 1em, thin</code></li> + <li><code>bold 0, thin</code></li> + <li><code>bold 2.5cm, thin</code></li> + <li><code>bold 3vh, thin</code></li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>thin 1em, bold</code>, as the entities must be in the expressed order</li> + <li><code>bold 1em thin</code>, as the entities are mandatory; the comma, a literal, must be present</li> + <li><code>bold 0.5ms, thin</code>, as the <code>ms</code> values are not {{cssxref("<length>")}}</li> +</ul> + +<h3 id="Double_ampersand">Double ampersand</h3> + +<p>Separating two or more components, by a <em>double ampersand</em>, <code>&&</code>, means that all these entities are <strong>mandatory but may appear in any order</strong>.</p> + +<pre class="syntaxbox">bold && <length> +</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold 1em</code></li> + <li><code>bold 0</code></li> + <li><code>2.5cm bold</code></li> + <li><code>3vh bold</code></li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>bold</code>, as both components must appear in the value.</li> + <li><code>bold 1em bold</code>, as both components must appear only one time.</li> +</ul> + +<div class="note"><strong>Note:</strong> juxtaposition has precedence over the double ampersand, meaning that <code>bold thin && <length></code> is equivalent to <code>[ bold thin ] && <length></code>. It describes <code>bold thin <length></code> or <code><length> bold thin</code> but not <code>bold <length> thin</code>.</div> + +<h3 id="Double_bar">Double bar</h3> + +<p>Separating two or more components by a <em>double bar</em>, <code>||</code>, means that all entities are options: <strong>at least one of them must be present, and they may appear in any order</strong>. Typically this is used to define the different values of a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a>.</p> + +<pre class="syntaxbox"><'border-width'> || <'border-style'> || <'border-color'> +</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>1em solid blue</code></li> + <li><code>blue 1em</code></li> + <li><code>solid 1px yellow</code></li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>blue yellow</code>, as a component must appear at most one single time.</li> + <li><code>bold</code>, as it isn't a keyword allowed as value of any of the entity.</li> +</ul> + +<div class="note"><strong>Note:</strong> the double ampersand has precedence over the double bar, meaning that <code>bold || thin && <length></code> is equivalent to <code>bold || [ thin && <length> ]</code>. It describes <code>bold</code>, <code>thin <length></code>, <code>bold thin <length></code>, or <code>thin <length> bold</code> but not <code><length> bold thin</code> as bold, if not omitted, must be placed before or after the whole <code>thin && <length></code> component.</div> + +<h3 id="Single_bar">Single bar</h3> + +<p>Separating two or more entities by a <em>single bar</em>, <code>|</code>, means that all entities are exclusive options: <strong>exactly one of these options must be present</strong>. This is typically used to separate a list of possible keywords.</p> + +<pre class="syntaxbox"><percentage> | <length> | left | center | right | top | bottom</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>3%</code></li> + <li><code>0</code></li> + <li><code>3.5em</code></li> + <li><code>left</code></li> + <li><code>center</code></li> + <li><code>right</code></li> + <li><code>top</code></li> + <li><code>bottom</code></li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>center 3%</code>, as only one of the components must be present.</li> + <li><code>3em 4.5em</code>, as a component must be present at most one time.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> the double bar has precedence over the single bar, meaning that <code>bold | thin || <length></code> is equivalent to <code>bold | [ thin || <length> ]</code>. It describes <code>bold</code>, <code>thin</code>, <code><length></code>, <code><length> thin</code>, or <code>thin <length> </code>but not <code>bold <length></code> as only one entity from each side of the <code>|</code> combinator can be present.</p> +</div> + +<h2 id="Component_value_multipliers">Component value multipliers</h2> + +<p>A multiplier is a sign that indicate how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.</p> + +<p>Note that multipliers cannot be added and have all precedence over combinators.</p> + +<h3 id="Asterisk_(*)">Asterisk (<code>*</code>)</h3> + +<p>The <em>asterisk multiplier</em> indicates that the entity may appear <strong>zero, one or several times</strong>.</p> + +<pre class="syntaxbox">bold smaller*</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code>, and so on.</li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>smaller</code>, as <code>bold</code> is juxtaposed, and must appear before any <code>smaller</code> keyword.</li> +</ul> + +<h3 id="Plus_()">Plus (<code>+</code>)</h3> + +<p>The <em>plus multiplier</em> indicates that the entity may appear <strong>one or several times</strong>.</p> + +<pre class="syntaxbox">bold smaller+</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code>, and so on.</li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>bold</code>, as <code>smaller</code> must appear at least one time.</li> + <li><code>smaller</code>, as <code>bold</code> is juxtaposed and must appear before any <code>smaller</code> keyword.</li> +</ul> + +<h3 id="Question_mark_()">Question mark (<code>?</code>)</h3> + +<p>The <em>question mark multiplier</em> indicates that the entity is optional, and <strong>must appear zero or one time</strong>.</p> + +<pre class="syntaxbox">bold smaller?</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>bold smaller smaller</code>, as <code>smaller</code> must appear at most one time.</li> + <li><code>smaller</code>, as <code>bold</code> is juxtaposed and must appear before any <code>smaller</code> keyword.</li> +</ul> + +<h3 id="Curly_braces_(_)">Curly braces (<code>{ }</code>)</h3> + +<p>The <em>curly braces multiplier</em>, enclosing two integers separated by a comma, A and B, indicates that the entity <strong>must appear at least A times and at most B times</strong>.</p> + +<pre class="syntaxbox">bold smaller{1,3}</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code></li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>bold</code>, as <code>smaller</code> must appear at least one time.</li> + <li><code>bold smaller smaller smaller smaller</code>, as <code>smaller</code> must appear at most three times.</li> + <li><code>smaller</code>, as <code>bold</code> is juxtaposed and must appear before any <code>smaller</code> keyword</li> +</ul> + +<h3 id="Hash_mark_()">Hash mark (<code>#</code>)</h3> + +<p>The <em>hash mark multiplier</em> indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').</p> + +<pre class="syntaxbox">bold smaller#</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller, smaller</code></li> + <li><code>bold smaller, smaller, smaller</code>, and so on.</li> +</ul> + +<p>But not:</p> + +<ul> + <li><code>bold</code>, as <code>smaller</code> must appear at least one time.</li> + <li><code>bold smaller smaller smaller</code>, as the different occurrence of <code>smaller</code> must be separated by commas.</li> + <li><code>smaller</code>, as <code>bold</code> is juxtaposed and must appear before any <code>smaller</code> keyword.</li> +</ul> + +<h3 id="Exclamation_point_(!)">Exclamation point (<code>!</code>)</h3> + +<p>The <em>exclamation point multiplier</em> after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.</p> + +<pre class="syntaxbox">[ bold? smaller? ]! +</pre> + +<p>This example matches the following values:</p> + +<ul> + <li><code>bold</code></li> + <li><code>smaller</code></li> + <li><code>bold smaller</code></li> +</ul> + +<p>But not:</p> + +<ul> + <li>neither <code>bold</code> nor <code>smaller</code>, as one of them must appear.</li> + <li><code>smaller bold</code>, as <code>bold</code> is juxtaposed and must appear before the <code>smaller</code> keyword.</li> + <li><code>bold smaller bold</code>, as <code>bold</code> and <code>smaller</code> may only appear once.</li> +</ul> + +<h2 id="Summary">Summary</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Sign</th> + <th scope="col">Name</th> + <th scope="col">Description</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4">Combinators</th> + </tr> + <tr> + <td> </td> + <td>Juxtaposition</td> + <td>Components are mandatory and should appear in that order</td> + <td><code>solid <length></code></td> + </tr> + <tr> + <td><code>&&</code></td> + <td>Double ampersand</td> + <td>Components are mandatory but may appear in any order</td> + <td><code><length> && <string></code></td> + </tr> + <tr> + <td><code>||</code></td> + <td>Double bar</td> + <td>At least one of the components must be present, and they may appear in any order.</td> + <td><code><'border-image-outset'> || <'border-image-slice'></code></td> + </tr> + <tr> + <td><code>|</code></td> + <td>Single bar</td> + <td>Exactly one of the components must be present</td> + <td><code>smaller | small | normal | big | bigger</code></td> + </tr> + <tr> + <td><code>[ ]</code></td> + <td>Brackets</td> + <td>Group components to bypass precedence rules</td> + <td><code>bold [ thin && <length> ]</code></td> + </tr> + <tr> + <th colspan="4">Multipliers</th> + </tr> + <tr> + <td> </td> + <td>No multiplier</td> + <td>Exactly 1 times</td> + <td><code>solid</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Asterisk</td> + <td>0 or more times</td> + <td><code>bold smaller*</code></td> + </tr> + <tr> + <td><code>+</code></td> + <td>Plus sign</td> + <td>1 or more times</td> + <td><code>bold smaller+</code></td> + </tr> + <tr> + <td><code>?</code></td> + <td>Question mark</td> + <td>0 or 1 time (that is <em>optional)</em></td> + <td><code>bold smaller?</code></td> + </tr> + <tr> + <td><code>{A,B}</code></td> + <td>Curly braces</td> + <td>At least <code>A</code> times, at most <code>B</code> times</td> + <td><code>bold smaller{1,3}</code></td> + </tr> + <tr> + <td><code>#</code></td> + <td>Hash mark</td> + <td>1 or more times, but each occurrence separated by a comma ('<code>,</code>')</td> + <td><code>bold smaller#</code></td> + </tr> + <tr> + <td><code>!</code></td> + <td>Exclamation point</td> + <td>Group must produce at least 1 value</td> + <td><code>[ bold? smaller? ]!</code></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td>Adds the hash mark multiplier.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Adds the double ampersand combinator.</td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/pt-br/web/css/specificity/index.html b/files/pt-br/web/css/specificity/index.html new file mode 100644 index 0000000000..f79a337e9c --- /dev/null +++ b/files/pt-br/web/css/specificity/index.html @@ -0,0 +1,121 @@ +--- +title: Especificidade +slug: Web/CSS/Specificity +translation_of: Web/CSS/Specificity +--- +<h2 id="O_Conceito">O Conceito</h2> + +<p>A especificação é a maneira de como os navegadores definem quais valores de propriedades são os mais relevantes para o elemento a ser utilizado. A especificação é baseada apenas nas regras impostas na composição de diferentes tipos de <a href="/en/CSS/CSS_Reference#Selectors" title="en/CSS/CSS_Reference#Selectors">seletores</a>.</p> + +<h2 id="Como_isso_é_calculado">Como isso é calculado?</h2> + +<p>A espeficicação é calculada na concatenação da contagem de cada tipo de seletor. Não é um peso aplicado na expressão correspondente.</p> + +<p>No caso de igualdade de especificação, a última declaração encontrada no CSS é aplicada ao elemento.</p> + +<div class="note">Note: O fato de<span id="result_box" lang="pt"><span class="hps"> elementos estarem próximos na</span> <span class="hps">árvore do documento</span> <span class="hps">não tem efeito sobre</span> <span class="hps">a especificação</span><span>.</span></span></div> + +<h3 id="Ordem_crescente_de_especificação">Ordem crescente de especificação</h3> + +<p>A seguinte lista de seletores está incluida na especificação:</p> + +<ul> + <li>Seletores Universais</li> + <li>Tipo de Seletores</li> + <li>Classes seletoras</li> + <li>Atributos Seletores</li> + <li>Pseudo-classes</li> + <li>Seletores ID</li> + <li>Estilo Inline</li> +</ul> + +<h3 id="A_exceção_!important">A <span class="short_text" id="result_box" lang="pt"><span class="hps">exceção</span></span> <code>!important</code></h3> + +<p>Quando a regra <code>!important</code> é utilizada na declaração do estilo substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declaração. Contudo, <code>!important</code> não tem nada a ver com especificação. </p> + +<h3 id="A_exceção_not">A exceção <code>:not</code></h3> + +<p>A pseudo-classe de negação <code>:not</code> não é considerada uma pseudo-classe no cálculo de especificação. Contudo, seletores colocados na pseudo-class de negação são entendidos como seletores normais.</p> + +<p>Aqui está um trecho de CSS:</p> + +<pre class="brush: css">div.outer p { + color:orange; +} +div:not(.outer) p { + color: lime; +} +</pre> + +<p>Usado com o seguindo código HTML:</p> + +<pre class="brush: html"><div class="outer"> + <p>Esta é a div outer.</p> + <div class="inner"> + <p>Este texto está na div inner.</p> + </div> +</div> +</pre> + +<p>Irá aparecer na tela assim:</p> + +<p><span style="color: #ffa500;">Esta é a div outer.</span></p> + +<p><span style="color: #00ff00;">Este texto está na div inner.</span></p> + +<h3 id="Especificação_Form-based">Especificação Form-based</h3> + +<p>A especificação é baseada na forma de um seletor. No seguinte caso, o seletor contém os atributos <span id="result_box" lang="pt"><span class="hps">no</span> <span class="hps">algoritmo de determinação de</span> especificação<span>, embora</span> <span class="hps">ele selecione</span> <span class="hps">um ID</span></span>.</p> + +<p>A seguir veja as declarações de estilo:</p> + +<pre class="brush: css">* #foo { + color: green; +} +*[id="foo"] { + background: purple; +} +</pre> + +<p>Usado com esta marcação:</p> + +<pre class="brush: html"><p id="foo">Eu sou um simples texto.</p> +</pre> + +<p>Vai acabar parecendo algo como:</p> + +<p><span style="color: #008000;">Eu sou um simples texto.</span></p> + +<p><span id="result_box" lang="pt"><span class="hps">Porque coincide com o</span> <span class="hps">mesmo elemento</span><span>, mas</span> <span class="hps">o seletor de</span> <span class="hps">ID</span> <span class="hps">tem uma especificação</span> <span class="hps">superior.</span></span></p> + +<h3 id="Estrutura_aproximada">Estrutura aproximada</h3> + +<p>A seguir a declaração do estilo:</p> + +<pre class="brush: css">body h1 { + color: green; +} +html h1 { + color: purple; +} +</pre> + +<p>Com o HTML seguinte::</p> + +<pre class="brush: html"><html> +<body> + <h1>Aqui está o título!</h1> +</body> +</html> +</pre> + +<p>Vamos ter algo como:</p> + +<p><span style="color: #800080;">Aqui está o título!</span></p> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>Espcificação de Seletores CSS - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li> + <li>{{ CSS_key_concepts() }}</li> +</ul> diff --git a/files/pt-br/web/css/text-align/index.html b/files/pt-br/web/css/text-align/index.html new file mode 100644 index 0000000000..9789af412c --- /dev/null +++ b/files/pt-br/web/css/text-align/index.html @@ -0,0 +1,337 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS + - Propriedade CSS + - Referencia + - Texto CSS +translation_of: Web/CSS/text-align +--- +<p>{{CSSRef}}</p> + +<h2 id="Sumário">Sumário</h2> + +<p><span class="seoSummary">A propriedade CSS <strong><code>text-align</code></strong> descreve como conteúdo inline, como texto, é alinhado no elemento pai em bloco. <code>text-align</code> não controla o alinhamento de elementos em bloco, apenas o seu conteúdo inline.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css notranslate">/* Keyword values */ +text-align: left; +text-align: right; +text-align: center; +text-align: justify; +text-align: justify-all; +text-align: start; +text-align: end; +text-align: match-parent; + +/* Block alignment values (Non-standard syntax) */ +text-align: -moz-center; +text-align: -webkit-center; + +/* Global values */ +text-align: inherit; +text-align: initial; +text-align: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>start</code> {{experimental_inline}}</dt> + <dd>Igual <code>left</code> se a direção é esquerda-para-direita e <code>right</code> se a direção é direita-para-esquerda.</dd> + <dt><code>end</code> {{experimental_inline}}</dt> + <dd>Igual <code>right</code> se a direção é esquerda-para-direita e <code>left</code> se a direção é direita-para-esquerda.</dd> + <dt><code>left</code></dt> + <dd>O conteúdo é alinhado na borda esquerda do box.</dd> + <dt><code>right</code></dt> + <dd>O conteúdo é alinhado na borda direita do box.</dd> + <dt><code>center</code></dt> + <dd>Os conteúdos inline são centralizados entre a linha da caixa.</dd> + <dt><code>justify</code></dt> + <dd>Os conteúdos inline são justificados. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</dd> + <dt><code>justify-all</code></dt> + <dd>Semelhante a <code>justify</code>, porém força a última linha a ser justificada.</dd> + <dt><code>match-parent</code> {{experimental_inline}}</dt> + <dd>Similar to <code>inherit</code>, but the values <code>start</code> and <code>end</code> are calculated according the parent's {{cssxref("direction")}} and are replaced by the adequate <code>left</code> or <code>right</code> value.</dd> +</dl> + +<h3 id="Sintaxe_Formal">Sintaxe Formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Alinhamento_Esquerdo">Alinhamento Esquerdo</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: left; + border: solid; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Left_alignment","100%","100%")}}</p> + +<h3 id="Texto_centralizado">Texto centralizado</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: center; + border: solid; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Centered_text","100%","100%")}}</p> + +<h3 id="Justificado">Justificado</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: justify; + border: solid; +}</pre> + +<h4 id="Resultado_3">Resultado</h4> + +<p>{{EmbedLiveSample("Justify","100%","100%")}}</p> + +<h3 id="Notas">Notas</h3> + +<p>O modo compátivel-padrão de centralizar um bloco em si sem centralizar seu conteúdo inline é setando a {{cssxref("margin")}} left e right para <code>auto</code>, e.g.:</p> + +<pre class="brush: css notranslate">.something { + margin: auto; +} +</pre> + +<pre class="brush: css notranslate">.something { + margin: 0 auto; +} +</pre> + +<pre class="brush: css notranslate">.something { + margin-left: auto; + margin-right: auto; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Sem mudanças</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Added the <code>start</code>, <code>end</code>, and <code>match-parent</code> values. Changed the unnamed initial value to <code>start</code> (which it was).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sem mudanças</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição iniciaç</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibilidade">Browser compatibilidade</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico (<code>left</code>, <code>right</code>, <code>center</code> and <code>justify</code>)</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td>Block alignment values {{non-standard_inline}}</td> + <td>1.0{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>1.0 (85){{property_prefix("-khtml")}}<br> + 1.3 (312){{property_prefix("-webkit")}} [1]</td> + </tr> + <tr> + <td><code>start</code> {{experimental_inline}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>end</code> {{experimental_inline}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>match-parent</code>{{experimental_inline}}</td> + <td>16</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Block alignment values {{non-standard_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>start</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>end</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>match-parent</code>{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>true</code>(non-standard syntax){{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Both WebKit and Gecko support a prefixed version of <code>left</code>, <code>center</code>, and <code>right</code>, that applies not only to inline content but also to block elements. This is used to implement the legacy {{htmlattrxref("align", "td")}} attributes on table elements and <code><center></code>. Do not use these on production Web sites.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref("margin","margin:auto")}}, {{Cssxref("margin-left","margin-left:auto")}}, {{Cssxref("vertical-align")}}</li> +</ul> diff --git a/files/pt-br/web/css/text-decoration-style/index.html b/files/pt-br/web/css/text-decoration-style/index.html new file mode 100644 index 0000000000..9ec4f673a5 --- /dev/null +++ b/files/pt-br/web/css/text-decoration-style/index.html @@ -0,0 +1,197 @@ +--- +title: text-decoration-style +slug: Web/CSS/text-decoration-style +translation_of: Web/CSS/text-decoration-style +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo"><span class="short_text" id="result_box" lang="pt"><span>Resumo</span></span></h2> + +<p><span id="result_box" lang="pt"><span>A propriedade</span> <span>CSS </span></span><strong><code>text-decoration-style</code></strong> CSS<span lang="pt"> <span>define</span> <span>o estilo das</span> <span>linhas especificadas</span> <span>por {</span><span>{</span><span>cssxref</span> <span>(</span><span>"</span><span>text-decoration</span><span>-line</span><span>")}</span><span>}.</span> <span>O</span> <span>modelo</span> <span>aplica-se a</span> <span>todas as linhas</span><span>,</span> <span>não há nenhuma</span> forma<span> de</span> <span>definir</span> <span>estilos diferente</span>s <span>para cada uma das</span> <span>linhas utilizando </span></span><code>text-decoration-line</code><span lang="pt"><span>.</span></span><br> + <br> + <span id="result_box" lang="pt"><span>Se</span> <span>a decoração</span> <span>especificada</span> <span>tem um</span> <span>significado semântico</span> <span>específico,</span> <span>como uma linha de</span></span> line-through<span lang="pt"> <span>o que significa que</span> <span>um texto</span> <span>tenha sido excluído,</span> <span>autores</span> <span>são encorajados a</span> <span>denotar</span> <span>este significado</span> <span>usando uma tag</span> <span>HTML</span><span>, como</span> </span>{{ HTMLElement("del") }} ou {{ HTMLElement("s") }}<span lang="pt"><span>.</span> <span>Como</span> <span>os navegadores podem</span> ser <span>deficientes</span> <span>em alguns casos,</span> <span>o significado semântico</span> <span>não vai desaparecer</span> <span>em tal situação</span><span>.</span></span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Keyword values */ +text-decoration-style: solid; +text-decoration-style: double; +text-decoration-style: dotted; +text-decoration-style: dashed; +text-decoration-style: wavy; + +/* Global values */ +text-decoration-style: inherit; +text-decoration-style: initial; +text-decoration-style: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>solid double dotted dashed wavy</code></dt> + <dd><span class="short_text" id="result_box" lang="pt"><span>É uma das</span> <span>seguintes palavras-chave</span><span>:</span></span> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Keyword</th> + <th scope="col">Description</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>solid</code></td> + <td>Draws a single line</td> + <td> </td> + </tr> + <tr> + <td><code>double</code></td> + <td>Draws a double line</td> + <td> </td> + </tr> + <tr> + <td><code>dotted</code></td> + <td>Draws a dotted line</td> + <td> </td> + </tr> + <tr> + <td><code>dashed</code></td> + <td>Draws a dashed line</td> + <td> </td> + </tr> + <tr> + <td><code>wavy</code></td> + <td>Draws a wavy line</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-none</code>{{ non-standard_inline }}<code> </code></td> + <td>Do not draw a line</td> + <td><strong>Do not use</strong><strong> :</strong> use {{ cssxref("text-decoration-line") }}<code>: none</code> instead</td> + </tr> + </tbody> + </table> + </dd> + <dt><code>inherit</code></dt> + <dd><span id="result_box" lang="pt"><span>É</span> <span>uma palavra-chave</span> <span>indicando</span> <span>a reutilizar</span> <span>o valor</span> <span>calculado sobre</span> <span>o elemento pai</span><span>.</span></span></dd> +</dl> + +<h3 id="Syntax_Formal">Syntax Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: css" style="display: none;">.example { + -moz-text-decoration-line: underline; + -moz-text-decoration-style: wavy; + -moz-text-decoration-color: red; + -webkit-text-decoration-line: underline; + -webkit-text-decoration-style: wavy; + -webkit-text-decoration-color: red; +}</pre> + +<pre class="brush: css">.example { + text-decoration-line: underline; + text-decoration-style: wavy; + text-decoration-color: red; +} +</pre> + +<pre class="brush: html"><p class="example">This is how it looks.</p> +</pre> + +<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p> + +<h2 id="Especificações"><span class="short_text" id="result_box" lang="pt"><span>Especificações</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}</td> + <td>{{ Spec2('CSS3 Text Decoration') }}</td> + <td>Initial definition. The {{cssxref("text-decoration")}} property wasn't a shorthand before.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatíveis">Browser compatíveis</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop("6.0") }} - {{CompatGeckoDesktop("39.0")}}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("36.0") }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td>wavy</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoMobile("6.0") }}- {{CompatGeckoMobile("39.0")}}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("36.0") }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td>wavy</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoMobile("6.0") }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/text-decoration/index.html b/files/pt-br/web/css/text-decoration/index.html new file mode 100644 index 0000000000..6c4aaa93ad --- /dev/null +++ b/files/pt-br/web/css/text-decoration/index.html @@ -0,0 +1,205 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - CSS + - PrecisaDeCompatibilidade + - Propriedade CSS + - Referencia + - Texto CSS +translation_of: Web/CSS/text-decoration +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade <strong><code>text-decoration</code></strong> do CSS é usada para definir a formatação de <code>underline</code>, <code>overline</code>, <code>line-through</code> ou <code>blink</code>. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.</p> + +<p>A propriedade text-decoration desenha em elementos descendentes. Isso significa que não é possivel desabilitar em um descendente uma decoração que foi especificada em um de seus antecessores. Por exemplo, no markup <code><p>Esse texto tem <em>alguns elementos enfatizados</em> nele.</p></code>, a regra de estilo <code>p { text-decoration: underline; }</code> faria com que todo o parágrafo fosse sublinhado. A regra <code>em { text-decoration: none; }</code> não causaria qualquer mudanca; o parágrafo inteiro ainda estaria sublinhado. Entretanto, a regra <code>em { text-decoration: overline; }</code> iria decorar o trecho "alguns elementos enfatizados".</p> + +<div class="note style-wrap"> +<p><strong>Nota: </strong>CSS 3 transformou a propriedade Text-Decoration para forma reduzida, usando as seguintes propriedades: {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, e {{cssxref("text-decoration-style")}}. Como em outras propriedades reduzidas, isso significa que ele reseta o valor de cada uma para padrão se não for explicitamente especificada na forma reduzida.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css">/* Valores Chave */ +text-decoration: none; /* Sem decoração */ +text-decoration: underline red; /* Sublinhado vermelho */ +text-decoration: underline wavy red; /* Sublinhado ondulado vermelho */ + +/* Valores Globais */ +text-decoration: inherit; +text-decoration: initial; +text-decoration: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>A propriedade <code>text-decoration</code> é escrita de forma reduzida e pode usar os valores de cada uma das propriedades: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, e {{cssxref("text-decoration-style")}}</p> + +<h3 id="Sintaxe_Formal">Sintaxe Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css">h1.under { + text-decoration: underline; +} +h1.over { + text-decoration: overline; +} +p.line { + text-decoration: line-through; +} +p.blink { + text-decoration: blink; +} +a.none { + text-decoration: none; +} +p.underover { + text-decoration: underline overline; +} +</pre> + +<pre class="brush: html" style="display: none;"><h1 class="under">Underlined Header</h1> +<p class="line">If you want to strike out text, use line-through.</p> +<p class="blink">This text might blink for you - if you use Explorer, it will not.</p> +<h1 class="over">and now an overlined header.</h1> +<p>This <a class="none" href="textdecoration.html">link will not be underlined</a>, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p> +<p class="underover">This text has both underline and overline.</p> +</pre> + +<p>{{EmbedLiveSample('Examples','100%','310')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Transformado em uma propriedade reduzida. Adicionado suporte para o valor {{cssxref('text-decoration-style')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sem mudanças significantes.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>1.0</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + <tr> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Valor blink</font></td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>4.0<br> + 15.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Propriedade reduzida</td> + <td>{{CompatGeckoDesktop("6.0")}}<sup>[3]</sup><br> + {{CompatGeckoDesktop("36.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Valor blink</font></td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>4.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Propriedade reduzida</td> + <td>{{CompatGeckoMobile("6.0")}}<sup>[3]</sup><br> + {{CompatGeckoMobile("36.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] O valor <code>blink </code>não tem nenhum efeito.</p> + +<p>[2] Safari não suporta {{cssxref("text-decoration-style")}}.</p> + +<p>[3] Essa versão do Gecko tem implementação parcial.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>O atributo {{cssxref("list-style")}} controla a aparência dos itens em listas {{HTMLElement("ol")}} e {{HTMLElement("ul")}} no HTML.</li> +</ul> diff --git a/files/pt-br/web/css/text-overflow/index.html b/files/pt-br/web/css/text-overflow/index.html new file mode 100644 index 0000000000..e2bfb7d6d7 --- /dev/null +++ b/files/pt-br/web/css/text-overflow/index.html @@ -0,0 +1,374 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +translation_of: Web/CSS/text-overflow +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade <code>text-overflow</code> do <a href="/en/CSS" title="CSS">CSS</a> determina como o conteúdo que ultrapassou a sua div e que não é mostrado ao usuário deve ser exibido. Ele pode ser cortado, mostrar reticências ou até mesmo exibir qualquer string definida pelo autor.</p> + +<p><img alt="text-overflow.png" class="default internal" src="/@api/deki/files/5846/=text-overflow.png"></p> + +<p>O corte acontece na borda da caixa; para cortar no limite de caracteres de uma string personalizada, pode-se usar (<code>''</code>).</p> + +<p>Essa propriedade afeta apenas o conteúdo que está ultrapassando o bloco ou a div no sentido da linha horizontal (não corta o texto na parte de baixo de um bloco ou div, por exemplo). O texto pode ultrapassar ou transbordar quando utilizado <span style="line-height: inherit;">‘</span><code class="css" style="font-size: 14px; line-height: inherit;"><code style="font-size: 14px;">white-space:nowrap</code></code><span style="line-height: inherit;">’ ou quando uma palavra for muito grande.</span></p> + +<p>Essa propriedade do CSS não força um estouro para que ele ocorra. Para que isso aconteça, é necessário que o autor utilize algumas propriedades adicionais no elemento, como setar a propriedade overflow para <span style="font-family: courier new,andale mono,monospace;">hidden</span>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-overflow")}}</pre> + +<pre>/* One-value syntax: the value describe the overflow performed at the end of the line (right end if ltr, left end if rtl) */ +text-overflow: clip +text-overflow: ellipsis +text-overflow: "…" + +/* Two-value syntax: the first value describes the overflow at the left end of the line, + the second at the right end. Directionality has no influence */ + +text-overflow: clip ellipsis +text-overflow: "…" "…" + +text-overflow: inherit</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>clip</code></dt> + <dd>This keyword value indicates to truncate the text at the limit of the <a href="/en/CSS/box_model" title="en/CSS/Box_model">content area</a>, therefore the truncation can happen in the middle of a character. To truncate at the transition between two characters, the empty string value (<code>''</code>) must be used. The value <code>clip</code> is the default for this property.</dd> + <dt><code>ellipsis</code></dt> + <dd>This keyword value indicates to display ellipses (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) to represent clipped text. The ellipsis is displayed inside the <a href="/en/CSS/box_model" title="en/CSS/Box_model">content area</a>, shortening more the size of the displayed text. If there is not enough place to display ellipsis, they are clipped.</dd> + <dt><code><string></code> {{ experimental_inline() }}</dt> + <dd>The {{cssxref("<string>")}} to be used to represent clipped text. The string is displayed inside the <a href="/en/CSS/box_model" title="en/CSS/Box_model">content area</a>, shortening more the size of the displayed text. If there is not enough place to display the string itself, it is clipped.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css">p { + white-space: nowrap; + width: 100%; + overflow: hidden; /* "overflow" value must be different from "visible" */ + + text-overflow: ellipsis; +} +</pre> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col">CSS value</th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th> + </tr> + <tr> + <th scope="col">Expected Result</th> + <th scope="col">Live result</th> + <th scope="col">Expected Result</th> + <th scope="col">Live result</th> + </tr> + </thead> + <tbody> + <tr> + <td><em>visible overflow</em></td> + <td style="font-family: monospace;">1234567890</td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">0987654321</td> + <td> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip</code></td> + <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div> + </td> + <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ''</code></td> + <td style="font-family: monospace;">12345</td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div> + </td> + <td style="font-family: monospace;">54321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis</code></td> + <td style="font-family: monospace;">1234…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: '.'</code></td> + <td style="font-family: monospace;">1234.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">.4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip clip</code></td> + <td style="font-family: monospace;">123456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">654321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip ellipsis</code></td> + <td style="font-family: monospace;">1234…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">6543…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip '.'</code></td> + <td style="font-family: monospace;">1234.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">6543.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis clip</code></td> + <td style="font-family: monospace;">…3456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis ellipsis</code></td> + <td style="font-family: monospace;">…34…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…43…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis '.'</code></td> + <td style="font-family: monospace;">…34.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…43.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' clip</code></td> + <td style="font-family: monospace;">,3456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' ellipsis</code></td> + <td style="font-family: monospace;">,34…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,43…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' '.'</code></td> + <td style="font-family: monospace;">,34.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,53.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + </tbody> +</table> + +<h3 id="Using_the_abbr_tag_of_HTML5_along_with_text-overflow"><br> + Using the abbr tag of HTML5 along with text-overflow</h3> + +<p>We have the example of the use of abbr tag inside a div with width 250px;</p> + +<pre class="brush: css">div { + width: 250px; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: ltr; +}</pre> + +<pre class="brush: html"><div> + <abbr title="https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-overflow">https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-overflow</abbr> +</div></pre> + +<p>The full path of the URL will be displayed over the mouse, and the screen will be printed as follows: https://developer.mozilla.org/pt-BR/...</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 UI', '#text-overflow', 'text-overflow') }}</td> + <td>{{ Spec2('CSS3 UI') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>A previous version of this interface reached the <em>Candidate Recommendation</em> status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the <em>Working Draft</em> level, explaining why browsers implemented this property unprefixed, though not at the CR state.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 (312.3)</td> + <td>{{ CompatGeckoDesktop("7.0") }} ({{ anch("Gecko notes", "See notes") }})</td> + <td>6.0 ({{ anch("Internet Explorer notes", "See notes") }})</td> + <td>9{{ property_prefix("-o") }} ({{ anch("Opera notes", "See notes") }})<br> + 11.0</td> + <td>1.3 (312.3)</td> + </tr> + <tr> + <td>Two-value syntax {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>String value{{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("7.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Two-value syntax {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>String value {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, handling of text-overflow on blocks with inline overflow on both horizontal sides has been corrected; previously, if you specified only one value (such as <code>text-overflow:ellipsis;</code>), ellipsing was happening on both sides instead of just the end edge based on the block's text direction.</p> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Internet Explorer 8 introduced the prefixed version, <code>-ms-text-overflow</code>, synonymous with <code>text-overflow</code>. Do not use this prefixed version.</p> + +<h3 id="Opera_notes">Opera notes</h3> + +<p>Opera 9 and 10 require the prefixed version, <code>-o-text-overflow</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li> + <li>Related CSS properties: {{ cssxref("overflow") }}, {{ cssxref("white-space") }}</li> +</ul> diff --git a/files/pt-br/web/css/text-rendering/index.html b/files/pt-br/web/css/text-rendering/index.html new file mode 100644 index 0000000000..8bb1230959 --- /dev/null +++ b/files/pt-br/web/css/text-rendering/index.html @@ -0,0 +1,189 @@ +--- +title: text-rendering +slug: Web/CSS/text-rendering +translation_of: Web/CSS/text-rendering +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade CSS <code>text-rendering</code> provê informações para o mecanismo de renderização sobre o que otimizar no momento em que ele renderiza texto. O navegador faz escolhas entre velocidade, legibilidade e precisão geométrica. A propriedade <code>text-rendering</code> é uma propriedade SVG que não é definida em nenhum padrão CSS. Porém, navegadores Gecko e WebKit permitem o uso da propriedade em conteúdos HTML e XML nas plataformas Windows, Mac OS X e Linux. </p> + +<p>Um efeito bastante visível é o <code>optimizeLegibility</code>, que habilita ligaduras (ff, fi, fl etc.) para algumas fontes com o texto menores que 20px como, por exemplo, fontes da Microsoft (<em>Calibri, Candara, Constantia </em>e<em> Corbel</em> ou a família de fontes <em>DejaVu</em>).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>O navegador faz sugestões de quando otimizar velocidade, legibilidade e precisão geométrica enquando formata o texto. Para diferenças em como esse valor é interpretado pelo navegador, veja a tabela de compatibilidades.</dd> + <dt><code>optimizeSpeed</code></dt> + <dd>O navegador prioriza a velocidade de renderização sobre a legibilidade e precisão geométrica no momento de rederização do texto. Essa opção desabilita o kerning<sup>1</sup> e ligatures<sup>2</sup>.</dd> + <dt><code>optimizeLegibility</code></dt> + <dd>O navegador prioriza legibilidade sobre a velocidade de renderização e precisão geométrica. Essa propriedade habilita o kerning e ligatures opcionais.</dd> + <dt><code>geometricPrecision</code></dt> + <dd> + <p>O browser prioriza a precisão geométrica sobre a velocidade de renderização e legibilidade. Alguns aspectos de fontes - tais como kerning - não se escala linearmente e, dessa forma, <code>geometricPrecision</code> pode tornar essas fontes visualmente boas.</p> + + <p>Em SVG, quando o texto é escalado para cima ou para baixo, os navegadores calculam o tamanho final do texto (que é o tamanho de fonte específicado e a escala aplicada) e requer uma fonte de tamanho computado à partir das fontes do sistema. Mas se você requer um tamanho de fonte de, digamos, 9 com a escala de 140%, o resultado do tamanho da fonte de 12.6 não explicitamente existe no sistema, então o browser ira arredondar o tamanho da fonte para 12.</p> + + <p>Mas a propriedade <code>geometricPrecision</code> - quando totalmente surpotada pelo mecanismo de renderização - deixa você escalar seu texto fluidamente. Para fatores de larga escala, você pode ver uma renderização de texto não tão bonita, mas com o tamanho esperado - nem arredondado para cima ou para baixo para o mais próximo tamanho suportado pelo sistema Windows ou Linux.</p> + + <p>Navegadores WebKit precisamente aplicam o valor específico, mas os navegadores Gecko tratam o esse valor como <code>optimizeLegibility</code>.</p> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:css">/* make sure all fonts in the HTML document display in all its glory, + but avoid inadequate ligatures in class foo elements */ + +body { text-rendering: optimizeLegibility; } +.foo { text-rendering: optimizeSpeed; }</pre> + +<h4 id="Live_Example">Live Example</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>CSS code</th> + <th>Kerning</th> + <th>Ligatures</th> + </tr> + <tr style="font: 19.9px 'DejaVu Serif',Constantia;"> + <td style="font: medium monospace;">font: 19.9px 'DejaVu Serif',Constantia;</td> + <td>LYoWAT</td> + <td>ff fi fl ffl</td> + </tr> + <tr style="font: 20px 'DejaVu Serif',Constantia;"> + <td style="font: medium monospace;">font: 20px 'DejaVu Serif',Constantia;</td> + <td>LYoWAT</td> + <td>ff fi fl ffl</td> + </tr> + <tr style="font: 3em 'DejaVu Serif',Constantia; text-rendering: optimizeSpeed;"> + <td style="font: medium monospace;">font: 3em 'DejaVu Serif',Constantia;<br> + text-rendering: optimizeSpeed;</td> + <td>LYoWAT</td> + <td>ff fi fl ffl</td> + </tr> + <tr style="font: 3em 'Dejavu Serif',Constantia; text-rendering: optimizeLegibility;"> + <td style="font: medium monospace;">font: 3em 'Dejavu Serif',Constantia;<br> + text-rendering: optimizeLegibility;</td> + <td>LYoWAT</td> + <td>ff fi fl ffl</td> + </tr> + </tbody> +</table> + +<h3 id="Gecko_Notes">Gecko Notes</h3> + +<p>O valor padrão de 20px para <code>auto</code> pode ser alterado na propriedade <code>browser.display.auto_quality_min_font_size </code>do navegador.</p> + +<p>A opção optimizeSpeed não tem efeito na versão 2.0 do Gecko {{ geckoRelease("2.0") }}, devido ao código padrão de renderização de texto que já é muito rápido e não existe até o momento um código mais rápido para esse trabalho. Veja detalhes em {{ bug(595688) }}.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }}</td> + <td>{{ Spec2('SVG1.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>Essa é uma especificação SVG, e não é definida em nenhum padrão CSS. Gecko (Firefox) e WebKit aplicam a propriedade <code>text-rendering</code> para códigos HTML e XML.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade entre Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte basico para plataformas Windows e Linux</td> + <td> + <p>4.0 but the implementation known bugs on Windows and Linux which can break <a href="http://crbug.com/114719" title="http://crbug.com/114719">font substitition</a>, <a href="http://crbug.com/51973" title="http://crbug.com/51973">small-caps</a>, <a href="http://crbug.com/55458" title="http://crbug.com/55458">letter-spacing</a> or cause <a href="http://crbug.com/149548" title="http://crbug.com/149548">text to overlap</a></p> + </td> + <td><strong>3.0</strong> (1.9)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>5.0 (532.5)</td> + </tr> + <tr> + <td>Surpote basico para outros sistemas operacionais</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>auto</code></td> + <td>Chrome treats this as <code>optimizeSpeed</code>.<br> + Work is continuing on{{ Webkitbug("41363") }}</td> + <td> + <p>Se o tamanho da fonte for maior ou igual a 20px, navegadores Gecko usam o valor <code>optimizeLegibility</code>. Para fontes de tamanho menores que 20px, Gecko usa <code>optimizeSpeed</code>.</p> + </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Safari treats this as <code>optimizeSpeed</code>.<br> + Work is continuing on{{ Webkitbug("41363") }}</td> + </tr> + <tr> + <td><code>geometricPrecision</code></td> + <td>13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.<br> + Introduced in WebKit 535.1 {{ Webkitbug("60317") }}</td> + <td>Gecko trata esse valor da mesma forma que trata o valor <code>optimizeLegibility</code>.</td> + <td> {{ CompatNo() }}</td> + <td> {{ CompatNo() }}</td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/css/text-shadow/index.html b/files/pt-br/web/css/text-shadow/index.html new file mode 100644 index 0000000000..6f22e7e329 --- /dev/null +++ b/files/pt-br/web/css/text-shadow/index.html @@ -0,0 +1,193 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +translation_of: Web/CSS/text-shadow +--- +<div>{{ Cssref }}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A propriedade <code>text-shadow</code> acrescenta sombras ao texto. Ela aceita uma lista de sombras separadas por vírgula que serão aplicados ao texto e ao {{ cssxref("text-decoration","text-decorations") }} do elemento.</p> + +<p>Cada sombra é especificada como um deslocamento do texto, juntamente com valores opcionais de cor e raio de desfoque.</p> + +<p>Multiplas sombras são aplicadas de frente-para-trás, com a primeira sombra especificada no topo.</p> + +<p>Esta propriedade se aplica a ambos {{cssxref("::first-line")}} e {{cssxref("::first-letter")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush: css">/* deslocamento-x | deslocamento-y | raio-de-desfoque | cor */ +text-shadow: 1px 1px 2px black; + +/* cor | deslocamento-x | deslocamento-y | raio-de-desfoque */ +text-shadow: #CCC 1px 0 10px; + +/* deslocamento-x | deslogamento-y | cor */ +text-shadow: 5px 5px #558ABB; + +/* cor | deslocamento-x | deslocamento-y */ +text-shadow: white 2px 5px; + +/* deslocamento-x | deslocamento-y +/* Usa o padrão para cor e raio-de-desfoque */ +text-shadow: 5px 10px; + +/* Valores globais */ +text-shadow: inherit; +text-shadow: initial; +text-shadow: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><cor></dt> + <dd>Opcional. Pode ser especificado tanto antes quanto depois dos valores de deslocamento. Se a cor não é especificada, uma cor UA-chosen será usada. {{ note("Se voce quer garantir a consistência entre os navegadores, especifique explicitamente uma cor.") }}</dd> + <dt><offset-x> <offset-y></dt> + <dd>Obrigatório. These <code><length></code> values specify the shadow's offset from the text. <code><offset-x></code> specifies the horizontal distance; a negative value places the shadow to the left of the text. <code><offset-y></code> specifies the vertical distance; a negative value places the shadow above the text. If both values are <code>0</code>, then the shadow is placed behind the text (and may generate a blur effect when <code><blur-radius></code> is set).<br> + To find out what units you can use, see {{ cssxref("<length>") }}.</dd> + <dt><blur-radius></dt> + <dd>Opcional. This is a {{ cssxref("<length>") }} value. If not specified, it defaults to <code>0</code>. The higher this value, the bigger the blur; the shadow becomes wider and lighter.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<div id="Example1"> +<pre class="brush: css">.red-text-shadow { + text-shadow: red 0 -2px; +}</pre> + +<pre class="brush: html"><p class="red-text-shadow"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo + inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Example1', '689px', '90px')}}</p> + +<div id="Example2"> +<pre class="brush:css">.white-with-blue-shadow { + text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; + color: white; + font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif; +}</pre> + +<pre class="brush: html"><p class="white-with-blue-shadow"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Example2', '689px', '180px')}}</p> + +<div id="Example3"> +<pre class="brush:css">.gold-on-gold { + text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, + rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, + rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; + color: gold; + background: gold; +}</pre> + +<pre class="brush: html"><p class="gold-on-gold"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Example3', '689px', '90px')}}</p> + +<p><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Especificações</strong></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Lists <code>text-shadow</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow') }}</td> + <td>{{ Spec2('CSS3 Text Decoration') }}</td> + <td>The CSS property <code>text-shadow</code> was <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The<em> CSS Text Module Level 3 </em>spec improved and precised the syntax. Later it was moved to new working draft <em><a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/" title="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">CSS Text Decoration Module Level 3</a></em>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0.158.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }} [1]</td> + <td>10 [3]</td> + <td>9.5 [2]</td> + <td>1.1 (100) [4]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <strong>Gecko</strong> (Firefox) theoretically supports infinite text-shadows (don't try it). <strong>Gecko 2</strong> and later cap the blur radius at 300 for performance reasons. If the <color> value is unspecified, then <strong>Gecko</strong> uses the value of the element's {{ cssxref("color") }} property.</p> + +<p>[2] <strong>Opera</strong> supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px. <strong>Opera 9.5-10.1</strong> adheres to the old, reverse painting order (CSS2, the first specified shadow is on the <em>bottom</em>).</p> + +<p>[3] <strong>Internet Explorer 5.5</strong> supports Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx"><em>Shadow</em> and <em>DropShadow</em> Filter</a>.</p> + +<p>[4] <strong>Safari: </strong>Any shadows that do not explicitly specify a color are transparent. <strong>Safari 1.1-3.2</strong> only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). <strong>Safari 4.0</strong> (WebKit 528) and later support multiple text-shadows. <strong>Konqueror</strong> supports text-shadow starting with version 3.4.</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{ cssxref("box-shadow") }}</li> +</ul> diff --git a/files/pt-br/web/css/text-transform/index.html b/files/pt-br/web/css/text-transform/index.html new file mode 100644 index 0000000000..a32cc3fa2f --- /dev/null +++ b/files/pt-br/web/css/text-transform/index.html @@ -0,0 +1,307 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +translation_of: Web/CSS/text-transform +--- +<div>{{CSSRef}}</div> + +<p>A propriedade de CSS <strong><code>text-transform</code></strong> especifica como capitalizar um texto de um elemento. Pode ser usado para que o texto apareça com todas as letras maiúsculas ou todas minúsculas, ou com cada palavra em maiúscula.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +text-transform: capitalize; +text-transform: uppercase; +text-transform: lowercase; +text-transform: none; +text-transform: full-width; + +/* Global values */ +text-transform: inherit; +text-transform: initial; +text-transform: unset; +</pre> + +<p>The <code>text-transform</code> property takes into account language-specific case mapping rules, like:</p> + +<ul> + <li> + <p>in Turkic languages, like Turkish (<code>tr</code>), Azerbaijani (<code>az</code>), Crimean Tatar (<code>crh</code>), Volga Tatar (<code>tt</code>), and Bashkir (<code>ba</code>), there are two kinds of i, with and without the dot, and two case pairings: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</p> + </li> + <li> + <p>In German (<code>de</code>), the <code>ß</code> becomes <code>SS</code> in uppercase.</p> + </li> + <li> + <p>In Dutch (<code>nl</code>), the <code>ij</code> digraph becomes <code>IJ</code>, even with <code>text-transform: capitalize</code>, which only put the first letter of a word in uppercase.</p> + </li> + <li> + <p>In Greek (<code>el</code>), vowels lose their accent when the whole word is in uppercase (<code>ά</code>/<code>Α</code>), except for the disjunctive <span lang="el">eta</span> (<code>ή</code>/<code>Ή</code>). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (<code>άι</code>/<code>ΑΪ</code>).</p> + </li> + <li> + <p>In Greek (<code>el</code>), the lowercase sigma character has two forms: <code>σ</code> and <code>ς</code>. <code>ς</code> is used only when sigma terminates a word. When applying <code>text-transform: lowercase</code> to an uppercase sigma (<code>Σ</code>), the browser needs to choose the right lowercase form based on context.</p> + </li> + <li>in Irish (<code>ga</code>), certain prefixed letters remain in lowercase when the base initial is capitalised, so for example <code>text-transform: uppercase</code> will change <code>ar aon tslí</code> to <code>AR AON tSLÍ</code> and not, as one might expect, <code>AR AON TSLÍ </code>(Firefox only). In some cases, a hyphen is also removed upon uppercasing: <code>an t-uisce</code> transforms to <code>AN tUISCE </code>(and the hyphen is correctly reinserted by <code>text-transform: lowercase</code>)</li> +</ul> + +<p>The language is defined by the <code>lang</code> HTML attribute or the <code>xml:lang</code> XML attribute.</p> + +<p>Support for these specific cases vary from one browser to the other, so check the <a href="#Browser_compatibility">browser compatibility table</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<dl> + <dt><code>capitalize</code></dt> + <dd> + <p>Is a keyword forcing the first <em>letter</em> of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general categories {{experimental_inline}} : it excludes any punctuation marks or symbols at the beginning of the word.</p> + + <div class="note">Authors should not expect <code class="css">capitalize</code> to follow language-specific title casing conventions (such as skipping articles in English).</div> + + <div class="note">The <code>capitalize</code> keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and _ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like <code>ⓐ</code> to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The <code>capitalize</code> line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.</div> + </dd> + <dt><code>uppercase</code></dt> + <dd>Is a keyword forcing all characters to be converted to uppercase.</dd> + <dt><code>lowercase</code></dt> + <dd>Is a keyword forcing all characters to be converted to lowercase.</dd> + <dt><code>none</code></dt> + <dd>Is a keyword preventing the case of all characters to be changed.</dd> + <dt><code>full-width</code> {{experimental_inline}}</dt> + <dd>Is a keyword forcing the writing of a character — mainly ideograms and latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).</dd> + +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="none" name="none"><code>none</code></h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p></code> +<p>text-transform: none + <strong><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span></strong> +</p> +</pre> + +<pre class="brush: css">span { + text-transform: none; +} +strong { float: right; }</pre> + +<p>This demonstrates no text transformation.</p> + +<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p> + +<h3 id="capitalize_(General)" name="capitalize_(General)"><code>capitalize</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p></code> +<p>text-transform: capitalize +<code> <strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>This demonstrates text capitalization.</p> + +<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)"><code>capitalize</code> (Punctuation)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.</p> + +<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)"><code>capitalize</code> (Symbols)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.</p> + +<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)"><code>capitalize</code> (Dutch <em>ij</em> digraph)</h3> + +<pre class="brush: html"><p>Initial String + <strong lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>This demonstrates how the Dutch <em>ij</em> digraph must be handled like one single letter.</p> + +<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p> + +<h3 id="uppercase_(General)" name="uppercase_(General)"><code>uppercase</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> +</p></code> +<p>text-transform: uppercase + <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: uppercase; +} +strong { float: right; }</pre> + +<p>This demonstrates transforming the text to uppercase.</p> + +<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p> + +<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)"><code>uppercase</code> (Greek Vowels)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code></strong> +</p></code> +<p>text-transform: uppercase + <code><strong></code><span><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: uppercase; +} +strong { float: right; }</pre> + +<p>This demonstrates how Greek vowels except disjunctive <em>eta</em> should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.</p> + +<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p> + +<h3 id="lowercase_(General)" name="lowercase_(General)"><code>lowercase</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> +</p></code> +<p>text-transform: lowercase + <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: lowercase; +} +strong { float: right; }</pre> + +<p>This demonstrates transforming the text to lowercase.</p> + +<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p> + +<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)"><code>lowercase</code> (Greek Σ)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code></strong> +</p></code> +<p>text-transform: lowercase + <code><strong></code><span><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: lowercase; +} +strong { float: right; }</pre> + +<p>This demonstrates how the Greek character sigma (<code>Σ</code>) is transformed into the regular lowercase sigma (<code>σ</code>) or the word-final variant (<code>ς</code>), according the context.</p> + +<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p> + +<h3 id="full-width_(General)" name="full-width_(General)"><code>full-width</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~<code></strong> +</p></code> +<p>text-transform: full-width + <code><strong></code><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: full-width; +} +strong { width: 100%; float: right; }</pre> + +<p>Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.</p> + +<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>From {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, adds the <code>full-size-kana</code> keyword and allows the <code>full-width</code> keyword to be used together with another keyword.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>From {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, extends letters to any Unicode character in the Number or Letter general category. Modifies the behavior of <code>capitalize</code> to apply to the first letter of the word, ignoring initial punctuations or symbols. Adds the <code>full-width</code> keyword to mix smoothly ideographic characters and alphabetical characters.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>From {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extends letters to non-latin bi-cameral scripts</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.text-transform")}}</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("font-variant")}}</li> +</ul> diff --git a/files/pt-br/web/css/time/index.html b/files/pt-br/web/css/time/index.html new file mode 100644 index 0000000000..e0148b11df --- /dev/null +++ b/files/pt-br/web/css/time/index.html @@ -0,0 +1,89 @@ +--- +title: <time> +slug: Web/CSS/time +tags: + - Layout + - Referencia + - Time + - Time Refência + - Tipo de Dados CSS + - Web +translation_of: Web/CSS/time +--- +<div>{{CSSRef}}</div> + +<p>O tipo de dado CSS <code><strong><time></strong></code> representa um valor de tempo expresso em segundo ou milissegundos. É usado em animações( {{cssxref("animation")}} ), transições( {{cssxref("transition")}} ) e propriedades relacionadas.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>O tipo dado <code><time></code> consiste de um elemento {{cssxref("<number>")}} seguido por uma das unidades listadas abaixo. Opcionalmente, pode ser precedido por um sinal de <code>+</code> ou <code>-</code>. Como em todas as dimensões, não há espaço entre uma unidade literal e o número.</p> + +<div class="note"> +<p><strong>Nota:</strong> Embora o número <code>0</code> seja sempre o mesmo, independente da unidade, essa última não pode ser omitida. Em outras palavras, <code>0</code> é invalido e não representa <code>0s</code> ou <code>0ms</code>.</p> +</div> + +<h3 id="Unidades">Unidades</h3> + +<dl> + <dt><strong><code id="s">s</code></strong></dt> + <dd>Representa um tempo em segundos. Exemplos: <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd> + <dt><strong><code id="ms">ms</code></strong></dt> + <dd>Representa um tempo em milissegundos. Exemplos: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> A conversão entre <code>s</code> e <code>ms</code> segue a proporção <code>1s = 1000ms</code>.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Unidades_de_Tempo_Válidas">Unidades de Tempo Válidas</h3> + +<pre>12s Inteiro Positivo +-456ms Inteiro Negativo +4.3ms Decimal +14mS A unidade é case-insentive, embora letras iniciais maiúsculas (capital letters) não sejam recomendadas. ++0s Zero com um + no inicio e uma unidade +-0ms Zero com um - no inicio e uma unidade</pre> + +<h3 id="Unidades_de_Tempo_Inválidas">Unidades de Tempo Inválidas</h3> + +<pre class="example-bad">0 Embora seja permitido o uso do zero sem unidade de medida por <length>s é invalido para <time>s. +12.0 Este é um <number>, não um <time>, pois está faltando a unidade de medida. +7 ms Não é permitido espaço entre o número e a unidade de medida. +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Values','#time','<time>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values','#time','<time>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Definição normativa de <code>s</code> e <code>ms</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1','aural.html#times','<time>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Difinição informal de <code>s</code> e <code>ms</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + + + +<p>{{Compat("css.types.time")}}</p> diff --git a/files/pt-br/web/css/tools/border-image_generator/index.html b/files/pt-br/web/css/tools/border-image_generator/index.html new file mode 100644 index 0000000000..d350bce6b5 --- /dev/null +++ b/files/pt-br/web/css/tools/border-image_generator/index.html @@ -0,0 +1,2627 @@ +--- +title: Gerador de Border-image +slug: Web/CSS/Tools/Border-image_generator +tags: + - Alternativas CSS +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Esta ferramenta</span> <span class="hps">pode</span> <span class="hps">ser</span> <span class="hps">utilizada</span> <span class="hps">para gerar o valor </span></span>{{cssxref("border-image")}} em CSS3.</p> + +<div style="display: none;"> +<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"> <div id="container"> + + <div id="gallery"> + <div id="image-gallery"> + <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/> + <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/> + <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/> + <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/> + <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/> + <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/> + </div> + </div> + + <div id="load-actions" class="group section"> + <div id="toggle-gallery" data-action="hide"> </div> + <div id="load-image" class="button"> Upload image </div> + <input id="remote-url" type="text" placeholder="Load an image from URL"/> + <div id="load-remote" class="button"> </div> + </div> + + <div id="general-controls" class="group section"> + <div class="name"> Control Box </div> + <div class="separator"></div> + <div class="property"> + <div class="name">scale</div> + <div class="ui-input-slider" data-topic="scale" + data-unit="%" data-max="300" data-sensivity="10"> + </div> + </div> + <div class="separator"></div> + <div class="property"> + <div class="name">draggable</div> + <div class="ui-checkbox" data-topic='drag-subject'></div> + </div> + <div class="property right"> + <div class="name">section height</div> + <div class="ui-input-slider" data-topic="preview-area-height" + data-min="400" data-max="1000"> + </div> + </div> + </div> + + <div id="preview_section" class="group section"> + <div id="subject"> + <div class="guideline" data-axis="Y" data-topic="slice-top"></div> + <div class="guideline" data-axis="X" data-topic="slice-right"></div> + <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div> + <div class="guideline" data-axis="X" data-topic="slice-left"></div> + </div> + <div id="preview"> </div> + </div> + + <!-- controls --> + <div id="controls" class="group section"> + + <!-- border-image-slice --> + <div id="border-slice-control" class="category"> + <div class="title"> border-image-slice </div> + <div class="property"> + <div class="name">fill</div> + <div class="ui-checkbox" data-topic='slice-fill'></div> + </div> + </div> + + <!-- border-image-width --> + <div id="border-width-control" class="category"> + <div class="title"> border-image-width </div> + </div> + + <!-- border-image-outset --> + <div id="border-outset-control" class="category"> + <div class="title"> border-image-outset </div> + </div> + + <!-- other-settings --> + <div id="aditional-properties" class="category"> + <div class="title"> aditional-properties </div> + <div class="property"> + <div class="name"> repeat-x </div> + <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"> + <div data-value="0">repeat</div> + <div data-value="0">stretch</div> + <div data-value="0">round</div> + </div> + </div> + <div class="property"> + <div class="name"> repeat-y </div> + <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"> + <div data-value="1">repeat</div> + <div data-value="1">stretch</div> + <div data-value="1">round</div> + </div> + </div> + <div class="property"> + <div class="ui-input-slider" data-topic="font-size" data-info="em size" + data-unit="px" data-value="12" data-sensivity="3"> + </div> + </div> + + <div class="property"> + <div class="ui-input-slider" data-topic="preview-width" data-info="width" + data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> + </div> + <div class="property"> + <div class="ui-input-slider" data-topic="preview-height" data-info="height" + data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> + </div> + </div> + </div> + + + <div id="output" class="category"> + <div class="title"> CSS Code </div> + <div class="css-property"> + <span class="name"> border-image-slice: </span> + <span id="out-border-slice" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-width: </span> + <span id="out-border-width" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-outset: </span> + <span id="out-border-outset" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-repeat: </span> + <span id="out-border-repeat" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-source: </span> + <span id="out-border-source" class="value"> </span> + </div> + </div> + + </div> + </div></pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TWELVE + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + + + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * UI DropDown + */ + +/* Dropdown */ + +.ui-dropdown { + height: 2em; + width: 120px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 12px; + + background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); + background-position: right center; + background-repeat: no-repeat; + background-color: #359740; + + position: relative; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-dropdown:hover { + cursor: pointer; + background-color: #208B20; +} + +/* Dropdown Select Button */ + +.ui-dropdown-select { + height: inherit; + padding: 0 0.75em; + color: #FFF; + line-height: 2em; +} + +/* Dropdown List */ + +.ui-dropdown-list { + width: 100%; + height: 150px; + max-height: 150px; + margin: 0; + padding: 0 0.3em; + + border: 3px solid #3490D2; + border-color: #208B20; + background: #666; + background-color: #EEF1F5; + color: #000; + + position: absolute; + top: 2em; + left: 0; + z-index: 100; + + overflow: hidden; + transition: all 0.3s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list:hover { + overflow: auto; +} + +.ui-dropdown-list[data-hidden='true'] { + height: 0 !important; + opacity: 0; + visibility: hidden; +} + +.ui-dropdown[data-position='left'] .ui-dropdown-list { + left: -100%; + top: 0; +} + +.ui-dropdown[data-position='right'] .ui-dropdown-list { + left: 100%; + top: 0; +} + +.ui-dropdown-list > div { + width: 100%; + height: 1.6em; + margin: 0.3em 0; + padding: 0.3em; + line-height: 1em; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list > div:hover { + background: #3490D2; + color:#FFF; + border-radius: 2px; + cursor: pointer; +} + + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * UI Button + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 2px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * BORDER IMAGE GENERATOR TOOL + */ + +body { + width: 100%; + margin: 0 auto; + padding: 0 0 20px 0; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/ + border: 1px solid #EEE; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +body[data-move='X'] { + cursor: w-resize !important; +} + +body[data-move='Y'] { + cursor: s-resize !important; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +[data-draggable='true']:hover { + cursor: move; +} + +[data-draggable='true']:hover > * { + cursor: default; +} + + + +/******************************************************************************/ +/******************************************************************************/ + +/* + * Border Image Picker + */ + +#gallery { + box-shadow: 0 0 3px 0 #BABABA; +} + +#image-gallery { + width: 600px; + height: 100px; + margin: 0 auto; + transition: margin 0.4s; +} + +#image-gallery .image { + height: 80px; + float: left; + margin: 10px; + opacity: 0.5; + background-color: #FFF; + box-shadow: 0px 0px 3px 1px #BABABA; +} + +#image-gallery .image[selected="true"] { + box-shadow: 0px 0px 3px 1px #3BBA52; + opacity: 1; +} + +#image-gallery .image:hover { + cursor: pointer; + box-shadow: 0px 0px 3px 1px #30ACE5; + opacity: 1; +} + +#image-gallery[data-collapsed='true'] { + margin-top: -100px; +} + +/* Load Menu */ + +#load-actions { + margin: 10px 0; +} + +#toggle-gallery { + width: 30px; + height: 25px; + margin: 10px; + color: #FFF; + + background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); + background-repeat: no-repeat; + background-position: top 4px center; + background-color: #888888 !important; + + border-radius: 2px; + float: left; +} + +#toggle-gallery:hover { + cursor: pointer; +} + +#toggle-gallery[data-action='show'] { + background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png'); + background-color: #888888 !important; +} + +#toggle-gallery[data-action='hide'] { + background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); +} + +.button { + width: 100px; + height: 25px; + margin: 10px; + color: #FFF; + text-align: center; + font-size: 12px; + line-height: 25px; + background-color: #379B4A; + border-radius: 2px; + float: left; +} + +.button:hover { + cursor: pointer; + background-color: #3380C4; +} + +#load-image { + float: left; +} + +#load-remote { + width: 30px; + background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png'); + background-repeat: no-repeat; + background-position: center center; +} + +#remote-url { + width: 200px; + height: 23px; + margin: 10px; + padding: 0 5px; + border: 1px solid #379B4A; + border-radius: 2px; + float: left; + + transition: width 0.5s; +} + +#remote-url:focus { + box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */ + border-color: rgba(55, 155, 74, 0.5); + width: 450px; +} + +/* + * Visible Area + */ + +#preview_section { + position: relative; + min-height: 400px; +} + +/* Image Control */ + +#subject { + width: 300px; + height: 300px; + background-repeat: no-repeat; + background-size: 100%; + background-color: #FFF; + border: 1px solid #CCC; + + position: absolute; + z-index: 10; + top: 15%; + left: 10%; + + box-shadow: 0 0 3px 0 #BABABA; + transition-property: width, height; + transition-duration: 0.1s; +} + +#subject .guideline { + background-color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(0, 0, 0, 0.3); + position: absolute; +} + +#subject .guideline:hover { + background-color: #F00; +} + +#subject .guideline[data-active] { + background-color: #F00; + z-index: 10; +} + +#subject .guideline[data-axis='X'] { + width: 1px; + height: 100%; + top: -1px; +} + +#subject .guideline[data-axis='Y'] { + width: 100%; + height: 1px; + left: -1px; +} + +#subject .guideline[data-axis='X']:hover { + cursor: w-resize; +} + +#subject .guideline[data-axis='Y']:hover { + cursor: s-resize; +} + + +#subject .relative { + position: relative; + font-size: 12px; +} + +#subject .tooltip, #subject .tooltip2 { + width: 40px; + height: 20px; + line-height: 20px; + font-size: 12px; + text-align: center; + + position: absolute; + opacity: 0.5; + transition: opacity 0.25s; +} + +#subject .tooltip { + background: #EEE; + border-radius: 2px; + border: 1px solid #CCC; +} + +#subject .tooltip2{ + color: #555; +} + +#subject [data-active] > * { + opacity: 1; +} + +#subject .tooltip[data-info='top'] { + top: -10px; + right: -50px; +} + +#subject .tooltip[data-info='right'] { + bottom: -30px; + right: -20px; +} + +#subject .tooltip[data-info='bottom'] { + top: -10px; + left: -50px; +} + +#subject .tooltip[data-info='left'] { + top: -30px; + right: -20px; +} + +#subject .tooltip2[data-info='top'] { + top: -10px; + left: -50px; +} + +#subject .tooltip2[data-info='right'] { + top: -30px; + right: -20px; +} + +#subject .tooltip2[data-info='bottom'] { + top: -10px; + right: -50px; +} + +#subject .tooltip2[data-info='left'] { + bottom: -30px; + right: -20px; +} + +/* Preview */ + +#preview { + width: 30%; + height: 50%; + background-color: #FFF; + text-align: center; + overflow: hidden; + position: absolute; + z-index: 10; + + left: 60%; + top: 15%; + + border-radius: 2px; + border-image-width: 20px; + border-image-repeat: round; + box-shadow: 0 0 3px 0 #BABABA; +} + +#preview .resize-handle { + width: 10px; + height: 10px; + background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +#preview .resize-handle:hover { + cursor: nw-resize; +} + + +/* + * General controls MENU + */ + +#general-controls { + padding: 10px 30px; + background-color: #FFF; + opacity: 0.95; + color: #888; + /*border-radius: 2px;*/ + box-shadow: 0 0 3px 0 #BABABA; +} + +#general-controls .property { + width: 130px; + float: left; +} + +#general-controls .name { + height: 20px; + margin: 0 10px 0 0; + line-height: 100%; + text-align: right; + float: left; +} + +#general-controls .right { + width: 200px; + float: right; +} + +#general-controls .ui-checkbox label { + height: 10px; +} + +#general-controls .separator { + height: 40px; + width: 1px; + margin: -10px 15px; + background-color: #EEE; + float: left; +} + +/* + * Controls + */ + +#controls { + color: #444; + margin: 10px 0 0 0; +} + +#controls .category { + height: 190px; + min-width: 260px; + margin: 10px; + padding: 10px; + border: 1px solid #CCC; + border-radius: 3px; + float: left; + + box-shadow: 0 0 3px 0 #BABABA; + transition: all 0.25s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +@media (min-width: 880px) { + #controls .category { + width: 30%; + margin-left: 1.66%; + margin-right: 1.66%; + } +} + +@media (max-width: 879px) { + #controls .category { + width: 37%; + margin-left: 6.5%; + margin-right: 6.5%; + } +} + +#controls .category .title { + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; + + text-align: center; + color: #AAA; +} + +#controls .category:hover .title { + color: #777; +} + +#controls .category > .group { + border: 1px solid #CCC; + border-radius: 2px; +} + + +/* property */ + +#controls .property { + width: 250px; + height: 20px; + margin: 5px auto; +} + +#controls .property .ui-input-slider { + margin: 0; + float: left; +} + +#controls .property .ui-input-slider-info { + width: 60px; +} + +#controls .property .ui-input-slider-left { + transition: opacity 0.15s; + opacity: 0; +} + +#controls .property .ui-input-slider-right { + transition: opacity 0.15s; + opacity: 0; +} + +#controls .property .name { + width: 60px; + height: 20px; + padding: 0px 10px 0px 0px; + text-align: right; + line-height: 100%; + float: left; +} + +#controls .property .config { + width: 20px; + height: 20px; + float: left; + background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat; + opacity: 0.5; +} + +#controls .property .config:hover { + cursor: pointer; + opacity: 1; +} + +#controls .ui-input-slider:hover .ui-input-slider-right { + opacity: 1; +} + +#controls .ui-input-slider:hover .ui-input-slider-left { + opacity: 1; +} + +#controls .property .ui-dropdown { + margin: 0 10px; + float: left; +} + + +#controls .property .ui-checkbox { + margin: 0 0 0 16px; + float: left; +} + +#controls .property .ui-checkbox label { + height: 0.85em; + width: 10px; +} + +/* dropdowns */ +#controls .ui-dropdown { + width: 50px; + height: 1.7em; + border-radius: 2px; +} + +#controls .ui-dropdown-select { + line-height: 1.6em; +} + +#controls .ui-dropdown-list { + top: 20px; +} + +#controls .ui-dropdown-list { + border-width: 1px; + text-align: center; +} + +#controls .ui-dropdown-list:hover { + overflow: hidden; +} + +#controls .border-repeat { + margin: 0 0 0 16px !important; + width: 80px; +} + +#controls .border-repeat .ui-dropdown-list { + height: 6.2em; + border-width: 1px; + text-align: center; +} + +/* border-image-slice */ + + +#border-slice-control .ui-dropdown-list { + height: 4.3em; +} + +/* border-image-width */ + +#border-width-control .ui-dropdown-list { + height: 6.2em; +} + +/* border-image-outset */ + +#border-outset-control .ui-dropdown-list { + height: 4.3em; +} + +#aditional-properties .property { + width: 200px; +} + +#aditional-properties .ui-input-slider > input { + width: 80px !important; +} + +/* unit settings panel */ + +#unit-settings { + padding: 10px; + position: absolute; + + background: #FFF; + + font-size: 12px; + border-radius: 3px; + border: 1px solid #CCC; + text-align: center; + color: #555; + + position: absolute; + z-index: 1000; + + box-shadow: 0 0 3px 0 #BABABA; + transition: all 0.25s; +} + +#unit-settings .title { + width: 100%; + margin: -5px auto 0; + + color: #666; + font-size: 14px; + font-weight: bold; + line-height: 25px; + border-bottom: 1px solid #E5E5E5; +} + +#unit-settings .ui-input-slider { + margin: 10px 0 0 0; +} + +#unit-settings .ui-input-slider-info { + width: 50px; + line-height: 1.5em; +} + +#unit-settings input { + font-size: 12px; + width: 40px !important; +} + +#unit-settings .close { + width: 16px; + height: 16px; + background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center; + background-size: 75%; + + position: absolute; + top: 4px; + right: 4px; + opacity: 0.5; +} + +#unit-settings .close:hover { + cursor: pointer; + opacity: 1; +} + +#unit-settings[data-active='true'] { + opacity: 1; +} + +#unit-settings[data-active='false'] { + opacity: 0; + top: -100px !important; +} + +/* + * CSS Output Code + */ + +#output { + padding: 10px; + border: 2px dashed #888 !important; + box-shadow: none !important; + border-radius: 3px; + overflow: hidden; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; +} + + +@media (min-width: 880px) { + #output { + width: 63.33% !important; + } +} + +@media (max-width: 879px) { + #output { + width: 87% !important; + } +} + + +#output .title { + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; + + text-align: center; + color: #AAA; +} + +#output .css-property { + width: 100%; + margin: 0; + color: #555; + font-size: 14px; + line-height: 18px; + float: left; +} + +#output .css-property .name { + width: 30%; + font-weight: bold; + text-align: right; + float: left; +} + +#output .css-property .value { + width: 65%; + padding: 0 2.5%; + word-break: break-all; + float: left; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">'use strict'; + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +/** + * UI-DropDown Select + */ + +var DropDownManager = (function DropdownManager() { + + var subscribers = {}; + var dropdowns = []; + var active = null; + + var visbility = ["hidden", "visible"]; + + + var DropDown = function DropDown(node) { + var topic = node.getAttribute('data-topic'); + var label = node.getAttribute('data-label'); + var selected = node.getAttribute('data-selected') | 0; + + var select = document.createElement('div'); + var list = document.createElement('div'); + var uval = 0; + var option = null; + var option_value = null; + + list.className = 'ui-dropdown-list'; + select.className = 'ui-dropdown-select'; + + while (node.firstElementChild !== null) { + option = node.firstElementChild; + option_value = option.getAttribute('data-value'); + + if (option_value === null) + option.setAttribute('data-value', uval); + + list.appendChild(node.firstElementChild); + uval++; + } + + node.appendChild(select); + node.appendChild(list); + + select.onclick = this.toggle.bind(this); + list.onclick = this.updateValue.bind(this); + document.addEventListener('click', clickOut); + + this.state = 0; + this.time = 0; + this.dropmenu = list; + this.select = select; + this.toggle(false); + this.value = {}; + this.topic = topic; + + if (label) + select.textContent = label; + else + this.setNodeValue(list.children[selected]); + + dropdowns[topic] = this; + + }; + + DropDown.prototype.toggle = function toggle(state) { + if (typeof(state) === 'boolean') + this.state = state === false ? 0 : 1; + else + this.state = 1 ^ this.state; + + if (active !== this) { + if (active) + active.toggle(false); + active = this; + } + + if (this.state === 0) + this.dropmenu.setAttribute('data-hidden', 'true'); + else + this.dropmenu.removeAttribute('data-hidden'); + + }; + + var clickOut = function clickOut(e) { + if (active.state === 0 || + e.target === active.dropmenu || + e.target === active.select) + return; + + active.toggle(false); + }; + + DropDown.prototype.updateValue = function updateValue(e) { + + if (Date.now() - this.time < 500) + return; + + if (e.target.className !== "ui-dropdown-list") { + this.setNodeValue(e.target); + this.toggle(false); + } + + this.time = Date.now(); + }; + + DropDown.prototype.setNodeValue = function setNodeValue(node) { + this.value['name'] = node.textContent; + this.value['value'] = node.getAttribute('data-value'); + + this.select.textContent = node.textContent; + this.select.setAttribute('data-value', this.value['value']); + + notify.call(this); + }; + + var createDropDown = function createDropDown(topic, options) { + + var dropdown = document.createElement('div'); + dropdown.setAttribute('data-topic', topic); + dropdown.className = 'ui-dropdown'; + + for (var i in options) { + var x = document.createElement('div'); + x.setAttribute('data-value', i); + x.textContent = options[i]; + dropdown.appendChild(x); + } + + new DropDown(dropdown); + + return dropdown; + }; + + var setValue = function setValue(topic, index) { + if (dropdowns[topic] === undefined || + index >= dropdowns[topic].dropmenu.children.length) + return; + + dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + var index = subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + }; + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-dropdown'); + size = elem.length; + for (var i = 0; i < size; i++) + new DropDown(elem[i]); + + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + createDropDown : createDropDown + }; + +})(); + + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + }; + + var getNode = function getNode(topic) { + return buttons[topic].node; + }; + + var setValue = function setValue(topic, value) { + var obj = buttons[topic]; + if (obj === undefined) + return; + + obj.checkbox.checked = value; + notify.call(obj); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + }; + +})(); + +window.addEventListener("load", function() { + BorderImage.init(); +}); + +var BorderImage = (function BorderImage() { + + var getElemById = document.getElementById.bind(document); + + var subject; + var preview; + var guidelines = []; + var positions = ['top', 'right', 'bottom', 'left']; + + var makeDraggable = function makeDraggable(elem) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + var PreviewControl = function PreviewControl() { + + var dragging = false; + var valueX = null; + var valueY = null; + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + valueX = e.clientX - preview.clientWidth; + valueY = e.clientY - preview.clientHeight; + dragging = true; + + document.addEventListener('mousemove', mouseDrag); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0 || dragging === false) + return; + + document.removeEventListener('mousemove', mouseDrag); + dragging = false; + }; + + var mouseDrag = function mouseDrag(e) { + InputSliderManager.setValue('preview-width', e.clientX - valueX); + InputSliderManager.setValue('preview-height', e.clientY - valueY); + }; + + var init = function init() { + + makeDraggable(preview); + makeDraggable(subject); + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + handle.addEventListener('mousedown', dragStart); + document.addEventListener('mouseup', dragEnd); + + preview.appendChild(handle); + + }; + + return { + init: init + }; + + }(); + + var ImageReader = (function ImageReader() { + + var fReader = new FileReader(); + var browse = document.createElement('input'); + + var loadImage = function loadImage(e) { + if (browse.files.length === 0) + return; + + var file = browse.files[0]; + + if (file.type.slice(0, 5) !== 'image') + return; + + fReader.readAsDataURL(file); + + return false; + }; + + fReader.onload = function(e) { + ImageControl.loadRemoteImage(e.target.result); + }; + + var load = function load() { + browse.click(); + }; + + browse.setAttribute('type', 'file'); + browse.style.display = 'none'; + browse.onchange = loadImage; + + return { + load: load + }; + + })(); + + var ImageControl = (function ImageControl() { + + var scale = 0.5; + var imgSource = new Image(); + var imgState = null; + var selected = null; + + + var topics = ['slice', 'width', 'outset']; + var properties = {}; + properties['border1'] = { + fill : false, + + slice_values : [27, 27, 27, 27], + width_values : [20, 20, 20, 20], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [1, 1], + size : [300, 200], + preview_area : 400 + }; + + properties['border2'] = { + fill : false, + + slice_values : [33, 33, 33, 33], + width_values : [1.5, 1.5, 1.5, 1.5], + outset_values : [0, 0, 0, 0], + + slice_units : [1, 1, 1, 1], + width_units : [2, 2, 2, 2], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [300, 200], + preview_area : 400 + }; + + properties['border3'] = { + fill : true, + + slice_values : [15, 15, 15, 15], + width_values : [10, 10, 10, 10], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [300, 200], + preview_area : 400 + }; + + properties['border4'] = { + fill : false, + + slice_values : [13, 13, 13, 13], + width_values : [13, 13, 13, 13], + outset_values : [13, 13, 13, 13], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [0, 0], + size : [300, 200], + preview_area : 400 + }; + + properties['border5'] = { + fill : false, + + slice_values : [0, 12, 0, 12], + width_values : [0, 12, 0, 12], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [0, 0], + size : [300, 200], + preview_area : 400, + }; + + properties['border6'] = { + fill : false, + + slice_values : [42, 42, 42, 42], + width_values : [42, 42, 42, 42], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [350, 350], + preview_area : 500, + }; + + + var loadLocalImage = function loadLocalImage(source) { + var location = "images/" + source; + imgSource.src = location; + }; + + var loadRemoteImage = function loadRemoteImage(source) { + imgSource.src = source; + if (selected) + selected.removeAttribute('selected'); + Tool.setOutputCSS('source', 'url("' + source + '")'); + }; + + var pickImage = function pickImage(e) { + if (e.target.className === 'image') { + selected = e.target; + selected.setAttribute('selected', 'true'); + loadRemoteImage(e.target.src); + imgState = e.target.getAttribute('data-stateID'); + } + }; + + var loadImageState = function loadImageState(stateID) { + if (properties[stateID] === undefined) + return; + + var prop = properties[stateID]; + var topic; + var unit_array; + var value_array; + + for (var i in topics) { + for (var j=0; j<4; j++) { + topic = topics[i] + '-' + positions[j]; + unit_array = topics[i] + '_units'; + value_array = topics[i] + '_values'; + InputSliderManager.setValue(topic, prop[value_array][j]); + DropDownManager.setValue(topic, prop[unit_array][j]); + } + } + + ButtonManager.setValue('slice-fill', prop['fill']); + DropDownManager.setValue('image-repeat-X', prop['repeat'][0]); + DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]); + InputSliderManager.setValue('preview-width', prop['size'][0]); + InputSliderManager.setValue('preview-height', prop['size'][1]); + InputSliderManager.setValue('preview-area-height', prop['preview_area']); + }; + + var update = function update() { + scale = Math.min(300, (30000 / this.width) | 0); + setScale(scale); + InputSliderManager.setValue('scale', scale, false); + + subject.style.backgroundImage = 'url("' + this.src + '")'; + preview.style.borderImageSource = 'url("' + this.src + '")'; + + guidelines['slice-top'].setMax(this.height); + guidelines['slice-right'].setMax(this.width); + guidelines['slice-bottom'].setMax(this.height); + guidelines['slice-left'].setMax(this.width); + + if (imgState) + loadImageState(imgState); + }; + + var setScale = function setScale(value) { + scale = value; + var w = imgSource.width * scale / 100 | 0; + var h = imgSource.height * scale / 100 | 0; + subject.style.width = w + 'px'; + subject.style.height = h + 'px'; + + for (var i = 0; i < positions.length; i++) + guidelines['slice-' + positions[i]].updateGuidelinePos(); + }; + + var getScale = function getScale() { + return scale/100; + }; + + var toggleGallery = function toggleGallery() { + var gallery = getElemById('image-gallery'); + var button = getElemById('toggle-gallery'); + var state = 1; + button.addEventListener('click', function() { + state = 1 ^ state; + if (state === 0) { + gallery.setAttribute('data-collapsed', 'true'); + button.setAttribute('data-action', 'show'); + } + else { + gallery.removeAttribute('data-collapsed'); + button.setAttribute('data-action', 'hide'); + } + }); + }; + + var init = function init() { + var gallery = getElemById('image-gallery'); + var browse = getElemById('load-image'); + var remote = getElemById('remote-url'); + var load_remote = getElemById('load-remote'); + + remote.addEventListener('change', function(){ + loadRemoteImage(this.value); + }); + + load_remote.addEventListener('click', function(){ + loadRemoteImage(remote.value); + }); + + browse.addEventListener('click', ImageReader.load); + gallery.addEventListener('click', pickImage); + imgSource.addEventListener('load', update); + + InputSliderManager.subscribe('scale', setScale); + InputSliderManager.setValue('scale', scale); + imgState = 'border1'; + loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png'); + toggleGallery(); + }; + + return { + init: init, + getScale : getScale, + loadRemoteImage: loadRemoteImage + }; + + })(); + + var GuideLine = function GuideLine(node) { + var topic = node.getAttribute('data-topic'); + var axis = node.getAttribute('data-axis'); + + this.node = node; + this.topic = topic; + this.axis = axis; + this.info = topic.split('-')[1]; + + this.position = 0; + this.value = 0; + this.unit = 0; + this.max = 0; + this.pos = positions.indexOf(this.info); + + guidelines[topic] = this; + + var relative_container = document.createElement('div'); + var tooltip = document.createElement('div'); + var tooltip2 = document.createElement('div'); + + tooltip.className = 'tooltip'; + tooltip.setAttribute('data-info', this.info); + + tooltip2.className = 'tooltip2'; + tooltip2.textContent = this.info; + tooltip2.setAttribute('data-info', this.info); + + this.tooltip = tooltip; + + relative_container.appendChild(tooltip); + relative_container.appendChild(tooltip2); + node.appendChild(relative_container); + + var startX = 0; + var startY = 0; + var start = 0; + + var startDrag = function startDrag(e) { + startX = e.clientX; + startY = e.clientY; + start = guidelines[topic].position; + document.body.setAttribute('data-move', axis); + relative_container.setAttribute('data-active', ''); + node.setAttribute('data-active', ''); + + document.addEventListener('mousemove', updateGuideline); + document.addEventListener('mouseup', endDrag); + }; + + var endDrag = function endDrag() { + document.body.removeAttribute('data-move'); + relative_container.removeAttribute('data-active'); + node.removeAttribute('data-active'); + + document.removeEventListener('mousemove', updateGuideline); + }; + + var updateGuideline = function updateGuideline(e) { + var value; + if (topic === 'slice-top') + value = e.clientY - startY + start; + + if (topic === 'slice-right') + value = startX - e.clientX + start; + + if (topic === 'slice-bottom') + value = startY - e.clientY + start; + + if (topic === 'slice-left') + value = e.clientX - startX + start; + + if (this.unit === 0) + InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0); + else { + InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0); + } + + }.bind(this); + + node.addEventListener("mousedown", startDrag); + + InputSliderManager.subscribe(topic, this.setPosition.bind(this)); + InputSliderManager.setValue(topic, this.position); + }; + + + GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() { + if (this.unit === 0) + this.position = this.value * ImageControl.getScale() | 0; + else + this.position = this.value * this.max * ImageControl.getScale() / 100 | 0; + + this.node.style[this.info] = this.position + 'px'; + }; + + GuideLine.prototype.setPosition = function setPosition(value) { + this.value = value; + this.tooltip.textContent = value; + this.updateGuidelinePos(); + Tool.setBorderSlice(this.pos, value); + }; + + GuideLine.prototype.setMax = function setMax(max) { + this.max = max; + this.updateLimit(); + }; + + GuideLine.prototype.updateLimit = function updateLimit() { + if (this.unit === 1) + InputSliderManager.setMax(this.topic, 100); + else + InputSliderManager.setMax(this.topic, this.max); + }; + + GuideLine.prototype.setUnit = function setUnit(type) { + if (type === '%') this.unit = 1; + if (type === '') this.unit = 0; + this.updateLimit(); + }; + + /* + * Unit panel + */ + var UnitPanel = (function UnitPanel () { + + var panel; + var title; + var precision; + var step; + var unit_topic = null; // settings are made for this topic + var step_option = [1, 0.1, 0.01]; + + var updatePrecision = function updatePrecision(value) { + InputSliderManager.setPrecision('unit-step', value); + InputSliderManager.setStep('unit-step', step_option[value]); + InputSliderManager.setMin('unit-step', step_option[value]); + + if (unit_topic) + InputSliderManager.setPrecision(unit_topic, value); + }; + + var updateUnitSettings = function updateUnitSettings(value) { + if (unit_topic) + InputSliderManager.setStep(unit_topic, value); + }; + + var show = function show(e) { + var topic = e.target.getAttribute('data-topic'); + var precision = InputSliderManager.getPrecision(topic); + var step = InputSliderManager.getStep(topic); + + unit_topic = topic; + title.textContent = topic; + + panel.setAttribute('data-active', 'true'); + panel.style.top = e.target.offsetTop - 40 + 'px'; + panel.style.left = e.target.offsetLeft + 30 + 'px'; + + InputSliderManager.setValue('unit-precision', precision); + InputSliderManager.setValue('unit-step', step); + }; + + var init = function init() { + panel = document.createElement('div'); + title = document.createElement('div'); + var close = document.createElement('div'); + + step = InputSliderManager.createSlider('unit-step', 'step'); + precision = InputSliderManager.createSlider('unit-precision', 'precision'); + + InputSliderManager.setStep('unit-precision', 1); + InputSliderManager.setMax('unit-precision', 2); + InputSliderManager.setValue('unit-precision', 2); + InputSliderManager.setSensivity('unit-precision', 20); + + InputSliderManager.setValue('unit-step', 1); + InputSliderManager.setStep('unit-step', 0.01); + InputSliderManager.setPrecision('unit-step', 2); + + InputSliderManager.subscribe('unit-precision', updatePrecision); + InputSliderManager.subscribe('unit-step', updateUnitSettings); + + close.addEventListener('click', function () { + panel.setAttribute('data-active', 'false'); + }); + + title.textContent = 'Properties'; + title.className = 'title'; + close.className = 'close'; + panel.id = 'unit-settings'; + panel.setAttribute('data-active', 'false'); + panel.appendChild(title); + panel.appendChild(precision); + panel.appendChild(step); + panel.appendChild(close); + document.body.appendChild(panel); + }; + + return { + init : init, + show : show + }; + + })(); + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview_area; + var dropdown_unit_options = [ + { '' : '--', '%' : '%'}, + { 'px' : 'px', '%' : '%', 'em' : 'em'}, + { 'px' : 'px', 'em' : 'em'}, + ]; + + var border_slice = []; + var border_width = []; + var border_outset = []; + + var border_slice_values = []; + var border_width_values = []; + var border_outset_values = []; + + var border_slice_units = ['', '', '', '']; + var border_width_units = ['px', 'px', 'px', 'px']; + var border_outset_units = ['px', 'px', 'px', 'px']; + + var border_fill = false; + var border_repeat = ['round', 'round']; + var CSS_code = { + 'source' : null, + 'slice' : null, + 'width' : null, + 'outset' : null, + 'repeat' : null + }; + + var setBorderSlice = function setBorderSlice(positionID, value) { + border_slice[positionID] = value + border_slice_units[positionID]; + updateBorderSlice(); + }; + + var updateBorderSlice = function updateBorderSlice() { + var value = border_slice.join(' '); + if (border_fill === true) + value += ' fill'; + + preview.style.borderImageSlice = value; + setOutputCSS('slice', value); + }; + + var setBorderFill = function setBorderFill(value) { + border_fill = value; + var bimgslice = border_slice.join(' ');; + if (value === true) + bimgslice += ' fill'; + + preview.style.borderImageSlice = bimgslice; + }; + + var updateBorderWidth = function updateBorderWidth() { + var value = border_width.join(' '); + preview.style.borderImageWidth = value; + setOutputCSS('width', value); + }; + + var updateBorderOutset = function updateBorderOutset() { + var value = border_outset.join(' '); + preview.style.borderImageOutset = border_outset.join(' '); + setOutputCSS('outset', value); + }; + + var setBorderRepeat = function setBorderRepeat(obj) { + border_repeat[obj.value] = obj.name; + var value = border_repeat.join(' '); + preview.style.borderImageRepeat = value; + setOutputCSS('repeat', value); + }; + + var setOutputCSS = function setOutputCSS(topic, value) { + CSS_code[topic].textContent = value + ';'; + }; + + var setPreviewFontSize = function setPreviewFontSize(value) { + preview.style.fontSize = value + 'px'; + }; + + var setPreviewWidth = function setPreviewWidth(value) { + preview.style.width = value + 'px'; + }; + + var setPreviewHeight = function setPreviewHeight(value) { + preview.style.height = value + 'px'; + }; + + var setPreviewAreaHeight = function setPreviewAreaHeight(value) { + preview_area.style.height = value + 'px'; + }; + + var updateDragOption = function updateDragOption(value) { + if (value === true) + subject.setAttribute('data-draggable', 'true'); + else + subject.removeAttribute('data-draggable'); + }; + + var createProperty = function createProperty(topic, labelID, optionsID) { + + var slider = InputSliderManager.createSlider(topic, positions[labelID]); + var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]); + + InputSliderManager.setSensivity(topic, 3); + InputSliderManager.setPrecision(topic, 1); + + var property = document.createElement('div'); + var config = document.createElement('div'); + + property.className = 'property'; + config.className = 'config'; + config.setAttribute('data-topic', topic); + config.addEventListener('click', UnitPanel.show); + + property.appendChild(slider); + property.appendChild(dropdown); + property.appendChild(config); + + return property; + }; + + var initBorderSliceControls = function initBorderSliceControls() { + var container = getElemById('border-slice-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_slice_values[id] = value; + border_slice[id] = value + border_slice_units[id]; + updateBorderSlice(); + }); + + DropDownManager.subscribe(topic, function(obj) { + guidelines[topic].setUnit(obj.value); + border_slice_units[id] = obj.value; + border_slice[id] = border_slice_values[id] + obj.value; + updateBorderSlice(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'slice-' + positions[i]; + var property = createProperty(topic, i, 0); + listenForChanges(topic, i); + + container.appendChild(property); + } + + container.appendChild(container.children[1]); + + }; + + var initBorderWidthControls = function initBorderWidthControls() { + var container = getElemById('border-width-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_width_values[id] = value; + border_width[id] = value + border_width_units[id]; + updateBorderWidth(); + }); + + DropDownManager.subscribe(topic, function(obj) { + if (obj.value === '%') + InputSliderManager.setMax(topic, 100); + else + InputSliderManager.setMax(topic, 1000); + + border_width_units[id] = obj.value; + border_width[id] = border_width_values[id] + obj.value; + updateBorderWidth(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'width-' + positions[i]; + var property = createProperty(topic, i, 1); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var initBorderOutsetControls = function initBorderOutsetControls() { + + var container = getElemById('border-outset-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_outset_values[id] = value; + border_outset[id] = value + border_outset_units[id]; + updateBorderOutset(); + }); + + DropDownManager.subscribe(topic, function(obj) { + border_outset_units[id] = obj.value; + border_outset[id] = border_outset_values[id] + obj.value; + updateBorderOutset(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'outset-' + positions[i]; + var property = createProperty(topic, i, 2); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var init = function init() { + + var gallery = + subject = getElemById('subject'); + preview = getElemById("preview"); + preview_area = getElemById("preview_section"); + + + CSS_code['source'] = getElemById("out-border-source"); + CSS_code['slice'] = getElemById("out-border-slice"); + CSS_code['width'] = getElemById("out-border-width"); + CSS_code['outset'] = getElemById("out-border-outset"); + CSS_code['repeat'] = getElemById("out-border-repeat"); + + initBorderSliceControls(); + initBorderWidthControls(); + initBorderOutsetControls(); + + var elem = document.querySelectorAll('.guideline'); + var size = elem.length; + for (var i = 0; i < size; i++) + new GuideLine(elem[i]); + + PreviewControl.init(); + + ButtonManager.subscribe('slice-fill',setBorderFill); + ButtonManager.subscribe('drag-subject', updateDragOption); + ButtonManager.setValue('drag-subject', false); + + DropDownManager.subscribe('image-repeat-X', setBorderRepeat); + DropDownManager.subscribe('image-repeat-Y', setBorderRepeat); + + InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight); + InputSliderManager.subscribe('preview-width', setPreviewWidth); + InputSliderManager.subscribe('preview-height', setPreviewHeight); + InputSliderManager.subscribe('font-size', setPreviewFontSize); + InputSliderManager.setValue('preview-width', 300); + InputSliderManager.setValue('preview-height', 200); + }; + + return { + init: init, + setOutputCSS: setOutputCSS, + setBorderSlice: setBorderSlice + }; + + })(); + + /** + * Init Tool + */ + var init = function init() { + InputSliderManager.init(); + DropDownManager.init(); + ButtonManager.init(); + UnitPanel.init(); + Tool.init(); + ImageControl.init(); + }; + + return { + init : init + }; + +})(); + +</pre> +</div> + +<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p> + +<p> </p> diff --git a/files/pt-br/web/css/tools/border-radius_generator/index.html b/files/pt-br/web/css/tools/border-radius_generator/index.html new file mode 100644 index 0000000000..a7db08eb69 --- /dev/null +++ b/files/pt-br/web/css/tools/border-radius_generator/index.html @@ -0,0 +1,1593 @@ +--- +title: Gerador de Border-radius +slug: Web/CSS/Tools/Border-radius_generator +tags: + - CSS + - Ferramentas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Esta ferramenta</span> <span class="hps">pode</span> <span class="hps">ser</span> <span class="hps">utilizada</span> <span class="hps">para gerar o efeito </span></span>{{cssxref("border-radius")}} em CSS3.</p> +<div style="display: none;"> + <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> + <h3 id="HTML_Content">HTML Content</h3> + <pre class="brush: html"><div id="container"> + <div class="group section"> + <div id="preview" class="col span_12"> + <div id="subject"> + <div id="top-left" class="radius-container" + data-X="left" data-Y="top"> + </div> + <div id="top-right" class="radius-container" + data-X="right" data-Y="top"> + </div> + <div id="bottom-right" class="radius-container" + data-X="right" data-Y="bottom"> + </div> + <div id="bottom-left" class="radius-container" + data-X="left" data-Y="bottom"> + </div> + + <div id="radius-ui-sliders"> + <div id="tlr" class="ui-input-slider" data-topic="top-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlw" class="ui-input-slider" data-topic="top-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlh" class="ui-input-slider" data-topic="top-left-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="trr" class="ui-input-slider" data-topic="top-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="trw" class="ui-input-slider" data-topic="top-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="trh" class="ui-input-slider" data-topic="top-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="brr" class="ui-input-slider" data-topic="bottom-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="blr" class="ui-input-slider" data-topic="bottom-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" + data-unit=" px" data-sensivity="2"></div> + </div> + </div> + </div> + </div> + <div id="controls" class="group section"> + + <div class="group section"> + <div id="dimensions"> + <div class="ui-input-slider" data-topic="width" data-info="width" + data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> + + <div class="ui-input-slider" data-topic="height" data-info="height" + data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> + </div> + + <div id="output"></div> + </div> + + <div class="group section"> + <div id="radius-lock"> + <div class="info"> rounded corner </div> + <div class="ui-checkbox" data-topic='top-left'></div> + <div class="ui-checkbox" data-topic='top-right'></div> + <div class="ui-checkbox" data-topic='bottom-right'></div> + <div class="ui-checkbox" data-topic='bottom-left'></div> + </div> + + <div id="unit-selection"> + <div class="info"> select border units </div> + </div> + </div> + + </div> +</div> +</pre> + <h3 id="CSS_Content">CSS Content</h3> + <pre class="brush: css">/* GRID OF TEN + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + + +/* + * UI Component + */ + +.ui-input-slider-container { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider-container * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * UI Component + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview { + height: 500px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + overflow: hidden; + position: relative; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#preview input { + color: #333; + border: 1px solid #CCC; + border-radius: 3px; +} + +#subject { + width: 400px; + height: 150px; + margin: 0 auto; + border: 3px solid #C60; + background: #FFF; + position: relative; +} + +.radius { + width: 50%; + height: 50%; + border: 1px solid #CCC; + display: none; + position: absolute; + z-index: 1; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.handle { + width: 16px; + height: 16px; + position: absolute; + z-index: 2; +} + +.handle-top-left { + top: -12px; + left: -12px; + cursor: se-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; +} + +.handle-top-right { + top: -12px; + right: -12px; + cursor: sw-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; +} + +.handle-bottom-right { + bottom: -12px; + right: -12px; + cursor: nw-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat; +} + +.handle-bottom-left { + bottom: -12px; + left: -12px; + cursor: ne-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat; +} + + +.radius-container { + position: absolute; + display : block; + z-index: 1; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* TOP LEFT */ +#top-left { + top: 0; + left: 0; +} + +#top-left .radius { + border-top-left-radius: 100%; + top: 0; + left: 0; +} + +/* TOP RIGHT */ +#top-right { + top: 0; + right: 0; +} + +#top-right .radius { + border-top-right-radius: 100%; + top: 0; + right: 0; +} + +/* BOTTOM RIGHT */ +#bottom-right { + bottom: 0; + right: 0; +} + +#bottom-right .radius { + border-bottom-right-radius: 100%; + bottom: 0; + right: 0; +} + +/* BOTTOM lEFT */ +#bottom-left { + bottom: 0; + left: 0; +} + +#bottom-left .radius { + border-bottom-left-radius: 100%; + bottom: 0; +} + +/* INPUT SLIDERS */ + +#preview .ui-input-slider { + margin: 10px; + position: absolute; + z-index: 10; +} + +#radius-ui-sliders { + width: 100%; + height: 100%; + min-height: 75px; + min-width: 150px; + padding: 20px 50px; + top: -20px; + left: -50px; + position: relative; +} + +#tlr { + top: -30px; + left: -50px; + display: none; +} + +#tlw { + top: -30px; + left: 30px; +} + +#tlh { + top: 20px; + left: -50px; +} + +#trr { + top: -30px; + right: -50px; + display: none; +} + +#trw { + top: -30px; + right: 30px; +} + +#trh { + top: 20px; + right: -50px; +} + +#brr { + bottom: -30px; + right: -50px; + display: none; +} + +#brw { + bottom: -30px; + right: 30px; +} + +#brh { + bottom: 20px; + right: -50px; +} + +#blr { + bottom: -30px; + left: -50px; + display: none; +} + +#blw { + bottom: -30px; + left: 30px; +} + +#blh { + bottom: 20px; + left: -50px; +} + +#preview .ui-input-slider-left, #preview .ui-input-slider-right { + visibility: hidden; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-left { + visibility: visible; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-right { + visibility: visible; +} + +/* + * + */ + +#unit-selection { + width: 200px; + height: 75px; + margin: 30px 30px 0 0; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: right; +} + +#unit-selection .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#unit-selection .dropdown { + width: 50px; + height: 20px; + margin: 10px; + padding: 0; + border-radius: 3px; + position: absolute; + overflow: hidden; +} + +#unit-selection select { + width: 50px; + height: 20px; + marign: 0; + padding: 0 0 0 10px; + background: #555; + border: 1px solid #555; + border: none; + color: #FFF; + float: left; +} + +#unit-selection select option { + background: #FFF; + color: #333; +} + +#unit-selection select:hover { + cursor: pointer; +} + +#unit-selection .dropdown:before { + content: ""; + width: 18px; + height: 20px; + display: block; + background-color: #555; + background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); + background-position: center center; + background-repeat: no-repeat; + top: 0px; + right: 0px; + position: absolute; + z-index: 1; + pointer-events: none; +} + +#unit-selection .unit-top-left { + top: 0; + left: 0; + display: none; +} + +#unit-selection .unit-top-left-w { + top: -22px; + left: 30px; +} + +#unit-selection .unit-top-left-h { + top: 20px; + left: -37px; +} + +#unit-selection .unit-top-right { + top: 0; + right: 0; + display: none; +} + +#unit-selection .unit-top-right-w { + top: -22px; + right: 30px; +} + +#unit-selection .unit-top-right-h { + top: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-right { + bottom: 0; + right: 0; + display: none; +} + +#unit-selection .unit-bottom-right-w { + bottom: -22px; + right: 30px; +} + +#unit-selection .unit-bottom-right-h { + bottom: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-left { + bottom: 0; + left: 0; + display: none; +} + +#unit-selection .unit-bottom-left-w { + bottom: -22px; + left: 30px; +} + +#unit-selection .unit-bottom-left-h { + bottom: 20px; + left: -37px; +} + +/******************************************************************************/ +/******************************************************************************/ + + +#radius-lock { + width: 200px; + height: 75px; + margin: 30px 0 0 30px; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: left; +} + +#radius-lock .ui-checkbox { + color: #FFF; + position: absolute; +} + +#radius-lock .ui-checkbox > label { + height: 20px; + width: 34px; + padding: 0; +} + +#radius-lock .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#radius-lock [data-topic="top-left"] { + top: 10px; + left: 10px; +} + +#radius-lock [data-topic="top-right"] { + top: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-right"] { + bottom: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-left"] { + bottom: 10px; + left: 10px; +} + +/** + * Controls + */ + +#dimensions { + width: 200px; + color: #444; + float:left; +} + +#dimensions input { + background: #555; + color: #FFF; + border: none; + border-radius: 3px; +} + +#output { + width: 500px; + padding: 10px 0; + margin: 10px 0; + color: #555; + text-align: center; + border: 1px dashed #999; + border-radius: 3px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; + + float: right; +} + + +</pre> + <h3 id="JavaScript_Content">JavaScript Content</h3> + <pre class="brush: js"><code class="language-js">'use strict'; + + +/** + * UI-InputSliderManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseInt(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + subscribe(obj.topic, function(value) { + input.value = value + obj.unit; + }); + + return input; + } + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + document.addEventListener("mousemove", sliderMotion); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }); + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + } + + return slider; + } + + var InputSlider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.topic = topic; + this.node = node; + this.unit = unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + node.className = 'ui-input-slider ui-input-slider-container'; + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + } + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + if (send_notify !== undefined && send_notify === false) { + slider.input.value = value + slider.unit; + return; + } + + notify.call(slider); + } + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + } + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + } + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + } + + var getNode = function getNode(topic) { + return sliders[topic].node; + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + } + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + getNode : getNode, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + } + catch(error) { + console.log(error); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + + +window.addEventListener("load", function() { + BorderRadius.init(); +}); + +var BorderRadius = (function BorderRadius() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + var subject; + var units = ['px', '%']; + var output = null; + + var UnitSelector = function UnitSelector(topic) { + + this.container = document.createElement("div"); + this.select = document.createElement("select"); + for (var i in units) { + var option = document.createElement("option"); + option.value = i; + option.textContent = units[i]; + this.select.appendChild(option); + } + + this.container.className = 'dropdown ' + 'unit-' + topic; + this.container.appendChild(this.select); + } + + UnitSelector.prototype.setValue = function setValue(value) { + this.salect.value = value; + } + + + var RadiusContainer = function RadiusContainer(node) { + var radius = document.createElement('div'); + var handle = document.createElement('div'); + var x = node.getAttribute('data-x'); + var y = node.getAttribute('data-y'); + var active = false; + + this.id = node.id; + this.node = node; + this.radius = radius; + this.handle = handle; + this.width = 100; + this.height = 50; + this.size = 0; + this.rounded = false; + + this.unitX = 0; + this.unitY = 0; + this.unitR = 0; + + this.maxW = 100; + this.maxH = 100; + this.maxR = 100; + + this.topic = y + '-' + x; + + var sliderW = InputSliderManager.getNode(this.topic + '-w'); + var sliderH = InputSliderManager.getNode(this.topic + '-h'); + var sliderR = InputSliderManager.getNode(this.topic); + + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.setUnitR(this.unitR); + + this.updateWidth(); + this.updateHeight(); + this.updateRadius(); + + if (x === 'left') this.resizeX = 1; + if (x === 'right') this.resizeX = -1; + if (y === 'top') this.resizeY = 1; + if (y === 'bottom') this.resizeY = -1; + + radius.className = 'radius'; + + var unit_selector = document.getElementById("unit-selection"); + var unitW = new UnitSelector(this.topic + '-w'); + var unitH = new UnitSelector(this.topic + '-h'); + var unitR = new UnitSelector(this.topic); + + unit_selector.appendChild(unitW.container); + unit_selector.appendChild(unitH.container); + unit_selector.appendChild(unitR.container); + node.appendChild(radius); + subject.appendChild(handle); + + unitW.select.addEventListener('change', function(e) { + this.setUnitX(e.target.value | 0); + }.bind(this)); + + unitH.select.addEventListener('change', function(e) { + this.setUnitY(e.target.value | 0); + }.bind(this)); + + unitR.select.addEventListener('change', function(e) { + this.setUnitR(e.target.value | 0); + }.bind(this)); + + if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' + if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; + if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; + if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; + + handle.addEventListener("mousedown", function(e) { + active = true; + this.radius.style.display = 'block'; + PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); + }.bind(this)); + + document.addEventListener("mouseup", function(e) { + this.radius.style.display = 'none'; + if (active === true) + PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); + }.bind(this)); + + InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this)); + InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this)); + InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); + + ButtonManager.subscribe(this.topic, function(value) { + this.rounded = value; + if (value === true) { + unitW.container.style.display = 'none'; + unitH.container.style.display = 'none'; + unitR.container.style.display = 'block'; + sliderW.style.display = 'none'; + sliderH.style.display = 'none'; + sliderR.style.display = 'block'; + this.setUnitR(this.unitR); + this.updateRadius(); + } + + if (value === false) { + unitW.container.style.display = 'block'; + unitH.container.style.display = 'block'; + unitR.container.style.display = 'none'; + sliderW.style.display = 'block'; + sliderH.style.display = 'block'; + sliderR.style.display = 'none'; + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.updateWidth(); + this.updateHeight(); + } + + this.updateBorderRadius(); + + }.bind(this)); + + this.updateBorderRadius(); + } + + RadiusContainer.prototype.updateWidth = function updateWidth() { + this.node.style.width = this.width + units[this.unitX]; + var value = Math.round(this.width / 2); + InputSliderManager.setValue(this.topic + '-w', value, false); + } + + RadiusContainer.prototype.updateHeight = function updateHeight() { + this.node.style.height = this.height + units[this.unitY]; + var value = Math.round(this.height / 2); + InputSliderManager.setValue(this.topic + '-h', value, false); + } + + RadiusContainer.prototype.updateRadius = function updateRadius() { + var value = Math.round(this.size / 2); + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + InputSliderManager.setValue(this.topic, value, false); + } + + RadiusContainer.prototype.setWidth = function setWidth(value) { + this.radius.style.display = 'block'; + this.width = 2 * value; + this.node.style.width = this.width + units[this.unitX]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setHeight = function setHeight(value) { + this.radius.style.display = 'block'; + this.height = 2 * value; + this.node.style.height = this.height + units[this.unitY]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setRadius = function setRadius(value) { + this.radius.style.display = 'block'; + this.size = 2 * value; + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setUnitX = function setUnitX(value) { + this.unitX = value; + if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; + if (this.unitX === 1) this.maxW = 200; + InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]); + InputSliderManager.setMax(this.topic + '-w', this.maxW / 2); + } + + RadiusContainer.prototype.setUnitY = function setUnitY(value) { + this.unitY = value; + if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; + if (this.unitY === 1) this.maxH = 200; + InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]); + InputSliderManager.setMax(this.topic + '-h', this.maxH / 2); + } + + RadiusContainer.prototype.setUnitR = function setUnitR(value) { + this.unitR = value; + + if (this.unitR === 0) + this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth); + + if (this.unitR === 1) + this.maxR = 200; + + InputSliderManager.setUnit(this.topic, units[this.unitR]); + InputSliderManager.setMax(this.topic, this.maxR / 2); + } + + RadiusContainer.prototype.updateUnits = function updateUnits(unit) { + if (this.rounded) { + this.setUnitR(this.unitR); + return; + } + + if (unit === 0) + this.setUnitX(this.unitX); + + if (unit === 1) + this.setUnitY(this.unitY); + } + + RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () { + + if (this.rounded === true) { + var unit = units[this.unitR]; + var value = Math.round(this.size / 2); + return value + unit; + } + + var unitX = units[this.unitX]; + var unitY = units[this.unitY]; + var valueX = Math.round(this.width / 2); + var valueY = Math.round(this.height / 2); + + if (valueX === valueY && this.unitX === this.unitY) + return valueX + unitX; + + return valueX + unitX + ' ' + valueY + unitY; + } + + RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () { + var radius = this.composeBorderRadius(); + var corner = 0; + + if (this.topic === 'top-left') { + subject.style.borderTopLeftRadius = radius; + corner = 0; + } + + if (this.topic === 'top-right') { + subject.style.borderTopRightRadius = radius; + corner = 1; + } + + if (this.topic === 'bottom-right') { + subject.style.borderBottomRightRadius = radius; + corner = 2; + } + + if (this.topic === 'bottom-left') { + subject.style.borderBottomLeftRadius = radius; + corner = 3; + } + + Tool.updateOutput(corner, radius); + } + + RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) { + + if (this.rounded === true) { + this.size += this.resizeX * deltaX + this.resizeY * deltaY; + if (this.size < 0) this.size = 0; + if (this.size > this.maxR) this.size = this.maxR; + this.updateRadius(); + this.updateBorderRadius(); + return; + } + + if (deltaX) { + this.width += this.resizeX * deltaX; + if (this.width < 0) this.width = 0; + if (this.width > this.maxW) this.width = this.maxW; + this.updateWidth(); + } + + if (deltaY) { + this.height += this.resizeY * deltaY; + if (this.height < 0) this.height = 0; + if (this.height > this.maxH) this.height = this.maxH; + this.updateHeight(); + } + + if (deltaX || deltaY) + this.updateBorderRadius(); + } + + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview; + var preview_ui; + var radius_containers = []; + var border_width = 3; + var borders1 = [null, null, null, null]; + var borders2 = [0, 0, 0, 0]; + + var updateUIWidth = function updateUIWidth(value) { + var pwidth = subject.parentElement.clientWidth; + var left = (pwidth - value) / 2; + subject.style.width = value + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(0); + } + + var updateUIHeight = function updateUIHeight(value) { + var pheight = subject.parentElement.clientHeight; + var top = (pheight - value) / 2; + subject.style.height = value + "px"; + subject.style.top = top - border_width + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(1); + } + + var updatePreviewUIWidth = function updatePreviewUIWidth() { + var p = subject.parentElement.clientWidth; + var v = preview_ui.clientWidth; + console.log(p, v, (p - v ) / 2); + preview_ui.style.left = (p - v) / 2 + "px" ; + } + + var updatePreviewUIHeight = function updatePreviewUIHeight() { + var p = subject.parentElement.clientHeight; + var v = preview_ui.clientHeight; + console.log(p, v, (p - v ) / 2); + preview_ui.style.top = (p - v) / 2 + "px" ; + } + + var updateOutput = function updateOutput(corner, radius) { + var values = radius.split(" "); + + borders1[corner] = values[0]; + borders2[corner] = values[0]; + + if (values.length === 2) + borders2[corner] = values[1]; + + var border_1_value = borders1.join(" "); + var border_2_value = borders2.join(" "); + var border_radius = 'border-radius: ' + border_1_value; + + if (border_2_value !== border_1_value) + border_radius += ' / ' + border_2_value; + + border_radius += ';'; + output.textContent = border_radius; + } + + var init = function init() { + preview = getElemById("preview"); + subject = getElemById("subject"); + output = getElemById("output"); + preview_ui = getElemById("radius-ui-sliders"); + + var elem = document.querySelectorAll('.radius-container'); + var size = elem.length; + for (var i = 0; i < size; i++) + radius_containers[i] = new RadiusContainer(elem[i]); + + InputSliderManager.subscribe("width", updateUIWidth); + InputSliderManager.subscribe("height", updateUIHeight); + + InputSliderManager.setValue("width", subject.clientWidth); + InputSliderManager.setValue("height", subject.clientHeight); + } + + return { + init : init, + updateOutput : updateOutput + } + + })(); + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + InputSliderManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); + + +</code></pre> +</div> +<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p> +<p> </p> diff --git a/files/pt-br/web/css/tools/index.html b/files/pt-br/web/css/tools/index.html new file mode 100644 index 0000000000..2e17ae96d5 --- /dev/null +++ b/files/pt-br/web/css/tools/index.html @@ -0,0 +1,30 @@ +--- +title: Ferramentas +slug: Web/CSS/Tools +tags: + - CSS + - NeedsContent +translation_of: Web/CSS/Tools +--- +<div>{{Draft}}</div> + +<p>O CSS oferece diversos recursos poderosos e um grande número de parâmetros que, às vezes, podem ser difíceis de usar. Então, é bem melhor quando você pode visualizá-los enquanto trabalha com eles.</p> + +<p>Esta página oferece links para várias ferramentas úteis que irão te ajudar a criar o CSS para estilizar seu conteúdo usando esses recursos.</p> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Outras_ferramentas">Outras ferramentas</h2> + +<ul> + <li>Animação em CSS - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li> + <li>Para verificar as informações de exibição do dispositivo (útil para {{Glossary("web design responsivo")}}) - <a href="http://mydevice.io/">mydevice.io</a></li> + <li>Menus CSS - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li> + <li>Um poderoso e moderno <em>linter</em> CSS que ajuda a impor convenções consistentes e evitar erros em suas folhas de estilo - <a href="https://stylelint.io/">stylelint</a></li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li> +</ul> diff --git a/files/pt-br/web/css/touch-action/index.html b/files/pt-br/web/css/touch-action/index.html new file mode 100644 index 0000000000..543871220e --- /dev/null +++ b/files/pt-br/web/css/touch-action/index.html @@ -0,0 +1,137 @@ +--- +title: touch-action +slug: Web/CSS/touch-action +translation_of: Web/CSS/touch-action +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <strong><code>touch-action</code></strong> é uma especificação CSS , e forma, uma determinada região que pode ser manipulada pelo usuário através de uma tela sensível ao toque (por exemplo, recursos panorâmicos ou de zoom incorporados no navegador).</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +touch-action: auto; +touch-action: none; +touch-action: pan-x; +touch-action: pan-left; +touch-action: pan-right; +touch-action: pan-y; +touch-action: pan-up; +touch-action: pan-down; +touch-action: pinch-zoom; +touch-action: manipulation; + +/* Global values */ +touch-action: inherit; +touch-action: initial; +touch-action: unset; +</pre> + +<p>{{cssinfo}}</p> + +<p>By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using {{domxref("Pointer_events")}} will receive a <code><a href="/Web/Events/pointercancel">pointercancel</a></code> event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in <code><a href="Web/Events/pointermove">pointermove</a></code> and <code><a href="/Web/Events/pointerup">pointerup</a></code> listeners for the remaining gestures. Applications using {{domxref("Touch_events")}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <strong>touch-action</strong> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p> + +<p>When a gesture is started, the browser intersects the <strong>touch-action</strong> values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, <strong>touch-action</strong> is typically applied only to individual elements which have some custom behavior, without needing to specify <strong>touch-action</strong> explicitly on any of that element's descendants. After a gesture has started, changes to <strong>touch-action</strong> values will not have any impact on the behavior of the current gesture.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code>touch-action</code> property may be specified as either:</p> + +<ul> + <li>any one of the keywords <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code>, <em>or</em></li> + <li>one of the keywords <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, and/or one of the keywords <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code>, plus optionally the keyword <code><a href="#">pinch-zoom</a></code>.</li> +</ul> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>Enable browser handling of all panning and zooming gestures.</dd> + <dt><a id="none" name="none"><code>none</code></a></dt> + <dd>Disable browser handling of all panning and zooming gestures.</dd> + <dt><a id="pan-x" name="pan-x"><code>pan-x</code></a></dt> + <dd>Enable single-finger horizontal panning gestures. May be combined with <strong>pan-y, pan-up,</strong> <strong>pan-down </strong>and/or <strong>pinch-zoom</strong>.</dd> + <dt><a id="pan-y" name="pan-y"><code>pan-y</code></a></dt> + <dd>Enable single-finger vertical panning gestures. May be combined with <strong>pan-x, pan-left, </strong><strong>pan-right</strong> and/or <strong>pinch-zoom</strong>.</dd> + <dt><a id="manipulation" name="manipulation"><code>manipulation</code></a></dt> + <dd>Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of <strong>click</strong> events when the user taps the screen. This is an alias for "<strong>pan-x pan-y pinch-zoom</strong>" (which, for compatibility, is itself still valid).</dd> +</dl> + +<dl> + <dt><a id="pan-keywords" name="pan-keywords"><code>pan-left</code>, <code>pan-right,pan-up,pan-down</code> {{experimental_inline}}</a></dt> + <dd>Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (<strong>pan-up</strong>) means that the user is dragging their finger downward on the screen surface, and likewise <strong>pan-left</strong> means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, <strong>"</strong><strong>pan-left pan-right</strong>" is invalid since "<strong>pan-x</strong>" is simpler, but "<strong>pan-left pan-down</strong>" is valid).</dd> + <dt><a id="pinch-zoom" name="pinch-zoom"><code>pinch-zoom</code></a></dt> + <dd>Enable multi-finger panning and zooming of the page. This may be combined with any of the <strong>pan-</strong> values.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. </p> + +<pre class="brush: css">#map { + touch-action: none; +} +</pre> + +<p>Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.</p> + +<pre class="brush: css">.image-carousel { + width: 100%; + height: 150px; + touch-action: pan-y pinch-zoom; +} +</pre> + +<p><strong>touch-action </strong>is also often used to completely disable the delay of <strong>click </strong>events caused by support for the<strong> </strong>double-tap to zoom gesture.</p> + +<pre class="brush: css">html { + touch-action: manipulation; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#touch-action', 'touch-action')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Added <code>pinch-zoom</code> property value.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#the-touch-action-css-property', 'touch-action')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Added <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> property values.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{compat("css.properties.touch-action")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Pointer_events","Pointer Events")}}</li> + <li>WebKit Blog <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/" rel="bookmark" title="Permanent Link: More Responsive Tapping on iOS">More Responsive Tapping on iOS</a></li> + <li>Google Developers Blog <a href="https://developers.google.com/web/updates/2017/01/scrolling-intervention">Making touch scrolling fast by default</a></li> +</ul> diff --git a/files/pt-br/web/css/transform-function/index.html b/files/pt-br/web/css/transform-function/index.html new file mode 100644 index 0000000000..edb6589b7f --- /dev/null +++ b/files/pt-br/web/css/transform-function/index.html @@ -0,0 +1,227 @@ +--- +title: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code><transform-function></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p> + +<h2 id="Describing_transformations_mathematically">Describing transformations mathematically</h2> + +<p>Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a>, although <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> are also sometimes used.</p> + +<h3 id="Cartesian_coordinates"><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>Cartesian coordinates</h3> + +<p>In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation <code>(x, y)</code>.</p> + +<p>In CSS (and most computer graphics), the origin <code>(0, 0)</code> represents the<em> top-left</em> corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be <code>(2, 5)</code>, while a point 3 units to the left and 12 units up would be <code>(-3, -12)</code>.</p> + +<h3 id="Transformation_functions">Transformation functions</h3> + +<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2x2 matrix, like this:</p> + +<div style="text-align: center;"> +<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p> +</div> + +<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a></div> + +<p><br> + It is even possible to apply several transformations in a row:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a></div> + +<p><br> + With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p> + +<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p> + +<div class="note"> +<p><strong>Note:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3x3 transformation matrices, and can simply express translations as linear functions.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code><transform-function></code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p> + +<h3 id="Matrix_transformation">Matrix transformation</h3> + +<dl> + <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt> + <dd>Describes a homogeneous 2D transformation matrix.</dd> + <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt> + <dd>Describes a 3D transformation as a 4x4 homogeneous matrix.</dd> +</dl> + +<h3 id="Perspective">Perspective</h3> + +<dl> + <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt> + <dd>Sets the distance between the user and the z=0 plane.</dd> +</dl> + +<h3 id="Rotation">Rotation</h3> + +<dl> + <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt> + <dd>Rotates an element around a fixed point on the 2D plane.</dd> + <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt> + <dd>Rotates an element around a fixed axis in 3D space.</dd> + <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt> + <dd>Rotates an element around the horizontal axis.</dd> + <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt> + <dd>Rotates an element around the vertical axis.</dd> + <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt> + <dd>Rotates an element around the z-axis.</dd> +</dl> + +<h3 id="Scaling_(resizing)">Scaling (resizing)</h3> + +<dl> + <dt>{{cssxref("transform-function/scale","scale()")}}</dt> + <dd>Scales an element up or down on the 2D plane.</dd> + <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt> + <dd>Scales an element up or down in 3D space.</dd> + <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt> + <dd>Scales an element up or down horizontally.</dd> + <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt> + <dd>Scales an element up or down vertically.</dd> + <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt> + <dd>Scales an element up or down along the z-axis.</dd> +</dl> + +<h3 id="Skewing_(distortion)">Skewing (distortion)</h3> + +<dl> + <dt>{{cssxref("transform-function/skew","skew()")}}</dt> + <dd>Skews an element on the 2D plane.</dd> + <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt> + <dd>Skews an element in the horizontal direction.</dd> + <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt> + <dd>Skews an element in the vertical direction.</dd> +</dl> + +<h3 id="Translation_(moving)">Translation (moving)</h3> + +<dl> + <dt>{{cssxref("transform-function/translate","translate()")}}</dt> + <dd>Translates an element on the 2D plane.</dd> + <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt> + <dd>Translates an element in 3D space.</dd> + <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt> + <dd>Translates an element horizontally.</dd> + <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt> + <dd>Translates an element vertically.</dd> + <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt> + <dd>Translates an element along the z-axis.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup><br> + 10.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>3D Support</td> + <td>12.0</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid(2.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11.5</td> + <td>3.2</td> + </tr> + <tr> + <td>3D Support</td> + <td>{{CompatAndroid(3.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 removed experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0. Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("<length>")}}s, in addition to the standard {{cssxref("<number>")}}.</p> + +<p>[2] Internet Explorer 5.5 and later support a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect. Internet Explorer 9.0 supports 2D but not 3D transforms. Thus, mixing 2D and 3D transform functions in this browser (e.g., <code>-ms-transform: rotate(10deg) translateZ(0);</code>) will invalidate the entire property.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS {{cssxref("transform")}} property</li> +</ul> diff --git a/files/pt-br/web/css/transform-function/matrix()/index.html b/files/pt-br/web/css/transform-function/matrix()/index.html new file mode 100644 index 0000000000..36c7796d1f --- /dev/null +++ b/files/pt-br/web/css/transform-function/matrix()/index.html @@ -0,0 +1,111 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +translation_of: Web/CSS/transform-function/matrix() +--- +<div>{{CSSRef}}</div> + +<p>A função CSS <code><strong>matrix()</strong></code> define uma matriz de transformação 2D homogênea. Isso resulta em um dado do tipo {{cssxref("<transform-function>")}} .</p> + +<div class="note"> +<p><strong>Note:</strong> <code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d</a>(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code>matrix()</code> function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.</p> + +<div class="note"><strong>Note:</strong> Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for <var>tx</var> and <var>ty</var>.</div> + +<pre class="syntaxbox">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>) +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><var>a</var> <var>b</var> <var>c</var> <var>d</var></dt> + <dd>Are {{cssxref("<number>")}}s describing the linear transformation.</dd> + <dt><var>tx</var> <var>ty</var></dt> + <dd>Are {{cssxref("<number>")}}s describing the translation to apply.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[a b c d tx ty]</code></td> + </tr> + </tbody> +</table> + +<p>The values represent the following functions:<br> + <code>matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )</code></p> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="changed">Changed</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.changed { + transform: matrix(1, 2, -1, 1, 80, 80); + background-color: pink; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", 350, 350)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> data type for compatibility info.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li> + <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li> +</ul> diff --git a/files/pt-br/web/css/transform-function/perspective()/index.html b/files/pt-br/web/css/transform-function/perspective()/index.html new file mode 100644 index 0000000000..9a16ed1cea --- /dev/null +++ b/files/pt-br/web/css/transform-function/perspective()/index.html @@ -0,0 +1,123 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/perspective() +--- +<div>{{CSSRef}}</div> + +<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>perspective()</code></strong> define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A distância de perspectiva usada por<code>perspective()</code> é especificada por um valor {{cssxref("<length>")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.</p> + +<pre class="syntaxbox notranslate">perspective(d) +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><em>d</em></dt> + <dd>É um {{cssxref("<length>")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogêneas em ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.</p> + </td> + <td colspan="1" rowspan="2">Essa não é uma transformação linear em ℝ<sup>3</sup>, e não pode ser representada usando uma matriz de coordenadas cartesianas.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Sem perspectiva:</p> +<div class="no-perspective-box"> + <div class="face front">A</div> + <div class="face top">B</div> + <div class="face left">C</div> +</div> + +<p>Com perspectiva (7.5cm):</p> +<div class="perspective-box"> + <div class="face front">A</div> + <div class="face top">B</div> + <div class="face left">C</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.face { + position: absolute; + width: 100px; + height: 100px; + line-height: 100px; + font-size: 100px; + text-align: center; +} + +.no-perspective-box { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transform: rotateX(-15deg) rotateY(15deg); + margin-left: 100px; +} + +.perspective-box { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg); + margin-left: 100px; +} + +.top { + background-color: skyblue; + transform: rotateX(90deg) translate3d(0, 0, 50px); +} + +.left { + background-color: pink; + transform: rotateY(-90deg) translate3d(0, 0, 50px); +} + +.front { + background-color: limegreen; + transform: translate3d(0, 0, 50px); +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Examples', '250', '350') }}</p> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<p>Veja o tipo de dado <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para informações de compatibilidade.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/pt-br/web/css/transform-function/rotate()/index.html b/files/pt-br/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..5f7b4270d0 --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate()/index.html @@ -0,0 +1,85 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +translation_of: Web/CSS/transform-function/rotate() +--- +<p>{{CSSRef}}</p> + +<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate()</code></strong> <span class="short_text" id="result_box" lang="pt"><span>define uma transformação que</span></span> gira um elemento <span class="short_text" id="result_box" lang="pt"><span>em torno de um ponto fixo no plano 2D</span></span>, <span class="short_text" id="result_box" lang="pt"><span>sem deformá-lo</span></span>. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.</p> + +<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p> + +<p><span class="short_text" id="result_box" lang="pt"><span>O eixo de rotação passa por uma origem,</span></span> definido pela propriedade CSS {{ cssxref("transform-origin") }}.</p> + +<h2 id="Sintaxe"><span class="short_text" id="result_box" lang="pt"><span>Sintaxe</span></span></h2> + +<p><span class="short_text" id="result_box" lang="pt"><span>A quantidade de rotação criada por </span></span><code>rotate()</code> <span class="short_text" id="result_box" lang="pt"><span>é especificado por um</span></span> {{cssxref("<angle>")}}. <span class="short_text" id="result_box" lang="pt"><span>Se positivo, o movimento será no sentido horário</span></span>; Se negativo, <span class="short_text" id="result_box" lang="pt"><span>ela será no sentido anti-horário. </span></span> <span id="result_box" lang="pt"><span>Uma rotação de 180° é chamada de </span></span><em>point reflection (</em><span lang="pt"><span>reflexão do ponto).</span></span></p> + +<pre class="syntaxbox notranslate">rotate(<em>a</em>) +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>a</code></dt> + <dd>É um {{ cssxref("<angle>") }} <span class="short_text" id="result_box" lang="pt"><span>representando o ângulo da rotação.</span></span> <span id="result_box" lang="pt"><span>Um ângulo positivo indica uma rotação no sentido horário, </span></span><span class="short_text" id="result_box" lang="pt"><span>um ângulo negativo no sentido anti-horário.</span></span></dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><span class="short_text" id="result_box" lang="pt"><span>Coordenadas cartesianas em</span></span> ℝ<sup>2</sup></th> + <th scope="col"><span class="short_text" id="result_box" lang="pt"><span>Coordenadas homogêneas em</span></span> ℝℙ<sup>2</sup></th> + <th scope="col"><span class="short_text" id="result_box" lang="pt"><span>Coordenadas cartesianas em</span></span> ℝ<sup>3</sup></th> + <th scope="col"><span class="short_text" id="result_box" lang="pt"><span>Coordenadas homogêneas em</span></span> ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td> + <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate(45deg); /* Equal to rotateZ(45deg) */ + background-color: pink; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples", "auto", 180)}}</p> + +<h2 id="Compatibilidade_do_navegador"><span class="short_text" id="result_box" lang="pt"><span>Compatibilidade do navegador</span></span></h2> + +<p>Por favor, veja o tipo de dados <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para informações de <span id="result_box" lang="pt"><span>compatibilidade</span></span>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li> +</ul> diff --git a/files/pt-br/web/css/transform-function/rotate3d()/index.html b/files/pt-br/web/css/transform-function/rotate3d()/index.html new file mode 100644 index 0000000000..b61d4e5b4b --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate3d()/index.html @@ -0,0 +1,127 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d() +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/rotate3d() +--- +<div>{{CSSRef}}</div> + +<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code></strong> define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.</p> + +<p>No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedade {{ cssxref("transform-origin") }}). Se, como especificado, o vetor não for <em>normalizado</em> (isto é, se a soma dos quadrados das suas três coordenadas não for 1), o {{glossary("user agent")}} irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.</p> + +<div class="note"><strong>Nota:</strong> Diferente de rotações no plano 2D, a composição de rotações 3D normalmente não é comutativa. Em outras palavras, a ordem na qual as rotações são aplicadas impacta o resultado.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A quantidade de rotação criada por <code>rotate3d()</code> é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <code><number></code> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <code><angle></code> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.</p> + +<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>x</code></dt> + <dd>É um {{cssxref("<number>")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.</dd> + <dt><code>y</code></dt> + <dd>É um {{cssxref("<number>")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.</dd> + <dt><code>z</code></dt> + <dd>É um {{cssxref("<number>")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.</dd> + <dt><code>a</code></dt> + <dd>É um {{ cssxref("<angle>") }} representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.</dd> +</dl> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th> + <td rowspan="2">Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.</td> + </tr> + <tr> + <th scope="col">Coordenadas homogêneas em ℝℙ<sup>2</sup></th> + </tr> + <tr> + <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th> + <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> + </tr> + <tr> + <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th> + <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> + </tr> + </tbody> +</table> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Rotacionando_no_eixo_y">Rotacionando no eixo y</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotacionado</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(0, 1, 0, 60deg); + background-color: pink; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}</p> + +<h3 id="Rotacionando_em_um_eixo_customizado">Rotacionando em um eixo customizado</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotacionado</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(1, 2, -1, 192deg); + background-color: pink; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}</p> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<p>Veja o tipo de dado <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para informações de compatibilidade.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/pt-br/web/css/transform-function/scale()/index.html b/files/pt-br/web/css/transform-function/scale()/index.html new file mode 100644 index 0000000000..c874f81954 --- /dev/null +++ b/files/pt-br/web/css/transform-function/scale()/index.html @@ -0,0 +1,125 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale() +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/scale() +--- +<div>{{CSSRef}}</div> + +<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>scale()</code></strong> define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.</p> + +<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p> + +<p>Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (<em>isotrópico</em>) e a proporção do elemento é preservada (isto é uma <a href="https://en.wikipedia.org/wiki/Homothetic_transformation">transformação homotética</a>).</p> + +<p>Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um<a href="https://en.wikipedia.org/wiki/Point_reflection"> ponto de reflexão</a> naquela dimensão. O valor 1 não tem efeito.</p> + +<div class="note"><strong>Nota:</strong> A função <code>scale()</code> apenas redimensiona em 2D Para redimensionar em 3D, use <code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> ao invés.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A função <code>scale()</code> é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.</p> + +<pre class="syntaxbox">scale(<em>sx</em>) + +scale(<em>sx</em>, <em>sy</em>) +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>sx</code></dt> + <dd>Um {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.</dd> + <dt><code>sy</code></dt> + <dd>Um {{cssxref("<number>")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão é<code>sx</code>, resultando em um redimensionamento uniforme que preserva a proporção do elemento.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogêneas em ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[sx 0 0 sy 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Redimensionando_as_dimensões_X_e_Y_juntas">Redimensionando as dimensões X e Y juntas</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div>Normal</div> +<div class="scaled">Redimensionado</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ + background-color: pink; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}</p> + +<h3 id="Redimensionando_dimensões_X_e_Y_separadamente_e_transladando_a_origem">Redimensionando dimensões X e Y separadamente e transladando a origem</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div>Normal</div> +<div class="scaled">Redimensionado</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(2, 0.5); /* Igual a scaleX(2) scaleY(0.5) */ + transform-origin: left; + background-color: pink; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<p>Veja o dado do tipo <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para informações de compatibilidade.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></li> +</ul> diff --git a/files/pt-br/web/css/transform-function/translate()/index.html b/files/pt-br/web/css/transform-function/translate()/index.html new file mode 100644 index 0000000000..395dd0e784 --- /dev/null +++ b/files/pt-br/web/css/transform-function/translate()/index.html @@ -0,0 +1,152 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate() +tags: + - CSS + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/translate() +--- +<div>{{CSSRef}}</div> + +<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>translate()</code></strong> reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("<transform-function>")}}.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p> + +<p>Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: css notranslate">/* Valores <length-percentage> únicos */ +transform: translate(200px); +transform: translate(50%); + +/* Valores <length-percentage> duplos */ +transform: translate(100px, 200px); +transform: translate(100px, 50%); +transform: translate(30%, 200px); +transform: translate(30%, 50%); +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>Valores <code><length-percentage></code> únicos</dt> + <dd>Este valor é um {{cssxref("length")}} ou {{cssxref("percentage")}} representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como <code>0</code>. Por exemplo, <code>translate(2)</code> é equivalente a <code>translate(2, 0)</code>. Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.</dd> + <dt>Valores <code><length-percentage></code> duplos</dt> + <dd>Este valor descreve dois {{cssxref("length")}} ou valores {{cssxref("percentage")}} representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade {{cssxref("transform-box")}}.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogêneas emℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>Uma translação não é uma transformação linear em ℝ<sup>2</sup> e não pode ser representada usando uma matriz de coordenadas cartesianas.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 tx ty]</code></td> + </tr> + </tbody> +</table> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox notranslate">translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}<a href="/en-US/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>) +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_uma_conversão_de_eixo_único">Usando uma conversão de eixo único</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Estático</div> +<div class="moved">Movido</div> +<div>Estático</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* Igual a: translateX(10px) ou translate(10px, 0) */ + background-color: pink; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p> + +<h3 id="Combinando_a_translação_do_eixo_y_e_do_eixo_x">Combinando a translação do eixo y e do eixo x</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Estático</div> +<div class="moved">Movido</div> +<div>Estático</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<p>Verifique o tipo de dado <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para informações de compatibilidade.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/pt-br/web/css/transform-style/index.html b/files/pt-br/web/css/transform-style/index.html new file mode 100644 index 0000000000..9146c13f3a --- /dev/null +++ b/files/pt-br/web/css/transform-style/index.html @@ -0,0 +1,74 @@ +--- +title: transform-style +slug: Web/CSS/transform-style +translation_of: Web/CSS/transform-style +--- +<p><span class="seoSummary">A propriedade <strong><code>transform-style</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> define se os elemento filhos são posicionados em um espaco 3D ou serão achatados ( flattened ) no plano do elemento </span></p> + +<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div> + + + +<p>Se achatados, os elementos filho não existirão por conta própria ou sozinhos no espaço 3D. </p> + +<p>Como essa propriedade não é herdada, ela deve ser definida para todos os descendentes que não sejam folhas do elemento.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +transform-style: flat; +transform-style: preserve-3d; + +/* Valores globais */ +transform-style: inherit; +transform-style: initial; +transform-style: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>flat</code></dt> + <dd>Indica que os filhos do elemento estão no plano do próprio elemento.</dd> + <dt><code>preserve-3d</code></dt> + <dd>Indica que os filhos do elemento devem ser posicionados no espaço 3D.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("css.properties.transform-style")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms">Using CSS transforms</a></li> +</ul> + +<div>{{CSSRef}}</div> diff --git a/files/pt-br/web/css/transform/index.html b/files/pt-br/web/css/transform/index.html new file mode 100644 index 0000000000..423a21045c --- /dev/null +++ b/files/pt-br/web/css/transform/index.html @@ -0,0 +1,283 @@ +--- +title: transform +slug: Web/CSS/transform +translation_of: Web/CSS/transform +--- +<p>{{ CSSRef() }}{{ SeeCompatTable() }}</p> + +<h2 id="Resumo">Resumo</h2> + +<p>A Propriedade CSS <code style="color: rgb(51, 51, 51); font-size: 14px; line-height: 21px;">transform</code><span style="line-height: 21px;"> permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.</span></p> + +<p><span style="line-height: 21px;">Se a propriedade tem um valor diferente de </span><span style="font-family: monospace; line-height: 21px;">none, </span><span style="line-height: 21px;">um contexto de empilhamento será criado. Neste caso, o objeto atuará como um bloco recipiente para </span><span style="font-family: monospace; line-height: 21px;">position: fixed</span><span style="line-height: 21px;"> para os elementos que estão contidos.</span></p> + +<p><span style="line-height: 21px;">{{cssinfo}}</span></p> + +<h2 id="Sintaxe" style="padding: 0px;">Sintaxe</h2> + +<pre class="twopartsyntaxbox">Gramática Formal: <transform-função> [<transform-função>]* | none +</pre> + +<pre>transform: none +transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) +transform: translate(12px, 50%) +transform: translateX(2em) +transform: translateY(3in) +transform: scale(2, 0.5) +transform: scaleX(2) +transform: scaleY(0.5) +transform: rotate(0.5turn) +transform: skewX(30deg) +transform: skewY(1.07rad) +transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) +transform: translate3d(12px, 50%, 3em) +transform: translateZ(2px) +transform: scale3d(2.5, 1.2, 0.3) +transform: scaleZ(0.3) +transform: rotate3d(1, 2.0, 3.0, 10deg) +transform: rotateX(10deg) +transform: rotateY(10deg) +transform: rotateZ(10deg) +transform: perspective(17px) + +transform: translateX(10px) rotate(10deg) translateY(5px) +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><transform-função></code></dt> + <dd>Uma ou mais das {{ anch("funções CSS transform") }} para serem aplicadas, veja abaixo.</dd> + <dt><code>none</code></dt> + <dd>Espcifica que nenhuma função transform deve ser aplicada.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja <a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a>.</p> + +<h3 id="Exemplo_ao_vivo">Exemplo ao vivo:</h3> + +<pre style="">pre { + width: 33em; + border: solid red; + + -webkit-transform: translate(100px) rotate(20deg); + -webkit-transform-origin: 60% 100%; + + -o-transform:translate(100px) rotate(20deg); + -o-transform-origin:60% 100%; + + transform: translate(100px) rotate(20deg); + transform-origin: 60% 100%; +} +</pre> + +<h2 id="CSS_transform_functions">CSS transform functions</h2> + +<p>The <code>transform</code> CSS property allows the coordinate system used by an element to be manipulated using <strong>transform functions</strong>. These functions are described below.</p> + +<h3 id="matrix">matrix</h3> + +<pre>transform: matrix(a, c, b, d, tx, ty) + +/* Where a, b, c, d build the transformation matrix + ┌ ┐ + │ a b │ + │ c d │ + └ ┘ + and tx, ty are the translate values. */ +</pre> + +<p>Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation <strong>matrix [a b c d tx ty]</strong>.</p> + +<div class="note"><strong>Note:</strong> Gecko (Firefox) accepts a {{cssxref("<length>")}} value for <strong>tx</strong> and <strong>ty</strong>. Webkit (Safari, Chrome) and Opera currently support a unitless {{cssxref("<number>")}} for <strong>tx</strong> and <strong>ty</strong>.</div> + +<h4 id="Live_examples">Live examples</h4> + +<pre style=""> background: gold; width: 30em; + + -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); + -o-transform: matrix(1, -0.2, 0, 1, 0, 0); + transform: matrix(1, -0.2, 0, 1, 0, 0); +</pre> + +<pre style=""> background: wheat; + max-width: intrinsic; + + -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); + -o-transform: matrix(1, 0, 0.6, 1, 250, 0); + transform: matrix(1, 0, 0.6, 1, 250, 0); +</pre> + +<h4 id="See_also"><br> + See also</h4> + +<ul> + <li><a class="external" href="http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices">Examples of linear transformation matrices</a> Wikipedia</li> + <li><a class="external" href="http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html">Coordinate transformation matrices</a> mathamazement.com</li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Microsoft's matrix filter</a> MSDN</li> +</ul> + +<h3 id="rotate">rotate</h3> + +<pre class="eval">transform: rotate(angle); /* an <angle>, e.g. rotate(30deg) */</pre> + +<p>Rotates the element clockwise around its origin (as specified by the {{ Cssxref("transform-origin") }} property) by the specified <code>angle</code>. The operation corresponds to the matrix <strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</strong>.</p> + +<h3 id="scale">scale</h3> + +<pre class="eval">transform: scale(sx[, sy]); /* one or two unitless <number>s, e.g. scale(2.1,4) */</pre> + +<p>Specifies a 2D scaling operation described by <strong>[sx, sy]</strong>. If <code>sy</code> isn't specified, it is assumed to be equal to <code>sx</code>.</p> + +<h3 id="scaleX">scaleX</h3> + +<pre class="eval">transform: scaleX(sx); /* a unitless <number>, e.g. scaleX(2.7) */</pre> + +<p>Specifies a scale operation using the vector <strong>[sx, 1]</strong>.</p> + +<h3 id="scaleY">scaleY</h3> + +<pre class="eval">transform: scaleY(sy) /* a unitless <number>, e.g. scaleY(0.3) */</pre> + +<p>Specifies a scale operation using the vector <strong>[1, sy]</strong>.</p> + +<h3 id="skew">skew</h3> + +<p>{{ non-standard_header() }}</p> + +<pre class="eval">transform: skew(ax[, ay]) /* one or two <angle>s, e.g. skew(30deg,-10deg) */</pre> + +<p>Skews the element around the X and Y axes by the specified angles. If <code>ay</code> isn't provided, no skew is performed on the Y axis.</p> + +<div class="note"><strong>Note:</strong> The <code>skew()</code> function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.<br> +<br> +To achieve the same effect, use <code>skewX()</code> if you were using <code>skew()</code> with one parameter or <code>matrix(1, <em>tan(</em>ax<em>)</em></code><em>, </em><code><em>tan(</em>ay<em>)</em>, 1, 0, 0)</code> for the general way. Note that <em>tan()</em> isn't a CSS function and you have to precalculate it yourself.</div> + +<h3 id="skewX">skewX</h3> + +<pre class="eval">transform: skewX(angle) /* an <angle>, e.g. skewX(-30deg) */</pre> + +<p>Skews the element around the X axis by the given <code>angle</code>.</p> + +<h3 id="skewY">skewY</h3> + +<pre class="eval">transform: skewY(angle) /* an <angle>, e.g. skewY(4deg) */</pre> + +<p>Skews the element around the Y axis by the given <code>angle</code>.</p> + +<h3 id="translate">translate</h3> + +<pre class="eval">transform: translate(tx[, ty]) /* one or two <length> values */</pre> + +<p>Specifies a 2D translation by the vector <strong>[tx, ty]</strong>. If <code>ty</code> isn't specified, its value is assumed to be zero.</p> + +<h3 id="translateX">translateX</h3> + +<pre class="eval">transform: translateX(tx) /* see <length> for possible values */</pre> + +<p>Translates the element by the given amount along the X axis.</p> + +<h3 id="translateY">translateY</h3> + +<pre class="eval">transform: translateY(ty) /* see <length> for possible values */</pre> + +<p>Translates the element by the given amount along the Y axis.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transforms', '#transform', 'transform') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>9.0 {{ property_prefix("-ms") }}<br> + 10.0</td> + <td>10.5{{ property_prefix("-o") }}<br> + 12.5</td> + <td>3.1{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>3D Support</td> + <td>12.0{{ property_prefix("-webkit") }}</td> + <td>10.0{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10.0</td> + <td>{{ CompatNo() }}</td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notes">Notes</h3> + +<p>Internet Explorer 5.5 or later supports a proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve the similar effect.</p> + +<p>Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reason. As it is non-standard and will likely be removed in the future, do not use it.</p> + +<h2 id="See_also_2">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li> + <li><a class="external" href="http://paulirish.com/2010/introducing-css3please/#comment-36380">More info</a> on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.</li> + <li>A cross-browser 2D <a class="external" href="http://plugins.jquery.com/project/jquery-transform">transform plugin for jQuery</a></li> +</ul> diff --git a/files/pt-br/web/css/transition-delay/index.html b/files/pt-br/web/css/transition-delay/index.html new file mode 100644 index 0000000000..0257ba610b --- /dev/null +++ b/files/pt-br/web/css/transition-delay/index.html @@ -0,0 +1,357 @@ +--- +title: transition-delay +slug: Web/CSS/transition-delay +tags: + - CSS + - Proriedade CSS + - Referencia + - Transições CSS + - transition-delay +translation_of: Web/CSS/transition-delay +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>transition-delay</code></strong> (atraso de transição) determina o tempo de duração da espera antes de iniciar um efeito de transição(<a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">transition effect</a>) quando seu valor muda.</p> + +<div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div> + + + +<p>Essa espera, ou atraso de transição, pode ser zero, positiva ou negativa:</p> + +<ul> + <li>Um valor de <code>0s</code>(ou <code>0ms</code>) iniciará o efeito de transição imediatamente.</li> + <li>Um valor positivo atrasará o inicio do efeito de transição de acordo com o tempo estabelecido.</li> + <li>Um valor negativo iniciará o efeito de transição imediatamente e parcialmente durante o efeito. Em outras palavras, o efeito será animado como se já tivesse sido executado pelo tempo estipulado.</li> +</ul> + +<p>Você pode especificar vários atrasos, o que é útil quando é necessário realizar a transição de várias propriedades. Cada atraso pode ser aplicado à propriedade correspondente como especificado pela propriedade de transição({{cssxref("transition-property")}}), que atua como uma lista mestre. Se existem menos atrasos do que o determinado pela lista mestre, a lista de valores de atraso será repetida até que seja suficiente. Se existem mais atrasos, a lista de valores de atraso será trucanda(limitada) ao combinar o número de propriedades. Em ambos os casos, a declaração CSS permacene válida.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Valores de Tempo <time> */ +transition-delay: 3s; +transition-delay: 2s, 4ms; + +/* Valores Globais */ +transition-delay: inherit; +transition-delay: initial; +transition-delay: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<time>")}}</dt> + <dd>Indica a quantidade de tempo de espera entre um valor de propriedade e o inicio do efeito de transição(<a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">transition effect</a>).</dd> +</dl> + +<h3 id="Sintaxe_Formal">Sintaxe Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<div> +<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 0.5s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> +</div> + +<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 1s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_1s",275,150)}}</div> +</div> + +<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 2s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_2s",275,150)}}</div> +</div> + +<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 4s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_4s",275,150)}}</div> +</div> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + + + +<p>{{Compat("css.properties.transition-delay")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Usando Transições CSS</a></li> + <li>{{domxref("TransitionEvent")}} API</li> +</ul> diff --git a/files/pt-br/web/css/transition-timing-function/index.html b/files/pt-br/web/css/transition-timing-function/index.html new file mode 100644 index 0000000000..f352392102 --- /dev/null +++ b/files/pt-br/web/css/transition-timing-function/index.html @@ -0,0 +1,666 @@ +--- +title: transition-timing-function +slug: Web/CSS/transition-timing-function +translation_of: Web/CSS/transition-timing-function +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>transition-timing-function</code></strong> é usada para descrever como os valores intermediários das propriedades CSS sendo afetados por um efeito de transição são calculados. Em essência isso permite você estabelecer uma curva de aceleração, para que então a velocidade da transição possa variar durante sua duração.</p> + +<p>Essa curva de aceleração é definida usando {{cssxref("<timing-function>")}} para cada propriedade a ser transicionada.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +transition-timing-function: ease; +transition-timing-function: ease-in; +transition-timing-function: ease-out; +transition-timing-function: ease-in-out; +transition-timing-function: linear; +transition-timing-function: step-start; +transition-timing-function: step-end; + +/* Function values */ +transition-timing-function: steps(4, end); +transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); +transition-timing-function: frames(10); + +/* Multiple timing functions */ +transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); + +/* Global values */ +transition-timing-function: inherit; +transition-timing-function: initial; +transition-timing-function: unset; +</pre> + +<p>You may specify multiple timing functions; each one will be applied to the corresponding property as specified by the {{ cssxref("transition-property") }} property, which acts as a master list. If there are fewer functions specified than in the master list, missing values are set to the initial value (<code>ease</code>). If there are more timing functions, the list is simply truncated to the right size. In both case the CSS declaration stays valid.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><timing-function></code></dt> + <dd>Each {{cssxref("<timing-function>")}} represents the timing function to link to the corresponding property to transition, as defined in {{ cssxref("transition-property") }}.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<div> +<div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: ease</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_ease",275,150)}}</div> +</div> + +<div id="ttf_easein" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: ease-in</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-in; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-in; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_easein",275,150)}}</div> +</div> + +<div id="ttf_easeout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: ease-out</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_easeout",275,150)}}</div> +</div> + +<div id="ttf_easeinout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: ease-in-out</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-in-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_easeinout",275,150)}}</div> +</div> +</div> + +<div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: linear</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_linear",275,150)}}</div> +</div> + +<div id="ttf_stepstart" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: step-start</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-start; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-start; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-start; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-start; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_stepstart",275,150)}}</div> +</div> + +<div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: step-end</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-end; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-end; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div> +</div> + +<div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: steps(4, end)</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: steps(4, end); +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: steps(4, end); +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>26</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}<sup>[1]</sup></td> + <td>10</td> + <td>11.6{{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td><code>frames()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("55.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}<sup>[1]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td><code>frames()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("55.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li> + <li>{{ domxref("TransitionEvent") }}</li> +</ul> diff --git a/files/pt-br/web/css/transition/index.html b/files/pt-br/web/css/transition/index.html new file mode 100644 index 0000000000..e5e798dda0 --- /dev/null +++ b/files/pt-br/web/css/transition/index.html @@ -0,0 +1,130 @@ +--- +title: transition +slug: Web/CSS/transition +translation_of: Web/CSS/transition +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Summary">Summary</h2> + +<p>A propriedade de <a href="/en/CSS" title="CSS">CSS </a><strong>transition</strong> é uma <a href="/en-US/docs/Web/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">propriedade abreviada</a> para {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} e {{ cssxref("transition-delay") }}. Ela permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usando <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-classes</a> tais como {{cssxref(":hover")}} ou {{cssxref(":active")}}; ou dinamicamente, usando javascript.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Apply to 1 property */ +/* property name | duration */ +transition: margin-left 4s; + +/* property name | duration | delay */ +transition: margin-left 4s 1s; + +/* property name | duration | timing function | delay */ +transition: margin-left 4s ease-in-out 1s; + +/* Apply to 2 properties */ +transition: margin-left 4s, color 1s; + +/* Apply to all changed properties */ +transition: all 0.5s ease-out; + +/* Global values */ +transition: inherit; +transition: initial; +transition: unset; +</pre> + +<p>Observe que a ordem é importante dentro dos itens nesta propriedade: o primeiro valor que pode ser analisado como tempo é atribuído ao {{cssxref("transition-duration")}}, duration e o segundo valor que pode ser analisado como tempo é atribuído ao {{cssxref("transition-delay")}}.</p> + +<p>Veja <a href="/pt-BR/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Quando_os_tamanhos_dos_valores_das_listas_das_propriedades_s%C3%A3o_de_tamanhos_diferentes">como as coisas são manipuladas</a> quando as listas de valores de propriedades não têm o mesmo comprimento. Em resumo, descrições de transição extras além do número de propriedades realmente sendo animadas são ignoradas.</p> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>Existem vários outros exemplos de transições CSS incluídas no artigo principal sobre <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{ property_prefix("-webkit") }}<br> + 26.0</td> + <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10.0</td> + <td>11.6 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.0 {{ property_prefix("-webkit") }}<br> + 6.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>10.0 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.2 {{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li> + <li>{{ domxref("TransitionEvent") }}</li> +</ul> diff --git a/files/pt-br/web/css/type_selectors/index.html b/files/pt-br/web/css/type_selectors/index.html new file mode 100644 index 0000000000..c3da8c2053 --- /dev/null +++ b/files/pt-br/web/css/type_selectors/index.html @@ -0,0 +1,78 @@ +--- +title: Type selectors +slug: Web/CSS/Type_selectors +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef}}</div> + +<p>O <strong>seletor de tipo</strong> CSS corresponde aos elementos pelo nome do nó. Em outras palavras, ele seleciona todos os elementos do tipo fornecido em um documento.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Todos os elementos <a> */ +a { + color: red; +}</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">element { <em>style properties</em> } +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">span { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><span>Here's a span with some text.</span> +<p>Here's a p with some text.</p> +<span>Here's a span with more text.</span> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples', '100%', 150)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sem mudanças</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Sem mudanças</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + + + +<p>{{Compat("css.selectors.type")}}</p> diff --git a/files/pt-br/web/css/using_css_custom_properties/index.html b/files/pt-br/web/css/using_css_custom_properties/index.html new file mode 100644 index 0000000000..ac311cec06 --- /dev/null +++ b/files/pt-br/web/css/using_css_custom_properties/index.html @@ -0,0 +1,346 @@ +--- +title: Utilizando variáveis CSS +slug: Web/CSS/Using_CSS_custom_properties +translation_of: Web/CSS/Using_CSS_custom_properties +--- +<div>{{cssref}}</div> + +<p><strong>Variáveis CSS</strong> são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo do documento. São configuradas usando esta notação (ex: <strong><code>--cor-principal: black;</code></strong> ) e são acessadas usando a funcão {{cssxref("var", "var()")}} (ex: <code>color: <strong>var(--cor-principal)</strong>;</code> )</p> + +<p>Websites complexos tem uma quantidade muito grande de CSS, com uma quantidade de repetição de valores muito frequente. Por exemplo, a mesma cor pode ser usada em centenas de lugares diferentes, requerindo uma pesquisa global e substituição caso esta cor necessite ser trocada. Variáveis CSS permite um valor ser guardado em um lugar, então ser referenciado em muitos outros lugares. Um benefício adicional é a semântica dos identificadores. Por exemplo <code>--cor-principal-texto</code> é mais facil de ser entendido do que <code>#00ff00</code>, especialmente se esta cor também é usada em outro contexto.</p> + +<p>Variáveis CSS estão sujeitas ao efeito cascata do css e herdam seus valores de seus pais.</p> + +<h2 id="Uso_básico">Uso básico</h2> + +<p>Declaração de variável:</p> + +<pre class="brush: css notranslate">elemento { + --cor-bg-principal: brown; +} +</pre> + +<p>Utilizando a variável:</p> + +<pre class="brush:css; highlight:[2] notranslate">elemento { + background-color: var(--cor-bg-principal); +} +</pre> + +<h2 id="Primeiros_Passos_com_Variáveis_CSS">Primeiros Passos com Variáveis CSS</h2> + +<p>Vamos começar com este simples CSS que colore elementos de diferentes classes com a mesma cor:</p> + +<pre class="brush:css; highlight:[3,20,26,32] line-numbers notranslate">.um { + color: white; + background-color: brown; + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.dois { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.tres { + color: white; + background-color: brown; + margin: 10px; + width: 75px; +} +.quatro { + color: white; + background-color: brown; + margin: 10px; + width: 100px; +} + +.cinco { + background-color: brown; +}</pre> + +<p>Nos aplicaremos isto ao HTML:</p> + +<pre class="brush:html line-numbers notranslate"><div> + <div class="one">1:</div> + <div class="two">2: Text <span class="five">5 - more text</span></div> + <input class="three"> + <textarea class="four">4: Lorem Ipsum</textarea> +</div></pre> + +<p>Que nos leva a isto:</p> + +<p>{{EmbedLiveSample("sample1",600,180)}}</p> + +<p>Note a repetição no CSS. O <em>bacgkround-color</em> (cor de fundo) foi definida como <code>brown</code> em diversos lugares. Para algumas declarações CSS, é possível declarar isso no topo e deixar a herança CSS resolver esse problema naturalmente. Para projetos não triviais, isto nem sempre é possível. Ao declarar uma variável na pseudo-classe :root, um desenvolvedor pode interromper algumas das repetições usando variavel.</p> + +<pre class="brush:css; highlight:[2, 7, 24,30,36] line-numbers notranslate"><code class="">:root { + --main-bg-color: brown; +} + +.um { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.dois { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.tres { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 75px; +} +.quatro { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 100px; +} + +.cinco { + background-color: var(--main-bg-color); +}</code></pre> + +<p>Isso leva ao mesmo resultado do exemplo anterior e permite uma declaração canônica da propriedade desejada.</p> + +<h2 id="Herançamento_de_Variáveis_CSS">Herançamento de Variáveis CSS</h2> + +<p>Propriedades personalizadas herdam. O que significa que, se algum valor for definido para uma propriedade customizada, o valor de seu pai será usado:</p> + +<pre class="brush: html line-numbers notranslate"><code class=""><div class="one"> + <div class="two"> + <div class="three"></div> + <div class="four"></div> + </div> +</div></code></pre> + +<pre class="brush: css line-numbers notranslate"><code class="">.two { + --test: 10px; +} + +.three { + --test: 2em; +}</code></pre> + +<p>Neste caso, o resultado de <code>var(--test)</code> são:</p> + +<ul> + <li>Para <code>class="two"</code> <code>10px</code></li> + <li>Para <code>class="three"</code> <code>2em</code></li> + <li>Para <code>class="four"</code> <code>10px</code> (herdado de seu pai)</li> + <li>Para <code>class="one"</code> <em>invalid value </em>(valor invalido), que é o valor padrão de qualquer propriedade customizada.</li> +</ul> + +<p>Tenha em mente que estas são propriedades customizadas, não são variáveis CSS reais. O valor é computado onde é necessário, não guardado para usar em outras regras. Por exemplo, você não pode definir uma propriedade á um elemento e esperar recuperar na regra de um <em>irmão descendente</em>. A propriedade é definida somente para o seletor correspondente e seus descendentes, como qualquer CSS normal.</p> + +<h2 id="Valores_de_Fallback_da_propriedade_customizada">Valores de Fallback da propriedade customizada</h2> + +<p>Usando {{cssxref("var", "var()")}} você pode definir multiplos valores de fallback (quando um falha) quando a variável dada não foi definida ainda, isto pode ser útil quando trabalhar com elementos customizados e Shadow DOM.</p> + +<p>O primeiro argumento para a função é o nome da propriedade customizada para ser subistituida.</p> + +<h2 id="Problemas_a_serem_resolvidos">Problemas a serem resolvidos</h2> + +<p>Ao construir sites de grande porte, geralmente os autores têm problemas relacionados à manutenção do CSS. Nestes sites o tamanho do CSS costuma ser consideravel e muitas informações podem ser repetidas em vários lugares. Por exemplo, manter um esquema de cor coerente em um documento requer a reutilização de algumas cores em inúmeras posições nos arquivos CSS. Destas forma modificar o esquema de cores se torna uma tarefa complexa pois nem sempre um simples "Buscar e substituir" é o suficiente.</p> + +<p>A situação se agrava com <a href="http://pt.wikipedia.org/wiki/Frameworks_CSS">Frameworks CSS</a>, onde uma pequena mudança de cores requer a edição do framework em si. Pré-processadores como LESS e SASS são muito úteis nestas situações, mas podem aumentar a complexidade do projeto, pois adiciona um passo extra de processamento. Variáveis CSS ajudam ao agregar alguns benefícios de um pré-processador, sem a necessidade de compilação.</p> + +<p>Uma segunda vantagem destas variáveis é a informação semântica que elas carregam em seu nome. Os arquivos CSS se tornam mais fáceis de serem lidos e compreendidos: <code>cor-principal-texto</code> é de mais fácil entendimento e re-uso que #00ff00, especialmente se a mesma cor for usada em outro contexto.</p> + +<h2 id="Como_Variáveis_CSS_podem_ajudar">Como Variáveis CSS podem ajudar</h2> + +<p>Em linguagens de programação imperativas, como Java, C++ ou mesmo JavaScript, o estado pode ser [do programa] rastreado através da noção de variáveis. Variáveis são nomes simbólicos que guardam um valor atribuído que pode variar com o tempo.</p> + +<p>Em linguagens declarativas como CSS, valores que mudam com o tempo não são comuns e o conceito de variáveis também.</p> + +<p>Porém, o CSS introduz a noção de "variáveis em cascata" para ajudar a solucionar o desafio da manutenção do código. Isto permite a referência simbólica a um valor em toda a árvore do CSS.</p> + +<h2 id="O_que_são_Variáveis_CSS">O que são Variáveis CSS</h2> + +<p>Variáveis CSS atualmente têm duas formas:</p> + +<ul> + <li>variáveis, que são uma associação entre um indentificador e um valor que pode ser usado em substituição a valores comuns, usando a notação funcional <code>var(): var(--variavel-exemplo) </code>retorna o valor de <code>--variavel-exemplo</code>.</li> + <li>propriedades customizadas, que são propriedades especiais na forma de <code>--* </code>onde * representa o nome da variável. Estas variáveis são usadas para definir os valores de uma certa variável: <code>--variavel-exemplo: 20px;</code> é uma declaração CSS, usando a propriedade customizada <code>--*</code> para definir o valor da variável CSS <code>--variavel-exemplo</code> para <code>20px</code>.</li> +</ul> + +<div class="note"><strong>Nota:</strong> O prefixo de propriedade customizada era <code>var-</code> na especificação anterior, porém mudou posteriormente para <code>--</code>. O Firefox 31 e superior seguem a nova especificação. ({{ bug(985838) }})</div> + +<p>Propriedades customizadas são similares a propriedades comuns: elas estão sujeitas ao "efeito cascata" e herdam seu valor da propriedade pai se não forem redefinidas.</p> + +<h2 id="Primeiros_passos_com_Variáveis_CSS">Primeiros passos com Variáveis CSS</h2> + +<p>Vamos começar com este simples CSS que colore elementos de diferentes classes com a mesma cor:</p> + +<div id="sample1"> +<pre class="brush:css; highlight:[3,20,26,32] notranslate">.one { + color: white; + background-color: brown; + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.two { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.three { + color: white; + background-color: brown; + margin: 10px; + width: 75px; +} +.four { + color: white; + background-color: brown; + margin: 10px; + width: 100px; +} + +.five { + background-color: brown; +} + +</pre> + +<p>Aplicaremos neste HTML:</p> + +<pre class="brush:html notranslate"><div> + <div class="one"></div> + <div class="two">Texto <span class="five">- mais texto</span></div> + <input class="three"> + <textarea class="four">Lorem Ipsum</textarea> +</div> +</pre> + +<p>que resultará em:</p> + +<p>{{EmbedLiveSample("sample1",600,180)}}</p> +</div> + +<p>Perceba a repetição no CSS. A cor do background foi definida como marrom em diversos lugares. Para algumas declarações CSS é possível declarar isto em um elemento superior na cascata e deixar a propriedade ser herdada para resolver o problema. Porém em alguns projetos, isto nem sempre é possível. Ao declarar uma variável na pseudo-classe :root, o autor do CSS pode eliminar algumas repetições utilizando uma variável.</p> + +<div id="sample2"> +<pre class="brush:css; highlight:[2, 7, 24,30,36] notranslate">:root { + --main-bg-color: brown; +} + +.one { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.two { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.three { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 75px; +} +.four { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 100px; +} + +.five { + background-color: var(--main-bg-color); +} + +</pre> + +<div style="display: none;"> +<pre class="brush:html notranslate"><div> + <div class="one"></div> + <div class="two">Text <span class="five">- more text</span></div> + <input class="three"> + <textarea class="four">Lorem Ipsum</textarea> +</div> +</pre> +</div> + +<p>Isto leva ao mesmo resultado dos exemplos anteriores e ainda permite a declaração da propriedade em um só lugar.</p> + +<h2 id="Hierarquia_das_Variáveis_CSS">Hierarquia das Variáveis CSS</h2> + +<p>Propriedades customizadas herdam os valores. Isto significa que, se nenhum valor for declarado para uma propriedade customizada em um dado elemento, o valor do elemento pai é usado:</p> + +<pre class="brush: html notranslate"><div class="one"> + <div class="two"> + <div class="three"> + </div> + <div class="four"> + </div> + <div> +</div></pre> +</div> + +<p>com o seguinte CSS:</p> + +<pre class="brush: css notranslate">.two { --test: 10px; } +.three { --test: 2em; } +</pre> + +<p>Neste caso o valor de <code>var(--test)</code> são:</p> + +<ul> + <li>para o elemento <code>class="two"</code>: <code>10px</code></li> + <li>para o elemento <code>class="three"</code>: <code>2em</code></li> + <li>para o elemento <code>class="four"</code>: <code>10px</code> (herdado do elemento pai)</li> + <li>para o elemento <code>class="one"</code>: <em>valor inválido</em>, que é o valor padrão de qualquer propriedade customizada.</li> +</ul> + +<h2 id="Validade_e_valores">Validade e valores</h2> + +<p>O conceito clássico de validade, ligado a cada propriedade, não é muito útil em relação a propriedades customizadas. Quando os valores das propriedades customizadas são analizados, o <em>browser </em>não sabe onde a mesma será usada, logo, deve considerar quase todos os valores como <em>válidos</em>.</p> + +<p>Infelizmente estes valores podem ser usados, via a notação funcional <code>var(),</code> em um contexto em que não façam sentido. Propriedades e variáveis customizadas podem levar a declações CSS inválidas, criando um novo conceito de <em>válido no momento da computação</em>.<em> </em></p> + +<h2 id="Compatibilidade_com_browsers">Compatibilidade com browsers</h2> + +<p>{{Compat("css.properties.custom-property")}}</p> + +<div class="note"> +<p><strong>Note:</strong> The custom property prefix was <code>var-</code> in the earlier spec, but later changed to <code>--</code>. Firefox 31 and above follow the new spec. ({{bug(985838)}})</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("--*", "Custom properties")}}</li> +</ul> diff --git a/files/pt-br/web/css/valor_atual/index.html b/files/pt-br/web/css/valor_atual/index.html new file mode 100644 index 0000000000..b7f9307a58 --- /dev/null +++ b/files/pt-br/web/css/valor_atual/index.html @@ -0,0 +1,34 @@ +--- +title: Valor atual +slug: Web/CSS/Valor_atual +translation_of: Web/CSS/actual_value +--- +<div>{{CSSRef}}</div> + +<p>The <strong>actual value</strong> of a CSS property is the <a href="/en-US/docs/Web/CSS/used_value">used value</a> of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/pt-br/web/css/valor_computado/index.html b/files/pt-br/web/css/valor_computado/index.html new file mode 100644 index 0000000000..a4932b8d40 --- /dev/null +++ b/files/pt-br/web/css/valor_computado/index.html @@ -0,0 +1,56 @@ +--- +title: Valor Computado +slug: Web/CSS/valor_computado +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/computed_value +--- +<div>{{cssref}}</div> + +<p>The <strong>computed value</strong> of a CSS property is computed from the specified value by:</p> + +<ul> + <li>Handling the special values {{cssxref("inherit")}} and {{cssxref("initial")}}, and</li> + <li>Doing the computation needed to reach the value described in the "Computed value" line in the property's summary.</li> +</ul> + +<p>The computation needed to reach the <strong>computed value</strong> for the property typically involves converting relative values (such as those in<code> em </code>units or percentages) to absolute values.</p> + +<p>For example, if an element has specified values <code>font-size: 16px</code> and <code>padding-top: 2em</code>, then the computed value of <code>padding-top</code> is <code>32px</code> (double the font size).</p> + +<p>However, for some properties (those where percentages are relative to something that may require layout to determine, such as<code> width</code>,<code> margin-right</code>,<code> text-indent</code>, and<code> top</code>), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the<code> line-height </code>property become the computed value, as specified. These relative values that remain in the computed value become absolute when the <a href="/en-US/docs/CSS/used_value">used value</a> is determined.</p> + +<p>The main use of the <em>computed value</em> (other than as a step between the <a href="/en-US/docs/Web/CSS/specified_value">specified value</a> and <a href="/en-US/docs/Web/CSS/used_value">used value</a>) is <a class="internal" href="/en-US/docs/Web/CSS/inheritance">inheritance</a>, including the {{cssxref("inherit")}} keyword.</p> + +<h2 id="Notas">Notas</h2> + +<p>The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the {{cssxref("resolved_value", "resolved value")}}, which may either be the {{cssxref("computed_value", "computed value")}} or the {{cssxref("used_value", "used value")}}, depending on the property.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Especificação inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/pt-br/web/css/valor_espeficifco/index.html b/files/pt-br/web/css/valor_espeficifco/index.html new file mode 100644 index 0000000000..939aa09234 --- /dev/null +++ b/files/pt-br/web/css/valor_espeficifco/index.html @@ -0,0 +1,44 @@ +--- +title: Valor Especifícado +slug: Web/CSS/valor_espeficifco +tags: + - CSS + - Iniciante + - Web +translation_of: Web/CSS/specified_value +--- +<p>{{CSSRef}}</p> + +<p>O <strong>valor especificado</strong> de uma propriedade CSS está definido em uma de três maneiras.</p> + +<ol> + <li>If the document's stylesheet has specified a value for the property then it will be used. For example; if the {{cssxref("color")}} property is set to <code>green</code> then the text color of the corresponding element will be green.</li> + <li>If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph ({{HTMLElement("p")}}) inside a {{HTMLElement("div")}} and the {{HTMLElement("div")}} has a CSS <code>font</code> property value of "Arial" and the {{HTMLElement("p")}} doesn't have a <code>font</code> property defined then it will inherit the Arial font.</li> + <li>If none of the above are available, the initial value for the element as specified by the CSS specification is applied.</li> +</ol> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/pt-br/web/css/valor_inicial/index.html b/files/pt-br/web/css/valor_inicial/index.html new file mode 100644 index 0000000000..fea27bfe3c --- /dev/null +++ b/files/pt-br/web/css/valor_inicial/index.html @@ -0,0 +1,30 @@ +--- +title: Valor inicial +slug: Web/CSS/valor_inicial +tags: + - CSS + - Iniciante + - Web + - valor inicial +translation_of: Web/CSS/initial_value +--- +<div>{{cssref}}</div> + +<p>O <strong>Valor inicial</strong> de uma propriedade <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.</p> + +<ul> + <li>Para <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/inheritance#Propriedades_herdadas">propriedades herdadas</a>, o valor inicial é usado apenas em seu elemento raíz, desde que nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> seja fornecido.</li> + <li>Para <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/inheritance#Propriedades_nao_herdadas">propriedades não-herdadas</a>, o valor inicial é usado em todos os elementos, enquanto nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> é fornecido</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave {{cssxref("initial")}}</p> +</div> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/CSS/CSS_Reference" title="CSS Reference">Refercia CSS</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li><code><a href="/pt-BR/docs/CSS/initial" title="en/CSS/initial">initial</a></code></li> +</ul> diff --git a/files/pt-br/web/css/valor_resolvido/index.html b/files/pt-br/web/css/valor_resolvido/index.html new file mode 100644 index 0000000000..a045149bc7 --- /dev/null +++ b/files/pt-br/web/css/valor_resolvido/index.html @@ -0,0 +1,40 @@ +--- +title: Valor Resolvido +slug: Web/CSS/Valor_resolvido +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/resolved_value +--- +<div>{{cssref}}</div> + +<p>The <strong>resolved value</strong> of a CSS property is the value returned by {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. For most properties, it is the {{cssxref("computed_value", "computed value") }}, but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is instead the {{cssxref("used_value", "used value")}}. See the specification link below for more per-property details.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM", "#resolved-values", "resolved value")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td>Definicação inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li> + <li>{{CSS_key_concepts}}</li> + <li>{{domxref("window.getComputedStyle")}}</li> +</ul> diff --git a/files/pt-br/web/css/valor_usado/index.html b/files/pt-br/web/css/valor_usado/index.html new file mode 100644 index 0000000000..18c48dedb5 --- /dev/null +++ b/files/pt-br/web/css/valor_usado/index.html @@ -0,0 +1,114 @@ +--- +title: Valor usado +slug: Web/CSS/Valor_usado +translation_of: Web/CSS/used_value +--- +<div>{{cssref}}</div> + +<p>O <strong>valor usado</strong> de uma propriedade CSS é o valor final dessa propriedade depois de todos os cálculos terem sido executados.</p> + +<p>After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., <code>width</code>, <code>line-height</code>) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., <code>background-color</code>, <code>display)</code> and with <code>position</code> and <code>float</code>.</p> + +<p>For some properties, JavaScript can retrieve the used value through the <a href="/en-US/docs/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> method.</p> + +<h2 id="Detalhes">Detalhes</h2> + +<p>There are four steps to calculating any CSS property's final value. First, the <a href="/en-US/docs/CSS/specified_value" title="https://developer.mozilla.org/en/CSS/specified_value">specified value</a> is the result of cascading (choosing the most specific stylesheet rule that changes the property), <a href="/en-US/docs/CSS/inheritance" title="en/CSS/inheritance">inheritance</a> (using the same computed value as a parent if the property is inheritable), or using the default. Then, the <a href="/en-US/docs/CSS/computed_value" title="en/CSS/computed value">computed value</a> is calculated according to the specification (for example, a <code>span</code> with <code>position: absolute</code> will have its computed <code>display</code> changed to <code>block</code>). Then, layout is calculated (dimensions that are <code>auto</code> or percentages relative to a parent are replaced with pixel values), and the result is the <strong>used value</strong>.</p> + +<p>Finally, transformed according to the limitations of the local environment, the result is <a href="/en-US/docs/Web/CSS/actual_value">actual value</a>. The actual value is the used value after any approximations have been applied. For example, a user agent may only be able to render borders with integer pixel widths, and therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades, instead of full color. These steps are calculated internally.</p> + +<p>JavaScript can read only the final used values with <a href="/en-US/docs/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>. This method may instead return computed values, depending on the property. The values it returns are generically called {{cssxref("resolved_value", "resolved values")}}).</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Compute and show the used width of three elements (updates on resize):</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="no-width"> + <p>No explicit width.</p> + <p class="show-used-width">..</p> + + <div id="width-50"> + <p>Explicit width: 50%.</p> + <p class="show-used-width">..</p> + + <div id="width-inherit"> + <p>Explicit width: inherit.</p> + <p class="show-used-width">..</p> + </div> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#no-width { + width: auto; +} + +#width-50 { + width: 50%; +} + +#width-inherit { + width: inherit; +} + +/* Make results easier to see: */ +div { + border: 1px solid red; + padding: 8px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function updateUsedWidth(id) { + var div = document.getElementById(id); + var par = document.querySelector(`#${id} .show-used-width`); + var wid = window.getComputedStyle(div)["width"]; + par.textContent = `Used width: ${wid}.`; +} + +function updateAllUsedWidths() { + updateUsedWidth("no-width"); + updateUsedWidth("width-50"); + updateUsedWidth("width-inherit"); +} + +updateAllUsedWidths(); +window.addEventListener('resize', updateAllUsedWidths); + +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '80%', '372px') }}</p> + +<p> </p> + +<h2 id="Diferentes_valores_computados">Diferentes valores computados</h2> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">CSS 2.0 defined only <a href="/en-US/docs/CSS/computed_value" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/CSS/computed value">computed value</a> as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, line-height), the computed values and used values are the same. These are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from <a class="external" href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a>):</p> + +<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <li style="margin-bottom: 0.25em;">background-position</li> + <li style="margin-bottom: 0.25em;">bottom, left, right, top</li> + <li style="margin-bottom: 0.25em;">height, width</li> + <li style="margin-bottom: 0.25em;">margin-bottom, margin-left, margin-right, margin-top,</li> + <li style="margin-bottom: 0.25em;">min-height, min-width</li> + <li style="margin-bottom: 0.25em;">padding-bottom, padding-left, padding-right, padding-top</li> + <li style="margin-bottom: 0.25em;">text-indent</li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<p><a class="external" href="http://www.w3.org/TR/CSS2/cascade.html#used-value" title="http://www.w3.org/TR/CSS2/cascade.html#used-value">CSS Level 2: Used Values</a></p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li><a href="/en-US/docs/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a></li> +</ul> diff --git a/files/pt-br/web/css/var()/index.html b/files/pt-br/web/css/var()/index.html new file mode 100644 index 0000000000..a04bd96525 --- /dev/null +++ b/files/pt-br/web/css/var()/index.html @@ -0,0 +1,146 @@ +--- +title: var() +slug: Web/CSS/var() +translation_of: Web/CSS/var() +--- +<div>{{CSSRef}}</div> + +<p>A função <a href="/pt-BR/docs/Web/CSS">CSS</a> <strong><code>var()</code></strong> pode ser usada para inserir o valor de uma <a href="/pt-BR/docs/Web/CSS/--*">custom property</a> (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.</p> + +<pre class="brush: css line-numbers language-css no-line-numbers notranslate"><code class="language-css"><span class="function token">var</span><span class="punctuation token">(</span>--header-color, blue<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>A função <code>var()</code> não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>O primeiro argumento da função é o nome da propriedade personalizada a ser substituída. O segundo argumento opcional da função serve como valor alternativo. Se a propriedade personalizada referenciada pelo primeiro argumento for inválida, a função usará o segundo valor.</p> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<div class="note"> +<p>Nota: A sintaxe do argumento alternativo, assim como as propriedades personalizadas, permite o uso de vírgulas. Por exemplo, <code>var(--foo, red, blue)</code> define como argumento alternativo <code>red, blue</code>; isto é, qualquer coisa entre a primeira vírgula e o fim da função é considerado como valor do como argumento alternativo.</p> +</div> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><custom-property-name></dt> + <dd>O nome da propriedade personalizada referenciada é representada por um identificador que começa com dois traços. As propriedades personalizadas são exclusivamente para uso por autores e usuários; O CSS nunca lhes dará um significado além do que é apresentado aqui.</dd> + <dt><declaration-value></dt> + <dd>O valor do argumento alternativo é usado caso a propriedade personalizada seja inválida no contexto utilizado. Este valor pode conter qualquer caractere, exceto alguns caracteres com significado especial como novas linhas, colchetes de fechamento perdidos, ex.<code>)</code>, <code>]</code>, ou <code>}</code>, ponto e vírgula de primeiro nível, ou sinais de exclamação.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css notranslate">:root { + --main-bg-color: pink; +} + +body { + background-color: var(--main-bg-color); +} +</pre> + +<pre class="brush: css notranslate">/* Argumento alternativo */ +/* No estilo de componente: */ +.component .header { + color: var(--header-color, blue); +} + +.component .text { + color: var(--text-color, black); +} + +/* No estilo de grandes aplicações: */ +.component { + --text-color: #080; /* header-color não está definido e, desse modo, permanece azul, o valor do argumento alternativo */ +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td> + <td>{{Spec2('CSS3 Variables')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>48<sup>[1]</sup><br> + 49</td> + <td>15063<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop("29")}}<sup>[3]</sup><br> + {{CompatGeckoDesktop("31")}}</td> + <td>{{CompatNo}}</td> + <td>36</td> + <td>9.3<sup>[4]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>50</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>37</td> + <td>9.3<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] No Chrome 48 este recurso é habilitado na configuração "Experimental Web Platform features" em <code>chrome://flags</code>.</p> + +<p>[2] Veja <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csscustompropertiesakacssvariables/?q=css%20var">Edge Platform Status</a> e <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/desktop/15063/">15063 Build Release Notes (2017-03-20)</a>.</p> + +<p>[3] Esse recurso é implementado com base na preferência <code>layout.css.variables.enabled</code>, cujo padrão é <code>false</code> e usando a antiga sintaxe <code>var-<var>variablename</var></code> no Gecko 29. A partir do Gecko 31 esta preferência é habiliitada por padrão e a nova <code>--<var>variablename</var></code> sintaxe é utilizada. A partir do Gecko 55, a preferência <code>layout.css.variables.enabled</code> foi removida completamente, assim o recurso está habilitado permanentemente e não pode ser desabilitado.</p> + +<p>[4] Veja {{webkitbug(19660)}}.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/CSS/Using_CSS_variables">Utilizando variáveis CSS</a></li> +</ul> diff --git a/files/pt-br/web/css/vertical-align/index.html b/files/pt-br/web/css/vertical-align/index.html new file mode 100644 index 0000000000..f6e7c70e29 --- /dev/null +++ b/files/pt-br/web/css/vertical-align/index.html @@ -0,0 +1,300 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - Propriedades CSS + - Referencia +translation_of: Web/CSS/vertical-align +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <strong><code>vertical-align</code></strong> do <a href="/en-US/docs/Web/CSS">CSS</a> especifica o alinhamento vertical de um inline ou caixa table-cell.</p> + +<pre class="brush: css no-line-numbers">/* keyword values */ +vertical-align: baseline; +vertical-align: sub; +vertical-align: super; +vertical-align: text-top; +vertical-align: text-bottom; +vertical-align: middle; +vertical-align: top; +vertical-align: bottom; + +/* <length> values */ +vertical-align: 10em; +vertical-align: 4px; + +/* <percentage> values */ +vertical-align: 20%; + +/* Global values */ +vertical-align: inherit; +vertical-align: initial; +vertical-align: unset; +</pre> + +<p>A propriedade vertical-align pode ser usada em dois contextos:</p> + +<ul> + <li>Para alinhar verticalmente uma caixa de elementos inline dentro dentro de sua caixa de linha. Por exemplo, poderia ser usado para alinhar verticalmente um {{HTMLElement("img")}} em uma linha de texto:</li> +</ul> + +<div id="vertical-align-inline"> +<pre class="hidden brush: html"><p> +top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> +middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> +bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> +super:<img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/> +sub:<img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/> +</p> +<p> +text-top:<img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/> +text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> +0.2em:<img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/> +-1em:<img style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/> +20%:<img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/> +-100%:<img style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/> +</p> + +</pre> + +<pre class="hidden brush: css">#* { + box-sizing: border-box; +} + +img { + margin-right: 0.5em; +} + +p { + height: 3em; + padding: 0 .5em; + font-family: monospace; + text-decoration: underline overline; + margin-left: auto; + margin-right: auto; + width: 80%; +} +</pre> +</div> + +<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p> + +<ul> + <li>Para alinhar verticalmente o conteudo de uma celula em uma tabela:</li> +</ul> + +<div id="vertical-align-table"> +<pre class="hidden brush: html"><table> + <tr> + <td style="vertical-align: baseline">baseline</td> + <td style="vertical-align: top">top</td> + <td style="vertical-align: middle">middle</td> + <td style="vertical-align: bottom">bottom</td> + <td> + <p>There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p> +<p>There is another theory which states that this has already happened.</p> + </td> + </tr> +</table> + +</pre> + +<pre class="hidden brush: css">table { + margin-left: auto; + margin-right: auto; + width: 80%; +} + +table, th, td { + border: 1px solid black; +} + +td { + padding: 0.5em; + font-family: monospace; +} +</pre> +</div> + +<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p> + +<p>Observe que <code>vertical-align</code> é aplicado apenas em elementos inline e table-cell: Você não pode usar isso para alinhar verticalmente elementos de nível de bloco.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>This property is specified as one of the keyword values listed below.</p> + +<h3 id="Valores_para_elementos_inline">Valores para elementos inline</h3> + +<p><em>Most of the values vertically align the element relative to its parent element:<br> + Essas propriedades alinham verticalmente o elemento relativamente a seu elemento pai</em></p> + +<dl> + <dt><code>baseline</code></dt> + <dd>Aligns the baseline of the element with the baseline of its parent. The baseline of some <a href="/en-US/docs/Web/CSS/Replaced_element">replaced elements</a>, like {{HTMLElement("textarea")}}, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.</dd> + <dt><code>sub</code></dt> + <dd>Aligns the baseline of the element with the subscript-baseline of its parent.</dd> + <dt><code>super</code></dt> + <dd>Aligns the baseline of the element with the superscript-baseline of its parent.</dd> + <dt><code>text-top</code></dt> + <dd>Aligns the top of the element with the top of the parent element's font.</dd> + <dt><code>text-bottom</code></dt> + <dd>Aligns the bottom of the element with the bottom of the parent element's font.</dd> + <dt><code>middle</code></dt> + <dd>Aligns the middle of the element with the baseline plus half the x-height of the parent.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>Aligns the baseline of the element at the given length above the baseline of its parent.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Like <length> values, with the percentage being a percent of the {{Cssxref("line-height")}} property.</dd> +</dl> + +<p>(Negative values are allowed for <length> and <percentage>.)</p> + +<p><em>The following two values vertically align the element relative to the entire line rather than relative to its parent:</em></p> + +<dl> + <dt><code>top</code></dt> + <dd>Align the top of the element and its descendants with the top of the entire line.</dd> + <dt><code>bottom</code></dt> + <dd>Align the bottom of the element and its descendants with the bottom of the entire line.</dd> +</dl> + +<p>For elements that do not have a baseline, the bottom margin edge is used instead.</p> + +<h3 id="Values_(for_table_cells)">Values (for table cells)</h3> + +<dl> + <dt><code>baseline</code> (and <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code><length></code>, and <code><percentage></code>)</dt> + <dd>Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.</dd> + <dt><code>top</code></dt> + <dd>Align the top padding edge of the cell with the top of the row.</dd> + <dt><code>middle</code></dt> + <dd>Center the padding box of the cell within the row.</dd> + <dt><code>bottom</code></dt> + <dd>Align the bottom padding edge of the cell with the bottom of the row.</dd> +</dl> + +<p>Negative values are allowed.</p> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> +<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> +<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div> +<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">img.top { vertical-align: text-top; } +img.bottom { vertical-align: text-bottom; } +img.middle { vertical-align: middle; } +</pre> + +<h3 id="Output">Output</h3> + +<p>{{EmbedLiveSample("Example")}}<br> + </p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>vertical-align</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Add the {{cssxref("<length>")}} value and allows it to be applied to element with a {{cssxref("display")}} type of <code>table-cell</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li> + <li><a href="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li> + <li><a href="http://christopheraue.net/2014/03/05/vertical-align/">All You Need To Know About Vertical-Align</a></li> +</ul> diff --git a/files/pt-br/web/css/visibility/index.html b/files/pt-br/web/css/visibility/index.html new file mode 100644 index 0000000000..a0bdbdc31f --- /dev/null +++ b/files/pt-br/web/css/visibility/index.html @@ -0,0 +1,168 @@ +--- +title: visibility +slug: Web/CSS/visibility +translation_of: Web/CSS/visibility +--- +<div>{{CSSRef}}</div> + +<p><span id="result_box" lang="pt"><span>A propriedade CSS de visibilidade pode mostrar ou ocultar um elemento sem afetar o layout de um documento (ou seja, o espaço é criado para elementos independentemente de serem visíveis ou não).</span> <span>A propriedade também pode ocultar linhas ou colunas em um</span></span> {{HTMLElement("table")}}.</p> + +<pre class="brush: css no-line-numbers">/* palavra-chave valores */ +visibility: visible; +visibility: hidden; +visibility: collapse; + +/* Global values */ +visibility: inherit; +visibility: initial; +visibility: unset; +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Para ocultar um elemento ou removê-lo do layout do documento, defina a propriedade {{cssxref("display")}} como <code>none</code> em vez de usar <code>visibility</code>.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p><span id="result_box" lang="pt"><span>A propriedade é especificada como um dos valores das palavras-chave listados abaixo.</span></span></p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>The element box is visible.</dd> + <dt><code>hidden</code></dt> + <dd>The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have <code>visibility</code> set to <code>visible</code>. The element cannot receive focus (such as when navigating through <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tab indexes</a>).</dd> + <dt><code>collapse</code></dt> + <dd> + <ul> + <li>For {{HTMLElement("table")}} rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if <code>{{Cssxref("display")}}: none</code> were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.</li> + <li>For <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect.</li> + <li>For other elements, <code>collapse</code> is treated the same as <code>hidden</code>.</li> + </ul> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Interpolação">Interpolação</h2> + +<p>Visibility values are interpolable between <em>visible</em> and <em>not-visible</em>. One of the start or ending values must therefore be <code>visible</code> or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between <code>0</code> and <code>1</code> map to <code class="css">visible</code> and other values of the timing function (which occur only at the start/end of the transition or as a result of <code class="css">cubic-bezier()</code> functions with y values outside of [0, 1]) map to the closer endpoint.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p class="visible">The first paragraph is visible.</p> +<p class="not-visible">The second paragraph is NOT visible.</p> +<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.visible { + visibility: visible; +} + +.not-visible { + visibility: hidden; +} +</pre> + +<p>{{EmbedLiveSample('Basic_example')}}</p> + +<h3 id="Table_example">Table example</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td>1.1</td> + <td class="collapse">1.2</td> + <td>1.3</td> + </tr> + <tr class="collapse"> + <td>2.1</td> + <td>2.2</td> + <td>2.3</td> + </tr> + <tr> + <td>3.1</td> + <td>3.2</td> + <td>3.3</td> + </tr> +</table></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.collapse { + visibility: collapse; +} + +table { + border: 1px solid red; +} + +td { + border: 1px solid gray; +} +</pre> + +<p>{{EmbedLiveSample('Table_example')}}</p> + +<h2 id="Notas">Notas</h2> + +<ul> + <li>Support for <code>visibility: collapse</code> is missing or partially incorrect in some modern browsers. It may not be correctly treated like <code>visibility: hidden</code> on elements other than table rows and columns.</li> + <li><code>visibility: collapse</code> may change the layout of a table if the table has nested tables within the cells that are collapsed, unless <code>visibility: visible</code> is specified explicitly on nested tables.</li> +</ul> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Defines the <code>collapse</code> value as it applies to flex items.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Nenhuma alteração.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>visibility</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_browsers">Compatibilidade entre browsers</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.visibility")}}</p> + +<p> </p> diff --git a/files/pt-br/web/css/white-space/index.html b/files/pt-br/web/css/white-space/index.html new file mode 100644 index 0000000000..3b8b3c6c7d --- /dev/null +++ b/files/pt-br/web/css/white-space/index.html @@ -0,0 +1,140 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - Layout + - Precisa de Compatibilidade com Navegadores Mobile + - Precisa de Exemplos + - Propriedade + - Referencia + - Referência(2) + - Textos CSS + - Web +translation_of: Web/CSS/white-space +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>A propriedade CSS <span style="font-family: consolas,monaco,andale mono,monospace;">white-space é usada para descrever como os espaços em branco dentro dos elementos são manipulados.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("white-space")}}</pre> + +<pre>white-space: normal +white-space: nowrap +white-space: pre +white-space: pre-wrap +white-space: pre-line + +white-space: inherit +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Sequências de espaços em branco são recolhidas. Caracteres de nova linha no código são tratados como outros espaços em branco. As linhas quebram conforme a necessidade para preencher as linhas das caixas (boxes).</dd> + <dt><code>nowrap</code></dt> + <dd>Recolhe os espaços em branco como no <span style="font-family: consolas,monaco,andale mono,monospace;">normal,</span> mas suprime as quebras de linha (quebra de texto) no texto.</dd> + <dt><code>pre</code></dt> + <dd>Sequências de espaço em branco são preservadas, linhas são quebradas apenas em carateres de nova linha no código e em elementos {{HTMLElement("br")}}.</dd> + <dt><code>pre-wrap</code></dt> + <dd>Sequências de espaço em branco são preservadas. Linhas são quebradas em caracteres de nova linha, em {{HTMLElement("br")}} e quando necessário para preencher as linhas das caixas (boxes).</dd> + <dt><code>pre-line</code></dt> + <dd>Sequências de espaços em branco são recolhidas. Linhas são quebradas em caracteres de nova linha, em {{HTMLElement("br")}} e quando necessário para preencher as linhas das caixas (boxes).</dd> +</dl> + +<p>A tabela a seguir resume o comportamento dos valores para <span style="font-family: consolas,monaco,andale mono,monospace;">white-space:</span></p> + +<table class="standard-table"> + <thead> + <tr> + <th> </th> + <th>Novas linhas</th> + <th>Espaços e Tabulações (tabs)</th> + <th>Quebra de texto </th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>Recolhido</td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Recolhido</span></td> + <td>Quebra</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Recolhido</span></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Recolhido</span></td> + <td>Sem quebra</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>Preservado</td> + <td>Preservado</td> + <td>Sem quebra</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Preservado</span></td> + <td>Preservado</td> + <td>Quebra</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Preservado</span></td> + <td>Recolhido</td> + <td>Quebra</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: css">code { + white-space: pre; +}</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Aumenta a precisão dos algoritmos de quebra.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Especificação inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de Navegadores</h2> + +<p>{{Compat("css.properties.white-space")}}</p> + +<div id="compat-mobile"> </div> + +<p>[1] Internet Explorer 5.5+ suporta {{Cssxref("word-wrap")}}<code>: break-word;</code><br> + O código à seguir permite quebras de linhas dentro de elementos <span style="font-family: consolas,monaco,andale mono,monospace;">pre:</span></p> + +<pre class="brush: css">pre { + word-wrap: break-word; /* IE 5.5-7 */ + white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */ + white-space: pre-wrap; /* current browsers */ +}</pre> diff --git a/files/pt-br/web/css/width/index.html b/files/pt-br/web/css/width/index.html new file mode 100644 index 0000000000..3946c80d75 --- /dev/null +++ b/files/pt-br/web/css/width/index.html @@ -0,0 +1,411 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Property + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - PrecisaDeCompatibilidadeDeNavegador + - PrecisadeCompatibilidadeMobile + - Propriedade CSS + - Reference + - Referencia +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade <a href="pt-BR/docs/Web/CSS">CSS</a> <strong>width</strong> determina a largura da área de conteúdo de um elemento. A <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">área de conteúdo</a> fica dentro do preenchimento, da borda, e da margem de um elemento.</p> + +<p>As propriedades {{cssxref("min-width")}} e {{cssxref("max-width")}} sobrescrevem o {{cssxref("width")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* Valores de largura - <length> */ +width: 300px; +width: 25em; + +/* Valores percentuais - <percentage> */ +width: 75%; + +/* Valores com palavras-chave */ +width: 25em border-box; +width: 75% content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content; +width: auto; + +/* Valores Globais */ +width: inherit; +width: initial; +width: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Veja {{cssxref("<length>")}} para possíveis unidades.</dd> + <dt><code><percentage></code></dt> + <dd>Especificado como {{cssxref("<percentage>")}} da largura do bloco contido. Se a largura do bloco contido depender da largura do elemento, o layout resultante é indefinido.</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Se presente, o precedente {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado para o border box do elemento.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Se presente, o precedente {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado para o content box do elemento.</dd> + <dt><code>auto</code></dt> + <dd>O navegador irá calcular e selecionar a largura para o elemento específicado.</dd> + <dt>fill {{experimental_inline}}</dt> + <dd>Use o fill-available inline size ou fill-available block size, como um modo apropriado de escrita.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>Da largura interna preferível.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>Da largura interna mínina.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>Do bloco contendo a largura menos a margin horizontal, borda ou preenchimento.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>A largura: + <ul> + <li>do comprimento interno mínimo.</li> + <li>do menor comprimento interno preferível e da largura disponível.</li> + </ul> + </dd> +</dl> + +<h3 id="Sintaxe_Formal">Sintaxe Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Largura_padrão">Largura padrão</h3> + +<pre class="brush:css">p.douradinho { + background: gold; +}</pre> + +<pre class="brush:html"><p class="douradinho">A comunidade Mozilla produz diversos softwares incríveis.</p></pre> + +<p>{{EmbedLiveSample('Largura_padrão', '500px', '64px')}}</p> + +<h3 id="Pixels_e_ems">Pixels e ems</h3> + +<pre class="brush: css">.largura_px { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.largura_em { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html"><div class="largura_px">Largura medida com px</div> +<div class="largura_em">Largura medida com em</div></pre> + +<p>{{EmbedLiveSample('Pixels_e_ems', '500px', '64px')}}</p> + +<h3 id="Porcentagem">Porcentagem</h3> + +<pre class="brush: css">.porcentagem { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="porcentagem">Largura em porcentagem</div></pre> + +<p>{{EmbedLiveSample('Porcentagem', '500px', '64px')}}</p> + +<h3 id="max-content">max-content</h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="maxgreen">A comunidade Mozilla produz diversos softwares incríveis.</p></pre> + +<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p> + +<h3 id="min-content">min-content</h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="minblue">A comunidade Mozilla produz diversos softwares incríveis.</p></pre> + +<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Adicionadas as palavras-chave <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Lista a largura como animável.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Determina em qual elemento vai ser aplicado.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Adiciona novas palavras-chave para largura e altura.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td>Animação{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>max-content</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</td> + <td>{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>2.0 (421) (<code>intrinsic</code> value)<br> + 6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>min-content</code>{{experimental_inline}}</td> + <td> + <p>{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</p> + </td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>2.0 (421) (<code>min-intrinsic</code> value)<br> + 6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>available</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>fill-available</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>fit-content</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>6.1 {{property_prefix("-webkit")}}<sup>[2]</sup></td> + </tr> + <tr> + <td><code>border-box</code> e <code>content-box</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>fill</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome para Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Animação{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>max-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>min-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>available</code>{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>fill-available</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>fit-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>border-box</code> e <code>content-box</code>{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>fill</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] WebKit implementou uma variação deste valor sob o nome <em><code>fill-available</code></em> em Dezembro de 2013.</p> + +<p>[2] Versões anteriores do WebKit implementaram uma versão anterior deste valore sob o nome <em><code>intrinsic</code></em>, mas implementam <em><code>fit-content</code></em> desde a versão 6.1 também.</p> + +<p>[3] Não fixado.</p> + +<p>[4] O antigo WebKit suporta as palavras-chave <em><code>intrinsic</code></em> e <em><code>min-intrinsic</code></em>, mas foi removido no <a href="https://www.chromestatus.com/feature/5758434351775744">Chrome 48</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li> +</ul> diff --git a/files/pt-br/web/css/will-change/index.html b/files/pt-br/web/css/will-change/index.html new file mode 100644 index 0000000000..aec9664b59 --- /dev/null +++ b/files/pt-br/web/css/will-change/index.html @@ -0,0 +1,178 @@ +--- +title: will-change +slug: Web/CSS/will-change +tags: + - CSS + - CSS Will-change + - CSS3 + - Propriedade CSS + - Referência(2) + - Transições + - otimização de css +translation_of: Web/CSS/will-change +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p><span class="seoSummary">A propriedade <strong><code>will-change</code></strong> do <a href="/en-US/docs/Web/CSS">CSS</a> fornece um modo dos autores dizerem aos navegadores sobre que tipo de mudanças devem ser esperadas no elemento, então o navegador pode fazer as otimizações apropriadas com antecedência, antes do elemento ser efetivamente modificado.</span> Esses tipos de otimizações podem aumentar a capacidade de resposta de uma página, fazendo o trabalho potencialmente caro antes do tempo antes que eles são realmente necessários.</p> + +<p>O uso adequado dessa propriedade pode ser um pouco complicado:</p> + +<ul> + <li> + <p id="Don't_apply_will-change_to_too_many_elements"><em>Não aplique will-change em muitos elementos.</em> O navegador já tenta ao máximo otimizar tudo. Algumas das otimizações mais fortes que podem utilizar o <code>will-change</code> acabam usando muitos recursos da máquina, e quando utilizados em demasia como neste caso, pode fazer a página para retardar o carregamento ou consumir uma grande quantidade de recursos.</p> + </li> + <li> + <p><em>Use com moderação.</em> O comportamento normal do navegador para otimizações é fazê-las e depois voltar ao normal. Mas adicionando <code>will-change</code> diretamente no estilo, implica que o elemento alvo está sempre alguns momentos antes da mudança, e o navegador irá manter as otimizações por muito mais tempo do que teria de outra forma. Então é uma boa prática colocar e retirar o <code>will-change</code> usando script antes e depois da mudança ocorrer.</p> + </li> + <li> + <p><em>Não aplicar will-change em elementos para realizar a otimização prematura.</em> Se sua página está performando bem, não adicione a propriedade <code>will-change</code> nos elementos apenas para trazer mais velocidade. <code>will-change</code> é entendido como algo para ser usado como último recurso, com o intuito de tentar solucionar problemas de performance . Ele não deve ser usado para antecipar esses possíveis problemas. O uso excessivo do <code>will-change</code> poderá resultar em excessivo uso de memória e causar uma renderização mais complexa enquanto o browser tenta se preparar para uma possível mudança. Isso levará a um pior desempenho.</p> + </li> + <li> + <p id="Give_it_sufficient_time_to_work"><em>Dê tempo suficiente para trabalhar</em>. Essa propriedade destina-se como um método para os autores dizerem ao agente do browser sobre como mudarão as properiedades antes disso acontecer. Então o navegador pode escolher como aplicar qualquer otimização requisitada na propriedade antes do tempo da ação acontecer. Isso é importante para dar ao navegador algum tempo para fazer as otimizações. Identifique um jeito de prever as mudanças, e use a proiedade <code>will-change</code> pra isso.</p> + </li> +</ul> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* Valores chave */ +will-change: auto; +will-change: scroll-position; +will-change: contents; +will-change: transform; /* Exemplo de <custom-ident> */ +will-change: opacity; /* Exemplo de <custom-ident> */ +will-change: left, top; /* Exemplo de dois <animateable-feature> */ + +/* Valores globais */ +will-change: inherit; +will-change: initial; +will-change: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Essa palavra chave não expressa nenhuma intenção em particular; o <em>user agent</em> deve aplicar qualquer otimização como normalmente ocorre.</dd> +</dl> + +<p>O <code><animateable-feature></code> pode ser um dos seguintes valores:</p> + +<dl> + <dt><code>scroll-position</code></dt> + <dd>Indica que o autor espera que haja uma animação ou mudança na posição do scroll do elemento no futuro.</dd> + <dt><code>contents</code></dt> + <dd>Indica que o autor espera que haja uma animação ou mudança no conteúdo do elemento no futuro.</dd> + <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> + <dd>Indica que o autor espera que haja uma animação ou mudança na propriedade com o nome dado no elemento no futuro. Isso não pode ser um dos seguintes valores: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, or <code>contents</code>. A especificação não define o comportamento de um valor em particular, mas é comum pro <code>transform</code> ser uma camada de composição. O <a href="https://github.com/operasoftware/devopera/pull/330">Chrome atualmente toma duas ações</a>, dadas as propriedades particulares do CSS: estabelece uma nova camada de composição ou um novo {{Glossary("stacking context")}}.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: css">.sidebar { + will-change: transform; +} +</pre> + +<p>O exemplo acima adiciona a propriedade <code>will-change</code> diretamente no estilo, o que irá fazer com que o navegador mantenha a otimização em memória por muito mais tempo que o necessário e nós já vimos que isso deve ser evitado. Abaixo outro examplo mostrando como aplicar o <code>will-change</code> através de script, o que provavelmente é o que você deve fazer na maioria dos casos.</p> + +<pre class="brush: js">var el = document.getElementById('element'); + +// Set will-change quando ocorre hover no elemento +el.addEventListener('mouseenter', hintBrowser); +el.addEventListener('animationEnd', removeHint); + +function hintBrowser() { + // As propriedades otimizáveis que vão mudar no bloco de animações + this.style.willChange = 'transform, opacity'; +} + +function removeHint() { + this.style.willChange = 'auto'; +}</pre> + +<p>Entretanto pode ser apropriado incluir <code>will-change</code> no seu estilo css para uma aplicação que faz <em>page flips </em>quando uma tecla é pressionada como um álbum ou uma apresentação de slides, onde a página é grande e complexa. Isso irá dizer ao navegador para preparar a transição à frente do tempo e aceitar transições entre as páginas assim que a tecla for pressionada.</p> + +<pre class="brush: css">.slide { + will-change: transform; +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Will Change', '#will-change', 'will-change')}}</td> + <td>{{Spec2('CSS Will Change')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatChrome(36)}}</td> + <td>{{CompatGeckoDesktop(36)}} [1]</td> + <td><a href="https://dev.modern.ie/platform/status/csswillchange/?filter=f3e0000bf&search=will-change">{{CompatNo}}</a></td> + <td>{{CompatOpera(24)}}</td> + <td>{{CompatSafari(9.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>37</td> + <td>{{CompatGeckoMobile(36)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.3</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Firefox 31 to 35, <code>will-change</code> was available, but only if the user flipped the <code>layout.css.will-change.enabled</code> flag to <code>true</code>. The preference has been removed in Firefox 43.</p> + +<p>Firefox aceita setar <code>will-change: will-change</code> acima da versão 42.0, que é inválido na espeficação. Isso foi arrumado no Firefox 43.0. See {{bug("1195884")}}.</p> diff --git a/files/pt-br/web/css/word-break/index.html b/files/pt-br/web/css/word-break/index.html new file mode 100644 index 0000000000..4a2a5db7b1 --- /dev/null +++ b/files/pt-br/web/css/word-break/index.html @@ -0,0 +1,132 @@ +--- +title: word-break +slug: Web/CSS/word-break +tags: + - CSS + - Propriedade CSS + - Referencia +translation_of: Web/CSS/word-break +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>word-break</code></strong> é usada para especificar se o navegador deve inserir ou não quebras de linha onde, normalmente, o texto vazaria de seu container.</p> + +<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div> + +<div> </div> + +<div class="note"> +<p><strong>Nota: </strong>comparando com {{cssxref("overflow-wrap")}}, <code>word-break</code> criará uma quebra de linha no ponto exato em que o texto vazaria, mesmo que uma palavra pudesse ser colocada por completo em uma nova linha sem a necessidade de quebra da palavra.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* Valores específicos */ +word-break: normal; +word-break: break-all; +word-break: keep-all; + +/* Valores globais */ +word-break: inherit; +word-break: initial; +word-break: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Usa a regra de quebra de linha padrão.</dd> + <dt><code>break-all</code></dt> + <dd>Quebras de linha podem ser inseridas entre quaisquer caracteres de texto não-CJC (Chinês/Japonês/Coreano).</dd> + <dt><code>keep-all</code></dt> + <dd>Não permite quebra de linha para texto CJC. Texto não-CJC se comporta como <code>normal</code>.</dd> + <dt><code>break-word</code></dt> + <dd>Para evitar o vazamento, palavras que normalmente não seriam quebradas podem ser quebradas em pontos arbitrários se não houver pontos de quebra válidos na linha.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Examplos</h2> + +<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>1. <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>word-break: normal<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>normal narrow<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>2. <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>word-break: break-all<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>breakAll narrow<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>3. <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>word-break: keep-all<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>keepAll narrow<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>4. <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>word-break: break-word<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>breakWord narrow<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="Conteúdo_CSS">Conteúdo CSS</h3> + +<pre class="brush: css">.narrow { + padding: 5px; + border: 1px solid; + display: table; + max-width: 100%; +} + +.normal { + word-break: normal; +} + +.breakAll { + word-break: break-all; +} + +.keepAll { + word-break: keep-all; +} + +.breakWord { + word-break: break-word; +}</pre> + +<p>{{ EmbedLiveSample('Examples', '100%', 600) }}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Commentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</h2> + +<div>{{Compat("css.properties.word-break")}}</div> + +<p> </p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{cssxref("word-wrap")}}</li> +</ul> diff --git a/files/pt-br/web/css/word-wrap/index.html b/files/pt-br/web/css/word-wrap/index.html new file mode 100644 index 0000000000..c23f4b966d --- /dev/null +++ b/files/pt-br/web/css/word-wrap/index.html @@ -0,0 +1,117 @@ +--- +title: word-wrap +slug: Web/CSS/word-wrap +translation_of: Web/CSS/overflow-wrap +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>A propriedade <a href="/en/CSS" title="CSS">CSS</a> <code>word-wrap</code> é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.</p> + +<div class="note"><strong>Nota:</strong> Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade <code>word-wrap</code> foi renomeada para <code>overflow-wrap</code> no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">word-wrap: normal | break-word</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.</dd> + <dt><code>break-word</code></dt> + <dd>Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.</dd> +</dl> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: css">p { width: 13em; background: gold; }</pre> + +<p style="width: 13em; background: gold;">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> + +<pre class="brush: css">p { width: 13em; background: gold; word-wrap: break-word; }</pre> + +<p style="word-wrap: break-word; width: 13em; background: gold;">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td><a class="external" href="http://dev.w3.org/csswg/css3-text/#overflow-wrap" title="http://dev.w3.org/csswg/css3-text/#overflow-wrap">CSS Text Level 3</a></td> + <td>{{ Spec2('CSS3 Text') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>1.0</td> + <td>5.5</td> + <td>10.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>1.0</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li><code>word-wrap:break-word</code> pode ser usado para contornar a ausência de suporte para <code>pre{white-space:pre-wrap}</code> no IE 5.5-7. Veja {{ Cssxref("white-space") }} para um exemplo.</li> + <li>IE8 introduziu <code>-ms-word-wrap</code> como sinônimo para <code>word-wrap</code>. Não use o prefixo <code>-ms-</code>.</li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>Microsoft's original documentation: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx">MSDN Microsoft library word-wrap</a></li> +</ul> diff --git a/files/pt-br/web/css/writing-mode/index.html b/files/pt-br/web/css/writing-mode/index.html new file mode 100644 index 0000000000..4a70c73f40 --- /dev/null +++ b/files/pt-br/web/css/writing-mode/index.html @@ -0,0 +1,365 @@ +--- +title: writing-mode +slug: Web/CSS/writing-mode +tags: + - CSS + - Layout + - Propriedade CSS + - Referencia +translation_of: Web/CSS/writing-mode +--- +<div>{{CSSRef}}</div> + +<p>A propriedade CSS <strong><code>writing-mode</code></strong> define se as linhas do texto são dispostas horizontalmente ou verticalmente e a direção que os blocos seguem</p> + +<pre class="brush:css no-line-numbers">/* Valores das palavras-chave */ +writing-mode: horizontal-tb; +writing-mode: vertical-rl; +writing-mode: vertical-lr; + +/* Valores globais */ +writing-mode: inherit; +writing-mode: initial; +writing-mode: unset;</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>A propriedade especifica o <em>comportamento de fluxo do bloco, </em>que é a maneira em que os containers são empilhados ou distribuídos, e a direção em que o conteudo é alinhado ou disposto dentro dos containers. Assim a propriedade <code>writing-mode</code> também determina a distribuição do conteúdo no nível de bloco</p> + +<p>{{cssinfo}}</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>horizontal-tb</code></dt> + <dd>Conteúdo é disposto horizontalmente da esquerda para a direita, verticalmente de cima para baixo. A proxima inha horizontal é posicionada abaixo da linha anterior.</dd> + <dt><code>vertical-rl</code></dt> + <dd>Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da direita para a esquerda. A proxima linha vertical é posicionada à esquerda da linha anterior.</dd> + <dt><code>vertical-lr</code></dt> + <dd>Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da esquerda para a direita. A proxima linha vertical é posicionada à direita da linha anterior.</dd> + <dt><code>sideways-rl</code>{{experimental_inline}}</dt> + <dd>Conteúdo é disposto verticalmente de cima para baixo e todos os glifos, até mesmo os que estão em uma escrita vertical, são colocados lado a lado para a direita.</dd> +</dl> + +<dl> + <dt><code>sideways-lr</code>{{experimental_inline}}</dt> + <dd>Conteúdo é disposto verticalmente de cima para baixo e todos os glifos, até mesmo os que estão em uma escrita vertical, são colocados lado a lado para a esquerda.</dd> + <dt><code>lr</code> {{deprecated_inline}}</dt> + <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>horizontal-tb</code>.</dd> + <dt><code>lr-tb</code> {{deprecated_inline}}</dt> + <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>horizontal-tb</code>.</dd> + <dt><code>rl</code> {{deprecated_inline}}</dt> + <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>horizontal-tb</code>.</dd> + <dt><code>tb</code> {{deprecated_inline}}</dt> + <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>vertical-lr</code>.</dd> + <dt><code>tb-rl</code> {{deprecated_inline}}</dt> + <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>vertical-rl</code>.</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Esse exemplo demonstra todos os modos de escrita, mostrando cada um com texto e várias línguas.</p> + +<h3 id="HTML">HTML</h3> + +<p>O HTML é simplesmente um {{HTMLElement("table")}} com cada modo de escrita em uma linha com uma coluna mostrando texto em diversos scripts usando esse modo de escrita.</p> + +<pre class="brush: html"><table> + <tr> + <th>value</th> + <th>Vertical script</th> + <th>Horizontal script</th> + <th>Mixed script</th> + </tr> + <tr> + <td>horizontal-tb</td> + <td class="example Text1"><span>我家没有电脑。</span></td> + <td class="example Text1"><span>Example text</span></td> + <td class="example Text1"><span>1994年に至っては</span></td> + </tr> + <tr> + <td>vertical-lr</td> + <td class="example Text2"><span>我家没有电脑。</span></td> + <td class="example Text2"><span>Example text</span></td> + <td class="example Text2"><span>1994年に至っては</span></td> + </tr> + <tr> + <td>vertical-rl</td> + <td class="example Text3"><span>我家没有电脑。</span></td> + <td class="example Text3"><span>Example text</span></td> + <td class="example Text3"><span>1994年に至っては</span></td> + </tr> + <tr> + <td>sideways-lr</td> + <td class="example Text4"><span>我家没有电脑。</span></td> + <td class="example Text4"><span>Example text</span></td> + <td class="example Text4"><span>1994年に至っては</span></td> + </tr> + <tr> + <td>sideways-rl</td> + <td class="example Text5"><span>我家没有电脑。</span></td> + <td class="example Text5"><span>Example text</span></td> + <td class="example Text5"><span>1994年に至っては</span></td> + </tr> +</table> +</pre> + +<h3 id="CSS">CSS</h3> + +<div class="hidden"> +<p>Apenas um CSS preparatório para fazer as coisas parecerem um pouco melhor:</p> + +<pre class="brush: css">table { + border-collapse:collapse; +} +td, th { + border: 1px black solid; padding: 3px; +} +th { + background-color: lightgray; +} +.example { + height:75px; + width:75px; +}</pre> +</div> + +<p>O CSS que ajusta a direcionalidade do conteúdo é algo como esse:</p> + +<pre class="brush:css;">.example.Text1 span, .example.Text1 { + writing-mode: horizontal-tb; + -webkit-writing-mode: horizontal-tb; + -ms-writing-mode: horizontal-tb; +} + +.example.Text2 span, .example.Text2 { + writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + -ms-writing-mode: vertical-lr; +} + +.example.Text3 span, .example.Text3 { + writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: vertical-rl; +} + +.example.Text4 span, .example.Text4 { + writing-mode: sideways-lr; + -webkit-writing-mode: sideways-lr; + -ms-writing-mode: sideways-lr; +} + +.example.Text5 span, .example.Text5 { + writing-mode: sideways-rl; + -webkit-writing-mode: sideways-rl; + -ms-writing-mode: sideways-rl; +} +</pre> + +<p>{{EmbedLiveSample("Example", 400, 500)}}</p> + +<h3 id="Resultado_atual">Resultado atual</h3> + +<p>Essa é uma imagem mostrando o que o resultado deve parecer, no caso do suporte do seu navegador para <code>writing-mode</code> estiver incompleto.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td> + <td>{{Spec2("CSS3 Writing Modes")}}</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}</td> + <td>{{Spec2("CSS4 Writing Modes")}}</td> + <td>Adicionar <code>sideways-lr</code> e <code>sideways-rl</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <thead> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox</th> + <th>Internet Explorer (defunct)</th> + <th>Opera</th> + <th>Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th>Suporte básico</th> + <td class="google.chrome">{{CompatChrome(8)}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td class="microsoft.edge">{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td class="mozilla.firefox">{{CompatGeckoDesktop(41)}}<sup>[1]</sup><sup>[3]</sup></td> + <td class="internet.explorer">9{{property_prefix("-ms")}}<sup>[2]</sup></td> + <td class="opera">{{CompatOpera(15)}}{{property_prefix("-webkit")}}</td> + <td class="safari">5.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th><code>lr</code></th> + <td class="google.chrome" rowspan="6">{{CompatChrome(48)}} (uprefixed)</td> + <td class="microsoft.edge" rowspan="6">{{CompatVersionUnknown}}</td> + <td class="mozilla.firefox" rowspan="6">{{CompatGeckoDesktop(43)}}</td> + <td class="internet.explorer" rowspan="6">9{{property_prefix("-ms")}}<sup>[2]</sup></td> + <td class="opera" rowspan="6">{{CompatVersionUnknown}}</td> + <td class="safari" rowspan="6">{{CompatUnknown}}</td> + </tr> + <tr> + <th><code>lr-tb</code></th> + </tr> + <tr> + <th><code>rl</code></th> + </tr> + <tr> + <th><code>rl-tb</code></th> + </tr> + <tr> + <th><code>tb</code></th> + </tr> + <tr> + <th><code>tb-rl</code></th> + </tr> + </tbody> + <tbody> + <tr> + <th><code>horizontal-tb</code></th> + <td class="google.chrome" rowspan="3">{{CompatVersionUnknown}} (as of 58)</td> + <td class="microsoft.edge" rowspan="3">{{CompatVersionUnknown}} (as of 40)</td> + <td class="mozilla.firefox" rowspan="3">{{CompatGeckoDesktop(43)}}</td> + <td class="internet.explorer" rowspan="3">{{CompatNo}} (as of 11)</td> + <td class="opera" rowspan="3">{{CompatVersionUnknown}} (as of 44)</td> + <td class="safari" rowspan="3">{{CompatUnknown}}</td> + </tr> + <tr> + <th><code>vertical-lr</code></th> + </tr> + <tr> + <th><code>vertical-rl</code></th> + </tr> + </tbody> + <tbody> + <tr> + <th><code>sideways-lr</code></th> + <td class="google.chrome" rowspan="2">{{CompatNo}} (as of 58)</td> + <td class="microsoft.edge" rowspan="2">{{CompatNo}} (as of 40)</td> + <td class="mozilla.firefox" rowspan="2">{{CompatGeckoDesktop(43)}}</td> + <td class="internet.explorer" rowspan="2">{{CompatNo}} (as of 11)</td> + <td class="opera" rowspan="2">{{CompatNo}} (as of 44)</td> + <td class="safari" rowspan="2">{{CompatUnknown}}</td> + </tr> + <tr> + <th><code>sideways-rl</code></th> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatChrome(3)}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>47{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(41)}} <sup>[1][3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>SVG 1.1 values <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(48.0)}} (uprefixed)</td> + <td>{{CompatChrome(48.0)}} (uprefixed)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(43)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sideways-rl,sideways-lr</code></td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>vertical-lr</code></td> + <td><code>vertical-rl</code></td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] An experimental implementation was available since Gecko 36. It is governed by the preference <code>layout.css.vertical-text.enabled</code>, defaulting to <code>false</code> until Firefox 38. From Firefox 39 and Firefox 40, the preference was <code>true</code> for Nightly and DevTools editions only. Note that not all CSS widgets (e.g. tables) obey to it, yet. The preference has been removed in Gecko 51 and this property cannot be disabled since this version.</p> + +<p>[2] The implementation in Internet Explorer differs from the specification. See the <a href="https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx">related article in the Internet Explorer Dev Center</a>.</p> + +<p>[3] Bidirectional and rtl scripts are supported in vertical modes only since Gecko 42.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>SVG <code><a href="/en-US/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> attribute</li> + <li>{{Cssxref("direction")}}</li> + <li>{{Cssxref("unicode-bidi")}}</li> + <li>{{Cssxref("text-orientation")}}</li> + <li>{{Cssxref("text-combine-upright")}}</li> +</ul> |