From 2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:50:24 +0100 Subject: unslug pt-pt: move --- files/pt-pt/web/css/_colon_after/index.html | 34 - files/pt-pt/web/css/_colon_before/index.html | 63 - files/pt-pt/web/css/_doublecolon_after/index.html | 34 + files/pt-pt/web/css/_doublecolon_before/index.html | 63 + .../web/css/alternative_style_sheets/index.html | 23 + .../web/css/como_come\303\247ar/caixas/index.html" | 359 --- .../cascata_e_heran\303\247a/index.html" | 135 - .../como_o_css_trabalha/index.html" | 130 - .../conte\303\272do/index.html" | 188 -- .../web/css/como_come\303\247ar/cor/index.html" | 341 -- .../css_leg\303\255vel/index.html" | 188 -- .../disposi\303\247\303\243o/index.html" | 453 --- .../estilos_de_texto/index.html" | 158 - .../gr\303\241ficos_svg/index.html" | 215 -- .../pt-pt/web/css/como_come\303\247ar/index.html" | 92 - .../css/como_come\303\247ar/javascript/index.html" | 160 - .../web/css/como_come\303\247ar/listas/index.html" | 362 --- .../como_come\303\247ar/m\303\255dia/index.html" | 433 --- .../o_que_\303\251_css/index.html" | 135 - .../o_que_\303\251_css_question_/index.html" | 94 - .../porque_usar_css/index.html" | 111 - .../css/como_come\303\247ar/seletores/index.html" | 208 -- .../css/como_come\303\247ar/tabelas/index.html" | 655 ---- .../web/css/consulta_de_m\303\255dia/index.html" | 436 --- files/pt-pt/web/css/consultas_de_media/index.html | 110 - .../web/css/css_background_and_borders/index.html | 155 - .../m\303\272ltiplos_planos_de_fundo/index.html" | 58 - .../web/css/css_backgrounds_and_borders/index.html | 155 + .../using_multiple_backgrounds/index.html | 58 + .../introducao_modelo_caixa_css/index.html | 69 - .../introduction_to_the_css_box_model/index.html | 69 + .../css/css_colors/color_picker_tool/index.html | 3243 ++++++++++++++++++++ .../css_colors/ferramenta_selecao_cor/index.html | 3243 -------------------- .../aligning_items_in_a_flex_container/index.html | 215 ++ .../index.html | 215 -- .../index.html | 143 - .../ordenacao_dos_itens_flex/index.html | 140 - .../ordering_flex_items/index.html | 140 + .../index.html | 125 + .../index.html" | 125 - .../typical_use_cases_of_flexbox/index.html | 143 + files/pt-pt/web/css/css_grid_layout/index.html | 250 ++ files/pt-pt/web/css/css_tipos/index.html | 65 - .../css_transforms/using_css_transforms/index.html | 34 + files/pt-pt/web/css/css_types/index.html | 65 + .../css/folhas_de_estilo_alternativas/index.html | 23 - files/pt-pt/web/css/gap/index.html | 178 ++ files/pt-pt/web/css/grid-gap/index.html | 178 -- .../pt-pt/web/css/layout_de_grelha_css/index.html | 250 -- files/pt-pt/web/css/media_queries/index.html | 110 + .../media_queries/using_media_queries/index.html | 436 +++ .../web/css/m\303\251dia_paginada/index.html" | 19 - files/pt-pt/web/css/paged_media/index.html | 19 + files/pt-pt/web/css/pseudo-classes/index.html | 165 + files/pt-pt/web/css/pseudo-elements/index.html | 104 + files/pt-pt/web/css/pseudoclasses/index.html | 165 - files/pt-pt/web/css/pseudoelementos/index.html | 104 - files/pt-pt/web/css/reference/index.html | 171 ++ .../web/css/refer\303\252ncia_css/index.html" | 171 -- .../index.html" | 34 - 60 files changed, 5800 insertions(+), 10217 deletions(-) delete mode 100644 files/pt-pt/web/css/_colon_after/index.html delete mode 100644 files/pt-pt/web/css/_colon_before/index.html create mode 100644 files/pt-pt/web/css/_doublecolon_after/index.html create mode 100644 files/pt-pt/web/css/_doublecolon_before/index.html create mode 100644 files/pt-pt/web/css/alternative_style_sheets/index.html delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/caixas/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/cascata_e_heran\303\247a/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/como_o_css_trabalha/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/conte\303\272do/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/cor/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/css_leg\303\255vel/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/disposi\303\247\303\243o/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/estilos_de_texto/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/gr\303\241ficos_svg/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/javascript/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/listas/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/m\303\255dia/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/o_que_\303\251_css/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/o_que_\303\251_css_question_/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/porque_usar_css/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/seletores/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/tabelas/index.html" delete mode 100644 "files/pt-pt/web/css/consulta_de_m\303\255dia/index.html" delete mode 100644 files/pt-pt/web/css/consultas_de_media/index.html delete mode 100644 files/pt-pt/web/css/css_background_and_borders/index.html delete mode 100644 "files/pt-pt/web/css/css_background_and_borders/m\303\272ltiplos_planos_de_fundo/index.html" create mode 100644 files/pt-pt/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html delete mode 100644 files/pt-pt/web/css/css_box_model/introducao_modelo_caixa_css/index.html create mode 100644 files/pt-pt/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/pt-pt/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/pt-pt/web/css/css_colors/ferramenta_selecao_cor/index.html create mode 100644 files/pt-pt/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html delete mode 100644 files/pt-pt/web/css/css_flexible_box_layout/alinhamento_de_itens_num_recipiente_flex/index.html delete mode 100644 files/pt-pt/web/css/css_flexible_box_layout/casos_de_utilizacao_tipicos_do_flexbox/index.html delete mode 100644 files/pt-pt/web/css/css_flexible_box_layout/ordenacao_dos_itens_flex/index.html create mode 100644 files/pt-pt/web/css/css_flexible_box_layout/ordering_flex_items/index.html create mode 100644 files/pt-pt/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html delete mode 100644 "files/pt-pt/web/css/css_flexible_box_layout/rela\303\247\303\243o_do_flexbox_com_outros_m\303\251todos_de_layout/index.html" create mode 100644 files/pt-pt/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/pt-pt/web/css/css_grid_layout/index.html delete mode 100644 files/pt-pt/web/css/css_tipos/index.html create mode 100644 files/pt-pt/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/pt-pt/web/css/css_types/index.html delete mode 100644 files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html create mode 100644 files/pt-pt/web/css/gap/index.html delete mode 100644 files/pt-pt/web/css/grid-gap/index.html delete mode 100644 files/pt-pt/web/css/layout_de_grelha_css/index.html create mode 100644 files/pt-pt/web/css/media_queries/index.html create mode 100644 files/pt-pt/web/css/media_queries/using_media_queries/index.html delete mode 100644 "files/pt-pt/web/css/m\303\251dia_paginada/index.html" create mode 100644 files/pt-pt/web/css/paged_media/index.html create mode 100644 files/pt-pt/web/css/pseudo-classes/index.html create mode 100644 files/pt-pt/web/css/pseudo-elements/index.html delete mode 100644 files/pt-pt/web/css/pseudoclasses/index.html delete mode 100644 files/pt-pt/web/css/pseudoelementos/index.html create mode 100644 files/pt-pt/web/css/reference/index.html delete mode 100644 "files/pt-pt/web/css/refer\303\252ncia_css/index.html" delete mode 100644 "files/pt-pt/web/css/usando_transforma\303\247\303\265es_css/index.html" (limited to 'files/pt-pt/web/css') diff --git a/files/pt-pt/web/css/_colon_after/index.html b/files/pt-pt/web/css/_colon_after/index.html deleted file mode 100644 index f59fbcd5dd..0000000000 --- a/files/pt-pt/web/css/_colon_after/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: ':after | ::after' -slug: 'Web/CSS/:after' -tags: - - Referencia_CSS -translation_of: 'Web/CSS/::after' ---- -

{{ CSSRef() }}

-

Resumo

-

:after cria um pseudo-elemento que é a última criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento, pelo uso da propriedade CSS {{ cssxref("content") }}. Este elemento é inline por padrão.

-

{{ fx_minversion_note("3.5", "A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade :after do CSS 2.0. Não foram permitidas position, float, list-style-* e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.") }}

-

Sintaxe

-
element:after  { propriedades do estilo }  /* sintaxe CSS2 */
-
-element::after { propriedades do estilo }  /* sintaxe CSS3, não suportada pelo IE8 */
-

A notação ::after foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação :after introduzida no CSS 2.

-
Nota:  O Microsoft Internet Explorer 8 suporta somente a notação :after.
-

Exemplos

-
.boringtext:after {
-   content:    " Obrigado por ler tudo isto!";
-   font-size:  small;
-   color:      red;
-   background: gray;
-}
-
-

Especificações

- -

Compatibilidade com navegadores

- -
Navegador Versão mais antiga Suporte a
Internet Explorer 8.0 :after
Firefox (Gecko) 1.0 (1.0) :after
1.0 (1.5) :after | ::after
Opera 4.0 :after
7.0 :after | ::after
Safari (WebKit) 1.0 (85) :after | ::after
-

Veja também

-

{{ Cssxref(":before") }}, {{ cssxref("content") }}

-

{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}

diff --git a/files/pt-pt/web/css/_colon_before/index.html b/files/pt-pt/web/css/_colon_before/index.html deleted file mode 100644 index 5572a818ef..0000000000 --- a/files/pt-pt/web/css/_colon_before/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: ':before | ::before' -slug: 'Web/CSS/:before' -tags: - - Referencia_CSS -translation_of: 'Web/CSS/::before' ---- -

{{ CSSRef() }}

-

Resumo

-

:before cria um pseudo-elemento que é a primeira criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento. Este elemento é inline por padrão.

-

{{ fx_minversion_note("3.5", "A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade :before do CSS 2.0. Não foram permitidas position, float, list-style-* e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.") }}

-

Sintaxe

-
element:before  { propriedades do estilo }  /* sintaxe CSS2 */
-
-element::before { propriedades do estilo }  /* sintaxe CSS3, não suportada pelo IE8 */
-

A notação ::before foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação :before introduzida no CSS 2.

-
Nota:  O Microsoft Internet Explorer 8 suporta somente a notação :before.
-

Exemplos

-
q:before { content: "»" }
-q:after { content: '«' }
-
-<q>Algumas citações</q>, ele disse, <q>são melhores que nenhuma</q>.
-

Resultado:    »Algumas citações«, ele disse, »são melhores que nenhuma«.

-

Notas

-

Apesar das correções de posicionamento, o Firefox 3.5 não permite que o conteúdo seja gerado como um irmão anteriormente separado (como a declaração das CSS spec(EN) "Os pseudo-elementos <code>:before</code> e <code>:after</code> interagem com outras caixas...como se fossem elementos reais inseridos dentro de seu elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora nos arranjos sem tabelas (isto é, para alcançar o centro), tão longo como o conteúdo a ser centralizado é envolto em outro elemento criança, uma coluna antes e depois do conteúdo pode ser introduzida sem a adição de um irmão anterior ou posterior (por exemplo, talvez seja mais semanticamente correto adicionar um span a mais como anteriormente, que seria para adicionar um <code><div/></code> vazio antes e depois). (E sempre lembrar de adicionar uma largura para um flututante, uma vez que de outra forma ele não flutuará!)

-
<style type="text/css">
-
-#floatme {float:left; width:50%;}
-
-.example:before {
-  content: "Floated Before"; /* 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) */
-  float: left;
-  width:25%
-}
-.example:after {
-  content: "Floated After";
-  float: right;
-  width:25%
-}
-
-/* For styling */
-.example:before, .example:after, .first {
-  background: yellow;
-  color: red;
-}
-
-
-</style>
-<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>
-

Especificações

- -

Compatibilidade com navegadores

- -
Navegador Versão mais antiga Suporte a
Internet Explorer 8.0
:before
Firefox (Gecko) 1.0 (1.0) :before
1.0 (1.5) :before | ::before
Safari (WebKit) 1.0 (85) :before | ::before
Opera 4.0 :before
7.0 :before | ::before
-

Veja também

-

{{ Cssxref(":after") }}

-

{{ languages( { "en": "en/CSS/:before", "fr": "fr/CSS/:before", "pl": "pl/CSS/:before", "es": "es/CSS/before" } ) }}

diff --git a/files/pt-pt/web/css/_doublecolon_after/index.html b/files/pt-pt/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..f59fbcd5dd --- /dev/null +++ b/files/pt-pt/web/css/_doublecolon_after/index.html @@ -0,0 +1,34 @@ +--- +title: ':after | ::after' +slug: 'Web/CSS/:after' +tags: + - Referencia_CSS +translation_of: 'Web/CSS/::after' +--- +

{{ CSSRef() }}

+

Resumo

+

:after cria um pseudo-elemento que é a última criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento, pelo uso da propriedade CSS {{ cssxref("content") }}. Este elemento é inline por padrão.

+

{{ fx_minversion_note("3.5", "A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade :after do CSS 2.0. Não foram permitidas position, float, list-style-* e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.") }}

+

Sintaxe

+
element:after  { propriedades do estilo }  /* sintaxe CSS2 */
+
+element::after { propriedades do estilo }  /* sintaxe CSS3, não suportada pelo IE8 */
+

A notação ::after foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação :after introduzida no CSS 2.

+
Nota:  O Microsoft Internet Explorer 8 suporta somente a notação :after.
+

Exemplos

+
.boringtext:after {
+   content:    " Obrigado por ler tudo isto!";
+   font-size:  small;
+   color:      red;
+   background: gray;
+}
+
+

Especificações

+ +

Compatibilidade com navegadores

+ +
Navegador Versão mais antiga Suporte a
Internet Explorer 8.0 :after
Firefox (Gecko) 1.0 (1.0) :after
1.0 (1.5) :after | ::after
Opera 4.0 :after
7.0 :after | ::after
Safari (WebKit) 1.0 (85) :after | ::after
+

Veja também

+

{{ Cssxref(":before") }}, {{ cssxref("content") }}

+

{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}

diff --git a/files/pt-pt/web/css/_doublecolon_before/index.html b/files/pt-pt/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..5572a818ef --- /dev/null +++ b/files/pt-pt/web/css/_doublecolon_before/index.html @@ -0,0 +1,63 @@ +--- +title: ':before | ::before' +slug: 'Web/CSS/:before' +tags: + - Referencia_CSS +translation_of: 'Web/CSS/::before' +--- +

{{ CSSRef() }}

+

Resumo

+

:before cria um pseudo-elemento que é a primeira criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento. Este elemento é inline por padrão.

+

{{ fx_minversion_note("3.5", "A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade :before do CSS 2.0. Não foram permitidas position, float, list-style-* e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.") }}

+

Sintaxe

+
element:before  { propriedades do estilo }  /* sintaxe CSS2 */
+
+element::before { propriedades do estilo }  /* sintaxe CSS3, não suportada pelo IE8 */
+

A notação ::before foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação :before introduzida no CSS 2.

+
Nota:  O Microsoft Internet Explorer 8 suporta somente a notação :before.
+

Exemplos

+
q:before { content: "»" }
+q:after { content: '«' }
+
+<q>Algumas citações</q>, ele disse, <q>são melhores que nenhuma</q>.
+

Resultado:    »Algumas citações«, ele disse, »são melhores que nenhuma«.

+

Notas

+

Apesar das correções de posicionamento, o Firefox 3.5 não permite que o conteúdo seja gerado como um irmão anteriormente separado (como a declaração das CSS spec(EN) "Os pseudo-elementos <code>:before</code> e <code>:after</code> interagem com outras caixas...como se fossem elementos reais inseridos dentro de seu elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora nos arranjos sem tabelas (isto é, para alcançar o centro), tão longo como o conteúdo a ser centralizado é envolto em outro elemento criança, uma coluna antes e depois do conteúdo pode ser introduzida sem a adição de um irmão anterior ou posterior (por exemplo, talvez seja mais semanticamente correto adicionar um span a mais como anteriormente, que seria para adicionar um <code><div/></code> vazio antes e depois). (E sempre lembrar de adicionar uma largura para um flututante, uma vez que de outra forma ele não flutuará!)

+
<style type="text/css">
+
+#floatme {float:left; width:50%;}
+
+.example:before {
+  content: "Floated Before"; /* 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) */
+  float: left;
+  width:25%
+}
+.example:after {
+  content: "Floated After";
+  float: right;
+  width:25%
+}
+
+/* For styling */
+.example:before, .example:after, .first {
+  background: yellow;
+  color: red;
+}
+
+
+</style>
+<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>
+

Especificações

+ +

Compatibilidade com navegadores

+ +
Navegador Versão mais antiga Suporte a
Internet Explorer 8.0
:before
Firefox (Gecko) 1.0 (1.0) :before
1.0 (1.5) :before | ::before
Safari (WebKit) 1.0 (85) :before | ::before
Opera 4.0 :before
7.0 :before | ::before
+

Veja também

+

{{ Cssxref(":after") }}

+

{{ languages( { "en": "en/CSS/:before", "fr": "fr/CSS/:before", "pl": "pl/CSS/:before", "es": "es/CSS/before" } ) }}

diff --git a/files/pt-pt/web/css/alternative_style_sheets/index.html b/files/pt-pt/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..250bb3eef9 --- /dev/null +++ b/files/pt-pt/web/css/alternative_style_sheets/index.html @@ -0,0 +1,23 @@ +--- +title: Folhas de estilo alternativas +slug: Web/CSS/Folhas_de_estilo_alternativas +translation_of: Web/CSS/Alternative_style_sheets +--- +

O Firefox oferece suporte a folhas de estilo alternativa. AS páginas que disponibilizam folhas de estilo alternativas permitem que o usuário selecione o estilo que a página será mostrada usando o submenu Exibir>Estilos da página. Fornecendo uma maneira de visualizar várias versões de uma mesma página, com base em suas necessidades e preferências.

+

Um site pode usar a tag link para adicionar as folhas de estilo alternativa.

+

Por exemplo:

+
<link href="padrao.css" rel="stylesheet" type="text/css" title="Estilo padrao">
+<link href="estilo1.css" rel="alternate stylesheet" type="text/css" title="Estilo 1">
+<link href="estilo2.css" rel="alternate stylesheet" type="text/css" title="Estilo 2">
+
+

Oferecendo essas três folhas de estilo, disponibilizaremos ao usuário as opções "Estilo Padrão", "Estilo 1" e "Estilo 2" no submenu. Quando o usuário selecionar um dos estilos, a página imediatamente será recarregada usando o estilo selecionado.

+

O valor do atributo title na tag link nomeia cada opção de estilo. Quando o valor deste atributo é repetido, entende-se como parte da mesma opção. Caso a tag link não possua o atributo title, a folha correspondente será sempre aplicada.

+

Use rel="stylesheet" para aplicar as folhas correspondente ao estilo padrão, e rel="alternate stylesheet" para aplicar as folhas correspondente aos estilos alternativos. Isso permite que o Firefox diferencie as folhas de estilo padrão das alternativas e permite que os navegadores que não suportam folhas de estilo alternativa apliquem somente as folhas do estilo padrão.

+

 

+

Exemplo

+

Clique aqui para ver um exemplo.

+

 

+

Especificação

+ diff --git "a/files/pt-pt/web/css/como_come\303\247ar/caixas/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/caixas/index.html" deleted file mode 100644 index dff3dfb0ac..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/caixas/index.html" +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: Caixas -slug: Web/CSS/Como_começar/Caixas -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -

{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}

- -

Esta página descreve como você pode usar as CSS para controlar o espaço que um elemento ocupa quando é exibido.

- -

Em seu documento de amostra, você muda o espaçamento e adiciona regras decorativas.

- -

Informação: Caixas

- -

Quando seu navegador exibe um elemento, o elemento ocupa um espaço. Existem quatro partes do espaço que ele ocupa.

- -

No meio, está o espaço que o elemento precisa para exibir seu conteúdo. Em torno disso, está o enchimento. Em torno disso, está a borda. Em torno disso, está a margem.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

A paleta cinza mostra partes da disposição.

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

Isto é o que você vê em seu navegador.

-
- -

O enchimento, a borda e a margem podem ter diferentes tamanhos no topo, na direita, em baixo e na esquerda do elemento. Qualquer ou todos estes tamanhos podem ser zero.

- -

O enchimento é sempre da mesma cor do fundo do elemento. Então quando você configura a cor de fundo, você vê a cor aplicada ao próprio elemento e ao seu enchimento. A margem é sempre transparente.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

O elemento tem um fundo verde.

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

É isto que você vê no seu navegador.

-
- -

Bordas

- -

Você pode usar bordas para decorar elementos com linhas ou caixas.

- -

Para especificar a mesma borda em torno de todo o elemento, use a propriedade border. Especifique a largura (usualmente em pixels para exibir na tela), o estilo, e a cor.

- -

Os estilos são:

- - - - - - - - - - - - - - - - -
-
solid
- 		-
dotted
- 		-
dashed
- 		-
double
-
-
inset
- 		-
outset
- 		-
ridge
- 		-
groove
-
- -

Você pode também configurar o estilo para none ou hidden para remover a borda explicitamente, ou configurar a cor para transparent para fazer a borda invisível sem mudar a disposição.

- -

Para especificar bordas em um lado de cada vez, use as propriedades: border-top, border-right, border-bottom, border-left. Você pode usar isto para especificar uma borda em somente um lado, ou diferentes bordas em diferentes lados.

- - - - - - - - -
Exemplos
Esta regra configura a cor de fundo e a borda do topo dos elementos do cabeçalho: -
- 
-h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-  }
-
-
- -

O resultado deve ser como este:

- - - - - - - -
-

Cabeçalho elegante

-
- -


- Esta regra faz as imagens fáceis de ver dando-as uma borda com um cinza-médio em toda a volta:

- -
- 
-img {border: 2px solid #ccc;}
-
-
- -

O resultado deve ser como este:

- - - - - - - - -
Imagem:Image:Blue-rule.png
-
- -

Margens e enchimento

- -

Use margens e enchimento para ajustar a posição dos elementos e para criar espaços ao redor deles.

- -

Use a propriedade margin ou a propriedade padding para configurar a largura da margem ou do enchimento respectivamente.

- -

Se você especificar uma largura, isto se aplicará em torno de todo o elemento (topo, direita, baixo e esquerda).

- -

Se você especificar duas larguras, a primeira se aplicará ao topo e à baixo, e a segunda à direita e à esquerda.

- -

Você pode especificar todas as quatro larguras na ordem: topo, direita, baixo, esquerda.

- - - - - - - - -
Exemplo
Esta regra diferencia parágrafos com a classe remark dando-os uma borda vermelha em toda a sua volta. -

O Enchimento em toda a volta separa um pouco a borda do texto.

- -

Uma margem esquerda identifica o parágrafo relativo ao resto do texto:

- -
- 
-p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-
-
- -

O resultado deve ser como este:

- - - - - - - -
-

Aqui está um parágrafo normal.

- -

Aqui está um com observação.

-
-
- - - - - - - - -
Mais detalhes
Quando você usa margens e enchimento para ajustar o modo como os elementos são exibidos, suas regras de estilo interagem com o padrão dos navegadores de maneiras que podem ser complexas. -

Navegadores diferentes exibem os elementos diferentemente. Os resultados podem ser similares antes de sua folha de estilo mudar coisas. Algumas vezes isto pode fazer sua folha de estilo dar resultados surpreendedores.

- -

Para ter o resultado que você precisa, você pode ter que mudar a marcação do seu documento. A próxima página deste tutorial tem mais informações sobre isto.

- -

Para informações detalhas sobre enchimento, margens e bordas, veja Box model em CSS Specification.

-
- -

Ação: Adicionando bordas

- -

Edite seu arquivo CSS. Adicione esta regra para desenhar uma linha até o fim da página sobre cada cabeçalho:

- -
-
h3 {border-top: 1px solid gray;}
-
-
- -

Se você pegou o desafio na página anterior, modifique a regra que você criou, se não, adicione esta nova regra para adicionar um espaço em baixo de cada item da lista:

- -
-
li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-
-
- -

Atualize seu navegador para ver o resultado:

- - - - - - - -
-

(A) Os oceanos

- -
    -
  • Ártico
    • -
  • Atlântico
    • -
  • Pacífico
    • -
  • Índico
    • -
  • Antártico
    • -
- -

(B) Parágrafos numerados

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- - - - - - - - -
Desafio
Adicione uma regra à sua folha de estilo, fazendo um borda larga em toda a volta dos oceanos em uma cor que te lembre o mar — algo como isto: - - - - - - -
-

(A) Os oceanos

- -
-
    -
  • Ártico
    • -
  • Atlântico
    • -
  • Pacífico
    • -
  • Índico
    • -
  • Antártico
    • -
-
- -

(B) Parágrafos numerados

- -

. . .

-
- -

(Não é necessário fazer exatamente com a largura e a cor que usadas aqui.)

-
- -

O que vem depois

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Especificando margens e enchimento, você modificou a disposição do seu documento. Na próxima página você poderá mudar a disposição do seu documento de outras maneiras: Disposição

- -

{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/cascata_e_heran\303\247a/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/cascata_e_heran\303\247a/index.html" deleted file mode 100644 index b73abb297f..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/cascata_e_heran\303\247a/index.html" +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Cascata e herança -slug: Web/CSS/Como_começar/Cascata_e_herança -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}

- -

Esta página esboça como folhas de estilo interagem numa cascata, e como os elementos subordinados herdam o estilo do elementos primários.

- -

Você alterará à sua folha de estilo de amostra, usando herança para mudar o estilo de muitas partes do seu documento em um passo.

- -

Informação: Cascata e herança

- -

O estilo final para um elemento pode ser especificado em muitos lugares diferentes, que pode interagir num meio complexo. Esta interação complexa faz CSS poderoso, mas às vezes isto pode deixar confuso e difícil de depurar.

- -

Três códigos principais de informação de estilo formam uma cascata. Eles são:

- - - -

O estilo do usuário modifica o estilo padrão do navegador. O estilo do autor do documento então modifica algum outro estilo. Neste tutorial, você é o autor do seu documeto de amostra, e você trabalha somente com folhas de estilo do autor.

- - - - - - - - -
Exemplo
Quando você lê este documento no seu navegador Mozilla, parte do estilo que você vê, vem do padrão do seu navegador para HTML. -

Parte do estilo deve vir das configurações do seu navegador em Opções, ou de um arquivo userConten.css no seu perfil no navegador.

- -

Parte do seu estilo vem de folhas de estilo ligadas ao documento pelo server do wiki.

-
- -


- Quando você abre seu documento de amostra no seu navegador, os elementos STRONG são mais fortes do que o resto do texto. Isto vem do estilo padrão do seu navegador para o HTML.

- -

Os elementos STRONG são vermelhos, Isto vem da sua folha de estilo de amostra.

- -

Os elementos STRONG as vezes também herdam muito do estilo de elemento P, pois eles são subordinados. No mesmo caminho, o elemento P herda muito do estilo do elemento BODY.

- -

Para estilos em cascata, o autor das folhas de estilo tem prioridade, depois o leitor das folhas de estilo, e por último o padrão do navegador.

- -

Para estilos em herança, um nó subordinado tem prioridade sobre o estilo que herdou do nó principal.

- -

Estas não são as únicas propriedades que se aplicam. Uma página posterior neste turorial explicará mais.

- - - - - - - - -
Mais detalhes
CSS às vezes providencia um meio para o leitor anular o estilo do autor do documento, usando a palavra-chave !important. -

Este meio é para o autor do documento, você não pode sempre predizer exatamente o que os leitores verão.

- -

Se você quer saber todos os detalhes sobre cascata e herança, veja Assigning property values, Cascading, and Inheritance na CSS Specification.

-
- -

Ação: Usando herança

- -

Edite seu arquivo de amostra CSS.

- -

Adicione esta linha copiando e colando isto. Não importa realmente se você adicionar a linha antes ou depois da que já está lá. Entretando, adicionar isto no topo é mais lógico pois no seu documento o elemento P é primário ao elemento STRONG:

- -
p {color: blue; text-decoration: underline;}
-
- -

Agora atualize seu navegador para ver o efeito no seu documento de amostra. O sublinhado afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos STRONG herdaram o estilo sublinhado do elemento primário P.

- -

Mas os elementos STRONG ainda são vermelhos. A cor vermelha é própria do estilo, então isto tem prioridade sobre a cor azul do seu elemento primário P.

- - - - - - - - -
- - - - - - - -
Antes
Cascading Style Sheets
- 		- - - - - - - -
Depois
Cascading Style Sheets
-
- -

 

- - - - - - - - -
Desafio
Mude sua folha de estilo deixando somente as letras vermelhas sublinhadas: - - - - - - -
Cascading Style Sheets
-
- -

 

- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Sua folha de estilo de amostra especifica o estilo para os tags, P e STRONG, mudando o estilo dos elementos correspondentes em todo o seu documento original. A próxima página descreve como espeficar estilos em meios mais seletivos: Seletores

- -

{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/como_o_css_trabalha/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/como_o_css_trabalha/index.html" deleted file mode 100644 index bd667439ff..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/como_o_css_trabalha/index.html" +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Como o CSS trabalha -slug: Web/CSS/Como_começar/Como_o_CSS_trabalha -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}

- -

Esta página explica como o CSS trabalha no seu navegador. Você analiza seu documento de amostra, reavaliando os detalhes do seu estilo.

- -

Informação: Como o CSS trabalha

- -

Quando o Mozilla exibe um documento, é necessário combinar o conteúdo do documento com seu estilo de informação. Então o documento é processado em dois estágios:

- - - - - -

Uma linguagem de marcação usa tags para definir a estrutura do documento. Uma tag pode armazenar outras tags entre seu início e fim.

- -

Um DOM tem a estrutura como a de uma árvore. Cada tag e período do texto na linguagem de marcação torna-se um nó na estrutura da árvore. Os nós do DOM não são armazenadores. Em substituição, eles são primários aos nós subordinados.

- -

Os nós que correspondem a tags também são conhecidos por elementos.

- - - - - - - - -
Exemplo
No seu documento de amostra, a tag <p> e seu fim </p> criam um armazenamento: -
- 
-<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
-
- -

No DOM, o corespondente ao nó P é um primário. Os subordinados são os nós STRONG e os nós do texto. Os nós STRONG são os primários, e os nós do texto são os subordinados.

- -
-

P ├─STRONG │ │ │ └─"C"
- │
- ├─"ascading"
- │
- ├─STRONG │ │ │ └─"S"
- │
- ├─"tyle"
- │
- ├─STRONG │ │ │ └─"S"
- │
- └─"heets"

-
-
- -

O entendimento do DOM ajuda-o a projetar, depurar e manter seu CSS, pois o DOM é onde o seu CSS e o conteúdo do documento se unem.

- -

Ação: Analizando um DOM

- -

Para analizar um DOM, você precisa de um software especial. Aqui, você usa o DOM Inspector (DOMi) da Mozilla para analizar um DOM.

- -

Use seu navegador Mozilla para abrir seu documento simples.

- -

Na barra de menu do seu navegador, escolha Ferramentas – DOM Inspector, ou talvez Ferramentas – Desenvolvimento Web – DOM Inspector.

- - - - - - - - -
Mais detalhes
Se seu navegador Mozilla não tem o DOMi, você pode reinstalá-lo assegurando-se de escolher para instalar o componente de ferramentas da web. Então retorne a este tutorial. -

Se você não quiser instalar o DOMi, você pode pular esta seção e ir diretamente para a próxima página. Pulando esta seção você não interfere com o resto deste tutorial.

-
- -


- No DOMi, expanda os nós do seu documento clicando em suas flechas.

- -

Nota: O espaçamento em seu arquivo HTML faz com que o DOMi mostre alguns nós de texto vazios, que você pode ignorar.

- -

O resultado deve ser parecido com isto, dependendo do que você tenha expandido:

- - - - - - - -
-
-

│
- ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ▶╴STRONG │ │

-
-
- -

Quando você seleciona algum nó, você pode usar o painel direito do DOMi para achar mais sobre ele. Por exemplo, quando você seleciona um nó do texto, DOMi mostra para você o texto no painel da direita.

- -

Quando você seleciona um elemento nó, DOMi o analiza e fornece uma enorme quantidade de informações no seu painel direito. A informação sobre estilo é somente uma parte das informações que ele fornece.

- - - - - - - - -
Desafio
No DOMi, clique no nó STRONG. -

Use o painel direito do DOMi para achar onde fica a cor do nó (vermelho) e onde sua aparência é mais forte que o texto normal (negrito).

-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Se você tomou o desafio, você viu o estilo da informação em mais de um lugar interagir para criar o estilo final para um elemento.

- -

A próxima página explica mais sobre estas interações: Cascata e herança

- -

{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/conte\303\272do/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/conte\303\272do/index.html" deleted file mode 100644 index 523c408aad..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/conte\303\272do/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Conteúdo -slug: Web/CSS/Como_começar/Conteúdo -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Howto/Generated_content ---- -

{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}

- -

Esta página descreve algumas maneiras que você pode usar no CSS para adicionar conteúdo quando um documento é exibido.

- -

Você modifica sua folha de estilo para adicionar conteúdo de texto e uma imagem.

- -

Informação: Conteúdo

- -

Uma das vantagens importantes das CSS é que ele o ajuda a separar o estilo do documento do seu conteúdo. Mas há situações onde faz sentido especificar certo conteúdo como parte de sua folha de estilo, não como parte do seu documento.

- -

O conteúdo especificado em uma folha de estilo pode consistir em texto ou imagens. Você especifica o conteúdo em sua folha de estilo quando o conteúdo tem uma ligação próxima à estrutura do documento.

- - - - - - - - -
Mais detalhes
Especificar o conteúdo em uma folha de estilo pode causar complicações. Por exemplo, você pode ter versões diferentes da língua do seu documento que compartilham uma folha de estilo. Se parte da folha de estilo tem que ser traduzida, isto mostra que você precisa por estas partes da folha de estilo em arquivos separados e arrumá-los para então ligá-los com a versão apropriada da língua do seu documento. -

Estas complicações não surgem se o conteúdo que você especificou consistir em símbolos ou imagens que se aplicam em todas as línguas e culturas.

- -


- O conteúdo especificado em uma folha de estilo não se tornará parte do DOM.

-
- -

Conteúdo do texto

- -

CSS pode inserir um texto antes ou depois de um elemento. Para especificar isto, faça uma regra e adicione :before ou :after ao seletor. Na declaração, especifique a propriedade content com o conteúdo do texto como seu valor.

- - - - - - - - -
Exemplo
Esta regra adiciona o texto Referência: antes de todo elemento com a classe ref: -
- 
-.ref:before {
-  font-weight: bold;
-  color: navy;
-  content: "Referência: ";
-  }
-
-
-
- - - - - - - - -
Mais detalhes
O caractere de configuração de uma folha de estilo é por padrão o UTF-8, mas isto pode ser especificado na ligação, na própria folha de estilo ou por outras maneiras. Para detalhes, veja 4.4 CSS style sheet representation na CSS Specification. -

Caracteres individuais podem às vezes ser especificados por um mecanismo de escape que use o contra barra (\) com o caráter de escape. Por exemplo, \265B é um símbolo do xadrez para a rainha preta ♛. Para detalhes, veja Referring to characters not represented in a character encoding e também Characters and case em CSS Specification.

-
- -

Conteúdo da imagem

- -

Para adicionar uma imagem antes ou depois de um elemento, você pode especificar a URL de um arquivo de imagem no valor da propriedade content.

- - - - - - - - -
Exemplo
Esta regra adiciona um espaço e um ícone depois de cada ligação da classe glossary: -
- 
-a.glossary:after {content: " " url("../images/glossary-icon.gif");}
-
-
-
- -


- Para adicionar uma imagem ao fundo de um elemento, especifique a URL de um arquivo de imagem no valor da propriedade background. Isto é uma propriedade que especifica a cor do fundo, a imagem, como a imagem repete, e alguns outros detalhes.

- - - - - - - - -
Exemplo
Esta regra configura o fundo de um elemento específico, usando uma URL para especificar um arquivo de imagem. -

O seletor especifica o id do elemento. O valor no-repeat faz a imagem aparecer apenas uma vez:

- -
- 
-#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
-
-
-
- - - - - - - - -
Mais detalhes
Para informações sobre propriedades individuais que afetam o fundo, e sobre outras opções que você pode especificar para as imagens de fundo, veja The background na CSS Specification.
- -

Ação: Adicionando uma imagem de fundo

- -

Esta imagem é um quadrado branco com uma linha azul em baixo. Baixe o arquivo desta imagem no mesmo diretório do seu arquivo CSS:

- - - - - - - -
Image:Blue-rule.png
- -

(Por exemplo, clique com o botão direito sobre isto para abrir o menu de contexto, então escolha Salvar Imagem Como... e especifique o diretório que você está usando para este tutorial.)

- -

Edite o seu arquivo CSS e adicione esta regra ao corpo, configurando a imagem de fundo para a página inteira.

- -
-
background: url("Blue-rule.png");
-
-
- -

O valor repeat é o padrão, então isto não precisa ser especificado. A imagem é repetida horizontal e verticalmente, dando a aparência parecida com a de um papel de escrita com linhas:

- -
-

Image:Blue-rule-ground.png

- -
-
-

Cascading Style Sheets

-
- -
-

Cascading Style Sheets

-
-
-
- - - - - - - - -
Desafio
Baixe esta imagem: - - - - - - -
Image:Yellow-pin.png
- -

Adicione uma regra à sua folha de estilo então isto mostrará a imagem no começo de cada linha:

- -
-

Image:Blue-rule-ground.png

- -
-
image:Yellow-pin.png Cascading Style Sheets
- -
image:Yellow-pin.png Cascading Style Sheets
-
-
-
- -

O que vem depois?

- -

Uma maneira comum de adicionar conteúdo à folha de estilo é marcar os itens em listas. Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

A próxima página descreve como especificar o estilo para elementos de listas: Listas

- -

{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/cor/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/cor/index.html" deleted file mode 100644 index d5c15375d7..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/cor/index.html" +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: Cor -slug: Web/CSS/Como_começar/Cor -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}

- -

Esta página explica mais sobre como você pode especificar cores no CSS.

- -

Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.

- -

Informação: Cor

- -

Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black gray silver white 
primáriasred lime blue 
secundáriasyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
- -

 

- - - - - - - - -
Mais detalhes
Seu navegador pode suportar muitas cores nomeadas, como: - - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
- -

Para detalhes sobre esta lista extendida, veja: SVG color keywords no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.

-
- -


- Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos hexadecimais na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
- -


- Para a paleta total, especifique dois digitos hexadecimais por cada componente:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
- -

Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.

- - - - - - - - - - - -
Exemplos
Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Começe com vermelho puro: #f00
Para tornar isto mais pálido, adicione um pouco de verde e azul: #f77
Para tornar isto mais alaranjado, adicione um pouquinho mais de verde: #fa7
Para tornar isto mais escuro, reduza todos os componentes: #c74
Para reduzir a saturação, faça os componentes mais parecidos: #c98
Se você quiser deixar todos os componentes iguais, você obterá cinza: #ccc
-
Para uma sombra pastel como azul pálido: - - - - - - - - - - - - - -
Começe com branco puro: #fff
Reduza um pouco os outros componentes: #eef
-
- - - - - - - - -
Mais detalhes
Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens. -

Por exemplo, este marrom (vermelho escuro):

- -
- 
-rgb(128, 0, 0)
-
-
- -


- Para maiores detalhes sobre como especificar cores, veja: Colors na CSS Specification.

- -

Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: CSS2 System Colors na CSS Specification.

-
- -

Propriedades de cor

- -

Você já usou a propriedade color para textos.

- -

Você também já usou a propriedade background-color para mudar elementos de fundo.

- -

Fundos podem ser configurados para transparent para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.

- - - - - - - - -
Exemplo
As caixas de Exemplo neste tutorial usam este fundo amarelo pálido: -
- 
-background-color: #fffff4;
-
-
- -

As caixas de Mais detalhes usam esta paleta cinza:

- -
- 
-background-color: #f4f4f4;
-
-
-
- -

Ação: Usando códigos de cor

- -

Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)

- -
-
/*** CSS Tutorial: Página de Cor ***/
-
-/* Fonte da Página */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* Parágrafos */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* Letras Iniciais */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
-
-
- -

Atualize seu navegador para ver o resultado:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- - - - - - - - -
Desafio
No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado. -

(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.)

-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.

- -

A próxima página explica como você pode fazer exceções para separar rigorosamente: Conteúdo

- -

{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/css_leg\303\255vel/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/css_leg\303\255vel/index.html" deleted file mode 100644 index 08ede46aa3..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/css_leg\303\255vel/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: CSS legível -slug: Web/CSS/Como_começar/CSS_legível -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}

- -

Esta página discute o estilo e a gramática da linguagem CSS.

- -

Você muda a maneira em que seu arquivo de amostra CSS é exibido, para torná-lo mais legível.

- -

Informação: CSS legível

- -

Você pode adicionar espaço em branco e comentários na sua folha de estilo para fazê-la mais legível. Você pode também juntar seletores de grupo, quando as mesmas regras de estilo se aplicam aos elementos selecionados em meios diferentes.

- -

Espaço em branco

- -

Espaços em branco significam espaços reais, tabs e quebras de linha. Você pode adicionar espaços em branco para tornar suas folhas de estilo mais legíveis.

- -

Seu arquivo de amostra de CSS atualmente tem uma regra por linha, e quase o mínimo de espaço em branco. Em uma uma folha de estilo complexa esta disposição pode dificultar a leitura, dificultando também a manutenção da sua folha de estilo.

- -

A disposição que você escolhe é usualmente um preferência pessoal, mas se suas folhas de estilo são parte de projetos compartilhados, estes projetos podem ter suas próprias convenções.

- - - - - - - - -
Exemplos
Algumas pessoas gostam de uma diposição compacta que temos usado, somente dividindo a linha quando ela se torna muito longa: - 
-.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
- -

Algumas pessoas preferem uma propriedade-valor por linha:

- -
- 
-.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
-
- -

Algumas pessoas usam tabs – dois espaços, quatro espaços, ou um tab são comuns:

- -
- 
-.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
-
- -

Algumas pessoas gostam de enfileirar a linha verticalmente (mas é difícil de manter uma disposição assim):

- -
- 
-.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
-
- -

Algumas pessoas usam tabs para a disposição. Algumas pessoas usam somente espaços.

-
- -

Comentários

- -

Comentários em CSS começam com /* e terminam com */.

- -

Você pode usar comentários para fazer comentários reais na sua folha de estilo, e também para descomentar partes que estiverem temporariamente para propósito de testes.

- -

Para comentar parte da folha de estilo, coloque a parte em um comentário então o navegador ignorará isso. Tome cuidado onde você começa e termina o seu comentário. O resto da sua folha de estilo ainda deve ter a sintaxe correta.

- - - - - - - - -
Exemplo
-
- 
-/* Estilo para a letra C inicial no primeiro parágrafo */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
-
- -

Seletores agrupados

- -

Quando muitos elementos tiverem o mesmo estilo, você pode especificar um grupo de seletores, separando-os com comentários. A declaração se aplica a todos os elementos selecionados.

- -

Em outra parte da sua folha de estilo você pode especificar os mesmos seletores, de novo individualmente, para aplicar estilo individual às suas regras.

- - - - - - - - -
Exemplo
Esta regra faz os elementos H1, H2 and H3 da mesma cor. -

Isto é conveniente para especificar a cor em somente um lugar, no caso em que precisa ser alterado.

- -
- 
-/* cores para os cabeçalhos */
-h1, h2, h3 {color: navy;}
-
-
-
- -

Ação: Adicionando comentários e melhorando o arranjo

- -

Edite seu arquivo CSS, e assegure-se que ele tem todas as regras nele (em qualquer ordem):

- -
-
strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
-
- -

Faça isto mais legível rearranjando isto em um meio que possa ser achado lógicamente, adicionando espaços em branco e comentários da maneira que você achar melhor.

- -

Salve o arquivo e atualize a tela do seu navegador, assegure-se que as mudanças que você fez não afetaram o modo como a folha de estilo trabalha:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- - - - - - - - -
Desafio
Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha: - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

(Existe mais de uma maneira de fazer isto.)

-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Seu documento de amostra usou o texto em itálico e o texto com sublinhado. A próxima página descreve mais caminhos para especificar a aparência do texto no seu documento: Estilos de texto

- -

{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/disposi\303\247\303\243o/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/disposi\303\247\303\243o/index.html" deleted file mode 100644 index 0612aad9b5..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/disposi\303\247\303\243o/index.html" +++ /dev/null @@ -1,453 +0,0 @@ ---- -title: Disposição -slug: Web/CSS/Como_começar/Disposição -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}

- -

Esta página descreve algumas maneiras para ajustar a disposição do seu documento.

- -

Você muda a disposição do seu documento de amostra...

- -

Informação: Disposição

- -

Você pode usar as CSS para especificar vários efeitos visuais que mudam a disposição do seu documento. Algumas técnicas para especificação da disposição são avançadas,e além do alcance deste tutorial básico.

- -

Quando você desenha uma disposição que aparece similar em vários navegadores, sua folha de estilo interage com a folha de estilo padrão do navegador e o motor de disposição em alguns caminhos pode se tornar complexo. Isto é também uma matéria avançada, além do alcance deste tutorial básico.

- -

Esta página descreve algumas técnicas simples que você pode tentar.

- -

Estrutura do documento

- -

Se você quer controlar a disposição do seu documento, então você pode ter que mudar sua estrutura.

- -

A linguagem de marcação do seu documento pode ter tags com propósito geral para criar a estrutura. Por exemplo, no HTML você pode usar a tag DIV para criar a estrutura.

- - - - - - - - -
Exemplo
No seu documento de amostra, os parágrafos numerados sob o segundo título não tem um "recipiente" próprio. -

Sua folha de estilo não pode desenhar uma borda ao redor destes parágrafos, porque não há elemento especificado no seletor.

- -

Para fixar este problema estrutural, você pode adicionar uma tag DIV em torno dos parágrafos. Esta tag é única, então isto pode ser identificado por um atributo id:

- -
- 
-<H3 class="numbered">Parágrafos numerados</H3>
-<DIV id="numbered">
-<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>
-</DIV>
-
-
- -

Agora sua folha de estilo pode use uma regra para especificar bordas em tordo de ambas as listas:

- -
- 
-ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-  }
-
-
- -

O resultado deve ser como este:

- - - - - - - -
-

(A) Os oceanos

- -
-
    -
  • Ártico
    • -
  • Atlântico
    • -
  • Pacífico
    • -
  • Índico
    • -
  • Antártico
    • -
-
- -

(B) Parágrafos numerados

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
-
- -

Tamanhos das unidades

- -

Anteriormente neste tutorial, você especificou tamanhos em pixels (px). Estes são apropriados para alguns propósitos em um dispositivo de exposição como uma tela de computador. Mas quando o usuário muda o tamanho da fonte, sua disposição pode ficar errada.

- -

Para muitos propósitos é melhor especificar tamanhos com porcentagem ou em ems (em). Um em é nominalmente o tamanho da fonte corrente (a largura de uma letra m). Quando o usuário muda o tamanho da fonte, sua disposição ajusta-se automaticamente.

- - - - - - - - -
Exemplo
A borda da esquerda deste texto tem o tamanho especificado em pixels. -

A borda da direita tem o tamanho especificado em ems. No seu navegador, mude o tamanho da fonte para ver como a borda da direita se ajusta mas a borda da esquerda não:

- - - - - - - -
-
Redimensione-me por favor
-
-
- - - - - - - - -
Mais detalhes
Para outros dispositivos, outras unidades de comprimento são apropriadas. -

Há mais informação sobre isto em uma página anterior deste tutorial.

- -

Para detalhes completos sobre os valores e unidades que você pode usar, veja Values em CSS Specification.

-
- -

Disposição do texto

- -

Duas propriedades especificam como o conteúdo de um elemento é alinhado. Você pode usá-las para ajustes simples na disposição:

- - - -
-
Alinha o conteúdo. Use um destes valores: left, right, center, justify
-
- - - -
-
Indenta o conteúdo, colocando o espaço que você especificar.
-
- -

Estas propriedades aplicam-se a qualquer conteúdo como texto no elemento, não somente ao texto atual. Lembre-se que elas são herdadas pelo elemento filho, então você pode ter que desativá-las nos elementos filhos para não se surpreender com os resultados.

- - - - - - - - -
Exemplo
Para centralizar títulos: -
- 
-h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-  }
-
-
- -

Resulta em:

- - - - - - - -
-

(A) Os oceanos

-
- -

Em um documento HTML, o conteúdo que você vê abaixo do título não é contido estruturalmente pelo título. Então quando você alinha um título como isto, as tags abaixo do título não são afetadas pela herança.

-
- -

Flutuantes

- -

A propriedade float força um elemento para a esquerda ou direita. Isto é uma maneira simples de controlar sua posição e tamanho.

- -

O resto do conteúdo do documento normalmente flui ao redor do elemento flutuado. Você pode controlar isto usando a propriedade clear em outros elementos para fazê-los permanecer sem flutuantes.

- - - - - - - - -
Exemplo
Em seu documento de amostra, as listas esticam através da janela. Você pode prevenir isto flutuando-os para a esquerda. -

Para manter os títulos no lugar, você precisa também especificar que eles permaneçam limpos de flutuantes à sua esquerda:

- -
- 
-ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
- -

O resultado deve se parecer com isto:

- - - - - - - -
-

(A) Os oceanos

- -
-
    -
  • Ártico
    • -
  • Atlântico
    • -
  • Pacífico
    • -
  • Índico
    • -
  • Antártico
    • -
-
- -

(B) Parágrafos numerados

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
- -

(Um pequeno enchimento é necessário à direita das caixas, onde a borda fica muito perto do texto.)

-
- -

Posicionamento

- -

Você pode especificar a posição dos elementos de quatro maneiras, especificando a propriedade position e um dos valores seguintes:

- -

Estas são propriedades avançadas. É possível usá-las de maneiras simples — esta é a razão pela qual elas são mencionadas neste tutorial básico. Mas usando-as para disposições complexas pode-se dificultar.

- - - -
-
A posição do elemento é alterada relativamente à sua posição normal.
-
Use-o para mover um elemento por uma quantidade especificada. Às vezes você pode usar a margem do elemento para obter o mesmo efeito.
-
- - - -
-
A posição do elemento é fixa.
-
Especifique a posição do elemento relativa à janela do documento. Mesmo que o resto do documento seja rolado, o elemento permanece fixo.
-
- - - -
-
A posição do documento é fixada relativamente a um elemento pai.
-
Somente um elemento pai que esteja posicionado com relative, fixed ou absolute o fará.
-
- -
-
Você pode tornar qualquer elemento principal apropriado, especificando position: relative; sem especificar qualquer movimento.
-
- - - -
-
O padrão. Use este valor caso precise desativar a posição explicitamente.
-
- -

Agora, com estes valores da propriedade position (exeto para static), especifique uma ou mais propriedades: top, right, bottom, left, width, height para identificar onde você quer que o elemento apareça, e talvez também seu tamanho.

- - - - - - - - -
Exemplo
Para posicionar dois elementos no topo, crie um "recipiente" principal em seu documento com os dois elementos dentre dele: -
- 
-<DIV id="parent-div">
-<P id="forward">/</P>
-<P id="back">\</P>
-</DIV>
-
-
- -

Na sua folha de estilo, faça a posição principal relative. Ela não precisa que seja especificado qualquer movimento atual. Faça a posição subordinada absolute:

- -
- 
-#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-  }
-
-#forward, #back {
-  position: absolute;
-  margin:0px;
-  top: 0px;
-  left: 0px;
-  }
-
-#forward {
-  color: blue;
-  }
-
-#back {
-  color: red;
-  }
-
-
- -

O resultado deve ser como isto, com a contra barra (\) sobre a barra (/):

- -
-

/

- -

\

-
- - - - - - - -
 
- -

 

-
- - - - - - - - -
Mais detalhes
A história completa sobre posicionamento toma dois complexos capítulos em CSS Specification: Visual formatting model e Visual formatting model details. -

Se você está desenhando folhas de estilo para trabalharem em vários navegadores, então você também precisa levar em conta as diferenças na maneira em que os navegadores interpretam o padrão, e talvez bugs em algumas versões de alguns navegadores.

-
- -

Ação: Especificando a disposição

- -

Mude seu documento de amostra e sua folha de estilo usando os exemplos anteriores nas seções Estrutura do documento e Flutuantes.

- -

No exemplo dos Flutuantes, adicione enchimento para separar o texto da borda direita por 0,5 em.

- - - - - - - - -
Desafio
Mude seu documento de amostra, adicionando esta tag perto do fim, somente antes de </BODY> - 
-<IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
- -

Se você não baixou o arquivo de imagem anteriormente neste tutorial, baixe-o agora:

- - - - - - - -
Image:Yellow-pin.png
- -

Prediga onde a imagem irá aparecer no seu documento. Então atualize seu navegador para ver se você estava certo.

- -

Adicione uma regra à sua folha de estilo que fixe a imagem no topo e a direita do seu documento.

- -

Atualize seu navegador e diminua o tamanho da janela. Cheque se a imagem permanece no topo e a direita mesmo que você role seu documento:

- -
-
-

(A) Os oceanos

- -
-
    -
  • Ártico
    • -
  • Atlântico
    • -
  • Pacífico
    • -
  • Índico
    • -
  • Antártico
    • -
-
- -

(B) Parágrafos numerados

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -

 

- -
Yellow map pin
-
-
-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

A próxima página descreve seletores para regras mais avançadas das CSS, e algumas maneiras específicas de estilizar tabelas: Tabelas

- -

{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/estilos_de_texto/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/estilos_de_texto/index.html" deleted file mode 100644 index 373688d00f..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/estilos_de_texto/index.html" +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Estilos de texto -slug: Web/CSS/Como_começar/Estilos_de_texto -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}

- -

Esta página dá mais exemplos de estilos de texto.

- -

Você modifica sua folha de estilo de amostra para usar diferentes fontes.

- -

Informação: Estilos de texto

- -

CSS tem várias propriedades para estilos de texto.

- -

Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, font, que você pode usar para especificar várias coisas de uma vez — por exemplo:

- - - - - - - - - - -
Exemplo
-
- 
-p {font: italic 75%/125% "Comic Sans MS", cursive;}
-
-
- -

Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.

- -

O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).

- -

O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).

- -

A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo normal)

-
- -

Tipos de fonte

- -

Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.

- -

Acabe a lista com um dos tipos de fontes internas padrão: serif, sans-serif, cursive, fantasy ou monospace. (Algumas destas podem ser configuradas nas Opções do seu navegador.)

- -

Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.

- -

Para especificar um tipo de fonte por conta própria, use a propriedade font-family.

- -

Tamanho da fonte

- -

Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.

- -

Você pode usar alguns valores internos para o tamanho das fontes, como: small, medium e large. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: smaller, larger, 150% ou 1.5em.

- -

Se necessário você pode especificar um tamanho atual, como: 12px (12 pixels) para um instrumento de exibição ou 12pt (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.

- -

Para especificar um tamanho de fonte por conta própria, use a propriedade font-size.

- -

Altura da linha

- -

A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.

- -

Para especificar a altura da linha por conta própria, use a propriedade line-height.

- -

Decoração

- -

A propriedade separada text-decoration pode especificar outros estilos, como underline ou line-through. Você pode configurar isto para none removendo explicitamente qualquer decoração.

- -

Outras propriedades

- -

Para especificar itálico por conta própria, use font-style: italic;
- Para especificar negrito por conta própria, use font-weight: bold;
- Para especificar letras minúsculas por conta própria, use font-variant: small-caps;

- -

Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor normal ou inherit.

- - - - - - - - -
Mais detalhes
Você pode especificar os estilos do texto em uma variedade de outras maneiras. -

Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.

- -

Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita font, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).

- -

Para maiores detalhes sobre as propriedades relacionadas às fontes, veja Fonts na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja Text.

-
- -

Ação: Especificando fontes

- -

Para um documento de amostra, você pode escolher a fonte do elemento BODY e o resto do documento herda as configurações.

- -

Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:

- -
-
body {font: 16px "Comic Sans MS", cursive;}
-
-
- -

Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.

- -

Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

Da barra de menu do seu navegador, escolha Exibir – Tamanho do Texto – Aumentar. Mesmo que o estilo especificado seja 16 pixels, um usuário lendo o documento pode mudar o tamanho.

- - - - - - - - -
Desafio
Sem mudar mais nada, faça todas as seis letras iniciais duas vezes o tamanho na fonte serifada padrão do navegador: - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Seu documento de amostra está pronto para usar várias cores nomeadas. A próxima página lista os nomes das cores padrão e explica como você pode especificar outras: Cor

- -

{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/gr\303\241ficos_svg/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/gr\303\241ficos_svg/index.html" deleted file mode 100644 index 074f78c92d..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/gr\303\241ficos_svg/index.html" +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Gráficos SVG -slug: Web/CSS/Como_começar/Gráficos_SVG -tags: - - 'CSS:Como_começar' -translation_of: Web/SVG/Tutorial/SVG_and_CSS ---- -

{{ PreviousNext("CSS:Como começar:Interfaces de usuário XUL", "CSS:Como começar:Dados XML") }}

- -

Esta página ilustra a linguagem especializada para criação de gráficos: SVG.

- -

Você cria uma simples demonstração que roda em seu navegador Mozilla com SVG ativado.

- -

Informação: SVG

- -

SVG (Scalable Vector Graphics) é uma linguagem baseada em XML para criação de gráficos.

- -

Ela pode ser usada para imagens estáticas, e também para animações e interfaces de usuário.

- -

Como outras linguagens baseadas em XML, SVG suporta folhas de estilo CSS então você pode separar o estilo de um gráfico do seu conteúdo.

- -

As folhas de estilo que você usa com linguagens de marcação em outros documentos também podem especificar o URL de um gráfico SVG onde uma imagem é requerida. Por exemplo, uma folha de estilo que você usa com documentos HTML pode especificar uma URL de um gráfico SVG no valor da propriedade background.

- - - - - - - - -
Mais detalhes
Enquanto escrevo (metade de 2005), somente algumas novas construções dos navegadores Mozilla tem suporte a SVG contruída. Você pode adicionar suporte ao SVG à outras versões instalando um plugin tal como este fornecido pela {{ mediawiki.external('http://www.adobe.com/svg/viewer/install/main.html Adobe') }}. -

Para mais informações sobre SVG no Mozilla, veja a página SVG neste wiki.

-
- -

Ação: Uma demonstração SVG

- -

Crie um novo documento SVG de um arquivo de texto simples, doc8.svg. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:

- -
-
<?xml version="1.0" standalone="no"?>
-
-<?xml-stylesheet type="text/css" href="style8.css"?>
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg width="600px" height="600px" viewBox="-300 -300 600 600"
-  xmlns="http://www.w3.org/2000/svg" version="1.1"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-
-<title>SVG demonstration</title>
-<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
-
-<defs>
-  <g id="segment" class="segment">
-    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
-    </g>
-  <g id="quadrant">
-    <use xlink:href="#segment"/>
-    <use xlink:href="#segment" transform="rotate(18)"/>
-    <use xlink:href="#segment" transform="rotate(36)"/>
-    <use xlink:href="#segment" transform="rotate(54)"/>
-    <use xlink:href="#segment" transform="rotate(72)"/>
-    </g>
-  <g id="petals">
-    <use xlink:href="#quadrant"/>
-    <use xlink:href="#quadrant" transform="rotate(90)"/>
-    <use xlink:href="#quadrant" transform="rotate(180)"/>
-    <use xlink:href="#quadrant" transform="rotate(270)"/>
-    </g>
-  <radialGradient id="fade" cx="0" cy="0" r="200"
-      gradientUnits="userSpaceOnUse">
-    <stop id="fade-stop-1" offset="33%"/>
-    <stop id="fade-stop-2" offset="95%"/>
-    </radialGradient>
-  </defs>
-
-<text id="heading" x="-280" y="-270">
-  SVG demonstration</text>
-<text  id="caption" x="-280" y="-250">
-  Move your mouse pointer over the flower.</text>
-
-<g id="flower">
-  <circle id="overlay" cx="0" cy="0" r="200"
-    stroke="none" fill="url(#fade)"/>
-  <use id="outer-petals" xlink:href="#petals"/>
-  <use id="inner-petals" xlink:href="#petals"
-    transform="rotate(9) scale(0.33)"/>
-  </g>
-
-</svg>
-
-
- -

Crie um novo arquivo CSS, style8.css. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:

- -
-
/*** Demonstração SVG ***/
-
-/* página */
-svg {
-  background-color: beige;
-  }
-
-#heading {
-  font-size: 24px;
-  font-weight: bold;
-  }
-
-#caption {
-  font-size: 12px;
-  }
-
-/* flor */
-#flower:hover {
-  cursor: crosshair;
-  }
-
-/* gradiente */
-#fade-stop-1 {
-  stop-color: blue;
-  }
-
-#fade-stop-2 {
-  stop-color: white;
-  }
-
-/* outras pétalas */
-#outer-petals {
-  opacity: .75;
-  }
-
-#outer-petals .segment-fill {
-  fill: azure;
-  stroke: lightsteelblue;
-  stroke-width: 1;
-  }
-
-#outer-petals .segment-edge {
-  fill: none;
-  stroke: deepskyblue;
-  stroke-width: 3;
-  }
-
-#outer-petals .segment:hover > .segment-fill {
-  fill: plum;
-  stroke: none;
-  }
-
-#outer-petals .segment:hover > .segment-edge {
-  stroke: slateblue;
-  }
-
-/* pétalas internas */
-#inner-petals .segment-fill {
-  fill: yellow;
-  stroke: yellowgreen;
-  stroke-width: 1;
-  }
-
-#inner-petals .segment-edge {
-  fill: none;
-  stroke: yellowgreen;
-  stroke-width: 9;
-  }
-
-#inner-petals .segment:hover > .segment-fill {
-  fill: darkseagreen;
-  stroke: none;
-  }
-
-#inner-petals .segment:hover > .segment-edge {
-  stroke: green;
-  }
-
-
- -

Abra o documento no seu navegador com SVG ativado. Mova o ponteiro do seu mouse sobre o gráfico.

- -

Este wiki não suporta página com SVG, então não é possível demonstrá-lo aqui. Os gráficos deverão parecer com isto:

- - - - - - - -
SVG demonstration
- -

Notas sobre esta demonstração:

- - - -

 

- - - - - - - - -
Desafio
Mude a folha de estilo de modo que as pétalas interiores tornem-se todas rosa quando o ponteiro do mouse estiver sobre alguma delas, sem mudar a maneira como as outras pétalas trabalham.
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Nesta demonstração, seu navegador com SVG ativado já sabe como mostrar elementos SVG. A folha de estilo somente modifica a exibição em certos caminhos. Isto também é verdade para documentos HTML e XUL. Mas você pode usar o CSS para propósitos gerais em documentos XML, onde não é predefinido um caminho para exibir os elementos. A próxima página demonstra isto: Dados XML

- -

{{ PreviousNext("CSS:Como começar:Interfaces de usuário XUL", "CSS:Como começar:Dados XML") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/index.html" deleted file mode 100644 index fa514756bd..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Como começar -slug: Web/CSS/Como_começar -tags: - - CSS - - 'CSS:Como_começar' - - Todas_as_Categorias -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

 

- -

Introdução

- -

Este tutorial o introduz às CSS (Cascading Style Sheets - Folhas de Estilo em Cascata).

- -

Este tutorial o orienta nos recursos básicos de CSS com exemplos práticos que você pode experimentar sozinho em seu computador. Ele é dividido em duas partes:

- - - - - -

Este tutorial é baseado na CSS 2.1 Specification.

- -

Quem deve ler este tutorial?

- -

Este tutorial é direcionado para iniciantes em CSS, mas você também poderá usá-lo caso tenha alguma experiência em CSS.

- -

Se você é um iniciante em CSS, leia a Parte I deste tutorial para entender CSS e aprender a usá-lo. Em seguida, leia a Parte II para entender o escopo de CSS no Mozilla.

- -

Se você conhece CSS, poderá ignorar as partes desse tutorial que já conhece e ler apenas as partes que lhe interessam.

- -

Se você já tem experiência em CSS mas não no Mozilla, pode ir direto para a Parte II.

- -

O que você precisa antes de começar?

- -

Para melhor aproveitar este tutorial, você precisa de um editor de arquivos de texto e um navegador Mozilla (Firefox, Mozilla Suite ou Seamonkey). Você também deve saber como utilizá-los de um modo básico.

- -

Se não deseja editar arquivos, você pode apenas ler o tutorial e observar as imagens, mas este não é o melhor modo de aprendizado.

- -

Poucas partes deste tutorial podem requerer outro software Mozilla. Essas partes são opcionais. Você pode ignorar essas partes se não desejar fazer o download de outro software Mozilla.

- -

Nota: As CSS oferece modos de se trabalhar com cores, de modo que partes deste tutorial dependem de cores. Você poderá utilizar essas partes facilmente somente se tiver um monitor colorido e uma visão colorida normal.

- -

Como utilizar este tutorial

- -

Para utilizar este tutorial, leia cuidadosamente as páginas e em seqüência. Se perder uma página, você poderá ter dificuldades para entender as páginas posteriores.

- -

Em cada página, utilize a seçãoInformações para entender como o CSS funciona. Utilize a seçãoAções para tentar usar o CSS em seu próprio computador.

- -

Para testar seus conhecimentos, faça o teste ao final de cada página. As soluções para alguns testes são reveladas nas páginas posteriores no tutorial.

- -

Para se aprofundar em CSS, leia as informações nas caixas entituladasMais detalhes. Utilize os links para localizar informações referentes às CSS.

- -

Tutorial Parte I

- -

Um guia passo-a-passo para CSS.

- -
    -
  1. O que é CSS
    2. -
  2. Porque usar CSS
    3. -
  3. Como o CSS trabalha
    4. -
  4. Cascata e herança
    5. -
  5. Seletores
    6. -
  6. CSS legível
    7. -
  7. Estilos de texto
    8. -
  8. Cor
    9. -
  9. Conteúdo
    10. -
  10. Listas
    11. -
  11. Caixas
    12. -
  12. Disposição
    13. -
  13. Tabelas
    14. -
  14. Média
    15. -
- -

Tutorial Parte II

- -

Exemplos que mostram o escopo da CSS no Mozilla.

- -
    -
  1. JavaScript
    2. -
  2. XBL bindings
    3. -
  3. Interfaces de usuário XUL
    4. -
  4. Gráficos SVG
    5. -
  5. Dados XML
    6. -
- -

{{ languages( { "en": "en/CSS/Getting_Started", "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", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/javascript/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/javascript/index.html" deleted file mode 100644 index f752fdbf6c..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/javascript/index.html" +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: JavaScript -slug: Web/CSS/Como_começar/JavaScript -tags: - - 'CSS:Como_começar' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}

- -

Esta é a Parte II do tutorial. A Parte II contém alguns exemplos que mostram o escopo do CSS no Mozilla.

- -

Cada página na Parte II ilustra como o CSS interage com algumas outras tecnologias. Estas páginas não são desenhadas para ensinar como usar estas outras tecnologias. Vá para outros tutorias para aprender isto em detalhes.

- -

Em vez disso, estas páginas são desenhadas para ilustrar os muitos usos do CSS. Para usar estas páginas, você deve ter um conhecimento em CSS, mas você não precisa qualquer conhecimento em outras tecnologias.

- -

Informação: JavaScript

- -

JavaScript é uma linguagem de programação. Quando você usa alguma aplicação Mozilla (por exemplo, seu naverador Mozilla) muito do código que o seu computador roda é escrito em JavaScript.

- -

JavaScript pode interagir com folhas de estilo, permitindo a você escrever programas que mudem o estilo do documento dinamicamente.

- -

Existem três maneiras para fazer isto:

- - - - - - - - - - -
Mais detalhes
Para mais informações sobre JavaScript no Mozilla, veja a página JavaScript neste wiki.
- -

Ação: Uma demonstração de JavaScript

- -

Criei um novo documento HTML, doc5.html. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:

- -
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Como Começar Mozilla CSS - Demonstração JavaScript</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style5.css">
-<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
-</HEAD>
-
-<BODY>
-<H1>JavaScript de amostra</H1>
-
-<DIV id="square"></DIV>
-
-<BUTTON type="button" onclick="doDemo(this);">Clique Aqui</BUTTON>
-
-</BODY>
-</HTML>
-
-
- -

Crie um novo arquivo CSS, style5.css. Copie e cole o conteúdo daqui:

- -
-
/*** Demonstração JavaScript ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-  }
-
-button {
-  padding: .5em 2em;
-  }
-
-
- -

Crie um novo arquivo de texo, script5.js. Copie e cole o conteúdo daqui:

- -
-
// Demonstração JavaScript
-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")
-  }
-
-
- -

Abra o documento no seu navegador e pressione o botão.

- -

Este wiki não suporta o JavaScript nas páginas, então não é possível mostrar a demonstração aqui. Deve se parecer como isto, antes e depois de você pressionar o botão:

- - - - - - - - -
- - - - - - -
-

Demonstração JavaScript

-
- 		- - - - - - -
-

Demonstração JavaScript

-
-
- -

Notas sobre esta demonstração:

- - - - - - - - - - -
Desafio
Mude o script de modo que o quadrado salte para a direita em 20 em quando sua cor mudar, e salte para trás mais tarde.
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Nesta demonstração, o documento HTML linka o script mesmo que somente o elemento button use o script. Mozilla extende o CSS para que possa ser ligado ao código JavaScript (e também conteúdo e outras folhas de estilo) para elementos selecionados. A próxima página demonstra isto: XBL bindings

- -

{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/listas/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/listas/index.html" deleted file mode 100644 index cff2108b51..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/listas/index.html" +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: Listas -slug: Web/CSS/Como_começar/Listas -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}

- -

Esta página descreve como você pode usar as CSS para especificar a aparência das listas.

- -

Você cria um novo documento de amostra contendo listas, e uma nova folha de estilo que estiliza as listas.

- -

Informação: Listas

- -

Se você resolveu o desafio da última página (Conteúdo), então você viu como você pode adicionar conteúdo antes de qualquer elemento para mostrar isto como o item de uma lista.

- -

CSS proporciona propriedades especiais que foram designadas para listas. Geralmente é mais conveniente usar estas propriedades sempre que você puder.

- -

Para especificar o estilo para uma lista, use a propriedade list-style para especificar o tipo de marcador.

- -

O seletor nas regras do seu CSS pode selecionar qualquer um dos elementos na sua lista de itens (por exemplo, LI), ou isto pode selecionar o elemento primário da lista (por exemplo, UL). Então os elementos da lista herdam o estilo.

- -

Listas não ordenadas

- -

Em uma lista não ordenada, cada item da lista é marcado da mesma maneira.

- -

CSS tem três tipos de marcador. Aqui está como seu navegador os mostra:

- - - -

Alternativamente, você pode especificar a URL de uma imagem.

- - - - - - - - -
Exemplo
Estas regras especificam diferentes marcadores para diferentes classes de itens da lista: -
- 
-li.open {list-style: circle;}
-li.closed {list-style: disc;}
-
-
- -

Quando estas classes são usadas em uma lista, elas distinguem entre os itens aberto (open) e fechado (closed):

- -
- 
-<UL>
-  <LI class="open">Lorem ipsum</LI>
-  <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>
-
-
- -

O resultado será parecido com:

- - - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
- -

Listas ordenadas

- -

Em uma lista ordenada, cada item da lista é marcado diferentemente para mostrar a posição em seqüência.

- -

Use a propriedade list-style para especificar o tipo de marcador:

- - - - - - - - - - -
Exemplo
Esta regra especifica os elementos OL com a classe info, os itens são identificados com letras maiúsculas. -
- 
-ol.info {list-style: upper-latin;}
-
-
- -

Os elementos LI na lista herdam este estilo:

- - - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
- - - - - - - - -
Mais detalhes
A propriedade list-style é uma propriedade "abreviada". Em folhas de estilo complexas você pode preferir usar propriedades separadas para configurar valores separados. Para detalhes sobre estas propriedades separadas, e mais detalhes sobre como as CSS especificam listas, veja Lists na CSS Specification. -

Se você está usando a linguagem de marcação como o HTML que proporciona tags convecionais para listas não ordenadas (UL) e ordenadas (OL), então é bom praticar usando tags da maneira que foi explicado. Contudo, você pode usar as CSS para fazer UL mostrar ordenado e OL para mostrar não ordenado se você precisar.

- -

Os navegadores diferem no modo como implementam os estilos das listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.

-
- -

Contadores

- -
-

Note:  Alguns navegadores não suportam contadores.

-
- -

Você pode usar contadores para numerar quaisquer elementos, não somente itens listados. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.

- -

Para especificar uma numeração, você precisa de um contador com um nome que você especifica.

- -

Em alguns elementos antes da contagem começar, re-inicie o contador com a propriedade counter-reset e o nome do seu contador. O principal dos elementos que você estiver contando é um bom lugar para isto, mas você pode usar qualquer elemento que esteja antes da lista de itens.

- -

Em cada elemento que o contador incrementar, use a propriedade counter-increment e o nome do seu contador.

- -

Para mostrar seu contador, adicione :before ou :after ao seletor e use a propriedade content (como fez na página anterior, Conteúdo).

- -

No valor da propriedade content, especifique counter() com o nome do seu contador. Opcionalmente especifique um tipo. Os tipos são como na seção passada em Listas ordenadas.

- -

Normalmente o elemento que mostra o contador também incrementa isto.

- - - - - - - - -
Exemplo
Esta regra inicializa um contador para cada elemento H3 com a classe numbered: -
- 
-h3.numbered {counter-reset: mynum;}
-
-
- -

Esta regra mostra e incrementa o contador para cada elemento P com a classe numbered:

- -
- 
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
-
- -

O resultado se parece com isto:

- - - - - - - -
Cabeçalho - -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
- - - - - - - - -
Mais detalhes
Você não pode usar contadores a menos que você saiba que todos os que lêem o seu documento têm um navegador que os suporta. -

Se você puder usar contadores, eles tem a vantagem de que você pode estilizar os contadores separadamente da lista de itens. No exemplo anterior, os contadores estão em negrito mas a os itens da lista não.

- -

Você pode também usar contadores em meios mais complexos — por exemplo, para numerar seções, cabeçalhos, sub-cabeçalhos e parágrafos em documentos formais. Para detalhes, veja Automatic counters and numbering em CSS Specification.

-
- -

Ação: Listas denominadas

- -

Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui, tendo certeza de que você rola o mouse para pegar tudo isto:

- -
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-<HEAD>
-<TITLE>Documento de amostra 2</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style2.css">
-</HEAD>
-<BODY>
-
-<H3 id="oceans">Os oceanos</H3>
-<UL>
-<LI>Ártico</LI>
-<LI>Atlântico</LI>
-<LI>Pacífico</LI>
-<LI>Índico</LI>
-<LI>Antártico</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>
-
-
- -

Faça uma nova folha de estilo, style2.css. Copie e cole o conteúdo daqui:

- -
-
/* parágrafos numerados */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
-
- -

Se a disposição e o comentário não estiver ao seu gosto, mude-os.

- -

Abra o documento no seu navegador. Se o seu navegador suporta contadores, você verá algo semelhante ao exemplo abaixo. Se o seu navegador não suporta contadores, então você não verá os números (e provavelmente nem sequer os dois pontos (:)):

- - - - - - - -
-

Os oceanos

- -
    -
  • Ártico
    • -
  • Atlântico
    • -
  • Pacífico
    • -
  • Índico
    • -
  • Antártico
    • -
- -

Parágrafos numerados

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- - - - - - - - -
Desafios
Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais Romanos de i até v: - - - - - - -
-

Os oceanos

- -
    -
  • Ártico
    • -
  • Atlântico
    • -
  • Pacífico
    • -
  • Índico
    • -
  • Antártico
    • -
-
- -


- Se o seu navegador suporta contadores, mude sua folha de estilo para identificar o cabeçalho com letras maiúsculas em parênteses como isto:

- - - - - - - -
-

(A) Os oceanos

- -

. . .

- -

(B) Parágrafos numerados

- -

. . .

-
-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Quando seu navegador exibe seu documento de amostra, cria espaços ao redor dos elementos quando eles são exibidos na página.

- -

A próxima página descreve como você pode usar as CSS para trabalhar com formas subjacentes de elementos: Caixas

- -

{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/m\303\255dia/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/m\303\255dia/index.html" deleted file mode 100644 index 0038962474..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/m\303\255dia/index.html" +++ /dev/null @@ -1,433 +0,0 @@ ---- -title: Média -slug: Web/CSS/Como_começar/Mídia -tags: - - 'CSS:Como_começar' -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -

{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}

- -

Muitas das páginas neste tutorial focalizaram nas propriedades e nos valores das CSS que você pode usar para especificar o modo de exibir o documento.

- -

Esta página mostra novamente a proposta e a estrutura das folhas de estilo CSS.

- -

Informação: Média

- -

A proposta das CSS é especificar como os documentos são apresentados ao usuário. A apresentação pode tomar mais de uma forma.

- -

Por exemplo, você provavelmente está lendo esta página em um dispositivo de exibição. Mas você pode também querer projetá-lo em uma tela para uma grande audiência, ou imprimi-la. Estas diferentes mídias podem ter diferentes características. CSS proporciona maneiras para apresenter um documento diferentemente em diferentes mídias.

- -

Para especificar regras específicas para um tipo de mídia, use @media seguido do tipo de mídia e de chaves para incluir as regras

- - - - - - - - -
Exemplo
Um documento em um site na web tem uma área de navegação para permitir ao usuário mover em torno do site. -

Na linguagem de marcação, o elemento principal da área de navegação tem o id nav-area.

- -

Quando o documento é impresso a área de navegação não tem propósito, então a folha de estilo remove-a completamente:

- -
- 
-@media print {
-  #nav-area {display: none;}
-  }
-
-
-
- -

Alguns tipos de mídia comuns são:

- - - - - - - - - - - - - - - - - - - - -
screenExposição na tela do computador
printMídias paginadas
projectionExposição projetada
allTodas as mídias (o padrão)
- - - - - - - - -
Mais detalhes
Existem outras maneiras para especificar o tipo de mídia com uma série de regras. -

A linguagem de marcação do documento permite o tipo de mídia tornar-se específico quando a folha de estilo é ligada ao documento. Por exemplo, em HTML você pode opcionalmente especificar o tipo de mídia com o atributo media na tag LINK.

- -

Em CSS você pode usar @import no começo da folha de estilo para importar outras folhas de estilo de uma URL, opcionalmente especificando o tipo de mídia.

- -

Usando estas técnicas você pode separar regras de estilo para diferentes tipos de mídia em diferentes aquivos. Esta é algumas vezes uma maneira útil para estruturar sua folha de estilos.

- -

Para detalhes completos sobre tipos de mídia, veja Media em CSS Specification.

- -

Existem mais exemplos da propriedade display em uma página posterior neste tutorial: Dados XML.

-
- -

Impressão

- -

CSS possui suporte específico para impressão e para mídias paginadas em geral.

- -

Uma regra @page pode configurar as margens da página. Para imprimir frente e verso, você pode especificar as margens separadamente para @page:left e @page:right.

- -

Para mídias impressas, você normalmente usa unidades de comprimento apropriadas em polegadas (in) e pontos (pt = 1/72 polegadas), ou centímetros (cm) e milímetros (mm). É igualmente apropriado o uso de ems (em) para combinar tamanhos de fontes, e porcentagens (%).

- -

Você pode controlar como o conteúdo do documento quebra através de limites de página, usando as propriedades page-break-before, page-break-after e page-break-inside.

- - - - - - - - -
Exemplos
Esta regra configura as margens da página para uma polegada em todos os quatro lados: -
- 
-@page {margin: 1in;}
-
-
- -

Esta regra assegura que todos os elementos H1 comecem em uma nova página:

- -
- 
-h1 {page-break-before: always;}
-
-
-
- - - - - - - - -
Mais detalhes
Para detalhes completos sobre o suporte das CSS para páginas de mídia, veja Paged media em CSS Specification. -

Como outras características das CSS, imprimir depende do seu navegador e de suas configurações. Por exemplo, seu navegador Mozilla proporciona por padrão margens, cabeçalhos e rodapés quando é impresso. Quando outros usuários imprimem seu documento, você provavelmente não poderá predizer o navegador e as configurações que eles usarão, então você provavelmente não poderá controlar os resultados completamente.

-
- -

Interfaces do utilizador

- -

CSS tem algumas propriedades especiais para dispositivos que suportem a interface de usuário, como a tela do computador. Isto faz a aparência do documento mudar dinamicamente como o usuário trabalha com a interface.

- -

Não existe um tipo de mídia especial para dispositivos com interfaces de usuários.

- -

Existem cinco seletores especiais:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SeletorSeleciona
E:hoverQualquer elemento E que tenha um ponteiro sobre ele
E:focusQualquer elemento E que tenha um foco no teclado
E:activeO elemento E que é envolvido na corrente ação do usuário
E:linkQualquer elemento E que seja um hiperlink para uma URL que o usuário não visitou recentemente
E:visitedQualquer elemento E que seja um hiperlink para uma URL que o usuário visitou recentemente
- -

A propriedade cursor especifica a forma do ponteiro: Algumas das formas comuns são como segue. Coloque seu mouse sobre os itens nesta lista para ver as formas comuns dos ponteiros no seu navegador:

- - - - - - - - - - - - - - - - - - - - - - - - -
SeletorSeleciona
pointerIndica um link
waitIndica que o programa não pode aceitar a entrada
progressIndica que o programa está trabalhando, mas ainda pode aceitar a entrada
defaultO padrão (usualmente uma flecha)
- -


- Uma propriedade outline cria um contorno que é normalmente usado para indicar foco do teclado. Estes valores são similares aos da propriedade border, exceto que você não pode especificar lados individuais.

- -

Algumas outras características das interfaces de usuário são implementadas usando atributos, de uma maneira normal. Por exemplo, um elemento que está desabilitado ou somente leitura tem o atributo disabled ou o atributo readonly. Seletores podem especificar estes atributos como qualquer outros atributos, usando colchetes: {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

- - - - - - - - -
Exemplo
Estas regras especificam estilos para um botão que muda dinamicamente como a interação do usuário com isso: -
- 
-.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-
-
- -

Este wiki não suporta uma interface de usuário na página, então estes botões não são "clicáveis". Aqui estão algumas imagens estáticas para ilustrar a idéia:

- - - - - - - -
- - - - - - - - - - - - - - - - -
Clique AquiClique AquiClique Aqui
 
desativadonormalativo
-
- -

Um botão plenamente funcional também tem um contorno escuro em toda a sua volta quando isto é o padrão, e um contorno pontilhado na face do botão quando ele é focado pelo teclado. Isto pode também ter um efeito quando o ponteiro está sobre ele.

-
- - - - - - - - -
Mais detalhes
Para mais informações sobre interfaces de usuário em CSS, veja User interface em CSS Specification. -

Existe um exemplo da linguagem de marcação Mozilla para interfaces de usuário, XUL, na segunda parte deste tutorial.

-
- -

Ação: Imprimir um documento

- -

Crie um novo documento HTML, doc4.html. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:

- -
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Impressão de amostra</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>Seção A</H1>
-<P>Esta é a primeira seção...</P>
-
-<H1>Seção B</H1>
-<P>Esta é a segunda seção...</P>
-
-<DIV id="print-head">
-Dirigir para mídias paginadas
-</DIV>
-
-<DIV id="print-foot">
-Página:
-</DIV>
-
-</BODY>
-</HTML>
-
-
- -

Crie uma nova folha de estilo, style4.css. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:

- -
-
/*** Impressão de amostra ***/
-
-/* Padrão para a tela */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* Somente impressão */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* Fim de somente impressão */
-
-
- -

Quando você exibe este documento em seu navegador, ele usa o estilo padrão do navegador.

- -

Quando você imprime (ou prevê a impressão) do documento, a folha de estilo coloca cada seção em uma página separada, e adiciona um cabeçalho e um rodapé para cada página. Se o seu navegador suportar contadores, isto adiciona um número na página no seu rodapé.

- - - - - - - - -
- - - - - - -
- - - - - - -
-
Cabeçalho
- -
Secção A
- -
Esta é a primeira secção...
- -
Página: 1
-
-
- 		- - - - - - -
- - - - - - -
-
Cabeçalho
- -
Secção B
- -
Esta é a segunda secção...
- -
Página: 2
-
-
-
- - - - - - - - -
Desafios
Mova o estilo específico de impressão para um arquivo CSS separado. -

Use as ligações nesta página para ler a CSS Specification. Ache detalhes de como importar o novo arquivo CSS específico para impressão em sua folha de estilo.

- -

Faça os cabeçalhos serem azuis quando o ponteiro do mouse estiver sobre eles.

-
- -

O que vem depois?

- -

Se teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Até agora, todas as regras de estilo neste tutorial foram especificadas em arquivos. As regras e seus volumes são fixos. A próxima página descreve como você muda as regras dinamicamente usando uma linguagem de programação: JavaScript

- -

{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/o_que_\303\251_css/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/o_que_\303\251_css/index.html" deleted file mode 100644 index 2ee2937e47..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/o_que_\303\251_css/index.html" +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: O que é CSS -slug: Web/CSS/Como_começar/O_que_é_CSS -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -

{{Next("CSS:Como começar:Porque usar CSS")}}

- -

Esta página explica o que é CSS. Você cria um documento de amostra para que possa trabalhar com as páginas seguintes.

- -

Informações: O que é CSS?

- -

CSS é uma linguagem que especifica como os documentos são apresentados aos usuários.

- -

Um documento é uma coleção de informações estruturadas utilizando uma linguagem de marcação.

- - - - - - - - -
Exemplos
-
    -
  • Uma página da Web como esta é um documento.
    - As informações que você vê em uma página da Web, geralmente, é estruturada utilizando a linguagem de marcação HTML (HyperText Markup Language - Linguagem de Marcação de Hiper Texto).
    • -
- -
    -
  • Uma caixa de diálogo em um aplicativo Mozilla é um documento.
    - A interface com o usuário controla o que aparece em uma caixa de diálogo Mozilla, que é estruturada utilizando a linguagem de marcação XUL (XML User-interface Language - Linguagem de Interface do Usuário XML).
    • -
-
- -

Neste tutorial, os quadros entitulados Mais detalhes como este logo abaixo, contêm informações opcionais. Se você está com pressa para progredir no tutorial, você pode ignorar esses quadros, retornando para lê-los posteriormente. Caso contrário, leia-os ao encontrá-los, e talvez siga os links para aprender mais.

- - - - - - - - -
Mais detalhes
-

Um documento não é igual a um arquivo. Ele pode ou não ser armazenado em um arquivo.

- -

Por exemplo, o documento que você está lendo agora não está armazendo em um arquivo. Quando seu navegador da Web solicita esta página, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. Entretanto, neste tutorial você vai trabalhar com documentos que estão armazenados em arquivos.

- -

Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste Web site — por exemplo:

- - - - - - - - - - - - - - - - - - - - -
HTMLpara páginas da Web
XMLpara documentos estruturados em geral
SVGpara gráficos
XULpara interfaces com o usuário no Mozilla
- -

Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.

-
- -

Apresentar um documento a um usuário significa convertê-lo para uma forma que humanos possam usá-lo. O Mozilla é projetado para apresentar documentos visualmente — por exemplo, em uma tela de computador, projetor ou impressora.

- - - - - - - - -
Mais detalhes
CSS não serve apenas para navegadores e apresentação visual. Em uma terminologia formal de CSS, o programa que apresenta um documento ao usuário é chamado de agente usuário (UA - User Agent). Um navegador é apenas um tipo de UA. Entretanto, na Parte I deste tutorial você irá trabalhar apenas com CSS em um navegador. -

Para mais definições formais de terminologia sobre CSS, consulte Definitions na CSS Specification.

-
- -

Ação: Criando um documento

- -

Utilize seu computador para criar um novo diretório e um novo arquivo de texto dentro dele. O arquivo irá conter seu documento.

- -

Copie e cole o código HTML mostrado abaixo. Salve o arquivo utilizando o nome doc1.html

- -
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<html>
-  <head>
-  <title>Documento de amostra</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
-
- -

Em seu navegador, abra uma aba ou uma nova janela, e abra o arquivo do diretório.

- -

Você deve ver o texto com as iniciais em negrito, conforme abaixo:

- - - - - - - -
Cascading Style Sheets
- -

O que você vê em seu navegador pode não ser exatamente como o exibido aqui, por causa das configurações de seu navegador e deste wiki. Se houver diferenças na fonte, espaçamento ou cor, não há importância.

- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Seu documento ainda não utiliza CSS. Na página a seguir você utilizará CSS para especificar o estilo: Porque usar CSS

- -

{{Next("CSS:Como começar:Porque usar CSS")}}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/o_que_\303\251_css_question_/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/o_que_\303\251_css_question_/index.html" deleted file mode 100644 index d386670557..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/o_que_\303\251_css_question_/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: O que é CSS? -slug: Web/CSS/Como_começar/O_que_é_CSS? -tags: - - 'CSS:Como_começar' ---- -

-

This page explains what CSS is. -You create a simple document that you will work with on the following pages. -

-

Information: What is CSS?

-

CSS is a language for specifying how documents are presented to users. -

A document is a collection of information that is structured using a markup language. -

- - -
Examples -
-
  • A web page like this one is a document.
    The information that you see in a web page is usually structured using the markup language HTML (HyperText Markup Language). -
-
  • A dialog in a Mozilla application is a document.
    The user interface controls that you see in a Mozilla dialog are structured using the markup language XUL (XML User-interface Language). -
-
-

In this tutorial, boxes captioned More details like the one below contain optional information. -If you are in a hurry to progress with the tutorial then you could skip these boxes, perhaps returning to read them later. Otherwise read them when you come to them, and perhaps follow the links to learn more. -

- - -
More details -
-

A document is not the same as a file. It might or might not be stored in a file. -

For example, the document that you are reading now is not stored in a file. When your web browser requests this page, the server queries a database and generates the document, gathering parts of the document from many files. However, in this tutorial you will work with documents that are stored in files. -

For more information about documents and markup languages, see other parts of this web site—for example: -

- - - - - - - - -
HTMLfor web pages -
XMLfor structured documents in general -
SVGfor graphics -
XULfor user interfaces in Mozilla -
-

In Part II of this tutorial you will see examples of these markup languages. -

-
-

Presenting a document to a user means converting it into a form that humans can make use of. Mozilla is designed to present documents visually—for example, on a computer screen, projector or printer. -

- - -
More details -
CSS is not just for browsers, and not just for visual presentation. In formal CSS terminology, the program that presents a document to a user is called a user agent (UA). A browser is just one kind of UA. However, in Part I of this tutorial you will only work with CSS in a browser. -

For some formal definitions of terminology relating to CSS, see Definitions in the CSS Specification. -

-
-

Action: Creating a document

-

Use your computer to create a new directory and a new text file there. -The file will contain your document. -

Copy and paste the HTML shown below. Save the file using the name doc1.html -

-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<html>
-  <head>
-  <title>Sample document</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
-

In your browser, open a new tab or a new window, and open the file there. -

You should see the text with the initial letters bold, like this: -

- - -
Cascading Style Sheets -
-

What you see in your browser might not look exactly the same as this, because of settings in your browser and in this wiki. If there are some differences in the font, spacing and colors that you see, they are not important. -

-

What next?

-

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page. -

Your document does not yet use CSS. -On the next page you use CSS to specify its style: -Why use CSS? -

{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }} diff --git "a/files/pt-pt/web/css/como_come\303\247ar/porque_usar_css/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/porque_usar_css/index.html" deleted file mode 100644 index 2adc531924..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/porque_usar_css/index.html" +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Porque usar CSS -slug: Web/CSS/Como_começar/Porque_usar_CSS -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}

- -

Esta página explica porque os documentos usam CSS. Você usa CSS para adicionar uma folha de estilo ao seu documento de amostra.

- -

Informações: Por que usar CSS?

- -

CSS ajuda a manter o conteúdo das informações de um documento separado dos detalhes de como exibí-lo. Os detalhes de como exibir o documento são conhecidos como estilo. Você mantém o estilo separado do conteúdo, de modo que você pode:

- - - - - - - - - - -
Exemplo
Seu Web site pode ter milhares de páginas similares. Utilizando CSS, você armazena as informações em arquivos comuns que todas as páginas compartilham. -

Quando um usuário exibe uma página da Web, o navegador do usuário carrega as informações de estilo junto com o conteúdo da página.

- -

Quando um usuário imprime uma página da Web, você fornece informações de estilo diferentes que tornam a página impressa mais fácil de ler.

-
- -

Geralmente, com CSS, você utiliza a linguagem de marcação para descrever o conteúdo das informações do documento, não seu estilo. Você utiliza CSS para especificar o estilo, não o conteúdo. (Posteriormente neste tutorial, você verá algumas exceções deste método.)

- - - - - - - - -
Mais detalhes
Uma linguagem de marcação, como o HTML, também fornece alguns modos de especificar o estilo. -

Por exemplo, em HTML, você pode usar uma tag <b> para tornar o texto negrito, e você pode especificar a cor do segundo plano de uma página na tag <body>.

- -

Ao utilizar CSS, você normalmente evita utilizar esses recursos da linguagem de marcação para que todas as informações de estilo de seu documento estejam em um só lugar.

-
- -

Ação: Criando uma folha de estilo

- -

Crie outro arquivo de texto no mesmo diretório do anterior. Este arquivo será sua folha de estilo. Nomeie-o como: style1.css

- -

Em seu arquivo CSS, copie e cole esta única linha, então salve o arquivo:

- -
-
strong {color: red;}
-
-
- -

Ligando seu documento à sua folha de estilo

- -

Para ligar seu documento com sua folha de estilo, edite seu aquivo HTML. Adicione a linha mostrada aqui em negrito:

- -
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-  <HEAD>
-  <TITLE>Documento de amostra</TITLE>
-  <LINK rel="stylesheet" type="text/css" href="style1.css">
-  </HEAD>
-  <BODY>
-    <P>
-      <STRONG>C</STRONG>ascading
-      <STRONG>S</STRONG>tyle
-      <STRONG>S</STRONG>heets
-    </P>
-  </BODY>
-</HTML>
-
-
- -

Salve o arquivo e atualize a tela do seu navegador. A folha de estilo fez as letras iniciais aparecerem em vermelha, como isto:

- - - - - - - -
Cascading Style Sheets
- - - - - - - - -
Desafio
Além do vermelho, CSS permite algumas outras cores com nomes. -

Sem olhar um referência, ache mais cinco nomes de cores que trabalham em sua folha de estilo.

-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Agora você tem um documento de amostra ligado a uma folha de estilo separada, você está pronto para ler mais sobre como seu navegador combina-os quando exibe o documento na tela: Como o CSS trabalha.

- -

{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/seletores/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/seletores/index.html" deleted file mode 100644 index f9d4505614..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/seletores/index.html" +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Seletores -slug: Web/CSS/Como_começar/Seletores -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}

- -

Esta página explica como você pode aplicar estilos seletivamente, e como diferentes tipos de seletor têm propriedades diferentes.

- -

Você adiciona alguns atributos às tags do seu documento de amostra, e usa estes atributos em sua folha de estilo de amostra.

- -

Informação: Seletores

- -

CSS tem sua própria terminologia para descrever a linguagem CSS. Anteriormente neste tutorial, você criou uma linha em sua folha de estilo com esta:

- -
-
strong {color: red;}
-
-
- -

Na terminologia das CSS, esta linha inteira é uma regra. Esta regra começa com STRONG, que é um seletor. Isto seleciona que elementos no DOM a regra se aplicará.

- - - - - - - - -
Mais detalhes
A parte interior das chaves é a declaração. -

A palavra-chave color é uma propriedade, e red é um valor.

- -

O ponto-e-vírgula depois do par propriedade-valor separa isto de outros pares propriedade-valor na mesma descrição.

- -

Este tutorial refere-se a um seletor STRONG, como um seletor de tag. A Especificação das CSS refere-se a isto como um seletor de tipo.

-
- -

Esta página do tutorial explica mais sobre os seletores que você pode usar nas regras das CSS.

- -

Em adição aos nomes de tags, você pode usar valores de atributo nos seletores. Isto permite a você que as regras tornem-se mais específicas.

- -

Dois atributos tem estado especial para as CSS. Eles são class e id.

- -

Use o atributo class em uma tag para nomear a tag com um nome de classe. Isto é, o nome que você escolher para a classe.

- -

Na sua folha de estilo, digite um registro completo (período) antes do nome de classe quando você usá-lo em um seletor.

- -

Use o atributo id em uma tag para nomear a tag com um nome de id. Isto é, o nome que você escolher para o id. O nome do id deve ser único no documento.

- -

Na sua folha de estilo, digite um sinal de número (#) antes do id quando você usá-lo em um seletor.

- - - - - - - - -
Exemplos
Este tag HTML tem ambos os atributos class e id. -
- 
-<P class="key" id="principal">
-
-
- -

O id, principal, deve ser o único no documento, mas outras tags no documento podem ter o mesmo nome de classe, key.

- -

Em uma folha de estilo CSS, esta regra faz todos os elementos da classe key verdes. (Eles podem não ser todos elementos P.)

- -
- 
-.key {color: green;}
-
-
- -

Esta regra faz um elemento com o id principal negrito:

- -
- 
-#principal {font-weight: bolder;}
-
-
-
- -

Se mais de uma regra se aplicar a um elemento e especificar a mesma propriedade, então CSS dará prioridade para a regra que tiver o seletor mais específico. Um seletor id é mais específíco que um seletor classe, que por sua vez é mais específico que um seletor tag.

- - - - - - - - -
Mais detalhes
Você pode combinar seletores para fazer um seletor mais específico. -

Por exemplo, o seletor .key seleciona todos os elementos que tem o nome de classe key. O seletor p.key seleciona somente os elementos P que tiverem o nome de classe key.

- -

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos igualando entre colchetes. Por exemplo, o seletor {{ mediawiki.external('type=button') }} seleciona todos os elementos que tiverem um atributo type com o valor button.

- -

Uma página posterior deste tutorial (Tabelas) tem informações sobre seletores complexos baseados em parentescos.

- -

Para um informação completa sobre seletores, veja Selectors na CSS Specification.

-
- -

Se sua folha de estilo tiver regras conflitantes e elas estiverem igualmente especificadas, então CSS dará prioridade para a regra que foi especificada por último na folha de estilo.

- -

Quando você tiver um problema com regras conflitantes, tente resolvê-lo fazendo uma das regras mais especificada, então ela terá prioridade. Se você não puder fazer isto, tente mover uma das regras para mais perto do fim da folha de estilo, então esta terá prioridade.

- -

Ação: Usando seletores de classe e id

- -

Edite seu arquivo HTML, e duplique o paragrafo copiando e colando-o. Então adicione os atributos de id e classe na primeira cópia, e um id na segunda cópia como mostrado abaixo. Um alternativa é copiar e colar o arquivo inteiro novamente:

- -
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-  <HEAD>
-  <TITLE>Documento de amostra</TITLE>
-  <LINK rel="stylesheet" type="text/css" 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>
-
-
- -

Agora edite seu arquivo CSS. Substitua os componentes inteiros com:

- -
-
strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-
-
- -


- Atualize seu navegador para ver o resultado:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -


- Você pode tentar re-dispor as linhas no seu arquivo CSS para mostrar que a ordem não muda o efeito.

- -

Os seletores de classe .carrot e .spinach tem prioridade sobre o seletor de tag STRONG.

- -

O seletor id #first tem prioridade sobre a classe o os seletores de tag.

- - - - - - - - -
Desafios
Sem mudar seu arquivo HTML, adicione uma única regra para seu arquivo CSS deixando todas as letras iniciais da mesma cor que estão agora, mas fazendo todo o segundo parágrafo aparecer em azul: - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

Agora mude a regra que você acabou de adicionar (sem mudar mais nenhuma coisa), para fazer o primeiro parágrafo em azul também:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

- -

Sua folha de estilo de amostra está começando a parecer densa e complicada. A próxima página descreve caminhos para fazer o CSS mais fácil de ler: CSS legível

- -

{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/tabelas/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/tabelas/index.html" deleted file mode 100644 index ff21a00c82..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/tabelas/index.html" +++ /dev/null @@ -1,655 +0,0 @@ ---- -title: Tabelas -slug: Web/CSS/Como_começar/Tabelas -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -

{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}

- -

Esta página descreve seletores mais avançados, e algumas maneiras específicas para estilizar tabelas.

- -

Você cria um novo documento de amostra contendo uma tabela, e uma folha de estilo para isto.

- -

Informação: Mais seletores

- -

CSS possui algumas maneiras para selecionar elementos baseadas nas relações entre eles. Você pode usá-las para fazer seletores que sejam mais específicos.

- -

Aqui está um sumário de seletores baseados em relações:

- - - - - - - - - - - - - - - - - - - - - - - - -
SeletorSeleciona
A EQualquer elemento E que seja descendente de um elemento A (isso é: um subitem, ou um subitem de um sub item, etc.)
A > EQualquer elemento E que seja subitem de um elemento A
E:first-childQualque elemento E que seja o primeiro subitem do seu principal
B + EQualquer elemento E que seja o próximo irmão de um elemento B (isso é: o próximo subitem do mesmo principal)
- -

Você pode combinar isto para expressar relações complexas.

- -

Você pode também usar o símbolo * (asterisco) para dizer "qualquer elemento".

- - - - - - - - -
Exemplo
Uma tabela HTML tem um atributo id, mas suas linhas e células não tem identificadores individuais: -
- 
-<TABLE id="data-table-1">
-...
-<TR>
-<TD>Prefix</TD>
-<TD>0001</TD>
-<TD>default</TD>
-</TR>
-...
-
-
- -

Estas regras fazem a primeira célula em cada linha em negrito, e a segunda célula em cada linha monoespaçada. Elas afetam somente uma tabela específica no documento:

- -
-
    -
  1. data-table-1 td:first-child {font-weight: bolder;}
    2. -
  2. data-table-1 td:first-child + td {font-family: monospace;}
    3. -
-
- -

O resultado é algo como isto:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- - - - - - - - -
Mais detalhes
De maneira usual, se você faz um seletor mais específico então você aumenta sua prioridade. -

Usando estas técnicas, você evita precisar especificar atributos class ou id em muitas tags no seu documento. Em vez disso, CSS faz o trabalho.

- -

Em grandes projetos onde a velocidade é importante, você pode fazer suas folhas de estilo mais eficientes evitando regras complexas que dependem da relação entre elementos.

- -

Para detalhes completos sobre seletores, veja Selectors em CSS Specification.

-
- -

Informação: Tabelas

- -

Uma tabela é um arranjo de informação em uma grade retangular. Algumas tabelas podem ser complexas, e para tabelas complexas diferentes navegadores podem exibir diferentes resultados.

- -

Quando você desenha seu documento, use e a tabela para expressar as relações entre as peças da informação. Então não importará se os diferentes navegadores apresentarem a informação de maneiras levemente diferentes, pois o significado ainda pode ser compreendido.

- -

Não use tabelas de maneiras não usuais para produzir disposições visuais particulares. As técnicas na página anterior deste tutorial (Disposição) são melhores para isto.

- -

Estrutura da tabela

- -

Em uma tabela, cada peça de informação é exibida em uma célula.

- -

As células em uma linha horizontal na página compõem uma linha.

- -

Em algumas tabelas, as linhas podem ser agrupadas. Um grupo especial de linhas no começo da tabela é o cabeçalho. Um grupo especial de linhas no final da tabela é o rodapé. As linhas principais na tabela são o corpo, e elas podem também estar em grupos.

- -

As células em uma linha vertical na página compõem uma coluna, mas as colunas têm usos limitados nas tabelas das CSS.

- - - - - - - - -
Exemplo
A tabela de seletores próxima ao topo desta página tem dez células em cinco linhas. -

A primeira linha é o cabeçalho. As outras quatro linhas são o corpo. Não há um rodapé.

- -

Ela tem duas colunas.

-
- -

Este tutorial somente cobre tabelas simples, onde os resultados são razoavelmente previsíveis. Em uma tabela simples, toda célula ocupa somente uma linha e coluna. Você pode usar CSS para tabelas complexas onde células expandam (extendam-se sobre) mais do que uma linha ou coluna, mas tabelas como estas estão fora do escopo deste tutorial básico.

- -

Bordas

- -

Células não têm margens.

- -

Células têm bordas e enchimento. Por padrão, as bordas são separadas pelo valor da propriedade border-spacing da tabela. Você pode também remover o espaçamento completamente configurando a propriedade border-collapse da tabela para collapse.

- - - - - - - - -
Exemplo
Aqui estão três tabelas. -

A tabela da esquerda tem espaçamento de borda 0.5 em. A tabela do centro tem espaçamento da borda zero. A tabela da direita tem bordas unidas:

- - - - - - - - - -
- - - - - - - - - - - -
PausCopas
OurosEspadas
- 		- - - - - - - - - - - -
PausCopas
OurosEspadas
- 		- - - - - - - - - - - -
PausCopas
OurosEspadas
-
-
- -

Subtítulos

- -

Um subtítulo é uma etiqueta que se aplica à tabela inteira. Por padrão, isto é mostrado no topo da tabela.

- -

Para mover isto para o fim, configure a propriedade caption-side para bottom. A propriedade é herdada, então alternativamente você pode configurar isto na tabela em outro elemento ascendente.

- -

Para estilizar o texto do subtítulo, use qualquer das propriedades usuais para texto.

- - - - - - - - -
Exemplo
Esta tabela tem um subtítulo no fim: -
- 
-#demo-table > caption {
-  caption-side: bottom;
-  font-style: italic;
-  text-align: right;
-  }
-
-
- - - - - - - -
- - - - - - - -
Naipes
- - - - - - - - - - - -
PausCopas
OurosEspadas
-
-
-
- -

Células vazias

- -

Você pode exibir células vazias (isto é, suas bordas e fundos) especificando empty-cells: show; para o elemento da tabela.

- -

Você pode escondê-los especificando empty-cells:hide;. Então, se um elemento principal tem um fundo e o chama, isto mostra através da célula vazia.

- - - - - - - - -
Exemplo
Estas tabelas tem um fundo de verde pálido. Suas células tem um fundo de cinza pálido e bordas de cinza escuro. -

Na esquerda da tabela, a célula vazia é mostrada. Na direita, é escondida:

- - - - - - - - -
- - - - - - - - - - - -
 Copas
OurosEspadas
- 		- - - - - - - - - - - -
 Copas
OurosEspadas
-
-
- - - - - - - - -
Mais detalhes
Para informações detalhasdas sobre tabelas, veja Tables em CSS Specification. -

A informação lá vai além do que há neste tutorial, mas não cobre as diferenças entre os navegadores que podem afetar tabelas complexas.

-
- -

Ação: Estilizando uma tabela

- -

Faça um novo documento HTML, doc3.html. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:

- -
-
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-<HEAD>
-<TITLE>Documento de amostra 3</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style3.css">
-</HEAD>
-<BODY>
-
-<TABLE id="demo-table">
-<CAPTION>Oceanos</CAPTION>
-
-<THEAD>
-<TR>
-<TH></TH>
-<TH>Área</TH>
-<TH>Profundidade Média</TH>
-</TR>
-<TR>
-<TH></TH>
-<TH>milhões de km<SUP>2</SUP></TH>
-<TH>m</TH>
-</TR>
-</THEAD>
-
-<TBODY>
-<TR>
-<TH>Ártico</TH>
-<TD>13,000</TD>
-<TD>1,200</TD>
-</TR>
-<TR>
-<TH>Atlântico</TH>
-<TD>87,000</TD>
-<TD>3,900</TD>
-</TR>
-<TR>
-<TH>Pacífico</TH>
-<TD>180,000</TD>
-<TD>4,000</TD>
-</TR>
-<TR>
-<TH>Índico</TH>
-<TD>75,000</TD>
-<TD>3,900</TD>
-</TR>
-<TR>
-<TH>Antártico</TH>
-<TD>20,000</TD>
-<TD>4,500</TD>
-</TR>
-</TBODY>
-
-<TFOOT>
-<TR>
-<TH>Total</TH>
-<TD>361,000</TD>
-<TD></TD>
-</TR>
-<TR>
-<TH>Média</TH>
-<TD>72,000</TD>
-<TD>3,800</TD>
-</TR>
-</TFOOT>
-
-</TABLE>
-
-</BODY>
-</HTML>
-
-
- -

Crie uma nova folha de estilo, style3.css. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:

- -
-
/*** Estilo para doc3.html (Tabelas) ***/
-
-#demo-table {
-  font: 100% sans-serif;
-  background-color: #efe;
-  border-collapse: collapse;
-  empty-cells: show;
-  border: 1px solid #7a7;
-  }
-
-#demo-table > caption {
-  text-align: left;
-  font-weight: bold;
-  font-size: 200%;
-  border-bottom: .2em solid #4ca;
-  margin-bottom: .5em;
-  }
-
-
-/* basic shared rules */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-  }
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-  }
-
-
-/* header */
-#demo-table > thead > tr:first-child > th {
-  text-align: center;
-  color: blue;
-  }
-
-#demo-table > thead > tr + tr > th {
-  font-style: italic;
-  color: gray;
-  }
-
-/* fix size of superscript */
-#demo-table sup {
-  font-size: 75%;
-  }
-
-/* body */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-  }
-
-#demo-table tbody th:after {
-  content: ":";
-  }
-
-
-/* footer */
-#demo-table tfoot {
-  font-weight: bold;
-  }
-
-#demo-table tfoot th {
-  color: blue;
-  }
-
-#demo-table tfoot th:after {
-  content: ":";
-  }
-
-#demo-table > tfoot td {
-  background-color: #cee;
-  }
-
-#demo-table > tfoot > tr:first-child td {
-  border-top: .2em solid #7a7;
-  }
-
-
- -

Abra o documento no seu navegador. Deve ser muito similar a este:

- - - - - - - -
-
-

Oceanos

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 ÁreaProfundidade média
 milhões de km2m
Ártico:13,0001,200
Atlântico:87,0003,900
Pacífico:180,0004,000
Índico:75,0003,900
Antártico:20,0004,500
Total:361,000 
Média:72,0003,800
-
-
-
- -

Compare estas regras em sua folha de estilo com a tabela exibida, para se assegurar de que entende o efeito de cada regra. Se você achou uma regra com a qual não está seguro sobre, descomente-a e atualize o navegador para ver o que acontece.

- -

Aqui estão algumas notas sobre esta tabela:

- - - - - - - - - - -
Desafios
Mude a folha de estilo para fazer a tabela parecer com isto: - - - - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 ÁreaProfundidade média
 milhões de km2m
Ártico:13,0001,200
Atlântico:87,0003,900
Pacífico:180,0004,000
Índico:75,0003,900
Antártico:20,0004,500
Total:361,000 
Média:72,0003,800
-
- -

Oceanos

-
-
-
- -

O que vem depois?

- -

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor combribua nesta página de Discussão.

- -

Esta é a última página deste tutorial que foca as propriedades e valores das CSS. Para um sumário completo de propriedades e valores, veja Full property table em CSS Specification.

- -

A próxima página mostra novamente o propósito e a estrutura das folhas de estilo CSS: Mídia

- -

{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}

diff --git "a/files/pt-pt/web/css/consulta_de_m\303\255dia/index.html" "b/files/pt-pt/web/css/consulta_de_m\303\255dia/index.html" deleted file mode 100644 index 2bf4f5470c..0000000000 --- "a/files/pt-pt/web/css/consulta_de_m\303\255dia/index.html" +++ /dev/null @@ -1,436 +0,0 @@ ---- -title: Utilizar consultas de média -slug: Web/CSS/Consulta_de_mídia -tags: - - Avançado - - CSS - - Desenho Adaptável - - Guía - - Media -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -

{{ gecko_minversion_header("1.9.1") }}

- -

As consultas de média permitem modificar um site ou aplicação de acordo com o tipo de dispositivo (ecrã ou impressora, por exemplo) ou características e parâmetros específicos (como a resolução de ecrã ou largura do {{glossary("viewport")}} do navegador). Podem utilizar-se para:

- - - -

Sintaxe

- -

Consultas de média consistem num tipo de média e uma ou mais expressões envolvendo recursos de média. Note que estas consultas não são sensíveis a maiúsculas. Pode-se combinar várias consultas com operadores lógicos.

- -

O resultado da consulta é verdadeiro se o tipo de média especificado na consulta de média encaixa com o tipo de dispositivo no qual o documento está a ser exibido e se todas as expressões na consulta de média forem verdadeiras.

- -

Quando uma consulta de média é verdadeira, a folha de estilos correspondente é aplicada seguinto as regras normais de cascata.

- -
-

Nota: Considere a etiqueta {{HTMLElement("link")}} com uma consulta de média. O ficheiro CSS que ela refere é descarregado mesmo que a consulta de média seja falsa; o conteúdo da folha não será aplicado até a consulta se tornar verdadeira.

-
- -

Operadores lógicos

- -

Você pode compor consultas de média complexas usando operadores lógicos, incluindo not, and, e only ; assim como combinar consultas de média numa lista separada por vírgulas, o que é equivalente a um operador "ou".

- -

and

- -

O operador and indica que a consulta é verdadeira se cada subconsulta que a compõe for verdadeira. Também pode juntar os tipos de média às funcionalidades de média. Tem maior precedência que a vírgula ("ou") e o not.

- -

not

- -

A palavra-chave not, nega o resultado de toda a consulta; por exemplo, "all and (not color)" é verdadeiro para dispositivos monocromáticos independentemente do tipo de média. É o operador com menor precedência depois da vírgula.

- -

only

- -

A palavra-chave only indica que só deve ser aplicado o estilo se a consulta inteira for verdadeira. Quando se utiliza este operador, é obrigatório especificar um tipo de média.

- -

É útil para esconder folhas de estilo de navegadores antigos que não suportam consultas de média. Por exemplo, se não for utilizado only, navegadores antigos interpretam a consulta screen and (max-width: 500px) apenas como screen - ignoram o resto e aplicam o estilo em todos os ecrãs. 

- -

Este operador não pode ser utilizado em conjunto com o not, e ambos têm a mesma precedência.

- -

, (vírgula)

- -

Cada subconsulta numa lista separada por vírgulas é avaliada isoladamente e e alguma  for verdadeira, a consulta composta é verdadeira. Por outras palavras, as vírgulas são equivalentes a um "ou-lógico".

- -

Precedência dos operadores

- - - -

Os parênteses não podem ser utilizados para mudar esta precedência.

- -

 

- -

Pseudo BNF (para aqueles que gostam desde tipo de coisa)

- -
media_query_list: <media_query> [, <media_query> ]*
-media_query: [[only | not]? <media_type> [ and <expression> ]*]
-  | <expression> [ and <expression> ]*
-expression: ( <media_feature> [: <value>]? )
-media_type: all | aural | braille | handheld | print |
-  projection | screen | tty | tv | embossed
-media_feature: width | min-width | max-width
-  | height | min-height | max-height
-  | device-width | min-device-width | max-device-width
-  | device-height | min-device-height | max-device-height
-  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
-  | color | min-color | max-color
-  | color-index | min-color-index | max-color-index
-  | monochrome | min-monochrome | max-monochrome
-  | resolution | min-resolution | max-resolution
-  | scan | grid
- -

Consultas de média não diferenciam maiúsculas de minúsculas. Consultas de média que envolvem tipos de média desconhecidos são sempre falsas.

- -
Nota: Os parênteses são requisitados a volta de expressões; esquecer de usá-los é um erro.
- -

Recursos de média

- -

A maioria dos recursos de média pode ser prefixado com "min-" ou "max-" para expressar "maior ou igual a" ou "menor ou igual a". Isto evita usar os símbolos "<" e ">", que poderiam entrar em conflito com HTML e XML. Se você usar um recurso de média sem especificar um valor, a expressão é definida como verdadeira se o valor do recurso for diferente de zero.

- -
Nota: Se um recurso de média não se aplica ao dispositivo no qual o navegador está sendo rodado, expressões envolvendo este recurso de média serão sempre falsas. Por exemplo, consultando a relação de aspecto de um dispositivo auditivo sempre resultará em falso.
- -

color

- -

Valor: {{cssxref("<color>")}}
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: sim

- -

Indica o número de bits por componente de cor do dispositivo de saída. Se o dispositivo não é colorido, este valor é zero.

- -
Nota: Se os componentes de cor tiverem diferentes de números de bits por componente de cor, o menor número é usado. Por exemplo, se uma tela usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo é considerado para usar 5 bits por componente de cor. Se o dispositivo usa cores indexadas, o número mínimo de bits por componente de cor na tabela de cores é usado.
- -

Exemplos

- -

Para aplicar uma folha de estilos a todos os dispositivos coloridos:

- -
@media all and (color) { ... }
-
- -

Para aplicar uma folha de estilos a dispositivos com no mínimo 4 bits por componente de cor:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Valor: integer
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: sim

- -

Indica o número de entradas na tabela de cor para o dispositivo de saída.

- -

Exemplos

- -

Para indicar que uma folha de estilos deve ser aplicada a todos os dispositivos usando cores indexadas, você pode fazer:

- -
@media all and (color-index) { ... }
-
- -

Para aplicar uma folha de estilos a dispositivos de cores indexadas com no mínimo 256 cores:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

device-aspect-ratio

- -

Valor: integer / integer
- média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
- Aceita os prefixos min/max: sim

- -

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste em dois positivos inteiros (integer) separados por um caractére barra ("/"). Isto representa o número de pixels horizontais sobre o número de pixels verticais.

- -

Exemplo

- -

O que vem a seguir selecionar uma folha de estilos especial para uso em dispositivos de tela comprida (widescreen):

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

Isto seleciona o estilo quando a relação de aspecto for 16:9 ou 16:10.

- -

device-height

- -

Valor: {{cssxref("<length>")}}
- média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
- Aceita os prefixos min/max: sim

- -

Descreve a altura do dispositivo de saída (sendo a tela ou página inteira, ao invés de somente a área de renderização, como a janela do documento).

- -

Exemplo

- -

Para aplicar uma folha de estilos a um documento quando exibido em uma tela que for mais fina do que 800 pixels, você pode usar isto:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
-
- -

device-width

- -

Valor: {{cssxref("<length>")}}
- média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
- Aceita os prefixos min/max: sim

- -

Descreve a largura do dispositivo de saída (sendo a tela ou a página inteira, ao invés de somente a área de renderização, como a janela do documento).

- -

grid

- -

Valor: integer
- média: all
- Aceita os prefixos min/max: não

- -

Determina Determines se o dispositivo de saída é um dispositivo grid ou um dispositivo bitmap. Se o dispositivo for baseado em grid (tal como um terminal tty ou uma tela de celular com somente uma fonte), o valor é 1. Caso contrário é zero.

- -
Nota: Gecko (e consequentemente o Firefox) não suporta dispositivos grid atualmente, então este recurso de média não é suportado.
- -

Exemplo

- -

Para aplicar um estilo a dispositivos de mão com uma tela de 15 caracteres ou mais estreito:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Nota: A unidade "em" tem um uso especial em dispositivos grid; desde que a largura exata de um "em" não pôde ser determinada, 1em é assumido como a largura de uma célula grid horizontal, e a altura de uma célula vertical.
- -

height

- -

Valor: {{cssxref("<length>")}}
- média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
- Aceita os prefixos min/max: sim

- -

O recurso de média height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura da viewport ou da caixa de páginas em uma impressora).

- -
Nota: Quando o usuário redimenciona a janela, o Firefox substituirá as folhas de estilos como for apropriado, baseado em consultas de média usando os recursos de média width e height.
- -

monochrome

- -

Valor: integer
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: sim

- -

Indica o número de bits por pixel em um dispositivo monocromático (escala de cinza). Se o dispositivo não for monocromático, o valor do dispositivo é 0.

- -

Exemplos

- -

Para aplicar uma folha de estilos para todos os dispositivos monocromáticos:

- -
@media all and (monochrome) { ... }
-
- -

Para aplicar uma folha de estilos para dispositivos monocromáticos com no mínimo 8 bits por pixel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Valor: landscape | portrait
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Indica se o dispositivo está em modo paisagem (a exibição é mais larga do que alta) ou retrato (a exibição é mais alta do que larga).

- -

Exemplo

- -

Para aplicar uma folha de estilos somente na orientação retrato:

- -
@media all and (orientation: portrait) { ... }
- -

resolution

- -

Valor: {{cssxref("<resolution>")}}
- média: {{cssxref("Media/Bitmap", "bitmap")}}
- Aceita os prefixos min/max: sim

- -

Indica a resolução (densidade de pixels) do dispositivo de saída. A resolução pode ser especificada tanto em pontos por polegada (dpi) quanto pontos por centímetro (dpcm).

- -

Exemplo

- -

Para aplicar uma folha de estilos a dispositivos com no mínimo 300 pontos por polegada de resolução:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

scan

- -

Valor: progressive | interlace
- média: {{cssxref("Media/TV", "tv")}}
- Aceita os prefixos min/max: não

- -

Descreve o processo de escaneamento de dispositivos de saída de televisão.

- -
Nota: Gecko (e consequentemente o Firefox) não suportam o tipo de média tv atualmente, então este recurso de média não é suportado.
- -

Exemplo

- -

Para aplicar uma folha de estilos somente para televisões com escaneamento progressivo:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Valor: {{cssxref("<length>")}}
- média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
- Aceita os prefixos min/max: sim

- -

O recurso de média width descreve a largura da superfície de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de páginas em uma impressora).

- -
Nota: Quando o usuário redimensiona a janela, o Firefox substituirá a folha de estilo como apropriado, baseado nas consultas de média usando os recursos de média width e height.
- -

Exemplos

- -

Se você desejar espeficar uma folha de estilos para dispositivos de mão, ou dispositivos de tela com uma largura maior do que 20em, você pode usar esta folha de estilos:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

Este recurso de média especifica uma folha de estilos que deve ser aplicada a médias impressas mais largas do que 8.5 polegadas:

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

Este recurso especifica uma folha de estilos que é usável quando a viewport estiver entre 500 e 800 pixels de largura:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
- -

Características de média específicas da Mozilla

- -

{{ gecko_minversion_header("1.9.2") }}

- -

A Mozilla oferece várias características de média específicas para o Gecko. Algumas delas podem ser propostas como características oficiais de média.

- -

-moz-images-in-menus

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se o dispositivo permitir às imagens, aparecer nos menus, recebe 1; caso contrário, o valor é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(images-in-menus)") }} do CSS.

- -

-moz-mac-graphite-theme

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se o usuário configurou o dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência azul padrão, ou não for no Mac OS X, o valor é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} do CSS.

- -

-moz-maemo-classic

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se o usuário está usando o Maemo com o tema original, o valor é 1; se estiver usando o novo tema "Fremantle", o valor é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(maemo-classic)") }} do CSS.

- -

-moz-scrollbar-end-backward

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se a interface do dispositivo do usuário exibe um botão de seta para trás ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} do CSS.

- -

-moz-scrollbar-end-forward

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se a interface do dispositivo do usuário exibe um botão de seta para frente ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} do CSS.

- -

-moz-scrollbar-start-backward

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se a interface do dispositivo do usuário exibe uma seta para trás no início da barra de rolagem, o valor é 1. Caso contrário é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} do CSS.

- -

-moz-scrollbar-start-forward

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se a interface do dispositivo do usuário exibe uma seta para frente no início da barra de rolagem, o valor é 1. Caso contrário é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} do CSS.

- -

-moz-scrollbar-thumb-proportional

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se a interface do dispositivo do usuário exibe a barra de rolagem proporcionalmente (isto é, tamanho baseado na porcentagem do documento que está visível), o valor é 1. Caso contrário é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} do CSS.

- -

-moz-touch-enabled

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se o dispositivo suporta eventos de toque (para um tela sensível ao toque), o valor é 1. Caso contrário é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(touch-enabled)") }} do CSS.

- -

Exemplo

- -

Você pode usar isso para renderizar seus botões ligeiramente maiores, por exemplo, se o usuário estiver em um dispositivo com tela sensível ao toque, para torná-lo mais amigável aos dedos.

- -

-moz-windows-classic

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se o usuário estiver usando o Windows, sem tema (no modo clássico ao invés de usar "uxtheme"), o valor é 1; caso contrário é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(windows-classic)") }} do CSS.

- -

-moz-windows-compositor

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se o usuário estiver usando o Windows com o compositor DWM, o valor é 1; caso contrário é 0.

- -

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(windows-compositor)") }} do CSS.

- -

-moz-windows-default-theme

- -

Valor: inteiro
- média: {{cssxref("Media/Visual", "visual")}}
- Aceita os prefixos min/max: não

- -

Se o usuário está correntemente usando um dos temas do Windows (Luna, Royale, Zune ou Aero (incluindo o Vista Basic, Vista Advanced e o Aero Glass), o valor 1. Caso contrário é 0.

- -

Veja também

- - diff --git a/files/pt-pt/web/css/consultas_de_media/index.html b/files/pt-pt/web/css/consultas_de_media/index.html deleted file mode 100644 index f9bbd7b94e..0000000000 --- a/files/pt-pt/web/css/consultas_de_media/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Consultas de média -slug: Web/CSS/Consultas_de_media -tags: - - CSS - - Consultas de Média - - Consultas de média CSS3 - - Desenho Adaptável - - Referencia - - Visão Geral -translation_of: Web/CSS/Media_Queries ---- -
{{CSSRef}}
- -

Consultas de média permitem adaptar o seu site ou aplicação de acordo com diferentes características ou parâmetros dos dispositivos utilizados.

- -

São um elemento chave de desenho adaptável . Por exemplo, uma consulta de média pode reduzir o tamanho do texto em dispositivos pequenos, aumentar o espaço entre parágrafos quando a página é visualizada em modo de paisagem, ou ampliar os botões nos ecrãs táteis.

- -

Em CSS, utiliza-se a regra "at" {{cssxref("@media")}} para aplicar, condicionalmente, parte de uma folha de estilos com base no resultado de uma consulta de média. E utiliza-se {{cssxref("@import")}} para aplicar, condicionalmente, uma folha de estilos inteira.

- -

Consultas de média em HTML

- -

Em HTML, as consultas de média podem-se aplicar a vários elementos:

- - - -

Consultas de média em JavaScript

- -

Em JavaScript, pode-se usar o método {{domxref("Window.matchMedia()")}} para verificar se a janela possui as características definidas na consulta de média. Também se pode utilizar {{domxref("MediaQueryList.addListener()")}} para gerar eventos sempre que houver mudanças no resultado da consulta de média. Com estas funcionalidades, o seu site ou aplicação pode responder a mudanças na configuração, orientação ou estado do dispositivo.

- -

Pode aprender mais sobre utilização programática das consultas de média no artigo Testar consultas de média.

- -

Referências

- -

Regras "at"

- -
- -
- -

Guias

- -
-
Utilizar consultas de média
-
Introdução às consultas de média, a sua sintaxe, os operadores e funcionalidades utilizadas para construir as expressões das consultas de média.
-
Testar consultas de média programaticamente
-
Descrição de como utilizar consultas de média no código JavaScript code para determinar o estado do dispositivo, e como instalar listeners que notificam o código quando o resultado das consultas muda (por exemplo, quando o utilizador roda o ecrã ou redimensiona a janela do navegador).
-
Utilizar Consultas de média para Acessibilidade
-
Este artigo explica de que forma as consultas de média podem ajudar os utilizadores a compreender melhor o seu site.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Definição inicial
- -

Compatibilidade com navegadores

- -

@media rule

- - - -

{{Compat("css.at-rules.media")}}

- -

Ver também

- - diff --git a/files/pt-pt/web/css/css_background_and_borders/index.html b/files/pt-pt/web/css/css_background_and_borders/index.html deleted file mode 100644 index 59c2117194..0000000000 --- a/files/pt-pt/web/css/css_background_and_borders/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -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 -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -

{{CSSRef}}

- -

CSS Background and Borders 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.

- -

Reference

- -

CSS Properties

- -
- -
- -

Guides

- -
-
Using CSS multiple backgrounds
-
Explains how to set backgrounds on elements and how they will interact with it.
-
Scaling background images
-
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.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Browser compatibility

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
-
diff --git "a/files/pt-pt/web/css/css_background_and_borders/m\303\272ltiplos_planos_de_fundo/index.html" "b/files/pt-pt/web/css/css_background_and_borders/m\303\272ltiplos_planos_de_fundo/index.html" deleted file mode 100644 index a30a9383be..0000000000 --- "a/files/pt-pt/web/css/css_background_and_borders/m\303\272ltiplos_planos_de_fundo/index.html" +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Utilização de múltiplos fundos em CSS -slug: Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

Com CSS3 pode aplicar múltiplos fundos aos elementos. Estes são colocados um sobre o outro, com o primeiro fundo fornecido no topo e o último fundo listado por trás. Só o último fundo pode incluir uma cor de fundo:

- -

É fácil especificar múltiplos fundos:

- -
.myclass {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

Você pode fazer isto com o apanhado da propriedade {{ cssxref("background") }} e das sub-propriedades desta: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

- -

Exemplo

- -

Neste exemplo, três fundos são empilhados: a logo do Firefox, um gradiente linear (en) e uma imagem com flores:

- -
.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;
-}
-
- - - - - - - - - - - - -
FotoDemonstração ao vivo
css_multibg.png 
- -

Como pode ver aqui, o logótipo do Firefox (listado primeiro) está no topo, seguida pelo gradiente, que está uma camada acima do fundo florido. Cada sub-propriedade ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) subsequentes aplicam-se aos fundos correspondentes. Dessa forma, o primeiro valor listado para {{ cssxref("background-repeat") }} aplica-se ao primeiro fundo (mais a frente), e assim por diante.

- -

Ver também

- - diff --git a/files/pt-pt/web/css/css_backgrounds_and_borders/index.html b/files/pt-pt/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..59c2117194 --- /dev/null +++ b/files/pt-pt/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,155 @@ +--- +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 +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders 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.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
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.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..a30a9383be --- /dev/null +++ b/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,58 @@ +--- +title: Utilização de múltiplos fundos em CSS +slug: Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Com CSS3 pode aplicar múltiplos fundos aos elementos. Estes são colocados um sobre o outro, com o primeiro fundo fornecido no topo e o último fundo listado por trás. Só o último fundo pode incluir uma cor de fundo:

+ +

É fácil especificar múltiplos fundos:

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Você pode fazer isto com o apanhado da propriedade {{ cssxref("background") }} e das sub-propriedades desta: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Exemplo

+ +

Neste exemplo, três fundos são empilhados: a logo do Firefox, um gradiente linear (en) e uma imagem com flores:

+ +
.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;
+}
+
+ + + + + + + + + + + + +
FotoDemonstração ao vivo
css_multibg.png 
+ +

Como pode ver aqui, o logótipo do Firefox (listado primeiro) está no topo, seguida pelo gradiente, que está uma camada acima do fundo florido. Cada sub-propriedade ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) subsequentes aplicam-se aos fundos correspondentes. Dessa forma, o primeiro valor listado para {{ cssxref("background-repeat") }} aplica-se ao primeiro fundo (mais a frente), e assim por diante.

+ +

Ver também

+ + diff --git a/files/pt-pt/web/css/css_box_model/introducao_modelo_caixa_css/index.html b/files/pt-pt/web/css/css_box_model/introducao_modelo_caixa_css/index.html deleted file mode 100644 index 388a72ab39..0000000000 --- a/files/pt-pt/web/css/css_box_model/introducao_modelo_caixa_css/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Introdução ao modelo de Caixa de CSS -slug: Web/CSS/CSS_Box_Model/Introducao_modelo_caixa_CSS -tags: - - CSS - - Modelo de Caixa de CSS - - Principiante - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -

{{CSSRef}}

- -

Resumo

- -

In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.

- -

In CSS, each of these rectangular boxes is described using the standard box model. This model describes the space of the content taken by an element. Each box has four edges: the margin edge, border edge, padding edge, and content edge.

- -

CSS Box model

- -

The content area is the area containing the real content of the element. It often has a background, a color or an image (in that order, an opaque image hiding the background color) and is located inside the content edge; its dimensions are the content width, or content-box width, and the content height, or content-box height.

- -

If the CSS {{ cssxref("box-sizing") }} property is set to default, the CSS properties {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }} control the content size.

- -

The padding area extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the padding edge, and its dimensions are the padding-box width and the padding-box height.

- -

The space between the padding and the content edge can be controlled using the {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} and the shorthand {{ cssxref("padding") }} CSS properties.

- -

The border area extends the padding area to the area containing the borders. It is the area inside the border edge, and its dimensions are the border-box width and the border-box height. This area depends on the size of the border that is defined by the {{ cssxref("border-width") }} property or the shorthand {{ cssxref("border") }}.

- -

The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.

- -

The size of the margin area is controlled using the {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} and the shorthand {{ cssxref("margin") }} CSS properties.

- -

When margin collapsing happens, the margin area is not clearly defined since margins are shared between boxes.

- -

Finally, note that, for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the {{ cssxref('line-height') }} property, even though the border and padding appear visually around the content.

- -

Especificação

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Though more precisely worded, there is no practical change
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Initial definition
- -

Consultar também

- - diff --git a/files/pt-pt/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/pt-pt/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..388a72ab39 --- /dev/null +++ b/files/pt-pt/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,69 @@ +--- +title: Introdução ao modelo de Caixa de CSS +slug: Web/CSS/CSS_Box_Model/Introducao_modelo_caixa_CSS +tags: + - CSS + - Modelo de Caixa de CSS + - Principiante + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

{{CSSRef}}

+ +

Resumo

+ +

In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.

+ +

In CSS, each of these rectangular boxes is described using the standard box model. This model describes the space of the content taken by an element. Each box has four edges: the margin edge, border edge, padding edge, and content edge.

+ +

CSS Box model

+ +

The content area is the area containing the real content of the element. It often has a background, a color or an image (in that order, an opaque image hiding the background color) and is located inside the content edge; its dimensions are the content width, or content-box width, and the content height, or content-box height.

+ +

If the CSS {{ cssxref("box-sizing") }} property is set to default, the CSS properties {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }} control the content size.

+ +

The padding area extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the padding edge, and its dimensions are the padding-box width and the padding-box height.

+ +

The space between the padding and the content edge can be controlled using the {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} and the shorthand {{ cssxref("padding") }} CSS properties.

+ +

The border area extends the padding area to the area containing the borders. It is the area inside the border edge, and its dimensions are the border-box width and the border-box height. This area depends on the size of the border that is defined by the {{ cssxref("border-width") }} property or the shorthand {{ cssxref("border") }}.

+ +

The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.

+ +

The size of the margin area is controlled using the {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} and the shorthand {{ cssxref("margin") }} CSS properties.

+ +

When margin collapsing happens, the margin area is not clearly defined since margins are shared between boxes.

+ +

Finally, note that, for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the {{ cssxref('line-height') }} property, even though the border and padding appear visually around the content.

+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Though more precisely worded, there is no practical change
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Initial definition
+ +

Consultar também

+ + diff --git a/files/pt-pt/web/css/css_colors/color_picker_tool/index.html b/files/pt-pt/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..696f2afd11 --- /dev/null +++ b/files/pt-pt/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3243 @@ +--- +title: Ferramenta de seleção de cor +slug: Web/CSS/CSS_Colors/Ferramenta_selecao_cor +tags: + - CSS + - Ferramentas + - Seleção de cor + - cor +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML

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

CSS

+ +
/*
+ * 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;
+}
+
+
+ +

JavaScript Content

+ +
'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
+	};
+
+})();
+
+
+ +

 

+ +

{{CSSRef}}

+ +

Esta ferramenta facilita a criação, ajuste, e experimentação de cores personalizadas na internet. Também facilita conversão entre vários formatos de cor disponíveis em CSS, incluindo: HEXA colors, RGB (Red/Green/Blue) e HSL (Hue/Saturation/Lightness). Também é possível controlar o canal alfa nos formatos RGB (rgba) and HSL (hsla).

+ +

Ao ajustar os parâmetros que definem a cor, a mesma é mostrada nos três formatos padrão de CSS na internet. Além disso, com base na cor atualmente selecionada, é gerada uma paleta para HSL e HSV, assim como alfa. A caixa de seleção de cores no estilo "conta-gotas" pode mudar entre HSL e HSV. Também pode testar as cores e ver como se intersetam arrastando-as para a caixa por baixo da ferramenta e deslocando-as para o mesmo ponto. Ajuste o valor do índice-Z relativo para as mover para a frente e para trás umas das outras.

+ +

Esta ferramenta vai ajudá-lo a identificar as cores perfeitas para o CSS do seu HTML.

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

As cores que gerou em cima podem ser usadas em qualquer sítio que estaria uma cor em CSS e/ou HTML, salvo indicação em contrário.

+ +

See also

+ +

Para mais informações sobre cores, consulte estes artigos:

+ + + +

 

+ + diff --git a/files/pt-pt/web/css/css_colors/ferramenta_selecao_cor/index.html b/files/pt-pt/web/css/css_colors/ferramenta_selecao_cor/index.html deleted file mode 100644 index 696f2afd11..0000000000 --- a/files/pt-pt/web/css/css_colors/ferramenta_selecao_cor/index.html +++ /dev/null @@ -1,3243 +0,0 @@ ---- -title: Ferramenta de seleção de cor -slug: Web/CSS/CSS_Colors/Ferramenta_selecao_cor -tags: - - CSS - - Ferramentas - - Seleção de cor - - cor -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPicker tool

- -

HTML

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

CSS

- -
/*
- * 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;
-}
-
-
- -

JavaScript Content

- -
'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
-	};
-
-})();
-
-
- -

 

- -

{{CSSRef}}

- -

Esta ferramenta facilita a criação, ajuste, e experimentação de cores personalizadas na internet. Também facilita conversão entre vários formatos de cor disponíveis em CSS, incluindo: HEXA colors, RGB (Red/Green/Blue) e HSL (Hue/Saturation/Lightness). Também é possível controlar o canal alfa nos formatos RGB (rgba) and HSL (hsla).

- -

Ao ajustar os parâmetros que definem a cor, a mesma é mostrada nos três formatos padrão de CSS na internet. Além disso, com base na cor atualmente selecionada, é gerada uma paleta para HSL e HSV, assim como alfa. A caixa de seleção de cores no estilo "conta-gotas" pode mudar entre HSL e HSV. Também pode testar as cores e ver como se intersetam arrastando-as para a caixa por baixo da ferramenta e deslocando-as para o mesmo ponto. Ajuste o valor do índice-Z relativo para as mover para a frente e para trás umas das outras.

- -

Esta ferramenta vai ajudá-lo a identificar as cores perfeitas para o CSS do seu HTML.

- -

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

- -

As cores que gerou em cima podem ser usadas em qualquer sítio que estaria uma cor em CSS e/ou HTML, salvo indicação em contrário.

- -

See also

- -

Para mais informações sobre cores, consulte estes artigos:

- - - -

 

- - diff --git a/files/pt-pt/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/pt-pt/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..4e1d10f5de --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,215 @@ +--- +title: Alinhamento de Itens num Recipiente Flex +slug: Web/CSS/CSS_Flexible_Box_Layout/alinhamento_de_itens_num_recipiente_flex +tags: + - Alinhar + - CSS + - Flex + - Guía + - align-content + - align-items + - align-self + - alinhamento + - flexbox + - justificar + - justify-content +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

Uma das razões pelas quais o flexbox atraiu rapidamente o interesse dos programadores da Web é que este trouxe os melhores recursos de alinhamento para a Web, pela primeira vez. Este permitiu o alinhamento vertical adequado, e assim nós podemos finalmente, centrar uma caixa facilmente. Neste guia, Nós iremos analisar detalhadamente como as propriedades de alinhamento e justificação funcionam no Flexbox.

+ +

Para centrar a nossa caixa, nós utilizamos a propriedade align-items para alinhar o nosso item no eixo transversal, que neste caso é o eixo do bloco na vertical. Nós utilizamos o justify-content para alinhar o item no eixo principal, que neste caso é o eixo horizontal.

+ +

A containing element with another box centered inside it.

+ +

 

+ +

Podem ver o código do exemplo abaixo. Muda o tamanho do container ou do elemento aninhado e o elemento aninhado permanecerá centrado.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Propriedades que controlam o alinhamento

+ +

As propriedades que nós iremos ver neste guia são as seguintes:

+ + + +

Vamos também descobrir como as margens automáticas podem ser utilizadas para alinhamento em flexbox.

+ +
+

Nota: As propriedades de alinhamento em Flexbox foram colocadas na sua própria especificação — CSS Box Alignment Level 3. É expectável que esta especificação irá enfim substituir as propriedades definidas em Flexbox Level One.

+
+ +

O Eixo Transversal

+ +

As propriedades align-items e align-self controlam o alinhamento dos nossos itens da flex no eixo transversal, pelas colunas se a flex-direction for row e ao longo da linha se a flex-direction for column.

+ +

Estamos a dar uso do alinhamento no eixo transversalno exemplo mais fácil do flex. Se adicionarmos display: flex a um container, os sub-elementos tornarão-se todos itens da flex numa linha. Irão esticar-se para serem tão altos quanto o item mais alto, já que esse item está a definir a altura dos itens do eixo transversal. Se o teu flex container tiver uma altura definida, então os itens irão esticar até essa altura, independentemente de quanto conteúdo estiver no item.

+ +

Three items, one with additional text causing it to be taller than the others.

+ +

Three items stretched to 200 pixels tall

+ +

A razão pela qual os items ficam da mesma altura é porque o valor inicial do align-items, a propriedade que controla o alinhamento no eixo transversal, está definida para stretch.

+ +

Podemos utilizar outros valores para controlar de que forma os itens se alinham:

+ + + +

No exemplo de baixo, o valor do align-items é stretch. Experimenta os outros valores e observa como todos os itens se alinham em relação aos outros no flex container.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

Alinhar um item com align-self

+ +

A propriedade align-items define a propriedade align-self em todos os itens da flex como um grupo. Isto significa que tu podes explicitamente declarar a propriedade align-self para visar um único item. A propriedade align-self aceita todos os valores da align-items , mais o valor  auto, que irá dar reset ao valor definido na flex container.

+ +

Neste próximo exemplo, o flex container tem align-items: flex-start, o que significa que os itens estão todos alinhados com o início do eixo transversal. Eu visei o primeiro item utilizado um first-child e defini esse item para align-items: stretch; outro item foi selecionado utilizando a sua classe de selected e foi-lhe dado align-items: center. Podes alterar o valor do align-items ou os valores do align-self em itens individuais para veres como funciona.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Alteração do eixo principal

+ +

Até agora observámos o comportamento quando o nosso flex-direction é row, enquanto trabalhamos numa linguagem escrita de cima a baixo. Isto significa que o eixo principal "corre" horizontalmente, e o alinhamento do nosso eixo transversal muda os itens para cima e para baixo.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

+ +

Se nós mudarmos o nosso flex-direction para column, o align-items e o align-self irão alinhar os itens para a esquerda e para a direita.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

+ +

Podes testar isto no exemplo abaixo, que tem um flex container com flex-direction: column mas de resto, é exatamente igual ao exemplo anterior.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} 

+ +

Alinhar conteúdo no eixo transversal — a propriedade align-content

+ +

Até agora temos estado a alinhar os itens, ou um item individual, dentro da área definida pelo flex-container. Se tu tiveres um wrapped multiple-line flex container então também poderás querer utilizar a propriedade align-content para controlar a distribuição do espaço entrelinhas. Na especificação isto é descrito como empacotar as linhas do flex.

+ +

Para o align-content funcionar, precisarás de mais altura no teu flex container do que é necessário para mostrar os itens. Irá então afetar todos os itens como um conjunto, e ditará o que irá acontecer com esse espaço livre, e o alinhamento do conjunto inteiro de itens dentro dele.

+ +

A propriedade align-content aceita os seguintes valores:

+ + + +

No exemplo abaixo, o flex container tem uma altura de 400 pixels, o que é mais do que necessário para mostrar os nossos itens. O valor do align-content é space-between, o que significa que o espaço disponível é partilhado entre as linhas da flex, que está posicionada nívelado com o início e o fim do container no eixo transversal.

+ +

Experimenta os outros valores para veres como a propriedade align-content funciona.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Mais uma vez podemos alterar o nosso flex-direction para column de forma a observar como esta propriedade se comporta quando estamos a trabalhar por coluna. Tal como anteriormente, precisamos de espaço suficiente no eixo transversal para ter algum espaço livre depois de mostrar todos os itens.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Nota: o valor space-evenly não está definido na especificação da flexbox e será uma adição posterior à especificação do Alinhamento da Caixa. O suporte dos navegadores para este valor não é tão bom quanto o suporte para os valore definidos na especificação da flexbox.

+
+ +

Lê a documentação para o justify-content no MDN para mais detalhes sobre todos estes valores, e o seu suporte em navegadores.

+ +

Alinhar conteúdo no eixo principal

+ +

Agora que já vimos como o alinhamento funciona no eixo transversal, podemos dar uma olhada no eixo principal. Aqui temos apenas uma propriedade disponível — justify-content. Isto é porque apenas estaremos a lidar como itens como se fossem um grupo no eixo principal. Com o justify-content we control what happens with available space, should there be more space than is needed to display the items.

+ +

In our initial example with display: flex 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 justify-content being flex-start. Any available space is placed at the end of the items.

+ +

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

+ +

The justify-content property accepts the same values as align-content.

+ + + +

In the example below, the value of justify-content is space-between. 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.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+ +

If the main axis is in the block direction because flex-direction is set to column, then justify-content will distribute space between items in that dimension as long as there is space in the flex container to distribute.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} 

+ +

Modos de Alinhamento e Gravação

+ +

Remember that with all of these alignment methods, the values of flex-start and flex-end are writing mode-aware. If the value of justify-content is start and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

+ +

Three items lined up on the left

+ +

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.

+ +

Three items lined up from the right

+ +

The live example below has the direction property set to rtl to force a right-to-left flow for our items. You can remove this, or change the values of justify-content to see how flexbox behaves when the start of the inline direction is on the right.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

Alinhamento e flex-direction

+ +

The start line will also change if you change the flex-direction property — for example using row-reverse instead of row.

+ +

In this next example I have items laid out with flex-direction: row-reverse and justify-content: flex-end. In a left to right language the items all line up on the left. Try changing flex-direction: row-reverse to flex-direction: row. You will see that the items now move to the right hand side.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

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. flex-start will be where the start of a sentence of text would begin.

+ +

Diagram showing start on the left and end on the right.

+ +

You can switch them to display in the block direction for the language of your document by selecting flex-direction: column. Then flex-start will then be where the top of your first paragraph of text would start.

+ +

Diagram showing start and the top and end at the bottom.

+ +

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. flex-start 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.

+ +

Diagram showing start on the right and end on the left.

+ +

Diagram showing end at the top and start at the bottom

+ +

Utilização de margen automáticas para o alinhamento do eixo principal

+ +

We don’t have a justify-items or justify-self 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.

+ +

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 justify-self property, however consider the image below. I have three items on one side and two on the other. If I were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention.

+ +

Five items, in two groups. Three on the left and two on the right.

+ +

Instead we can target item 4 and separate it from the first three items by giving it a margin-left value of auto. Auto margins will take up all of the space that they can in their axis — it is how entering 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.

+ +

In this live example, I have flex items arranged simply into a row with the basic flex values, and the class push has margin-left: auto. You can try removing this, or adding the class to another item to see how it works.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Funcionalidades de alinhamento futuras para o Flexbox

+ +

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 space-evenly value for align-content and justify-content properties.

+ +

The Box Alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in CSS Grid Layout. The inclusion of these properties in Box Alignment means that in future we should be able to use column-gap and row-gap in flex layouts too. This will mean you won’t need to use margins to space out flex items.

+ +

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 Box Alignment in Grid Layout, and I have also compared how alignment works in these specifications in my Box Alignment Cheatsheet.

diff --git a/files/pt-pt/web/css/css_flexible_box_layout/alinhamento_de_itens_num_recipiente_flex/index.html b/files/pt-pt/web/css/css_flexible_box_layout/alinhamento_de_itens_num_recipiente_flex/index.html deleted file mode 100644 index 4e1d10f5de..0000000000 --- a/files/pt-pt/web/css/css_flexible_box_layout/alinhamento_de_itens_num_recipiente_flex/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Alinhamento de Itens num Recipiente Flex -slug: Web/CSS/CSS_Flexible_Box_Layout/alinhamento_de_itens_num_recipiente_flex -tags: - - Alinhar - - CSS - - Flex - - Guía - - align-content - - align-items - - align-self - - alinhamento - - flexbox - - justificar - - justify-content -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container ---- -

{{CSSRef}}

- -

Uma das razões pelas quais o flexbox atraiu rapidamente o interesse dos programadores da Web é que este trouxe os melhores recursos de alinhamento para a Web, pela primeira vez. Este permitiu o alinhamento vertical adequado, e assim nós podemos finalmente, centrar uma caixa facilmente. Neste guia, Nós iremos analisar detalhadamente como as propriedades de alinhamento e justificação funcionam no Flexbox.

- -

Para centrar a nossa caixa, nós utilizamos a propriedade align-items para alinhar o nosso item no eixo transversal, que neste caso é o eixo do bloco na vertical. Nós utilizamos o justify-content para alinhar o item no eixo principal, que neste caso é o eixo horizontal.

- -

A containing element with another box centered inside it.

- -

 

- -

Podem ver o código do exemplo abaixo. Muda o tamanho do container ou do elemento aninhado e o elemento aninhado permanecerá centrado.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

- -

Propriedades que controlam o alinhamento

- -

As propriedades que nós iremos ver neste guia são as seguintes:

- - - -

Vamos também descobrir como as margens automáticas podem ser utilizadas para alinhamento em flexbox.

- -
-

Nota: As propriedades de alinhamento em Flexbox foram colocadas na sua própria especificação — CSS Box Alignment Level 3. É expectável que esta especificação irá enfim substituir as propriedades definidas em Flexbox Level One.

-
- -

O Eixo Transversal

- -

As propriedades align-items e align-self controlam o alinhamento dos nossos itens da flex no eixo transversal, pelas colunas se a flex-direction for row e ao longo da linha se a flex-direction for column.

- -

Estamos a dar uso do alinhamento no eixo transversalno exemplo mais fácil do flex. Se adicionarmos display: flex a um container, os sub-elementos tornarão-se todos itens da flex numa linha. Irão esticar-se para serem tão altos quanto o item mais alto, já que esse item está a definir a altura dos itens do eixo transversal. Se o teu flex container tiver uma altura definida, então os itens irão esticar até essa altura, independentemente de quanto conteúdo estiver no item.

- -

Three items, one with additional text causing it to be taller than the others.

- -

Three items stretched to 200 pixels tall

- -

A razão pela qual os items ficam da mesma altura é porque o valor inicial do align-items, a propriedade que controla o alinhamento no eixo transversal, está definida para stretch.

- -

Podemos utilizar outros valores para controlar de que forma os itens se alinham:

- - - -

No exemplo de baixo, o valor do align-items é stretch. Experimenta os outros valores e observa como todos os itens se alinham em relação aos outros no flex container.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

- -

Alinhar um item com align-self

- -

A propriedade align-items define a propriedade align-self em todos os itens da flex como um grupo. Isto significa que tu podes explicitamente declarar a propriedade align-self para visar um único item. A propriedade align-self aceita todos os valores da align-items , mais o valor  auto, que irá dar reset ao valor definido na flex container.

- -

Neste próximo exemplo, o flex container tem align-items: flex-start, o que significa que os itens estão todos alinhados com o início do eixo transversal. Eu visei o primeiro item utilizado um first-child e defini esse item para align-items: stretch; outro item foi selecionado utilizando a sua classe de selected e foi-lhe dado align-items: center. Podes alterar o valor do align-items ou os valores do align-self em itens individuais para veres como funciona.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

- -

Alteração do eixo principal

- -

Até agora observámos o comportamento quando o nosso flex-direction é row, enquanto trabalhamos numa linguagem escrita de cima a baixo. Isto significa que o eixo principal "corre" horizontalmente, e o alinhamento do nosso eixo transversal muda os itens para cima e para baixo.

- -

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

- -

Se nós mudarmos o nosso flex-direction para column, o align-items e o align-self irão alinhar os itens para a esquerda e para a direita.

- -

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

- -

Podes testar isto no exemplo abaixo, que tem um flex container com flex-direction: column mas de resto, é exatamente igual ao exemplo anterior.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} 

- -

Alinhar conteúdo no eixo transversal — a propriedade align-content

- -

Até agora temos estado a alinhar os itens, ou um item individual, dentro da área definida pelo flex-container. Se tu tiveres um wrapped multiple-line flex container então também poderás querer utilizar a propriedade align-content para controlar a distribuição do espaço entrelinhas. Na especificação isto é descrito como empacotar as linhas do flex.

- -

Para o align-content funcionar, precisarás de mais altura no teu flex container do que é necessário para mostrar os itens. Irá então afetar todos os itens como um conjunto, e ditará o que irá acontecer com esse espaço livre, e o alinhamento do conjunto inteiro de itens dentro dele.

- -

A propriedade align-content aceita os seguintes valores:

- - - -

No exemplo abaixo, o flex container tem uma altura de 400 pixels, o que é mais do que necessário para mostrar os nossos itens. O valor do align-content é space-between, o que significa que o espaço disponível é partilhado entre as linhas da flex, que está posicionada nívelado com o início e o fim do container no eixo transversal.

- -

Experimenta os outros valores para veres como a propriedade align-content funciona.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

- -

Mais uma vez podemos alterar o nosso flex-direction para column de forma a observar como esta propriedade se comporta quando estamos a trabalhar por coluna. Tal como anteriormente, precisamos de espaço suficiente no eixo transversal para ter algum espaço livre depois de mostrar todos os itens.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

- -
-

Nota: o valor space-evenly não está definido na especificação da flexbox e será uma adição posterior à especificação do Alinhamento da Caixa. O suporte dos navegadores para este valor não é tão bom quanto o suporte para os valore definidos na especificação da flexbox.

-
- -

Lê a documentação para o justify-content no MDN para mais detalhes sobre todos estes valores, e o seu suporte em navegadores.

- -

Alinhar conteúdo no eixo principal

- -

Agora que já vimos como o alinhamento funciona no eixo transversal, podemos dar uma olhada no eixo principal. Aqui temos apenas uma propriedade disponível — justify-content. Isto é porque apenas estaremos a lidar como itens como se fossem um grupo no eixo principal. Com o justify-content we control what happens with available space, should there be more space than is needed to display the items.

- -

In our initial example with display: flex 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 justify-content being flex-start. Any available space is placed at the end of the items.

- -

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

- -

The justify-content property accepts the same values as align-content.

- - - -

In the example below, the value of justify-content is space-between. 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.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

- -

If the main axis is in the block direction because flex-direction is set to column, then justify-content will distribute space between items in that dimension as long as there is space in the flex container to distribute.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} 

- -

Modos de Alinhamento e Gravação

- -

Remember that with all of these alignment methods, the values of flex-start and flex-end are writing mode-aware. If the value of justify-content is start and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

- -

Three items lined up on the left

- -

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.

- -

Three items lined up from the right

- -

The live example below has the direction property set to rtl to force a right-to-left flow for our items. You can remove this, or change the values of justify-content to see how flexbox behaves when the start of the inline direction is on the right.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

- -

Alinhamento e flex-direction

- -

The start line will also change if you change the flex-direction property — for example using row-reverse instead of row.

- -

In this next example I have items laid out with flex-direction: row-reverse and justify-content: flex-end. In a left to right language the items all line up on the left. Try changing flex-direction: row-reverse to flex-direction: row. You will see that the items now move to the right hand side.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

- -

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. flex-start will be where the start of a sentence of text would begin.

- -

Diagram showing start on the left and end on the right.

- -

You can switch them to display in the block direction for the language of your document by selecting flex-direction: column. Then flex-start will then be where the top of your first paragraph of text would start.

- -

Diagram showing start and the top and end at the bottom.

- -

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. flex-start 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.

- -

Diagram showing start on the right and end on the left.

- -

Diagram showing end at the top and start at the bottom

- -

Utilização de margen automáticas para o alinhamento do eixo principal

- -

We don’t have a justify-items or justify-self 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.

- -

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 justify-self property, however consider the image below. I have three items on one side and two on the other. If I were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention.

- -

Five items, in two groups. Three on the left and two on the right.

- -

Instead we can target item 4 and separate it from the first three items by giving it a margin-left value of auto. Auto margins will take up all of the space that they can in their axis — it is how entering 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.

- -

In this live example, I have flex items arranged simply into a row with the basic flex values, and the class push has margin-left: auto. You can try removing this, or adding the class to another item to see how it works.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

- -

Funcionalidades de alinhamento futuras para o Flexbox

- -

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 space-evenly value for align-content and justify-content properties.

- -

The Box Alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in CSS Grid Layout. The inclusion of these properties in Box Alignment means that in future we should be able to use column-gap and row-gap in flex layouts too. This will mean you won’t need to use margins to space out flex items.

- -

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 Box Alignment in Grid Layout, and I have also compared how alignment works in these specifications in my Box Alignment Cheatsheet.

diff --git a/files/pt-pt/web/css/css_flexible_box_layout/casos_de_utilizacao_tipicos_do_flexbox/index.html b/files/pt-pt/web/css/css_flexible_box_layout/casos_de_utilizacao_tipicos_do_flexbox/index.html deleted file mode 100644 index cd89209634..0000000000 --- a/files/pt-pt/web/css/css_flexible_box_layout/casos_de_utilizacao_tipicos_do_flexbox/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Casos de utilização típicos do Flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/casos_de_utilizacao_tipicos_do_flexbox -tags: - - CSS - - Caixa Flexível - - Flexible Box - - Guía - - flexbox - - padrões - - utilizações comuns -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox ---- -

{{CSSRef}}

- -

Neste guia, nós vamos dar uma vista de olhos em alguns dos casos de utilização comuns para o flexbox - esses lugares onde faz mais sentido do que outro método de layout .

- -

Porque escolher flexbox?

- -

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 Relationship of Flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of CSS Layout.

- -

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.

- - - -

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.

- -

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.

- -

Espaço distribuído fora dos itens

- -

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 Aligning Items in a flex container, which deals with aligning items on the main axis.

- -

In the below live example we display the items at their natural size and by using justify-content: space-between make equal amounts of space between the items. You can change how the space is distributed using the space-around value, or where supported, space-evenly. You could also use flex-start to place the space at the end of the items, flex-end to place it before them, or center to centre the navigation items.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

- -

Espaço distribuído dentro dos itens

- -

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 Controlling ratios of flex items along the main axis.

- -

If I wanted all of my navigation items to have equal width, then I might use flex: auto, which is the shorthand for flex: 1 1 auto — all items grow and shrink from a flex-basis of auto. This would mean that the longer item would have more space.

- -

In the live example below try changing flex: auto to flex: 1. This is the shorthand for flex: 1 1 0 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.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

- -

Dividir navegação

- -

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.

- -

Here we are using the auto margins technique described in Using auto margins for main axis alignment. The items are aligned on the main axis with flex-start 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.

- -

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 gap 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.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

- -

Centrar item

- -

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.

- -

You can play with the alignment, aligning the item to the start with flex-start or end with flex-end.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

- -

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 align-items on the parent element or target the flex item itself with align-self.

- - - -

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.

- -

Two card components showing that the internals of the component do not stretch with the wrapper.

- -

Flexbox can solve this. We make the card a flex container, with {{cssxref("flex-direction")}}: column. We then set the content area to flex: 1, which is the shorthand for flex: 1 1 auto — the item can grow and shrink from a flex basis of auto. 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 flex property from the live example you will see how the footer then moves up to sit directly under the content.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

- -

Objetos de multimédia

- -

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.

- -

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.

- -

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 flex-start, and then set the .content flex item to flex: 1. As with our column layout card pattern above, using flex: 1 means this part of the card can grow.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

- -

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.

- -

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 flex-basis of auto. Any {{cssxref("width")}} or max-width applied to the image will become the flex-basis.

- -
.image img {
-  max-width: 100px;
-}
-
- -

You could also allow both sides to grow and shrink in proportion. If you set both sides to flex: 1, 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 flex: auto, 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.

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. This will mean they use a flex-basis of auto but distribute that space at different rates according to the flex-grow factor you have assigned. The flex properties we use to do this are described in detail in the guide Controlling ratios of flex items along the main axis.

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

Flipping the media object

- -

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 flex-direction property set to row-reverse. The media object now displays the other way around. I have achieved this in the live example by adding a class of flipped alongside the existing .media class. This means you can see how the display changes by removing that class from the html.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

Controlos de formulário

- -

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.

- -

Flexbox makes this type of layout easy to achieve. I have contained my <button> and <input> field in a wrapper which I have given a border and set to display: flex. I have then set the align-items property to center so that the fields stay aligned with each other. I then use the flex properties to allow the <input> 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.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

- -

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.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

- -

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.

- -

Conclusão

- -

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. 

- -

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.

diff --git a/files/pt-pt/web/css/css_flexible_box_layout/ordenacao_dos_itens_flex/index.html b/files/pt-pt/web/css/css_flexible_box_layout/ordenacao_dos_itens_flex/index.html deleted file mode 100644 index b2bc22df09..0000000000 --- a/files/pt-pt/web/css/css_flexible_box_layout/ordenacao_dos_itens_flex/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Ordenação do itens Flex -slug: Web/CSS/CSS_Flexible_Box_Layout/ordenacao_dos_itens_flex -tags: - - Acessibilidade - - CSS - - Flex - - Guía - - direção - - flexbox - - ordem - - reverter -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items ---- -

{{CSSRef}}

- -

Os novos métodos de layout, tais como Flexbox e Grielha trazem com eles a possibilidade de controlar a ordem do conteúdo. Neste artigo, nós iremos analisar as maneiras pelas quais pode alterar a ordem visual do seu conteúdo quando utilizar o Flexbox. Nós também iremos considerar as implicações de reordenar itens de um ponto de vista de acessibilidade.

- -

Reverter a exibição dos itens

- -

The {{cssxref("flex-direction")}} property can take one of four values:

- - - -

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.

- -

The items are displayed in a row starting on the left.

- -

The items are displayed as a column starting from the top

- -

The second two values reverse the items by switching the start and end lines.

- -

The items are displayed in reverse order starting on the right-hand line.

- -

The items are displayed in a column in reverse order starting at the bottom line.

- -

Remember that the start line relates to writing modes. The row-related examples above demonstrate how row and row-reverse work in a left-to-right language such as English. If you were working in a right-to-left language like Arabic then row would start on the right, row-reverse on the left.

- -

Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left.

- -

This can seem like a neat way to display things in reverse order however you should be mindful that the items are only visually displayed in reverse order. The specification says the following on this matter:

- -
-

“Nota: 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.” - Ordering and Orientation

-
- -

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.

- -

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:

- -
-

“Authors must not 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.”

-
- -
-

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

-
- -

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 flex-direction you can see how the tab order continues to follow the order that the items are listed in the source.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

- -

In the same way that changing the value of flex-direction 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.

- -

A propriedade order

- -

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.

- -

The order property is designed to lay the items out in ordinal groups. 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.

- -

As an example, I have 5 flex items, and assign order values as follows:

- - - -

These items would be displayed on the page in the following order:

- - - -

Items have a number showing their source order which has been rearranged.

- -

You can play around with the values in this live example below and see how that changes the order. Also, try changing flex-direction to row-reverse and see what happens — the start line is switched so the ordering begins from the opposite side.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

- -

Flex items have a default order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value.

- -

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 -1. As this is lower than 0 the item will always be displayed first.

- -

In the live code example below I have items laid out using Flexbox. By changing which item has the class active 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.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

- -

The items are displayed in what is described in the specification as order-modified document order. The value of the order property is taken into account before the items are displayed.

- -

Order also changes the paint order of the items; items with a lower value for order will be painted first and those with a higher value for order painted afterwards.

- -

A propriedade order e acessibilidade

- -

Use of the order property has exactly the same implications for accessibility as changing the direction with flex-direction. Using order 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.

- -

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.

- - - -

Casos de utilização para order

- -

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 order property can allow for some useful common patterns to be easily implemented.

- -

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.

- -

A design component with a date, then heading and then content.

- -

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 order property.

- -

The card is going to be our flex container, with flex-direction set to column. I then give the date an order of -1. This pulls it up above the heading.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

- -

These small tweaks are the sort of cases where the order 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 order 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.

diff --git a/files/pt-pt/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/pt-pt/web/css/css_flexible_box_layout/ordering_flex_items/index.html new file mode 100644 index 0000000000..b2bc22df09 --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -0,0 +1,140 @@ +--- +title: Ordenação do itens Flex +slug: Web/CSS/CSS_Flexible_Box_Layout/ordenacao_dos_itens_flex +tags: + - Acessibilidade + - CSS + - Flex + - Guía + - direção + - flexbox + - ordem + - reverter +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +

{{CSSRef}}

+ +

Os novos métodos de layout, tais como Flexbox e Grielha trazem com eles a possibilidade de controlar a ordem do conteúdo. Neste artigo, nós iremos analisar as maneiras pelas quais pode alterar a ordem visual do seu conteúdo quando utilizar o Flexbox. Nós também iremos considerar as implicações de reordenar itens de um ponto de vista de acessibilidade.

+ +

Reverter a exibição dos itens

+ +

The {{cssxref("flex-direction")}} property can take one of four values:

+ + + +

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.

+ +

The items are displayed in a row starting on the left.

+ +

The items are displayed as a column starting from the top

+ +

The second two values reverse the items by switching the start and end lines.

+ +

The items are displayed in reverse order starting on the right-hand line.

+ +

The items are displayed in a column in reverse order starting at the bottom line.

+ +

Remember that the start line relates to writing modes. The row-related examples above demonstrate how row and row-reverse work in a left-to-right language such as English. If you were working in a right-to-left language like Arabic then row would start on the right, row-reverse on the left.

+ +

Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left.

+ +

This can seem like a neat way to display things in reverse order however you should be mindful that the items are only visually displayed in reverse order. The specification says the following on this matter:

+ +
+

“Nota: 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.” - Ordering and Orientation

+
+ +

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.

+ +

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:

+ +
+

“Authors must not 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.”

+
+ +
+

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

+
+ +

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 flex-direction you can see how the tab order continues to follow the order that the items are listed in the source.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+ +

In the same way that changing the value of flex-direction 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.

+ +

A propriedade order

+ +

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.

+ +

The order property is designed to lay the items out in ordinal groups. 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.

+ +

As an example, I have 5 flex items, and assign order values as follows:

+ + + +

These items would be displayed on the page in the following order:

+ + + +

Items have a number showing their source order which has been rearranged.

+ +

You can play around with the values in this live example below and see how that changes the order. Also, try changing flex-direction to row-reverse and see what happens — the start line is switched so the ordering begins from the opposite side.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+ +

Flex items have a default order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value.

+ +

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 -1. As this is lower than 0 the item will always be displayed first.

+ +

In the live code example below I have items laid out using Flexbox. By changing which item has the class active 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.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+ +

The items are displayed in what is described in the specification as order-modified document order. The value of the order property is taken into account before the items are displayed.

+ +

Order also changes the paint order of the items; items with a lower value for order will be painted first and those with a higher value for order painted afterwards.

+ +

A propriedade order e acessibilidade

+ +

Use of the order property has exactly the same implications for accessibility as changing the direction with flex-direction. Using order 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.

+ +

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.

+ + + +

Casos de utilização para order

+ +

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 order property can allow for some useful common patterns to be easily implemented.

+ +

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.

+ +

A design component with a date, then heading and then content.

+ +

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 order property.

+ +

The card is going to be our flex container, with flex-direction set to column. I then give the date an order of -1. This pulls it up above the heading.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+ +

These small tweaks are the sort of cases where the order 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 order 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.

diff --git a/files/pt-pt/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/pt-pt/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html new file mode 100644 index 0000000000..83c570f33e --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -0,0 +1,125 @@ +--- +title: Relação do flexbox com outros métodos de layout +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/relação_do_flexbox_com_outros_métodos_de_layout +tags: + - CSS + - Guía + - Modo de Gravação + - alinhamento de caixa + - conteúdos + - exibição + - flexbox + - grelha +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +--- +
{{CSSRef}}
+ +

Neste artigo, nós iremos ver como o Flexbox se encaixa com todos os outros módulos de CSS. Nós iremos saber quais as especificações que também precisa de ter em consideração se quiser aprender flexboxm, e saber por que o flexbox é diferente de alguns outros módulos.

+ +
+

Nota: CSS versions 1 and 2 were a single monolithic specification where all of CSS was defined in one large document. As CSS became a more feature rich language, maintaining one huge specification became problematic, with different parts of CSS moving on at different speeds. CSS was therefore modularised, and the various CSS Specifications are different modules that make up CSS today. These modules relate to each other, and are at different stages of development.

+
+ +

O módulo de alinhamento de caixa

+ +

For many people the first reason they start to look at flexbox is because of the ability to properly align flex items inside a flex container. Flexbox provides access to properties that allow the alignment of items on their cross axis and justification of items on the main axis.

+ +

These properties started life in the flexbox specification, but are now also part of the Especificação de Alinhamento de Caixa (inglês). This specification details how alignment works in all layout — not just flexbox. Box alignment deals with alignment and justification, and also distribution of space along an axis.

+ +

The reason that the Box alignment properties remain detailed in the flexbox specification as well as being in box alignment is to ensure that completion of the flexbox spec is not held up by box alignment, which has to detail these methods for all layout types. There is a note in the flexbox spec stating that in future, once it is completed, the definitions in Box Alignment Level 3 will supercede those of flexbox:

+ +
+

"Note: While the alignment properties are defined in CSS Box Alignment CSS-ALIGN-3, Flexible Box Layout reproduces the definitions of the relevant ones here so as to not create a normative dependency that may slow down advancement of the spec. These properties apply only to flex layout until CSS Box Alignment Level 3 is finished and defines their effect for other layout modes. Additionally, any new values defined in the Box Alignment module will apply to Flexible Box Layout; in otherwords, the Box Alignment module, once completed, will supercede the definitions here."

+
+ +

In a later article in this series — Aligning items in a flex container — we will take a thorough look at how the Box Alignment properties apply to flex items.

+ +

As propriedades de gap

+ +

A recent addition to the Box Alignment specification has been the {{cssxref("row-gap")}} and {{cssxref("column-gap")}} properties, long with the shorthand {{cssxref("gap")}}. These properties were initially defined in the CSS Grid specification and named grid-row-gap, grid-column-gap and grid-gap. They have been renamed and moved to Box Alignment in order that they can be used in all layout methods — this will ultimately include flexbox. Until browsers implement the gap properties for flexbox, {{cssxref("margin")}}s have to be used to create gaps between items.

+ +

Modos de Gravação

+ +

In the Basic concepts of flexbox article, I explained that flexbox is writing mode aware. Writing modes are fully detailed in the CSS Writing Modes specification, which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding block and inline directions is key to new layout methods.

+ +

It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See this article for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. 

+ +

Os modes de gravação

+ +

The writing modes specification defines the following values of the {{cssxref("writing-mode")}} property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. You can change the live example below to these modes in order to see what happens to the flex layout.

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+ +

Note that sideways-rl and sideways-lr have support only in Firefox currently. There are also some known issues with regard to writing-mode and flexbox. You can see more information on browser support in the MDN documentation for writing-mode. However if you are planning on using writing modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read!

+ +

Note that you would not normally use CSS and the writing-mode property to change an entire document to another writing mode. This would be done via HTML, by add a dir and lang attribute to the html element to indicate the document language and default text direction. This would mean that the document would display correctly even if CSS did not load.

+ +

Flexbox e outros métodos de layout

+ +

The flexbox specification contains a definition of what happens if an item uses another layout method and then becomes a flex item. For example, if an item is floated and then its parent becomes a flex container. Or, how a flex container behaves as part of layout.

+ +

An element set to display: flex behaves in most ways like any other block level container that establishes a containing block. Floats will not intrude, and the containers' margins will not collapse.

+ +

With regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having display: flex applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. If you have used the {{cssxref("vertical-align")}} property, as used with inline-block or table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead.

+ +

In this next live example the child elements have been floated, and then their container has had display: flex added. If you remove display: flex, you should see that the .box element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply display: flex and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+ +

Flexbox e Layout de Grelha

+ +

CSS Grid Layout and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the flex properties that may have been assigned to the child elements will be ignored.

+ +

You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well.

+ +

Flex e grelha — qual é a diferença?

+ +

A common question is to ask what the difference is between Flexbox and CSS Grid Layout — why do we have two specifications that sometimes appear to be doing the same thing as each other?

+ +

The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas Grid Layout is a two-dimensional layout method. In the below example I have a flex layout. As already described in the Basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. When space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+ +

If we create a very similar layout using Grid, we can control the layout in both rows and columns.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+ +

These examples point to another key differences between these layout methods. In Grid Layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves.

+ +

In some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your CSS. There is rarely a right or wrong answer.

+ +

As a rule of thumb, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it.

+ +

For more comparisons of grid and flexbox see the article Relationship of Grid Layout to other layout methods. This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use.

+ +

Flexbox e exibição: conteúdos

+ +

The contents value of the {{cssxref("display")}} property is a new value that is described in the spec as follows:

+ +
+

“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.”

+
+ +

This value of display controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.

+ +

In the following live example I have a flex container with three child elements. One of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.

+ +

By adding display: contents to the wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. You can try removing the display: contents line to see it return.

+ +

Note that this only removes the box from the layout; the sub-children don’t become direct children in any other way. You can see that as I have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children. They have been laid out as flex items, but as they are not direct children they do not get the other styling.

+ +

Also, having removed the box you cannot then use it to — for example — add a background colour behind the nested sub children. If you remove display: contents in this live example you will see that the direct child we are removing has an orange background colour. This also disappears when the box disappears. 

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+ +

Browser support for display:contents is limited and required for this demo to work. Firefox supports display: contents already, and the value is being implemented in Chrome. Once there is better browser support this feature will be very useful in circumstances where you need the markup for semantic reasons but do not want to display the box that it would generate by default.

diff --git "a/files/pt-pt/web/css/css_flexible_box_layout/rela\303\247\303\243o_do_flexbox_com_outros_m\303\251todos_de_layout/index.html" "b/files/pt-pt/web/css/css_flexible_box_layout/rela\303\247\303\243o_do_flexbox_com_outros_m\303\251todos_de_layout/index.html" deleted file mode 100644 index 83c570f33e..0000000000 --- "a/files/pt-pt/web/css/css_flexible_box_layout/rela\303\247\303\243o_do_flexbox_com_outros_m\303\251todos_de_layout/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Relação do flexbox com outros métodos de layout -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/relação_do_flexbox_com_outros_métodos_de_layout -tags: - - CSS - - Guía - - Modo de Gravação - - alinhamento de caixa - - conteúdos - - exibição - - flexbox - - grelha -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods ---- -
{{CSSRef}}
- -

Neste artigo, nós iremos ver como o Flexbox se encaixa com todos os outros módulos de CSS. Nós iremos saber quais as especificações que também precisa de ter em consideração se quiser aprender flexboxm, e saber por que o flexbox é diferente de alguns outros módulos.

- -
-

Nota: CSS versions 1 and 2 were a single monolithic specification where all of CSS was defined in one large document. As CSS became a more feature rich language, maintaining one huge specification became problematic, with different parts of CSS moving on at different speeds. CSS was therefore modularised, and the various CSS Specifications are different modules that make up CSS today. These modules relate to each other, and are at different stages of development.

-
- -

O módulo de alinhamento de caixa

- -

For many people the first reason they start to look at flexbox is because of the ability to properly align flex items inside a flex container. Flexbox provides access to properties that allow the alignment of items on their cross axis and justification of items on the main axis.

- -

These properties started life in the flexbox specification, but are now also part of the Especificação de Alinhamento de Caixa (inglês). This specification details how alignment works in all layout — not just flexbox. Box alignment deals with alignment and justification, and also distribution of space along an axis.

- -

The reason that the Box alignment properties remain detailed in the flexbox specification as well as being in box alignment is to ensure that completion of the flexbox spec is not held up by box alignment, which has to detail these methods for all layout types. There is a note in the flexbox spec stating that in future, once it is completed, the definitions in Box Alignment Level 3 will supercede those of flexbox:

- -
-

"Note: While the alignment properties are defined in CSS Box Alignment CSS-ALIGN-3, Flexible Box Layout reproduces the definitions of the relevant ones here so as to not create a normative dependency that may slow down advancement of the spec. These properties apply only to flex layout until CSS Box Alignment Level 3 is finished and defines their effect for other layout modes. Additionally, any new values defined in the Box Alignment module will apply to Flexible Box Layout; in otherwords, the Box Alignment module, once completed, will supercede the definitions here."

-
- -

In a later article in this series — Aligning items in a flex container — we will take a thorough look at how the Box Alignment properties apply to flex items.

- -

As propriedades de gap

- -

A recent addition to the Box Alignment specification has been the {{cssxref("row-gap")}} and {{cssxref("column-gap")}} properties, long with the shorthand {{cssxref("gap")}}. These properties were initially defined in the CSS Grid specification and named grid-row-gap, grid-column-gap and grid-gap. They have been renamed and moved to Box Alignment in order that they can be used in all layout methods — this will ultimately include flexbox. Until browsers implement the gap properties for flexbox, {{cssxref("margin")}}s have to be used to create gaps between items.

- -

Modos de Gravação

- -

In the Basic concepts of flexbox article, I explained that flexbox is writing mode aware. Writing modes are fully detailed in the CSS Writing Modes specification, which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding block and inline directions is key to new layout methods.

- -

It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See this article for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. 

- -

Os modes de gravação

- -

The writing modes specification defines the following values of the {{cssxref("writing-mode")}} property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. You can change the live example below to these modes in order to see what happens to the flex layout.

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

- -

Note that sideways-rl and sideways-lr have support only in Firefox currently. There are also some known issues with regard to writing-mode and flexbox. You can see more information on browser support in the MDN documentation for writing-mode. However if you are planning on using writing modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read!

- -

Note that you would not normally use CSS and the writing-mode property to change an entire document to another writing mode. This would be done via HTML, by add a dir and lang attribute to the html element to indicate the document language and default text direction. This would mean that the document would display correctly even if CSS did not load.

- -

Flexbox e outros métodos de layout

- -

The flexbox specification contains a definition of what happens if an item uses another layout method and then becomes a flex item. For example, if an item is floated and then its parent becomes a flex container. Or, how a flex container behaves as part of layout.

- -

An element set to display: flex behaves in most ways like any other block level container that establishes a containing block. Floats will not intrude, and the containers' margins will not collapse.

- -

With regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having display: flex applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. If you have used the {{cssxref("vertical-align")}} property, as used with inline-block or table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead.

- -

In this next live example the child elements have been floated, and then their container has had display: flex added. If you remove display: flex, you should see that the .box element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply display: flex and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

- -

Flexbox e Layout de Grelha

- -

CSS Grid Layout and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the flex properties that may have been assigned to the child elements will be ignored.

- -

You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well.

- -

Flex e grelha — qual é a diferença?

- -

A common question is to ask what the difference is between Flexbox and CSS Grid Layout — why do we have two specifications that sometimes appear to be doing the same thing as each other?

- -

The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas Grid Layout is a two-dimensional layout method. In the below example I have a flex layout. As already described in the Basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. When space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

- -

If we create a very similar layout using Grid, we can control the layout in both rows and columns.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

- -

These examples point to another key differences between these layout methods. In Grid Layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves.

- -

In some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your CSS. There is rarely a right or wrong answer.

- -

As a rule of thumb, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it.

- -

For more comparisons of grid and flexbox see the article Relationship of Grid Layout to other layout methods. This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use.

- -

Flexbox e exibição: conteúdos

- -

The contents value of the {{cssxref("display")}} property is a new value that is described in the spec as follows:

- -
-

“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.”

-
- -

This value of display controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.

- -

In the following live example I have a flex container with three child elements. One of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.

- -

By adding display: contents to the wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. You can try removing the display: contents line to see it return.

- -

Note that this only removes the box from the layout; the sub-children don’t become direct children in any other way. You can see that as I have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children. They have been laid out as flex items, but as they are not direct children they do not get the other styling.

- -

Also, having removed the box you cannot then use it to — for example — add a background colour behind the nested sub children. If you remove display: contents in this live example you will see that the direct child we are removing has an orange background colour. This also disappears when the box disappears. 

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

- -

Browser support for display:contents is limited and required for this demo to work. Firefox supports display: contents already, and the value is being implemented in Chrome. Once there is better browser support this feature will be very useful in circumstances where you need the markup for semantic reasons but do not want to display the box that it would generate by default.

diff --git a/files/pt-pt/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/pt-pt/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..cd89209634 --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,143 @@ +--- +title: Casos de utilização típicos do Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/casos_de_utilizacao_tipicos_do_flexbox +tags: + - CSS + - Caixa Flexível + - Flexible Box + - Guía + - flexbox + - padrões + - utilizações comuns +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

Neste guia, nós vamos dar uma vista de olhos em alguns dos casos de utilização comuns para o flexbox - esses lugares onde faz mais sentido do que outro método de layout .

+ +

Porque escolher flexbox?

+ +

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 Relationship of Flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of CSS Layout.

+ +

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.

+ + + +

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.

+ +

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.

+ +

Espaço distribuído fora dos itens

+ +

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 Aligning Items in a flex container, which deals with aligning items on the main axis.

+ +

In the below live example we display the items at their natural size and by using justify-content: space-between make equal amounts of space between the items. You can change how the space is distributed using the space-around value, or where supported, space-evenly. You could also use flex-start to place the space at the end of the items, flex-end to place it before them, or center to centre the navigation items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

Espaço distribuído dentro dos itens

+ +

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 Controlling ratios of flex items along the main axis.

+ +

If I wanted all of my navigation items to have equal width, then I might use flex: auto, which is the shorthand for flex: 1 1 auto — all items grow and shrink from a flex-basis of auto. This would mean that the longer item would have more space.

+ +

In the live example below try changing flex: auto to flex: 1. This is the shorthand for flex: 1 1 0 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.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

Dividir navegação

+ +

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.

+ +

Here we are using the auto margins technique described in Using auto margins for main axis alignment. The items are aligned on the main axis with flex-start 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.

+ +

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 gap 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.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrar item

+ +

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.

+ +

You can play with the alignment, aligning the item to the start with flex-start or end with flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

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 align-items on the parent element or target the flex item itself with align-self.

+ + + +

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.

+ +

Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

Flexbox can solve this. We make the card a flex container, with {{cssxref("flex-direction")}}: column. We then set the content area to flex: 1, which is the shorthand for flex: 1 1 auto — the item can grow and shrink from a flex basis of auto. 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 flex property from the live example you will see how the footer then moves up to sit directly under the content.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Objetos de multimédia

+ +

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.

+ +

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.

+ +

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 flex-start, and then set the .content flex item to flex: 1. As with our column layout card pattern above, using flex: 1 means this part of the card can grow.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

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.

+ +

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 flex-basis of auto. Any {{cssxref("width")}} or max-width applied to the image will become the flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

You could also allow both sides to grow and shrink in proportion. If you set both sides to flex: 1, 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 flex: auto, 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.

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. This will mean they use a flex-basis of auto but distribute that space at different rates according to the flex-grow factor you have assigned. The flex properties we use to do this are described in detail in the guide Controlling ratios of flex items along the main axis.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Flipping the media object

+ +

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 flex-direction property set to row-reverse. The media object now displays the other way around. I have achieved this in the live example by adding a class of flipped alongside the existing .media class. This means you can see how the display changes by removing that class from the html.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Controlos de formulário

+ +

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.

+ +

Flexbox makes this type of layout easy to achieve. I have contained my <button> and <input> field in a wrapper which I have given a border and set to display: flex. I have then set the align-items property to center so that the fields stay aligned with each other. I then use the flex properties to allow the <input> 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.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

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.

+ +

Conclusão

+ +

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. 

+ +

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.

diff --git a/files/pt-pt/web/css/css_grid_layout/index.html b/files/pt-pt/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..db142d2dde --- /dev/null +++ b/files/pt-pt/web/css/css_grid_layout/index.html @@ -0,0 +1,250 @@ +--- +title: CSS - Layout de Grade +slug: Web/CSS/layout_de_grelha_css +tags: + - CSS + - Grades + - Layout + - Layout de Grade + - Referencia + - Resumo +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS - Layout de Grade destaca-se em dividir uma página em regiões principais, ou definir a relação em termos de tamanho, posição e camada, entre partes de um controle criado a partir de HTML primitivas. 
+  
+ Tal como as tabelas, o layout de grelha permite que um autor alinhe os elementos em colunas e linhas. No entanto, são possíveis muitos mais layouts ou mais fáceis com a grelha de CSS do que eram com as tabelas. Por exemplo, os elementos filhos de um recipiente de grelha poderão posicionar-se a eles mesmos, e assim eles realmente se sobrepõem e a camada, similar aos elementos posicionados do CSSs..

+ +

Exemplo básico

+ +

O exemplo abaixo mostra uma grelha de faixa com três colunas, com novas linhas criadas com um mínimo de 100 píxeis e um máximo de auto. Os itens foram colocados na grelha utilizando o posicionamento baseado em linha .

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

Referência

+ +

CSS - propriedades

+ +
+ +
+ +

CSS - funções

+ +
+ +
+ +

CSS - tipos de dados

+ +
+ +
+ +

Glossário - entradas

+ +
+ +
+ +

Guias

+ +
+ +
+ +

Recursos externos

+ + + +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + diff --git a/files/pt-pt/web/css/css_tipos/index.html b/files/pt-pt/web/css/css_tipos/index.html deleted file mode 100644 index ea7049f5a4..0000000000 --- a/files/pt-pt/web/css/css_tipos/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: CSS - Tipos de datos básicos -slug: Web/CSS/CSS_Tipos -tags: - - CSS - - Referencia - - Resumo - - Sinopse - - Tipos de Dados de CSS -translation_of: Web/CSS/CSS_Types ---- -
{{CssRef}}
- -

CSS - tipos de dados básicos define typical values (including keywords and units) accepted by CSS properties and functions. They are a special kind of component value type.

- -

In formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">".

- -

Referência

- -
- -
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Initial definition.
diff --git a/files/pt-pt/web/css/css_transforms/using_css_transforms/index.html b/files/pt-pt/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..62190c37dc --- /dev/null +++ b/files/pt-pt/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,34 @@ +--- +title: CSS/Usando_transformações_CSS +slug: Web/CSS/Usando_transformações_CSS +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +

{{ gecko_minversion_header("1.9.1") }}

+

Firefox 3.5 (Gecko 1.9.1) introduz suporte a transformações CSS; estas são implementadas utilizando um conjunto de propriedades CSS permitindo a você aplicar transformações lineares a elementos HTML. Essas transformações são baseadas sobre o design proposto pelo time WebKit e incluem rotar, inclinar, escalar e usar translação. Enquanto isso, é um W3C working draft.

+

Mozilla atualmente suporta as propriedades {{ Cssxref("-moz-transform") }} e {{ Cssxref("-moz-transform-origin") }}. Para detalhes sobre onde funções de transformação são suportadas, veja o artigo CSS transform functions (en).

+
+ Nota: Até o momento não há suporte ao eixo Z, portanto, perspectiva, rotação 3D, escala 3D, e transformações 3D não são suportadas.
+

Exemplo: Rotação

+

Este exemplo cria um iframe que lhe permite utilizar a página inicial do Google, girada 90 graus sobre seu canto inferior esquerdo.

+

Visualizar exemplo
+ Visualizar screenshot do exemplo

+
<div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;">
+  <iframe src="http://www.google.com/" width="500px" height="600px" />
+</div>
+
+

Exemplo: Inclinação e translação

+

Este exemplo cria um iframe que lhe permite utilizar a página inicial do Google, inclinada 10 graus no eicho X.

+

Visualizar exemplo
+ Visualizar screenshot do exemplo

+
<div style="-moz-transform: skewx(10deg) translatex(150px);
+            -moz-transform-origin: bottom left;">
+  <iframe src="http://www.google.com/" width="600px" height="500px" />
+</div>
+
+

Veja também

+ +

{{ languages( { "ja": "ja/CSS/Using_CSS_transforms" } ) }}

diff --git a/files/pt-pt/web/css/css_types/index.html b/files/pt-pt/web/css/css_types/index.html new file mode 100644 index 0000000000..ea7049f5a4 --- /dev/null +++ b/files/pt-pt/web/css/css_types/index.html @@ -0,0 +1,65 @@ +--- +title: CSS - Tipos de datos básicos +slug: Web/CSS/CSS_Tipos +tags: + - CSS + - Referencia + - Resumo + - Sinopse + - Tipos de Dados de CSS +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

CSS - tipos de dados básicos define typical values (including keywords and units) accepted by CSS properties and functions. They are a special kind of component value type.

+ +

In formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">".

+ +

Referência

+ +
+ +
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Initial definition.
diff --git a/files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html b/files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html deleted file mode 100644 index 250bb3eef9..0000000000 --- a/files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Folhas de estilo alternativas -slug: Web/CSS/Folhas_de_estilo_alternativas -translation_of: Web/CSS/Alternative_style_sheets ---- -

O Firefox oferece suporte a folhas de estilo alternativa. AS páginas que disponibilizam folhas de estilo alternativas permitem que o usuário selecione o estilo que a página será mostrada usando o submenu Exibir>Estilos da página. Fornecendo uma maneira de visualizar várias versões de uma mesma página, com base em suas necessidades e preferências.

-

Um site pode usar a tag link para adicionar as folhas de estilo alternativa.

-

Por exemplo:

-
<link href="padrao.css" rel="stylesheet" type="text/css" title="Estilo padrao">
-<link href="estilo1.css" rel="alternate stylesheet" type="text/css" title="Estilo 1">
-<link href="estilo2.css" rel="alternate stylesheet" type="text/css" title="Estilo 2">
-
-

Oferecendo essas três folhas de estilo, disponibilizaremos ao usuário as opções "Estilo Padrão", "Estilo 1" e "Estilo 2" no submenu. Quando o usuário selecionar um dos estilos, a página imediatamente será recarregada usando o estilo selecionado.

-

O valor do atributo title na tag link nomeia cada opção de estilo. Quando o valor deste atributo é repetido, entende-se como parte da mesma opção. Caso a tag link não possua o atributo title, a folha correspondente será sempre aplicada.

-

Use rel="stylesheet" para aplicar as folhas correspondente ao estilo padrão, e rel="alternate stylesheet" para aplicar as folhas correspondente aos estilos alternativos. Isso permite que o Firefox diferencie as folhas de estilo padrão das alternativas e permite que os navegadores que não suportam folhas de estilo alternativa apliquem somente as folhas do estilo padrão.

-

 

-

Exemplo

-

Clique aqui para ver um exemplo.

-

 

-

Especificação

- diff --git a/files/pt-pt/web/css/gap/index.html b/files/pt-pt/web/css/gap/index.html new file mode 100644 index 0000000000..06c9881278 --- /dev/null +++ b/files/pt-pt/web/css/gap/index.html @@ -0,0 +1,178 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +translation_of_original: Web/CSS/grid-gap +--- +

A propriedade CSS grid-gap é uma propriedade de taquigrafia para {{cssxref("grid-row-gap")}} e {{cssxref("grid-column-gap")}} especificando os canais entre as linhas de grelha e as colunas.

+ +
/* One <length> value */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* One <percentage> value */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Two <length> values */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* One or two <percentage> values */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Global values */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxe

+ +

This property is specified as a value for <'grid-row-gap'> followed optionally by a value for <'grid-column-gap'>. If <'grid-column-gap'> is omitted, it’s set to the same value as <'grid-row-gap'>.

+ +

<'grid-row-gap'> and <'grid-column-gap'> are each specified as a <length> or a <percentage>.

+ +

Valores

+ +
+
<length>
+
Is the width of the gutter separating the grid lines.
+
<percentage>
+
Is the width of the gutter separating the grid lines, relative to the dimension of the element.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplo

+ +

Conteúdeo de HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Conteúdo de CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "200px")}}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}Definição inicial
+ +

Compatibilidade de navegador

+ +

 

+ + + +

{{Compat("css.properties.grid-gap")}}

+ +

 

+ +

Consulte também

+ + + + diff --git a/files/pt-pt/web/css/grid-gap/index.html b/files/pt-pt/web/css/grid-gap/index.html deleted file mode 100644 index 06c9881278..0000000000 --- a/files/pt-pt/web/css/grid-gap/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: grid-gap -slug: Web/CSS/grid-gap -translation_of: Web/CSS/gap -translation_of_original: Web/CSS/grid-gap ---- -

A propriedade CSS grid-gap é uma propriedade de taquigrafia para {{cssxref("grid-row-gap")}} e {{cssxref("grid-column-gap")}} especificando os canais entre as linhas de grelha e as colunas.

- -
/* One <length> value */
-grid-gap: 20px;
-grid-gap: 1em;
-grid-gap: 3vmin;
-grid-gap: 0.5cm;
-
-/* One <percentage> value */
-grid-gap: 16%;
-grid-gap: 100%;
-
-/* Two <length> values */
-grid-gap: 20px 10px;
-grid-gap: 1em 0.5em;
-grid-gap: 3vmin 2vmax;
-grid-gap: 0.5cm 2mm;
-
-/* One or two <percentage> values */
-grid-gap: 16% 100%;
-grid-gap: 21px 82%;
-
-/* Global values */
-grid-gap: inherit;
-grid-gap: initial;
-grid-gap: unset;
-
- -

{{cssinfo}}

- -

Sintaxe

- -

This property is specified as a value for <'grid-row-gap'> followed optionally by a value for <'grid-column-gap'>. If <'grid-column-gap'> is omitted, it’s set to the same value as <'grid-row-gap'>.

- -

<'grid-row-gap'> and <'grid-column-gap'> are each specified as a <length> or a <percentage>.

- -

Valores

- -
-
<length>
-
Is the width of the gutter separating the grid lines.
-
<percentage>
-
Is the width of the gutter separating the grid lines, relative to the dimension of the element.
-
- -

Sintaxe formal

- -
{{csssyntax}}
- -

Exemplo

- -

Conteúdeo de HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

Conteúdo de CSS

- -
#grid {
-  display: grid;
-  height: 200px;
-  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
-  grid-gap: 20px 5px;
-}
-
-#grid > div {
-  background-color: lime;
-}
-
- -

{{EmbedLiveSample("Example", "100%", "200px")}}

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}Definição inicial
- -

Compatibilidade de navegador

- -

 

- - - -

{{Compat("css.properties.grid-gap")}}

- -

 

- -

Consulte também

- - - - diff --git a/files/pt-pt/web/css/layout_de_grelha_css/index.html b/files/pt-pt/web/css/layout_de_grelha_css/index.html deleted file mode 100644 index db142d2dde..0000000000 --- a/files/pt-pt/web/css/layout_de_grelha_css/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: CSS - Layout de Grade -slug: Web/CSS/layout_de_grelha_css -tags: - - CSS - - Grades - - Layout - - Layout de Grade - - Referencia - - Resumo -translation_of: Web/CSS/CSS_Grid_Layout ---- -

CSS - Layout de Grade destaca-se em dividir uma página em regiões principais, ou definir a relação em termos de tamanho, posição e camada, entre partes de um controle criado a partir de HTML primitivas. 
-  
- Tal como as tabelas, o layout de grelha permite que um autor alinhe os elementos em colunas e linhas. No entanto, são possíveis muitos mais layouts ou mais fáceis com a grelha de CSS do que eram com as tabelas. Por exemplo, os elementos filhos de um recipiente de grelha poderão posicionar-se a eles mesmos, e assim eles realmente se sobrepõem e a camada, similar aos elementos posicionados do CSSs..

- -

Exemplo básico

- -

O exemplo abaixo mostra uma grelha de faixa com três colunas, com novas linhas criadas com um mínimo de 100 píxeis e um máximo de auto. Os itens foram colocados na grelha utilizando o posicionamento baseado em linha .

- -
- - -

HTML

- -
<div class="wrapper">
-  <div class="one">One</div>
-  <div class="two">Two</div>
-  <div class="three">Three</div>
-  <div class="four">Four</div>
-  <div class="five">Five</div>
-  <div class="six">Six</div>
-</div>
- -

CSS

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-.one {
-  grid-column: 1 / 3;
-  grid-row: 1;
-}
-.two {
-  grid-column: 2 / 4;
-  grid-row: 1 / 3;
-}
-.three {
-  grid-column: 1;
-  grid-row: 2 / 5;
-}
-.four {
-  grid-column: 3;
-  grid-row: 3;
-}
-.five {
-  grid-column: 2;
-  grid-row: 4;
-}
-.six {
-  grid-column: 3;
-  grid-row: 4;
-}
-
- -

{{ EmbedLiveSample('example', '500', '440') }}

-
- -

Referência

- -

CSS - propriedades

- -
- -
- -

CSS - funções

- -
- -
- -

CSS - tipos de dados

- -
- -
- -

Glossário - entradas

- -
- -
- -

Guias

- -
- -
- -

Recursos externos

- - - -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
- - diff --git a/files/pt-pt/web/css/media_queries/index.html b/files/pt-pt/web/css/media_queries/index.html new file mode 100644 index 0000000000..f9bbd7b94e --- /dev/null +++ b/files/pt-pt/web/css/media_queries/index.html @@ -0,0 +1,110 @@ +--- +title: Consultas de média +slug: Web/CSS/Consultas_de_media +tags: + - CSS + - Consultas de Média + - Consultas de média CSS3 + - Desenho Adaptável + - Referencia + - Visão Geral +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

Consultas de média permitem adaptar o seu site ou aplicação de acordo com diferentes características ou parâmetros dos dispositivos utilizados.

+ +

São um elemento chave de desenho adaptável . Por exemplo, uma consulta de média pode reduzir o tamanho do texto em dispositivos pequenos, aumentar o espaço entre parágrafos quando a página é visualizada em modo de paisagem, ou ampliar os botões nos ecrãs táteis.

+ +

Em CSS, utiliza-se a regra "at" {{cssxref("@media")}} para aplicar, condicionalmente, parte de uma folha de estilos com base no resultado de uma consulta de média. E utiliza-se {{cssxref("@import")}} para aplicar, condicionalmente, uma folha de estilos inteira.

+ +

Consultas de média em HTML

+ +

Em HTML, as consultas de média podem-se aplicar a vários elementos:

+ + + +

Consultas de média em JavaScript

+ +

Em JavaScript, pode-se usar o método {{domxref("Window.matchMedia()")}} para verificar se a janela possui as características definidas na consulta de média. Também se pode utilizar {{domxref("MediaQueryList.addListener()")}} para gerar eventos sempre que houver mudanças no resultado da consulta de média. Com estas funcionalidades, o seu site ou aplicação pode responder a mudanças na configuração, orientação ou estado do dispositivo.

+ +

Pode aprender mais sobre utilização programática das consultas de média no artigo Testar consultas de média.

+ +

Referências

+ +

Regras "at"

+ +
+ +
+ +

Guias

+ +
+
Utilizar consultas de média
+
Introdução às consultas de média, a sua sintaxe, os operadores e funcionalidades utilizadas para construir as expressões das consultas de média.
+
Testar consultas de média programaticamente
+
Descrição de como utilizar consultas de média no código JavaScript code para determinar o estado do dispositivo, e como instalar listeners que notificam o código quando o resultado das consultas muda (por exemplo, quando o utilizador roda o ecrã ou redimensiona a janela do navegador).
+
Utilizar Consultas de média para Acessibilidade
+
Este artigo explica de que forma as consultas de média podem ajudar os utilizadores a compreender melhor o seu site.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Definição inicial
+ +

Compatibilidade com navegadores

+ +

@media rule

+ + + +

{{Compat("css.at-rules.media")}}

+ +

Ver também

+ + diff --git a/files/pt-pt/web/css/media_queries/using_media_queries/index.html b/files/pt-pt/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..2bf4f5470c --- /dev/null +++ b/files/pt-pt/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,436 @@ +--- +title: Utilizar consultas de média +slug: Web/CSS/Consulta_de_mídia +tags: + - Avançado + - CSS + - Desenho Adaptável + - Guía + - Media +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +

{{ gecko_minversion_header("1.9.1") }}

+ +

As consultas de média permitem modificar um site ou aplicação de acordo com o tipo de dispositivo (ecrã ou impressora, por exemplo) ou características e parâmetros específicos (como a resolução de ecrã ou largura do {{glossary("viewport")}} do navegador). Podem utilizar-se para:

+ + + +

Sintaxe

+ +

Consultas de média consistem num tipo de média e uma ou mais expressões envolvendo recursos de média. Note que estas consultas não são sensíveis a maiúsculas. Pode-se combinar várias consultas com operadores lógicos.

+ +

O resultado da consulta é verdadeiro se o tipo de média especificado na consulta de média encaixa com o tipo de dispositivo no qual o documento está a ser exibido e se todas as expressões na consulta de média forem verdadeiras.

+ +

Quando uma consulta de média é verdadeira, a folha de estilos correspondente é aplicada seguinto as regras normais de cascata.

+ +
+

Nota: Considere a etiqueta {{HTMLElement("link")}} com uma consulta de média. O ficheiro CSS que ela refere é descarregado mesmo que a consulta de média seja falsa; o conteúdo da folha não será aplicado até a consulta se tornar verdadeira.

+
+ +

Operadores lógicos

+ +

Você pode compor consultas de média complexas usando operadores lógicos, incluindo not, and, e only ; assim como combinar consultas de média numa lista separada por vírgulas, o que é equivalente a um operador "ou".

+ +

and

+ +

O operador and indica que a consulta é verdadeira se cada subconsulta que a compõe for verdadeira. Também pode juntar os tipos de média às funcionalidades de média. Tem maior precedência que a vírgula ("ou") e o not.

+ +

not

+ +

A palavra-chave not, nega o resultado de toda a consulta; por exemplo, "all and (not color)" é verdadeiro para dispositivos monocromáticos independentemente do tipo de média. É o operador com menor precedência depois da vírgula.

+ +

only

+ +

A palavra-chave only indica que só deve ser aplicado o estilo se a consulta inteira for verdadeira. Quando se utiliza este operador, é obrigatório especificar um tipo de média.

+ +

É útil para esconder folhas de estilo de navegadores antigos que não suportam consultas de média. Por exemplo, se não for utilizado only, navegadores antigos interpretam a consulta screen and (max-width: 500px) apenas como screen - ignoram o resto e aplicam o estilo em todos os ecrãs. 

+ +

Este operador não pode ser utilizado em conjunto com o not, e ambos têm a mesma precedência.

+ +

, (vírgula)

+ +

Cada subconsulta numa lista separada por vírgulas é avaliada isoladamente e e alguma  for verdadeira, a consulta composta é verdadeira. Por outras palavras, as vírgulas são equivalentes a um "ou-lógico".

+ +

Precedência dos operadores

+ + + +

Os parênteses não podem ser utilizados para mudar esta precedência.

+ +

 

+ +

Pseudo BNF (para aqueles que gostam desde tipo de coisa)

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Consultas de média não diferenciam maiúsculas de minúsculas. Consultas de média que envolvem tipos de média desconhecidos são sempre falsas.

+ +
Nota: Os parênteses são requisitados a volta de expressões; esquecer de usá-los é um erro.
+ +

Recursos de média

+ +

A maioria dos recursos de média pode ser prefixado com "min-" ou "max-" para expressar "maior ou igual a" ou "menor ou igual a". Isto evita usar os símbolos "<" e ">", que poderiam entrar em conflito com HTML e XML. Se você usar um recurso de média sem especificar um valor, a expressão é definida como verdadeira se o valor do recurso for diferente de zero.

+ +
Nota: Se um recurso de média não se aplica ao dispositivo no qual o navegador está sendo rodado, expressões envolvendo este recurso de média serão sempre falsas. Por exemplo, consultando a relação de aspecto de um dispositivo auditivo sempre resultará em falso.
+ +

color

+ +

Valor: {{cssxref("<color>")}}
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: sim

+ +

Indica o número de bits por componente de cor do dispositivo de saída. Se o dispositivo não é colorido, este valor é zero.

+ +
Nota: Se os componentes de cor tiverem diferentes de números de bits por componente de cor, o menor número é usado. Por exemplo, se uma tela usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo é considerado para usar 5 bits por componente de cor. Se o dispositivo usa cores indexadas, o número mínimo de bits por componente de cor na tabela de cores é usado.
+ +

Exemplos

+ +

Para aplicar uma folha de estilos a todos os dispositivos coloridos:

+ +
@media all and (color) { ... }
+
+ +

Para aplicar uma folha de estilos a dispositivos com no mínimo 4 bits por componente de cor:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Valor: integer
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: sim

+ +

Indica o número de entradas na tabela de cor para o dispositivo de saída.

+ +

Exemplos

+ +

Para indicar que uma folha de estilos deve ser aplicada a todos os dispositivos usando cores indexadas, você pode fazer:

+ +
@media all and (color-index) { ... }
+
+ +

Para aplicar uma folha de estilos a dispositivos de cores indexadas com no mínimo 256 cores:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

device-aspect-ratio

+ +

Valor: integer / integer
+ média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ Aceita os prefixos min/max: sim

+ +

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste em dois positivos inteiros (integer) separados por um caractére barra ("/"). Isto representa o número de pixels horizontais sobre o número de pixels verticais.

+ +

Exemplo

+ +

O que vem a seguir selecionar uma folha de estilos especial para uso em dispositivos de tela comprida (widescreen):

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Isto seleciona o estilo quando a relação de aspecto for 16:9 ou 16:10.

+ +

device-height

+ +

Valor: {{cssxref("<length>")}}
+ média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ Aceita os prefixos min/max: sim

+ +

Descreve a altura do dispositivo de saída (sendo a tela ou página inteira, ao invés de somente a área de renderização, como a janela do documento).

+ +

Exemplo

+ +

Para aplicar uma folha de estilos a um documento quando exibido em uma tela que for mais fina do que 800 pixels, você pode usar isto:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+
+ +

device-width

+ +

Valor: {{cssxref("<length>")}}
+ média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ Aceita os prefixos min/max: sim

+ +

Descreve a largura do dispositivo de saída (sendo a tela ou a página inteira, ao invés de somente a área de renderização, como a janela do documento).

+ +

grid

+ +

Valor: integer
+ média: all
+ Aceita os prefixos min/max: não

+ +

Determina Determines se o dispositivo de saída é um dispositivo grid ou um dispositivo bitmap. Se o dispositivo for baseado em grid (tal como um terminal tty ou uma tela de celular com somente uma fonte), o valor é 1. Caso contrário é zero.

+ +
Nota: Gecko (e consequentemente o Firefox) não suporta dispositivos grid atualmente, então este recurso de média não é suportado.
+ +

Exemplo

+ +

Para aplicar um estilo a dispositivos de mão com uma tela de 15 caracteres ou mais estreito:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Nota: A unidade "em" tem um uso especial em dispositivos grid; desde que a largura exata de um "em" não pôde ser determinada, 1em é assumido como a largura de uma célula grid horizontal, e a altura de uma célula vertical.
+ +

height

+ +

Valor: {{cssxref("<length>")}}
+ média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ Aceita os prefixos min/max: sim

+ +

O recurso de média height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura da viewport ou da caixa de páginas em uma impressora).

+ +
Nota: Quando o usuário redimenciona a janela, o Firefox substituirá as folhas de estilos como for apropriado, baseado em consultas de média usando os recursos de média width e height.
+ +

monochrome

+ +

Valor: integer
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: sim

+ +

Indica o número de bits por pixel em um dispositivo monocromático (escala de cinza). Se o dispositivo não for monocromático, o valor do dispositivo é 0.

+ +

Exemplos

+ +

Para aplicar uma folha de estilos para todos os dispositivos monocromáticos:

+ +
@media all and (monochrome) { ... }
+
+ +

Para aplicar uma folha de estilos para dispositivos monocromáticos com no mínimo 8 bits por pixel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Valor: landscape | portrait
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Indica se o dispositivo está em modo paisagem (a exibição é mais larga do que alta) ou retrato (a exibição é mais alta do que larga).

+ +

Exemplo

+ +

Para aplicar uma folha de estilos somente na orientação retrato:

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

Valor: {{cssxref("<resolution>")}}
+ média: {{cssxref("Media/Bitmap", "bitmap")}}
+ Aceita os prefixos min/max: sim

+ +

Indica a resolução (densidade de pixels) do dispositivo de saída. A resolução pode ser especificada tanto em pontos por polegada (dpi) quanto pontos por centímetro (dpcm).

+ +

Exemplo

+ +

Para aplicar uma folha de estilos a dispositivos com no mínimo 300 pontos por polegada de resolução:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

scan

+ +

Valor: progressive | interlace
+ média: {{cssxref("Media/TV", "tv")}}
+ Aceita os prefixos min/max: não

+ +

Descreve o processo de escaneamento de dispositivos de saída de televisão.

+ +
Nota: Gecko (e consequentemente o Firefox) não suportam o tipo de média tv atualmente, então este recurso de média não é suportado.
+ +

Exemplo

+ +

Para aplicar uma folha de estilos somente para televisões com escaneamento progressivo:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Valor: {{cssxref("<length>")}}
+ média: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ Aceita os prefixos min/max: sim

+ +

O recurso de média width descreve a largura da superfície de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de páginas em uma impressora).

+ +
Nota: Quando o usuário redimensiona a janela, o Firefox substituirá a folha de estilo como apropriado, baseado nas consultas de média usando os recursos de média width e height.
+ +

Exemplos

+ +

Se você desejar espeficar uma folha de estilos para dispositivos de mão, ou dispositivos de tela com uma largura maior do que 20em, você pode usar esta folha de estilos:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Este recurso de média especifica uma folha de estilos que deve ser aplicada a médias impressas mais largas do que 8.5 polegadas:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Este recurso especifica uma folha de estilos que é usável quando a viewport estiver entre 500 e 800 pixels de largura:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Características de média específicas da Mozilla

+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

A Mozilla oferece várias características de média específicas para o Gecko. Algumas delas podem ser propostas como características oficiais de média.

+ +

-moz-images-in-menus

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se o dispositivo permitir às imagens, aparecer nos menus, recebe 1; caso contrário, o valor é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(images-in-menus)") }} do CSS.

+ +

-moz-mac-graphite-theme

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se o usuário configurou o dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência azul padrão, ou não for no Mac OS X, o valor é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} do CSS.

+ +

-moz-maemo-classic

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se o usuário está usando o Maemo com o tema original, o valor é 1; se estiver usando o novo tema "Fremantle", o valor é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(maemo-classic)") }} do CSS.

+ +

-moz-scrollbar-end-backward

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se a interface do dispositivo do usuário exibe um botão de seta para trás ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} do CSS.

+ +

-moz-scrollbar-end-forward

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se a interface do dispositivo do usuário exibe um botão de seta para frente ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} do CSS.

+ +

-moz-scrollbar-start-backward

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se a interface do dispositivo do usuário exibe uma seta para trás no início da barra de rolagem, o valor é 1. Caso contrário é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} do CSS.

+ +

-moz-scrollbar-start-forward

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se a interface do dispositivo do usuário exibe uma seta para frente no início da barra de rolagem, o valor é 1. Caso contrário é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} do CSS.

+ +

-moz-scrollbar-thumb-proportional

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se a interface do dispositivo do usuário exibe a barra de rolagem proporcionalmente (isto é, tamanho baseado na porcentagem do documento que está visível), o valor é 1. Caso contrário é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} do CSS.

+ +

-moz-touch-enabled

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se o dispositivo suporta eventos de toque (para um tela sensível ao toque), o valor é 1. Caso contrário é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(touch-enabled)") }} do CSS.

+ +

Exemplo

+ +

Você pode usar isso para renderizar seus botões ligeiramente maiores, por exemplo, se o usuário estiver em um dispositivo com tela sensível ao toque, para torná-lo mais amigável aos dedos.

+ +

-moz-windows-classic

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se o usuário estiver usando o Windows, sem tema (no modo clássico ao invés de usar "uxtheme"), o valor é 1; caso contrário é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(windows-classic)") }} do CSS.

+ +

-moz-windows-compositor

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se o usuário estiver usando o Windows com o compositor DWM, o valor é 1; caso contrário é 0.

+ +

Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(windows-compositor)") }} do CSS.

+ +

-moz-windows-default-theme

+ +

Valor: inteiro
+ média: {{cssxref("Media/Visual", "visual")}}
+ Aceita os prefixos min/max: não

+ +

Se o usuário está correntemente usando um dos temas do Windows (Luna, Royale, Zune ou Aero (incluindo o Vista Basic, Vista Advanced e o Aero Glass), o valor 1. Caso contrário é 0.

+ +

Veja também

+ + diff --git "a/files/pt-pt/web/css/m\303\251dia_paginada/index.html" "b/files/pt-pt/web/css/m\303\251dia_paginada/index.html" deleted file mode 100644 index 49df122031..0000000000 --- "a/files/pt-pt/web/css/m\303\251dia_paginada/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Média paginada -slug: Web/CSS/Média_paginada -tags: - - CSS - - CSS3 - - Quebras de Página -translation_of: Web/CSS/Paged_Media ---- -

Paged media properties control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements. Popularly supported properties include

- - diff --git a/files/pt-pt/web/css/paged_media/index.html b/files/pt-pt/web/css/paged_media/index.html new file mode 100644 index 0000000000..49df122031 --- /dev/null +++ b/files/pt-pt/web/css/paged_media/index.html @@ -0,0 +1,19 @@ +--- +title: Média paginada +slug: Web/CSS/Média_paginada +tags: + - CSS + - CSS3 + - Quebras de Página +translation_of: Web/CSS/Paged_Media +--- +

Paged media properties control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements. Popularly supported properties include

+ + diff --git a/files/pt-pt/web/css/pseudo-classes/index.html b/files/pt-pt/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..d65bef9e51 --- /dev/null +++ b/files/pt-pt/web/css/pseudo-classes/index.html @@ -0,0 +1,165 @@ +--- +title: Pseudoclasses +slug: Web/CSS/Pseudoclasses +tags: + - CSS + - Pseudoclasse + - Referencia + - Resumo + - Seletores + - Sinopse +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, {{CSSxRef(":hover")}} can be used to change a button's color when the user's pointer hovers over it.

+ +
/* Any button over which the user's pointer is hovering */
+button:hover {
+  color: blue;
+}
+ +

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ({{CSSxRef(":visited")}}, for example), the status of its content (like {{CSSxRef(":checked")}} on certain form elements), or the position of the mouse (like {{CSSxRef(":hover")}}, which lets you know if the mouse is over an element or not).

+ +
+

Nota: In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.

+
+ +

Sintaxe

+ +
selector:pseudo-class {
+  property: value;
+}
+
+ +

Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

+ +

Índice de pseudoclasses padrões

+ +
+ +
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Defined :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Defines when particular selectors match HTML elements.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col() and :matches().
+ No significant change for pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copies the relevant section from the canonical (WHATWG) HTML spec.
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().
+ Defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning.
+ No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Defined :lang(), :first-child, :hover, and :focus.
+ No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Defined :link, :visited and :active, but without the associated semantic meaning.
+ +

Consultar também:

+ + diff --git a/files/pt-pt/web/css/pseudo-elements/index.html b/files/pt-pt/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..780d17c378 --- /dev/null +++ b/files/pt-pt/web/css/pseudo-elements/index.html @@ -0,0 +1,104 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudoelementos +tags: + - CSS + - Pseudoelemento + - Referencia + - Resumo + - Seletores + - Sinopse +translation_of: Web/CSS/Pseudo-elements +--- +
{{CSSRef}}
+ +

Um pseudoelemento de CSS é uma palavra-chave adicionada ao seletor que lhe permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Por exemplo, {{CSSxRef("::first-line")}} pode ser utilizado para alterar o tipo de letra da primeira linha de um parágrafo.

+ +
/* The first line of every <p> element. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

Nota: In contrast to pseudo-elements, {{CSSxRef("pseudo-classes")}} can be used to style an element based on its state.

+
+ +

Sintaxe

+ +
selector::pseudo-element {
+  property: value;
+}
+ +

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

+ +
+

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

+
+ +

Índice de pseudoelementos padrões

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersão Mais BaixaSuporta
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

Consultar também:

+ + diff --git a/files/pt-pt/web/css/pseudoclasses/index.html b/files/pt-pt/web/css/pseudoclasses/index.html deleted file mode 100644 index d65bef9e51..0000000000 --- a/files/pt-pt/web/css/pseudoclasses/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Pseudoclasses -slug: Web/CSS/Pseudoclasses -tags: - - CSS - - Pseudoclasse - - Referencia - - Resumo - - Seletores - - Sinopse -translation_of: Web/CSS/Pseudo-classes ---- -
{{CSSRef}}
- -

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, {{CSSxRef(":hover")}} can be used to change a button's color when the user's pointer hovers over it.

- -
/* Any button over which the user's pointer is hovering */
-button:hover {
-  color: blue;
-}
- -

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ({{CSSxRef(":visited")}}, for example), the status of its content (like {{CSSxRef(":checked")}} on certain form elements), or the position of the mouse (like {{CSSxRef(":hover")}}, which lets you know if the mouse is over an element or not).

- -
-

Nota: In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.

-
- -

Sintaxe

- -
selector:pseudo-class {
-  property: value;
-}
-
- -

Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

- -

Índice de pseudoclasses padrões

- -
- -
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Defined :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Defines when particular selectors match HTML elements.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col() and :matches().
- No significant change for pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copies the relevant section from the canonical (WHATWG) HTML spec.
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().
- Defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning.
- No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Defined :lang(), :first-child, :hover, and :focus.
- No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Defined :link, :visited and :active, but without the associated semantic meaning.
- -

Consultar também:

- - diff --git a/files/pt-pt/web/css/pseudoelementos/index.html b/files/pt-pt/web/css/pseudoelementos/index.html deleted file mode 100644 index 780d17c378..0000000000 --- a/files/pt-pt/web/css/pseudoelementos/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Pseudoelementos -slug: Web/CSS/Pseudoelementos -tags: - - CSS - - Pseudoelemento - - Referencia - - Resumo - - Seletores - - Sinopse -translation_of: Web/CSS/Pseudo-elements ---- -
{{CSSRef}}
- -

Um pseudoelemento de CSS é uma palavra-chave adicionada ao seletor que lhe permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Por exemplo, {{CSSxRef("::first-line")}} pode ser utilizado para alterar o tipo de letra da primeira linha de um parágrafo.

- -
/* The first line of every <p> element. */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
- -
-

Nota: In contrast to pseudo-elements, {{CSSxRef("pseudo-classes")}} can be used to style an element based on its state.

-
- -

Sintaxe

- -
selector::pseudo-element {
-  property: value;
-}
- -

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

- -
-

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

-
- -

Índice de pseudoelementos padrões

- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersão Mais BaixaSuporta
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

Consultar também:

- - diff --git a/files/pt-pt/web/css/reference/index.html b/files/pt-pt/web/css/reference/index.html new file mode 100644 index 0000000000..1be349b1c9 --- /dev/null +++ b/files/pt-pt/web/css/reference/index.html @@ -0,0 +1,171 @@ +--- +title: CSS - Referência +slug: Web/CSS/Referência_CSS +tags: + - CSS + - Referencia + - Resumo + - Sinopse + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Utilize esta referência de CSS para explorar um índex alfabético de todas as propriedades de CSS padrão, pseudoclasses, pseudoelementos, tipos de dados, e regras "at". Também pode explorar uma lista de todos os seletores de CSS organizados pelo tipo e uma lista de conceitos de CSS chave. Também incluido nesta breve referência de DOM-CSS / CSSOM.

+ +

Sintaxe Básica

+ +

Estilo padrão de sintaxe

+ +
selectorlist {
+  property: value;
+  [more property:value; pairs]
+}
+
+... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+See selector, pseudo-class, pseudo-element lists below.
+
+ +

Exemplos de regra de estilo

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

For a beginner-level introduction to the syntax of CSS selectors, please see this tutorial. Be aware that any CSS syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

+ +

Sintaxe de regra "At"

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Índex de palavra-chave

+ +
+

Nota: Os nomes das propriadades neste índex não incluem os nomes de JavaScript onde eles diferem com nomes padrão de CSS.

+
+ +
{{CSS_Ref}}
+ +

Seletors

+ + + +

Seletores básicos

+ + + +

Combinadores

+ + + +

Pseudoclasses

+ +
+ +
+ +

Pseudoelementos

+ +
+ +
+ +
+

Consulte também: uma lista de seletores completa na especificação de Seletores Nível 3.

+
+ +

Conceitos

+ +

Sintaxe e semântica

+ + + +

Valores

+ + + +

Layout

+ + + +

DOM-CSS / CSSOM

+ +

Major object types

+ + + +

Métodos importantes

+ + + +

Consultar também:

+ + diff --git "a/files/pt-pt/web/css/refer\303\252ncia_css/index.html" "b/files/pt-pt/web/css/refer\303\252ncia_css/index.html" deleted file mode 100644 index 1be349b1c9..0000000000 --- "a/files/pt-pt/web/css/refer\303\252ncia_css/index.html" +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: CSS - Referência -slug: Web/CSS/Referência_CSS -tags: - - CSS - - Referencia - - Resumo - - Sinopse - - 'l10n:priority' -translation_of: Web/CSS/Reference ---- -
{{CSSRef}}
- -

Utilize esta referência de CSS para explorar um índex alfabético de todas as propriedades de CSS padrão, pseudoclasses, pseudoelementos, tipos de dados, e regras "at". Também pode explorar uma lista de todos os seletores de CSS organizados pelo tipo e uma lista de conceitos de CSS chave. Também incluido nesta breve referência de DOM-CSS / CSSOM.

- -

Sintaxe Básica

- -

Estilo padrão de sintaxe

- -
selectorlist {
-  property: value;
-  [more property:value; pairs]
-}
-
-... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
-
-See selector, pseudo-class, pseudo-element lists below.
-
- -

Exemplos de regra de estilo

- -
strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

For a beginner-level introduction to the syntax of CSS selectors, please see this tutorial. Be aware that any CSS syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

- -

Sintaxe de regra "At"

- -

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

- -

Índex de palavra-chave

- -
-

Nota: Os nomes das propriadades neste índex não incluem os nomes de JavaScript onde eles diferem com nomes padrão de CSS.

-
- -
{{CSS_Ref}}
- -

Seletors

- - - -

Seletores básicos

- - - -

Combinadores

- - - -

Pseudoclasses

- -
- -
- -

Pseudoelementos

- -
- -
- -
-

Consulte também: uma lista de seletores completa na especificação de Seletores Nível 3.

-
- -

Conceitos

- -

Sintaxe e semântica

- - - -

Valores

- - - -

Layout

- - - -

DOM-CSS / CSSOM

- -

Major object types

- - - -

Métodos importantes

- - - -

Consultar também:

- - diff --git "a/files/pt-pt/web/css/usando_transforma\303\247\303\265es_css/index.html" "b/files/pt-pt/web/css/usando_transforma\303\247\303\265es_css/index.html" deleted file mode 100644 index 62190c37dc..0000000000 --- "a/files/pt-pt/web/css/usando_transforma\303\247\303\265es_css/index.html" +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: CSS/Usando_transformações_CSS -slug: Web/CSS/Usando_transformações_CSS -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms ---- -

{{ gecko_minversion_header("1.9.1") }}

-

Firefox 3.5 (Gecko 1.9.1) introduz suporte a transformações CSS; estas são implementadas utilizando um conjunto de propriedades CSS permitindo a você aplicar transformações lineares a elementos HTML. Essas transformações são baseadas sobre o design proposto pelo time WebKit e incluem rotar, inclinar, escalar e usar translação. Enquanto isso, é um W3C working draft.

-

Mozilla atualmente suporta as propriedades {{ Cssxref("-moz-transform") }} e {{ Cssxref("-moz-transform-origin") }}. Para detalhes sobre onde funções de transformação são suportadas, veja o artigo CSS transform functions (en).

-
- Nota: Até o momento não há suporte ao eixo Z, portanto, perspectiva, rotação 3D, escala 3D, e transformações 3D não são suportadas.
-

Exemplo: Rotação

-

Este exemplo cria um iframe que lhe permite utilizar a página inicial do Google, girada 90 graus sobre seu canto inferior esquerdo.

-

Visualizar exemplo
- Visualizar screenshot do exemplo

-
<div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;">
-  <iframe src="http://www.google.com/" width="500px" height="600px" />
-</div>
-
-

Exemplo: Inclinação e translação

-

Este exemplo cria um iframe que lhe permite utilizar a página inicial do Google, inclinada 10 graus no eicho X.

-

Visualizar exemplo
- Visualizar screenshot do exemplo

-
<div style="-moz-transform: skewx(10deg) translatex(150px);
-            -moz-transform-origin: bottom left;">
-  <iframe src="http://www.google.com/" width="600px" height="500px" />
-</div>
-
-

Veja também

- -

{{ languages( { "ja": "ja/CSS/Using_CSS_transforms" } ) }}

-- cgit v1.2.3-54-g00ecf From 8519a85da1acd5b7863268b6cf6f9e4fd14bcf31 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:50:25 +0100 Subject: unslug pt-pt: modify --- files/pt-pt/_redirects.txt | 727 ++- files/pt-pt/_wikihistory.json | 5694 ++++++++++---------- files/pt-pt/conflicting/glossary/api/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 5 +- .../index.html | 6 +- files/pt-pt/conflicting/mdn/contribute/index.html | 3 +- files/pt-pt/conflicting/web/api/index.html | 3 +- .../conflicting/web/api/web_storage_api/index.html | 3 +- .../conflicting/web/api/xmlhttprequest/index.html | 5 +- .../reference/global_objects/number/index.html | 3 +- .../reference/global_objects/object/index.html | 3 +- .../web/progressive_web_apps/index.html | 3 +- .../responsive_design_building_blocks/index.html | 4 +- .../index.html | 3 +- files/pt-pt/games/index.html | 3 +- files/pt-pt/games/tutorials/index.html | 3 +- files/pt-pt/glossary/404/index.html | 3 +- files/pt-pt/glossary/502/index.html | 3 +- files/pt-pt/glossary/accessibility/index.html | 3 +- files/pt-pt/glossary/ajax/index.html | 5 +- files/pt-pt/glossary/argument/index.html | 3 +- files/pt-pt/glossary/aria/index.html | 3 +- files/pt-pt/glossary/bigint/index.html | 3 +- .../block_cipher_mode_of_operation/index.html | 3 +- files/pt-pt/glossary/boolean/index.html | 3 +- files/pt-pt/glossary/browser/index.html | 3 +- files/pt-pt/glossary/cache/index.html | 3 +- files/pt-pt/glossary/cia/index.html | 3 +- files/pt-pt/glossary/compile/index.html | 3 +- files/pt-pt/glossary/crlf/index.html | 3 +- files/pt-pt/glossary/cross_axis/index.html | 3 +- files/pt-pt/glossary/crud/index.html | 3 +- files/pt-pt/glossary/dhtml/index.html | 3 +- files/pt-pt/glossary/dom/index.html | 3 +- files/pt-pt/glossary/ecma/index.html | 3 +- files/pt-pt/glossary/element/index.html | 3 +- files/pt-pt/glossary/engine/index.html | 3 +- files/pt-pt/glossary/entity_header/index.html | 3 +- files/pt-pt/glossary/favicon/index.html | 3 +- files/pt-pt/glossary/flexbox/index.html | 3 +- files/pt-pt/glossary/git/index.html | 3 +- files/pt-pt/glossary/gzip_compression/index.html | 3 +- files/pt-pt/glossary/html/index.html | 5 +- files/pt-pt/glossary/hypertext/index.html | 3 +- files/pt-pt/glossary/iana/index.html | 3 +- files/pt-pt/glossary/idempotent/index.html | 3 +- files/pt-pt/glossary/index.html | 3 +- files/pt-pt/glossary/indexeddb/index.html | 3 +- files/pt-pt/glossary/isp/index.html | 3 +- files/pt-pt/glossary/lazy_load/index.html | 3 +- files/pt-pt/glossary/localization/index.html | 3 +- files/pt-pt/glossary/main_axis/index.html | 3 +- files/pt-pt/glossary/metadata/index.html | 3 +- files/pt-pt/glossary/mitm/index.html | 3 +- files/pt-pt/glossary/node.js/index.html | 3 +- files/pt-pt/glossary/object/index.html | 3 +- files/pt-pt/glossary/object_reference/index.html | 3 +- files/pt-pt/glossary/oop/index.html | 3 +- files/pt-pt/glossary/ota/index.html | 3 +- files/pt-pt/glossary/polyfill/index.html | 3 +- .../prototype-based_programming/index.html | 3 +- files/pt-pt/glossary/scm/index.html | 3 +- files/pt-pt/glossary/server/index.html | 3 +- files/pt-pt/glossary/signature/index.html | 3 +- files/pt-pt/glossary/tag/index.html | 3 +- files/pt-pt/glossary/utf-8/index.html | 3 +- files/pt-pt/glossary/value/index.html | 3 +- files/pt-pt/glossary/viewport/index.html | 3 +- files/pt-pt/glossary/visual_viewport/index.html | 3 +- files/pt-pt/glossary/webextensions/index.html | 3 +- files/pt-pt/glossary/webrtc/index.html | 3 +- files/pt-pt/glossary/webvtt/index.html | 3 +- files/pt-pt/glossary/whatwg/index.html | 3 +- files/pt-pt/glossary/world_wide_web/index.html | 3 +- files/pt-pt/glossary/wrapper/index.html | 3 +- files/pt-pt/glossary/xhtml/index.html | 3 +- files/pt-pt/glossary/xml/index.html | 5 +- files/pt-pt/learn/accessibility/index.html | 3 +- .../how_does_the_internet_work/index.html | 3 +- files/pt-pt/learn/common_questions/index.html | 3 +- .../index.html | 5 +- .../set_up_a_local_testing_server/index.html | 3 +- .../what_is_a_domain_name/index.html | 3 +- .../common_questions/what_is_a_url/index.html | 3 +- .../what_is_a_web_server/index.html | 3 +- .../cascade_and_inheritance/index.html | 5 +- files/pt-pt/learn/css/building_blocks/index.html | 5 +- .../learn/css/building_blocks/selectors/index.html | 5 +- .../css/building_blocks/styling_tables/index.html | 5 +- .../building_blocks/values_and_units/index.html | 5 +- files/pt-pt/learn/css/css_layout/index.html | 5 +- .../first_steps/how_css_is_structured/index.html | 5 +- .../learn/css/first_steps/how_css_works/index.html | 5 +- files/pt-pt/learn/css/first_steps/index.html | 5 +- files/pt-pt/learn/css/howto/css_faq/index.html | 3 +- .../learn/css/howto/generated_content/index.html | 5 +- .../learn/css/styling_text/fundamentals/index.html | 5 +- files/pt-pt/learn/css/styling_text/index.html | 3 +- .../css/styling_text/styling_lists/index.html | 5 +- .../css_basics/index.html | 5 +- .../dealing_with_files/index.html | 5 +- .../how_the_web_works/index.html | 5 +- .../html_basics/index.html | 5 +- .../learn/getting_started_with_the_web/index.html | 5 +- .../installing_basic_software/index.html | 5 +- .../javascript_basics/index.html | 5 +- .../publishing_your_website/index.html | 3 +- .../the_web_and_web_standards/index.html | 3 +- .../what_will_your_website_look_like/index.html | 5 +- .../add_a_hit_map_on_top_of_an_image/index.html | 3 +- files/pt-pt/learn/html/howto/index.html | 3 +- .../advanced_text_formatting/index.html | 3 +- .../creating_hyperlinks/index.html | 3 +- .../introduction_to_html/debugging_html/index.html | 3 +- .../document_and_website_structure/index.html | 3 +- .../getting_started/index.html | 3 +- .../learn/html/introduction_to_html/index.html | 3 +- .../marking_up_a_letter/index.html | 3 +- .../structuring_a_page_of_content/index.html | 3 +- .../the_head_metadata_in_html/index.html | 3 +- .../learn/html/multimedia_and_embedding/index.html | 3 +- .../mozilla_splash_page/index.html | 3 +- .../video_and_audio_content/index.html | 3 +- files/pt-pt/learn/html/tables/advanced/index.html | 3 +- files/pt-pt/learn/html/tables/basics/index.html | 3 +- .../html/tables/structuring_planet_data/index.html | 3 +- .../manipulating_documents/index.html | 5 +- .../pt-pt/learn/javascript/first_steps/index.html | 5 +- files/pt-pt/learn/server-side/django/index.html | 3 +- .../development_environment/index.html | 3 +- .../learn/server-side/express_nodejs/index.html | 3 +- .../express_nodejs/introduction/index.html | 3 +- files/pt-pt/learn/server-side/index.html | 3 +- .../node_server_without_framework/index.html | 3 +- .../cross_browser_testing/accessibility/index.html | 3 +- .../cross_browser_testing/index.html | 3 +- files/pt-pt/mdn/about/index.html | 3 +- files/pt-pt/mdn/at_ten/history_of_mdn/index.html | 3 +- files/pt-pt/mdn/at_ten/index.html | 3 +- .../convert_code_samples_to_be_live/index.html | 3 +- .../howto/create_and_edit_pages/index.html | 3 +- .../contribute/howto/report_a_problem/index.html | 3 +- files/pt-pt/mdn/contribute/howto/tag/index.html | 3 +- .../write_a_new_entry_in_the_glossary/index.html | 3 +- .../write_an_api_reference/sidebars/index.html | 3 +- .../guidelines/conventions_definitions/index.html | 3 +- .../guidelines/does_this_belong_on_mdn/index.html | 3 +- .../mdn/guidelines/writing_style_guide/index.html | 3 +- files/pt-pt/mdn/structures/live_samples/index.html | 3 +- files/pt-pt/mdn/yari/index.html | 3 +- .../anatomy_of_a_webextension/index.html | 3 +- .../webextensions/api/devtools/panels/index.html | 3 +- .../add-ons/webextensions/api/storage/index.html | 3 +- .../browser_support_for_javascript_apis/index.html | 3 +- .../webextensions/content_scripts/index.html | 3 +- .../add-ons/webextensions/examples/index.html | 3 +- .../extending_the_developer_tools/index.html | 3 +- .../intercept_http_requests/index.html | 3 +- .../webextensions/manifest.json/icons/index.html | 3 +- .../webextensions/match_patterns/index.html | 3 +- .../user_interface/browser_action/index.html | 3 +- .../user_interface/browser_styles/index.html | 3 +- .../user_interface/context_menu_items/index.html | 5 +- .../user_interface/devtools_panels/index.html | 3 +- .../user_interface/extension_pages/index.html | 3 +- .../webextensions/user_interface/index.html | 3 +- .../user_interface/notifications/index.html | 3 +- .../user_interface/omnibox/index.html | 3 +- .../user_interface/options_pages/index.html | 3 +- .../user_interface/page_actions/index.html | 3 +- .../webextensions/user_interface/popups/index.html | 3 +- .../user_interface/sidebars/index.html | 3 +- .../what_are_webextensions/index.html | 3 +- .../add-ons/webextensions/what_next_/index.html | 3 +- .../your_first_webextension/index.html | 3 +- .../your_second_webextension/index.html | 3 +- files/pt-pt/mozilla/developer_guide/index.html | 3 +- .../pt-pt/mozilla/firefox/releases/1.5/index.html | 3 +- files/pt-pt/mozilla/firefox/releases/2/index.html | 3 +- .../pt-pt/mozilla/firefox/releases/3.5/index.html | 3 +- .../releases/3.5/updating_extensions/index.html | 3 +- .../pt-pt/mozilla/firefox/releases/3.6/index.html | 3 +- .../releases/3/site_compatibility/index.html | 3 +- .../releases/3/updating_extensions/index.html | 3 +- files/pt-pt/mozilla/firefox/releases/4/index.html | 3 +- files/pt-pt/mozilla/firefox/releases/5/index.html | 3 +- files/pt-pt/mozilla/firefox/releases/6/index.html | 3 +- .../index.html" | 5 +- files/pt-pt/orphaned/componentes/index.html | 3 +- .../index.html" | 3 +- .../construir_uma_extens\303\243o/index.html" | 3 +- files/pt-pt/orphaned/controles_xul/index.html | 3 +- .../criando_um_visual_para_o_firefox/index.html | 3 +- .../criar_uma_pele_para_o_firefox/index.html | 3 +- .../desenhando_texto_usando_canvas/index.html | 5 +- .../orphaned/faq_extens\303\265es/index.html" | 3 +- .../firefox_3_para_desenvolvedores/index.html | 3 +- .../index.html" | 3 +- .../javascript_orientado_a_objetos/index.html | 3 +- .../learn/html/forms/html5_updates/index.html | 3 +- .../index.html" | 3 +- .../manipuladores_de_protocolo_web/index.html | 3 +- .../mdn/community/conversations/index.html | 3 +- .../orphaned/mdn/community/doc_sprints/index.html | 3 +- files/pt-pt/orphaned/mdn/community/index.html | 3 +- .../mdn/community/whats_happening/index.html | 3 +- .../mdn/community/working_in_community/index.html | 3 +- .../contribute/howto/be_a_beta_tester/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../howto/do_a_technical_review/index.html | 3 +- .../howto/do_an_editorial_review/index.html | 3 +- .../howto/set_the_summary_for_a_page/index.html | 3 +- .../howto/tag_javascript_pages/index.html | 3 +- .../index.html | 5 +- files/pt-pt/orphaned/mdn/editor/basics/index.html | 3 +- files/pt-pt/orphaned/mdn/editor/index.html | 3 +- .../mdn/structures/api_references/index.html | 3 +- .../what_does_an_api_reference_need/index.html | 3 +- .../orphaned/mdn/tools/page_watching/index.html | 3 +- .../orphaned/mdn/tools/template_editing/index.html | 3 +- .../pt-pt/orphaned/mdn/troubleshooting/index.html | 3 +- .../index.html | 3 +- .../getting_started_with_web-ext/index.html | 3 +- .../package_your_extension_/index.html | 3 +- .../porting_a_google_chrome_extension/index.html | 3 +- .../porting_a_legacy_firefox_add-on/index.html | 3 +- .../temporary_installation_in_firefox/index.html | 3 +- .../user_experience_best_practices/index.html | 5 +- .../webextensions_and_the_add-on_id/index.html | 3 +- .../pt-pt/orphaned/o_dom_e_o_javascript/index.html | 3 +- .../index.html | 5 +- .../pref\303\241cio/index.html" | 3 +- .../refer\303\252ncia_jsdbgapi/index.html" | 3 +- .../sobre_o_document_object_model/index.html | 3 +- files/pt-pt/orphaned/tinderbox/index.html | 5 +- files/pt-pt/orphaned/toolkit_api/index.html | 3 +- .../tools/add-ons/dom_inspector/index.html | 13 +- .../introduction_to_dom_inspector/index.html | 3 +- files/pt-pt/orphaned/tools/add-ons/index.html | 3 +- .../orphaned/transformar_xml_com_xslt/index.html | 3 +- .../para_leitura_adicional/index.html | 3 +- .../formas_de_desenho/index.html | 3 +- files/pt-pt/orphaned/tutorial_do_canvas/index.html | 5 +- .../index.html" | 3 +- .../adicionando_bot\303\265es/index.html" | 3 +- .../tutorial_xul/criando_uma_janela/index.html | 3 +- files/pt-pt/orphaned/tutorial_xul/index.html | 3 +- .../introdu\303\247\303\243o/index.html" | 3 +- .../um_pequeno_exemplo_usando_ajax/index.html | 5 +- .../index.html" | 3 +- .../index.html" | 3 +- .../pt-pt/orphaned/utilizando_meta_tags/index.html | 3 +- files/pt-pt/orphaned/venkman/index.html | 9 +- .../o_que_\303\251_css_question_/index.html" | 5 +- .../guia/expressoes_e_operadores/index.html | 3 +- .../index.html" | 3 +- .../orphaned/web/javascript/guia/sobre/index.html | 3 +- .../index.html" | 5 +- .../o_que_\303\251_o_javascript/index.html" | 3 +- .../asyncfunction/prototype/index.html | 3 +- .../pt-pt/orphaned/web/xslt/comunidade/index.html | 3 +- files/pt-pt/orphaned/web/xslt/elementos/index.html | 3 +- .../xforms/controles_customizados/index.html | 3 +- files/pt-pt/orphaned/xforms/index.html | 3 +- .../xforms_especiais_para_mozilla/index.html | 3 +- files/pt-pt/orphaned/xml_no_mozilla/index.html | 3 +- files/pt-pt/orphaned/xpath/eixos/index.html | 3 +- .../xpath/fun\303\247\303\265es/index.html" | 3 +- files/pt-pt/plugins/flash_to_html5/index.html | 3 +- .../debugger/how_to/open_the_debugger/index.html | 3 +- files/pt-pt/tools/debugger/ui_tour/index.html | 3 +- files/pt-pt/tools/keyboard_shortcuts/index.html | 5 +- files/pt-pt/tools/memory/index.html | 3 +- .../page_inspector/how_to/edit_fonts/index.html | 3 +- .../how_to/examine_and_edit_css/index.html | 3 +- .../examine_and_edit_the_box_model/index.html | 3 +- .../how_to/inspect_and_select_colors/index.html | 3 +- .../how_to/open_the_inspector/index.html | 3 +- .../reposition_elements_in_the_page/index.html | 3 +- .../how_to/use_the_inspector_api/index.html | 3 +- .../how_to/work_with_animations/index.html | 3 +- .../page_inspector/keyboard_shortcuts/index.html | 3 +- .../pt-pt/tools/page_inspector/ui_tour/index.html | 3 +- files/pt-pt/tools/performance/call_tree/index.html | 3 +- .../pt-pt/tools/performance/frame_rate/index.html | 3 +- files/pt-pt/tools/performance/how_to/index.html | 3 +- files/pt-pt/tools/performance/index.html | 3 +- files/pt-pt/tools/performance/ui_tour/index.html | 3 +- files/pt-pt/tools/performance/waterfall/index.html | 3 +- .../tools/remote_debugging/thunderbird/index.html | 3 +- .../pt-pt/tools/responsive_design_mode/index.html | 5 +- files/pt-pt/tools/settings/index.html | 3 +- files/pt-pt/tools/storage_inspector/index.html | 3 +- files/pt-pt/tools/style_editor/index.html | 3 +- files/pt-pt/tools/taking_screenshots/index.html | 3 +- files/pt-pt/tools/web_audio_editor/index.html | 3 +- .../tools/web_console/console_messages/index.html | 3 +- files/pt-pt/tools/web_console/helpers/index.html | 3 +- files/pt-pt/tools/web_console/index.html | 5 +- .../web_console/keyboard_shortcuts/index.html | 3 +- .../pt-pt/tools/web_console/rich_output/index.html | 3 +- .../tools/web_console/split_console/index.html | 3 +- .../the_command_line_interpreter/index.html | 3 +- files/pt-pt/tools/web_console/ui_tour/index.html | 3 +- .../using_the_status_role/index.html | 3 +- files/pt-pt/web/accessibility/aria/index.html | 3 +- files/pt-pt/web/accessibility/index.html | 3 +- .../pt-pt/web/api/ambient_light_events/index.html | 3 +- files/pt-pt/web/api/battery_status_api/index.html | 3 +- files/pt-pt/web/api/canvas_api/index.html | 3 +- files/pt-pt/web/api/canvas_api/tutorial/index.html | 3 +- files/pt-pt/web/api/document/alinkcolor/index.html | 3 +- files/pt-pt/web/api/document/bgcolor/index.html | 3 +- files/pt-pt/web/api/document/cookie/index.html | 3 +- files/pt-pt/web/api/document/dir/index.html | 3 +- .../api/document/getelementsbyclassname/index.html | 3 +- .../pt-pt/web/api/document_object_model/index.html | 3 +- .../using_the_w3c_dom_level_1_core/index.html | 3 +- files/pt-pt/web/api/element/clientleft/index.html | 3 +- files/pt-pt/web/api/element/clienttop/index.html | 3 +- files/pt-pt/web/api/element/index.html | 3 +- .../api/file_and_directory_entries_api/index.html | 3 +- files/pt-pt/web/api/filesystem/index.html | 3 +- files/pt-pt/web/api/geolocation_api/index.html | 3 +- files/pt-pt/web/api/media_streams_api/index.html | 3 +- files/pt-pt/web/api/metadata/index.html | 3 +- .../online_and_offline_events/index.html | 3 +- files/pt-pt/web/api/node/appendchild/index.html | 3 +- files/pt-pt/web/api/node/clonenode/index.html | 3 +- files/pt-pt/web/api/node/insertbefore/index.html | 3 +- .../using_the_notifications_api/index.html | 3 +- files/pt-pt/web/api/selection/index.html | 3 +- files/pt-pt/web/api/storage_api/index.html | 3 +- .../web_audio_api/using_web_audio_api/index.html | 3 +- .../web/api/web_authentication_api/index.html | 3 +- files/pt-pt/web/api/web_storage_api/index.html | 3 +- .../web_workers_api/using_web_workers/index.html | 3 +- files/pt-pt/web/api/webgl_api/constants/index.html | 3 +- files/pt-pt/web/api/webgl_api/data/index.html | 3 +- files/pt-pt/web/api/webgl_api/types/index.html | 3 +- .../web/api/webgl_api/using_extensions/index.html | 3 +- files/pt-pt/web/api/webrtc_api/index.html | 3 +- .../api/webrtc_api/taking_still_photos/index.html | 3 +- .../writing_a_websocket_server_in_java/index.html | 3 +- .../index.html | 3 +- .../writing_websocket_server/index.html | 3 +- .../writing_websocket_servers/index.html | 3 +- files/pt-pt/web/api/window/sidebar/index.html | 3 +- files/pt-pt/web/css/_doublecolon_after/index.html | 5 +- files/pt-pt/web/css/_doublecolon_before/index.html | 5 +- .../web/css/alternative_style_sheets/index.html | 3 +- .../web/css/css_backgrounds_and_borders/index.html | 3 +- .../using_multiple_backgrounds/index.html | 3 +- .../introduction_to_the_css_box_model/index.html | 3 +- .../css/css_colors/color_picker_tool/index.html | 3 +- .../aligning_items_in_a_flex_container/index.html | 3 +- .../ordering_flex_items/index.html | 3 +- .../index.html | 4 +- .../typical_use_cases_of_flexbox/index.html | 3 +- files/pt-pt/web/css/css_grid_layout/index.html | 3 +- .../css_transforms/using_css_transforms/index.html | 3 +- files/pt-pt/web/css/css_types/index.html | 3 +- files/pt-pt/web/css/gap/index.html | 3 +- files/pt-pt/web/css/media_queries/index.html | 3 +- .../media_queries/using_media_queries/index.html | 3 +- files/pt-pt/web/css/paged_media/index.html | 3 +- files/pt-pt/web/css/pseudo-classes/index.html | 3 +- files/pt-pt/web/css/pseudo-elements/index.html | 3 +- files/pt-pt/web/css/reference/index.html | 5 +- files/pt-pt/web/events/index.html | 3 +- files/pt-pt/web/guide/ajax/community/index.html | 3 +- .../web/guide/ajax/getting_started/index.html | 3 +- files/pt-pt/web/guide/events/index.html | 3 +- files/pt-pt/web/guide/graphics/index.html | 3 +- .../web/guide/html/content_categories/index.html | 3 +- .../web/guide/html/html5/html5_parser/index.html | 3 +- files/pt-pt/web/guide/html/html5/index.html | 3 +- .../html/html5/introduction_to_html5/index.html | 3 +- .../using_html_sections_and_outlines/index.html | 3 +- files/pt-pt/web/html/applying_color/index.html | 3 +- .../web/html/attributes/crossorigin/index.html | 3 +- files/pt-pt/web/html/attributes/index.html | 3 +- files/pt-pt/web/html/attributes/rel/index.html | 3 +- files/pt-pt/web/html/element/audio/index.html | 3 +- files/pt-pt/web/html/element/fieldset/index.html | 3 +- files/pt-pt/web/html/element/figcaption/index.html | 3 +- files/pt-pt/web/html/element/figure/index.html | 3 +- files/pt-pt/web/html/element/head/index.html | 5 +- files/pt-pt/web/html/element/index.html | 5 +- files/pt-pt/web/html/element/nav/index.html | 3 +- files/pt-pt/web/html/element/progress/index.html | 3 +- files/pt-pt/web/html/element/video/index.html | 3 +- files/pt-pt/web/html/global_attributes/index.html | 3 +- files/pt-pt/web/html/link_types/index.html | 3 +- files/pt-pt/web/html/reference/index.html | 3 +- .../html/using_the_application_cache/index.html | 3 +- .../web/javascript/data_structures/index.html | 3 +- .../guide/details_of_the_object_model/index.html | 3 +- .../javascript/guide/grammar_and_types/index.html | 3 +- files/pt-pt/web/javascript/guide/index.html | 5 +- .../web/javascript/guide/introduction/index.html | 3 +- .../web/javascript/memory_management/index.html | 3 +- .../web/javascript/reference/about/index.html | 3 +- .../deprecated_and_obsolete_features/index.html | 3 +- .../errors/unnamed_function_statement/index.html | 3 +- .../reference/functions/arguments/index.html | 3 +- .../reference/functions/arrow_functions/index.html | 3 +- .../web/javascript/reference/functions/index.html | 3 +- .../reference/functions/rest_parameters/index.html | 3 +- .../reference/operators/comma_operator/index.html | 3 +- .../reference/operators/function/index.html | 3 +- .../web/javascript/reference/operators/index.html | 3 +- .../operators/operator_precedence/index.html | 3 +- .../reference/statements/block/index.html | 3 +- .../javascript/reference/statements/for/index.html | 3 +- .../web/javascript/reference/statements/index.html | 3 +- .../reference/statements/return/index.html | 3 +- .../reference/statements/throw/index.html | 3 +- files/pt-pt/web/javascript/shells/index.html | 7 +- files/pt-pt/web/mathml/attribute/values/index.html | 3 +- .../deriving_the_quadratic_formula/index.html | 3 +- .../examples/mathml_pythagorean_theorem/index.html | 3 +- files/pt-pt/web/opensearch/index.html | 3 +- .../developer_guide/index.html | 3 +- .../responsive/media_types/index.html | 5 +- .../responsive_design_building_blocks/index.html | 3 +- files/pt-pt/web/security/index.html | 3 +- .../web/security/insecure_passwords/index.html | 3 +- .../index.html | 5 +- files/pt-pt/web/security/mixed_content/index.html | 3 +- .../web/security/same-origin_policy/index.html | 3 +- .../index.html | 3 +- .../svg/namespaces_crash_course/example/index.html | 3 +- .../web/svg/svg_animation_with_smil/index.html | 3 +- .../pt-pt/web/svg/tutorial/introduction/index.html | 3 +- .../pt-pt/web/svg/tutorial/svg_and_css/index.html | 5 +- .../tutorial/svg_in_html_introduction/index.html | 3 +- files/pt-pt/web/tutorials/index.html | 3 +- files/pt-pt/web/web_components/index.html | 3 +- files/pt-pt/web/xml/xml_introduction/index.html | 3 +- .../using_the_javascript_api/index.html | 3 +- 441 files changed, 4371 insertions(+), 3494 deletions(-) (limited to 'files/pt-pt/web/css') diff --git a/files/pt-pt/_redirects.txt b/files/pt-pt/_redirects.txt index d53089a7cd..0fd78a0a0c 100644 --- a/files/pt-pt/_redirects.txt +++ b/files/pt-pt/_redirects.txt @@ -1,39 +1,42 @@ # FROM-URL TO-URL /pt-PT/docs/AJAX /pt-PT/docs/Web/Guide/AJAX -/pt-PT/docs/AJAX/Como_começar /pt-PT/docs/Web/Guide/AJAX/Como_começar -/pt-PT/docs/AJAX:Como_começar /pt-PT/docs/Web/Guide/AJAX/Como_começar -/pt-PT/docs/Acessibilidade /pt-PT/docs/Web/Acessibilidade +/pt-PT/docs/AJAX/Como_começar /pt-PT/docs/Web/Guide/AJAX/Getting_Started +/pt-PT/docs/AJAX:Como_começar /pt-PT/docs/Web/Guide/AJAX/Getting_Started +/pt-PT/docs/Acentuação_para_conteúdos_carregados_por_AJAX /pt-PT/docs/orphaned/Acentuação_para_conteúdos_carregados_por_AJAX +/pt-PT/docs/Acessibilidade /pt-PT/docs/Web/Accessibility +/pt-PT/docs/Atualizando_extensões_para_o_Firefox_3 /pt-PT/docs/Mozilla/Firefox/Releases/3/Updating_extensions +/pt-PT/docs/Atualizando_extensões_para_o_Firefox_3.5 /pt-PT/docs/Mozilla/Firefox/Releases/3.5/Updating_extensions /pt-PT/docs/CSS /pt-PT/docs/Web/CSS -/pt-PT/docs/CSS/:after /pt-PT/docs/Web/CSS/:after -/pt-PT/docs/CSS/:before /pt-PT/docs/Web/CSS/:before +/pt-PT/docs/CSS/:after /pt-PT/docs/Web/CSS/::after +/pt-PT/docs/CSS/:before /pt-PT/docs/Web/CSS/::before /pt-PT/docs/CSS/@font-face /pt-PT/docs/Web/CSS/@font-face /pt-PT/docs/CSS/@import /pt-PT/docs/Web/CSS/@import /pt-PT/docs/CSS/@media /pt-PT/docs/Web/CSS/@media -/pt-PT/docs/CSS/Como_começar /pt-PT/docs/Web/CSS/Como_começar -/pt-PT/docs/CSS/Como_começar/CSS_legível /pt-PT/docs/Web/CSS/Como_começar/CSS_legível -/pt-PT/docs/CSS/Como_começar/Caixas /pt-PT/docs/Web/CSS/Como_começar/Caixas -/pt-PT/docs/CSS/Como_começar/Cascata_e_herança /pt-PT/docs/Web/CSS/Como_começar/Cascata_e_herança -/pt-PT/docs/CSS/Como_começar/Como_o_CSS_trabalha /pt-PT/docs/Web/CSS/Como_começar/Como_o_CSS_trabalha -/pt-PT/docs/CSS/Como_começar/Conteúdo /pt-PT/docs/Web/CSS/Como_começar/Conteúdo -/pt-PT/docs/CSS/Como_começar/Cor /pt-PT/docs/Web/CSS/Como_começar/Cor +/pt-PT/docs/CSS/Como_começar /pt-PT/docs/Learn/CSS/First_steps +/pt-PT/docs/CSS/Como_começar/CSS_legível /pt-PT/docs/Learn/CSS/First_steps/How_CSS_is_structured +/pt-PT/docs/CSS/Como_começar/Caixas /pt-PT/docs/Learn/CSS/Building_blocks +/pt-PT/docs/CSS/Como_começar/Cascata_e_herança /pt-PT/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/pt-PT/docs/CSS/Como_começar/Como_o_CSS_trabalha /pt-PT/docs/Learn/CSS/First_steps/How_CSS_works +/pt-PT/docs/CSS/Como_começar/Conteúdo /pt-PT/docs/Learn/CSS/Howto/Generated_content +/pt-PT/docs/CSS/Como_começar/Cor /pt-PT/docs/Learn/CSS/Building_blocks/Values_and_units /pt-PT/docs/CSS/Como_começar/Dados_XML /pt-PT/docs/Web/CSS/Como_começar/Dados_XML -/pt-PT/docs/CSS/Como_começar/Disposição /pt-PT/docs/Web/CSS/Como_começar/Disposição -/pt-PT/docs/CSS/Como_começar/Estilos_de_texto /pt-PT/docs/Web/CSS/Como_começar/Estilos_de_texto -/pt-PT/docs/CSS/Como_começar/Gráficos_SVG /pt-PT/docs/Web/CSS/Como_começar/Gráficos_SVG +/pt-PT/docs/CSS/Como_começar/Disposição /pt-PT/docs/Learn/CSS/CSS_layout +/pt-PT/docs/CSS/Como_começar/Estilos_de_texto /pt-PT/docs/Learn/CSS/Styling_text/Fundamentals +/pt-PT/docs/CSS/Como_começar/Gráficos_SVG /pt-PT/docs/Web/SVG/Tutorial/SVG_and_CSS /pt-PT/docs/CSS/Como_começar/Interfaces_de_usuário_XUL /pt-PT/docs/Web/CSS/Como_começar/Interfaces_de_usuário_XUL -/pt-PT/docs/CSS/Como_começar/JavaScript /pt-PT/docs/Web/CSS/Como_começar/JavaScript -/pt-PT/docs/CSS/Como_começar/Listas /pt-PT/docs/Web/CSS/Como_começar/Listas -/pt-PT/docs/CSS/Como_começar/Mídia /pt-PT/docs/Web/CSS/Como_começar/Mídia -/pt-PT/docs/CSS/Como_começar/O_que_é_CSS /pt-PT/docs/Web/CSS/Como_começar/O_que_é_CSS -/pt-PT/docs/CSS/Como_começar/O_que_é_CSS? /pt-PT/docs/Web/CSS/Como_começar/O_que_é_CSS? -/pt-PT/docs/CSS/Como_começar/Porque_usar_CSS /pt-PT/docs/Web/CSS/Como_começar/Porque_usar_CSS -/pt-PT/docs/CSS/Como_começar/Seletores /pt-PT/docs/Web/CSS/Como_começar/Seletores -/pt-PT/docs/CSS/Como_começar/Tabelas /pt-PT/docs/Web/CSS/Como_começar/Tabelas -/pt-PT/docs/CSS/Consulta_de_mídia /pt-PT/docs/Web/CSS/Consulta_de_mídia -/pt-PT/docs/CSS/Getting_Started/JavaScript /pt-PT/docs/Web/CSS/Como_começar/JavaScript -/pt-PT/docs/CSS/Múltiplos_fundos /pt-PT/docs/Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo -/pt-PT/docs/CSS/Múltiplos_planos_de_fundo /pt-PT/docs/Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo -/pt-PT/docs/CSS/Usando_transformações_CSS /pt-PT/docs/Web/CSS/Usando_transformações_CSS +/pt-PT/docs/CSS/Como_começar/JavaScript /pt-PT/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/pt-PT/docs/CSS/Como_começar/Listas /pt-PT/docs/Learn/CSS/Styling_text/Styling_lists +/pt-PT/docs/CSS/Como_começar/Mídia /pt-PT/docs/Web/Progressive_web_apps/Responsive/Media_types +/pt-PT/docs/CSS/Como_começar/O_que_é_CSS /pt-PT/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/pt-PT/docs/CSS/Como_começar/O_que_é_CSS? /pt-PT/docs/orphaned/Web/CSS/Como_começar/O_que_é_CSS? +/pt-PT/docs/CSS/Como_começar/Porque_usar_CSS /pt-PT/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_0767812f50daab83155d62da97c6e460 +/pt-PT/docs/CSS/Como_começar/Seletores /pt-PT/docs/Learn/CSS/Building_blocks/Selectors +/pt-PT/docs/CSS/Como_começar/Tabelas /pt-PT/docs/Learn/CSS/Building_blocks/Styling_tables +/pt-PT/docs/CSS/Consulta_de_mídia /pt-PT/docs/Web/CSS/Media_Queries/Using_media_queries +/pt-PT/docs/CSS/Getting_Started/JavaScript /pt-PT/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/pt-PT/docs/CSS/Múltiplos_fundos /pt-PT/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/pt-PT/docs/CSS/Múltiplos_planos_de_fundo /pt-PT/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/pt-PT/docs/CSS/Usando_transformações_CSS /pt-PT/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /pt-PT/docs/CSS/azimuth /pt-PT/docs/Web/CSS/azimuth /pt-PT/docs/CSS/background /pt-PT/docs/Web/CSS/background /pt-PT/docs/CSS/background-attachment /pt-PT/docs/Web/CSS/background-attachment @@ -83,30 +86,30 @@ /pt-PT/docs/CSS/top /pt-PT/docs/Web/CSS/top /pt-PT/docs/CSS/width /pt-PT/docs/Web/CSS/width /pt-PT/docs/CSS/z-index /pt-PT/docs/Web/CSS/z-index -/pt-PT/docs/CSS::after /pt-PT/docs/Web/CSS/:after -/pt-PT/docs/CSS::before /pt-PT/docs/Web/CSS/:before +/pt-PT/docs/CSS::after /pt-PT/docs/Web/CSS/::after +/pt-PT/docs/CSS::before /pt-PT/docs/Web/CSS/::before /pt-PT/docs/CSS:@import /pt-PT/docs/Web/CSS/@import /pt-PT/docs/CSS:@media /pt-PT/docs/Web/CSS/@media -/pt-PT/docs/CSS:Como_começar /pt-PT/docs/Web/CSS/Como_começar -/pt-PT/docs/CSS:Como_começar:CSS_legível /pt-PT/docs/Web/CSS/Como_começar/CSS_legível -/pt-PT/docs/CSS:Como_começar:Caixas /pt-PT/docs/Web/CSS/Como_começar/Caixas -/pt-PT/docs/CSS:Como_começar:Cascata_e_herança /pt-PT/docs/Web/CSS/Como_começar/Cascata_e_herança -/pt-PT/docs/CSS:Como_começar:Como_o_CSS_trabalha /pt-PT/docs/Web/CSS/Como_começar/Como_o_CSS_trabalha -/pt-PT/docs/CSS:Como_começar:Conteúdo /pt-PT/docs/Web/CSS/Como_começar/Conteúdo -/pt-PT/docs/CSS:Como_começar:Cor /pt-PT/docs/Web/CSS/Como_começar/Cor +/pt-PT/docs/CSS:Como_começar /pt-PT/docs/Learn/CSS/First_steps +/pt-PT/docs/CSS:Como_começar:CSS_legível /pt-PT/docs/Learn/CSS/First_steps/How_CSS_is_structured +/pt-PT/docs/CSS:Como_começar:Caixas /pt-PT/docs/Learn/CSS/Building_blocks +/pt-PT/docs/CSS:Como_começar:Cascata_e_herança /pt-PT/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/pt-PT/docs/CSS:Como_começar:Como_o_CSS_trabalha /pt-PT/docs/Learn/CSS/First_steps/How_CSS_works +/pt-PT/docs/CSS:Como_começar:Conteúdo /pt-PT/docs/Learn/CSS/Howto/Generated_content +/pt-PT/docs/CSS:Como_começar:Cor /pt-PT/docs/Learn/CSS/Building_blocks/Values_and_units /pt-PT/docs/CSS:Como_começar:Dados_XML /pt-PT/docs/Web/CSS/Como_começar/Dados_XML -/pt-PT/docs/CSS:Como_começar:Disposição /pt-PT/docs/Web/CSS/Como_começar/Disposição -/pt-PT/docs/CSS:Como_começar:Estilos_de_texto /pt-PT/docs/Web/CSS/Como_começar/Estilos_de_texto -/pt-PT/docs/CSS:Como_começar:Gráficos_SVG /pt-PT/docs/Web/CSS/Como_começar/Gráficos_SVG +/pt-PT/docs/CSS:Como_começar:Disposição /pt-PT/docs/Learn/CSS/CSS_layout +/pt-PT/docs/CSS:Como_começar:Estilos_de_texto /pt-PT/docs/Learn/CSS/Styling_text/Fundamentals +/pt-PT/docs/CSS:Como_começar:Gráficos_SVG /pt-PT/docs/Web/SVG/Tutorial/SVG_and_CSS /pt-PT/docs/CSS:Como_começar:Interfaces_de_usuário_XUL /pt-PT/docs/Web/CSS/Como_começar/Interfaces_de_usuário_XUL -/pt-PT/docs/CSS:Como_começar:JavaScript /pt-PT/docs/Web/CSS/Como_começar/JavaScript -/pt-PT/docs/CSS:Como_começar:Listas /pt-PT/docs/Web/CSS/Como_começar/Listas -/pt-PT/docs/CSS:Como_começar:Mídia /pt-PT/docs/Web/CSS/Como_começar/Mídia -/pt-PT/docs/CSS:Como_começar:O_que_é_CSS /pt-PT/docs/Web/CSS/Como_começar/O_que_é_CSS -/pt-PT/docs/CSS:Como_começar:O_que_é_CSS? /pt-PT/docs/Web/CSS/Como_começar/O_que_é_CSS? -/pt-PT/docs/CSS:Como_começar:Porque_usar_CSS /pt-PT/docs/Web/CSS/Como_começar/Porque_usar_CSS -/pt-PT/docs/CSS:Como_começar:Seletores /pt-PT/docs/Web/CSS/Como_começar/Seletores -/pt-PT/docs/CSS:Como_começar:Tabelas /pt-PT/docs/Web/CSS/Como_começar/Tabelas +/pt-PT/docs/CSS:Como_começar:JavaScript /pt-PT/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/pt-PT/docs/CSS:Como_começar:Listas /pt-PT/docs/Learn/CSS/Styling_text/Styling_lists +/pt-PT/docs/CSS:Como_começar:Mídia /pt-PT/docs/Web/Progressive_web_apps/Responsive/Media_types +/pt-PT/docs/CSS:Como_começar:O_que_é_CSS /pt-PT/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/pt-PT/docs/CSS:Como_começar:O_que_é_CSS? /pt-PT/docs/orphaned/Web/CSS/Como_começar/O_que_é_CSS? +/pt-PT/docs/CSS:Como_começar:Porque_usar_CSS /pt-PT/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_0767812f50daab83155d62da97c6e460 +/pt-PT/docs/CSS:Como_começar:Seletores /pt-PT/docs/Learn/CSS/Building_blocks/Selectors +/pt-PT/docs/CSS:Como_começar:Tabelas /pt-PT/docs/Learn/CSS/Building_blocks/Styling_tables /pt-PT/docs/CSS:azimuth /pt-PT/docs/Web/CSS/azimuth /pt-PT/docs/CSS:background /pt-PT/docs/Web/CSS/background /pt-PT/docs/CSS:background-attachment /pt-PT/docs/Web/CSS/background-attachment @@ -154,75 +157,169 @@ /pt-PT/docs/CSS:list-style /pt-PT/docs/Web/CSS/list-style /pt-PT/docs/CSS:width /pt-PT/docs/Web/CSS/width /pt-PT/docs/CSS:z-index /pt-PT/docs/Web/CSS/z-index +/pt-PT/docs/Componentes /pt-PT/docs/orphaned/Componentes /pt-PT/docs/Compressão_de_Temas /pt-PT/docs/Empacotando_Temas -/pt-PT/docs/Controles_Customizados /pt-PT/docs/XForms/Controles_Customizados +/pt-PT/docs/Configurando_um_servidor_de_atualização /pt-PT/docs/orphaned/Configurando_um_servidor_de_atualização +/pt-PT/docs/Construir_uma_Extensão /pt-PT/docs/orphaned/Construir_uma_Extensão +/pt-PT/docs/Controles_Customizados /pt-PT/docs/orphaned/XForms/Controles_Customizados +/pt-PT/docs/Controles_XUL /pt-PT/docs/orphaned/Controles_XUL +/pt-PT/docs/Criando_plugins_OpenSearch_para_o_Firefox /pt-PT/docs/Web/OpenSearch +/pt-PT/docs/Criando_um_visual_para_o_Firefox /pt-PT/docs/orphaned/Criando_um_visual_para_o_Firefox /pt-PT/docs/Criando_um_visual_para_o_Firefox:Iniciando /pt-PT/docs/Criando_um_visual_para_o_Firefox/Iniciando /pt-PT/docs/Criando_um_visual_para_o_Firefox:UUID /pt-PT/docs/Criando_um_visual_para_o_Firefox/UUID /pt-PT/docs/Criando_um_visual_para_o_Firefox:contents.rdf /pt-PT/docs/Criando_um_visual_para_o_Firefox/contents.rdf /pt-PT/docs/Criando_um_visual_para_o_Firefox:install.rdf /pt-PT/docs/Criando_um_visual_para_o_Firefox/install.rdf -/pt-PT/docs/DOM /pt-PT/docs/DOM/DOM_Reference -/pt-PT/docs/DOM/DOM_Storage /pt-PT/docs/DOM/Storage -/pt-PT/docs/DOM:document.getElementsByClassName /pt-PT/docs/DOM/document.getElementsByClassName -/pt-PT/docs/DOM:element /pt-PT/docs/DOM/element -/pt-PT/docs/DOM:element.appendChild /pt-PT/docs/DOM/element.appendChild -/pt-PT/docs/DOM:element.clientLeft /pt-PT/docs/DOM/element.clientLeft -/pt-PT/docs/DOM:element.clientTop /pt-PT/docs/DOM/element.clientTop -/pt-PT/docs/DOM:element.cloneNode /pt-PT/docs/DOM/element.cloneNode -/pt-PT/docs/DOM:element.insertBefore /pt-PT/docs/DOM/element.insertBefore -/pt-PT/docs/Desenvolver_Mozilla /pt-PT/docs/Guia_do_desenvolvedor -/pt-PT/docs/Desenvolvimento_Mozilla /pt-PT/docs/Guia_do_desenvolvedor +/pt-PT/docs/Criar_uma_pele_para_o_Firefox /pt-PT/docs/orphaned/Criar_uma_pele_para_o_Firefox +/pt-PT/docs/DHTML /pt-PT/docs/Glossary/DHTML +/pt-PT/docs/DOM /pt-PT/docs/Web/API/Document_Object_Model +/pt-PT/docs/DOM/DOM_Reference /pt-PT/docs/Web/API/Document_Object_Model +/pt-PT/docs/DOM/DOM_Storage /pt-PT/docs/Web/API/Web_Storage_API +/pt-PT/docs/DOM/Selection /pt-PT/docs/Web/API/Selection +/pt-PT/docs/DOM/Storage /pt-PT/docs/Web/API/Web_Storage_API +/pt-PT/docs/DOM/document.alinkColor /pt-PT/docs/Web/API/Document/alinkColor +/pt-PT/docs/DOM/document.bgColor /pt-PT/docs/Web/API/Document/bgColor +/pt-PT/docs/DOM/document.cookie /pt-PT/docs/Web/API/Document/cookie +/pt-PT/docs/DOM/document.getElementsByClassName /pt-PT/docs/Web/API/Document/getElementsByClassName +/pt-PT/docs/DOM/element /pt-PT/docs/Web/API/Element +/pt-PT/docs/DOM/element.appendChild /pt-PT/docs/Web/API/Node/appendChild +/pt-PT/docs/DOM/element.clientLeft /pt-PT/docs/Web/API/Element/clientLeft +/pt-PT/docs/DOM/element.clientTop /pt-PT/docs/Web/API/Element/clientTop +/pt-PT/docs/DOM/element.cloneNode /pt-PT/docs/Web/API/Node/cloneNode +/pt-PT/docs/DOM/element.insertBefore /pt-PT/docs/Web/API/Node/insertBefore +/pt-PT/docs/DOM:document.getElementsByClassName /pt-PT/docs/Web/API/Document/getElementsByClassName +/pt-PT/docs/DOM:element /pt-PT/docs/Web/API/Element +/pt-PT/docs/DOM:element.appendChild /pt-PT/docs/Web/API/Node/appendChild +/pt-PT/docs/DOM:element.clientLeft /pt-PT/docs/Web/API/Element/clientLeft +/pt-PT/docs/DOM:element.clientTop /pt-PT/docs/Web/API/Element/clientTop +/pt-PT/docs/DOM:element.cloneNode /pt-PT/docs/Web/API/Node/cloneNode +/pt-PT/docs/DOM:element.insertBefore /pt-PT/docs/Web/API/Node/insertBefore +/pt-PT/docs/DOM_Inspector /pt-PT/docs/orphaned/Tools/Add-ons/DOM_Inspector +/pt-PT/docs/DOM_Inspector/Introduction_to_DOM_Inspector /pt-PT/docs/orphaned/Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector +/pt-PT/docs/Desenhando_texto_usando_canvas /pt-PT/docs/orphaned/Desenhando_texto_usando_canvas +/pt-PT/docs/Desenvolver_Mozilla /pt-PT/docs/Mozilla/Developer_guide +/pt-PT/docs/Desenvolvimento_Mozilla /pt-PT/docs/Mozilla/Developer_guide /pt-PT/docs/Desenvolvimento_Web /pt-PT/docs/Web/Guide -/pt-PT/docs/Eventos_online_e_offline /pt-PT/docs/Web/API/NavigatorOnLine/Eventos_online_e_offline -/pt-PT/docs/Folhas_de_estilo_alternativas /pt-PT/docs/Web/CSS/Folhas_de_estilo_alternativas +/pt-PT/docs/Eventos_online_e_offline /pt-PT/docs/Web/API/NavigatorOnLine/Online_and_offline_events +/pt-PT/docs/FAQ_Extensões /pt-PT/docs/orphaned/FAQ_Extensões +/pt-PT/docs/Firefox_1.5_para_Desenvolvedores /pt-PT/docs/Mozilla/Firefox/Releases/1.5 +/pt-PT/docs/Firefox_2_para_desenvolvedores /pt-PT/docs/Mozilla/Firefox/Releases/2 +/pt-PT/docs/Firefox_3.5_para_desenvolvedores /pt-PT/docs/Mozilla/Firefox/Releases/3.5 +/pt-PT/docs/Firefox_3.6_para_desenvolvedores /pt-PT/docs/Mozilla/Firefox/Releases/3.6 +/pt-PT/docs/Firefox_3_para_desenvolvedores /pt-PT/docs/orphaned/Firefox_3_para_desenvolvedores +/pt-PT/docs/Firefox_4_para_desenvolvedores /pt-PT/docs/Mozilla/Firefox/Releases/4 +/pt-PT/docs/Firefox_5_para_desenvolvedores /pt-PT/docs/Mozilla/Firefox/Releases/5 +/pt-PT/docs/Firefox_6_para_desenvolvedores /pt-PT/docs/Mozilla/Firefox/Releases/6 +/pt-PT/docs/Folhas_de_estilo_alternativas /pt-PT/docs/Web/CSS/Alternative_style_sheets +/pt-PT/docs/Glossário /pt-PT/docs/Glossary +/pt-PT/docs/Glossário/404 /pt-PT/docs/Glossary/404 +/pt-PT/docs/Glossário/502 /pt-PT/docs/Glossary/502 +/pt-PT/docs/Glossário/AJAX /pt-PT/docs/Glossary/AJAX +/pt-PT/docs/Glossário/API /pt-PT/docs/conflicting/Glossary/API +/pt-PT/docs/Glossário/ARIA /pt-PT/docs/Glossary/ARIA +/pt-PT/docs/Glossário/Acessibilidade /pt-PT/docs/Glossary/Accessibility +/pt-PT/docs/Glossário/Argumento /pt-PT/docs/Glossary/Argument +/pt-PT/docs/Glossário/Assinatura /pt-PT/docs/Glossary/Signature +/pt-PT/docs/Glossário/BigInt /pt-PT/docs/Glossary/BigInt +/pt-PT/docs/Glossário/CIA /pt-PT/docs/Glossary/CIA +/pt-PT/docs/Glossário/CRLF /pt-PT/docs/Glossary/CRLF +/pt-PT/docs/Glossário/CRUD /pt-PT/docs/Glossary/CRUD +/pt-PT/docs/Glossário/Cabeçalho_de_entidade /pt-PT/docs/Glossary/Entity_header +/pt-PT/docs/Glossário/Cache /pt-PT/docs/Glossary/Cache +/pt-PT/docs/Glossário/Compilar /pt-PT/docs/Glossary/Compile +/pt-PT/docs/Glossário/Compressao_GZip /pt-PT/docs/Glossary/GZip_compression +/pt-PT/docs/Glossário/DOM /pt-PT/docs/Glossary/DOM +/pt-PT/docs/Glossário/ECMA /pt-PT/docs/Glossary/ECMA +/pt-PT/docs/Glossário/Eixo_principal /pt-PT/docs/Glossary/Main_Axis +/pt-PT/docs/Glossário/Eixo_transversal /pt-PT/docs/Glossary/Cross_Axis +/pt-PT/docs/Glossário/Elemento /pt-PT/docs/Glossary/Element +/pt-PT/docs/Glossário/Etiqueta /pt-PT/docs/Glossary/Tag +/pt-PT/docs/Glossário/Extensoes_da_Web /pt-PT/docs/Glossary/WebExtensions +/pt-PT/docs/Glossário/Favicon /pt-PT/docs/Glossary/Favicon +/pt-PT/docs/Glossário/Flexbox /pt-PT/docs/Glossary/Flexbox +/pt-PT/docs/Glossário/GCS /pt-PT/docs/Glossary/SCM +/pt-PT/docs/Glossário/Git /pt-PT/docs/Glossary/Git +/pt-PT/docs/Glossário/HTML /pt-PT/docs/Glossary/HTML +/pt-PT/docs/Glossário/Hipertexto /pt-PT/docs/Glossary/Hypertext +/pt-PT/docs/Glossário/IANA /pt-PT/docs/Glossary/IANA +/pt-PT/docs/Glossário/ISP /pt-PT/docs/Glossary/ISP +/pt-PT/docs/Glossário/Idempotent /pt-PT/docs/Glossary/Idempotent +/pt-PT/docs/Glossário/IndexedDB /pt-PT/docs/Glossary/IndexedDB +/pt-PT/docs/Glossário/Lazy_load /pt-PT/docs/Glossary/Lazy_load +/pt-PT/docs/Glossário/Metadados /pt-PT/docs/Glossary/Metadata +/pt-PT/docs/Glossário/MitM /pt-PT/docs/Glossary/MitM +/pt-PT/docs/Glossário/Modo_de_operação_de_cifra_de_bloco /pt-PT/docs/Glossary/Block_cipher_mode_of_operation +/pt-PT/docs/Glossário/Motor /pt-PT/docs/Glossary/Engine +/pt-PT/docs/Glossário/Navegador /pt-PT/docs/Glossary/Browser +/pt-PT/docs/Glossário/Node.js /pt-PT/docs/Glossary/Node.js +/pt-PT/docs/Glossário/OOP /pt-PT/docs/Glossary/OOP +/pt-PT/docs/Glossário/OTA /pt-PT/docs/Glossary/OTA +/pt-PT/docs/Glossário/Objeto /pt-PT/docs/Glossary/Object +/pt-PT/docs/Glossário/Polyfill /pt-PT/docs/Glossary/Polyfill +/pt-PT/docs/Glossário/Prototype-based_programming /pt-PT/docs/Glossary/Prototype-based_programming +/pt-PT/docs/Glossário/Referencia_de_objeto /pt-PT/docs/Glossary/Object_reference +/pt-PT/docs/Glossário/Servidor /pt-PT/docs/Glossary/Server +/pt-PT/docs/Glossário/UTF-8 /pt-PT/docs/Glossary/UTF-8 +/pt-PT/docs/Glossário/Valor /pt-PT/docs/Glossary/Value +/pt-PT/docs/Glossário/Viewport /pt-PT/docs/Glossary/Viewport +/pt-PT/docs/Glossário/Viewport_Visual /pt-PT/docs/Glossary/Visual_Viewport +/pt-PT/docs/Glossário/WHATWG /pt-PT/docs/Glossary/WHATWG +/pt-PT/docs/Glossário/WebRTC /pt-PT/docs/Glossary/WebRTC +/pt-PT/docs/Glossário/WebVTT /pt-PT/docs/Glossary/WebVTT +/pt-PT/docs/Glossário/World_Wide_Web /pt-PT/docs/Glossary/World_Wide_Web +/pt-PT/docs/Glossário/Wrapper /pt-PT/docs/Glossary/Wrapper +/pt-PT/docs/Glossário/XML /pt-PT/docs/Glossary/XML +/pt-PT/docs/Glossário/booliano /pt-PT/docs/Glossary/Boolean +/pt-PT/docs/Guia_do_desenvolvedor /pt-PT/docs/Mozilla/Developer_guide /pt-PT/docs/HTML /pt-PT/docs/Web/HTML -/pt-PT/docs/HTML/Aplicar_cor__elementos_HTML_utilizando_CSS /pt-PT/docs/Web/HTML/Aplicar_cor_elementos_HTML_utilizando_CSS -/pt-PT/docs/HTML/Atributos /pt-PT/docs/Web/HTML/Atributos -/pt-PT/docs/HTML/Atributos_globais /pt-PT/docs/Web/HTML/Atributos_globais -/pt-PT/docs/HTML/Element /pt-PT/docs/Web/HTML/Elemento -/pt-PT/docs/HTML/Element/Audio /pt-PT/docs/Web/HTML/Elemento/Audio -/pt-PT/docs/HTML/Element/figcaption /pt-PT/docs/Web/HTML/Elemento/figcaption -/pt-PT/docs/HTML/Element/figure /pt-PT/docs/HTMLToDelete/Element/figure -/pt-PT/docs/HTML/Element/progress /pt-PT/docs/Web/HTML/Elemento/progress -/pt-PT/docs/HTML/Elemento /pt-PT/docs/Web/HTML/Elemento -/pt-PT/docs/HTML/Elemento/Audio /pt-PT/docs/Web/HTML/Elemento/Audio -/pt-PT/docs/HTML/Elemento/Video /pt-PT/docs/Web/HTML/Elemento/Video -/pt-PT/docs/HTML/Elemento/figcaption /pt-PT/docs/Web/HTML/Elemento/figcaption -/pt-PT/docs/HTML/Elemento/head /pt-PT/docs/Web/HTML/Elemento/head -/pt-PT/docs/HTML/Elemento/nav /pt-PT/docs/Web/HTML/Elemento/nav -/pt-PT/docs/HTML/Elemento/progress /pt-PT/docs/Web/HTML/Elemento/progress -/pt-PT/docs/HTML/Elemento/progress/progress /pt-PT/docs/Web/HTML/Elemento/progress -/pt-PT/docs/HTML/HTML5 /pt-PT/docs/Web/HTML/HTML5 -/pt-PT/docs/HTML/HTML5/Forms_no_HTML5 /pt-PT/docs/Web/HTML/HTML5/Forms_no_HTML5 -/pt-PT/docs/HTML/HTML5/Introdução_ao_HTML5 /pt-PT/docs/Web/HTML/HTML5/Introdução_ao_HTML5 -/pt-PT/docs/HTML/HTML5/Parser_HTML5 /pt-PT/docs/Web/HTML/HTML5/Parser_HTML5 -/pt-PT/docs/HTML/Referencia /pt-PT/docs/Web/HTML/Referencia -/pt-PT/docs/HTML/Tipos_de_hiperligacao /pt-PT/docs/Web/HTML/Tipos_de_hiperligacao +/pt-PT/docs/HTML/Aplicar_cor__elementos_HTML_utilizando_CSS /pt-PT/docs/Web/HTML/Applying_color +/pt-PT/docs/HTML/Atributos /pt-PT/docs/Web/HTML/Attributes +/pt-PT/docs/HTML/Atributos_globais /pt-PT/docs/Web/HTML/Global_attributes +/pt-PT/docs/HTML/Element /pt-PT/docs/Web/HTML/Element +/pt-PT/docs/HTML/Element/Audio /pt-PT/docs/Web/HTML/Element/audio +/pt-PT/docs/HTML/Element/figcaption /pt-PT/docs/Web/HTML/Element/figcaption +/pt-PT/docs/HTML/Element/figure /pt-PT/docs/Web/HTML/Element/figure +/pt-PT/docs/HTML/Element/progress /pt-PT/docs/Web/HTML/Element/progress +/pt-PT/docs/HTML/Elemento /pt-PT/docs/Web/HTML/Element +/pt-PT/docs/HTML/Elemento/Audio /pt-PT/docs/Web/HTML/Element/audio +/pt-PT/docs/HTML/Elemento/Video /pt-PT/docs/Web/HTML/Element/video +/pt-PT/docs/HTML/Elemento/figcaption /pt-PT/docs/Web/HTML/Element/figcaption +/pt-PT/docs/HTML/Elemento/head /pt-PT/docs/Web/HTML/Element/head +/pt-PT/docs/HTML/Elemento/nav /pt-PT/docs/Web/HTML/Element/nav +/pt-PT/docs/HTML/Elemento/progress /pt-PT/docs/Web/HTML/Element/progress +/pt-PT/docs/HTML/Elemento/progress/progress /pt-PT/docs/Web/HTML/Element/progress +/pt-PT/docs/HTML/HTML5 /pt-PT/docs/Web/Guide/HTML/HTML5 +/pt-PT/docs/HTML/HTML5/Forms_no_HTML5 /pt-PT/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/pt-PT/docs/HTML/HTML5/Introdução_ao_HTML5 /pt-PT/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/pt-PT/docs/HTML/HTML5/Parser_HTML5 /pt-PT/docs/Web/Guide/HTML/HTML5/HTML5_Parser +/pt-PT/docs/HTML/Referencia /pt-PT/docs/Web/HTML/Reference +/pt-PT/docs/HTML/Tipos_de_hiperligacao /pt-PT/docs/Web/HTML/Link_types /pt-PT/docs/HTMLToDelete /en-US/docs/Web/HTML -/pt-PT/docs/HTMLToDelete/Aplicar_cor__elementos_HTML_utilizando_CSS /pt-PT/docs/Web/HTML/Aplicar_cor_elementos_HTML_utilizando_CSS -/pt-PT/docs/HTMLToDelete/Atributos /pt-PT/docs/Web/HTML/Atributos -/pt-PT/docs/HTMLToDelete/Atributos_globais /pt-PT/docs/Web/HTML/Atributos_globais -/pt-PT/docs/HTMLToDelete/Element /pt-PT/docs/Web/HTML/Elemento -/pt-PT/docs/HTMLToDelete/Element/Audio /pt-PT/docs/Web/HTML/Elemento/Audio -/pt-PT/docs/HTMLToDelete/Element/progress /pt-PT/docs/Web/HTML/Elemento/progress -/pt-PT/docs/HTMLToDelete/Elemento /pt-PT/docs/Web/HTML/Elemento -/pt-PT/docs/HTMLToDelete/Elemento/Audio /pt-PT/docs/Web/HTML/Elemento/Audio -/pt-PT/docs/HTMLToDelete/Elemento/Video /pt-PT/docs/Web/HTML/Elemento/Video -/pt-PT/docs/HTMLToDelete/Elemento/figcaption /pt-PT/docs/Web/HTML/Elemento/figcaption -/pt-PT/docs/HTMLToDelete/Elemento/head /pt-PT/docs/Web/HTML/Elemento/head -/pt-PT/docs/HTMLToDelete/Elemento/nav /pt-PT/docs/Web/HTML/Elemento/nav -/pt-PT/docs/HTMLToDelete/Elemento/progress /pt-PT/docs/Web/HTML/Elemento/progress -/pt-PT/docs/HTMLToDelete/Referencia /pt-PT/docs/Web/HTML/Referencia -/pt-PT/docs/HTMLToDelete/Tipos_de_hiperligacao /pt-PT/docs/Web/HTML/Tipos_de_hiperligacao -/pt-PT/docs/Introducao_a_XML /pt-PT/docs/Web/XML/Introducao_a_XML +/pt-PT/docs/HTMLToDelete/Aplicar_cor__elementos_HTML_utilizando_CSS /pt-PT/docs/Web/HTML/Applying_color +/pt-PT/docs/HTMLToDelete/Atributos /pt-PT/docs/Web/HTML/Attributes +/pt-PT/docs/HTMLToDelete/Atributos_globais /pt-PT/docs/Web/HTML/Global_attributes +/pt-PT/docs/HTMLToDelete/Element /pt-PT/docs/Web/HTML/Element +/pt-PT/docs/HTMLToDelete/Element/Audio /pt-PT/docs/Web/HTML/Element/audio +/pt-PT/docs/HTMLToDelete/Element/figure /pt-PT/docs/Web/HTML/Element/figure +/pt-PT/docs/HTMLToDelete/Element/progress /pt-PT/docs/Web/HTML/Element/progress +/pt-PT/docs/HTMLToDelete/Elemento /pt-PT/docs/Web/HTML/Element +/pt-PT/docs/HTMLToDelete/Elemento/Audio /pt-PT/docs/Web/HTML/Element/audio +/pt-PT/docs/HTMLToDelete/Elemento/Video /pt-PT/docs/Web/HTML/Element/video +/pt-PT/docs/HTMLToDelete/Elemento/figcaption /pt-PT/docs/Web/HTML/Element/figcaption +/pt-PT/docs/HTMLToDelete/Elemento/head /pt-PT/docs/Web/HTML/Element/head +/pt-PT/docs/HTMLToDelete/Elemento/nav /pt-PT/docs/Web/HTML/Element/nav +/pt-PT/docs/HTMLToDelete/Elemento/progress /pt-PT/docs/Web/HTML/Element/progress +/pt-PT/docs/HTMLToDelete/Referencia /pt-PT/docs/Web/HTML/Reference +/pt-PT/docs/HTMLToDelete/Tipos_de_hiperligacao /pt-PT/docs/Web/HTML/Link_types +/pt-PT/docs/Introducao_a_XML /pt-PT/docs/Web/XML/XML_introduction /pt-PT/docs/JavaScript /pt-PT/docs/Web/JavaScript -/pt-PT/docs/JavaScript/Guia /pt-PT/docs/Web/JavaScript/Guia -/pt-PT/docs/JavaScript/Guia/Expressoes_e_Operadores /pt-PT/docs/Web/JavaScript/Guia/Expressoes_e_Operadores -/pt-PT/docs/JavaScript/Guia/Introdução_ao_JavaScript /pt-PT/docs/Web/JavaScript/Guia/Introdução_ao_JavaScript -/pt-PT/docs/JavaScript/Guia/Sobre /pt-PT/docs/Web/JavaScript/Guia/Sobre -/pt-PT/docs/JavaScript/Guia/Valores,_Variáveis_e_Literais /pt-PT/docs/Web/JavaScript/Guia/Valores,_Variáveis_e_Literais +/pt-PT/docs/JavaScript/Guia /pt-PT/docs/Web/JavaScript/Guide +/pt-PT/docs/JavaScript/Guia/Expressoes_e_Operadores /pt-PT/docs/orphaned/Web/JavaScript/Guia/Expressoes_e_Operadores +/pt-PT/docs/JavaScript/Guia/Introdução_ao_JavaScript /pt-PT/docs/orphaned/Web/JavaScript/Guia/Introdução_ao_JavaScript +/pt-PT/docs/JavaScript/Guia/Sobre /pt-PT/docs/orphaned/Web/JavaScript/Guia/Sobre +/pt-PT/docs/JavaScript/Guia/Valores,_Variáveis_e_Literais /pt-PT/docs/orphaned/Web/JavaScript/Guia/Valores,_Variáveis_e_Literais /pt-PT/docs/JavaScript/Novidades_no_JavaScript /pt-PT/docs/Web/JavaScript/Novidades_no_JavaScript /pt-PT/docs/JavaScript/Novidades_no_JavaScript/Novidades_no_Javascript_1.8 /pt-PT/docs/Web/JavaScript/Novidades_no_JavaScript/Novidades_no_Javascript_1.8 -/pt-PT/docs/JavaScript/O_que_é_o_JavaScript /pt-PT/docs/Web/JavaScript/O_que_é_o_JavaScript +/pt-PT/docs/JavaScript/O_que_é_o_JavaScript /pt-PT/docs/orphaned/Web/JavaScript/O_que_é_o_JavaScript /pt-PT/docs/JavaScript/Referência/About /en-US/docs/Web/JavaScript/Reference/About /pt-PT/docs/JavaScript/Referência/Code_comments /en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Comments /pt-PT/docs/JavaScript/Referência/Deprecated_and_obsolete_features /en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features @@ -529,68 +626,406 @@ /pt-PT/docs/JavaScript/Referência/Statements/while /en-US/docs/Web/JavaScript/Reference/Statements/while /pt-PT/docs/JavaScript/Referência/Statements/with /en-US/docs/Web/JavaScript/Reference/Statements/with /pt-PT/docs/JavaScript/Referência/Symbols /en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol -/pt-PT/docs/JavaScript:O_que_é_o_JavaScript /pt-PT/docs/Web/JavaScript/O_que_é_o_JavaScript +/pt-PT/docs/JavaScript:O_que_é_o_JavaScript /pt-PT/docs/orphaned/Web/JavaScript/O_que_é_o_JavaScript +/pt-PT/docs/JavaScript_Shells /pt-PT/docs/Web/JavaScript/Shells +/pt-PT/docs/Java_em_Extensões_do_Firefox /pt-PT/docs/orphaned/Java_em_Extensões_do_Firefox +/pt-PT/docs/Javascript_orientado_a_objetos /pt-PT/docs/orphaned/Javascript_orientado_a_objetos +/pt-PT/docs/Jogos /pt-PT/docs/Games +/pt-PT/docs/Jogos/Tutoriais /pt-PT/docs/Games/Tutorials +/pt-PT/docs/Learn/Acessibilidade /pt-PT/docs/Learn/Accessibility /pt-PT/docs/Learn/CSS/Estilo_de_caixas /en-US/docs/Learn/CSS/Building_blocks +/pt-PT/docs/Learn/CSS/Estilo_de_texto /pt-PT/docs/Learn/CSS/Styling_text +/pt-PT/docs/Learn/CSS/Howto/FAQ_de_CSS /pt-PT/docs/Learn/CSS/Howto/CSS_FAQ /pt-PT/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /pt-PT/docs/Learn/CSS/Introduction_to_CSS/Seletores /en-US/docs/Learn/CSS/Building_blocks/Selectors -/pt-PT/docs/MDN/Contribute/Editor /pt-PT/docs/MDN/Editor -/pt-PT/docs/MDN/Contribute/Editor/Basicos /pt-PT/docs/MDN/Editor/Basicos +/pt-PT/docs/Learn/Comecar_com_a_Web /pt-PT/docs/Learn/Getting_started_with_the_web +/pt-PT/docs/Learn/Comecar_com_a_Web/A_web_e_os_padroes_da_web /pt-PT/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards +/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site /pt-PT/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like +/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico /pt-PT/docs/Learn/Getting_started_with_the_web/CSS_basics +/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web /pt-PT/docs/Learn/Getting_started_with_the_web/How_the_Web_works +/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript /pt-PT/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos /pt-PT/docs/Learn/Getting_started_with_the_web/HTML_basics +/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software /pt-PT/docs/Learn/Getting_started_with_the_web/Installing_basic_software +/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros /pt-PT/docs/Learn/Getting_started_with_the_web/Dealing_with_files +/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web /pt-PT/docs/Learn/Getting_started_with_the_web/Publishing_your_website +/pt-PT/docs/Learn/HTML/Como /pt-PT/docs/Learn/HTML/Howto +/pt-PT/docs/Learn/HTML/Como/Adicionar_um_mapa_de_zona_clicavel_numa_imagem /pt-PT/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML /pt-PT/docs/Learn/HTML/Introduction_to_HTML +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Criar_hiperligacoes /pt-PT/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Depurar_HTML /pt-PT/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Estrutura_documento_website /pt-PT/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Estruturar_pagina_de_conteudo /pt-PT/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Formatacao_avancada_texto /pt-PT/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Iniciacao_HTML /pt-PT/docs/Learn/HTML/Introduction_to_HTML/Getting_started +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/Os_metadados_de_head_em_HTML /pt-PT/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +/pt-PT/docs/Learn/HTML/Introducao_ao_HTML/demarcar_uma_carta /pt-PT/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +/pt-PT/docs/Learn/HTML/Multimedia_and_embedding/Pagina_de_boas_vindas_da_Mozilla /pt-PT/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +/pt-PT/docs/Learn/HTML/Multimedia_e_integracao /pt-PT/docs/Learn/HTML/Multimedia_and_embedding +/pt-PT/docs/Learn/HTML/Multimedia_e_integracao/Conteudo_de_audio_e_vídeo /pt-PT/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/pt-PT/docs/Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas /pt-PT/docs/Learn/HTML/Tables/Structuring_planet_data +/pt-PT/docs/Learn/HTML/Tables/Avancada /pt-PT/docs/Learn/HTML/Tables/Advanced +/pt-PT/docs/Learn/HTML/Tables/Basicos /pt-PT/docs/Learn/HTML/Tables/Basics +/pt-PT/docs/Learn/JavaScript/Primeiros_passos /pt-PT/docs/Learn/JavaScript/First_steps +/pt-PT/docs/Learn/No-servidor /pt-PT/docs/Learn/Server-side +/pt-PT/docs/Learn/No-servidor/Django /pt-PT/docs/Learn/Server-side/Django +/pt-PT/docs/Learn/No-servidor/Express_Nodejs /pt-PT/docs/Learn/Server-side/Express_Nodejs +/pt-PT/docs/Learn/No-servidor/Express_Nodejs/Configurar_um_meio_de_desenvolvimento_Node /pt-PT/docs/Learn/Server-side/Express_Nodejs/development_environment +/pt-PT/docs/Learn/No-servidor/Express_Nodejs/Introduction /pt-PT/docs/Learn/Server-side/Express_Nodejs/Introduction +/pt-PT/docs/Learn/No-servidor/Servidor_node_sem_framework /pt-PT/docs/Learn/Server-side/Node_server_without_framework +/pt-PT/docs/Learn/Questoes_comuns /pt-PT/docs/Learn/Common_questions +/pt-PT/docs/Learn/Questoes_comuns/Como_funciona_a_Internet /pt-PT/docs/Learn/Common_questions/How_does_the_Internet_work +/pt-PT/docs/Learn/Questoes_comuns/Congiurar_um_servidor_de_testes_local /pt-PT/docs/Learn/Common_questions/set_up_a_local_testing_server +/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_URL /pt-PT/docs/Learn/Common_questions/What_is_a_URL +/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_nome_de_dominio /pt-PT/docs/Learn/Common_questions/What_is_a_domain_name +/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_servidor_da_Web /pt-PT/docs/Learn/Common_questions/What_is_a_web_server +/pt-PT/docs/Learn/Questoes_comuns/Qual_e_a_diferenca_entre_pagina_site_servidor_da_web_e_mecanismo_pesquisa /pt-PT/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines +/pt-PT/docs/Learn/Tools_and_testing/Teste_cruzado_de_navegador /pt-PT/docs/Learn/Tools_and_testing/Cross_browser_testing +/pt-PT/docs/Learn/Tools_and_testing/Teste_cruzado_de_navegador/Acessibilidade /pt-PT/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility +/pt-PT/docs/Localizar_descrições_de_extensões /pt-PT/docs/orphaned/Localizar_descrições_de_extensões +/pt-PT/docs/Localização /pt-PT/docs/Glossary/Localization +/pt-PT/docs/MDN/Comunidade /pt-PT/docs/orphaned/MDN/Community +/pt-PT/docs/MDN/Comunidade/Conversações /pt-PT/docs/orphaned/MDN/Community/Conversations +/pt-PT/docs/MDN/Comunidade/Doc_sprints /pt-PT/docs/orphaned/MDN/Community/Doc_sprints +/pt-PT/docs/MDN/Comunidade/O_que_está_a_acontecer /pt-PT/docs/orphaned/MDN/Community/Whats_happening +/pt-PT/docs/MDN/Comunidade/Trabalhar_em_comunidade /pt-PT/docs/orphaned/MDN/Community/Working_in_community +/pt-PT/docs/MDN/Contribute/Editor /pt-PT/docs/orphaned/MDN/Editor +/pt-PT/docs/MDN/Contribute/Editor/Basicos /pt-PT/docs/orphaned/MDN/Editor/Basics +/pt-PT/docs/MDN/Contribute/Howto/Como_converter_exemplos_de_codigo_para_ficarem_live /pt-PT/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live +/pt-PT/docs/MDN/Contribute/Howto/Como_definir_o_resumo_para_uma_pagina /pt-PT/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page +/pt-PT/docs/MDN/Contribute/Howto/Como_efetuar_revisao_tecnica /pt-PT/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review +/pt-PT/docs/MDN/Contribute/Howto/Como_escrever_um_artigo_para_ajudar_as_pessoas_a_aprenderem_sobre_a_Web /pt-PT/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +/pt-PT/docs/MDN/Contribute/Howto/Como_escrever_uma_nova_entrada_no_Glossario /pt-PT/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary +/pt-PT/docs/MDN/Contribute/Howto/Comunicar_um_problema /pt-PT/docs/MDN/Contribute/Howto/Report_a_problem +/pt-PT/docs/MDN/Contribute/Howto/Criar_e_editar_paginas /pt-PT/docs/MDN/Contribute/Howto/Create_and_edit_pages +/pt-PT/docs/MDN/Contribute/Howto/Criar_uma_conta_MDN /pt-PT/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account +/pt-PT/docs/MDN/Contribute/Howto/Etiqueta /pt-PT/docs/MDN/Contribute/Howto/Tag +/pt-PT/docs/MDN/Contribute/Howto/Marcar_paginas_JavaScript /pt-PT/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages +/pt-PT/docs/MDN/Contribute/Howto/Participar_testes_beta /pt-PT/docs/orphaned/MDN/Contribute/Howto/Be_a_beta_tester +/pt-PT/docs/MDN/Contribute/Howto/fazer_revisão_editorial /pt-PT/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review /pt-PT/docs/MDN/Contribute/Structures /pt-PT/docs/MDN/Structures -/pt-PT/docs/MDN/Contribute/Structures/API_references /pt-PT/docs/MDN/Structures/API_references -/pt-PT/docs/MDN/Contribute/Structures/API_references/Barras_laterais_de_referencia_da_API /pt-PT/docs/MDN/Structures/API_references/Barras_laterais_de_referencia_da_API -/pt-PT/docs/MDN/Contribute/Structures/API_references/O_que_e_que_uma_referencia_de_API_precisa /pt-PT/docs/MDN/Structures/API_references/O_que_e_que_uma_referencia_de_API_precisa -/pt-PT/docs/MDN/Contribute/Structures/Exemplos_live /pt-PT/docs/MDN/Structures/Exemplos_live +/pt-PT/docs/MDN/Contribute/Structures/API_references /pt-PT/docs/orphaned/MDN/Structures/API_references +/pt-PT/docs/MDN/Contribute/Structures/API_references/Barras_laterais_de_referencia_da_API /pt-PT/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars +/pt-PT/docs/MDN/Contribute/Structures/API_references/O_que_e_que_uma_referencia_de_API_precisa /pt-PT/docs/orphaned/MDN/Structures/API_references/What_does_an_API_reference_need +/pt-PT/docs/MDN/Contribute/Structures/Exemplos_live /pt-PT/docs/MDN/Structures/Live_samples /pt-PT/docs/MDN/Contribute/Structures/Macros /pt-PT/docs/MDN/Structures/Macros /pt-PT/docs/MDN/Contribute/Tools /pt-PT/docs/MDN/Tools -/pt-PT/docs/MDN/Contribute/Tools/Edição_de_modelo /pt-PT/docs/MDN/Tools/Edição_de_modelo +/pt-PT/docs/MDN/Contribute/Tools/Edição_de_modelo /pt-PT/docs/orphaned/MDN/Tools/Template_editing /pt-PT/docs/MDN/Contribute/Tools/KumaScript /pt-PT/docs/MDN/Tools/KumaScript -/pt-PT/docs/MDN/Contribute/Tools/Vigiar_pagina /pt-PT/docs/MDN/Tools/Vigiar_pagina +/pt-PT/docs/MDN/Contribute/Tools/Vigiar_pagina /pt-PT/docs/orphaned/MDN/Tools/Page_watching /pt-PT/docs/MDN/Contribute/linhas_diretrizes /pt-PT/docs/MDN/Guidelines -/pt-PT/docs/MDN/Contribute/linhas_diretrizes/Convencoes_definicoes /pt-PT/docs/MDN/Guidelines/Convencoes_definicoes -/pt-PT/docs/MDN/Contribute/linhas_diretrizes/Guia_de_estilo_de_escrita /pt-PT/docs/MDN/Guidelines/Guia_de_estilo_de_escrita -/pt-PT/docs/MDN/Contribute/linhas_diretrizes/Isto_pertence_a_MDN /pt-PT/docs/MDN/Guidelines/Isto_pertence_a_MDN -/pt-PT/docs/MDN/Contribute/resolucao_de_problemas /pt-PT/docs/MDN/Troubleshooting +/pt-PT/docs/MDN/Contribute/linhas_diretrizes/Convencoes_definicoes /pt-PT/docs/MDN/Guidelines/Conventions_definitions +/pt-PT/docs/MDN/Contribute/linhas_diretrizes/Guia_de_estilo_de_escrita /pt-PT/docs/MDN/Guidelines/Writing_style_guide +/pt-PT/docs/MDN/Contribute/linhas_diretrizes/Isto_pertence_a_MDN /pt-PT/docs/MDN/Guidelines/Does_this_belong_on_MDN +/pt-PT/docs/MDN/Contribute/resolucao_de_problemas /pt-PT/docs/orphaned/MDN/Troubleshooting +/pt-PT/docs/MDN/Editor /pt-PT/docs/orphaned/MDN/Editor +/pt-PT/docs/MDN/Editor/Basicos /pt-PT/docs/orphaned/MDN/Editor/Basics +/pt-PT/docs/MDN/Guidelines/Convencoes_definicoes /pt-PT/docs/MDN/Guidelines/Conventions_definitions +/pt-PT/docs/MDN/Guidelines/Guia_de_estilo_de_escrita /pt-PT/docs/MDN/Guidelines/Writing_style_guide +/pt-PT/docs/MDN/Guidelines/Isto_pertence_a_MDN /pt-PT/docs/MDN/Guidelines/Does_this_belong_on_MDN /pt-PT/docs/MDN/Intrudução /pt-PT/docs/MDN/Contribute/Getting_started +/pt-PT/docs/MDN/Kuma /pt-PT/docs/MDN/Yari /pt-PT/docs/MDN/Opiniao /pt-PT/docs/MDN/Contribute/Feedback +/pt-PT/docs/MDN/Sobre /pt-PT/docs/MDN/About +/pt-PT/docs/MDN/Structures/API_references /pt-PT/docs/orphaned/MDN/Structures/API_references +/pt-PT/docs/MDN/Structures/API_references/Barras_laterais_de_referencia_da_API /pt-PT/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars +/pt-PT/docs/MDN/Structures/API_references/O_que_e_que_uma_referencia_de_API_precisa /pt-PT/docs/orphaned/MDN/Structures/API_references/What_does_an_API_reference_need +/pt-PT/docs/MDN/Structures/Exemplos_live /pt-PT/docs/MDN/Structures/Live_samples +/pt-PT/docs/MDN/Tools/Edição_de_modelo /pt-PT/docs/orphaned/MDN/Tools/Template_editing +/pt-PT/docs/MDN/Tools/Vigiar_pagina /pt-PT/docs/orphaned/MDN/Tools/Page_watching +/pt-PT/docs/MDN/Troubleshooting /pt-PT/docs/orphaned/MDN/Troubleshooting +/pt-PT/docs/MDN_at_ten /pt-PT/docs/MDN/At_ten +/pt-PT/docs/MDN_at_ten/Contribuir_para_MDN /pt-PT/docs/conflicting/MDN/Contribute +/pt-PT/docs/MDN_at_ten/Historia_da_MDN /pt-PT/docs/MDN/At_ten/History_of_MDN +/pt-PT/docs/Manipuladores_de_protocolo_web /pt-PT/docs/orphaned/Manipuladores_de_protocolo_web +/pt-PT/docs/Melhorias_do_Gerenciador_de_Downloads_no_Firefox_3 /pt-PT/docs/orphaned/Melhorias_do_Gerenciador_de_Downloads_no_Firefox_3 +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/API/Armazenamento /pt-PT/docs/Mozilla/Add-ons/WebExtensions/API/storage +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels /pt-PT/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/A_sua_primeira_extensao /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/A_sua_segunda_extensao /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_extensao /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/As_melhores_praticas_de_experiencia_do_utilizador /pt-PT/docs/orphaned/Mozilla/Add-ons/WebExtensions/User_experience_best_practices +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Conversao_de_uma_extensao_legada_do_firefox /pt-PT/docs/orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/E_a_seguir /pt-PT/docs/Mozilla/Add-ons/WebExtensions/What_next_ +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Exemplos_extensoes /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Examples +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/ExtennsoesWeb_e_a_id_do_extra /pt-PT/docs/orphaned/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Extensão_das_ferramentas_de_desenvolvimento /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Instalacao_temporaria_no_Firefox /pt-PT/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Interceptar_Pedidos_HTTP /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/O_que_sao_WebExtensions /pt-PT/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Primeiros_passos_com_web-ext /pt-PT/docs/orphaned/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Publicar_a_sua_extensao /pt-PT/docs/orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Scripts_Conteudo /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Content_scripts +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Suporte_navegador_APIs_JavaScript /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/Trasnsferir_extensao_Google_Chrome /pt-PT/docs/orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/dubla_padrões /pt-PT/docs/Mozilla/Add-ons/WebExtensions/Match_patterns +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Acoes_pagina /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Ação_navegador /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Barras_laterais /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Estilos_de_navegador /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Itens_do_menu_de_contexto /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Notificacoes /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Omnibox /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Options_pages /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Paginas_de_extensão /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Popups /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/interface_do_utilizador/devtools_panels /pt-PT/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels /pt-PT/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications /pt-PT/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings +/pt-PT/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icones /pt-PT/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons +/pt-PT/docs/Mudanças_no_Gecko_1.9_que_afetam_websites /pt-PT/docs/Mozilla/Firefox/Releases/3/Site_compatibility /pt-PT/docs/Novidades_no_Javascript_1.8 /pt-PT/docs/Web/JavaScript/Novidades_no_JavaScript/Novidades_no_Javascript_1.8 +/pt-PT/docs/O_DOM_e_o_JavaScript /pt-PT/docs/orphaned/O_DOM_e_o_JavaScript +/pt-PT/docs/Plugins/Ativacao_de_Flash:_comparacao_de_navegador /pt-PT/docs/orphaned/Plugins/Flash_Activation:_Browser_Comparison +/pt-PT/docs/Plugins/Flash_para_HTML5 /pt-PT/docs/Plugins/Flash_to_HTML5 /pt-PT/docs/Página_principal /pt-PT/docs/Web -/pt-PT/docs/Referência_CSS /pt-PT/docs/Web/CSS/Referência_CSS -/pt-PT/docs/Referência_do_DOM_Gecko:Prefácio /pt-PT/docs/Referência_do_DOM_Gecko/Prefácio +/pt-PT/docs/Referência_CSS /pt-PT/docs/Web/CSS/Reference +/pt-PT/docs/Referência_JSDBGAPI /pt-PT/docs/orphaned/Referência_JSDBGAPI +/pt-PT/docs/Referência_do_DOM_Gecko/Prefácio /pt-PT/docs/orphaned/Referência_do_DOM_Gecko/Prefácio +/pt-PT/docs/Referência_do_DOM_Gecko:Prefácio /pt-PT/docs/orphaned/Referência_do_DOM_Gecko/Prefácio /pt-PT/docs/SVG /pt-PT/docs/Web/SVG /pt-PT/docs/SVG/Tutorial /pt-PT/docs/Web/SVG/Tutorial -/pt-PT/docs/Transformar_XML_com_XSLT:Para_leitura_adicional /pt-PT/docs/Transformar_XML_com_XSLT/Para_leitura_adicional -/pt-PT/docs/Tutorial_XUL:Adicionando_botões /pt-PT/docs/Tutorial_XUL/Adicionando_botões -/pt-PT/docs/Tutorial_XUL:Criando_uma_janela /pt-PT/docs/Tutorial_XUL/Criando_uma_janela -/pt-PT/docs/Tutorial_XUL:Introdução /pt-PT/docs/Tutorial_XUL/Introdução -/pt-PT/docs/Tutorial_do_Canvas:_Utilização_básica /pt-PT/docs/Tutorial_do_Canvas/Utilização_básica -/pt-PT/docs/Usando_o_Núcleo_DOM_Nível_1_do_W3C /pt-PT/docs/Using_the_W3C_DOM_Level_1_Core +/pt-PT/docs/Sobre_o_Document_Object_Model /pt-PT/docs/orphaned/Sobre_o_Document_Object_Model +/pt-PT/docs/Tinderbox /pt-PT/docs/orphaned/Tinderbox +/pt-PT/docs/Toolkit_API /pt-PT/docs/orphaned/Toolkit_API +/pt-PT/docs/Tools/Add-ons /pt-PT/docs/orphaned/Tools/Add-ons +/pt-PT/docs/Tools/Capturas_de_ecra /pt-PT/docs/Tools/Taking_screenshots +/pt-PT/docs/Tools/Configurações /pt-PT/docs/Tools/Settings +/pt-PT/docs/Tools/Consola_da_Web /pt-PT/docs/Tools/Web_Console +/pt-PT/docs/Tools/Consola_da_Web/Abertura_Consola_Web /pt-PT/docs/Tools/Web_Console/UI_Tour +/pt-PT/docs/Tools/Consola_da_Web/Ajuda /pt-PT/docs/Tools/Web_Console/Helpers +/pt-PT/docs/Tools/Consola_da_Web/Atalhos_teclado /pt-PT/docs/Tools/Web_Console/Keyboard_shortcuts +/pt-PT/docs/Tools/Consola_da_Web/Dividir_consola /pt-PT/docs/Tools/Web_Console/Split_console +/pt-PT/docs/Tools/Consola_da_Web/Mensagens_consola /pt-PT/docs/Tools/Web_Console/Console_messages +/pt-PT/docs/Tools/Consola_da_Web/O_interprete_da_linha_de_comandos /pt-PT/docs/Tools/Web_Console/The_command_line_interpreter +/pt-PT/docs/Tools/Consola_da_Web/Rich_output /pt-PT/docs/Tools/Web_Console/Rich_output +/pt-PT/docs/Tools/Debugger/Demonstracao_IU /pt-PT/docs/Tools/Debugger/UI_Tour +/pt-PT/docs/Tools/Debugger/How_to/Abrir_o_depurador /pt-PT/docs/Tools/Debugger/How_to/Open_the_debugger +/pt-PT/docs/Tools/Desempenho /pt-PT/docs/Tools/Performance +/pt-PT/docs/Tools/Desempenho/Arvore_de_Chamada /pt-PT/docs/Tools/Performance/Call_Tree +/pt-PT/docs/Tools/Desempenho/Cascata /pt-PT/docs/Tools/Performance/Waterfall +/pt-PT/docs/Tools/Desempenho/Como_fazer /pt-PT/docs/Tools/Performance/How_to +/pt-PT/docs/Tools/Desempenho/Frame_rate /pt-PT/docs/Tools/Performance/Frame_rate +/pt-PT/docs/Tools/Editor_de_audio_da_Web /pt-PT/docs/Tools/Web_Audio_Editor +/pt-PT/docs/Tools/Editor_de_estilo /pt-PT/docs/Tools/Style_Editor +/pt-PT/docs/Tools/Inspetor_de_armazenamento /pt-PT/docs/Tools/Storage_Inspector +/pt-PT/docs/Tools/Memoria /pt-PT/docs/Tools/Memory +/pt-PT/docs/Tools/Modo_de_Desenho_Adaptavel /pt-PT/docs/Tools/Responsive_Design_Mode +/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU /pt-PT/docs/Tools/Page_Inspector/UI_Tour +/pt-PT/docs/Tools/Page_Inspector/How_to/Abrir_o_inspetor /pt-PT/docs/Tools/Page_Inspector/How_to/Open_the_Inspector +/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_CSS /pt-PT/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS +/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_o_modelo_de_caixa /pt-PT/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +/pt-PT/docs/Tools/Page_Inspector/How_to/Inspecionar_e_selecionar_cores /pt-PT/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors +/pt-PT/docs/Tools/Page_Inspector/How_to/Reposicao_de_elementos_na_pagina /pt-PT/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +/pt-PT/docs/Tools/Page_Inspector/How_to/Trabalhar_com_animacoes /pt-PT/docs/Tools/Page_Inspector/How_to/Work_with_animations +/pt-PT/docs/Tools/Page_Inspector/How_to/Utilizar_a_API_do_Inspetor /pt-PT/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API +/pt-PT/docs/Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra /pt-PT/docs/Tools/Page_Inspector/How_to/Edit_fonts +/pt-PT/docs/Tools/Page_Inspector/atalhos_de_teclado /pt-PT/docs/Tools/Page_Inspector/Keyboard_shortcuts +/pt-PT/docs/Tools/Performance/Guia_da_IU /pt-PT/docs/Tools/Performance/UI_Tour +/pt-PT/docs/Tools/Remote_Debugging/Depuracao_remota_Thunderbird /pt-PT/docs/Tools/Remote_Debugging/Thunderbird +/pt-PT/docs/Tools/atalhos_de_teclado /pt-PT/docs/Tools/Keyboard_shortcuts +/pt-PT/docs/Transformar_XML_com_XSLT /pt-PT/docs/orphaned/Transformar_XML_com_XSLT +/pt-PT/docs/Transformar_XML_com_XSLT/Para_leitura_adicional /pt-PT/docs/orphaned/Transformar_XML_com_XSLT/Para_leitura_adicional +/pt-PT/docs/Transformar_XML_com_XSLT:Para_leitura_adicional /pt-PT/docs/orphaned/Transformar_XML_com_XSLT/Para_leitura_adicional +/pt-PT/docs/Tutorial_XUL /pt-PT/docs/orphaned/Tutorial_XUL +/pt-PT/docs/Tutorial_XUL/Adicionando_botões /pt-PT/docs/orphaned/Tutorial_XUL/Adicionando_botões +/pt-PT/docs/Tutorial_XUL/Criando_uma_janela /pt-PT/docs/orphaned/Tutorial_XUL/Criando_uma_janela +/pt-PT/docs/Tutorial_XUL/Introdução /pt-PT/docs/orphaned/Tutorial_XUL/Introdução +/pt-PT/docs/Tutorial_XUL:Adicionando_botões /pt-PT/docs/orphaned/Tutorial_XUL/Adicionando_botões +/pt-PT/docs/Tutorial_XUL:Criando_uma_janela /pt-PT/docs/orphaned/Tutorial_XUL/Criando_uma_janela +/pt-PT/docs/Tutorial_XUL:Introdução /pt-PT/docs/orphaned/Tutorial_XUL/Introdução +/pt-PT/docs/Tutorial_do_Canvas /pt-PT/docs/orphaned/Tutorial_do_Canvas +/pt-PT/docs/Tutorial_do_Canvas/Formas_de_desenho /pt-PT/docs/orphaned/Tutorial_do_Canvas/Formas_de_desenho +/pt-PT/docs/Tutorial_do_Canvas/Utilização_básica /pt-PT/docs/orphaned/Tutorial_do_Canvas/Utilização_básica +/pt-PT/docs/Tutorial_do_Canvas:_Utilização_básica /pt-PT/docs/orphaned/Tutorial_do_Canvas/Utilização_básica +/pt-PT/docs/Um_pequeno_exemplo_usando_AJAX /pt-PT/docs/orphaned/Um_pequeno_exemplo_usando_AJAX +/pt-PT/docs/Usando_o_Núcleo_DOM_Nível_1_do_W3C /pt-PT/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +/pt-PT/docs/Usando_privilégios_expandidos_em_navegadores_Mozilla /pt-PT/docs/orphaned/Usando_privilégios_expandidos_em_navegadores_Mozilla +/pt-PT/docs/Usando_áudio_e_vídeo_no_Firefox /pt-PT/docs/orphaned/Usando_áudio_e_vídeo_no_Firefox +/pt-PT/docs/Using_the_W3C_DOM_Level_1_Core /pt-PT/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +/pt-PT/docs/Utilizando_meta_tags /pt-PT/docs/orphaned/Utilizando_meta_tags /pt-PT/docs/Utilização_CXX_no_código_da_Mozilla /pt-PT/docs/Mozilla/Utilização_CXX_no_código_da_Mozilla +/pt-PT/docs/Venkman /pt-PT/docs/orphaned/Venkman +/pt-PT/docs/Web/API/API_Autenticacao_Web /pt-PT/docs/Web/API/Web_Authentication_API +/pt-PT/docs/Web/API/API_Entradas_de_Diretoria_e_Ficheiro /pt-PT/docs/Web/API/File_and_Directory_Entries_API +/pt-PT/docs/Web/API/API_WebRTC /pt-PT/docs/Web/API/WebRTC_API +/pt-PT/docs/Web/API/API_WebRTC/Tirar_fotografias /pt-PT/docs/Web/API/WebRTC_API/Taking_still_photos +/pt-PT/docs/Web/API/API_armazenamento /pt-PT/docs/Web/API/Storage_API +/pt-PT/docs/Web/API/API_de_Armazenamento_da_Web /pt-PT/docs/conflicting/Web/API/Web_Storage_API +/pt-PT/docs/Web/API/API_de_canvas /pt-PT/docs/Web/API/Canvas_API +/pt-PT/docs/Web/API/API_de_canvas/Tutorial /pt-PT/docs/Web/API/Canvas_API/Tutorial +/pt-PT/docs/Web/API/API_do_Estado_da_Bateria /pt-PT/docs/Web/API/Battery_Status_API +/pt-PT/docs/Web/API/API_transmissoes_multimedia /pt-PT/docs/Web/API/Media_Streams_API +/pt-PT/docs/Web/API/Document.dir /pt-PT/docs/Web/API/Document/dir +/pt-PT/docs/Web/API/Eventos_de_Luz_Ambiente /pt-PT/docs/Web/API/Ambient_Light_Events +/pt-PT/docs/Web/API/Geolocation/Utilizacao_da_geolocalizacao /pt-PT/docs/Web/API/Geolocation_API +/pt-PT/docs/Web/API/Metadados /pt-PT/docs/Web/API/Metadata +/pt-PT/docs/Web/API/NavigatorOnLine/Eventos_online_e_offline /pt-PT/docs/Web/API/NavigatorOnLine/Online_and_offline_events +/pt-PT/docs/Web/API/Notifications_API/Utilizar_API_Notificações /pt-PT/docs/Web/API/Notifications_API/Using_the_Notifications_API +/pt-PT/docs/Web/API/Sistema_de_ficheiros /pt-PT/docs/Web/API/FileSystem +/pt-PT/docs/Web/API/WebGL_API/Constantes /pt-PT/docs/Web/API/WebGL_API/Constants +/pt-PT/docs/Web/API/WebGL_API/Dados /pt-PT/docs/Web/API/WebGL_API/Data +/pt-PT/docs/Web/API/WebGL_API/Tipos /pt-PT/docs/Web/API/WebGL_API/Types +/pt-PT/docs/Web/API/WebGL_API/Utilizar_Extensões /pt-PT/docs/Web/API/WebGL_API/Using_Extensions +/pt-PT/docs/Web/API/WebSockets_API/Escrever_aplicação_cliente_de_WebSocket /pt-PT/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications +/pt-PT/docs/Web/API/WebSockets_API/Escrever_servidores_de_WebSocket /pt-PT/docs/Web/API/WebSockets_API/Writing_WebSocket_servers +/pt-PT/docs/Web/API/WebSockets_API/Escrever_um_servidor_WebSocket_em_C /pt-PT/docs/Web/API/WebSockets_API/Writing_WebSocket_server +/pt-PT/docs/Web/API/WebSockets_API/Escrever_um_servidor_WebSocket_em_Java /pt-PT/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java +/pt-PT/docs/Web/API/Web_Audio_API/Utilizar_api_audio_web /pt-PT/docs/Web/API/Web_Audio_API/Using_Web_Audio_API +/pt-PT/docs/Web/API/Web_Workers_API/Utilizacao_de_web_workers /pt-PT/docs/Web/API/Web_Workers_API/Using_web_workers +/pt-PT/docs/Web/API/Window/barra_lateral /pt-PT/docs/Web/API/Window/sidebar +/pt-PT/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_role_status /pt-PT/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role +/pt-PT/docs/Web/Acessibilidade /pt-PT/docs/Web/Accessibility +/pt-PT/docs/Web/Acessibilidade/ARIA /pt-PT/docs/Web/Accessibility/ARIA /pt-PT/docs/Web/Apps/Progressiva /pt-PT/docs/Web/Progressive_web_apps -/pt-PT/docs/Web/Apps/Progressiva/Identificavel /pt-PT/docs/Web/Progressive_web_apps/Identificavel -/pt-PT/docs/Web/Apps/Progressiva/Responsivo /pt-PT/docs/Web/Progressive_web_apps/Responsivo -/pt-PT/docs/Web/Apps/Progressive/Seguro /pt-PT/docs/Web/Progressive_web_apps/Seguro +/pt-PT/docs/Web/Apps/Progressiva/Identificavel /pt-PT/docs/conflicting/Web/Progressive_web_apps +/pt-PT/docs/Web/Apps/Progressiva/Responsivo /pt-PT/docs/conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +/pt-PT/docs/Web/Apps/Progressive/Seguro /pt-PT/docs/conflicting/Web/Progressive_web_apps_c5ce9d8c3500409dbf6f879e4fe3cb8a +/pt-PT/docs/Web/CSS/:after /pt-PT/docs/Web/CSS/::after +/pt-PT/docs/Web/CSS/:before /pt-PT/docs/Web/CSS/::before +/pt-PT/docs/Web/CSS/CSS_Background_and_Borders /pt-PT/docs/Web/CSS/CSS_Backgrounds_and_Borders +/pt-PT/docs/Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo /pt-PT/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/pt-PT/docs/Web/CSS/CSS_Box_Model/Introducao_modelo_caixa_CSS /pt-PT/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model /pt-PT/docs/Web/CSS/CSS_Colors /en-US/docs/Web/CSS/CSS_Color -/pt-PT/docs/Web/CSS/Múltiplos_fundos /pt-PT/docs/Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo -/pt-PT/docs/Web/CSS/Múltiplos_planos_de_fundo /pt-PT/docs/Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo +/pt-PT/docs/Web/CSS/CSS_Colors/Ferramenta_selecao_cor /pt-PT/docs/Web/CSS/CSS_Colors/Color_picker_tool +/pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/alinhamento_de_itens_num_recipiente_flex /pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +/pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/casos_de_utilizacao_tipicos_do_flexbox /pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +/pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/ordenacao_dos_itens_flex /pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +/pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/relação_do_flexbox_com_outros_métodos_de_layout /pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +/pt-PT/docs/Web/CSS/CSS_Tipos /pt-PT/docs/Web/CSS/CSS_Types +/pt-PT/docs/Web/CSS/Como_começar /pt-PT/docs/Learn/CSS/First_steps +/pt-PT/docs/Web/CSS/Como_começar/CSS_legível /pt-PT/docs/Learn/CSS/First_steps/How_CSS_is_structured +/pt-PT/docs/Web/CSS/Como_começar/Caixas /pt-PT/docs/Learn/CSS/Building_blocks +/pt-PT/docs/Web/CSS/Como_começar/Cascata_e_herança /pt-PT/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/pt-PT/docs/Web/CSS/Como_começar/Como_o_CSS_trabalha /pt-PT/docs/Learn/CSS/First_steps/How_CSS_works +/pt-PT/docs/Web/CSS/Como_começar/Conteúdo /pt-PT/docs/Learn/CSS/Howto/Generated_content +/pt-PT/docs/Web/CSS/Como_começar/Cor /pt-PT/docs/Learn/CSS/Building_blocks/Values_and_units +/pt-PT/docs/Web/CSS/Como_começar/Disposição /pt-PT/docs/Learn/CSS/CSS_layout +/pt-PT/docs/Web/CSS/Como_começar/Estilos_de_texto /pt-PT/docs/Learn/CSS/Styling_text/Fundamentals +/pt-PT/docs/Web/CSS/Como_começar/Gráficos_SVG /pt-PT/docs/Web/SVG/Tutorial/SVG_and_CSS +/pt-PT/docs/Web/CSS/Como_começar/JavaScript /pt-PT/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/pt-PT/docs/Web/CSS/Como_começar/Listas /pt-PT/docs/Learn/CSS/Styling_text/Styling_lists +/pt-PT/docs/Web/CSS/Como_começar/Mídia /pt-PT/docs/Web/Progressive_web_apps/Responsive/Media_types +/pt-PT/docs/Web/CSS/Como_começar/O_que_é_CSS /pt-PT/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/pt-PT/docs/Web/CSS/Como_começar/O_que_é_CSS? /pt-PT/docs/orphaned/Web/CSS/Como_começar/O_que_é_CSS? +/pt-PT/docs/Web/CSS/Como_começar/Porque_usar_CSS /pt-PT/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_0767812f50daab83155d62da97c6e460 +/pt-PT/docs/Web/CSS/Como_começar/Seletores /pt-PT/docs/Learn/CSS/Building_blocks/Selectors +/pt-PT/docs/Web/CSS/Como_começar/Tabelas /pt-PT/docs/Learn/CSS/Building_blocks/Styling_tables +/pt-PT/docs/Web/CSS/Consulta_de_mídia /pt-PT/docs/Web/CSS/Media_Queries/Using_media_queries +/pt-PT/docs/Web/CSS/Consultas_de_media /pt-PT/docs/Web/CSS/Media_Queries +/pt-PT/docs/Web/CSS/Folhas_de_estilo_alternativas /pt-PT/docs/Web/CSS/Alternative_style_sheets +/pt-PT/docs/Web/CSS/Média_paginada /pt-PT/docs/Web/CSS/Paged_Media +/pt-PT/docs/Web/CSS/Múltiplos_fundos /pt-PT/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/pt-PT/docs/Web/CSS/Múltiplos_planos_de_fundo /pt-PT/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/pt-PT/docs/Web/CSS/Pseudoclasses /pt-PT/docs/Web/CSS/Pseudo-classes +/pt-PT/docs/Web/CSS/Pseudoelementos /pt-PT/docs/Web/CSS/Pseudo-elements +/pt-PT/docs/Web/CSS/Referência_CSS /pt-PT/docs/Web/CSS/Reference +/pt-PT/docs/Web/CSS/Usando_transformações_CSS /pt-PT/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms +/pt-PT/docs/Web/CSS/grid-gap /pt-PT/docs/Web/CSS/gap +/pt-PT/docs/Web/CSS/layout_de_grelha_css /pt-PT/docs/Web/CSS/CSS_Grid_Layout +/pt-PT/docs/Web/Componentes_Web /pt-PT/docs/Web/Web_Components +/pt-PT/docs/Web/Eventos /pt-PT/docs/Web/Events /pt-PT/docs/Web/Eventos/visibilitychange /pt-PT/docs/Web/API/Document/visibilitychange_event +/pt-PT/docs/Web/Guide/AJAX/Como_começar /pt-PT/docs/Web/Guide/AJAX/Getting_Started +/pt-PT/docs/Web/Guide/AJAX/Comunidade /pt-PT/docs/Web/Guide/AJAX/Community /pt-PT/docs/Web/Guide/CSS /pt-PT/docs/Learn/CSS +/pt-PT/docs/Web/Guide/Eventos /pt-PT/docs/Web/Guide/Events +/pt-PT/docs/Web/Guide/Gráficos /pt-PT/docs/Web/Guide/Graphics /pt-PT/docs/Web/Guide/HTML /pt-PT/docs/Learn/HTML -/pt-PT/docs/Web/Guide/HTML/Introduction /pt-PT/docs/Learn/HTML/Introducao_ao_HTML -/pt-PT/docs/Web/HTML/Aplicar_cor__elementos_HTML_utilizando_CSS /pt-PT/docs/Web/HTML/Aplicar_cor_elementos_HTML_utilizando_CSS -/pt-PT/docs/Web/HTML/Element /pt-PT/docs/Web/HTML/Elemento -/pt-PT/docs/Web/HTML/Element/Audio /pt-PT/docs/Web/HTML/Elemento/Audio -/pt-PT/docs/Web/HTML/Element/figure /pt-PT/docs/HTMLToDelete/Element/figure -/pt-PT/docs/Web/HTML/Element/progress /pt-PT/docs/Web/HTML/Elemento/progress +/pt-PT/docs/Web/Guide/HTML/Categorias_de_conteudo /pt-PT/docs/Web/Guide/HTML/Content_categories +/pt-PT/docs/Web/Guide/HTML/Introduction /pt-PT/docs/Learn/HTML/Introduction_to_HTML +/pt-PT/docs/Web/Guide/HTML/Utilizar_estruturas_e_seccoes_de_HTML /pt-PT/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/pt-PT/docs/Web/HTML/Aplicar_cor__elementos_HTML_utilizando_CSS /pt-PT/docs/Web/HTML/Applying_color +/pt-PT/docs/Web/HTML/Aplicar_cor_elementos_HTML_utilizando_CSS /pt-PT/docs/Web/HTML/Applying_color +/pt-PT/docs/Web/HTML/Atributos /pt-PT/docs/Web/HTML/Attributes +/pt-PT/docs/Web/HTML/Atributos/rel /pt-PT/docs/Web/HTML/Attributes/rel +/pt-PT/docs/Web/HTML/Atributos_globais /pt-PT/docs/Web/HTML/Global_attributes +/pt-PT/docs/Web/HTML/CORS_settings_attributes /pt-PT/docs/Web/HTML/Attributes/crossorigin +/pt-PT/docs/Web/HTML/Elemento /pt-PT/docs/Web/HTML/Element +/pt-PT/docs/Web/HTML/Elemento/Audio /pt-PT/docs/Web/HTML/Element/audio +/pt-PT/docs/Web/HTML/Elemento/Video /pt-PT/docs/Web/HTML/Element/video +/pt-PT/docs/Web/HTML/Elemento/fieldset /pt-PT/docs/Web/HTML/Element/fieldset +/pt-PT/docs/Web/HTML/Elemento/figcaption /pt-PT/docs/Web/HTML/Element/figcaption +/pt-PT/docs/Web/HTML/Elemento/head /pt-PT/docs/Web/HTML/Element/head +/pt-PT/docs/Web/HTML/Elemento/nav /pt-PT/docs/Web/HTML/Element/nav +/pt-PT/docs/Web/HTML/Elemento/progress /pt-PT/docs/Web/HTML/Element/progress +/pt-PT/docs/Web/HTML/HTML5 /pt-PT/docs/Web/Guide/HTML/HTML5 +/pt-PT/docs/Web/HTML/HTML5/Forms_no_HTML5 /pt-PT/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/pt-PT/docs/Web/HTML/HTML5/Introdução_ao_HTML5 /pt-PT/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/pt-PT/docs/Web/HTML/HTML5/Parser_HTML5 /pt-PT/docs/Web/Guide/HTML/HTML5/HTML5_Parser +/pt-PT/docs/Web/HTML/Referencia /pt-PT/docs/Web/HTML/Reference +/pt-PT/docs/Web/HTML/Tipos_de_hiperligacao /pt-PT/docs/Web/HTML/Link_types +/pt-PT/docs/Web/HTML/Utilizar_a_cache_de_aplicacao /pt-PT/docs/Web/HTML/Using_the_application_cache /pt-PT/docs/Web/HTML_Linguagem_de_marcacao_de_hipertexto /pt-PT/docs/Web/HTML +/pt-PT/docs/Web/JavaScript/Estruturas_de_dados /pt-PT/docs/Web/JavaScript/Data_structures +/pt-PT/docs/Web/JavaScript/Gestao_Memoria /pt-PT/docs/Web/JavaScript/Memory_Management +/pt-PT/docs/Web/JavaScript/Guia /pt-PT/docs/Web/JavaScript/Guide +/pt-PT/docs/Web/JavaScript/Guia/Detalhes_do_modelo_de_objeto /pt-PT/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/pt-PT/docs/Web/JavaScript/Guia/Expressoes_e_Operadores /pt-PT/docs/orphaned/Web/JavaScript/Guia/Expressoes_e_Operadores +/pt-PT/docs/Web/JavaScript/Guia/Gramática_e_tipos /pt-PT/docs/Web/JavaScript/Guide/Grammar_and_types +/pt-PT/docs/Web/JavaScript/Guia/Introdução /pt-PT/docs/Web/JavaScript/Guide/Introduction +/pt-PT/docs/Web/JavaScript/Guia/Introdução_ao_JavaScript /pt-PT/docs/orphaned/Web/JavaScript/Guia/Introdução_ao_JavaScript +/pt-PT/docs/Web/JavaScript/Guia/Sobre /pt-PT/docs/orphaned/Web/JavaScript/Guia/Sobre +/pt-PT/docs/Web/JavaScript/Guia/Valores,_Variáveis_e_Literais /pt-PT/docs/orphaned/Web/JavaScript/Guia/Valores,_Variáveis_e_Literais /pt-PT/docs/Web/JavaScript/New_in_JavaScript /pt-PT/docs/Web/JavaScript/Novidades_no_JavaScript -/pt-PT/docs/XForms:Controles_Customizados /pt-PT/docs/XForms/Controles_Customizados -/pt-PT/docs/XPath:Eixos /pt-PT/docs/XPath/Eixos -/pt-PT/docs/XPath:Funções /pt-PT/docs/XPath/Funções +/pt-PT/docs/Web/JavaScript/O_que_é_o_JavaScript /pt-PT/docs/orphaned/Web/JavaScript/O_que_é_o_JavaScript +/pt-PT/docs/Web/JavaScript/Reference/Errors/declaração_função_sem_nome /pt-PT/docs/Web/JavaScript/Reference/Errors/Unnamed_function_statement +/pt-PT/docs/Web/JavaScript/Reference/Extratos_e_declarações /pt-PT/docs/Web/JavaScript/Reference/Statements +/pt-PT/docs/Web/JavaScript/Reference/Extratos_e_declarações/bloco /pt-PT/docs/Web/JavaScript/Reference/Statements/block +/pt-PT/docs/Web/JavaScript/Reference/Extratos_e_declarações/for /pt-PT/docs/Web/JavaScript/Reference/Statements/for +/pt-PT/docs/Web/JavaScript/Reference/Extratos_e_declarações/return /pt-PT/docs/Web/JavaScript/Reference/Statements/return +/pt-PT/docs/Web/JavaScript/Reference/Extratos_e_declarações/throw /pt-PT/docs/Web/JavaScript/Reference/Statements/throw +/pt-PT/docs/Web/JavaScript/Reference/Funcionalidades_obsoletas /pt-PT/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/pt-PT/docs/Web/JavaScript/Reference/Funcoes /pt-PT/docs/Web/JavaScript/Reference/Functions +/pt-PT/docs/Web/JavaScript/Reference/Funcoes/Funcoes_seta /pt-PT/docs/Web/JavaScript/Reference/Functions/Arrow_functions +/pt-PT/docs/Web/JavaScript/Reference/Funcoes/arguments /pt-PT/docs/Web/JavaScript/Reference/Functions/arguments +/pt-PT/docs/Web/JavaScript/Reference/Funcoes/parametros_rest /pt-PT/docs/Web/JavaScript/Reference/Functions/rest_parameters +/pt-PT/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype /pt-PT/docs/orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +/pt-PT/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /pt-PT/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number +/pt-PT/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /pt-PT/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object +/pt-PT/docs/Web/JavaScript/Reference/Operadores /pt-PT/docs/Web/JavaScript/Reference/Operators +/pt-PT/docs/Web/JavaScript/Reference/Operadores/Operador_virgula /pt-PT/docs/Web/JavaScript/Reference/Operators/Comma_Operator +/pt-PT/docs/Web/JavaScript/Reference/Operadores/Precedencia_operador /pt-PT/docs/Web/JavaScript/Reference/Operators/Operator_Precedence +/pt-PT/docs/Web/JavaScript/Reference/Operadores/função /pt-PT/docs/Web/JavaScript/Reference/Operators/function +/pt-PT/docs/Web/JavaScript/Reference/Sobre /pt-PT/docs/Web/JavaScript/Reference/About +/pt-PT/docs/Web/MathML/Attribute/Valores /pt-PT/docs/Web/MathML/Attribute/Values +/pt-PT/docs/Web/MathML/Examples/Derivar_a_Formula_Resolvente /pt-PT/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula +/pt-PT/docs/Web/MathML/Examples/MathML_teorema_de_Pitagoras /pt-PT/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem +/pt-PT/docs/Web/Progressive_web_apps/Guia_de_programacao /pt-PT/docs/Web/Progressive_web_apps/Developer_guide +/pt-PT/docs/Web/Progressive_web_apps/Identificavel /pt-PT/docs/conflicting/Web/Progressive_web_apps +/pt-PT/docs/Web/Progressive_web_apps/Responsivo /pt-PT/docs/conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +/pt-PT/docs/Web/Progressive_web_apps/Responsivo/Elementos_base_desenho_adaptavel /pt-PT/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +/pt-PT/docs/Web/Progressive_web_apps/Seguro /pt-PT/docs/conflicting/Web/Progressive_web_apps_c5ce9d8c3500409dbf6f879e4fe3cb8a +/pt-PT/docs/Web/SVG/Aplicar_efeitos_SVG_conteudo_HTML /pt-PT/docs/Web/SVG/Applying_SVG_effects_to_HTML_content +/pt-PT/docs/Web/SVG/Namespaces_Crash_Course/Exemplo /pt-PT/docs/Web/SVG/Namespaces_Crash_Course/Example +/pt-PT/docs/Web/SVG/SVG_animacao_com_SMIL /pt-PT/docs/Web/SVG/SVG_animation_with_SMIL +/pt-PT/docs/Web/SVG/Tutorial/Introducao /pt-PT/docs/Web/SVG/Tutorial/Introduction +/pt-PT/docs/Web/SVG/Tutorial/SVG_na_Introducao_HTML /pt-PT/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction +/pt-PT/docs/Web/Security/Conteudo_misto /pt-PT/docs/Web/Security/Mixed_content +/pt-PT/docs/Web/Security/Mixed_content/Como_corrigir_um_site_da_Web_com_conteudo_misto_bloqueado /pt-PT/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content +/pt-PT/docs/Web/Seguranca /pt-PT/docs/Web/Security +/pt-PT/docs/Web/Seguranca/Palavras-passe_inseguras /pt-PT/docs/Web/Security/Insecure_passwords +/pt-PT/docs/Web/Seguranca/Same-origin_policy /pt-PT/docs/Web/Security/Same-origin_policy +/pt-PT/docs/Web/Tutoriais /pt-PT/docs/Web/Tutorials +/pt-PT/docs/Web/WebAPI /pt-PT/docs/conflicting/Web/API +/pt-PT/docs/Web/XML/Introducao_a_XML /pt-PT/docs/Web/XML/XML_introduction +/pt-PT/docs/Web/XSLT/Comunidade /pt-PT/docs/orphaned/Web/XSLT/Comunidade +/pt-PT/docs/Web/XSLT/Elementos /pt-PT/docs/orphaned/Web/XSLT/Elementos +/pt-PT/docs/WebAssembly/Utilizar_API_JavaScript_WebAssembly /pt-PT/docs/WebAssembly/Using_the_JavaScript_API +/pt-PT/docs/XForms /pt-PT/docs/orphaned/XForms +/pt-PT/docs/XForms/Controles_Customizados /pt-PT/docs/orphaned/XForms/Controles_Customizados +/pt-PT/docs/XForms:Controles_Customizados /pt-PT/docs/orphaned/XForms/Controles_Customizados +/pt-PT/docs/XForms_especiais_para_Mozilla /pt-PT/docs/orphaned/XForms_especiais_para_Mozilla +/pt-PT/docs/XHTML /pt-PT/docs/Glossary/XHTML +/pt-PT/docs/XMLHttpRequest /pt-PT/docs/conflicting/Web/API/XMLHttpRequest +/pt-PT/docs/XML_no_Mozilla /pt-PT/docs/orphaned/XML_no_Mozilla +/pt-PT/docs/XPath/Eixos /pt-PT/docs/orphaned/XPath/Eixos +/pt-PT/docs/XPath/Funções /pt-PT/docs/orphaned/XPath/Funções +/pt-PT/docs/XPath:Eixos /pt-PT/docs/orphaned/XPath/Eixos +/pt-PT/docs/XPath:Funções /pt-PT/docs/orphaned/XPath/Funções /pt-PT/docs/XSLT /pt-PT/docs/Web/XSLT -/pt-PT/docs/XSLT/Comunidade /pt-PT/docs/Web/XSLT/Comunidade -/pt-PT/docs/XSLT/Elementos /pt-PT/docs/Web/XSLT/Elementos -/pt-PT/docs/XSLT:Comunidade /pt-PT/docs/Web/XSLT/Comunidade -/pt-PT/docs/XSLT:Elementos /pt-PT/docs/Web/XSLT/Elementos +/pt-PT/docs/XSLT/Comunidade /pt-PT/docs/orphaned/Web/XSLT/Comunidade +/pt-PT/docs/XSLT/Elementos /pt-PT/docs/orphaned/Web/XSLT/Elementos +/pt-PT/docs/XSLT:Comunidade /pt-PT/docs/orphaned/Web/XSLT/Comunidade +/pt-PT/docs/XSLT:Elementos /pt-PT/docs/orphaned/Web/XSLT/Elementos /pt-PT/docs/en /en-US/ -/pt-PT/docs/manipuladores_de_protocolos_baseados_na_web /pt-PT/docs/Manipuladores_de_protocolo_web +/pt-PT/docs/manipuladores_de_protocolos_baseados_na_web /pt-PT/docs/orphaned/Manipuladores_de_protocolo_web diff --git a/files/pt-pt/_wikihistory.json b/files/pt-pt/_wikihistory.json index 5fdcdf5741..fdcc9562e9 100644 --- a/files/pt-pt/_wikihistory.json +++ b/files/pt-pt/_wikihistory.json @@ -1,5192 +1,5192 @@ { - "Acentuação_para_conteúdos_carregados_por_AJAX": { - "modified": "2019-03-23T23:50:32.509Z", - "contributors": [ - "Leandro Mercês Xavier", - "JulioGreff", - "Micox", - "Douglas", - "Pfsergio1968" - ] - }, - "Atualizando_extensões_para_o_Firefox_3": { - "modified": "2019-12-13T20:33:32.517Z", + "Games/Tutorials/2D_breakout_game_Phaser": { + "modified": "2019-03-18T21:30:42.706Z", "contributors": [ "wbamberg", - "fscholz", - "SphinxKnight", - "Anonymous", - "teoli", - "Sheppy", - "Leandro Mercês Xavier", - "Verruckt" + "chrisdavidmills" ] }, - "Atualizando_extensões_para_o_Firefox_3.5": { - "modified": "2019-03-24T00:00:34.452Z", + "Glossary/API": { + "modified": "2019-03-23T22:32:07.433Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "Anonymous" ] }, - "Componentes": { - "modified": "2019-03-23T23:40:02.292Z", + "Learn": { + "modified": "2020-07-21T13:37:41.344Z", "contributors": [ + "joaonunomota", + "VITOR77777", + "PRigter", "SphinxKnight", - "GrandeBuzina" + "svarlamov", + "Anonymous", + "DoviMaj", + "joao-neves95", + "albertocastro", + "mrmorais", + "Jeremie" ] }, - "Configurando_um_servidor_de_atualização": { - "modified": "2019-01-16T14:51:09.548Z", + "Learn/CSS": { + "modified": "2020-07-16T22:25:36.875Z", "contributors": [ - "Leandro Mercês Xavier" + "joaonunomota", + "Anonymous" ] }, - "Construir_uma_Extensão": { - "modified": "2019-03-24T00:04:05.919Z", + "Learn/CSS/Howto": { + "modified": "2020-07-16T22:25:44.063Z", "contributors": [ - "teoli", - "fscholz", - "Rhuanbarros", - "Rsjuliao", - "Horyuu1", - "Leandro Mercês Xavier", - "Dudaott", - "Ecocam", - "Toyux", - "Verruckt", - "Luis Henrique Sousa", - "Mr.leal", - "Joker pt", - "Brunnolou", - "Bermonruf" + "Anonymous", + "chrisdavidmills" ] }, - "Controles_XUL": { - "modified": "2019-03-24T00:03:56.894Z", + "Learn/Front-end_web_developer": { + "modified": "2020-12-12T20:48:26.981Z", "contributors": [ - "fscholz", - "Luis Henrique Sousa", - "Verruckt" + "polonia", + "nuruldecarvalho", + "VITOR77777" ] }, - "Criando_plugins_OpenSearch_para_o_Firefox": { - "modified": "2019-03-24T00:00:54.849Z", + "Learn/HTML": { + "modified": "2020-07-16T22:22:22.937Z", "contributors": [ - "tregagnon", - "Verruckt", - "Rodrigoknascimento" + "Anonymous", + "RicardoLovatel", + "chrisdavidmills" ] }, - "Criando_um_visual_para_o_Firefox": { - "modified": "2019-03-23T23:51:38.630Z", + "Learn/HTML/Tables": { + "modified": "2020-07-16T22:25:15.032Z", "contributors": [ - "SphinxKnight", - "Milona87", - "Thestrongergod", - "Verruckt", - "Camaleaun" + "Anonymous", + "thetoni" ] }, - "Criar_uma_pele_para_o_Firefox": { - "modified": "2019-01-16T16:12:28.704Z", + "Learn/Index": { + "modified": "2020-07-16T22:33:40.763Z", "contributors": [ - "MarceloGhelman", - "Leandro Mercês Xavier", - "Amrlima" + "Anonymous" ] }, - "DHTML": { - "modified": "2019-01-16T16:23:46.538Z", + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:43.788Z", "contributors": [ - "SphinxKnight", - "RuiMaciel" + "Anonymous", + "Japroriple" ] }, - "DOM/DOM_Reference": { - "modified": "2019-03-23T23:25:55.220Z", + "Learn/Tools_and_testing": { + "modified": "2020-07-16T22:38:57.196Z", "contributors": [ "Anonymous", - "Brettz9" + "Navin77" ] }, - "DOM/Selection": { - "modified": "2019-03-24T00:02:03.808Z", + "MDN": { + "modified": "2020-02-19T18:55:27.012Z", "contributors": [ + "jswisher", "SphinxKnight", - "danielwebsistemas" - ] - }, - "DOM/Storage": { - "modified": "2019-03-24T00:00:51.877Z", - "contributors": [ - "khalid32", - "Verruckt", - "Leandro Mercês Xavier" - ] - }, - "DOM/document.alinkColor": { - "modified": "2019-03-24T00:04:44.971Z", - "contributors": [ - "teoli", - "italo" + "Anonymous", + "wbamberg", + "Jeremie", + "davempso", + "Sheppy" ] }, - "DOM/document.bgColor": { - "modified": "2019-03-24T00:04:41.203Z", + "MDN/Contribute": { + "modified": "2019-03-23T23:03:08.251Z", "contributors": [ - "teoli", - "italo" + "Anonymous", + "wbamberg", + "alispivak" ] }, - "DOM/document.cookie": { - "modified": "2019-03-19T14:20:57.798Z", + "MDN/Contribute/Feedback": { + "modified": "2020-09-30T17:52:26.093Z", "contributors": [ - "lucasrenod", + "chrisdavidmills", + "jswisher", "SphinxKnight", - "gadelhas", - "teoli", - "italo" - ] - }, - "DOM/document.getElementsByClassName": { - "modified": "2019-12-02T03:58:42.536Z", - "contributors": [ - "jestevespereira", - "khalid32", - "teoli", - "Leandro Mercês Xavier", - "Verruckt" - ] - }, - "DOM/element": { - "modified": "2020-10-15T21:16:02.585Z", - "contributors": [ "Anonymous", - "MauroBonucci", - "khalid32", - "Leandro Mercês Xavier", - "Davis.peixoto", - "Codigo13" + "wbamberg" ] }, - "DOM/element.appendChild": { - "modified": "2019-03-23T23:43:33.351Z", + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:15:31.197Z", "contributors": [ - "khalid32", - "teoli", - "Leandro Mercês Xavier", - "Wingedx" + "chrisdavidmills", + "joaonunomota", + "Anonymous", + "wbamberg", + "riagva", + "davempso" ] }, - "DOM/element.clientLeft": { - "modified": "2019-03-23T23:49:26.792Z", + "MDN/Contribute/Howto": { + "modified": "2019-01-16T21:51:27.704Z", "contributors": [ - "khalid32", - "teoli", - "Leandro Mercês Xavier", - "Verruckt" + "wbamberg", + "Anonymous", + "jswisher" ] }, - "DOM/element.clientTop": { - "modified": "2019-03-23T23:49:30.994Z", + "MDN/Guidelines": { + "modified": "2020-09-30T15:31:28.524Z", "contributors": [ - "AshfaqHossain", - "teoli", - "Leandro Mercês Xavier", - "Verruckt" + "chrisdavidmills", + "wbamberg", + "Anonymous" ] }, - "DOM/element.cloneNode": { - "modified": "2019-09-30T14:07:35.240Z", + "MDN/Structures": { + "modified": "2020-09-30T12:57:09.511Z", "contributors": [ - "semisse", - "SphinxKnight", - "guerreirogabriel", - "Diogok", - "Glauco.basilio", - "Codigo13", - "Leandro Mercês Xavier" + "chrisdavidmills", + "wbamberg", + "jswisher" ] }, - "DOM/element.insertBefore": { - "modified": "2019-03-23T23:46:00.401Z", + "MDN/Structures/Macros": { + "modified": "2020-09-30T12:57:10.153Z", "contributors": [ - "jsx", - "Codigo13" + "chrisdavidmills", + "wbamberg", + "Anonymous" ] }, - "DOM_Inspector": { - "modified": "2020-07-16T22:36:24.733Z", + "MDN/Tools": { + "modified": "2020-09-30T16:53:22.697Z", "contributors": [ + "chrisdavidmills", "wbamberg", - "SphinxKnight", - "Anonymous", - "teoli", - "Verruckt" + "jswisher" ] }, - "DOM_Inspector/Introduction_to_DOM_Inspector": { - "modified": "2020-07-16T22:36:26.057Z", + "MDN/Tools/KumaScript": { + "modified": "2020-09-30T16:53:22.999Z", "contributors": [ + "chrisdavidmills", "wbamberg", "Anonymous" ] }, - "Desenhando_texto_usando_canvas": { - "modified": "2019-03-23T23:59:25.399Z", + "Mozilla": { + "modified": "2019-03-24T00:17:35.290Z", "contributors": [ - "Wladimir_Palant", - "maicon", - "Verruckt", - "Leandro Mercês Xavier" + "Anonymous", + "billhiba", + "Beria" ] }, - "FAQ_Extensões": { - "modified": "2019-01-16T14:39:04.547Z", + "Mozilla/Add-ons": { + "modified": "2019-03-18T21:08:20.167Z", "contributors": [ - "fscholz", - "Luis Henrique Sousa", - "Toyux", - "Verruckt", - "Calebeaires" + "Anonymous", + "nportugal", + "Anomitro_Munshi" ] }, - "Firefox_1.5_para_Desenvolvedores": { - "modified": "2019-03-24T00:02:26.260Z", + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-03-18T20:49:08.711Z", "contributors": [ - "wbamberg", - "SphinxKnight", - "fscholz", - "Takenbot", - "Leandro Mercês Xavier" + "Anonymous", + "wbamberg" ] }, - "Firefox_2_para_desenvolvedores": { - "modified": "2019-03-24T00:02:35.537Z", + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2019-11-26T22:19:55.515Z", "contributors": [ "wbamberg", - "SphinxKnight", - "fscholz", - "Leandro Mercês Xavier", - "Kayalemao" + "Anonymous" ] }, - "Firefox_3.5_para_desenvolvedores": { - "modified": "2019-03-24T00:00:50.782Z", + "Mozilla/Add-ons/WebExtensions/API/browserAction": { + "modified": "2020-10-15T21:59:49.630Z", "contributors": [ "wbamberg", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "Anonymous" ] }, - "Firefox_3.6_para_desenvolvedores": { - "modified": "2019-12-13T20:33:40.975Z", + "Mozilla/Add-ons/WebExtensions/API/browsingData": { + "modified": "2020-10-15T22:14:48.933Z", "contributors": [ - "wbamberg", - "SphinxKnight", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "ExE-Boss" ] }, - "Firefox_3_para_desenvolvedores": { - "modified": "2019-01-16T14:32:08.166Z", + "Mozilla/Add-ons/WebExtensions/API/browsingData/removePluginData": { + "modified": "2020-10-15T22:14:40.836Z", "contributors": [ - "teoli", - "fscholz", - "Verruckt", - "Fernandopsilveira", - "Leandro Mercês Xavier" + "Anonymous" ] }, - "Firefox_4_para_desenvolvedores": { - "modified": "2019-11-21T00:43:18.363Z", + "Mozilla/Add-ons/WebExtensions/API/i18n": { + "modified": "2020-10-15T22:14:41.219Z", "contributors": [ - "wbamberg", - "Sebastianz", - "Prinz_Rana", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "Anonymous" ] }, - "Firefox_5_para_desenvolvedores": { - "modified": "2019-03-24T00:09:30.352Z", + "Mozilla/Add-ons/WebExtensions/API/pageAction": { + "modified": "2020-10-15T21:59:47.365Z", "contributors": [ "wbamberg", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Firefox_6_para_desenvolvedores": { - "modified": "2019-11-21T00:43:07.958Z", + "Mozilla/Add-ons/WebExtensions/API/sidebarAction": { + "modified": "2020-10-15T22:06:57.394Z", "contributors": [ "wbamberg", - "Anonymous", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Games/Tutorials/2D_breakout_game_Phaser": { - "modified": "2019-03-18T21:30:42.706Z", + "Mozilla/Add-ons/WebExtensions/Internationalization": { + "modified": "2019-03-18T20:56:21.219Z", "contributors": [ - "wbamberg", - "chrisdavidmills" + "Anonymous" ] }, - "Glossary/API": { - "modified": "2019-03-23T22:32:07.433Z", + "Mozilla/Add-ons/WebExtensions/Tips": { + "modified": "2019-03-18T21:01:44.598Z", "contributors": [ - "Anonymous" + "SphinxKnight" ] }, - "Glossário": { - "modified": "2020-10-07T11:13:28.151Z", + "Mozilla/Add-ons/WebExtensions/manifest.json": { + "modified": "2020-10-15T21:59:48.039Z", "contributors": [ - "peterbe", - "joaonunomota", - "SphinxKnight", - "Anonymous", + "Painatalman", "wbamberg" ] }, - "Glossário/404": { - "modified": "2020-06-25T18:13:41.660Z", + "Mozilla/Add-ons/WebExtensions/manifest.json/browser_action": { + "modified": "2020-10-15T21:59:47.236Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Glossário/502": { - "modified": "2020-06-25T18:28:46.890Z", + "Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings": { + "modified": "2020-10-15T22:07:31.462Z", "contributors": [ - "joaonunomota" + "wbamberg", + "ExE-Boss", + "Anonymous" ] }, - "Glossário/AJAX": { - "modified": "2020-06-09T08:11:59.760Z", + "Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page": { + "modified": "2020-10-15T21:59:47.989Z", "contributors": [ - "joaonunomota" + "wbamberg", + "Anonymous" ] }, - "Glossário/API": { - "modified": "2020-10-25T11:15:06.759Z", + "Mozilla/Developer_guide/Source_Code": { + "modified": "2019-03-18T21:45:30.638Z", "contributors": [ - "Zamalor", - "joaonunomota", - "Anonymous" + "ntim" ] }, - "Glossário/ARIA": { - "modified": "2020-06-11T20:31:33.120Z", + "Mozilla/Firefox": { + "modified": "2019-09-10T15:01:27.677Z", "contributors": [ - "joaonunomota" + "SphinxKnight", + "Anonymous", + "wbamberg", + "albertocastro", + "Sheppy" ] }, - "Glossário/Acessibilidade": { - "modified": "2019-03-18T21:47:01.702Z", + "Mozilla/Firefox/Releases": { + "modified": "2019-03-18T21:15:03.747Z", "contributors": [ - "Anonymous" + "Anonymous", + "wbamberg", + "Sheppy" ] }, - "Glossário/Argumento": { - "modified": "2019-03-18T21:17:57.812Z", + "Mozilla/Firefox/Releases/3": { + "modified": "2019-03-23T23:19:50.195Z", "contributors": [ - "Anonymous" + "wbamberg", + "ethertank" ] }, - "Glossário/Assinatura": { - "modified": "2019-03-23T22:12:54.952Z", + "Mozilla/Firefox/Releases/70": { + "modified": "2019-10-01T09:44:22.188Z", "contributors": [ "Anonymous" ] }, - "Glossário/BigInt": { - "modified": "2020-06-12T14:16:25.328Z", + "Tools": { + "modified": "2020-07-16T22:44:17.493Z", "contributors": [ - "joaonunomota" + "SphinxKnight", + "Anonymous", + "wbamberg", + "robert882", + "Leite", + "caobarbosa", + "Timmi" ] }, - "Glossário/CIA": { - "modified": "2020-06-11T20:33:04.482Z", + "Tools/Debugger": { + "modified": "2020-07-16T22:35:06.168Z", "contributors": [ - "joaonunomota" + "Anonymous", + "wbamberg" ] }, - "Glossário/CRLF": { - "modified": "2020-06-12T13:10:14.562Z", + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:08.333Z" + }, + "Tools/Debugger/How_to/Use_a_source_map": { + "modified": "2020-09-11T09:41:20.649Z", "contributors": [ - "joaonunomota" + "pedro-surf", + "Anonymous" ] }, - "Glossário/CRUD": { - "modified": "2020-06-11T20:38:17.457Z", + "Tools/Debugger/Source_map_errors": { + "modified": "2020-07-16T22:35:19.577Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Glossário/Cabeçalho_de_entidade": { - "modified": "2020-07-25T18:10:04.388Z", + "Tools/Network_Monitor": { + "modified": "2020-07-16T22:35:31.240Z", "contributors": [ - "joaonunomota" + "Anonymous", + "wbamberg" ] }, - "Glossário/Cache": { - "modified": "2020-06-07T12:38:40.205Z", + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:29.429Z", "contributors": [ - "joaonunomota" + "wbamberg", + "Anonymous", + "DevAsh" ] }, - "Glossário/Compilar": { - "modified": "2019-03-23T22:01:24.745Z", + "Tools/Page_Inspector/How_to": { + "modified": "2020-07-16T22:34:31.978Z", "contributors": [ - "Anonymous" + "wbamberg", + "Anonymous", + "sidgan" ] }, - "Glossário/Compressao_GZip": { - "modified": "2019-03-18T21:46:58.480Z", + "Tools/Page_Inspector/How_to/Visualize_transforms": { + "modified": "2020-07-16T22:34:39.722Z", "contributors": [ + "wbamberg", "Anonymous" ] }, - "Glossário/DOM": { - "modified": "2019-10-08T09:31:32.173Z", + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.988Z", "contributors": [ "Anonymous", - "GoToLoop" + "wbamberg", + "Joao_Silva27" ] }, - "Glossário/ECMA": { - "modified": "2019-03-23T22:30:19.413Z", + "Tools/Remote_Debugging/Debugging_Firefox_Desktop": { + "modified": "2020-07-16T22:35:41.262Z", "contributors": [ - "GoToLoop" + "Anonymous" ] }, - "Glossário/Eixo_principal": { - "modified": "2019-04-08T06:57:09.138Z", + "Tools/Tools_Toolbox": { + "modified": "2020-07-16T22:35:28.091Z", "contributors": [ - "diogo-panaca" + "wbamberg", + "Anonymous" ] }, - "Glossário/Eixo_transversal": { - "modified": "2019-04-08T06:58:12.600Z", + "Tools/about:debugging": { + "modified": "2020-07-16T22:36:33.106Z", "contributors": [ - "diogo-panaca" + "Anonymous", + "wbamberg" ] }, - "Glossário/Elemento": { - "modified": "2019-03-18T21:18:07.800Z", + "Web": { + "modified": "2020-05-03T13:08:13.142Z", "contributors": [ - "Anonymous" + "Anonymous", + "polonia", + "didi9999", + "joao-neves95", + "carlosrainhaaraujo", + "ethertank" ] }, - "Glossário/Etiqueta": { - "modified": "2019-03-23T22:01:42.150Z", + "Web/API": { + "modified": "2019-03-23T22:39:25.827Z", "contributors": [ - "Anonymous" + "Anonymous", + "teoli", + "carlosrainhaaraujo" ] }, - "Glossário/Extensoes_da_Web": { - "modified": "2019-03-18T21:37:24.767Z", + "Web/API/Animation": { + "modified": "2020-10-15T22:09:54.586Z", "contributors": [ "Anonymous" ] }, - "Glossário/Favicon": { - "modified": "2020-04-30T05:49:13.226Z", + "Web/API/AudioNode": { + "modified": "2019-03-23T22:12:47.243Z", "contributors": [ - "adilsonmandlate" + "trusktr" ] }, - "Glossário/Flexbox": { - "modified": "2019-04-08T06:38:43.855Z", + "Web/API/Blob": { + "modified": "2020-10-15T22:32:41.617Z", "contributors": [ - "diogo-panaca" + "Yayure" ] }, - "Glossário/GCS": { - "modified": "2020-06-13T09:32:48.386Z", + "Web/API/Blob/Blob": { + "modified": "2020-11-16T10:19:01.877Z", "contributors": [ "joaonunomota" ] }, - "Glossário/Git": { - "modified": "2020-06-13T09:39:03.707Z", + "Web/API/Blob/size": { + "modified": "2020-10-15T22:32:50.862Z", "contributors": [ "joaonunomota" ] }, - "Glossário/HTML": { - "modified": "2019-03-23T22:13:01.389Z", + "Web/API/Blob/type": { + "modified": "2020-10-15T22:33:10.637Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/Hipertexto": { - "modified": "2019-03-23T22:01:40.877Z", + "Web/API/Client": { + "modified": "2020-10-15T22:03:06.133Z", "contributors": [ "Anonymous" ] }, - "Glossário/IANA": { - "modified": "2020-06-07T13:01:45.679Z", + "Web/API/CloseEvent": { + "modified": "2020-10-15T22:32:54.165Z", "contributors": [ "joaonunomota" ] }, - "Glossário/ISP": { - "modified": "2020-07-16T14:02:41.646Z", + "Web/API/CloseEvent/CloseEvent": { + "modified": "2020-10-15T22:32:51.831Z", "contributors": [ "joaonunomota" ] }, - "Glossário/Idempotent": { - "modified": "2019-07-11T10:59:59.365Z", + "Web/API/DOMString": { + "modified": "2020-08-12T17:28:52.261Z", "contributors": [ - "FilipePintoReis" + "joaonunomota" ] }, - "Glossário/IndexedDB": { - "modified": "2019-03-23T22:30:22.618Z", + "Web/API/Document": { + "modified": "2019-07-02T18:26:33.145Z", "contributors": [ - "GoToLoop" + "Anonymous", + "chrisdavidmills" ] }, - "Glossário/Lazy_load": { - "modified": "2020-06-09T04:59:38.616Z", + "Web/API/Document/querySelector": { + "modified": "2020-10-15T22:32:00.428Z", "contributors": [ "joaonunomota" ] }, - "Glossário/Metadados": { - "modified": "2019-03-18T21:46:57.702Z", + "Web/API/Document/visibilitychange_event": { + "modified": "2019-04-08T07:39:14.855Z", "contributors": [ + "irenesmith", "Anonymous" ] }, - "Glossário/MitM": { - "modified": "2019-03-18T21:29:48.838Z", + "Web/API/File": { + "modified": "2020-10-15T22:32:24.351Z", "contributors": [ - "Anonymous" + "Yayure" ] }, - "Glossário/Modo_de_operação_de_cifra_de_bloco": { - "modified": "2020-07-19T20:41:55.171Z", + "Web/API/File/File": { + "modified": "2020-10-15T22:33:11.221Z", "contributors": [ "joaonunomota" ] }, - "Glossário/Motor": { - "modified": "2019-03-23T22:24:10.538Z", + "Web/API/File/fileName": { + "modified": "2020-08-08T18:37:05.171Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/Navegador": { - "modified": "2019-03-23T22:01:42.054Z", + "Web/API/File/fileSize": { + "modified": "2020-08-08T18:32:45.995Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/Node.js": { - "modified": "2019-03-23T22:30:21.428Z", + "Web/API/File/getAsBinary": { + "modified": "2020-08-11T04:16:46.870Z", "contributors": [ - "Anonymous", - "GoToLoop" + "joaonunomota" ] }, - "Glossário/OOP": { - "modified": "2019-03-18T21:47:01.837Z", + "Web/API/File/getAsDataURL": { + "modified": "2020-08-08T18:57:17.906Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/OTA": { - "modified": "2019-03-23T22:30:21.528Z", + "Web/API/File/getAsText": { + "modified": "2020-08-11T05:01:57.694Z", "contributors": [ - "GoToLoop" + "joaonunomota" ] }, - "Glossário/Objeto": { - "modified": "2019-03-18T21:46:57.221Z", + "Web/API/File/lastModified": { + "modified": "2020-10-17T08:26:52.375Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/Polyfill": { - "modified": "2019-03-23T22:04:04.730Z", + "Web/API/File/lastModifiedDate": { + "modified": "2020-10-15T22:32:46.653Z", "contributors": [ - "pedrodfcosta" + "joaonunomota" ] }, - "Glossário/Prototype-based_programming": { - "modified": "2019-03-18T21:47:01.974Z", + "Web/API/File/mozFullPath": { + "modified": "2020-08-08T18:43:12.882Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/Referencia_de_objeto": { - "modified": "2019-03-18T21:18:01.122Z", + "Web/API/File/name": { + "modified": "2020-10-15T22:32:23.452Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/Servidor": { - "modified": "2019-03-23T22:30:25.987Z", + "Web/API/File/type": { + "modified": "2020-10-15T22:32:40.925Z", "contributors": [ - "GoToLoop" + "joaonunomota" ] }, - "Glossário/UTF-8": { - "modified": "2019-03-18T20:40:41.143Z", + "Web/API/File/webkitRelativePath": { + "modified": "2020-11-17T19:01:45.948Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/Valor": { - "modified": "2019-03-18T21:18:07.651Z", + "Web/API/FileReader": { + "modified": "2019-03-18T21:16:40.698Z", "contributors": [ - "Anonymous" + "Sheppy" ] }, - "Glossário/Viewport": { - "modified": "2020-06-10T11:59:40.452Z", + "Web/API/FileReader/abort": { + "modified": "2020-10-15T22:32:42.433Z", "contributors": [ "joaonunomota" ] }, - "Glossário/Viewport_Visual": { - "modified": "2020-06-10T13:52:57.763Z", + "Web/API/FileReader/error": { + "modified": "2020-10-15T22:32:24.839Z", "contributors": [ "joaonunomota" ] }, - "Glossário/WHATWG": { - "modified": "2020-06-12T08:44:24.569Z", + "Web/API/FileReader/readAsArrayBuffer": { + "modified": "2020-10-15T22:33:15.086Z", "contributors": [ "joaonunomota" ] }, - "Glossário/WebRTC": { - "modified": "2020-06-07T12:24:38.989Z", + "Web/API/FileReader/readAsBinaryString": { + "modified": "2020-10-15T21:37:25.343Z", "contributors": [ - "joaonunomota" + "joaonunomota", + "DouglasValdo" ] }, - "Glossário/WebVTT": { - "modified": "2020-06-12T12:26:29.739Z", + "Web/API/FileReader/readAsDataURL": { + "modified": "2020-10-15T22:34:36.565Z", "contributors": [ "joaonunomota" ] }, - "Glossário/World_Wide_Web": { - "modified": "2019-03-18T21:46:52.018Z", + "Web/API/FileReader/readAsText": { + "modified": "2020-10-15T22:34:36.289Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/Wrapper": { - "modified": "2019-03-18T21:17:53.688Z", + "Web/API/FileReader/readyState": { + "modified": "2020-11-15T12:35:45.700Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/XML": { - "modified": "2019-03-23T22:01:48.146Z", + "Web/API/FileReader/result": { + "modified": "2020-10-15T22:33:14.048Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Glossário/booliano": { - "modified": "2019-03-18T21:45:55.769Z", + "Web/API/Geolocation": { + "modified": "2019-03-23T22:01:56.989Z", "contributors": [ "Anonymous" ] }, - "Guia_do_desenvolvedor": { - "modified": "2019-03-24T00:00:34.143Z", - "contributors": [ - "SphinxKnight", - "teoli", - "Leandro Mercês Xavier" - ] - }, - "HTMLToDelete/Element/figure": { - "modified": "2019-03-24T00:07:13.574Z", - "contributors": [ - "wbamberg", - "jwhitlock", - "teoli", - "f.sanxz" - ] - }, - "JavaScript_Shells": { - "modified": "2019-03-23T23:49:32.077Z", + "Web/API/MathMLElement": { + "modified": "2020-10-15T22:33:03.137Z", "contributors": [ - "SphinxKnight", - "Verruckt" + "joaonunomota" ] }, - "Java_em_Extensões_do_Firefox": { - "modified": "2019-03-23T23:44:51.954Z", + "Web/API/MediaDevices": { + "modified": "2019-03-23T22:01:16.705Z", "contributors": [ - "SphinxKnight", - "RuiMaciel" + "jpmedley" ] }, - "Javascript_orientado_a_objetos": { - "modified": "2019-03-24T00:11:38.222Z", + "Web/API/MessageEvent": { + "modified": "2020-10-15T22:32:51.894Z", "contributors": [ - "flowck", - "Leandro Mercês Xavier" + "joaonunomota" ] }, - "Jogos": { - "modified": "2019-09-09T15:34:18.541Z", + "Web/API/NavigatorOnLine": { + "modified": "2019-03-23T22:01:59.308Z", "contributors": [ - "SphinxKnight", - "Aschlla", - "wbamberg", - "rPetas", - "fscholz", - "Anonymous" + "chrisdavidmills" ] }, - "Jogos/Tutoriais": { - "modified": "2019-03-18T21:30:51.808Z", + "Web/API/Node": { + "modified": "2019-03-23T23:22:11.442Z", "contributors": [ - "wbamberg", - "Anonymous" + "khalid32", + "carlosrainhaaraujo" ] }, - "Learn": { - "modified": "2020-07-21T13:37:41.344Z", + "Web/API/Notifications_API": { + "modified": "2019-03-23T22:42:31.459Z", "contributors": [ - "joaonunomota", - "VITOR77777", - "PRigter", - "SphinxKnight", - "svarlamov", - "Anonymous", - "DoviMaj", - "joao-neves95", - "albertocastro", - "mrmorais", - "Jeremie" + "Sebastianz" ] }, - "Learn/Acessibilidade": { - "modified": "2020-07-21T16:29:40.277Z", + "Web/API/Page_Visibility_API": { + "modified": "2019-03-18T21:42:30.274Z", "contributors": [ - "joaonunomota", "Anonymous" ] }, - "Learn/CSS": { - "modified": "2020-07-16T22:25:36.875Z", + "Web/API/Push_API": { + "modified": "2019-03-18T21:38:04.203Z", "contributors": [ - "joaonunomota", "Anonymous" ] }, - "Learn/CSS/Estilo_de_texto": { - "modified": "2020-07-16T22:26:00.007Z", + "Web/API/Service_Worker_API": { + "modified": "2019-10-08T09:27:10.284Z", "contributors": [ "Anonymous" ] }, - "Learn/CSS/Howto": { - "modified": "2020-07-16T22:25:44.063Z", + "Web/API/Service_Worker_API/Using_Service_Workers": { + "modified": "2019-10-08T09:25:19.208Z", "contributors": [ - "Anonymous", - "chrisdavidmills" + "Anonymous" ] }, - "Learn/CSS/Howto/FAQ_de_CSS": { - "modified": "2020-07-16T22:25:45.869Z", + "Web/API/SharedWorker": { + "modified": "2020-10-15T21:59:02.760Z", "contributors": [ + "joaonunomota", "Anonymous" ] }, - "Learn/Comecar_com_a_Web": { - "modified": "2020-11-09T11:59:04.208Z", + "Web/API/URLSearchParams": { + "modified": "2019-10-16T11:18:10.261Z", "contributors": [ - "joaonunomota", - "Anonymous" + "NunoJSantos", + "goldyteam" ] }, - "Learn/Comecar_com_a_Web/A_web_e_os_padroes_da_web": { - "modified": "2020-08-15T18:38:33.155Z", + "Web/API/WebGLRenderingContext": { + "modified": "2020-10-15T21:59:21.576Z", "contributors": [ - "joaonunomota", "Anonymous" ] }, - "Learn/Comecar_com_a_Web/Apresentacao_do_meu_site": { - "modified": "2020-07-16T22:34:19.154Z", + "Web/API/WebGL_API": { + "modified": "2020-10-15T21:46:44.276Z", "contributors": [ - "joaonunomota", - "diogo-panaca", "Anonymous" ] }, - "Learn/Comecar_com_a_Web/CSS_basico": { - "modified": "2020-08-17T15:28:30.827Z", + "Web/API/WebSocket": { + "modified": "2020-10-15T22:32:53.586Z", "contributors": [ - "joaonunomota", - "diogo-panaca", - "Anonymous" + "joaonunomota" ] }, - "Learn/Comecar_com_a_Web/Como_funciona_a_Web": { - "modified": "2020-07-21T16:44:13.094Z", + "Web/API/WebSocket/WebSocket": { + "modified": "2020-10-15T22:33:03.555Z", "contributors": [ - "joaonunomota", - "gabodin", - "Anonymous" + "joaonunomota" ] }, - "Learn/Comecar_com_a_Web/Elementar_de_JavaScript": { - "modified": "2020-08-17T15:31:44.919Z", + "Web/API/WebSockets_API": { + "modified": "2020-10-15T22:32:45.764Z", "contributors": [ - "joaonunomota", - "diogo-panaca", - "Anonymous" + "joaonunomota" ] }, - "Learn/Comecar_com_a_Web/HTML_basicos": { - "modified": "2020-08-15T18:37:16.181Z", + "Web/API/Web_Audio_API": { + "modified": "2019-03-23T22:12:41.433Z", "contributors": [ - "joaonunomota", - "diogo-panaca", "Anonymous", - "mrsilvino" + "erikadoyle" ] }, - "Learn/Comecar_com_a_Web/Installing_basic_software": { - "modified": "2020-07-23T08:51:53.513Z", + "Web/API/Web_Workers_API": { + "modified": "2019-03-23T22:02:18.370Z", "contributors": [ - "joaonunomota", - "diogo-panaca", - "Jacgrillon", - "Anonymous" + "VsevolodGolovanov" ] }, - "Learn/Comecar_com_a_Web/Lidar_com_ficheiros": { - "modified": "2020-07-20T16:01:08.653Z", + "Web/API/Web_Workers_API/Functions_and_classes_available_to_workers": { + "modified": "2019-03-23T22:02:20.388Z", "contributors": [ - "joaonunomota", - "diogo-panaca", "Anonymous" ] }, - "Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web": { - "modified": "2020-08-17T15:33:14.323Z", + "Web/API/Window": { + "modified": "2019-03-23T22:01:06.730Z", "contributors": [ - "joaonunomota" + "Anonymous", + "goeffthomas" ] }, - "Learn/Front-end_web_developer": { - "modified": "2020-12-12T20:48:26.981Z", + "Web/API/Window/console": { + "modified": "2019-03-18T21:44:07.205Z", "contributors": [ - "polonia", - "nuruldecarvalho", - "VITOR77777" + "Anonymous" ] }, - "Learn/HTML": { - "modified": "2020-07-16T22:22:22.937Z", + "Web/API/Window/open": { + "modified": "2019-03-23T22:01:10.139Z", "contributors": [ - "Anonymous", - "RicardoLovatel", - "chrisdavidmills" + "SphinxKnight", + "Anonymous" ] }, - "Learn/HTML/Como": { - "modified": "2020-07-16T22:22:30.740Z", + "Web/API/Window/postMessage": { + "modified": "2019-06-04T14:57:56.992Z", "contributors": [ "Anonymous" ] }, - "Learn/HTML/Como/Adicionar_um_mapa_de_zona_clicavel_numa_imagem": { - "modified": "2020-07-16T22:22:43.567Z", + "Web/API/Worker": { + "modified": "2019-03-23T22:02:29.683Z", "contributors": [ "Anonymous" ] }, - "Learn/HTML/Introducao_ao_HTML": { - "modified": "2020-07-16T22:22:52.576Z", + "Web/API/XMLHttpRequest": { + "modified": "2020-10-15T21:59:27.066Z", "contributors": [ - "diogo-panaca", - "joaomc", + "fscholz", "Anonymous" ] }, - "Learn/HTML/Introducao_ao_HTML/Criar_hiperligacoes": { - "modified": "2020-07-16T22:23:46.700Z", + "Web/API/notification": { + "modified": "2019-03-23T22:51:36.861Z", "contributors": [ - "diogo-panaca" + "Anonymous", + "Japroriple" ] }, - "Learn/HTML/Introducao_ao_HTML/Depurar_HTML": { - "modified": "2020-07-16T22:24:15.706Z", + "Web/Accessibility/ARIA/ARIA_Techniques": { + "modified": "2020-09-18T21:14:54.007Z", "contributors": [ - "diogo-panaca" + "Wind1808" ] }, - "Learn/HTML/Introducao_ao_HTML/Estrutura_documento_website": { - "modified": "2020-07-16T22:24:08.727Z", + "Web/CSS": { + "modified": "2020-06-10T07:53:42.003Z", "contributors": [ - "diogo-panaca" + "joaonunomota", + "SphinxKnight", + "Anonymous", + "Fernando-SilvaBR", + "albertocastro", + "teoli", + "Verruckt", + "Leandro Mercês Xavier", + "Takenbot", + "RuiMaciel" ] }, - "Learn/HTML/Introducao_ao_HTML/Estruturar_pagina_de_conteudo": { - "modified": "2020-07-16T22:24:20.585Z", + "Web/CSS/@font-face": { + "modified": "2019-03-23T23:13:15.857Z", "contributors": [ - "diogo-panaca" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Learn/HTML/Introducao_ao_HTML/Formatacao_avancada_texto": { - "modified": "2020-07-16T22:23:57.791Z", + "Web/CSS/@import": { + "modified": "2019-03-23T23:47:07.977Z", "contributors": [ - "diogo-panaca" + "Anonymous", + "teoli", + "Verruckt", + "Luis Henrique Sousa" ] }, - "Learn/HTML/Introducao_ao_HTML/Iniciacao_HTML": { - "modified": "2020-07-16T22:23:06.412Z", + "Web/CSS/@media": { + "modified": "2020-04-25T11:58:21.640Z", "contributors": [ - "cmccarreiro", - "Anonymous" + "myspeleo", + "diogo-panaca", + "Anonymous", + "teoli", + "Verruckt", + "Luis Henrique Sousa" ] }, - "Learn/HTML/Introducao_ao_HTML/Os_metadados_de_head_em_HTML": { - "modified": "2020-07-16T22:23:23.598Z", + "Web/CSS/At-rule": { + "modified": "2019-03-23T22:24:56.828Z", "contributors": [ "Anonymous" ] }, - "Learn/HTML/Introducao_ao_HTML/demarcar_uma_carta": { - "modified": "2020-07-16T22:23:13.979Z", + "Web/CSS/CSS_Box_Model": { + "modified": "2019-03-23T22:12:41.880Z", "contributors": [ - "diogo-panaca" + "Sebastianz" ] }, - "Learn/HTML/Multimedia_and_embedding/Pagina_de_boas_vindas_da_Mozilla": { - "modified": "2020-07-16T22:25:08.049Z", + "Web/CSS/CSS_Columns": { + "modified": "2019-03-18T21:38:41.627Z", "contributors": [ - "diegobarcelar", - "Anonymous" + "mfluehr" ] }, - "Learn/HTML/Multimedia_e_integracao": { - "modified": "2020-07-16T22:24:28.825Z", + "Web/CSS/CSS_Flexible_Box_Layout": { + "modified": "2019-03-18T21:44:02.737Z", "contributors": [ - "Anonymous", - "chrisdavidmills" + "rachelandrew" ] }, - "Learn/HTML/Multimedia_e_integracao/Conteudo_de_audio_e_vídeo": { - "modified": "2020-07-16T22:24:56.333Z", + "Web/CSS/Replaced_element": { + "modified": "2019-03-23T22:32:04.311Z", + "contributors": [ + "andrekutianski", + "josketres" + ] + }, + "Web/CSS/Shorthand_properties": { + "modified": "2019-03-18T21:44:05.610Z", "contributors": [ "Anonymous" ] }, - "Learn/HTML/Tables": { - "modified": "2020-07-16T22:25:15.032Z", + "Web/CSS/background": { + "modified": "2019-03-23T23:46:35.449Z", "contributors": [ - "Anonymous", - "thetoni" + "SphinxKnight", + "teoli", + "Verruckt", + "Luis Henrique Sousa" ] }, - "Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas": { - "modified": "2020-07-16T22:25:30.543Z", + "Web/CSS/background-attachment": { + "modified": "2019-03-23T23:12:53.495Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "teoli", + "Verruckt" ] }, - "Learn/HTML/Tables/Avancada": { - "modified": "2020-07-16T22:25:27.234Z", + "Web/CSS/background-color": { + "modified": "2019-03-23T22:16:20.029Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "teoli", + "Verruckt", + "ethertank" ] }, - "Learn/HTML/Tables/Basicos": { - "modified": "2020-07-16T22:25:22.105Z", + "Web/CSS/background-image": { + "modified": "2019-03-23T23:47:07.090Z", "contributors": [ - "diogo-panaca", - "Anonymous" + "SphinxKnight", + "teoli", + "Verruckt" ] }, - "Learn/Index": { - "modified": "2020-07-16T22:33:40.763Z", + "Web/CSS/background-position": { + "modified": "2019-03-23T23:47:05.241Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" + ] + }, + "Web/CSS/background-repeat": { + "modified": "2019-03-18T21:15:14.751Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Verruckt" + ] + }, + "Web/CSS/border": { + "modified": "2019-01-16T15:59:54.146Z", + "contributors": [ + "teoli", + "Verruckt", + "Luis Henrique Sousa" + ] + }, + "Web/CSS/border-bottom": { + "modified": "2019-03-23T23:47:10.248Z", + "contributors": [ + "wbamberg", + "teoli", + "Verruckt" ] }, - "Learn/JavaScript": { - "modified": "2020-07-16T22:29:43.788Z", + "Web/CSS/border-bottom-color": { + "modified": "2019-03-23T23:47:06.644Z", "contributors": [ - "Anonymous", - "Japroriple" + "wbamberg", + "teoli", + "Verruckt" ] }, - "Learn/JavaScript/Primeiros_passos": { - "modified": "2020-07-16T22:29:54.837Z", + "Web/CSS/border-bottom-style": { + "modified": "2019-03-23T23:47:07.572Z", "contributors": [ - "Anonymous", - "Elllenn" + "wbamberg", + "teoli", + "Verruckt" ] }, - "Learn/No-servidor": { - "modified": "2020-07-16T22:36:01.831Z", + "Web/CSS/border-bottom-width": { + "modified": "2019-03-23T23:47:10.824Z", "contributors": [ - "Anonymous", - "joao-neves95" + "wbamberg", + "teoli", + "Verruckt" ] }, - "Learn/No-servidor/Django": { - "modified": "2020-07-16T22:36:35.255Z", + "Web/CSS/border-collapse": { + "modified": "2019-03-23T23:47:06.488Z", "contributors": [ - "Anonymous" + "wbamberg", + "teoli", + "Verruckt" ] }, - "Learn/No-servidor/Express_Nodejs": { - "modified": "2020-07-16T22:37:54.969Z", + "Web/CSS/border-color": { + "modified": "2019-03-24T00:02:05.127Z", "contributors": [ - "Anonymous", - "joao-neves95" + "wbamberg", + "teoli", + "gerson23", + "Verruckt" ] }, - "Learn/No-servidor/Express_Nodejs/Configurar_um_meio_de_desenvolvimento_Node": { - "modified": "2020-07-16T22:38:00.728Z", + "Web/CSS/border-left": { + "modified": "2019-01-16T15:59:39.346Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/No-servidor/Express_Nodejs/Introduction": { - "modified": "2020-07-16T22:38:13.187Z", + "Web/CSS/border-left-color": { + "modified": "2019-01-16T19:20:48.785Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/No-servidor/Servidor_node_sem_framework": { - "modified": "2020-07-16T22:36:06.037Z", + "Web/CSS/border-left-style": { + "modified": "2019-01-16T15:59:50.769Z", "contributors": [ - "Anonymous", - "joao-neves95" + "teoli", + "Verruckt" ] }, - "Learn/Questoes_comuns": { - "modified": "2020-07-16T22:35:26.594Z", + "Web/CSS/border-left-width": { + "modified": "2019-01-16T16:00:08.928Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/Questoes_comuns/Como_funciona_a_Internet": { - "modified": "2020-07-16T22:35:37.920Z", + "Web/CSS/border-right": { + "modified": "2019-01-16T15:59:50.709Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/Questoes_comuns/Congiurar_um_servidor_de_testes_local": { - "modified": "2020-07-16T22:35:53.519Z", + "Web/CSS/border-right-color": { + "modified": "2019-01-16T15:59:44.072Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/Questoes_comuns/O_que_e_um_URL": { - "modified": "2020-07-16T22:35:30.214Z", + "Web/CSS/border-right-style": { + "modified": "2019-01-16T15:59:50.407Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/Questoes_comuns/O_que_e_um_nome_de_dominio": { - "modified": "2020-07-16T22:35:44.710Z", + "Web/CSS/border-right-width": { + "modified": "2019-01-16T16:00:01.042Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/Questoes_comuns/O_que_e_um_servidor_da_Web": { - "modified": "2020-07-16T22:35:31.962Z", + "Web/CSS/border-spacing": { + "modified": "2019-03-23T23:47:07.851Z", "contributors": [ - "Anonymous" + "wbamberg", + "teoli", + "Verruckt" ] }, - "Learn/Questoes_comuns/Qual_e_a_diferenca_entre_pagina_site_servidor_da_web_e_mecanismo_pesquisa": { - "modified": "2020-07-16T22:35:40.437Z", + "Web/CSS/border-top": { + "modified": "2019-01-17T10:27:59.370Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/Tools_and_testing": { - "modified": "2020-07-16T22:38:57.196Z", + "Web/CSS/border-top-color": { + "modified": "2019-01-16T19:20:46.774Z", "contributors": [ - "Anonymous", - "Navin77" + "teoli", + "Verruckt" ] }, - "Learn/Tools_and_testing/Teste_cruzado_de_navegador": { - "modified": "2020-07-16T22:39:01.215Z", + "Web/CSS/border-top-style": { + "modified": "2019-01-16T15:59:52.923Z", "contributors": [ - "wbamberg", - "Anonymous" + "teoli", + "Verruckt" ] }, - "Learn/Tools_and_testing/Teste_cruzado_de_navegador/Acessibilidade": { - "modified": "2020-09-24T09:24:04.432Z", + "Web/CSS/border-top-width": { + "modified": "2019-01-16T16:00:01.372Z", "contributors": [ - "Painatalman" + "teoli", + "Verruckt" ] }, - "Localizar_descrições_de_extensões": { - "modified": "2019-03-24T00:02:35.408Z", + "Web/CSS/border-width": { + "modified": "2019-03-23T23:12:52.902Z", "contributors": [ - "SphinxKnight", - "fscholz", + "wbamberg", + "teoli", "Verruckt" ] }, - "Localização": { - "modified": "2019-03-24T00:03:56.319Z", + "Web/CSS/bottom": { + "modified": "2019-01-16T16:00:22.463Z", "contributors": [ - "Anonymous", - "fscholz", - "Verruckt", - "Kayalemao", - "Tagl" + "teoli", + "Verruckt" ] }, - "MDN": { - "modified": "2020-02-19T18:55:27.012Z", + "Web/CSS/clear": { + "modified": "2019-03-23T23:35:13.332Z", "contributors": [ - "jswisher", - "SphinxKnight", - "Anonymous", "wbamberg", - "Jeremie", - "davempso", - "Sheppy" + "teoli", + "Luis Henrique Sousa", + "Verruckt" ] }, - "MDN/Comunidade": { - "modified": "2019-09-11T08:01:31.979Z", + "Web/CSS/color": { + "modified": "2019-01-16T19:20:48.419Z", "contributors": [ - "SphinxKnight", - "Anonymous", - "wbamberg" + "teoli", + "Verruckt", + "Luis Henrique Sousa" ] }, - "MDN/Comunidade/Conversações": { - "modified": "2019-01-16T21:51:19.575Z", + "Web/CSS/content": { + "modified": "2019-03-24T00:02:07.101Z", "contributors": [ - "wbamberg", - "Anonymous" + "teoli", + "Half-blood" ] }, - "MDN/Comunidade/Doc_sprints": { - "modified": "2019-03-18T21:19:58.227Z", + "Web/CSS/counter-increment": { + "modified": "2019-03-23T23:47:04.420Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "MDN/Comunidade/O_que_está_a_acontecer": { - "modified": "2019-03-23T22:42:12.854Z", + "Web/CSS/counter-reset": { + "modified": "2019-03-23T23:47:10.117Z", "contributors": [ - "wbamberg", - "Anonymous" + "teoli", + "Verruckt" ] }, - "MDN/Comunidade/Trabalhar_em_comunidade": { - "modified": "2020-02-19T19:07:51.992Z", + "Web/CSS/cursor": { + "modified": "2019-03-24T00:02:03.227Z", "contributors": [ - "jswisher", "wbamberg", - "Anonymous" + "teoli", + "Half-blood", + "Verruckt" ] }, - "MDN/Contribute": { - "modified": "2019-03-23T23:03:08.251Z", + "Web/CSS/direction": { + "modified": "2019-01-16T16:56:47.948Z", "contributors": [ - "Anonymous", - "wbamberg", - "alispivak" + "teoli", + "Verruckt" ] }, - "MDN/Contribute/Feedback": { - "modified": "2020-09-30T17:52:26.093Z", + "Web/CSS/display": { + "modified": "2019-03-23T23:49:28.516Z", "contributors": [ - "chrisdavidmills", - "jswisher", - "SphinxKnight", + "wbamberg", "Anonymous", - "wbamberg" + "teoli", + "ethertank", + "Leandro Mercês Xavier", + "Verruckt" ] }, - "MDN/Contribute/Getting_started": { - "modified": "2020-09-30T17:15:31.197Z", + "Web/CSS/float": { + "modified": "2019-03-23T23:47:04.610Z", "contributors": [ - "chrisdavidmills", - "joaonunomota", - "Anonymous", "wbamberg", - "riagva", - "davempso" + "teoli", + "Verruckt", + "Luis Henrique Sousa" ] }, - "MDN/Contribute/Howto": { - "modified": "2019-01-16T21:51:27.704Z", + "Web/CSS/font": { + "modified": "2019-03-23T23:47:10.686Z", "contributors": [ "wbamberg", - "Anonymous", - "jswisher" + "teoli", + "Verruckt" ] }, - "MDN/Contribute/Howto/Como_converter_exemplos_de_codigo_para_ficarem_live": { - "modified": "2020-03-02T17:27:21.266Z", + "Web/CSS/font-size": { + "modified": "2019-03-23T23:47:15.600Z", "contributors": [ - "carlostojal", "wbamberg", - "Anonymous" + "RCat", + "teoli", + "Verruckt" ] }, - "MDN/Contribute/Howto/Como_definir_o_resumo_para_uma_pagina": { - "modified": "2019-03-23T22:08:19.737Z", + "Web/CSS/font-size-adjust": { + "modified": "2019-03-23T23:47:06.762Z", "contributors": [ "wbamberg", - "Saconte", - "Anonymous" + "teoli", + "Verruckt" ] }, - "MDN/Contribute/Howto/Como_efetuar_revisao_tecnica": { - "modified": "2019-05-13T07:55:49.326Z", + "Web/CSS/font-smooth": { + "modified": "2020-10-15T22:20:31.703Z", "contributors": [ - "Anonymous" + "LPJFilho" ] }, - "MDN/Contribute/Howto/Como_escrever_um_artigo_para_ajudar_as_pessoas_a_aprenderem_sobre_a_Web": { - "modified": "2020-02-28T22:23:56.590Z", + "Web/CSS/font-style": { + "modified": "2019-03-23T23:51:37.862Z", "contributors": [ "wbamberg", - "Anonymous" + "fscholz", + "teoli", + "Luis Henrique Sousa" ] }, - "MDN/Contribute/Howto/Como_escrever_uma_nova_entrada_no_Glossario": { - "modified": "2019-03-23T22:12:45.769Z", + "Web/CSS/font-weight": { + "modified": "2019-03-23T23:47:17.771Z", "contributors": [ - "wbamberg", - "maarysantos", - "Anonymous" + "gusbemacbe", + "SphinxKnight", + "teoli", + "Verruckt" ] }, - "MDN/Contribute/Howto/Comunicar_um_problema": { - "modified": "2020-01-07T12:19:34.416Z", + "Web/CSS/height": { + "modified": "2019-03-23T23:47:57.733Z", "contributors": [ - "peterbe", "wbamberg", - "Anonymous" + "teoli", + "Luis Henrique Sousa" ] }, - "MDN/Contribute/Howto/Criar_e_editar_paginas": { - "modified": "2019-04-04T11:57:15.432Z", + "Web/CSS/inherit": { + "modified": "2019-01-16T15:39:13.615Z", "contributors": [ - "diogo-panaca" + "teoli", + "Hillus" ] }, - "MDN/Contribute/Howto/Criar_uma_conta_MDN": { - "modified": "2019-03-23T22:42:11.494Z", + "Web/CSS/list-style": { + "modified": "2019-03-23T23:47:53.661Z", "contributors": [ - "Anonymous", - "wbamberg" + "SphinxKnight", + "teoli", + "Luis Henrique Sousa" ] }, - "MDN/Contribute/Howto/Etiqueta": { - "modified": "2019-11-13T11:32:17.983Z", + "Web/CSS/top": { + "modified": "2019-01-16T14:40:15.687Z", "contributors": [ - "Anonymous", - "wbamberg" + "teoli", + "Half-blood" ] }, - "MDN/Contribute/Howto/Marcar_paginas_JavaScript": { - "modified": "2019-01-17T01:35:48.693Z", + "Web/CSS/transform": { + "modified": "2019-03-23T22:12:47.007Z", "contributors": [ - "wbamberg", "Anonymous" ] }, - "MDN/Contribute/Howto/Participar_testes_beta": { - "modified": "2019-03-23T22:09:29.860Z", + "Web/CSS/width": { + "modified": "2019-03-23T23:47:51.459Z", "contributors": [ "wbamberg", - "Anonymous" + "Redeagle48", + "teoli", + "Luis Henrique Sousa", + "Verruckt" ] }, - "MDN/Contribute/Howto/fazer_revisão_editorial": { - "modified": "2019-03-23T22:20:12.878Z", + "Web/CSS/z-index": { + "modified": "2019-01-17T04:06:04.605Z", "contributors": [ - "Anonymous", - "wbamberg", - "samlopes_br" + "teoli", + "Verruckt", + "Luis Henrique Sousa" ] }, - "MDN/Editor": { - "modified": "2020-09-30T15:43:23.702Z", + "Web/Guide": { + "modified": "2020-11-12T11:23:45.364Z", "contributors": [ - "chrisdavidmills", + "nuruldecarvalho", "Anonymous", - "wbamberg" + "Onsteroids" ] }, - "MDN/Editor/Basicos": { - "modified": "2020-09-30T15:43:23.869Z", + "Web/Guide/AJAX": { + "modified": "2019-03-23T23:43:06.644Z", "contributors": [ + "Anonymous", "chrisdavidmills", + "Leandro Mercês Xavier", + "Takenbot", + "Dria", + "RuiMaciel" + ] + }, + "Web/HTML": { + "modified": "2020-07-22T17:12:42.326Z", + "contributors": [ + "joaonunomota", + "SphinxKnight", + "duduindo", + "tyreecruz6", "Anonymous", - "wbamberg" + "Devenancio", + "didi9999", + "jwhitlock" ] }, - "MDN/Guidelines": { - "modified": "2020-09-30T15:31:28.524Z", + "Web/HTTP": { + "modified": "2019-05-08T19:34:36.815Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "wellick53", + "Joao-Henrique", + "CarlosAlbertoSzygalski", + "fscholz" ] }, - "MDN/Guidelines/Convencoes_definicoes": { - "modified": "2020-09-30T15:31:29.524Z", + "Web/HTTP/CORS": { + "modified": "2020-10-15T22:15:14.685Z", "contributors": [ - "chrisdavidmills", - "jswisher", - "Anonymous", - "wbamberg" + "mfuji09" ] }, - "MDN/Guidelines/Guia_de_estilo_de_escrita": { - "modified": "2020-09-30T15:31:29.280Z", + "Web/HTTP/CORS/Errors": { + "modified": "2019-03-18T20:48:04.840Z", "contributors": [ - "chrisdavidmills", - "joaonunomota", - "jswisher", - "wbamberg", - "Anonymous" + "nchevobbe" ] }, - "MDN/Guidelines/Isto_pertence_a_MDN": { - "modified": "2020-09-30T15:31:29.806Z", + "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { + "modified": "2019-07-29T10:54:39.520Z", "contributors": [ - "chrisdavidmills", - "jswisher", - "Anonymous" + "duduindo", + "emagombe" ] }, - "MDN/Kuma": { - "modified": "2019-09-09T15:53:50.658Z", + "Web/HTTP/Headers": { + "modified": "2019-03-23T22:13:14.622Z", "contributors": [ - "SphinxKnight", - "Anonymous", - "wbamberg" + "fscholz" ] }, - "MDN/Sobre": { - "modified": "2019-09-10T08:55:19.644Z", + "Web/HTTP/Headers/Allow": { + "modified": "2020-07-25T17:41:28.755Z", "contributors": [ - "SphinxKnight", - "Anonymous", - "wbamberg", - "Dilson", - "jswisher" + "joaonunomota" ] }, - "MDN/Structures": { - "modified": "2020-09-30T12:57:09.511Z", + "Web/HTTP/Headers/X-Content-Type-Options": { + "modified": "2020-10-15T21:53:51.221Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "jswisher" + "tjgfernandes" ] }, - "MDN/Structures/API_references": { - "modified": "2020-09-30T12:57:10.288Z", + "Web/HTTP/Proxy_servers_and_tunneling": { + "modified": "2020-06-30T09:55:24.162Z", "contributors": [ - "chrisdavidmills", - "wbamberg" + "lutzleonardo15" ] }, - "MDN/Structures/API_references/Barras_laterais_de_referencia_da_API": { - "modified": "2020-09-30T12:57:10.465Z", + "Web/HTTP/Status": { + "modified": "2020-10-15T22:17:14.857Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "zhouqichao" ] }, - "MDN/Structures/API_references/O_que_e_que_uma_referencia_de_API_precisa": { - "modified": "2020-09-30T12:57:10.634Z", + "Web/HTTP/Status/205": { + "modified": "2019-04-07T10:34:18.946Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "preira" ] }, - "MDN/Structures/Exemplos_live": { - "modified": "2020-09-30T12:57:10.000Z", + "Web/HTTP/Status/405": { + "modified": "2020-07-25T17:18:32.968Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "joaonunomota" ] }, - "MDN/Structures/Macros": { - "modified": "2020-09-30T12:57:10.153Z", + "Web/HTTP/Status/502": { + "modified": "2020-10-15T22:31:56.172Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "joaonunomota" ] }, - "MDN/Tools": { - "modified": "2020-09-30T16:53:22.697Z", + "Web/HTTP/Status/504": { + "modified": "2020-10-15T22:32:01.046Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "jswisher" + "joaonunomota" ] }, - "MDN/Tools/Edição_de_modelo": { - "modified": "2020-09-30T16:53:23.123Z", + "Web/JavaScript": { + "modified": "2020-09-29T15:05:06.845Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "jnascimentogcc", + "Anonymous", + "SphinxKnight", + "diogo-panaca", + "ruiribeiro97", + "teoli", + "jaydson", + "Charleno Pires", + "leobalter", + "Verruckt", + "Leandro Mercês Xavier", + "Enigma", + "RuiMaciel" ] }, - "MDN/Tools/KumaScript": { - "modified": "2020-09-30T16:53:22.999Z", + "Web/JavaScript/Reference": { + "modified": "2020-07-11T02:27:11.550Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "KINGRANDOLPH", + "Anonymous", + "dd-pardal", + "LJHarb" ] }, - "MDN/Tools/Vigiar_pagina": { - "modified": "2020-09-30T16:53:22.646Z", + "Web/JavaScript/Reference/Classes": { + "modified": "2020-10-15T22:00:39.801Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "preira", + "peter.kehl" ] }, - "MDN/Troubleshooting": { - "modified": "2020-09-30T16:58:33.426Z", + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-10-15T22:00:38.342Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Anonymous" + "Painatalman" ] }, - "MDN_at_ten": { - "modified": "2019-03-23T22:50:14.757Z", + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:47:09.947Z", "contributors": [ - "Anonymous", - "Matoplays" + "Sheppy" ] }, - "MDN_at_ten/Contribuir_para_MDN": { - "modified": "2020-02-19T18:51:00.800Z", + "Web/JavaScript/Reference/Errors/Not_a_function": { + "modified": "2020-07-25T16:58:44.866Z", "contributors": [ - "jswisher", - "Anonymous" + "joaonunomota" ] }, - "MDN_at_ten/Historia_da_MDN": { - "modified": "2019-03-23T22:09:33.028Z", + "Web/JavaScript/Reference/Errors/Stmt_after_return": { + "modified": "2020-03-12T19:47:09.548Z", "contributors": [ - "Anonymous" + "Anonymous", + "joao-neves95", + "PANC" ] }, - "Manipuladores_de_protocolo_web": { - "modified": "2019-03-23T23:52:53.802Z", + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:47:17.066Z", "contributors": [ - "Verruckt", - "Fernandopsilveira", - "Leandro Mercês Xavier" + "pedlima" ] }, - "Melhorias_do_Gerenciador_de_Downloads_no_Firefox_3": { - "modified": "2019-01-16T14:39:25.788Z", + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:39:49.774Z", "contributors": [ - "fscholz", - "Verruckt" + "Anonymous", + "Redeagle48", + "SphinxKnight", + "fscholz" ] }, - "Mozilla": { - "modified": "2019-03-24T00:17:35.290Z", + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-10-15T21:54:01.173Z", "contributors": [ - "Anonymous", - "billhiba", - "Beria" + "joaonunomota", + "claudepache" ] }, - "Mozilla/Add-ons": { - "modified": "2019-03-18T21:08:20.167Z", + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2019-03-23T22:13:06.712Z", "contributors": [ - "Anonymous", - "nportugal", - "Anomitro_Munshi" + "ricardomartins" ] }, - "Mozilla/Add-ons/WebExtensions": { - "modified": "2019-03-18T20:49:08.711Z", + "Web/JavaScript/Reference/Global_Objects/Array/find": { + "modified": "2020-10-15T22:02:06.522Z", "contributors": [ - "Anonymous", - "wbamberg" + "JMoreira93" ] }, - "Mozilla/Add-ons/WebExtensions/API": { - "modified": "2019-11-26T22:19:55.515Z", + "Web/JavaScript/Reference/Global_Objects/Array/forEach": { + "modified": "2020-10-15T22:13:53.352Z", "contributors": [ - "wbamberg", - "Anonymous" + "ricardomartins" ] }, - "Mozilla/Add-ons/WebExtensions/API/Armazenamento": { - "modified": "2020-10-15T21:59:48.396Z", + "Web/JavaScript/Reference/Global_Objects/Array/includes": { + "modified": "2020-10-15T22:04:42.050Z", "contributors": [ - "wbamberg", - "Anonymous" + "SandroMiguel" ] }, - "Mozilla/Add-ons/WebExtensions/API/browserAction": { - "modified": "2020-10-15T21:59:49.630Z", + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2020-10-15T21:54:14.959Z", "contributors": [ - "wbamberg", - "Anonymous" + "joaonunomota", + "ricardomartins" ] }, - "Mozilla/Add-ons/WebExtensions/API/browsingData": { - "modified": "2020-10-15T22:14:48.933Z", + "Web/JavaScript/Reference/Global_Objects/Array/map": { + "modified": "2020-10-15T22:33:11.742Z", "contributors": [ - "ExE-Boss" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/API/browsingData/removePluginData": { - "modified": "2020-10-15T22:14:40.836Z", + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2020-10-15T21:58:52.123Z", "contributors": [ - "Anonymous" + "kapz" ] }, - "Mozilla/Add-ons/WebExtensions/API/devtools.panels": { - "modified": "2020-10-15T21:59:48.885Z", + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2019-03-23T22:12:30.952Z", "contributors": [ - "Anonymous" + "ricardomartins" ] }, - "Mozilla/Add-ons/WebExtensions/API/i18n": { - "modified": "2020-10-15T22:14:41.219Z", + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T22:31:52.359Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/API/pageAction": { - "modified": "2020-10-15T21:59:47.365Z", + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2019-03-23T22:16:35.915Z", "contributors": [ - "wbamberg", - "Anonymous" + "anguelov" ] }, - "Mozilla/Add-ons/WebExtensions/API/sidebarAction": { - "modified": "2020-10-15T22:06:57.394Z", + "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { + "modified": "2020-10-15T22:14:28.403Z", "contributors": [ - "wbamberg", - "Anonymous" + "ramongr" ] }, - "Mozilla/Add-ons/WebExtensions/A_sua_primeira_extensao": { - "modified": "2019-03-18T21:04:11.435Z", + "Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-10-15T21:59:47.399Z", "contributors": [ "Anonymous" ] }, - "Mozilla/Add-ons/WebExtensions/A_sua_segunda_extensao": { - "modified": "2019-03-18T21:03:02.346Z", + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2019-03-23T22:14:25.079Z", "contributors": [ - "Anonymous" + "nmve" ] }, - "Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_extensao": { - "modified": "2019-03-18T21:03:04.427Z", + "Web/JavaScript/Reference/Global_Objects/Function/arguments": { + "modified": "2020-10-15T22:14:27.893Z", "contributors": [ - "Anonymous" + "ramongr" ] }, - "Mozilla/Add-ons/WebExtensions/As_melhores_praticas_de_experiencia_do_utilizador": { - "modified": "2019-03-18T21:02:27.071Z", + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2020-10-15T21:53:17.055Z", "contributors": [ - "Anonymous" + "joaonunomota", + "JuniorDiasOliveira", + "waveiro", + "Mega85" ] }, - "Mozilla/Add-ons/WebExtensions/Conversao_de_uma_extensao_legada_do_firefox": { - "modified": "2019-03-18T20:56:20.829Z", + "Web/JavaScript/Reference/Global_Objects/Infinity": { + "modified": "2020-10-15T22:31:55.049Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/E_a_seguir": { - "modified": "2019-03-18T21:01:48.060Z", + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2019-03-23T22:12:29.962Z", "contributors": [ - "Anonymous" + "ricardomartins" ] }, - "Mozilla/Add-ons/WebExtensions/Exemplos_extensoes": { - "modified": "2019-03-18T21:03:01.761Z", + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2020-10-15T21:58:11.563Z", "contributors": [ - "Anonymous" + "carlos-menezes", + "MarcioFonseca" ] }, - "Mozilla/Add-ons/WebExtensions/ExtennsoesWeb_e_a_id_do_extra": { - "modified": "2019-03-18T20:47:01.907Z", + "Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2019-03-23T22:49:01.559Z", "contributors": [ - "Anonymous" + "Redeagle48", + "fscholz" ] }, - "Mozilla/Add-ons/WebExtensions/Extensão_das_ferramentas_de_desenvolvimento": { - "modified": "2019-03-18T21:04:10.244Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { + "modified": "2019-03-23T22:49:07.538Z", "contributors": [ - "Anonymous" + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/Instalacao_temporaria_no_Firefox": { - "modified": "2019-03-18T21:03:04.634Z", + "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { + "modified": "2019-03-23T22:49:09.973Z", "contributors": [ - "Anonymous" + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/Interceptar_Pedidos_HTTP": { - "modified": "2019-03-18T21:03:59.316Z", + "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { + "modified": "2020-10-15T21:38:19.186Z", "contributors": [ - "carlosteixeiraa" + "joaonunomota", + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/Internationalization": { - "modified": "2019-03-18T20:56:21.219Z", + "Web/JavaScript/Reference/Global_Objects/Number/NaN": { + "modified": "2019-03-23T22:49:09.414Z", "contributors": [ - "Anonymous" + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/O_que_sao_WebExtensions": { - "modified": "2019-03-18T21:05:19.046Z", + "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { + "modified": "2019-03-23T22:49:12.149Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/Primeiros_passos_com_web-ext": { - "modified": "2019-03-18T21:03:10.522Z", + "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { + "modified": "2019-03-23T22:49:17.052Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/Publicar_a_sua_extensao": { - "modified": "2019-03-18T21:04:14.402Z", + "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { + "modified": "2019-03-23T22:49:10.417Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/Scripts_Conteudo": { - "modified": "2019-07-29T11:08:46.237Z", + "Web/JavaScript/Reference/Global_Objects/Number/toString": { + "modified": "2019-03-23T22:49:00.338Z", "contributors": [ - "duduindo", - "Anonymous" + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/Suporte_navegador_APIs_JavaScript": { - "modified": "2020-10-15T20:55:03.457Z", + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:30:54.647Z", "contributors": [ - "Anonymous" + "Anonymous", + "wbamberg", + "fscholz" ] }, - "Mozilla/Add-ons/WebExtensions/Tips": { - "modified": "2019-03-18T21:01:44.598Z", + "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { + "modified": "2019-03-23T22:42:57.159Z", "contributors": [ - "SphinxKnight" + "gabrielpconceicao" ] }, - "Mozilla/Add-ons/WebExtensions/Trasnsferir_extensao_Google_Chrome": { - "modified": "2019-03-18T21:05:15.395Z", + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T21:38:27.657Z", "contributors": [ + "erickbRodrigues", "Anonymous", - "Nunonmac101" + "ricardomartins", + "lpimenta-ptc", + "Sheppy" ] }, - "Mozilla/Add-ons/WebExtensions/dubla_padrões": { - "modified": "2020-10-15T22:25:44.918Z", + "Web/JavaScript/Reference/Global_Objects/String/Trim": { + "modified": "2019-03-23T22:13:05.964Z", "contributors": [ - "martimafonso" + "ricardomartins" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador": { - "modified": "2019-03-18T21:04:19.885Z", + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2019-03-23T22:49:09.792Z", "contributors": [ - "Anonymous" + "SandroMiguel", + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Acoes_pagina": { - "modified": "2019-03-18T21:04:17.709Z", + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2019-03-23T22:49:00.693Z", "contributors": [ - "Anonymous" + "Redeagle48" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Ação_navegador": { - "modified": "2019-03-18T21:04:05.718Z", + "Web/JavaScript/Reference/Global_Objects/Symbol": { + "modified": "2019-03-23T22:24:48.766Z", "contributors": [ - "Anonymous" + "ZeikJT" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Barras_laterais": { - "modified": "2019-03-18T21:04:06.139Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance": { + "modified": "2019-03-23T22:24:53.893Z", "contributors": [ - "Anonymous" + "GoToLoop" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Estilos_de_navegador": { - "modified": "2020-10-15T22:07:31.177Z", + "Web/JavaScript/Reference/Global_Objects/encodeURI": { + "modified": "2020-03-12T19:42:17.895Z", "contributors": [ - "Anonymous" + "kempcarlos" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Itens_do_menu_de_contexto": { - "modified": "2019-03-18T21:04:09.803Z", + "Web/Manifest": { + "modified": "2020-10-15T22:23:27.262Z", "contributors": [ + "nersofiripi", "Anonymous" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Notificacoes": { - "modified": "2019-03-18T21:04:17.481Z", + "Web/MathML": { + "modified": "2020-11-09T15:01:38.012Z", "contributors": [ + "joaonunomota", + "Joao_Ledo_Fonseca", "Anonymous" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Omnibox": { - "modified": "2019-03-18T21:01:59.411Z", + "Web/MathML/Attribute": { + "modified": "2020-08-21T12:44:51.026Z", "contributors": [ - "Anonymous" + "joaonunomota", + "fscholz" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Options_pages": { - "modified": "2019-03-18T21:04:14.023Z", + "Web/MathML/Authoring": { + "modified": "2020-08-15T14:39:49.860Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Paginas_de_extensão": { - "modified": "2019-03-18T21:03:04.123Z", + "Web/MathML/Element": { + "modified": "2020-08-16T17:33:47.904Z", "contributors": [ - "Anonymous" + "joaonunomota", + "fscholz" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Popups": { - "modified": "2019-08-10T13:56:46.929Z", + "Web/MathML/Element/maction": { + "modified": "2020-10-15T22:32:30.845Z", "contributors": [ - "pedrosino", - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/interface_do_utilizador/devtools_panels": { - "modified": "2019-03-18T21:04:02.641Z", + "Web/MathML/Element/math": { + "modified": "2020-10-15T22:32:00.988Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json": { - "modified": "2020-10-15T21:59:48.039Z", + "Web/MathML/Element/menclose": { + "modified": "2020-10-15T22:31:58.519Z", "contributors": [ - "Painatalman", - "wbamberg" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json/browser_action": { - "modified": "2020-10-15T21:59:47.236Z", + "Web/MathML/Element/merror": { + "modified": "2020-10-15T22:31:57.892Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings": { - "modified": "2020-10-15T22:07:31.462Z", + "Web/MathML/Element/mfenced": { + "modified": "2020-10-15T22:32:16.693Z", "contributors": [ - "wbamberg", - "ExE-Boss", - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page": { - "modified": "2020-10-15T21:59:47.989Z", + "Web/MathML/Element/mfrac": { + "modified": "2020-10-15T22:32:37.302Z", "contributors": [ - "wbamberg", - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json/icones": { - "modified": "2020-10-15T21:59:47.019Z", + "Web/MathML/Element/mglyph": { + "modified": "2020-10-15T22:32:17.025Z", "contributors": [ - "wbamberg", - "Anonymous" + "joaonunomota" ] }, - "Mozilla/Developer_guide/Source_Code": { - "modified": "2019-03-18T21:45:30.638Z", + "Web/MathML/Element/mi": { + "modified": "2020-10-15T22:32:20.399Z", "contributors": [ - "ntim" + "joaonunomota" ] }, - "Mozilla/Firefox": { - "modified": "2019-09-10T15:01:27.677Z", + "Web/MathML/Element/mlabeledtr": { + "modified": "2020-10-15T22:32:27.553Z", "contributors": [ - "SphinxKnight", - "Anonymous", - "wbamberg", - "albertocastro", - "Sheppy" + "joaonunomota" ] }, - "Mozilla/Firefox/Releases": { - "modified": "2019-03-18T21:15:03.747Z", + "Web/MathML/Element/mmultiscripts": { + "modified": "2020-10-15T22:32:37.118Z", "contributors": [ - "Anonymous", - "wbamberg", - "Sheppy" + "joaonunomota" ] }, - "Mozilla/Firefox/Releases/3": { - "modified": "2019-03-23T23:19:50.195Z", + "Web/MathML/Element/mn": { + "modified": "2020-10-15T22:32:26.157Z", "contributors": [ - "wbamberg", - "ethertank" + "joaonunomota" ] }, - "Mozilla/Firefox/Releases/70": { - "modified": "2019-10-01T09:44:22.188Z", + "Web/MathML/Element/mo": { + "modified": "2020-10-15T22:32:19.754Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Mudanças_no_Gecko_1.9_que_afetam_websites": { - "modified": "2019-03-23T23:47:04.199Z", + "Web/MathML/Element/mover": { + "modified": "2020-10-15T22:32:19.618Z", "contributors": [ - "wbamberg", - "Sheppy", - "Verruckt" + "joaonunomota" ] }, - "O_DOM_e_o_JavaScript": { - "modified": "2019-12-13T21:10:33.944Z", + "Web/MathML/Element/mpadded": { + "modified": "2020-10-15T22:32:28.264Z", "contributors": [ - "wbamberg", - "fferracioli" + "joaonunomota" ] }, - "Plugins/Ativacao_de_Flash:_comparacao_de_navegador": { - "modified": "2019-03-18T20:56:19.824Z", + "Web/MathML/Element/mphantom": { + "modified": "2020-10-15T22:32:22.218Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Plugins/Flash_para_HTML5": { - "modified": "2019-03-18T20:56:20.182Z", + "Web/MathML/Element/mroot": { + "modified": "2020-10-15T22:32:22.430Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Referência_JSDBGAPI": { - "modified": "2019-03-23T23:44:44.830Z", + "Web/MathML/Element/mrow": { + "modified": "2020-10-15T22:31:58.300Z", "contributors": [ - "SphinxKnight", - "RuiMaciel" + "joaonunomota" ] }, - "Referência_do_DOM_Gecko/Prefácio": { - "modified": "2019-03-23T23:51:50.810Z", + "Web/MathML/Element/ms": { + "modified": "2020-10-15T22:32:22.427Z", "contributors": [ - "khalid32", - "Leandro Mercês Xavier", - "Davis.peixoto" + "joaonunomota" ] }, - "Sobre_o_Document_Object_Model": { - "modified": "2019-03-23T23:46:25.664Z", + "Web/MathML/Element/mspace": { + "modified": "2020-10-15T22:31:55.582Z", "contributors": [ - "SphinxKnight", - "Verruckt" + "joaonunomota" ] }, - "Tinderbox": { - "modified": "2019-03-23T23:45:30.178Z", + "Web/MathML/Element/msqrt": { + "modified": "2020-10-15T22:32:22.151Z", "contributors": [ - "SphinxKnight", - "Verruckt" + "joaonunomota" ] }, - "Toolkit_API": { - "modified": "2019-01-16T16:23:47.926Z", + "Web/MathML/Element/mstyle": { + "modified": "2020-10-15T22:33:04.564Z", "contributors": [ - "Tagl" + "joaonunomota" ] }, - "Tools": { - "modified": "2020-07-16T22:44:17.493Z", + "Web/MathML/Element/msub": { + "modified": "2020-10-15T22:32:21.086Z", "contributors": [ - "SphinxKnight", - "Anonymous", - "wbamberg", - "robert882", - "Leite", - "caobarbosa", - "Timmi" + "joaonunomota" ] }, - "Tools/Add-ons": { - "modified": "2020-07-16T22:36:23.718Z", + "Web/MathML/Element/msubsup": { + "modified": "2020-10-15T22:32:22.170Z", "contributors": [ - "wbamberg" + "joaonunomota" ] }, - "Tools/Capturas_de_ecra": { - "modified": "2020-07-16T22:36:38.620Z", + "Web/MathML/Element/msup": { + "modified": "2020-10-15T22:32:20.360Z", "contributors": [ - "wbamberg", - "Anonymous" + "joaonunomota" ] }, - "Tools/Configurações": { - "modified": "2020-07-16T22:36:35.515Z", + "Web/MathML/Element/mtable": { + "modified": "2020-10-15T22:33:04.410Z", "contributors": [ - "wbamberg", - "Anonymous" + "joaonunomota" ] }, - "Tools/Consola_da_Web": { - "modified": "2020-07-16T22:34:07.526Z", + "Web/MathML/Element/mtd": { + "modified": "2020-10-15T22:32:00.353Z", "contributors": [ - "Anonymous", - "wbamberg" + "joaonunomota" ] }, - "Tools/Consola_da_Web/Abertura_Consola_Web": { - "modified": "2020-07-16T22:34:17.467Z", + "Web/MathML/Element/mtext": { + "modified": "2020-10-15T22:31:59.109Z", "contributors": [ - "Anonymous", - "wbamberg" + "joaonunomota" ] }, - "Tools/Consola_da_Web/Ajuda": { - "modified": "2020-07-16T22:34:13.111Z", + "Web/MathML/Element/mtr": { + "modified": "2020-10-15T22:31:55.409Z", "contributors": [ - "Anonymous", - "wbamberg" + "joaonunomota" ] }, - "Tools/Consola_da_Web/Atalhos_teclado": { - "modified": "2020-07-16T22:34:23.988Z", + "Web/MathML/Element/munder": { + "modified": "2020-10-15T22:32:18.823Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Tools/Consola_da_Web/Dividir_consola": { - "modified": "2020-07-16T22:34:21.158Z", + "Web/MathML/Element/munderover": { + "modified": "2020-10-15T22:32:21.240Z", "contributors": [ - "Anonymous", - "wbamberg" + "joaonunomota" ] }, - "Tools/Consola_da_Web/Mensagens_consola": { - "modified": "2020-07-16T22:34:16.005Z", + "Web/MathML/Element/semantics": { + "modified": "2020-10-15T22:32:26.955Z", "contributors": [ - "wbamberg", - "Anonymous" + "joaonunomota" ] }, - "Tools/Consola_da_Web/O_interprete_da_linha_de_comandos": { - "modified": "2020-07-16T22:34:19.541Z", + "Web/MathML/Examples": { + "modified": "2020-08-18T09:59:11.744Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Tools/Consola_da_Web/Rich_output": { - "modified": "2020-07-16T22:34:20.453Z", + "Web/MathML/Index": { + "modified": "2020-08-16T17:30:38.516Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Tools/Debugger": { - "modified": "2020-07-16T22:35:06.168Z", + "Web/Progressive_web_apps": { + "modified": "2020-04-23T09:44:00.269Z", "contributors": [ "Anonymous", - "wbamberg" + "chrisdavidmills" ] }, - "Tools/Debugger/Demonstracao_IU": { - "modified": "2020-07-16T22:35:16.876Z", + "Web/Reference": { + "modified": "2020-07-20T13:13:52.229Z", "contributors": [ - "wbamberg", - "Anonymous" + "joaonunomota", + "Anonymous", + "carlosrainhaaraujo", + "kscarfone" ] }, - "Tools/Debugger/How_to": { - "modified": "2020-07-16T22:35:08.333Z" - }, - "Tools/Debugger/How_to/Abrir_o_depurador": { - "modified": "2020-07-16T22:35:09.351Z", + "Web/Reference/API": { + "modified": "2019-03-23T23:22:11.761Z", "contributors": [ - "Anonymous" + "Anonymous", + "carlosrainhaaraujo" ] }, - "Tools/Debugger/How_to/Use_a_source_map": { - "modified": "2020-09-11T09:41:20.649Z", + "Web/SVG": { + "modified": "2020-04-23T09:30:08.420Z", "contributors": [ - "pedro-surf", - "Anonymous" + "Anonymous", + "teoli", + "guerreirogabriel", + "fscholz", + "Verruckt", + "RuiMaciel" ] }, - "Tools/Debugger/Source_map_errors": { - "modified": "2020-07-16T22:35:19.577Z", + "Web/SVG/Element": { + "modified": "2020-04-23T09:28:28.562Z", "contributors": [ - "Anonymous" + "Anonymous", + "ricardomartins" ] }, - "Tools/Desempenho": { - "modified": "2020-07-16T22:36:13.622Z", + "Web/SVG/Namespaces_Crash_Course": { + "modified": "2019-03-23T22:01:50.555Z", "contributors": [ "Anonymous", - "wbamberg" + "somascope" ] }, - "Tools/Desempenho/Arvore_de_Chamada": { - "modified": "2020-07-16T22:36:20.006Z", + "Web/SVG/Tutorial": { + "modified": "2019-01-16T14:01:46.161Z", "contributors": [ - "wbamberg", - "Anonymous" + "Anonymous", + "teoli", + "guerreirogabriel" ] }, - "Tools/Desempenho/Cascata": { - "modified": "2020-07-16T22:36:18.250Z", + "Web/Security/Secure_Contexts": { + "modified": "2019-03-23T22:01:19.367Z", "contributors": [ - "wbamberg", - "Anonymous" + "Anonymous", + "Sheppy" ] }, - "Tools/Desempenho/Como_fazer": { - "modified": "2020-07-16T22:36:21.955Z", + "Web/XML": { + "modified": "2020-04-23T08:26:21.649Z", "contributors": [ "Anonymous", - "wbamberg" + "ExE-Boss" ] }, - "Tools/Desempenho/Frame_rate": { - "modified": "2020-07-16T22:36:19.201Z", + "Web/XSLT": { + "modified": "2019-03-24T00:03:57.070Z", "contributors": [ - "wbamberg", - "Anonymous" + "ExE-Boss", + "Anonymous", + "fscholz", + "Verruckt", + "RuiMaciel" ] }, - "Tools/Editor_de_audio_da_Web": { - "modified": "2020-07-16T22:36:08.692Z", + "WebAssembly": { + "modified": "2020-10-15T22:07:45.071Z", "contributors": [ - "wbamberg", "Anonymous" ] }, - "Tools/Editor_de_estilo": { - "modified": "2020-07-16T22:35:01.029Z", + "orphaned/Acentuação_para_conteúdos_carregados_por_AJAX": { + "modified": "2019-03-23T23:50:32.509Z", "contributors": [ - "wbamberg", - "Anonymous" + "Leandro Mercês Xavier", + "JulioGreff", + "Micox", + "Douglas", + "Pfsergio1968" ] }, - "Tools/Inspetor_de_armazenamento": { - "modified": "2020-07-16T22:36:10.303Z", + "Mozilla/Firefox/Releases/3.5/Updating_extensions": { + "modified": "2019-03-24T00:00:34.452Z", "contributors": [ "wbamberg", - "Anonymous" + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Tools/Memoria": { - "modified": "2020-07-16T22:36:27.341Z", + "Mozilla/Firefox/Releases/3/Updating_extensions": { + "modified": "2019-12-13T20:33:32.517Z", "contributors": [ "wbamberg", - "Anonymous" - ] - }, - "Tools/Modo_de_Desenho_Adaptavel": { - "modified": "2020-07-16T22:35:22.282Z", - "contributors": [ - "Anonymous" - ] - }, - "Tools/Network_Monitor": { - "modified": "2020-07-16T22:35:31.240Z", - "contributors": [ + "fscholz", + "SphinxKnight", "Anonymous", - "wbamberg" + "teoli", + "Sheppy", + "Leandro Mercês Xavier", + "Verruckt" ] }, - "Tools/Page_Inspector": { - "modified": "2020-07-16T22:34:29.429Z", + "orphaned/Componentes": { + "modified": "2019-03-23T23:40:02.292Z", "contributors": [ - "wbamberg", - "Anonymous", - "DevAsh" + "SphinxKnight", + "GrandeBuzina" ] }, - "Tools/Page_Inspector/Guia_de_IU": { - "modified": "2020-07-16T22:34:49.596Z", + "orphaned/Configurando_um_servidor_de_atualização": { + "modified": "2019-01-16T14:51:09.548Z", "contributors": [ - "wbamberg", - "Anonymous" + "Leandro Mercês Xavier" ] }, - "Tools/Page_Inspector/How_to": { - "modified": "2020-07-16T22:34:31.978Z", + "orphaned/Construir_uma_Extensão": { + "modified": "2019-03-24T00:04:05.919Z", "contributors": [ - "wbamberg", - "Anonymous", - "sidgan" + "teoli", + "fscholz", + "Rhuanbarros", + "Rsjuliao", + "Horyuu1", + "Leandro Mercês Xavier", + "Dudaott", + "Ecocam", + "Toyux", + "Verruckt", + "Luis Henrique Sousa", + "Mr.leal", + "Joker pt", + "Brunnolou", + "Bermonruf" ] }, - "Tools/Page_Inspector/How_to/Abrir_o_inspetor": { - "modified": "2020-07-16T22:34:33.099Z", + "orphaned/Controles_XUL": { + "modified": "2019-03-24T00:03:56.894Z", "contributors": [ - "Anonymous", - "wbamberg" + "fscholz", + "Luis Henrique Sousa", + "Verruckt" ] }, - "Tools/Page_Inspector/How_to/Examinar_e_editar_CSS": { - "modified": "2020-07-16T22:34:43.588Z", + "Web/OpenSearch": { + "modified": "2019-03-24T00:00:54.849Z", "contributors": [ - "wbamberg", - "Anonymous" + "tregagnon", + "Verruckt", + "Rodrigoknascimento" ] }, - "Tools/Page_Inspector/How_to/Examinar_e_editar_o_modelo_de_caixa": { - "modified": "2020-07-16T22:34:34.516Z", + "orphaned/Criando_um_visual_para_o_Firefox": { + "modified": "2019-03-23T23:51:38.630Z", "contributors": [ - "wbamberg", - "Anonymous" + "SphinxKnight", + "Milona87", + "Thestrongergod", + "Verruckt", + "Camaleaun" ] }, - "Tools/Page_Inspector/How_to/Inspecionar_e_selecionar_cores": { - "modified": "2020-07-16T22:34:35.181Z", + "orphaned/Criar_uma_pele_para_o_Firefox": { + "modified": "2019-01-16T16:12:28.704Z", "contributors": [ - "wbamberg", - "Anonymous" + "MarceloGhelman", + "Leandro Mercês Xavier", + "Amrlima" ] }, - "Tools/Page_Inspector/How_to/Reposicao_de_elementos_na_pagina": { - "modified": "2020-07-16T22:34:46.213Z", + "orphaned/Desenhando_texto_usando_canvas": { + "modified": "2019-03-23T23:59:25.399Z", "contributors": [ - "wbamberg", - "Anonymous" + "Wladimir_Palant", + "maicon", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Tools/Page_Inspector/How_to/Trabalhar_com_animacoes": { - "modified": "2020-07-16T22:34:37.073Z", + "Glossary/DHTML": { + "modified": "2019-01-16T16:23:46.538Z", "contributors": [ - "wbamberg", - "Anonymous" + "SphinxKnight", + "RuiMaciel" ] }, - "Tools/Page_Inspector/How_to/Utilizar_a_API_do_Inspetor": { - "modified": "2020-07-16T22:34:45.056Z", + "orphaned/Tools/Add-ons/DOM_Inspector": { + "modified": "2020-07-16T22:36:24.733Z", "contributors": [ "wbamberg", - "Anonymous" + "SphinxKnight", + "Anonymous", + "teoli", + "Verruckt" ] }, - "Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra": { - "modified": "2020-07-16T22:34:39.170Z", + "orphaned/Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector": { + "modified": "2020-07-16T22:36:26.057Z", "contributors": [ "wbamberg", "Anonymous" ] }, - "Tools/Page_Inspector/How_to/Visualize_transforms": { - "modified": "2020-07-16T22:34:39.722Z", + "Web/API/Document/alinkColor": { + "modified": "2019-03-24T00:04:44.971Z", "contributors": [ - "wbamberg", - "Anonymous" + "teoli", + "italo" ] }, - "Tools/Page_Inspector/atalhos_de_teclado": { - "modified": "2020-07-16T22:34:52.351Z", + "Web/API/Document/bgColor": { + "modified": "2019-03-24T00:04:41.203Z", "contributors": [ - "wbamberg", - "Anonymous" + "teoli", + "italo" ] }, - "Tools/Performance/Guia_da_IU": { - "modified": "2020-07-16T22:36:15.326Z", + "Web/API/Document/cookie": { + "modified": "2019-03-19T14:20:57.798Z", "contributors": [ - "wbamberg", - "Anonymous" + "lucasrenod", + "SphinxKnight", + "gadelhas", + "teoli", + "italo" ] }, - "Tools/Remote_Debugging": { - "modified": "2020-07-16T22:35:37.988Z", + "Web/API/Document/getElementsByClassName": { + "modified": "2019-12-02T03:58:42.536Z", "contributors": [ - "Anonymous", - "wbamberg", - "Joao_Silva27" + "jestevespereira", + "khalid32", + "teoli", + "Leandro Mercês Xavier", + "Verruckt" ] }, - "Tools/Remote_Debugging/Debugging_Firefox_Desktop": { - "modified": "2020-07-16T22:35:41.262Z", + "Web/API/Document_Object_Model": { + "modified": "2019-03-23T23:25:55.220Z", "contributors": [ - "Anonymous" + "Anonymous", + "Brettz9" ] }, - "Tools/Remote_Debugging/Depuracao_remota_Thunderbird": { - "modified": "2020-07-16T22:35:40.059Z", + "Web/API/Node/appendChild": { + "modified": "2019-03-23T23:43:33.351Z", "contributors": [ - "wbamberg", - "Anonymous" + "khalid32", + "teoli", + "Leandro Mercês Xavier", + "Wingedx" ] }, - "Tools/Tools_Toolbox": { - "modified": "2020-07-16T22:35:28.091Z", + "Web/API/Element/clientLeft": { + "modified": "2019-03-23T23:49:26.792Z", "contributors": [ - "wbamberg", - "Anonymous" + "khalid32", + "teoli", + "Leandro Mercês Xavier", + "Verruckt" ] }, - "Tools/about:debugging": { - "modified": "2020-07-16T22:36:33.106Z", + "Web/API/Element/clientTop": { + "modified": "2019-03-23T23:49:30.994Z", "contributors": [ - "Anonymous", - "wbamberg" + "AshfaqHossain", + "teoli", + "Leandro Mercês Xavier", + "Verruckt" ] }, - "Tools/atalhos_de_teclado": { - "modified": "2020-07-16T22:35:50.422Z", + "Web/API/Node/cloneNode": { + "modified": "2019-09-30T14:07:35.240Z", "contributors": [ - "Anonymous", - "wbamberg" + "semisse", + "SphinxKnight", + "guerreirogabriel", + "Diogok", + "Glauco.basilio", + "Codigo13", + "Leandro Mercês Xavier" ] }, - "Transformar_XML_com_XSLT": { - "modified": "2019-03-23T23:45:21.155Z", + "Web/API/Node/insertBefore": { + "modified": "2019-03-23T23:46:00.401Z", "contributors": [ - "SphinxKnight", - "Verruckt" + "jsx", + "Codigo13" ] }, - "Transformar_XML_com_XSLT/Para_leitura_adicional": { - "modified": "2019-03-23T23:52:21.068Z", + "Web/API/Element": { + "modified": "2020-10-15T21:16:02.585Z", "contributors": [ - "SphinxKnight", + "Anonymous", + "MauroBonucci", + "khalid32", "Leandro Mercês Xavier", - "Pilinio", - "Verruckt" + "Davis.peixoto", + "Codigo13" ] }, - "Tutorial_XUL": { - "modified": "2019-03-23T23:45:36.792Z", + "Web/API/Selection": { + "modified": "2019-03-24T00:02:03.808Z", "contributors": [ "SphinxKnight", - "Leandro Mercês Xavier" + "danielwebsistemas" ] }, - "Tutorial_XUL/Adicionando_botões": { - "modified": "2019-03-23T23:46:29.323Z", + "Web/API/Web_Storage_API": { + "modified": "2019-03-24T00:00:51.877Z", "contributors": [ + "khalid32", "Verruckt", - "Leandro Mercês Xavier", - "Rodmalkav" + "Leandro Mercês Xavier" ] }, - "Tutorial_XUL/Criando_uma_janela": { - "modified": "2019-03-23T23:45:36.338Z", + "orphaned/FAQ_Extensões": { + "modified": "2019-01-16T14:39:04.547Z", "contributors": [ - "SphinxKnight", - "jigs12", - "Leandro Mercês Xavier", + "fscholz", "Luis Henrique Sousa", + "Toyux", "Verruckt", - "Rodmalkav" + "Calebeaires" ] }, - "Tutorial_XUL/Introdução": { - "modified": "2019-03-23T23:46:27.723Z", + "Mozilla/Firefox/Releases/1.5": { + "modified": "2019-03-24T00:02:26.260Z", "contributors": [ + "wbamberg", "SphinxKnight", - "Verruckt", + "fscholz", + "Takenbot", "Leandro Mercês Xavier" ] }, - "Tutorial_do_Canvas": { - "modified": "2019-01-16T14:32:07.975Z", + "Mozilla/Firefox/Releases/2": { + "modified": "2019-03-24T00:02:35.537Z", "contributors": [ + "wbamberg", + "SphinxKnight", "fscholz", - "Verruckt", - "RuiMaciel" + "Leandro Mercês Xavier", + "Kayalemao" ] }, - "Tutorial_do_Canvas/Formas_de_desenho": { - "modified": "2019-01-16T14:01:56.255Z", + "orphaned/Firefox_3_para_desenvolvedores": { + "modified": "2019-01-16T14:32:08.166Z", "contributors": [ - "guerreirogabriel" + "teoli", + "fscholz", + "Verruckt", + "Fernandopsilveira", + "Leandro Mercês Xavier" ] }, - "Tutorial_do_Canvas/Utilização_básica": { - "modified": "2019-03-24T00:10:34.537Z", + "Mozilla/Firefox/Releases/3.5": { + "modified": "2019-03-24T00:00:50.782Z", "contributors": [ - "guerreirogabriel", - "Edgarlaguiar", - "Luiz Carlos Moraes", - "Jes", - "Vitor.blacks" + "wbamberg", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Um_pequeno_exemplo_usando_AJAX": { - "modified": "2019-01-17T03:48:56.314Z", + "Mozilla/Firefox/Releases/3.6": { + "modified": "2019-12-13T20:33:40.975Z", "contributors": [ + "wbamberg", + "SphinxKnight", + "teoli", + "Verruckt", "Leandro Mercês Xavier" ] }, - "Usando_privilégios_expandidos_em_navegadores_Mozilla": { - "modified": "2019-03-23T23:48:48.468Z", + "Mozilla/Firefox/Releases/4": { + "modified": "2019-11-21T00:43:18.363Z", "contributors": [ - "Leandro Mercês Xavier", - "Verruckt" + "wbamberg", + "Sebastianz", + "Prinz_Rana", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Usando_áudio_e_vídeo_no_Firefox": { - "modified": "2019-03-24T00:00:33.796Z", + "Mozilla/Firefox/Releases/5": { + "modified": "2019-03-24T00:09:30.352Z", "contributors": [ - "Leandro Mercês Xavier", + "wbamberg", + "teoli", "Verruckt" ] }, - "Using_the_W3C_DOM_Level_1_Core": { - "modified": "2019-12-13T21:06:18.400Z", + "Mozilla/Firefox/Releases/6": { + "modified": "2019-11-21T00:43:07.958Z", "contributors": [ "wbamberg", "Anonymous", - "ethertank", - "fferracioli" + "teoli", + "Verruckt" ] }, - "Utilizando_meta_tags": { - "modified": "2019-03-23T23:45:18.005Z", + "Glossary/404": { + "modified": "2020-06-25T18:13:41.660Z", "contributors": [ - "eduardoungaratto", - "AndreGazola", - "Fleury" + "joaonunomota" ] }, - "Venkman": { - "modified": "2019-03-24T00:02:38.559Z", + "Glossary/502": { + "modified": "2020-06-25T18:28:46.890Z", "contributors": [ - "SphinxKnight", - "fscholz", - "Verruckt" + "joaonunomota" ] }, - "Web": { - "modified": "2020-05-03T13:08:13.142Z", + "Glossary/Accessibility": { + "modified": "2019-03-18T21:47:01.702Z", "contributors": [ - "Anonymous", - "polonia", - "didi9999", - "joao-neves95", - "carlosrainhaaraujo", - "ethertank" + "Anonymous" ] }, - "Web/API": { - "modified": "2019-03-23T22:39:25.827Z", + "Glossary/AJAX": { + "modified": "2020-06-09T08:11:59.760Z", "contributors": [ - "Anonymous", - "teoli", - "carlosrainhaaraujo" + "joaonunomota" ] }, - "Web/API/API_Autenticacao_Web": { - "modified": "2020-10-15T22:03:06.934Z", + "conflicting/Glossary/API": { + "modified": "2020-10-25T11:15:06.759Z", "contributors": [ - "fscholz", + "Zamalor", + "joaonunomota", "Anonymous" ] }, - "Web/API/API_Entradas_de_Diretoria_e_Ficheiro": { - "modified": "2019-03-18T21:46:51.385Z", + "Glossary/Argument": { + "modified": "2019-03-18T21:17:57.812Z", "contributors": [ "Anonymous" ] }, - "Web/API/API_WebRTC": { - "modified": "2019-03-23T22:12:46.226Z", + "Glossary/ARIA": { + "modified": "2020-06-11T20:31:33.120Z", "contributors": [ - "Anonymous", - "Gurigraphics" + "joaonunomota" ] }, - "Web/API/API_WebRTC/Tirar_fotografias": { - "modified": "2019-03-23T22:12:45.154Z", + "Glossary/Signature": { + "modified": "2019-03-23T22:12:54.952Z", "contributors": [ - "fscholz", - "wbamberg", "Anonymous" ] }, - "Web/API/API_armazenamento": { - "modified": "2020-10-15T22:08:44.199Z", + "Glossary/BigInt": { + "modified": "2020-06-12T14:16:25.328Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Web/API/API_de_Armazenamento_da_Web": { - "modified": "2019-03-18T21:46:00.224Z", + "Glossary/Boolean": { + "modified": "2019-03-18T21:45:55.769Z", "contributors": [ "Anonymous" ] }, - "Web/API/API_de_canvas": { - "modified": "2019-03-23T22:01:56.072Z", + "Glossary/Entity_header": { + "modified": "2020-07-25T18:10:04.388Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Web/API/API_de_canvas/Tutorial": { - "modified": "2019-03-18T21:24:18.272Z", + "Glossary/Cache": { + "modified": "2020-06-07T12:38:40.205Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Web/API/API_do_Estado_da_Bateria": { - "modified": "2019-03-18T21:29:01.750Z", + "Glossary/CIA": { + "modified": "2020-06-11T20:33:04.482Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Web/API/API_transmissoes_multimedia": { - "modified": "2019-03-23T22:12:44.463Z", + "Glossary/Compile": { + "modified": "2019-03-23T22:01:24.745Z", "contributors": [ "Anonymous" ] }, - "Web/API/Animation": { - "modified": "2020-10-15T22:09:54.586Z", + "Glossary/GZip_compression": { + "modified": "2019-03-18T21:46:58.480Z", "contributors": [ "Anonymous" ] }, - "Web/API/AudioNode": { - "modified": "2019-03-23T22:12:47.243Z", + "Glossary/CRLF": { + "modified": "2020-06-12T13:10:14.562Z", "contributors": [ - "trusktr" + "joaonunomota" ] }, - "Web/API/Blob": { - "modified": "2020-10-15T22:32:41.617Z", + "Glossary/CRUD": { + "modified": "2020-06-11T20:38:17.457Z", "contributors": [ - "Yayure" + "joaonunomota" ] }, - "Web/API/Blob/Blob": { - "modified": "2020-11-16T10:19:01.877Z", + "Glossary/DOM": { + "modified": "2019-10-08T09:31:32.173Z", "contributors": [ - "joaonunomota" + "Anonymous", + "GoToLoop" ] }, - "Web/API/Blob/size": { - "modified": "2020-10-15T22:32:50.862Z", + "Glossary/ECMA": { + "modified": "2019-03-23T22:30:19.413Z", "contributors": [ - "joaonunomota" + "GoToLoop" ] }, - "Web/API/Blob/type": { - "modified": "2020-10-15T22:33:10.637Z", + "Glossary/Main_Axis": { + "modified": "2019-04-08T06:57:09.138Z", "contributors": [ - "joaonunomota" + "diogo-panaca" ] }, - "Web/API/Client": { - "modified": "2020-10-15T22:03:06.133Z", + "Glossary/Cross_Axis": { + "modified": "2019-04-08T06:58:12.600Z", + "contributors": [ + "diogo-panaca" + ] + }, + "Glossary/Element": { + "modified": "2019-03-18T21:18:07.800Z", "contributors": [ "Anonymous" ] }, - "Web/API/CloseEvent": { - "modified": "2020-10-15T22:32:54.165Z", + "Glossary/Tag": { + "modified": "2019-03-23T22:01:42.150Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/CloseEvent/CloseEvent": { - "modified": "2020-10-15T22:32:51.831Z", + "Glossary/WebExtensions": { + "modified": "2019-03-18T21:37:24.767Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/DOMString": { - "modified": "2020-08-12T17:28:52.261Z", + "Glossary/Favicon": { + "modified": "2020-04-30T05:49:13.226Z", "contributors": [ - "joaonunomota" + "adilsonmandlate" ] }, - "Web/API/Document": { - "modified": "2019-07-02T18:26:33.145Z", + "Glossary/Flexbox": { + "modified": "2019-04-08T06:38:43.855Z", "contributors": [ - "Anonymous", - "chrisdavidmills" + "diogo-panaca" ] }, - "Web/API/Document.dir": { - "modified": "2019-03-23T23:22:09.179Z", + "Glossary/SCM": { + "modified": "2020-06-13T09:32:48.386Z", "contributors": [ - "khalid32", - "carlosrainhaaraujo" + "joaonunomota" ] }, - "Web/API/Document/querySelector": { - "modified": "2020-10-15T22:32:00.428Z", + "Glossary/Git": { + "modified": "2020-06-13T09:39:03.707Z", "contributors": [ "joaonunomota" ] }, - "Web/API/Document/visibilitychange_event": { - "modified": "2019-04-08T07:39:14.855Z", + "Glossary/Hypertext": { + "modified": "2019-03-23T22:01:40.877Z", "contributors": [ - "irenesmith", "Anonymous" ] }, - "Web/API/Eventos_de_Luz_Ambiente": { - "modified": "2020-10-15T22:07:41.555Z", + "Glossary/HTML": { + "modified": "2019-03-23T22:13:01.389Z", "contributors": [ "Anonymous" ] }, - "Web/API/File": { - "modified": "2020-10-15T22:32:24.351Z", + "Glossary/IANA": { + "modified": "2020-06-07T13:01:45.679Z", "contributors": [ - "Yayure" + "joaonunomota" ] }, - "Web/API/File/File": { - "modified": "2020-10-15T22:33:11.221Z", + "Glossary/Idempotent": { + "modified": "2019-07-11T10:59:59.365Z", + "contributors": [ + "FilipePintoReis" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:13:28.151Z", + "contributors": [ + "peterbe", + "joaonunomota", + "SphinxKnight", + "Anonymous", + "wbamberg" + ] + }, + "Glossary/IndexedDB": { + "modified": "2019-03-23T22:30:22.618Z", + "contributors": [ + "GoToLoop" + ] + }, + "Glossary/ISP": { + "modified": "2020-07-16T14:02:41.646Z", "contributors": [ "joaonunomota" ] }, - "Web/API/File/fileName": { - "modified": "2020-08-08T18:37:05.171Z", + "Glossary/Lazy_load": { + "modified": "2020-06-09T04:59:38.616Z", "contributors": [ "joaonunomota" ] }, - "Web/API/File/fileSize": { - "modified": "2020-08-08T18:32:45.995Z", + "Glossary/Metadata": { + "modified": "2019-03-18T21:46:57.702Z", + "contributors": [ + "Anonymous" + ] + }, + "Glossary/MitM": { + "modified": "2019-03-18T21:29:48.838Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/File/getAsBinary": { - "modified": "2020-08-11T04:16:46.870Z", + "Glossary/Block_cipher_mode_of_operation": { + "modified": "2020-07-19T20:41:55.171Z", "contributors": [ "joaonunomota" ] }, - "Web/API/File/getAsDataURL": { - "modified": "2020-08-08T18:57:17.906Z", + "Glossary/Engine": { + "modified": "2019-03-23T22:24:10.538Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/File/getAsText": { - "modified": "2020-08-11T05:01:57.694Z", + "Glossary/Browser": { + "modified": "2019-03-23T22:01:42.054Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/File/lastModified": { - "modified": "2020-10-17T08:26:52.375Z", + "Glossary/Node.js": { + "modified": "2019-03-23T22:30:21.428Z", "contributors": [ - "joaonunomota" + "Anonymous", + "GoToLoop" ] }, - "Web/API/File/lastModifiedDate": { - "modified": "2020-10-15T22:32:46.653Z", + "Glossary/Object": { + "modified": "2019-03-18T21:46:57.221Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/File/mozFullPath": { - "modified": "2020-08-08T18:43:12.882Z", + "Glossary/OOP": { + "modified": "2019-03-18T21:47:01.837Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/File/name": { - "modified": "2020-10-15T22:32:23.452Z", + "Glossary/OTA": { + "modified": "2019-03-23T22:30:21.528Z", "contributors": [ - "joaonunomota" + "GoToLoop" ] }, - "Web/API/File/type": { - "modified": "2020-10-15T22:32:40.925Z", + "Glossary/Polyfill": { + "modified": "2019-03-23T22:04:04.730Z", "contributors": [ - "joaonunomota" + "pedrodfcosta" ] }, - "Web/API/File/webkitRelativePath": { - "modified": "2020-11-17T19:01:45.948Z", + "Glossary/Prototype-based_programming": { + "modified": "2019-03-18T21:47:01.974Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/FileReader": { - "modified": "2019-03-18T21:16:40.698Z", + "Glossary/Object_reference": { + "modified": "2019-03-18T21:18:01.122Z", "contributors": [ - "Sheppy" + "Anonymous" ] }, - "Web/API/FileReader/abort": { - "modified": "2020-10-15T22:32:42.433Z", + "Glossary/Server": { + "modified": "2019-03-23T22:30:25.987Z", "contributors": [ - "joaonunomota" + "GoToLoop" ] }, - "Web/API/FileReader/error": { - "modified": "2020-10-15T22:32:24.839Z", + "Glossary/UTF-8": { + "modified": "2019-03-18T20:40:41.143Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/FileReader/readAsArrayBuffer": { - "modified": "2020-10-15T22:33:15.086Z", + "Glossary/Value": { + "modified": "2019-03-18T21:18:07.651Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/FileReader/readAsBinaryString": { - "modified": "2020-10-15T21:37:25.343Z", + "Glossary/Visual_Viewport": { + "modified": "2020-06-10T13:52:57.763Z", "contributors": [ - "joaonunomota", - "DouglasValdo" + "joaonunomota" ] }, - "Web/API/FileReader/readAsDataURL": { - "modified": "2020-10-15T22:34:36.565Z", + "Glossary/Viewport": { + "modified": "2020-06-10T11:59:40.452Z", "contributors": [ "joaonunomota" ] }, - "Web/API/FileReader/readAsText": { - "modified": "2020-10-15T22:34:36.289Z", + "Glossary/WebRTC": { + "modified": "2020-06-07T12:24:38.989Z", "contributors": [ "joaonunomota" ] }, - "Web/API/FileReader/readyState": { - "modified": "2020-11-15T12:35:45.700Z", + "Glossary/WebVTT": { + "modified": "2020-06-12T12:26:29.739Z", "contributors": [ "joaonunomota" ] }, - "Web/API/FileReader/result": { - "modified": "2020-10-15T22:33:14.048Z", + "Glossary/WHATWG": { + "modified": "2020-06-12T08:44:24.569Z", "contributors": [ "joaonunomota" ] }, - "Web/API/Geolocation": { - "modified": "2019-03-23T22:01:56.989Z", + "Glossary/World_Wide_Web": { + "modified": "2019-03-18T21:46:52.018Z", "contributors": [ "Anonymous" ] }, - "Web/API/Geolocation/Utilizacao_da_geolocalizacao": { - "modified": "2020-10-15T21:59:09.308Z", + "Glossary/Wrapper": { + "modified": "2019-03-18T21:17:53.688Z", "contributors": [ "Anonymous" ] }, - "Web/API/MathMLElement": { - "modified": "2020-10-15T22:33:03.137Z", + "Glossary/XML": { + "modified": "2019-03-23T22:01:48.146Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/MediaDevices": { - "modified": "2019-03-23T22:01:16.705Z", + "Mozilla/Developer_guide": { + "modified": "2019-03-24T00:00:34.143Z", "contributors": [ - "jpmedley" + "SphinxKnight", + "teoli", + "Leandro Mercês Xavier" ] }, - "Web/API/MessageEvent": { - "modified": "2020-10-15T22:32:51.894Z", + "Web/HTML/Element/figure": { + "modified": "2019-03-24T00:07:13.574Z", "contributors": [ - "joaonunomota" + "wbamberg", + "jwhitlock", + "teoli", + "f.sanxz" ] }, - "Web/API/Metadados": { - "modified": "2019-03-18T21:46:51.094Z", + "orphaned/Java_em_Extensões_do_Firefox": { + "modified": "2019-03-23T23:44:51.954Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "RuiMaciel" ] }, - "Web/API/NavigatorOnLine": { - "modified": "2019-03-23T22:01:59.308Z", + "orphaned/Javascript_orientado_a_objetos": { + "modified": "2019-03-24T00:11:38.222Z", "contributors": [ - "chrisdavidmills" + "flowck", + "Leandro Mercês Xavier" ] }, - "Web/API/NavigatorOnLine/Eventos_online_e_offline": { - "modified": "2019-03-23T23:49:32.329Z", + "Web/JavaScript/Shells": { + "modified": "2019-03-23T23:49:32.077Z", "contributors": [ "SphinxKnight", - "chrisdavidmills", - "Leandro Mercês Xavier", - "Roli", "Verruckt" ] }, - "Web/API/Node": { - "modified": "2019-03-23T23:22:11.442Z", + "Games": { + "modified": "2019-09-09T15:34:18.541Z", "contributors": [ - "khalid32", - "carlosrainhaaraujo" + "SphinxKnight", + "Aschlla", + "wbamberg", + "rPetas", + "fscholz", + "Anonymous" ] }, - "Web/API/Notifications_API": { - "modified": "2019-03-23T22:42:31.459Z", + "Games/Tutorials": { + "modified": "2019-03-18T21:30:51.808Z", "contributors": [ - "Sebastianz" + "wbamberg", + "Anonymous" ] }, - "Web/API/Notifications_API/Utilizar_API_Notificações": { - "modified": "2019-03-23T22:42:28.564Z", + "Learn/Accessibility": { + "modified": "2020-07-21T16:29:40.277Z", "contributors": [ + "joaonunomota", "Anonymous" ] }, - "Web/API/Page_Visibility_API": { - "modified": "2019-03-18T21:42:30.274Z", + "Learn/Getting_started_with_the_web/The_web_and_web_standards": { + "modified": "2020-08-15T18:38:33.155Z", "contributors": [ + "joaonunomota", "Anonymous" ] }, - "Web/API/Push_API": { - "modified": "2019-03-18T21:38:04.203Z", + "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { + "modified": "2020-07-16T22:34:19.154Z", "contributors": [ + "joaonunomota", + "diogo-panaca", "Anonymous" ] }, - "Web/API/Service_Worker_API": { - "modified": "2019-10-08T09:27:10.284Z", + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-07-21T16:44:13.094Z", "contributors": [ + "joaonunomota", + "gabodin", "Anonymous" ] }, - "Web/API/Service_Worker_API/Using_Service_Workers": { - "modified": "2019-10-08T09:25:19.208Z", + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-08-17T15:28:30.827Z", "contributors": [ + "joaonunomota", + "diogo-panaca", "Anonymous" ] }, - "Web/API/SharedWorker": { - "modified": "2020-10-15T21:59:02.760Z", + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-08-17T15:31:44.919Z", "contributors": [ "joaonunomota", + "diogo-panaca", "Anonymous" ] }, - "Web/API/Sistema_de_ficheiros": { - "modified": "2020-10-15T21:46:44.138Z", + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-08-15T18:37:16.181Z", "contributors": [ "joaonunomota", - "Anonymous" + "diogo-panaca", + "Anonymous", + "mrsilvino" ] }, - "Web/API/URLSearchParams": { - "modified": "2019-10-16T11:18:10.261Z", + "Learn/Getting_started_with_the_web": { + "modified": "2020-11-09T11:59:04.208Z", "contributors": [ - "NunoJSantos", - "goldyteam" + "joaonunomota", + "Anonymous" ] }, - "Web/API/WebGLRenderingContext": { - "modified": "2020-10-15T21:59:21.576Z", + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-07-23T08:51:53.513Z", "contributors": [ + "joaonunomota", + "diogo-panaca", + "Jacgrillon", "Anonymous" ] }, - "Web/API/WebGL_API": { - "modified": "2020-10-15T21:46:44.276Z", + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-07-20T16:01:08.653Z", "contributors": [ + "joaonunomota", + "diogo-panaca", "Anonymous" ] }, - "Web/API/WebGL_API/Constantes": { - "modified": "2019-03-23T22:01:30.802Z", + "Learn/Getting_started_with_the_web/Publishing_your_website": { + "modified": "2020-08-17T15:33:14.323Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Web/API/WebGL_API/Dados": { - "modified": "2019-03-23T22:01:33.105Z", + "Learn/CSS/Styling_text": { + "modified": "2020-07-16T22:26:00.007Z", "contributors": [ "Anonymous" ] }, - "Web/API/WebGL_API/Tipos": { - "modified": "2019-03-23T22:01:33.867Z", + "Learn/CSS/Howto/CSS_FAQ": { + "modified": "2020-07-16T22:25:45.869Z", "contributors": [ "Anonymous" ] }, - "Web/API/WebGL_API/Utilizar_Extensões": { - "modified": "2019-03-23T22:01:32.555Z", + "Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image": { + "modified": "2020-07-16T22:22:43.567Z", "contributors": [ "Anonymous" ] }, - "Web/API/WebSocket": { - "modified": "2020-10-15T22:32:53.586Z", + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:30.740Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/API/WebSocket/WebSocket": { - "modified": "2020-10-15T22:33:03.555Z", + "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { + "modified": "2020-07-16T22:23:46.700Z", "contributors": [ - "joaonunomota" + "diogo-panaca" ] }, - "Web/API/WebSockets_API": { - "modified": "2020-10-15T22:32:45.764Z", + "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter": { + "modified": "2020-07-16T22:23:13.979Z", "contributors": [ - "joaonunomota" + "diogo-panaca" ] }, - "Web/API/WebSockets_API/Escrever_aplicação_cliente_de_WebSocket": { - "modified": "2020-08-11T17:49:59.287Z", + "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { + "modified": "2020-07-16T22:24:15.706Z", "contributors": [ - "joaonunomota" + "diogo-panaca" ] }, - "Web/API/WebSockets_API/Escrever_servidores_de_WebSocket": { - "modified": "2020-09-18T06:53:14.308Z", + "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { + "modified": "2020-07-16T22:24:08.727Z", "contributors": [ - "blunderous", - "joaonunomota" + "diogo-panaca" ] }, - "Web/API/WebSockets_API/Escrever_um_servidor_WebSocket_em_C": { - "modified": "2020-12-04T13:57:23.773Z", + "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:20.585Z", "contributors": [ - "peterbe", - "joaonunomota" + "diogo-panaca" ] }, - "Web/API/WebSockets_API/Escrever_um_servidor_WebSocket_em_Java": { - "modified": "2020-08-24T20:03:27.920Z", + "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { + "modified": "2020-07-16T22:23:57.791Z", "contributors": [ - "joaonunomota" + "diogo-panaca" ] }, - "Web/API/Web_Audio_API": { - "modified": "2019-03-23T22:12:41.433Z", + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:52.576Z", "contributors": [ - "Anonymous", - "erikadoyle" + "diogo-panaca", + "joaomc", + "Anonymous" ] }, - "Web/API/Web_Audio_API/Utilizar_api_audio_web": { - "modified": "2019-03-23T22:12:48.158Z", + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-07-16T22:23:06.412Z", "contributors": [ + "cmccarreiro", "Anonymous" ] }, - "Web/API/Web_Workers_API": { - "modified": "2019-03-23T22:02:18.370Z", + "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { + "modified": "2020-07-16T22:23:23.598Z", "contributors": [ - "VsevolodGolovanov" + "Anonymous" ] }, - "Web/API/Web_Workers_API/Functions_and_classes_available_to_workers": { - "modified": "2019-03-23T22:02:20.388Z", + "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page": { + "modified": "2020-07-16T22:25:08.049Z", "contributors": [ + "diegobarcelar", "Anonymous" ] }, - "Web/API/Web_Workers_API/Utilizacao_de_web_workers": { - "modified": "2019-03-23T22:02:15.177Z", + "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { + "modified": "2020-07-16T22:24:56.333Z", "contributors": [ - "allanfoppa", "Anonymous" ] }, - "Web/API/Window": { - "modified": "2019-03-23T22:01:06.730Z", + "Learn/HTML/Multimedia_and_embedding": { + "modified": "2020-07-16T22:24:28.825Z", "contributors": [ "Anonymous", - "goeffthomas" + "chrisdavidmills" ] }, - "Web/API/Window/barra_lateral": { - "modified": "2019-03-18T21:37:22.693Z", + "Learn/HTML/Tables/Structuring_planet_data": { + "modified": "2020-07-16T22:25:30.543Z", "contributors": [ "Anonymous" ] }, - "Web/API/Window/console": { - "modified": "2019-03-18T21:44:07.205Z", + "Learn/HTML/Tables/Advanced": { + "modified": "2020-07-16T22:25:27.234Z", "contributors": [ "Anonymous" ] }, - "Web/API/Window/open": { - "modified": "2019-03-23T22:01:10.139Z", + "Learn/HTML/Tables/Basics": { + "modified": "2020-07-16T22:25:22.105Z", "contributors": [ - "SphinxKnight", + "diogo-panaca", "Anonymous" ] }, - "Web/API/Window/postMessage": { - "modified": "2019-06-04T14:57:56.992Z", + "Learn/JavaScript/First_steps": { + "modified": "2020-07-16T22:29:54.837Z", "contributors": [ - "Anonymous" + "Anonymous", + "Elllenn" ] }, - "Web/API/Worker": { - "modified": "2019-03-23T22:02:29.683Z", + "Learn/Server-side/Django": { + "modified": "2020-07-16T22:36:35.255Z", "contributors": [ "Anonymous" ] }, - "Web/API/XMLHttpRequest": { - "modified": "2020-10-15T21:59:27.066Z", + "Learn/Server-side/Express_Nodejs/development_environment": { + "modified": "2020-07-16T22:38:00.728Z", "contributors": [ - "fscholz", "Anonymous" ] }, - "Web/API/notification": { - "modified": "2019-03-23T22:51:36.861Z", + "Learn/Server-side/Express_Nodejs": { + "modified": "2020-07-16T22:37:54.969Z", "contributors": [ "Anonymous", - "Japroriple" + "joao-neves95" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques": { - "modified": "2020-09-18T21:14:54.007Z", + "Learn/Server-side/Express_Nodejs/Introduction": { + "modified": "2020-07-16T22:38:13.187Z", "contributors": [ - "Wind1808" + "Anonymous" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_role_status": { - "modified": "2020-09-19T05:54:31.819Z", + "Learn/Server-side": { + "modified": "2020-07-16T22:36:01.831Z", "contributors": [ - "Painatalman" + "Anonymous", + "joao-neves95" ] }, - "Web/Acessibilidade": { - "modified": "2019-09-09T14:20:12.758Z", + "Learn/Server-side/Node_server_without_framework": { + "modified": "2020-07-16T22:36:06.037Z", "contributors": [ - "SphinxKnight", "Anonymous", - "teoli", - "Verruckt", - "Kayalemao", - "RuiMaciel", - "Karla pa", - "GrandeBuzina" + "joao-neves95" ] }, - "Web/Acessibilidade/ARIA": { - "modified": "2019-03-18T21:47:01.413Z", + "Learn/Common_questions/How_does_the_Internet_work": { + "modified": "2020-07-16T22:35:37.920Z", "contributors": [ "Anonymous" ] }, - "Web/CSS": { - "modified": "2020-06-10T07:53:42.003Z", + "Learn/Common_questions/set_up_a_local_testing_server": { + "modified": "2020-07-16T22:35:53.519Z", "contributors": [ - "joaonunomota", - "SphinxKnight", - "Anonymous", - "Fernando-SilvaBR", - "albertocastro", - "teoli", - "Verruckt", - "Leandro Mercês Xavier", - "Takenbot", - "RuiMaciel" + "Anonymous" ] }, - "Web/CSS/:after": { - "modified": "2019-03-24T00:00:16.761Z", + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:26.594Z", "contributors": [ - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/:before": { - "modified": "2019-03-24T00:00:19.264Z", + "Learn/Common_questions/What_is_a_domain_name": { + "modified": "2020-07-16T22:35:44.710Z", "contributors": [ - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/@font-face": { - "modified": "2019-03-23T23:13:15.857Z", + "Learn/Common_questions/What_is_a_web_server": { + "modified": "2020-07-16T22:35:31.962Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "Anonymous" ] }, - "Web/CSS/@import": { - "modified": "2019-03-23T23:47:07.977Z", + "Learn/Common_questions/What_is_a_URL": { + "modified": "2020-07-16T22:35:30.214Z", "contributors": [ - "Anonymous", - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/@media": { - "modified": "2020-04-25T11:58:21.640Z", + "Learn/Common_questions/Pages_sites_servers_and_search_engines": { + "modified": "2020-07-16T22:35:40.437Z", "contributors": [ - "myspeleo", - "diogo-panaca", - "Anonymous", - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/At-rule": { - "modified": "2019-03-23T22:24:56.828Z", + "Learn/Tools_and_testing/Cross_browser_testing/Accessibility": { + "modified": "2020-09-24T09:24:04.432Z", "contributors": [ - "Anonymous" + "Painatalman" ] }, - "Web/CSS/CSS_Background_and_Borders": { - "modified": "2019-03-23T22:44:16.974Z", + "Learn/Tools_and_testing/Cross_browser_testing": { + "modified": "2020-07-16T22:39:01.215Z", "contributors": [ - "teoli" + "wbamberg", + "Anonymous" ] }, - "Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo": { - "modified": "2019-03-24T00:04:47.389Z", + "Glossary/Localization": { + "modified": "2019-03-24T00:03:56.319Z", "contributors": [ "Anonymous", - "teoli", - "Verruckt" + "fscholz", + "Verruckt", + "Kayalemao", + "Tagl" ] }, - "Web/CSS/CSS_Box_Model": { - "modified": "2019-03-23T22:12:41.880Z", + "orphaned/Localizar_descrições_de_extensões": { + "modified": "2019-03-24T00:02:35.408Z", "contributors": [ - "Sebastianz" + "SphinxKnight", + "fscholz", + "Verruckt" ] }, - "Web/CSS/CSS_Box_Model/Introducao_modelo_caixa_CSS": { - "modified": "2019-03-23T22:12:42.813Z", + "orphaned/Manipuladores_de_protocolo_web": { + "modified": "2019-03-23T23:52:53.802Z", "contributors": [ - "Anonymous" + "Verruckt", + "Fernandopsilveira", + "Leandro Mercês Xavier" ] }, - "Web/CSS/CSS_Colors/Ferramenta_selecao_cor": { - "modified": "2019-04-28T14:53:13.655Z", + "conflicting/MDN/Contribute": { + "modified": "2020-02-19T18:51:00.800Z", "contributors": [ - "diogo-panaca" + "jswisher", + "Anonymous" ] }, - "Web/CSS/CSS_Columns": { - "modified": "2019-03-18T21:38:41.627Z", + "MDN/At_ten/History_of_MDN": { + "modified": "2019-03-23T22:09:33.028Z", "contributors": [ - "mfluehr" + "Anonymous" ] }, - "Web/CSS/CSS_Flexible_Box_Layout": { - "modified": "2019-03-18T21:44:02.737Z", + "MDN/At_ten": { + "modified": "2019-03-23T22:50:14.757Z", "contributors": [ - "rachelandrew" + "Anonymous", + "Matoplays" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/alinhamento_de_itens_num_recipiente_flex": { - "modified": "2019-06-11T07:33:08.010Z", + "orphaned/MDN/Community/Conversations": { + "modified": "2019-01-16T21:51:19.575Z", "contributors": [ - "BIGBenfica9", + "wbamberg", "Anonymous" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/casos_de_utilizacao_tipicos_do_flexbox": { - "modified": "2019-03-18T21:43:55.771Z", + "orphaned/MDN/Community/Doc_sprints": { + "modified": "2019-03-18T21:19:58.227Z", "contributors": [ "Anonymous" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/ordenacao_dos_itens_flex": { - "modified": "2019-07-22T03:58:30.968Z", + "orphaned/MDN/Community": { + "modified": "2019-09-11T08:01:31.979Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "Anonymous", + "wbamberg" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/relação_do_flexbox_com_outros_métodos_de_layout": { - "modified": "2019-03-18T21:43:58.441Z", + "orphaned/MDN/Community/Whats_happening": { + "modified": "2019-03-23T22:42:12.854Z", "contributors": [ + "wbamberg", "Anonymous" ] }, - "Web/CSS/CSS_Tipos": { - "modified": "2019-03-18T21:23:17.150Z", + "orphaned/MDN/Community/Working_in_community": { + "modified": "2020-02-19T19:07:51.992Z", "contributors": [ + "jswisher", + "wbamberg", "Anonymous" ] }, - "Web/CSS/Como_começar": { - "modified": "2019-03-23T23:44:54.310Z", + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2020-03-02T17:27:21.266Z", "contributors": [ - "Anonymous", - "teoli", - "Leandro Mercês Xavier", - "Verruckt", - "Pilinio", - "Luisvulcanis" + "carlostojal", + "wbamberg", + "Anonymous" ] }, - "Web/CSS/Como_começar/CSS_legível": { - "modified": "2019-03-24T00:00:36.923Z", + "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-03-23T22:08:19.737Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Luis Henrique Sousa", - "Leandro Mercês Xavier" + "wbamberg", + "Saconte", + "Anonymous" ] }, - "Web/CSS/Como_começar/Caixas": { - "modified": "2019-03-24T00:00:34.956Z", + "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-05-13T07:55:49.326Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "Anonymous" ] }, - "Web/CSS/Como_começar/Cascata_e_herança": { - "modified": "2019-03-24T00:00:35.429Z", + "orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { + "modified": "2020-02-28T22:23:56.590Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "wbamberg", + "Anonymous" ] }, - "Web/CSS/Como_começar/Como_o_CSS_trabalha": { - "modified": "2019-03-24T00:00:37.691Z", + "MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary": { + "modified": "2019-03-23T22:12:45.769Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "wbamberg", + "maarysantos", + "Anonymous" ] }, - "Web/CSS/Como_começar/Conteúdo": { - "modified": "2020-07-16T22:25:48.413Z", + "MDN/Contribute/Howto/Report_a_problem": { + "modified": "2020-01-07T12:19:34.416Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "peterbe", + "wbamberg", + "Anonymous" ] }, - "Web/CSS/Como_começar/Cor": { - "modified": "2019-03-24T00:00:35.276Z", + "MDN/Contribute/Howto/Create_and_edit_pages": { + "modified": "2019-04-04T11:57:15.432Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "diogo-panaca" ] }, - "Web/CSS/Como_começar/Disposição": { - "modified": "2019-03-24T00:00:37.327Z", + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-03-23T22:42:11.494Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "Anonymous", + "wbamberg" ] }, - "Web/CSS/Como_começar/Estilos_de_texto": { - "modified": "2019-03-24T00:00:39.580Z", + "MDN/Contribute/Howto/Tag": { + "modified": "2019-11-13T11:32:17.983Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier", - "Luis Henrique Sousa" + "Anonymous", + "wbamberg" ] }, - "Web/CSS/Como_começar/Gráficos_SVG": { - "modified": "2019-03-24T00:00:34.584Z", + "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T22:20:12.878Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "Anonymous", + "wbamberg", + "samlopes_br" ] }, - "Web/CSS/Como_começar/JavaScript": { - "modified": "2019-03-24T00:00:40.211Z", + "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": { + "modified": "2019-01-17T01:35:48.693Z", "contributors": [ - "fscholz", - "teoli", - "ethertank", - "Verruckt", - "Leandro Mercês Xavier" + "wbamberg", + "Anonymous" ] }, - "Web/CSS/Como_começar/Listas": { - "modified": "2019-03-24T00:00:36.171Z", + "orphaned/MDN/Contribute/Howto/Be_a_beta_tester": { + "modified": "2019-03-23T22:09:29.860Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Luis Henrique Sousa", - "Leandro Mercês Xavier" + "wbamberg", + "Anonymous" ] }, - "Web/CSS/Como_começar/Mídia": { - "modified": "2019-03-24T00:15:51.724Z", + "orphaned/MDN/Editor/Basics": { + "modified": "2020-09-30T15:43:23.869Z", "contributors": [ + "chrisdavidmills", "Anonymous", - "fscholz", - "teoli", - "maggots", - "Verruckt", - "Leandro Mercês Xavier" + "wbamberg" ] }, - "Web/CSS/Como_começar/O_que_é_CSS": { - "modified": "2019-03-24T00:00:33.943Z", + "orphaned/MDN/Editor": { + "modified": "2020-09-30T15:43:23.702Z", "contributors": [ - "Sebastianz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier", - "Pilinio" + "chrisdavidmills", + "Anonymous", + "wbamberg" ] }, - "Web/CSS/Como_começar/O_que_é_CSS?": { - "modified": "2019-03-23T23:43:00.605Z", + "MDN/Guidelines/Conventions_definitions": { + "modified": "2020-09-30T15:31:29.524Z", "contributors": [ - "teoli", - "Leandro Mercês Xavier" + "chrisdavidmills", + "jswisher", + "Anonymous", + "wbamberg" ] }, - "Web/CSS/Como_começar/Porque_usar_CSS": { - "modified": "2019-03-24T00:00:39.116Z", + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-09-30T15:31:29.280Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier", - "Pilinio" + "chrisdavidmills", + "joaonunomota", + "jswisher", + "wbamberg", + "Anonymous" ] }, - "Web/CSS/Como_começar/Seletores": { - "modified": "2019-03-24T00:00:36.764Z", + "MDN/Guidelines/Does_this_belong_on_MDN": { + "modified": "2020-09-30T15:31:29.806Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "chrisdavidmills", + "jswisher", + "Anonymous" ] }, - "Web/CSS/Como_começar/Tabelas": { - "modified": "2019-03-24T00:00:35.865Z", + "MDN/Yari": { + "modified": "2019-09-09T15:53:50.658Z", "contributors": [ - "fscholz", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "SphinxKnight", + "Anonymous", + "wbamberg" ] }, - "Web/CSS/Consulta_de_mídia": { - "modified": "2019-04-09T16:57:57.913Z", + "MDN/About": { + "modified": "2019-09-10T08:55:19.644Z", "contributors": [ - "diogo-panaca", + "SphinxKnight", "Anonymous", - "Sebastianz", - "mrstork", - "teoli", - "Verruckt", - "Leandro Mercês Xavier" + "wbamberg", + "Dilson", + "jswisher" ] }, - "Web/CSS/Consultas_de_media": { - "modified": "2020-10-15T22:17:12.623Z", + "MDN/Contribute/Howto/Write_an_API_reference/Sidebars": { + "modified": "2020-09-30T12:57:10.465Z", "contributors": [ - "diogo-panaca" + "chrisdavidmills", + "wbamberg", + "Anonymous" ] }, - "Web/CSS/Folhas_de_estilo_alternativas": { - "modified": "2019-03-23T23:53:49.046Z", + "orphaned/MDN/Structures/API_references": { + "modified": "2020-09-30T12:57:10.288Z", "contributors": [ - "teoli", - "FelipeMorais" + "chrisdavidmills", + "wbamberg" ] }, - "Web/CSS/Média_paginada": { - "modified": "2019-03-23T22:24:57.103Z", + "orphaned/MDN/Structures/API_references/What_does_an_API_reference_need": { + "modified": "2020-09-30T12:57:10.634Z", "contributors": [ + "chrisdavidmills", + "wbamberg", "Anonymous" ] }, - "Web/CSS/Pseudoclasses": { - "modified": "2019-03-18T21:15:25.227Z", + "MDN/Structures/Live_samples": { + "modified": "2020-09-30T12:57:10.000Z", "contributors": [ + "chrisdavidmills", + "wbamberg", "Anonymous" ] }, - "Web/CSS/Pseudoelementos": { - "modified": "2019-03-18T21:23:11.174Z", + "orphaned/MDN/Tools/Template_editing": { + "modified": "2020-09-30T16:53:23.123Z", "contributors": [ + "chrisdavidmills", + "wbamberg", "Anonymous" ] }, - "Web/CSS/Referência_CSS": { - "modified": "2020-07-20T13:36:56.218Z", - "contributors": [ - "joaonunomota", - "Anonymous", - "teoli", - "Moacir Bispo", - "Verruckt" - ] - }, - "Web/CSS/Replaced_element": { - "modified": "2019-03-23T22:32:04.311Z", + "orphaned/MDN/Tools/Page_watching": { + "modified": "2020-09-30T16:53:22.646Z", "contributors": [ - "andrekutianski", - "josketres" + "chrisdavidmills", + "wbamberg", + "Anonymous" ] }, - "Web/CSS/Shorthand_properties": { - "modified": "2019-03-18T21:44:05.610Z", + "orphaned/MDN/Troubleshooting": { + "modified": "2020-09-30T16:58:33.426Z", "contributors": [ + "chrisdavidmills", + "wbamberg", "Anonymous" ] }, - "Web/CSS/Usando_transformações_CSS": { - "modified": "2019-03-24T00:04:50.895Z", + "orphaned/Melhorias_do_Gerenciador_de_Downloads_no_Firefox_3": { + "modified": "2019-01-16T14:39:25.788Z", "contributors": [ - "teoli", - "Verruckt", - "Leandro Mercês Xavier", - "Jürgen Jeka" + "fscholz", + "Verruckt" ] }, - "Web/CSS/background": { - "modified": "2019-03-23T23:46:35.449Z", + "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { + "modified": "2019-03-18T21:04:11.435Z", "contributors": [ - "SphinxKnight", - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/background-attachment": { - "modified": "2019-03-23T23:12:53.495Z", + "Mozilla/Add-ons/WebExtensions/Your_second_WebExtension": { + "modified": "2019-03-18T21:03:02.346Z", "contributors": [ - "SphinxKnight", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/background-color": { - "modified": "2019-03-23T22:16:20.029Z", + "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": { + "modified": "2019-03-18T21:03:04.427Z", "contributors": [ - "SphinxKnight", - "teoli", - "Verruckt", - "ethertank" + "Anonymous" ] }, - "Web/CSS/background-image": { - "modified": "2019-03-23T23:47:07.090Z", + "Mozilla/Add-ons/WebExtensions/API/storage": { + "modified": "2020-10-15T21:59:48.396Z", "contributors": [ - "SphinxKnight", - "teoli", - "Verruckt" + "wbamberg", + "Anonymous" ] }, - "Web/CSS/background-position": { - "modified": "2019-03-23T23:47:05.241Z", + "Mozilla/Add-ons/WebExtensions/API/devtools/panels": { + "modified": "2020-10-15T21:59:48.885Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/background-repeat": { - "modified": "2019-03-18T21:15:14.751Z", + "orphaned/Mozilla/Add-ons/WebExtensions/User_experience_best_practices": { + "modified": "2019-03-18T21:02:27.071Z", "contributors": [ - "SphinxKnight", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border": { - "modified": "2019-01-16T15:59:54.146Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on": { + "modified": "2019-03-18T20:56:20.829Z", "contributors": [ - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/border-bottom": { - "modified": "2019-03-23T23:47:10.248Z", + "Mozilla/Add-ons/WebExtensions/Match_patterns": { + "modified": "2020-10-15T22:25:44.918Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt" + "martimafonso" ] }, - "Web/CSS/border-bottom-color": { - "modified": "2019-03-23T23:47:06.644Z", + "Mozilla/Add-ons/WebExtensions/What_next_": { + "modified": "2019-03-18T21:01:48.060Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-bottom-style": { - "modified": "2019-03-23T23:47:07.572Z", + "Mozilla/Add-ons/WebExtensions/Examples": { + "modified": "2019-03-18T21:03:01.761Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-bottom-width": { - "modified": "2019-03-23T23:47:10.824Z", + "orphaned/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID": { + "modified": "2019-03-18T20:47:01.907Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-collapse": { - "modified": "2019-03-23T23:47:06.488Z", + "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { + "modified": "2019-03-18T21:04:10.244Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-color": { - "modified": "2019-03-24T00:02:05.127Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox": { + "modified": "2019-03-18T21:03:04.634Z", "contributors": [ - "wbamberg", - "teoli", - "gerson23", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-left": { - "modified": "2019-01-16T15:59:39.346Z", + "Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests": { + "modified": "2019-03-18T21:03:59.316Z", "contributors": [ - "teoli", - "Verruckt" + "carlosteixeiraa" ] }, - "Web/CSS/border-left-color": { - "modified": "2019-01-16T19:20:48.785Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Browser_action": { + "modified": "2019-03-18T21:04:05.718Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-left-style": { - "modified": "2019-01-16T15:59:50.769Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Page_actions": { + "modified": "2019-03-18T21:04:17.709Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-left-width": { - "modified": "2019-01-16T16:00:08.928Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Sidebars": { + "modified": "2019-03-18T21:04:06.139Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-right": { - "modified": "2019-01-16T15:59:50.709Z", + "Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels": { + "modified": "2019-03-18T21:04:02.641Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-right-color": { - "modified": "2019-01-16T15:59:44.072Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles": { + "modified": "2020-10-15T22:07:31.177Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-right-style": { - "modified": "2019-01-16T15:59:50.407Z", + "Mozilla/Add-ons/WebExtensions/user_interface": { + "modified": "2019-03-18T21:04:19.885Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-right-width": { - "modified": "2019-01-16T16:00:01.042Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items": { + "modified": "2019-03-18T21:04:09.803Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-spacing": { - "modified": "2019-03-23T23:47:07.851Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Notifications": { + "modified": "2019-03-18T21:04:17.481Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-top": { - "modified": "2019-01-17T10:27:59.370Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Omnibox": { + "modified": "2019-03-18T21:01:59.411Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-top-color": { - "modified": "2019-01-16T19:20:46.774Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Options_pages": { + "modified": "2019-03-18T21:04:14.023Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-top-style": { - "modified": "2019-01-16T15:59:52.923Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages": { + "modified": "2019-03-18T21:03:04.123Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/border-top-width": { - "modified": "2019-01-16T16:00:01.372Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Popups": { + "modified": "2019-08-10T13:56:46.929Z", "contributors": [ - "teoli", - "Verruckt" + "pedrosino", + "Anonymous" ] }, - "Web/CSS/border-width": { - "modified": "2019-03-23T23:12:52.902Z", + "Mozilla/Add-ons/WebExtensions/manifest.json/icons": { + "modified": "2020-10-15T21:59:47.019Z", "contributors": [ "wbamberg", - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/bottom": { - "modified": "2019-01-16T16:00:22.463Z", + "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { + "modified": "2019-03-18T21:05:19.046Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/clear": { - "modified": "2019-03-23T23:35:13.332Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext": { + "modified": "2019-03-18T21:03:10.522Z", "contributors": [ - "wbamberg", - "teoli", - "Luis Henrique Sousa", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/color": { - "modified": "2019-01-16T19:20:48.419Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_": { + "modified": "2019-03-18T21:04:14.402Z", "contributors": [ - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/content": { - "modified": "2019-03-24T00:02:07.101Z", + "Mozilla/Add-ons/WebExtensions/Content_scripts": { + "modified": "2019-07-29T11:08:46.237Z", "contributors": [ - "teoli", - "Half-blood" + "duduindo", + "Anonymous" ] }, - "Web/CSS/counter-increment": { - "modified": "2019-03-23T23:47:04.420Z", + "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { + "modified": "2020-10-15T20:55:03.457Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/counter-reset": { - "modified": "2019-03-23T23:47:10.117Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension": { + "modified": "2019-03-18T21:05:15.395Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous", + "Nunonmac101" ] }, - "Web/CSS/cursor": { - "modified": "2019-03-24T00:02:03.227Z", + "Mozilla/Firefox/Releases/3/Site_compatibility": { + "modified": "2019-03-23T23:47:04.199Z", "contributors": [ "wbamberg", - "teoli", - "Half-blood", + "Sheppy", "Verruckt" ] }, - "Web/CSS/direction": { - "modified": "2019-01-16T16:56:47.948Z", + "orphaned/O_DOM_e_o_JavaScript": { + "modified": "2019-12-13T21:10:33.944Z", "contributors": [ - "teoli", - "Verruckt" + "wbamberg", + "fferracioli" ] }, - "Web/CSS/display": { - "modified": "2019-03-23T23:49:28.516Z", + "orphaned/Plugins/Flash_Activation:_Browser_Comparison": { + "modified": "2019-03-18T20:56:19.824Z", "contributors": [ - "wbamberg", - "Anonymous", - "teoli", - "ethertank", - "Leandro Mercês Xavier", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/float": { - "modified": "2019-03-23T23:47:04.610Z", + "Plugins/Flash_to_HTML5": { + "modified": "2019-03-18T20:56:20.182Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/font": { - "modified": "2019-03-23T23:47:10.686Z", + "orphaned/Referência_do_DOM_Gecko/Prefácio": { + "modified": "2019-03-23T23:51:50.810Z", "contributors": [ - "wbamberg", - "teoli", - "Verruckt" + "khalid32", + "Leandro Mercês Xavier", + "Davis.peixoto" ] }, - "Web/CSS/font-size": { - "modified": "2019-03-23T23:47:15.600Z", + "orphaned/Referência_JSDBGAPI": { + "modified": "2019-03-23T23:44:44.830Z", "contributors": [ - "wbamberg", - "RCat", - "teoli", + "SphinxKnight", + "RuiMaciel" + ] + }, + "orphaned/Sobre_o_Document_Object_Model": { + "modified": "2019-03-23T23:46:25.664Z", + "contributors": [ + "SphinxKnight", "Verruckt" ] }, - "Web/CSS/font-size-adjust": { - "modified": "2019-03-23T23:47:06.762Z", + "orphaned/Tinderbox": { + "modified": "2019-03-23T23:45:30.178Z", "contributors": [ - "wbamberg", - "teoli", + "SphinxKnight", "Verruckt" ] }, - "Web/CSS/font-smooth": { - "modified": "2020-10-15T22:20:31.703Z", + "orphaned/Toolkit_API": { + "modified": "2019-01-16T16:23:47.926Z", "contributors": [ - "LPJFilho" + "Tagl" ] }, - "Web/CSS/font-style": { - "modified": "2019-03-23T23:51:37.862Z", + "orphaned/Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.718Z", "contributors": [ - "wbamberg", - "fscholz", - "teoli", - "Luis Henrique Sousa" + "wbamberg" ] }, - "Web/CSS/font-weight": { - "modified": "2019-03-23T23:47:17.771Z", + "Tools/Keyboard_shortcuts": { + "modified": "2020-07-16T22:35:50.422Z", "contributors": [ - "gusbemacbe", - "SphinxKnight", - "teoli", - "Verruckt" + "Anonymous", + "wbamberg" ] }, - "Web/CSS/grid-gap": { - "modified": "2020-10-15T22:00:32.351Z", + "Tools/Taking_screenshots": { + "modified": "2020-07-16T22:36:38.620Z", "contributors": [ + "wbamberg", "Anonymous" ] }, - "Web/CSS/height": { - "modified": "2019-03-23T23:47:57.733Z", + "Tools/Settings": { + "modified": "2020-07-16T22:36:35.515Z", "contributors": [ "wbamberg", - "teoli", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/inherit": { - "modified": "2019-01-16T15:39:13.615Z", + "Tools/Web_Console/UI_Tour": { + "modified": "2020-07-16T22:34:17.467Z", "contributors": [ - "teoli", - "Hillus" + "Anonymous", + "wbamberg" ] }, - "Web/CSS/layout_de_grelha_css": { - "modified": "2020-04-12T22:44:10.924Z", + "Tools/Web_Console/Helpers": { + "modified": "2020-07-16T22:34:13.111Z", "contributors": [ - "carlosaffrc", - "Anonymous" + "Anonymous", + "wbamberg" ] }, - "Web/CSS/list-style": { - "modified": "2019-03-23T23:47:53.661Z", + "Tools/Web_Console/Keyboard_shortcuts": { + "modified": "2020-07-16T22:34:23.988Z", "contributors": [ - "SphinxKnight", - "teoli", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/CSS/top": { - "modified": "2019-01-16T14:40:15.687Z", + "Tools/Web_Console/Split_console": { + "modified": "2020-07-16T22:34:21.158Z", "contributors": [ - "teoli", - "Half-blood" + "Anonymous", + "wbamberg" ] }, - "Web/CSS/transform": { - "modified": "2019-03-23T22:12:47.007Z", + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:07.526Z", "contributors": [ - "Anonymous" + "Anonymous", + "wbamberg" ] }, - "Web/CSS/width": { - "modified": "2019-03-23T23:47:51.459Z", + "Tools/Web_Console/Console_messages": { + "modified": "2020-07-16T22:34:16.005Z", "contributors": [ "wbamberg", - "Redeagle48", - "teoli", - "Luis Henrique Sousa", - "Verruckt" + "Anonymous" ] }, - "Web/CSS/z-index": { - "modified": "2019-01-17T04:06:04.605Z", + "Tools/Web_Console/The_command_line_interpreter": { + "modified": "2020-07-16T22:34:19.541Z", "contributors": [ - "teoli", - "Verruckt", - "Luis Henrique Sousa" + "Anonymous" ] }, - "Web/Componentes_Web": { - "modified": "2019-08-20T17:28:31.563Z", + "Tools/Web_Console/Rich_output": { + "modified": "2020-07-16T22:34:20.453Z", "contributors": [ - "filipe095", "Anonymous" ] }, - "Web/Eventos": { - "modified": "2019-04-30T14:29:45.980Z", + "Tools/Debugger/UI_Tour": { + "modified": "2020-07-16T22:35:16.876Z", "contributors": [ "wbamberg", "Anonymous" ] }, - "Web/Guide": { - "modified": "2020-11-12T11:23:45.364Z", - "contributors": [ - "nuruldecarvalho", - "Anonymous", - "Onsteroids" - ] - }, - "Web/Guide/AJAX": { - "modified": "2019-03-23T23:43:06.644Z", + "Tools/Debugger/How_to/Open_the_debugger": { + "modified": "2020-07-16T22:35:09.351Z", "contributors": [ - "Anonymous", - "chrisdavidmills", - "Leandro Mercês Xavier", - "Takenbot", - "Dria", - "RuiMaciel" + "Anonymous" ] }, - "Web/Guide/AJAX/Como_começar": { - "modified": "2019-03-23T23:58:34.669Z", + "Tools/Performance/Call_Tree": { + "modified": "2020-07-16T22:36:20.006Z", "contributors": [ - "Anonymous", - "chrisdavidmills", - "flaviomicheletti", - "Leandro Mercês Xavier", - "Fmtakaki", - "Verruckt", - "TroyDF", - "Japa al", - "Mederafael", - "Juliandavi", - "Thomaskp", - "Caed", - "Takenbot", - "Filipesperandio", - "Pmdweb", - "RuiMaciel" + "wbamberg", + "Anonymous" ] }, - "Web/Guide/AJAX/Comunidade": { - "modified": "2019-03-18T21:47:01.551Z", + "Tools/Performance/Waterfall": { + "modified": "2020-07-16T22:36:18.250Z", "contributors": [ + "wbamberg", "Anonymous" ] }, - "Web/Guide/Eventos": { - "modified": "2019-03-23T22:01:48.833Z", + "Tools/Performance/How_to": { + "modified": "2020-07-16T22:36:21.955Z", "contributors": [ - "Anonymous" + "Anonymous", + "wbamberg" ] }, - "Web/Guide/Gráficos": { - "modified": "2019-03-18T21:46:51.581Z", + "Tools/Performance/Frame_rate": { + "modified": "2020-07-16T22:36:19.201Z", "contributors": [ - "ivolvicente", + "wbamberg", "Anonymous" ] }, - "Web/Guide/HTML/Categorias_de_conteudo": { - "modified": "2019-03-18T21:30:45.160Z", + "Tools/Performance": { + "modified": "2020-07-16T22:36:13.622Z", "contributors": [ - "Anonymous" + "Anonymous", + "wbamberg" ] }, - "Web/Guide/HTML/Utilizar_estruturas_e_seccoes_de_HTML": { - "modified": "2019-03-18T21:46:45.859Z", + "Tools/Web_Audio_Editor": { + "modified": "2020-07-16T22:36:08.692Z", "contributors": [ + "wbamberg", "Anonymous" ] }, - "Web/HTML": { - "modified": "2020-07-22T17:12:42.326Z", + "Tools/Style_Editor": { + "modified": "2020-07-16T22:35:01.029Z", "contributors": [ - "joaonunomota", - "SphinxKnight", - "duduindo", - "tyreecruz6", - "Anonymous", - "Devenancio", - "didi9999", - "jwhitlock" + "wbamberg", + "Anonymous" ] }, - "Web/HTML/Aplicar_cor_elementos_HTML_utilizando_CSS": { - "modified": "2019-03-23T22:01:35.840Z", + "Tools/Storage_Inspector": { + "modified": "2020-07-16T22:36:10.303Z", "contributors": [ - "jwhitlock", + "wbamberg", "Anonymous" ] }, - "Web/HTML/Atributos": { - "modified": "2019-03-23T22:12:57.935Z", + "Tools/Memory": { + "modified": "2020-07-16T22:36:27.341Z", "contributors": [ - "jwhitlock", - "Anonymous", - "ricardomartins" + "wbamberg", + "Anonymous" ] }, - "Web/HTML/Atributos/rel": { - "modified": "2020-10-15T22:34:32.449Z", + "Tools/Responsive_Design_Mode": { + "modified": "2020-07-16T22:35:22.282Z", "contributors": [ - "Painatalman" + "Anonymous" ] }, - "Web/HTML/Atributos_globais": { - "modified": "2019-03-23T22:02:25.995Z", + "Tools/Page_Inspector/Keyboard_shortcuts": { + "modified": "2020-07-16T22:34:52.351Z", "contributors": [ - "Anonymous", - "jwhitlock" + "wbamberg", + "Anonymous" ] }, - "Web/HTML/CORS_settings_attributes": { - "modified": "2020-10-15T22:18:00.790Z", + "Tools/Page_Inspector/UI_Tour": { + "modified": "2020-07-16T22:34:49.596Z", "contributors": [ + "wbamberg", "Anonymous" ] }, - "Web/HTML/Elemento": { - "modified": "2020-11-30T19:06:39.688Z", + "Tools/Page_Inspector/How_to/Open_the_Inspector": { + "modified": "2020-07-16T22:34:33.099Z", "contributors": [ - "jotafe32", - "joaonunomota", - "MacedoAna", "Anonymous", - "jwhitlock", - "teoli", - "Leandro Mercês Xavier" + "wbamberg" ] }, - "Web/HTML/Elemento/Audio": { - "modified": "2019-03-24T00:00:34.265Z", + "Tools/Page_Inspector/How_to/Examine_and_edit_CSS": { + "modified": "2020-07-16T22:34:43.588Z", "contributors": [ - "jwhitlock", - "teoli", - "Leandro Mercês Xavier" + "wbamberg", + "Anonymous" ] }, - "Web/HTML/Elemento/Video": { - "modified": "2019-03-24T00:00:37.866Z", + "Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model": { + "modified": "2020-07-16T22:34:34.516Z", "contributors": [ - "jwhitlock", - "teoli", - "Leandro Mercês Xavier" + "wbamberg", + "Anonymous" ] }, - "Web/HTML/Elemento/fieldset": { - "modified": "2020-10-15T22:23:45.358Z", + "Tools/Page_Inspector/How_to/Inspect_and_select_colors": { + "modified": "2020-07-16T22:34:35.181Z", "contributors": [ + "wbamberg", "Anonymous" ] }, - "Web/HTML/Elemento/figcaption": { - "modified": "2019-03-24T00:12:29.922Z", + "Tools/Page_Inspector/How_to/Reposition_elements_in_the_page": { + "modified": "2020-07-16T22:34:46.213Z", "contributors": [ "wbamberg", - "jwhitlock", - "teoli", - "f.sanxz" + "Anonymous" ] }, - "Web/HTML/Elemento/head": { - "modified": "2020-10-15T21:59:43.855Z", + "Tools/Page_Inspector/How_to/Work_with_animations": { + "modified": "2020-07-16T22:34:37.073Z", "contributors": [ - "jwhitlock", + "wbamberg", "Anonymous" ] }, - "Web/HTML/Elemento/nav": { - "modified": "2020-10-15T21:57:44.552Z", + "Tools/Page_Inspector/How_to/Use_the_Inspector_API": { + "modified": "2020-07-16T22:34:45.056Z", "contributors": [ - "jwhitlock", - "JoseRicardoGomes" + "wbamberg", + "Anonymous" ] }, - "Web/HTML/Elemento/progress": { - "modified": "2019-03-24T00:11:12.291Z", + "Tools/Page_Inspector/How_to/Edit_fonts": { + "modified": "2020-07-16T22:34:39.170Z", "contributors": [ "wbamberg", - "jwhitlock", - "teoli", - "gustavowiller", - "Leandro Mercês Xavier" + "Anonymous" ] }, - "Web/HTML/HTML5": { - "modified": "2019-03-24T00:15:44.005Z", + "Tools/Performance/UI_Tour": { + "modified": "2020-07-16T22:36:15.326Z", "contributors": [ - "InesFF", - "Anonymous", - "teoli", - "emilianocarvalho", - "vigia122", - "Dwchiang", - "Verruckt" + "wbamberg", + "Anonymous" ] }, - "Web/HTML/HTML5/Forms_no_HTML5": { - "modified": "2019-03-24T00:05:42.238Z", + "Tools/Remote_Debugging/Thunderbird": { + "modified": "2020-07-16T22:35:40.059Z", "contributors": [ - "juliano_aguiar", - "teoli", - "Verruckt" + "wbamberg", + "Anonymous" ] }, - "Web/HTML/HTML5/Introdução_ao_HTML5": { - "modified": "2019-03-24T00:13:41.465Z", + "orphaned/Transformar_XML_com_XSLT": { + "modified": "2019-03-23T23:45:21.155Z", "contributors": [ "SphinxKnight", - "teoli", - "mauricio.araldi", - "xaky", - "Verruckt" - ] - }, - "Web/HTML/HTML5/Parser_HTML5": { - "modified": "2019-03-24T00:07:33.282Z", - "contributors": [ - "teoli", "Verruckt" ] }, - "Web/HTML/Referencia": { - "modified": "2019-09-09T07:20:05.681Z", + "orphaned/Transformar_XML_com_XSLT/Para_leitura_adicional": { + "modified": "2019-03-23T23:52:21.068Z", "contributors": [ "SphinxKnight", - "wbamberg", - "jwhitlock", - "Anonymous" + "Leandro Mercês Xavier", + "Pilinio", + "Verruckt" ] }, - "Web/HTML/Tipos_de_hiperligacao": { - "modified": "2019-03-23T22:02:19.809Z", + "orphaned/Tutorial_do_Canvas/Formas_de_desenho": { + "modified": "2019-01-16T14:01:56.255Z", "contributors": [ - "jwhitlock", - "Anonymous" + "guerreirogabriel" ] }, - "Web/HTML/Utilizar_a_cache_de_aplicacao": { - "modified": "2020-10-15T22:13:54.682Z", + "orphaned/Tutorial_do_Canvas": { + "modified": "2019-01-16T14:32:07.975Z", "contributors": [ - "Anonymous" + "fscholz", + "Verruckt", + "RuiMaciel" ] }, - "Web/HTTP": { - "modified": "2019-05-08T19:34:36.815Z", + "orphaned/Tutorial_do_Canvas/Utilização_básica": { + "modified": "2019-03-24T00:10:34.537Z", "contributors": [ - "wellick53", - "Joao-Henrique", - "CarlosAlbertoSzygalski", - "fscholz" + "guerreirogabriel", + "Edgarlaguiar", + "Luiz Carlos Moraes", + "Jes", + "Vitor.blacks" ] }, - "Web/HTTP/CORS": { - "modified": "2020-10-15T22:15:14.685Z", + "orphaned/Tutorial_XUL/Adicionando_botões": { + "modified": "2019-03-23T23:46:29.323Z", "contributors": [ - "mfuji09" + "Verruckt", + "Leandro Mercês Xavier", + "Rodmalkav" ] }, - "Web/HTTP/CORS/Errors": { - "modified": "2019-03-18T20:48:04.840Z", + "orphaned/Tutorial_XUL/Criando_uma_janela": { + "modified": "2019-03-23T23:45:36.338Z", "contributors": [ - "nchevobbe" + "SphinxKnight", + "jigs12", + "Leandro Mercês Xavier", + "Luis Henrique Sousa", + "Verruckt", + "Rodmalkav" ] }, - "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { - "modified": "2019-07-29T10:54:39.520Z", + "orphaned/Tutorial_XUL": { + "modified": "2019-03-23T23:45:36.792Z", "contributors": [ - "duduindo", - "emagombe" + "SphinxKnight", + "Leandro Mercês Xavier" ] }, - "Web/HTTP/Headers": { - "modified": "2019-03-23T22:13:14.622Z", + "orphaned/Tutorial_XUL/Introdução": { + "modified": "2019-03-23T23:46:27.723Z", "contributors": [ - "fscholz" + "SphinxKnight", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/HTTP/Headers/Allow": { - "modified": "2020-07-25T17:41:28.755Z", + "orphaned/Um_pequeno_exemplo_usando_AJAX": { + "modified": "2019-01-17T03:48:56.314Z", "contributors": [ - "joaonunomota" + "Leandro Mercês Xavier" ] }, - "Web/HTTP/Headers/X-Content-Type-Options": { - "modified": "2020-10-15T21:53:51.221Z", + "orphaned/Usando_áudio_e_vídeo_no_Firefox": { + "modified": "2019-03-24T00:00:33.796Z", "contributors": [ - "tjgfernandes" + "Leandro Mercês Xavier", + "Verruckt" ] }, - "Web/HTTP/Proxy_servers_and_tunneling": { - "modified": "2020-06-30T09:55:24.162Z", + "orphaned/Usando_privilégios_expandidos_em_navegadores_Mozilla": { + "modified": "2019-03-23T23:48:48.468Z", "contributors": [ - "lutzleonardo15" + "Leandro Mercês Xavier", + "Verruckt" ] }, - "Web/HTTP/Status": { - "modified": "2020-10-15T22:17:14.857Z", + "Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core": { + "modified": "2019-12-13T21:06:18.400Z", "contributors": [ - "zhouqichao" + "wbamberg", + "Anonymous", + "ethertank", + "fferracioli" ] }, - "Web/HTTP/Status/205": { - "modified": "2019-04-07T10:34:18.946Z", + "orphaned/Utilizando_meta_tags": { + "modified": "2019-03-23T23:45:18.005Z", "contributors": [ - "preira" + "eduardoungaratto", + "AndreGazola", + "Fleury" ] }, - "Web/HTTP/Status/405": { - "modified": "2020-07-25T17:18:32.968Z", + "orphaned/Venkman": { + "modified": "2019-03-24T00:02:38.559Z", "contributors": [ - "joaonunomota" + "SphinxKnight", + "fscholz", + "Verruckt" ] }, - "Web/HTTP/Status/502": { - "modified": "2020-10-15T22:31:56.172Z", + "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role": { + "modified": "2020-09-19T05:54:31.819Z", "contributors": [ - "joaonunomota" + "Painatalman" ] }, - "Web/HTTP/Status/504": { - "modified": "2020-10-15T22:32:01.046Z", + "Web/Accessibility/ARIA": { + "modified": "2019-03-18T21:47:01.413Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/JavaScript": { - "modified": "2020-09-29T15:05:06.845Z", + "Web/Accessibility": { + "modified": "2019-09-09T14:20:12.758Z", "contributors": [ - "jnascimentogcc", - "Anonymous", "SphinxKnight", - "diogo-panaca", - "ruiribeiro97", + "Anonymous", "teoli", - "jaydson", - "Charleno Pires", - "leobalter", "Verruckt", - "Leandro Mercês Xavier", - "Enigma", - "RuiMaciel" + "Kayalemao", + "RuiMaciel", + "Karla pa", + "GrandeBuzina" ] }, - "Web/JavaScript/Estruturas_de_dados": { - "modified": "2020-03-12T19:47:10.844Z", + "Web/API/Storage_API": { + "modified": "2020-10-15T22:08:44.199Z", "contributors": [ "Anonymous" ] }, - "Web/JavaScript/Gestao_Memoria": { - "modified": "2020-03-12T19:47:35.757Z", + "Web/API/Web_Authentication_API": { + "modified": "2020-10-15T22:03:06.934Z", "contributors": [ - "FgfdCBVCbnsebtgf" + "fscholz", + "Anonymous" ] }, - "Web/JavaScript/Guia": { - "modified": "2020-03-12T19:36:11.358Z", + "conflicting/Web/API/Web_Storage_API": { + "modified": "2019-03-18T21:46:00.224Z", "contributors": [ - "Anonymous", - "teoli", - "dancasttro", - "ethertank", - "trevorh", - "italotoffolo", - "clebermatheus", - "Verruckt" + "Anonymous" ] }, - "Web/JavaScript/Guia/Detalhes_do_modelo_de_objeto": { - "modified": "2020-03-12T19:44:04.803Z", + "Web/API/Canvas_API": { + "modified": "2019-03-23T22:01:56.072Z", "contributors": [ - "wbamberg", "Anonymous" ] }, - "Web/JavaScript/Guia/Expressoes_e_Operadores": { - "modified": "2020-03-12T19:38:04.189Z", + "Web/API/Canvas_API/Tutorial": { + "modified": "2019-03-18T21:24:18.272Z", "contributors": [ - "duduindo", - "teoli", - "italotoffolo" + "Anonymous" ] }, - "Web/JavaScript/Guia/Gramática_e_tipos": { - "modified": "2020-03-12T19:44:01.097Z", + "Web/API/Battery_Status_API": { + "modified": "2019-03-18T21:29:01.750Z", "contributors": [ - "mauraodev", "Anonymous" ] }, - "Web/JavaScript/Guia/Introdução": { - "modified": "2020-03-12T19:44:03.775Z", + "Web/API/File_and_Directory_Entries_API": { + "modified": "2019-03-18T21:46:51.385Z", "contributors": [ - "jhonatansychochi", - "Redeagle48", "Anonymous" ] }, - "Web/JavaScript/Guia/Introdução_ao_JavaScript": { - "modified": "2019-03-24T00:08:50.034Z", + "Web/API/Media_Streams_API": { + "modified": "2019-03-23T22:12:44.463Z", "contributors": [ - "teoli", - "Verruckt" + "Anonymous" ] }, - "Web/JavaScript/Guia/Sobre": { - "modified": "2019-03-24T00:08:17.375Z", + "Web/API/WebRTC_API": { + "modified": "2019-03-23T22:12:46.226Z", "contributors": [ "Anonymous", - "teoli", - "dancasttro", - "Verruckt" + "Gurigraphics" ] }, - "Web/JavaScript/Guia/Valores,_Variáveis_e_Literais": { - "modified": "2019-08-21T13:40:23.925Z", + "Web/API/WebRTC_API/Taking_still_photos": { + "modified": "2019-03-23T22:12:45.154Z", "contributors": [ - "chibichibibr", - "SphinxKnight", - "teoli", - "Verruckt" + "fscholz", + "wbamberg", + "Anonymous" ] }, - "Web/JavaScript/O_que_é_o_JavaScript": { - "modified": "2019-03-23T23:53:53.371Z", + "Web/API/Document/dir": { + "modified": "2019-03-23T23:22:09.179Z", "contributors": [ - "teoli", - "Sheppy", - "RafaelMS" + "khalid32", + "carlosrainhaaraujo" ] }, - "Web/JavaScript/Reference": { - "modified": "2020-07-11T02:27:11.550Z", + "Web/API/Ambient_Light_Events": { + "modified": "2020-10-15T22:07:41.555Z", "contributors": [ - "KINGRANDOLPH", - "Anonymous", - "dd-pardal", - "LJHarb" + "Anonymous" ] }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-10-15T22:00:39.801Z", + "Web/API/Geolocation_API": { + "modified": "2020-10-15T21:59:09.308Z", "contributors": [ - "preira", - "peter.kehl" + "Anonymous" ] }, - "Web/JavaScript/Reference/Classes/static": { - "modified": "2020-10-15T22:00:38.342Z", + "Web/API/Metadata": { + "modified": "2019-03-18T21:46:51.094Z", "contributors": [ - "Painatalman" + "Anonymous" ] }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:47:09.947Z", + "Web/API/NavigatorOnLine/Online_and_offline_events": { + "modified": "2019-03-23T23:49:32.329Z", "contributors": [ - "Sheppy" + "SphinxKnight", + "chrisdavidmills", + "Leandro Mercês Xavier", + "Roli", + "Verruckt" ] }, - "Web/JavaScript/Reference/Errors/Not_a_function": { - "modified": "2020-07-25T16:58:44.866Z", + "Web/API/Notifications_API/Using_the_Notifications_API": { + "modified": "2019-03-23T22:42:28.564Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/JavaScript/Reference/Errors/Stmt_after_return": { - "modified": "2020-03-12T19:47:09.548Z", + "Web/API/FileSystem": { + "modified": "2020-10-15T21:46:44.138Z", "contributors": [ - "Anonymous", - "joao-neves95", - "PANC" + "joaonunomota", + "Anonymous" ] }, - "Web/JavaScript/Reference/Errors/Unexpected_token": { - "modified": "2020-03-12T19:47:17.066Z", + "Web/API/Web_Audio_API/Using_Web_Audio_API": { + "modified": "2019-03-23T22:12:48.158Z", "contributors": [ - "pedlima" + "Anonymous" ] }, - "Web/JavaScript/Reference/Errors/declaração_função_sem_nome": { - "modified": "2020-03-12T19:48:30.296Z", + "Web/API/Web_Workers_API/Using_web_workers": { + "modified": "2019-03-23T22:02:15.177Z", "contributors": [ - "hudelgado" + "allanfoppa", + "Anonymous" ] }, - "Web/JavaScript/Reference/Extratos_e_declarações": { - "modified": "2020-10-15T21:46:52.013Z", + "Web/API/WebGL_API/Constants": { + "modified": "2019-03-23T22:01:30.802Z", "contributors": [ - "Anonymous", - "LucianoDos" + "Anonymous" ] }, - "Web/JavaScript/Reference/Extratos_e_declarações/bloco": { - "modified": "2020-10-15T22:29:44.918Z", + "Web/API/WebGL_API/Data": { + "modified": "2019-03-23T22:01:33.105Z", "contributors": [ "Anonymous" ] }, - "Web/JavaScript/Reference/Extratos_e_declarações/for": { - "modified": "2020-10-15T22:29:45.538Z", + "Web/API/WebGL_API/Types": { + "modified": "2019-03-23T22:01:33.867Z", "contributors": [ "Anonymous" ] }, - "Web/JavaScript/Reference/Extratos_e_declarações/return": { - "modified": "2020-10-15T21:59:53.428Z", + "Web/API/WebGL_API/Using_Extensions": { + "modified": "2019-03-23T22:01:32.555Z", "contributors": [ "Anonymous" ] }, - "Web/JavaScript/Reference/Extratos_e_declarações/throw": { - "modified": "2020-10-15T21:59:14.757Z", + "Web/API/WebSockets_API/Writing_WebSocket_client_applications": { + "modified": "2020-08-11T17:49:59.287Z", "contributors": [ - "Anonymous", - "joao-neves95" + "joaonunomota" ] }, - "Web/JavaScript/Reference/Funcionalidades_obsoletas": { - "modified": "2020-03-12T19:48:08.798Z", + "Web/API/WebSockets_API/Writing_WebSocket_servers": { + "modified": "2020-09-18T06:53:14.308Z", "contributors": [ - "Anonymous" + "blunderous", + "joaonunomota" ] }, - "Web/JavaScript/Reference/Funcoes": { - "modified": "2020-10-15T21:59:57.286Z", + "Web/API/WebSockets_API/Writing_WebSocket_server": { + "modified": "2020-12-04T13:57:23.773Z", "contributors": [ - "Anonymous" + "peterbe", + "joaonunomota" ] }, - "Web/JavaScript/Reference/Funcoes/Funcoes_seta": { - "modified": "2020-10-15T22:29:39.575Z", + "Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java": { + "modified": "2020-08-24T20:03:27.920Z", "contributors": [ - "Anonymous" + "joaonunomota" ] }, - "Web/JavaScript/Reference/Funcoes/arguments": { - "modified": "2020-10-15T22:13:56.842Z", + "Web/API/Window/sidebar": { + "modified": "2019-03-18T21:37:22.693Z", "contributors": [ "Anonymous" ] }, - "Web/JavaScript/Reference/Funcoes/parametros_rest": { - "modified": "2020-10-15T22:29:46.349Z", + "Web/Web_Components": { + "modified": "2019-08-20T17:28:31.563Z", "contributors": [ + "filipe095", "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-03-12T19:39:49.774Z", + "Web/CSS/::after": { + "modified": "2019-03-24T00:00:16.761Z", "contributors": [ - "Anonymous", - "Redeagle48", - "SphinxKnight", - "fscholz" + "teoli", + "Verruckt", + "Luis Henrique Sousa" ] }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:54:01.173Z", + "Web/CSS/::before": { + "modified": "2019-03-24T00:00:19.264Z", "contributors": [ - "joaonunomota", - "claudepache" + "teoli", + "Verruckt", + "Luis Henrique Sousa" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2019-03-23T22:13:06.712Z", + "Learn/CSS/Howto/Generated_content": { + "modified": "2020-07-16T22:25:48.413Z", "contributors": [ - "ricardomartins" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T22:02:06.522Z", + "Web/SVG/Tutorial/SVG_and_CSS": { + "modified": "2019-03-24T00:00:34.584Z", "contributors": [ - "JMoreira93" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" + ] + }, + "Web/Progressive_web_apps/Responsive/Media_types": { + "modified": "2019-03-24T00:15:51.724Z", + "contributors": [ + "Anonymous", + "fscholz", + "teoli", + "maggots", + "Verruckt", + "Leandro Mercês Xavier" + ] + }, + "orphaned/Web/CSS/Como_começar/O_que_é_CSS?": { + "modified": "2019-03-23T23:43:00.605Z", + "contributors": [ + "teoli", + "Leandro Mercês Xavier" + ] + }, + "Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2019-04-09T16:57:57.913Z", + "contributors": [ + "diogo-panaca", + "Anonymous", + "Sebastianz", + "mrstork", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T22:13:53.352Z", + "Web/CSS/Media_Queries": { + "modified": "2020-10-15T22:17:12.623Z", "contributors": [ - "ricardomartins" + "diogo-panaca" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T22:04:42.050Z", + "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { + "modified": "2019-03-23T22:12:42.813Z", "contributors": [ - "SandroMiguel" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T21:54:14.959Z", + "Web/CSS/CSS_Colors/Color_picker_tool": { + "modified": "2019-04-28T14:53:13.655Z", "contributors": [ - "joaonunomota", - "ricardomartins" + "diogo-panaca" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T22:33:11.742Z", + "Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container": { + "modified": "2019-06-11T07:33:08.010Z", "contributors": [ - "joaonunomota" + "BIGBenfica9", + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T21:58:52.123Z", + "Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox": { + "modified": "2019-03-18T21:43:55.771Z", "contributors": [ - "kapz" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2019-03-23T22:12:30.952Z", + "Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items": { + "modified": "2019-07-22T03:58:30.968Z", "contributors": [ - "ricardomartins" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/slice": { - "modified": "2020-10-15T22:31:52.359Z", + "Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods": { + "modified": "2019-03-18T21:43:58.441Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2019-03-23T22:16:35.915Z", + "Web/CSS/CSS_Types": { + "modified": "2019-03-18T21:23:17.150Z", "contributors": [ - "anguelov" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { - "modified": "2020-10-15T22:14:28.403Z", + "Web/CSS/Alternative_style_sheets": { + "modified": "2019-03-23T23:53:49.046Z", "contributors": [ - "ramongr" + "teoli", + "FelipeMorais" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { - "modified": "2020-10-15T22:14:24.948Z", + "Web/CSS/CSS_Grid_Layout": { + "modified": "2020-04-12T22:44:10.924Z", "contributors": [ - "ramongr" + "carlosaffrc", + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T21:59:47.399Z", + "Web/CSS/Paged_Media": { + "modified": "2019-03-23T22:24:57.103Z", "contributors": [ "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2019-03-23T22:14:25.079Z", + "Web/CSS/Pseudo-classes": { + "modified": "2019-03-18T21:15:25.227Z", "contributors": [ - "nmve" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/arguments": { - "modified": "2020-10-15T22:14:27.893Z", + "Web/CSS/Pseudo-elements": { + "modified": "2019-03-18T21:23:11.174Z", "contributors": [ - "ramongr" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/call": { - "modified": "2020-10-15T21:53:17.055Z", + "Web/CSS/Reference": { + "modified": "2020-07-20T13:36:56.218Z", "contributors": [ "joaonunomota", - "JuniorDiasOliveira", - "waveiro", - "Mega85" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Infinity": { - "modified": "2020-10-15T22:31:55.049Z", - "contributors": [ - "joaonunomota" + "Anonymous", + "teoli", + "Moacir Bispo", + "Verruckt" ] }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2019-03-23T22:12:29.962Z", + "Web/CSS/CSS_Transforms/Using_CSS_transforms": { + "modified": "2019-03-24T00:04:50.895Z", "contributors": [ - "ricardomartins" + "teoli", + "Verruckt", + "Leandro Mercês Xavier", + "Jürgen Jeka" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/ceil": { - "modified": "2020-10-15T21:58:11.563Z", + "Web/Events": { + "modified": "2019-04-30T14:29:45.980Z", "contributors": [ - "carlos-menezes", - "MarcioFonseca" + "wbamberg", + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2019-03-23T22:49:01.559Z", + "Web/Guide/AJAX/Getting_Started": { + "modified": "2019-03-23T23:58:34.669Z", "contributors": [ - "Redeagle48", - "fscholz" + "Anonymous", + "chrisdavidmills", + "flaviomicheletti", + "Leandro Mercês Xavier", + "Fmtakaki", + "Verruckt", + "TroyDF", + "Japa al", + "Mederafael", + "Juliandavi", + "Thomaskp", + "Caed", + "Takenbot", + "Filipesperandio", + "Pmdweb", + "RuiMaciel" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { - "modified": "2019-03-23T22:49:07.538Z", + "Web/Guide/AJAX/Community": { + "modified": "2019-03-18T21:47:01.551Z", "contributors": [ - "Redeagle48" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { - "modified": "2019-03-23T22:49:09.973Z", + "Web/Guide/Events": { + "modified": "2019-03-23T22:01:48.833Z", "contributors": [ - "Redeagle48" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { - "modified": "2020-10-15T21:38:19.186Z", + "Web/Guide/Graphics": { + "modified": "2019-03-18T21:46:51.581Z", "contributors": [ - "joaonunomota", - "Redeagle48" + "ivolvicente", + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NaN": { - "modified": "2019-03-23T22:49:09.414Z", + "Web/Guide/HTML/Content_categories": { + "modified": "2019-03-18T21:30:45.160Z", "contributors": [ - "Redeagle48" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { - "modified": "2019-03-23T22:49:12.149Z", + "Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2019-03-18T21:46:45.859Z", "contributors": [ - "SphinxKnight", - "Redeagle48" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { - "modified": "2019-03-23T22:49:17.052Z", + "Web/HTML/Applying_color": { + "modified": "2019-03-23T22:01:35.840Z", "contributors": [ - "SphinxKnight", - "Redeagle48" + "jwhitlock", + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { - "modified": "2019-03-23T22:49:10.417Z", + "Web/HTML/Global_attributes": { + "modified": "2019-03-23T22:02:25.995Z", "contributors": [ - "SphinxKnight", - "Redeagle48" + "Anonymous", + "jwhitlock" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/prototype": { - "modified": "2019-03-23T22:49:04.241Z", + "Web/HTML/Attributes": { + "modified": "2019-03-23T22:12:57.935Z", "contributors": [ - "Redeagle48" + "jwhitlock", + "Anonymous", + "ricardomartins" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toString": { - "modified": "2019-03-23T22:49:00.338Z", + "Web/HTML/Attributes/rel": { + "modified": "2020-10-15T22:34:32.449Z", "contributors": [ - "Redeagle48" + "Painatalman" ] }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2020-10-15T21:30:54.647Z", + "Web/HTML/Attributes/crossorigin": { + "modified": "2020-10-15T22:18:00.790Z", "contributors": [ - "Anonymous", - "wbamberg", - "fscholz" + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { - "modified": "2019-03-23T22:42:57.159Z", + "Web/HTML/Element/audio": { + "modified": "2019-03-24T00:00:34.265Z", "contributors": [ - "gabrielpconceicao" + "jwhitlock", + "teoli", + "Leandro Mercês Xavier" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/prototype": { - "modified": "2020-10-15T22:13:51.986Z", + "Web/HTML/Element/fieldset": { + "modified": "2020-10-15T22:23:45.358Z", "contributors": [ "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:38:27.657Z", + "Web/HTML/Element/figcaption": { + "modified": "2019-03-24T00:12:29.922Z", "contributors": [ - "erickbRodrigues", - "Anonymous", - "ricardomartins", - "lpimenta-ptc", - "Sheppy" + "wbamberg", + "jwhitlock", + "teoli", + "f.sanxz" ] }, - "Web/JavaScript/Reference/Global_Objects/String/Trim": { - "modified": "2019-03-23T22:13:05.964Z", + "Web/HTML/Element/head": { + "modified": "2020-10-15T21:59:43.855Z", "contributors": [ - "ricardomartins" + "jwhitlock", + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/String/indexOf": { - "modified": "2019-03-23T22:49:09.792Z", + "Web/HTML/Element": { + "modified": "2020-11-30T19:06:39.688Z", "contributors": [ - "SandroMiguel", - "Redeagle48" + "jotafe32", + "joaonunomota", + "MacedoAna", + "Anonymous", + "jwhitlock", + "teoli", + "Leandro Mercês Xavier" ] }, - "Web/JavaScript/Reference/Global_Objects/String/length": { - "modified": "2019-03-23T22:49:00.693Z", + "Web/HTML/Element/nav": { + "modified": "2020-10-15T21:57:44.552Z", "contributors": [ - "Redeagle48" + "jwhitlock", + "JoseRicardoGomes" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol": { - "modified": "2019-03-23T22:24:48.766Z", + "Web/HTML/Element/progress": { + "modified": "2019-03-24T00:11:12.291Z", "contributors": [ - "ZeikJT" + "wbamberg", + "jwhitlock", + "teoli", + "gustavowiller", + "Leandro Mercês Xavier" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance": { - "modified": "2019-03-23T22:24:53.893Z", + "Web/HTML/Element/video": { + "modified": "2019-03-24T00:00:37.866Z", "contributors": [ - "GoToLoop" + "jwhitlock", + "teoli", + "Leandro Mercês Xavier" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURI": { - "modified": "2020-03-12T19:42:17.895Z", + "orphaned/Learn/HTML/Forms/HTML5_updates": { + "modified": "2019-03-24T00:05:42.238Z", "contributors": [ - "kempcarlos" + "juliano_aguiar", + "teoli", + "Verruckt" ] }, - "Web/JavaScript/Reference/Operadores": { - "modified": "2020-10-15T21:46:57.076Z", + "Web/Guide/HTML/HTML5": { + "modified": "2019-03-24T00:15:44.005Z", "contributors": [ - "Anonymous" + "InesFF", + "Anonymous", + "teoli", + "emilianocarvalho", + "vigia122", + "Dwchiang", + "Verruckt" ] }, - "Web/JavaScript/Reference/Operadores/Operador_virgula": { - "modified": "2020-10-15T22:29:46.734Z", + "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-24T00:13:41.465Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "teoli", + "mauricio.araldi", + "xaky", + "Verruckt" ] }, - "Web/JavaScript/Reference/Operadores/Precedencia_operador": { - "modified": "2020-05-03T13:58:58.457Z", + "Web/Guide/HTML/HTML5/HTML5_Parser": { + "modified": "2019-03-24T00:07:33.282Z", "contributors": [ - "Anonymous" + "teoli", + "Verruckt" ] }, - "Web/JavaScript/Reference/Operadores/função": { - "modified": "2020-10-15T22:29:38.999Z", + "Web/HTML/Reference": { + "modified": "2019-09-09T07:20:05.681Z", "contributors": [ + "SphinxKnight", + "wbamberg", + "jwhitlock", "Anonymous" ] }, - "Web/JavaScript/Reference/Sobre": { - "modified": "2020-03-12T19:44:03.544Z", + "Web/HTML/Link_types": { + "modified": "2019-03-23T22:02:19.809Z", "contributors": [ + "jwhitlock", "Anonymous" ] }, - "Web/Manifest": { - "modified": "2020-10-15T22:23:27.262Z", + "Web/HTML/Using_the_application_cache": { + "modified": "2020-10-15T22:13:54.682Z", "contributors": [ - "nersofiripi", "Anonymous" ] }, - "Web/MathML": { - "modified": "2020-11-09T15:01:38.012Z", + "Web/JavaScript/Data_structures": { + "modified": "2020-03-12T19:47:10.844Z", "contributors": [ - "joaonunomota", - "Joao_Ledo_Fonseca", "Anonymous" ] }, - "Web/MathML/Attribute": { - "modified": "2020-08-21T12:44:51.026Z", - "contributors": [ - "joaonunomota", - "fscholz" - ] - }, - "Web/MathML/Attribute/Valores": { - "modified": "2020-07-22T19:30:01.211Z", - "contributors": [ - "joaonunomota" - ] - }, - "Web/MathML/Authoring": { - "modified": "2020-08-15T14:39:49.860Z", + "Web/JavaScript/Memory_Management": { + "modified": "2020-03-12T19:47:35.757Z", "contributors": [ - "joaonunomota" + "FgfdCBVCbnsebtgf" ] }, - "Web/MathML/Element": { - "modified": "2020-08-16T17:33:47.904Z", + "Web/JavaScript/Guide/Details_of_the_Object_Model": { + "modified": "2020-03-12T19:44:04.803Z", "contributors": [ - "joaonunomota", - "fscholz" + "wbamberg", + "Anonymous" ] }, - "Web/MathML/Element/maction": { - "modified": "2020-10-15T22:32:30.845Z", + "orphaned/Web/JavaScript/Guia/Expressoes_e_Operadores": { + "modified": "2020-03-12T19:38:04.189Z", "contributors": [ - "joaonunomota" + "duduindo", + "teoli", + "italotoffolo" ] }, - "Web/MathML/Element/math": { - "modified": "2020-10-15T22:32:00.988Z", + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-03-12T19:44:01.097Z", "contributors": [ - "joaonunomota" + "mauraodev", + "Anonymous" ] }, - "Web/MathML/Element/menclose": { - "modified": "2020-10-15T22:31:58.519Z", + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:36:11.358Z", "contributors": [ - "joaonunomota" + "Anonymous", + "teoli", + "dancasttro", + "ethertank", + "trevorh", + "italotoffolo", + "clebermatheus", + "Verruckt" ] }, - "Web/MathML/Element/merror": { - "modified": "2020-10-15T22:31:57.892Z", + "orphaned/Web/JavaScript/Guia/Introdução_ao_JavaScript": { + "modified": "2019-03-24T00:08:50.034Z", "contributors": [ - "joaonunomota" + "teoli", + "Verruckt" ] }, - "Web/MathML/Element/mfenced": { - "modified": "2020-10-15T22:32:16.693Z", + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-03-12T19:44:03.775Z", "contributors": [ - "joaonunomota" + "jhonatansychochi", + "Redeagle48", + "Anonymous" ] }, - "Web/MathML/Element/mfrac": { - "modified": "2020-10-15T22:32:37.302Z", + "orphaned/Web/JavaScript/Guia/Sobre": { + "modified": "2019-03-24T00:08:17.375Z", "contributors": [ - "joaonunomota" + "Anonymous", + "teoli", + "dancasttro", + "Verruckt" ] }, - "Web/MathML/Element/mglyph": { - "modified": "2020-10-15T22:32:17.025Z", + "orphaned/Web/JavaScript/Guia/Valores,_Variáveis_e_Literais": { + "modified": "2019-08-21T13:40:23.925Z", "contributors": [ - "joaonunomota" + "chibichibibr", + "SphinxKnight", + "teoli", + "Verruckt" ] }, - "Web/MathML/Element/mi": { - "modified": "2020-10-15T22:32:20.399Z", + "orphaned/Web/JavaScript/O_que_é_o_JavaScript": { + "modified": "2019-03-23T23:53:53.371Z", "contributors": [ - "joaonunomota" + "teoli", + "Sheppy", + "RafaelMS" ] }, - "Web/MathML/Element/mlabeledtr": { - "modified": "2020-10-15T22:32:27.553Z", + "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { + "modified": "2020-03-12T19:48:30.296Z", "contributors": [ - "joaonunomota" + "hudelgado" ] }, - "Web/MathML/Element/mmultiscripts": { - "modified": "2020-10-15T22:32:37.118Z", + "Web/JavaScript/Reference/Statements/block": { + "modified": "2020-10-15T22:29:44.918Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/mn": { - "modified": "2020-10-15T22:32:26.157Z", + "Web/JavaScript/Reference/Statements/for": { + "modified": "2020-10-15T22:29:45.538Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/mo": { - "modified": "2020-10-15T22:32:19.754Z", + "Web/JavaScript/Reference/Statements": { + "modified": "2020-10-15T21:46:52.013Z", "contributors": [ - "joaonunomota" + "Anonymous", + "LucianoDos" ] }, - "Web/MathML/Element/mover": { - "modified": "2020-10-15T22:32:19.618Z", + "Web/JavaScript/Reference/Statements/return": { + "modified": "2020-10-15T21:59:53.428Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/mpadded": { - "modified": "2020-10-15T22:32:28.264Z", + "Web/JavaScript/Reference/Statements/throw": { + "modified": "2020-10-15T21:59:14.757Z", "contributors": [ - "joaonunomota" + "Anonymous", + "joao-neves95" ] }, - "Web/MathML/Element/mphantom": { - "modified": "2020-10-15T22:32:22.218Z", + "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { + "modified": "2020-03-12T19:48:08.798Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/mroot": { - "modified": "2020-10-15T22:32:22.430Z", + "Web/JavaScript/Reference/Functions/arguments": { + "modified": "2020-10-15T22:13:56.842Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/mrow": { - "modified": "2020-10-15T22:31:58.300Z", + "Web/JavaScript/Reference/Functions/Arrow_functions": { + "modified": "2020-10-15T22:29:39.575Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/ms": { - "modified": "2020-10-15T22:32:22.427Z", + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T21:59:57.286Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/mspace": { - "modified": "2020-10-15T22:31:55.582Z", + "Web/JavaScript/Reference/Functions/rest_parameters": { + "modified": "2020-10-15T22:29:46.349Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/msqrt": { - "modified": "2020-10-15T22:32:22.151Z", + "orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { + "modified": "2020-10-15T22:14:24.948Z", "contributors": [ - "joaonunomota" + "ramongr" ] }, - "Web/MathML/Element/mstyle": { - "modified": "2020-10-15T22:33:04.564Z", + "Web/JavaScript/Reference/Operators/function": { + "modified": "2020-10-15T22:29:38.999Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/msub": { - "modified": "2020-10-15T22:32:21.086Z", + "Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:46:57.076Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/msubsup": { - "modified": "2020-10-15T22:32:22.170Z", + "Web/JavaScript/Reference/Operators/Comma_Operator": { + "modified": "2020-10-15T22:29:46.734Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/msup": { - "modified": "2020-10-15T22:32:20.360Z", + "Web/JavaScript/Reference/Operators/Operator_Precedence": { + "modified": "2020-05-03T13:58:58.457Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/mtable": { - "modified": "2020-10-15T22:33:04.410Z", + "Web/JavaScript/Reference/About": { + "modified": "2020-03-12T19:44:03.544Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/mtd": { - "modified": "2020-10-15T22:32:00.353Z", + "Web/MathML/Attribute/Values": { + "modified": "2020-07-22T19:30:01.211Z", "contributors": [ "joaonunomota" ] }, - "Web/MathML/Element/mtext": { - "modified": "2020-10-15T22:31:59.109Z", + "Web/MathML/Examples/Deriving_the_Quadratic_Formula": { + "modified": "2020-08-16T17:37:40.689Z", "contributors": [ "joaonunomota" ] }, - "Web/MathML/Element/mtr": { - "modified": "2020-10-15T22:31:55.409Z", + "Web/MathML/Examples/MathML_Pythagorean_Theorem": { + "modified": "2020-08-16T17:39:52.993Z", "contributors": [ "joaonunomota" ] }, - "Web/MathML/Element/munder": { - "modified": "2020-10-15T22:32:18.823Z", + "Web/Progressive_web_apps/Developer_guide": { + "modified": "2020-04-23T09:38:24.576Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Element/munderover": { - "modified": "2020-10-15T22:32:21.240Z", + "Web/Progressive_web_apps/Responsive/responsive_design_building_blocks": { + "modified": "2019-04-16T06:29:21.711Z", "contributors": [ - "joaonunomota" + "diogo-panaca" ] }, - "Web/MathML/Element/semantics": { - "modified": "2020-10-15T22:32:26.955Z", + "Web/Security/Mixed_content": { + "modified": "2019-03-23T22:05:48.971Z", "contributors": [ - "joaonunomota" + "Anonymous", + "sideshowbarker" ] }, - "Web/MathML/Examples": { - "modified": "2020-08-18T09:59:11.744Z", + "Web/Security/Mixed_content/How_to_fix_website_with_mixed_content": { + "modified": "2019-03-23T22:05:54.761Z", "contributors": [ - "joaonunomota" + "Anonymous" ] }, - "Web/MathML/Examples/Derivar_a_Formula_Resolvente": { - "modified": "2020-08-16T17:37:40.689Z", + "Web/Security": { + "modified": "2019-09-10T16:45:22.612Z", "contributors": [ - "joaonunomota" + "SphinxKnight", + "Anonymous" ] }, - "Web/MathML/Examples/MathML_teorema_de_Pitagoras": { - "modified": "2020-08-16T17:39:52.993Z", + "Web/Security/Insecure_passwords": { + "modified": "2019-03-23T22:01:41.675Z", "contributors": [ - "joaonunomota" + "rborges77", + "Anonymous" ] }, - "Web/MathML/Index": { - "modified": "2020-08-16T17:30:38.516Z", + "Web/Security/Same-origin_policy": { + "modified": "2020-09-26T17:57:02.589Z", "contributors": [ - "joaonunomota" + "Samuel-Ferdnand" ] }, - "Web/Progressive_web_apps": { - "modified": "2020-04-23T09:44:00.269Z", + "Web/SVG/Applying_SVG_effects_to_HTML_content": { + "modified": "2019-03-23T22:01:45.461Z", "contributors": [ - "Anonymous", - "chrisdavidmills" + "Anonymous" ] }, - "Web/Progressive_web_apps/Guia_de_programacao": { - "modified": "2020-04-23T09:38:24.576Z", + "Web/SVG/Namespaces_Crash_Course/Example": { + "modified": "2019-03-23T22:01:57.842Z", "contributors": [ "Anonymous" ] }, - "Web/Progressive_web_apps/Identificavel": { - "modified": "2019-03-18T20:52:07.669Z", + "Web/SVG/SVG_animation_with_SMIL": { + "modified": "2020-04-23T08:20:39.391Z", "contributors": [ - "chrisdavidmills", "Anonymous" ] }, - "Web/Progressive_web_apps/Responsivo": { - "modified": "2019-03-18T20:52:08.064Z", + "Web/SVG/Tutorial/Introduction": { + "modified": "2020-04-23T09:22:08.765Z", "contributors": [ - "chrisdavidmills", "Anonymous" ] }, - "Web/Progressive_web_apps/Responsivo/Elementos_base_desenho_adaptavel": { - "modified": "2019-04-16T06:29:21.711Z", + "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { + "modified": "2019-03-23T22:01:48.509Z", "contributors": [ - "diogo-panaca" + "Anonymous" ] }, - "Web/Progressive_web_apps/Seguro": { - "modified": "2019-03-18T20:52:08.238Z", + "Web/Tutorials": { + "modified": "2020-05-03T14:51:14.988Z", "contributors": [ - "chrisdavidmills", "Anonymous" ] }, - "Web/Reference": { - "modified": "2020-07-20T13:13:52.229Z", + "Web/XML/XML_introduction": { + "modified": "2019-05-01T21:54:16.756Z", "contributors": [ - "joaonunomota", - "Anonymous", - "carlosrainhaaraujo", - "kscarfone" + "ExE-Boss", + "Anonymous" ] }, - "Web/Reference/API": { - "modified": "2019-03-23T23:22:11.761Z", + "orphaned/Web/XSLT/Comunidade": { + "modified": "2019-01-16T16:00:25.874Z", "contributors": [ - "Anonymous", - "carlosrainhaaraujo" + "ExE-Boss", + "Leandro Mercês Xavier" ] }, - "Web/SVG": { - "modified": "2020-04-23T09:30:08.420Z", + "orphaned/Web/XSLT/Elementos": { + "modified": "2019-03-23T23:45:26.056Z", "contributors": [ - "Anonymous", - "teoli", - "guerreirogabriel", - "fscholz", - "Verruckt", - "RuiMaciel" + "ExE-Boss", + "Verruckt" ] }, - "Web/SVG/Aplicar_efeitos_SVG_conteudo_HTML": { - "modified": "2019-03-23T22:01:45.461Z", + "WebAssembly/Using_the_JavaScript_API": { + "modified": "2019-03-18T21:28:49.091Z", "contributors": [ "Anonymous" ] }, - "Web/SVG/Element": { - "modified": "2020-04-23T09:28:28.562Z", + "orphaned/XForms_especiais_para_Mozilla": { + "modified": "2019-03-23T23:56:39.810Z", "contributors": [ - "Anonymous", - "ricardomartins" + "Verruckt", + "Kayalemao" ] }, - "Web/SVG/Namespaces_Crash_Course": { - "modified": "2019-03-23T22:01:50.555Z", + "orphaned/XForms/Controles_Customizados": { + "modified": "2019-01-16T16:02:25.038Z", "contributors": [ - "Anonymous", - "somascope" + "Kayalemao", + "Leandro Mercês Xavier", + "Verruckt" ] }, - "Web/SVG/Namespaces_Crash_Course/Exemplo": { - "modified": "2019-03-23T22:01:57.842Z", + "orphaned/XForms": { + "modified": "2019-03-23T23:46:37.205Z", "contributors": [ - "Anonymous" + "Luis Henrique Sousa" ] }, - "Web/SVG/SVG_animacao_com_SMIL": { - "modified": "2020-04-23T08:20:39.391Z", + "Glossary/XHTML": { + "modified": "2019-03-23T23:40:29.099Z", "contributors": [ - "Anonymous" + "Anonymous", + "RuiMaciel" ] }, - "Web/SVG/Tutorial": { - "modified": "2019-01-16T14:01:46.161Z", + "orphaned/XML_no_Mozilla": { + "modified": "2019-11-21T20:42:12.364Z", "contributors": [ - "Anonymous", - "teoli", - "guerreirogabriel" + "wbamberg", + "Verruckt", + "Victorino" ] }, - "Web/SVG/Tutorial/Introducao": { - "modified": "2020-04-23T09:22:08.765Z", + "conflicting/Web/API/XMLHttpRequest": { + "modified": "2019-03-23T23:50:48.749Z", "contributors": [ - "Anonymous" + "SphinxKnight", + "Leandro Mercês Xavier", + "RuiMaciel" ] }, - "Web/SVG/Tutorial/SVG_na_Introducao_HTML": { - "modified": "2019-03-23T22:01:48.509Z", + "orphaned/XPath/Eixos": { + "modified": "2019-01-16T16:02:01.247Z", "contributors": [ - "Anonymous" + "Verruckt" ] }, - "Web/Security/Conteudo_misto": { - "modified": "2019-03-23T22:05:48.971Z", + "orphaned/XPath/Funções": { + "modified": "2019-01-16T16:07:00.758Z", "contributors": [ - "Anonymous", - "sideshowbarker" + "Verruckt" ] }, - "Web/Security/Mixed_content/Como_corrigir_um_site_da_Web_com_conteudo_misto_bloqueado": { - "modified": "2019-03-23T22:05:54.761Z", + "Learn/CSS/Building_blocks": { + "modified": "2019-03-24T00:00:34.956Z", "contributors": [ - "Anonymous" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/Security/Secure_Contexts": { - "modified": "2019-03-23T22:01:19.367Z", + "Learn/CSS/Building_blocks/Cascade_and_inheritance": { + "modified": "2019-03-24T00:00:35.429Z", "contributors": [ - "Anonymous", - "Sheppy" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/Seguranca": { - "modified": "2019-09-10T16:45:22.612Z", + "Learn/CSS/First_steps/How_CSS_works": { + "modified": "2019-03-24T00:00:37.691Z", "contributors": [ - "SphinxKnight", - "Anonymous" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/Seguranca/Palavras-passe_inseguras": { - "modified": "2019-03-23T22:01:41.675Z", + "Learn/CSS/Building_blocks/Values_and_units": { + "modified": "2019-03-24T00:00:35.276Z", "contributors": [ - "rborges77", - "Anonymous" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/Seguranca/Same-origin_policy": { - "modified": "2020-09-26T17:57:02.589Z", + "Learn/CSS/First_steps/How_CSS_is_structured": { + "modified": "2019-03-24T00:00:36.923Z", "contributors": [ - "Samuel-Ferdnand" + "fscholz", + "teoli", + "Verruckt", + "Luis Henrique Sousa", + "Leandro Mercês Xavier" ] }, - "Web/Tutoriais": { - "modified": "2020-05-03T14:51:14.988Z", + "Learn/CSS/CSS_layout": { + "modified": "2019-03-24T00:00:37.327Z", "contributors": [ - "Anonymous" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/WebAPI": { - "modified": "2019-03-23T22:01:53.174Z", + "Learn/CSS/Styling_text/Fundamentals": { + "modified": "2019-03-24T00:00:39.580Z", "contributors": [ - "Anonymous", - "wbamberg", - "fscholz" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier", + "Luis Henrique Sousa" ] }, - "Web/XML": { - "modified": "2020-04-23T08:26:21.649Z", + "Learn/CSS/First_steps": { + "modified": "2019-03-23T23:44:54.310Z", "contributors": [ "Anonymous", - "ExE-Boss" + "teoli", + "Leandro Mercês Xavier", + "Verruckt", + "Pilinio", + "Luisvulcanis" ] }, - "Web/XML/Introducao_a_XML": { - "modified": "2019-05-01T21:54:16.756Z", + "Learn/JavaScript/Client-side_web_APIs/Manipulating_documents": { + "modified": "2019-03-24T00:00:40.211Z", "contributors": [ - "ExE-Boss", - "Anonymous" + "fscholz", + "teoli", + "ethertank", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "Web/XSLT": { - "modified": "2019-03-24T00:03:57.070Z", + "Learn/CSS/Styling_text/Styling_lists": { + "modified": "2019-03-24T00:00:36.171Z", "contributors": [ - "ExE-Boss", - "Anonymous", "fscholz", + "teoli", "Verruckt", - "RuiMaciel" + "Luis Henrique Sousa", + "Leandro Mercês Xavier" ] }, - "Web/XSLT/Comunidade": { - "modified": "2019-01-16T16:00:25.874Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works": { + "modified": "2019-03-24T00:00:33.943Z", "contributors": [ - "ExE-Boss", - "Leandro Mercês Xavier" + "Sebastianz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier", + "Pilinio" ] }, - "Web/XSLT/Elementos": { - "modified": "2019-03-23T23:45:26.056Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works_0767812f50daab83155d62da97c6e460": { + "modified": "2019-03-24T00:00:39.116Z", "contributors": [ - "ExE-Boss", - "Verruckt" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier", + "Pilinio" ] }, - "WebAssembly": { - "modified": "2020-10-15T22:07:45.071Z", + "Learn/CSS/Building_blocks/Selectors": { + "modified": "2019-03-24T00:00:36.764Z", "contributors": [ - "Anonymous" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "WebAssembly/Utilizar_API_JavaScript_WebAssembly": { - "modified": "2019-03-18T21:28:49.091Z", + "Learn/CSS/Building_blocks/Styling_tables": { + "modified": "2019-03-24T00:00:35.865Z", "contributors": [ - "Anonymous" + "fscholz", + "teoli", + "Verruckt", + "Leandro Mercês Xavier" ] }, - "XForms": { - "modified": "2019-03-23T23:46:37.205Z", + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:44:16.974Z", "contributors": [ - "Luis Henrique Sousa" + "teoli" ] }, - "XForms/Controles_Customizados": { - "modified": "2019-01-16T16:02:25.038Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { + "modified": "2019-03-24T00:04:47.389Z", "contributors": [ - "Kayalemao", - "Leandro Mercês Xavier", + "Anonymous", + "teoli", "Verruckt" ] }, - "XForms_especiais_para_Mozilla": { - "modified": "2019-03-23T23:56:39.810Z", + "Web/CSS/gap": { + "modified": "2020-10-15T22:00:32.351Z", "contributors": [ - "Verruckt", - "Kayalemao" + "Anonymous" ] }, - "XHTML": { - "modified": "2019-03-23T23:40:29.099Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2019-03-23T22:49:04.241Z", "contributors": [ - "Anonymous", - "RuiMaciel" + "Redeagle48" ] }, - "XMLHttpRequest": { - "modified": "2019-03-23T23:50:48.749Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T22:13:51.986Z", "contributors": [ - "SphinxKnight", - "Leandro Mercês Xavier", - "RuiMaciel" + "Anonymous" ] }, - "XML_no_Mozilla": { - "modified": "2019-11-21T20:42:12.364Z", + "conflicting/Web/Progressive_web_apps": { + "modified": "2019-03-18T20:52:07.669Z", "contributors": [ - "wbamberg", - "Verruckt", - "Victorino" + "chrisdavidmills", + "Anonymous" ] }, - "XPath/Eixos": { - "modified": "2019-01-16T16:02:01.247Z", + "conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks": { + "modified": "2019-03-18T20:52:08.064Z", "contributors": [ - "Verruckt" + "chrisdavidmills", + "Anonymous" ] }, - "XPath/Funções": { - "modified": "2019-01-16T16:07:00.758Z", + "conflicting/Web/Progressive_web_apps_c5ce9d8c3500409dbf6f879e4fe3cb8a": { + "modified": "2019-03-18T20:52:08.238Z", "contributors": [ - "Verruckt" + "chrisdavidmills", + "Anonymous" + ] + }, + "conflicting/Web/API": { + "modified": "2019-03-23T22:01:53.174Z", + "contributors": [ + "Anonymous", + "wbamberg", + "fscholz" ] } } \ No newline at end of file diff --git a/files/pt-pt/conflicting/glossary/api/index.html b/files/pt-pt/conflicting/glossary/api/index.html index cc99d2c980..cac9a8e45d 100644 --- a/files/pt-pt/conflicting/glossary/api/index.html +++ b/files/pt-pt/conflicting/glossary/api/index.html @@ -1,11 +1,12 @@ --- title: IPA -slug: Glossário/API +slug: conflicting/Glossary/API tags: - Glossário - IPA - Infraestrutura translation_of: Glossary/API +original_slug: Glossário/API ---

Uma IPA (Interface de Programação de Aplicação ou em inglês API) é um conjunto de funcionalidades e regras que existem dentro dum logiciário (a aplicação) que habilitam a interação entre o logiciário - em oposição a uma interface de utilizador humana. A IPA pode ser vista como um simples contrato (a interface) entre a aplicação que a oferece e os outros items, como os logiciários e equipamentos de terceiros.

diff --git a/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html index 2ee2937e47..e1c841d2c6 100644 --- a/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html +++ b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html @@ -1,10 +1,11 @@ --- title: O que é CSS -slug: Web/CSS/Como_começar/O_que_é_CSS +slug: conflicting/Learn/CSS/First_steps/How_CSS_works tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +original_slug: Web/CSS/Como_começar/O_que_é_CSS ---

{{Next("CSS:Como começar:Porque usar CSS")}}

diff --git a/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html index 2adc531924..7a412579a8 100644 --- a/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html +++ b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html @@ -1,10 +1,12 @@ --- title: Porque usar CSS -slug: Web/CSS/Como_começar/Porque_usar_CSS +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_0767812f50daab83155d62da97c6e460 tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +original_slug: Web/CSS/Como_começar/Porque_usar_CSS ---

{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}

diff --git a/files/pt-pt/conflicting/mdn/contribute/index.html b/files/pt-pt/conflicting/mdn/contribute/index.html index 9c9ca16511..7d491bd72f 100644 --- a/files/pt-pt/conflicting/mdn/contribute/index.html +++ b/files/pt-pt/conflicting/mdn/contribute/index.html @@ -1,11 +1,12 @@ --- title: Contribuir para a MDN -slug: MDN_at_ten/Contribuir_para_MDN +slug: conflicting/MDN/Contribute tags: - Metadados MDN - Mozilla - contribuir translation_of: MDN_at_ten/Contributing_to_MDN +original_slug: MDN_at_ten/Contribuir_para_MDN ---
diff --git a/files/pt-pt/conflicting/web/api/index.html b/files/pt-pt/conflicting/web/api/index.html index fbcae3aea5..c439b1c63f 100644 --- a/files/pt-pt/conflicting/web/api/index.html +++ b/files/pt-pt/conflicting/web/api/index.html @@ -1,6 +1,6 @@ --- title: WebAPI -slug: Web/WebAPI +slug: conflicting/Web/API tags: - Aplicações - Apps @@ -9,6 +9,7 @@ tags: - Movel translation_of: Web/API translation_of_original: WebAPI +original_slug: Web/WebAPI ---

WebAPI é um termo utilizado para referir um conjunto de compatibilidade de dispositivo e APIs de acesso que permitem que as aplicações da Web e o conteúdo acedam ao dispositivo de hardware (tais como estado da bateria ou hardware de vibração do dispositivo), bem como aceder aos dados guardados no dispositivo (tais como o calendário ou lista de contactos). Ao adicionarmos estas APIs, nós esperamos que expanda o que a Web pode fazer hoje, para também incluirem o que apenas as plataformas proprietárias podiam fazer no passado.

diff --git a/files/pt-pt/conflicting/web/api/web_storage_api/index.html b/files/pt-pt/conflicting/web/api/web_storage_api/index.html index 192a51ee66..50bf4d81b4 100644 --- a/files/pt-pt/conflicting/web/api/web_storage_api/index.html +++ b/files/pt-pt/conflicting/web/api/web_storage_api/index.html @@ -1,6 +1,6 @@ --- title: API de Armazenamento da Web -slug: Web/API/API_de_Armazenamento_da_Web +slug: conflicting/Web/API/Web_Storage_API tags: - API - Armazenamento @@ -9,6 +9,7 @@ tags: - Armazenamento da Web - Referencia translation_of: Web/API/Web_Storage_API +original_slug: Web/API/API_de_Armazenamento_da_Web ---

{{DefaultAPISidebar("Web Storage API")}}

diff --git a/files/pt-pt/conflicting/web/api/xmlhttprequest/index.html b/files/pt-pt/conflicting/web/api/xmlhttprequest/index.html index 3b5d4adef9..3d7db7d8ae 100644 --- a/files/pt-pt/conflicting/web/api/xmlhttprequest/index.html +++ b/files/pt-pt/conflicting/web/api/xmlhttprequest/index.html @@ -1,11 +1,12 @@ --- title: XMLHttpRequest -slug: XMLHttpRequest +slug: conflicting/Web/API/XMLHttpRequest tags: - AJAX - - 'AJAX:Outros_Recursos' + - AJAX:Outros_Recursos - Outros_Recursos - Todas_as_Categorias +original_slug: XMLHttpRequest ---

 

diff --git a/files/pt-pt/conflicting/web/javascript/reference/global_objects/number/index.html b/files/pt-pt/conflicting/web/javascript/reference/global_objects/number/index.html index 9014ecdb24..e00342daeb 100644 --- a/files/pt-pt/conflicting/web/javascript/reference/global_objects/number/index.html +++ b/files/pt-pt/conflicting/web/javascript/reference/global_objects/number/index.html @@ -1,6 +1,6 @@ --- title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number tags: - JavaScript - Number @@ -8,6 +8,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Number translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---
{{JSRef}}
diff --git a/files/pt-pt/conflicting/web/javascript/reference/global_objects/object/index.html b/files/pt-pt/conflicting/web/javascript/reference/global_objects/object/index.html index 411832665a..ab52d5bfc3 100644 --- a/files/pt-pt/conflicting/web/javascript/reference/global_objects/object/index.html +++ b/files/pt-pt/conflicting/web/javascript/reference/global_objects/object/index.html @@ -1,6 +1,6 @@ --- title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object tags: - JavaScript - Object @@ -8,6 +8,7 @@ tags: - Propriedade translation_of: Web/JavaScript/Reference/Global_Objects/Object translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---
{{JSRef}}
diff --git a/files/pt-pt/conflicting/web/progressive_web_apps/index.html b/files/pt-pt/conflicting/web/progressive_web_apps/index.html index 712d465d91..bb2c9e7287 100644 --- a/files/pt-pt/conflicting/web/progressive_web_apps/index.html +++ b/files/pt-pt/conflicting/web/progressive_web_apps/index.html @@ -1,6 +1,6 @@ --- title: Identificável -slug: Web/Progressive_web_apps/Identificavel +slug: conflicting/Web/Progressive_web_apps tags: - Aplicações - Aplicações da Web modernas @@ -10,6 +10,7 @@ tags: - manifesto da Web translation_of: Web/Progressive_web_apps translation_of_original: Web/Progressive_web_apps/Discoverable +original_slug: Web/Progressive_web_apps/Identificavel ---
As soon as you publish a new web app, you want the world to know about it. Search engines do ok, but often more control is desired over how your apps are exposed in search results. The new W3C Manifest for a web application can help with this, along with other available features.
diff --git a/files/pt-pt/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html b/files/pt-pt/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html index 23bf84f782..96a1ff04a9 100644 --- a/files/pt-pt/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html +++ b/files/pt-pt/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html @@ -1,6 +1,7 @@ --- title: Desenho responsivo -slug: Web/Progressive_web_apps/Responsivo +slug: >- + conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks tags: - Aplicações - Aplicações da Web progressivas @@ -8,6 +9,7 @@ tags: - Responsivo translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks translation_of_original: Web/Progressive_web_apps/Responsive +original_slug: Web/Progressive_web_apps/Responsivo ---
As aplicações da Web responsivas utilizam tecnologias, tais como consultas de multimédia e viewport para se certificar que as suas UIs irão enquadrar qualquer fator de forma: pc, telemóvel, tablet, ou que quer que venha a seguir.
diff --git a/files/pt-pt/conflicting/web/progressive_web_apps_c5ce9d8c3500409dbf6f879e4fe3cb8a/index.html b/files/pt-pt/conflicting/web/progressive_web_apps_c5ce9d8c3500409dbf6f879e4fe3cb8a/index.html index 6ef841c83f..62d49e8bc5 100644 --- a/files/pt-pt/conflicting/web/progressive_web_apps_c5ce9d8c3500409dbf6f879e4fe3cb8a/index.html +++ b/files/pt-pt/conflicting/web/progressive_web_apps_c5ce9d8c3500409dbf6f879e4fe3cb8a/index.html @@ -1,6 +1,6 @@ --- title: Segurança -slug: Web/Progressive_web_apps/Seguro +slug: conflicting/Web/Progressive_web_apps_c5ce9d8c3500409dbf6f879e4fe3cb8a tags: - Aplicações - Aplicações da Web modernas @@ -11,6 +11,7 @@ tags: - Web translation_of: Web/Progressive_web_apps translation_of_original: Web/Progressive_web_apps/Safe +original_slug: Web/Progressive_web_apps/Seguro ---
A plataforma da Web fornece um mecanismo de entrega seguro que evita a espionagem e garante que o conteúdo não foi adulterado - desde que aproveite o HTTPS e desenvolva as suas aplicações com a segurança em mente.
diff --git a/files/pt-pt/games/index.html b/files/pt-pt/games/index.html index b7058ec932..93a326cd83 100644 --- a/files/pt-pt/games/index.html +++ b/files/pt-pt/games/index.html @@ -1,7 +1,8 @@ --- title: Desenvolvimento de Jogos -slug: Jogos +slug: Games translation_of: Games +original_slug: Jogos ---
{{GamesSidebar}}
diff --git a/files/pt-pt/games/tutorials/index.html b/files/pt-pt/games/tutorials/index.html index 55417d7bdc..bf6285b9cb 100644 --- a/files/pt-pt/games/tutorials/index.html +++ b/files/pt-pt/games/tutorials/index.html @@ -1,6 +1,6 @@ --- title: Tutoriais -slug: Jogos/Tutoriais +slug: Games/Tutorials tags: - Canvas - JavaScript @@ -8,6 +8,7 @@ tags: - Ritmos de Trabalho - Web translation_of: Games/Tutorials +original_slug: Jogos/Tutoriais ---
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
diff --git a/files/pt-pt/glossary/404/index.html b/files/pt-pt/glossary/404/index.html index f1e0f934dc..b91d747d61 100644 --- a/files/pt-pt/glossary/404/index.html +++ b/files/pt-pt/glossary/404/index.html @@ -1,12 +1,13 @@ --- title: '404' -slug: Glossário/404 +slug: Glossary/404 tags: - Erros HTTP - Glossário - Infraestrutura - Navegação translation_of: Glossary/404 +original_slug: Glossário/404 ---

O 404 é um código de resposta padrão que significa que o {{Glossary("Server", "servidor")}} não consegue encontrar o recurso solicitado.

diff --git a/files/pt-pt/glossary/502/index.html b/files/pt-pt/glossary/502/index.html index 3c7750028c..f18df6cf19 100644 --- a/files/pt-pt/glossary/502/index.html +++ b/files/pt-pt/glossary/502/index.html @@ -1,6 +1,6 @@ --- title: '502' -slug: Glossário/502 +slug: Glossary/502 tags: - '502' - Bad Gateway @@ -9,6 +9,7 @@ tags: - Infraestrutura - Navegação translation_of: Glossary/502 +original_slug: Glossário/502 ---

Um erro {{Glossary("HTTP")}} significando "Bad Gateway".

diff --git a/files/pt-pt/glossary/accessibility/index.html b/files/pt-pt/glossary/accessibility/index.html index 6f8338d718..d9b4a45827 100644 --- a/files/pt-pt/glossary/accessibility/index.html +++ b/files/pt-pt/glossary/accessibility/index.html @@ -1,10 +1,11 @@ --- title: Acessibilidade -slug: Glossário/Acessibilidade +slug: Glossary/Accessibility tags: - Acessibilidade - Glossário translation_of: Glossary/Accessibility +original_slug: Glossário/Acessibilidade ---

A Acessibilidade da Web (A11Y)refere-se às melhores práticas para manter um site da Web utilizável, apesar das restrições físicas e técnicas. A acessibilidade da Web é formalmente definida e discutida no {{Glossary("W3C")}} através de {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).

diff --git a/files/pt-pt/glossary/ajax/index.html b/files/pt-pt/glossary/ajax/index.html index 3dde7c92c4..9f5e77c3b8 100644 --- a/files/pt-pt/glossary/ajax/index.html +++ b/files/pt-pt/glossary/ajax/index.html @@ -1,13 +1,14 @@ --- title: Ajax -slug: Glossário/AJAX +slug: Glossary/AJAX tags: - AJAX - CodingScripting - Glossário - - 'I10n:priority' + - I10n:priority - Infraestrutura translation_of: Glossary/AJAX +original_slug: Glossário/AJAX ---

Ajax, que inicialmente significava Asynchronous JavaScript And XML (em português {{Glossary("JavaScript")}} e {{Glossary("XML")}} Assíncrono), é uma prática de programação de construção de páginas web complexas e dinâmicas utilizando uma tecnologia conhecida como {{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}}.

diff --git a/files/pt-pt/glossary/argument/index.html b/files/pt-pt/glossary/argument/index.html index 0b2cecac78..f4d102588f 100644 --- a/files/pt-pt/glossary/argument/index.html +++ b/files/pt-pt/glossary/argument/index.html @@ -1,12 +1,13 @@ --- title: Argumento -slug: Glossário/Argumento +slug: Glossary/Argument tags: - CodingScripting - Glossary - Glossário - JavaScript translation_of: Glossary/Argument +original_slug: Glossário/Argumento ---

Um argument é um {{glossary("value","valor")}} ({{Glossary("primitive","primitivo")}} ou {{Glossary("object","objeto")}}) passado como entrada para uma {{Glossary("function","função")}}.

diff --git a/files/pt-pt/glossary/aria/index.html b/files/pt-pt/glossary/aria/index.html index 4dfa6a754d..ae453a4bd7 100644 --- a/files/pt-pt/glossary/aria/index.html +++ b/files/pt-pt/glossary/aria/index.html @@ -1,10 +1,11 @@ --- title: ARIA -slug: Glossário/ARIA +slug: Glossary/ARIA tags: - Acessibilidade - Glossário translation_of: Glossary/ARIA +original_slug: Glossário/ARIA ---

ARIA (Accessible Rich {{glossary("Internet")}} Applications) é uma especificação da {{Glossary("W3C")}} para adicionar semântica e outros metadados ao {{Glossary("HTML")}} para atender usuários de tecnologia assistiva.

diff --git a/files/pt-pt/glossary/bigint/index.html b/files/pt-pt/glossary/bigint/index.html index 44726be185..0fb083825f 100644 --- a/files/pt-pt/glossary/bigint/index.html +++ b/files/pt-pt/glossary/bigint/index.html @@ -1,6 +1,6 @@ --- title: BigInt -slug: Glossário/BigInt +slug: Glossary/BigInt tags: - BigInt - Formato de Precisão Arbitrária @@ -8,5 +8,6 @@ tags: - JavaScript - Referencia translation_of: Glossary/BigInt +original_slug: Glossário/BigInt ---

Em {{Glossary("JavaScript")}}, BigInt é um tipo de dados numéricos que pode representar inteiros num {{interwiki("wikipedia", "Bignum", "formato de precisão arbitrária")}}. Em outras linguagens de programação podem existir diferentes tipos de dados numéricos, por exemplo: Inteiros, Flutuadores, Duplos, ou Bignums.

diff --git a/files/pt-pt/glossary/block_cipher_mode_of_operation/index.html b/files/pt-pt/glossary/block_cipher_mode_of_operation/index.html index c9f87eb850..a4e8945e2f 100644 --- a/files/pt-pt/glossary/block_cipher_mode_of_operation/index.html +++ b/files/pt-pt/glossary/block_cipher_mode_of_operation/index.html @@ -1,12 +1,13 @@ --- title: Modo de operação de cifra de bloco -slug: Glossário/Modo_de_operação_de_cifra_de_bloco +slug: Glossary/Block_cipher_mode_of_operation tags: - Criptografía - Glossário - Modo de operação de cifra de bloco - Segurança translation_of: Glossary/Block_cipher_mode_of_operation +original_slug: Glossário/Modo_de_operação_de_cifra_de_bloco ---

Um modo de operação de cifra de bloco, especifica como uma cifra de bloco deve ser usado para encriptar e decrepitar mensagens que são maiores que o bloco.

diff --git a/files/pt-pt/glossary/boolean/index.html b/files/pt-pt/glossary/boolean/index.html index dc4c3bfc21..503ac36e8c 100644 --- a/files/pt-pt/glossary/boolean/index.html +++ b/files/pt-pt/glossary/boolean/index.html @@ -1,6 +1,6 @@ --- title: Booliano -slug: Glossário/booliano +slug: Glossary/Boolean tags: - Booleano - Booliano @@ -10,6 +10,7 @@ tags: - Progração Scripting - tipos de dados translation_of: Glossary/Boolean +original_slug: Glossário/booliano ---

Na informática, um booliano é um tipo de dados lógico que pode ter apenas os valores verdadeiro ou falso. Por exemplo, em JavaScript, as condicionais de boolianos são frequentemente utilizadas ​​para decidir quais as secções de código a serem executadas (tal como em declarações if) ou repetir (tal como repetições for).

diff --git a/files/pt-pt/glossary/browser/index.html b/files/pt-pt/glossary/browser/index.html index 6adcf06dd5..f55166ad4a 100644 --- a/files/pt-pt/glossary/browser/index.html +++ b/files/pt-pt/glossary/browser/index.html @@ -1,10 +1,11 @@ --- title: Navegador -slug: Glossário/Navegador +slug: Glossary/Browser tags: - Glossário - Navegação translation_of: Glossary/Browser +original_slug: Glossário/Navegador ---

Um navegador da Web é um programa que obtém e exibe páginas a partir da {{Glossary("World Wide Web","Web")}}, e deixa os utilziadores acerem a mais páginas através de {{Glossary("hyperlink","hiperligações")}}.

diff --git a/files/pt-pt/glossary/cache/index.html b/files/pt-pt/glossary/cache/index.html index d3372eebf0..91eb49d39e 100644 --- a/files/pt-pt/glossary/cache/index.html +++ b/files/pt-pt/glossary/cache/index.html @@ -1,10 +1,11 @@ --- title: Cache -slug: Glossário/Cache +slug: Glossary/Cache tags: - Glossário - HTTP translation_of: Glossary/Cache +original_slug: Glossário/Cache ---

Um cache (web cache or cache HTTP) é um componente que armazena respostas HTTP temporariamente para que para que possa ser utilizado para pedidos HTTP subesequentes, desde que cumpra determinadas condições.

diff --git a/files/pt-pt/glossary/cia/index.html b/files/pt-pt/glossary/cia/index.html index 164bd5ab91..ba97dca690 100644 --- a/files/pt-pt/glossary/cia/index.html +++ b/files/pt-pt/glossary/cia/index.html @@ -1,10 +1,11 @@ --- title: CIA -slug: Glossário/CIA +slug: Glossary/CIA tags: - Glossário - Segurança translation_of: Glossary/CIA +original_slug: Glossário/CIA ---

A CIA (Confidentiality, Integrity, Availability) (em português Confidencialidade, Integridade, Disponibilidade), também chamada a tríade CIA ou a tríade AIC, é um modelo que orienta as políticas de segurança da informação de uma organização.

diff --git a/files/pt-pt/glossary/compile/index.html b/files/pt-pt/glossary/compile/index.html index 4242775302..4a2313b9e3 100644 --- a/files/pt-pt/glossary/compile/index.html +++ b/files/pt-pt/glossary/compile/index.html @@ -1,10 +1,11 @@ --- title: Compilar -slug: Glossário/Compilar +slug: Glossary/Compile tags: - CodingScripting - Glossário translation_of: Glossary/Compile +original_slug: Glossário/Compilar ---

Compilar é o processo de transformar um programa de computador em uma determinada linguagem de programação para o mesmo programa escrito em outro idioma (normalmente um idioma binário que o computador pode executar).

diff --git a/files/pt-pt/glossary/crlf/index.html b/files/pt-pt/glossary/crlf/index.html index 6ee96215ed..76de0cb1e8 100644 --- a/files/pt-pt/glossary/crlf/index.html +++ b/files/pt-pt/glossary/crlf/index.html @@ -1,6 +1,6 @@ --- title: CRLF -slug: Glossário/CRLF +slug: Glossary/CRLF tags: - CR - CRLF @@ -10,6 +10,7 @@ tags: - Nova Linha - carriage return translation_of: Glossary/CRLF +original_slug: Glossário/CRLF ---

CR e LF são caracteres de controlo ou {{interwiki("wikipedia", "bytecode")}} que podem ser utilizados para marcar uma quebra de linha num ficheiro de texto.

diff --git a/files/pt-pt/glossary/cross_axis/index.html b/files/pt-pt/glossary/cross_axis/index.html index 79b1d8d2c3..2882ed5be8 100644 --- a/files/pt-pt/glossary/cross_axis/index.html +++ b/files/pt-pt/glossary/cross_axis/index.html @@ -1,11 +1,12 @@ --- title: Eixo transversal -slug: Glossário/Eixo_transversal +slug: Glossary/Cross_Axis tags: - CSS - Glossário - flexbox translation_of: Glossary/Cross_Axis +original_slug: Glossário/Eixo_transversal ---

Numa {{glossary("flexbox")}}, ou eixo transveral é perpendicular ao {{glossary("main axis")}}, o que significa que se a direção for ao longo de uma linha (ou seja, {{cssxref("flex-direction")}} é row ou row-reverse) então o eixo transversal estende-se ao longo das colunas.

diff --git a/files/pt-pt/glossary/crud/index.html b/files/pt-pt/glossary/crud/index.html index 175789d7ed..60d0b0bf08 100644 --- a/files/pt-pt/glossary/crud/index.html +++ b/files/pt-pt/glossary/crud/index.html @@ -1,10 +1,11 @@ --- title: CRUD -slug: Glossário/CRUD +slug: Glossary/CRUD tags: - Glossário - Infraestrutura translation_of: Glossary/CRUD +original_slug: Glossário/CRUD ---

CRUD (Create, Read, Update, Delete) (em português criação, consulta, atualização e destruição) é um acrónimo para as formas como se pode operar com dados armazenados. É uma mnemónica para as quatro funções básicas de armazenamento persistente.  CRUD refere-se normalmente a operações realizadas numa base de dados ou datastore, mas pode também aplicar-se a funções de nível superior de uma aplicação, tais como soft delete, onde os dados não são realmente apagados, mas marcados como apagados.

diff --git a/files/pt-pt/glossary/dhtml/index.html b/files/pt-pt/glossary/dhtml/index.html index 29c7db34c9..ef3f833b39 100644 --- a/files/pt-pt/glossary/dhtml/index.html +++ b/files/pt-pt/glossary/dhtml/index.html @@ -1,9 +1,10 @@ --- title: DHTML -slug: DHTML +slug: Glossary/DHTML tags: - DHTML - Todas_as_Categorias translation_of: Glossary/DHTML +original_slug: DHTML ---

DHTML é uma sigla que signfica "dynamic HTML". O termo DHTML é geralmente usado como referência ao código que se encontra por detrás de páginas interactivas que não são baseadas em plugins como Flash ou Java. O termo reúne a funcionalidade combinada que é disponibilizada aos programadores usando HTML, CSS, Document Object Model e JavaScript

diff --git a/files/pt-pt/glossary/dom/index.html b/files/pt-pt/glossary/dom/index.html index b2106f7a82..7f3233b76c 100644 --- a/files/pt-pt/glossary/dom/index.html +++ b/files/pt-pt/glossary/dom/index.html @@ -1,11 +1,12 @@ --- title: DOM (Modelo de Objeto de Documento) -slug: Glossário/DOM +slug: Glossary/DOM tags: - CodingScripting - DOM - Glossário translation_of: Glossary/DOM +original_slug: Glossário/DOM ---

O DOM (Modelo de Objeto de Documento) é uma {{Glossary("API")}} que representa e interage com qualquer documento de {{Glossary("HTML")}} ou {{Glossary("XML")}}. O DOM é um modelo de documento carregado no {{glossary("navegador")}} e representando o documento como uma árvore de nodo, onde cada nodo representa parte do documento (por exemplo, um  {{Glossary("elemento")}}, string de texto, ou comentário) .

diff --git a/files/pt-pt/glossary/ecma/index.html b/files/pt-pt/glossary/ecma/index.html index 067a20cc61..ca2061a59e 100644 --- a/files/pt-pt/glossary/ecma/index.html +++ b/files/pt-pt/glossary/ecma/index.html @@ -1,10 +1,11 @@ --- title: ECMA -slug: Glossário/ECMA +slug: Glossary/ECMA tags: - Glossário - Mecanismos Web translation_of: Glossary/ECMA +original_slug: Glossário/ECMA ---

Ecma International (oficialmente Associação Européia dos Fabricantes de Computadores) é uma organização sem fins lucrativos que desenvolve os padrões para hardware de computadores, comunicações e linguagens de programação.

diff --git a/files/pt-pt/glossary/element/index.html b/files/pt-pt/glossary/element/index.html index 4acc682ed0..99cf652e10 100644 --- a/files/pt-pt/glossary/element/index.html +++ b/files/pt-pt/glossary/element/index.html @@ -1,11 +1,12 @@ --- title: Elemento -slug: Glossário/Elemento +slug: Glossary/Element tags: - CodingScripting - Glossário - HTML translation_of: Glossary/Element +original_slug: Glossário/Elemento ---

Um elemento faz parte de uma página da Web. Em XML e HTML, um elemento pode conter um item de dados ou parte de texto ou uma imagem, ou talvez nada. Um elemento típico inclui uma tag de abertura com alguns atributos, conteúdo de texto fechado e uma tag de fecho.Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

diff --git a/files/pt-pt/glossary/engine/index.html b/files/pt-pt/glossary/engine/index.html index f926844c24..693e42cbe4 100644 --- a/files/pt-pt/glossary/engine/index.html +++ b/files/pt-pt/glossary/engine/index.html @@ -1,11 +1,12 @@ --- title: Motor -slug: Glossário/Motor +slug: Glossary/Engine tags: - Codificação - Glossário - Precisa de Conteúdo translation_of: Glossary/Engine +original_slug: Glossário/Motor ---

O motor de {{glossary("JavaScript")}} é um interpretador que analisa e executa um programa JavaScript.

diff --git a/files/pt-pt/glossary/entity_header/index.html b/files/pt-pt/glossary/entity_header/index.html index e7181009c7..b3847c5b9f 100644 --- a/files/pt-pt/glossary/entity_header/index.html +++ b/files/pt-pt/glossary/entity_header/index.html @@ -1,10 +1,11 @@ --- title: Cabeçalho de entidade -slug: Glossário/Cabeçalho_de_entidade +slug: Glossary/Entity_header tags: - Glossário - WebMechanics translation_of: Glossary/Entity_header +original_slug: Glossário/Cabeçalho_de_entidade ---

Um cabeçalho de entidade é um {{glossary("header", "cabeçalho de HTTP")}} que descreve o conteúdo do corpo da mensagem. Cabeçalhos de entidade são usados em pedidos e respostas de HTTP. Cabeçalhos como {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}} são cabeçalhos de entidade.

diff --git a/files/pt-pt/glossary/favicon/index.html b/files/pt-pt/glossary/favicon/index.html index 639edc9921..b7bb4feec2 100644 --- a/files/pt-pt/glossary/favicon/index.html +++ b/files/pt-pt/glossary/favicon/index.html @@ -1,11 +1,12 @@ --- title: Favicon -slug: Glossário/Favicon +slug: Glossary/Favicon tags: - Glossário - Intro - favicon translation_of: Glossary/Favicon +original_slug: Glossário/Favicon ---

Um favicon (do inglês: favorite icon) é um pequeno ícone que acompanha o website, que é visualizado na barra do endereço, guia de páginas e no menu de favoritos. Note, no entanto, que a maior parte dos navegadores modernos substituíram o favicon na barra de endereço por uma imagem, indicando se o site utiliza {{Glossary("https","HTTPS")}}.

diff --git a/files/pt-pt/glossary/flexbox/index.html b/files/pt-pt/glossary/flexbox/index.html index 6964e7a36e..6949c35908 100644 --- a/files/pt-pt/glossary/flexbox/index.html +++ b/files/pt-pt/glossary/flexbox/index.html @@ -1,11 +1,12 @@ --- title: Flexbox -slug: Glossário/Flexbox +slug: Glossary/Flexbox tags: - CSS - Glossário - flexbox translation_of: Glossary/Flexbox +original_slug: Glossário/Flexbox ---

Flexbox é o nome geralmente dado ao Módulo de Layout em Caixa Flexível do CSS (CSS Flexible Box Layout Module), um modelo de layout com o propósito de alinhar elementos numa determinada direção — ao longo de uma linha ou de uma coluna.

diff --git a/files/pt-pt/glossary/git/index.html b/files/pt-pt/glossary/git/index.html index f43064220f..6d409b8d1f 100644 --- a/files/pt-pt/glossary/git/index.html +++ b/files/pt-pt/glossary/git/index.html @@ -1,10 +1,11 @@ --- title: Git -slug: Glossário/Git +slug: Glossary/Git tags: - Colaboração - Glossário translation_of: Glossary/Git +original_slug: Glossário/Git ---

Git é um sistema gratuito, de fonte aberta e distribuído de gestão do código fonte ({{Glossary("SCM", "GCS")}}). Facilita a gestão de bases de código com equipas de desenvolvimento distribuídas. O que o distingue dos sistemas SCM anteriores é a capacidade de fazer operações comuns (criar uma branch, fazer um commit, etc.) na sua máquina de desenvolvimento local, sem ter de alterar o repositório principal ou mesmo ter acesso de escrita a ele.

diff --git a/files/pt-pt/glossary/gzip_compression/index.html b/files/pt-pt/glossary/gzip_compression/index.html index 8be9011fc9..02a5ff637a 100644 --- a/files/pt-pt/glossary/gzip_compression/index.html +++ b/files/pt-pt/glossary/gzip_compression/index.html @@ -1,11 +1,12 @@ --- title: Compressão GZip -slug: Glossário/Compressao_GZip +slug: Glossary/GZip_compression tags: - Glossário - compressão - gzip translation_of: Glossary/GZip_compression +original_slug: Glossário/Compressao_GZip ---

gzip é um algoritmo de compressão que permite reduzir o tamanho dos ficheiros, permitindo transferências mais rápidas na rede. É normalmente suportado pelos servidores da Web e navegadores modernos, o que significa que os servidores podem comprimir automaticamente os ficheiros com o gzip antes de enviá-los, e os navegadores podem descomprimir os ficheiros depois de os receberem.

diff --git a/files/pt-pt/glossary/html/index.html b/files/pt-pt/glossary/html/index.html index 8cb677ae62..8ed02323a0 100644 --- a/files/pt-pt/glossary/html/index.html +++ b/files/pt-pt/glossary/html/index.html @@ -1,12 +1,13 @@ --- title: HTML -slug: Glossário/HTML +slug: Glossary/HTML tags: - Glossário - HTML - Programação Scripting - - 'l10n:priority' + - l10n:priority translation_of: Glossary/HTML +original_slug: Glossário/HTML ---
{{QuickLinksWithSubpages("/pt-PT/docs/Glossário")}}
diff --git a/files/pt-pt/glossary/hypertext/index.html b/files/pt-pt/glossary/hypertext/index.html index 0816740252..c561f8fc21 100644 --- a/files/pt-pt/glossary/hypertext/index.html +++ b/files/pt-pt/glossary/hypertext/index.html @@ -1,11 +1,12 @@ --- title: Hipertexto -slug: Glossário/Hipertexto +slug: Glossary/Hypertext tags: - Glossário - Mecânica da Web - Web translation_of: Glossary/Hypertext +original_slug: Glossário/Hipertexto ---
Sequência de texto que permite a remissão para outra localização (documento, ficheiro, página da Internet, etc.).

diff --git a/files/pt-pt/glossary/iana/index.html b/files/pt-pt/glossary/iana/index.html index f6a4d9c517..7e876ea547 100644 --- a/files/pt-pt/glossary/iana/index.html +++ b/files/pt-pt/glossary/iana/index.html @@ -1,10 +1,11 @@ --- title: IANA -slug: Glossário/IANA +slug: Glossary/IANA tags: - Glossário - Infraestrutura translation_of: Glossary/IANA +original_slug: Glossário/IANA ---

IANA (Internet Assigned Numbers Authority), em português "autoridade para atribuição de números de internet", é uma filial da {{glossary("ICANN")}} reposável pelo registo e / ou atribuição de {{glossary("domain name","nomes de dominio")}}, {{glossary("IP address","endreços IP")}}, e outros nomes e números utilizados pelos {{glossary("protocol","protocolos")}} da Internet.

diff --git a/files/pt-pt/glossary/idempotent/index.html b/files/pt-pt/glossary/idempotent/index.html index a84b97ecbd..354dc28eb7 100644 --- a/files/pt-pt/glossary/idempotent/index.html +++ b/files/pt-pt/glossary/idempotent/index.html @@ -1,7 +1,8 @@ --- title: Idempotent -slug: Glossário/Idempotent +slug: Glossary/Idempotent translation_of: Glossary/Idempotent +original_slug: Glossário/Idempotent ---

Um método HTTP é idempotente se, e só se, o mesmo pedido puder ser feito mais do que uma vez, tendo sempre o mesmo resultado e deixando o servidor no mesmo estado. Por outras palavras, um método idempotente não deve ter efeitos secundários. Implementados corretamente, os métodos {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, and {{HTTPMethod("DELETE")}} são idempotentes, mas não o método {{HTTPMethod("POST")}}. Todos os métodos {{glossary("safe")}} também são idempotentes.

diff --git a/files/pt-pt/glossary/index.html b/files/pt-pt/glossary/index.html index 55cefb9ab1..c8ee5a0bab 100644 --- a/files/pt-pt/glossary/index.html +++ b/files/pt-pt/glossary/index.html @@ -1,6 +1,6 @@ --- title: Glossário -slug: Glossário +slug: Glossary tags: - Beginner - Dicionário @@ -10,6 +10,7 @@ tags: - Terminologia - definições translation_of: Glossary +original_slug: Glossário ---
{{LearnBox({"title":"Aprenda um termo novo:"})}}
diff --git a/files/pt-pt/glossary/indexeddb/index.html b/files/pt-pt/glossary/indexeddb/index.html index 6857254a7b..362ca5c769 100644 --- a/files/pt-pt/glossary/indexeddb/index.html +++ b/files/pt-pt/glossary/indexeddb/index.html @@ -1,12 +1,13 @@ --- title: IndexedDB -slug: Glossário/IndexedDB +slug: Glossary/IndexedDB tags: - API - Banco de Dados - Glossário - Sql translation_of: Glossary/IndexedDB +original_slug: Glossário/IndexedDB ---

IndexedDB é uma {{glossary("API")}} de web para armazenar volumosas estruturas de dados dentro dos navegadores e indexá-los para buscas de alto desempenho. Sendo um RDBMS baseado em {{glossary("SQL")}}, IndexedDB é um sistema de banco de dados transacionais. Porém ele usa objectos {{glossary("JavaScript")}} ao invés de tabelas em colunas fixas para armazenar os dados.

diff --git a/files/pt-pt/glossary/isp/index.html b/files/pt-pt/glossary/isp/index.html index b8d180e53b..dc71c855cd 100644 --- a/files/pt-pt/glossary/isp/index.html +++ b/files/pt-pt/glossary/isp/index.html @@ -1,6 +1,6 @@ --- title: ISP -slug: Glossário/ISP +slug: Glossary/ISP tags: - Fornecedor de acesso à internet - Glossário @@ -8,6 +8,7 @@ tags: - Web - WebMechanics translation_of: Glossary/ISP +original_slug: Glossário/ISP ---

Um ISP (Fornecedor de Acesso à Internet ou em inglês Internet Service Provider) vende acesso à Internet e, por vezes, e-mail, alojamento Web e voz sobre IP, quer através de uma ligação telefónica (antigamente mais comum), quer através de uma ligação de banda larga, tal como um modem por cabo ou serviço DSL.

diff --git a/files/pt-pt/glossary/lazy_load/index.html b/files/pt-pt/glossary/lazy_load/index.html index b94fa537c9..f4fa4bec94 100644 --- a/files/pt-pt/glossary/lazy_load/index.html +++ b/files/pt-pt/glossary/lazy_load/index.html @@ -1,12 +1,13 @@ --- title: Lazy load -slug: Glossário/Lazy_load +slug: Glossary/Lazy_load tags: - Glossário - Lazy loading - Referencia - Web Performance translation_of: Glossary/Lazy_load +original_slug: Glossário/Lazy_load ---

O Lazy loading (carregamento preguiçoso) é uma estratégia que atrasa o carregamento de alguns recursos (por exemplo, imagens) até serem necessários pelo utilizador com base na actividade do utilizador e no seu padrão de navegação; normalmente, estes recursos só são carregados quando são visualizados. Se implementado correctamente, este atraso no carregamento de activos é ininterrupto para a experiência do utilizador e pode ajudar a melhorar o desempenho da carga inicial, incluindo o time to interactive, uma vez que são necessários menos recursos para que a página comece a funcionar.

diff --git a/files/pt-pt/glossary/localization/index.html b/files/pt-pt/glossary/localization/index.html index 38c936a7b1..d22f7537a1 100644 --- a/files/pt-pt/glossary/localization/index.html +++ b/files/pt-pt/glossary/localization/index.html @@ -1,6 +1,6 @@ --- title: Localização -slug: Localização +slug: Glossary/Localization tags: - Colaboração - Glossário @@ -8,6 +8,7 @@ tags: - Localização - Mecânica da Web translation_of: Glossary/Localization +original_slug: Localização ---
Localização (l10n) é o processo de adaptar uma interface do utilizador do software para uma cultura específica.

 

diff --git a/files/pt-pt/glossary/main_axis/index.html b/files/pt-pt/glossary/main_axis/index.html index 02f69020e3..07f9d5b45c 100644 --- a/files/pt-pt/glossary/main_axis/index.html +++ b/files/pt-pt/glossary/main_axis/index.html @@ -1,11 +1,12 @@ --- title: Eixo principal -slug: Glossário/Eixo_principal +slug: Glossary/Main_Axis tags: - CSS - Glossário - flexbox translation_of: Glossary/Main_Axis +original_slug: Glossário/Eixo_principal ---

O eixo principal num {{glossary("flexbox")}} tem a direção definida pela propriedade {{cssxref("flex-direction")}}. Esta propriedade pode ter os seguintes valores:

diff --git a/files/pt-pt/glossary/metadata/index.html b/files/pt-pt/glossary/metadata/index.html index 59cd3c3f6f..118cd4c4cf 100644 --- a/files/pt-pt/glossary/metadata/index.html +++ b/files/pt-pt/glossary/metadata/index.html @@ -1,12 +1,13 @@ --- title: Metadados -slug: Glossário/Metadados +slug: Glossary/Metadata tags: - Glossário - HTML - Programação Scripting - metadados translation_of: Glossary/Metadata +original_slug: Glossário/Metadados ---

Metadados é — na sua definição mais simples - dados que descrevem dados. Por exemplo, um documento {{glossary("HTML")}} é dados, mas HTML também pode conter metadados no seu elemento {{htmlelement("head")}} que descreve o documento — por exemplo, quem o escreveu, e o seu resumo.

diff --git a/files/pt-pt/glossary/mitm/index.html b/files/pt-pt/glossary/mitm/index.html index d4f2414032..8724874eae 100644 --- a/files/pt-pt/glossary/mitm/index.html +++ b/files/pt-pt/glossary/mitm/index.html @@ -1,10 +1,11 @@ --- title: MitM -slug: Glossário/MitM +slug: Glossary/MitM tags: - Glossário - Segurança translation_of: Glossary/MitM +original_slug: Glossário/MitM ---

Um Ataque Man-in-the-middle (MitM) interceta uma comunicação entre dois sistemas. Por exemplo, um roteador Wi-Fi pode estar comprometido.

diff --git a/files/pt-pt/glossary/node.js/index.html b/files/pt-pt/glossary/node.js/index.html index 156c3e365a..cd74805f32 100644 --- a/files/pt-pt/glossary/node.js/index.html +++ b/files/pt-pt/glossary/node.js/index.html @@ -1,12 +1,13 @@ --- title: Node.js -slug: Glossário/Node.js +slug: Glossary/Node.js tags: - Glossário - Infraestrutura - JavaScript - node.js translation_of: Glossary/Node.js +original_slug: Glossário/Node.js ---

Node.js é um ambiente de execução multiplataforma em {{Glossary("JavaScript")}} que permite aos programadores criarem aplicações de rede e 'lado do servidor' com JavaScript.

diff --git a/files/pt-pt/glossary/object/index.html b/files/pt-pt/glossary/object/index.html index c22e16f168..f2947707b7 100644 --- a/files/pt-pt/glossary/object/index.html +++ b/files/pt-pt/glossary/object/index.html @@ -1,6 +1,6 @@ --- title: Objeto -slug: Glossário/Objeto +slug: Glossary/Object tags: - Glossary - Glossário @@ -8,6 +8,7 @@ tags: - Objeto - Programação Scripting translation_of: Glossary/Object +original_slug: Glossário/Objeto ---

Objeto refere-se a uma estrutura de dados contendo dados e instruções para trabalhar com os dados. Os objetos às vezes referem-se a coisas do mundo real, por exemplo, um carro ou objeto de mapa num jogo de carros. {{glossary("JavaScript")}}, Java, C++, Python, e Ruby são exemplos de linguagens em {{glossary("OOP","programação orientada em objeto")}}.

diff --git a/files/pt-pt/glossary/object_reference/index.html b/files/pt-pt/glossary/object_reference/index.html index 1be540d26f..f368d7bbae 100644 --- a/files/pt-pt/glossary/object_reference/index.html +++ b/files/pt-pt/glossary/object_reference/index.html @@ -1,11 +1,12 @@ --- title: Referência de objeto -slug: Glossário/Referencia_de_objeto +slug: Glossary/Object_reference tags: - CodingScripting - Glossary - Glossário translation_of: Glossary/Object_reference +original_slug: Glossário/Referencia_de_objeto ---

Uma ligação para um {{glossary("object","objeto")}}. Referências de objeto podem ser utilziadas como objetos interligados.

diff --git a/files/pt-pt/glossary/oop/index.html b/files/pt-pt/glossary/oop/index.html index c37e75122c..a266f0149b 100644 --- a/files/pt-pt/glossary/oop/index.html +++ b/files/pt-pt/glossary/oop/index.html @@ -1,11 +1,12 @@ --- title: OOP -slug: Glossário/OOP +slug: Glossary/OOP tags: - Glossário - Principiante - Programação Scripting translation_of: Glossary/OOP +original_slug: Glossário/OOP ---

OOP (Programação Orientada em Objeto) é uma abordagem na programação em que os dados são encapsulados dentro de {{glossary("object","objetos")}} e onde o próprio objeto é operado, em vez de suas partes componentes.

diff --git a/files/pt-pt/glossary/ota/index.html b/files/pt-pt/glossary/ota/index.html index ec1f107800..4b787f6b5b 100644 --- a/files/pt-pt/glossary/ota/index.html +++ b/files/pt-pt/glossary/ota/index.html @@ -1,6 +1,6 @@ --- title: OTA -slug: Glossário/OTA +slug: Glossary/OTA tags: - Glossário - Infraestrutura @@ -8,6 +8,7 @@ tags: - Wireless - updates translation_of: Glossary/OTA +original_slug: Glossário/OTA ---

Over-The-Air (OTA ou "Pelo-Ar") refere-se à atualização automática de programas de dispositivos conectados a partir de um servidor central. Todos os proprietários de dispositivos ao receber um determinado conjunto de atualizações estão sob o mesmo "canal"; e cada dispositivo pode amiúde acessar vários canais (e.g. para "builds" de produção ou engenharia).

diff --git a/files/pt-pt/glossary/polyfill/index.html b/files/pt-pt/glossary/polyfill/index.html index f0261120c0..b72e8fd7cf 100644 --- a/files/pt-pt/glossary/polyfill/index.html +++ b/files/pt-pt/glossary/polyfill/index.html @@ -1,7 +1,8 @@ --- title: Polyfill -slug: Glossário/Polyfill +slug: Glossary/Polyfill translation_of: Glossary/Polyfill +original_slug: Glossário/Polyfill ---

Um polyfill é um pedaço de código (geralmente JavaScript) usado para fornecer funcionalidades modernas em browsers mais antigos que não o suportam nativamente.

diff --git a/files/pt-pt/glossary/prototype-based_programming/index.html b/files/pt-pt/glossary/prototype-based_programming/index.html index 8f64f4e216..9dde44c37f 100644 --- a/files/pt-pt/glossary/prototype-based_programming/index.html +++ b/files/pt-pt/glossary/prototype-based_programming/index.html @@ -1,10 +1,11 @@ --- title: Programação baseada em protótipo -slug: Glossário/Prototype-based_programming +slug: Glossary/Prototype-based_programming tags: - Glossário - Programação Scripting translation_of: Glossary/Prototype-based_programming +original_slug: Glossário/Prototype-based_programming ---

A programação baseada em protótipo é um estilo de {{Glossary("OOP", " programação orientada em objeto")}} em que as {{Glossary('Class', 'classes')}} não são explicitamente definidas, mas sim derivadas adicionando as propriedades e os métodos a uma instância de outra classe ou, com menos freqüência, adicione-os a um objeto vazio.

diff --git a/files/pt-pt/glossary/scm/index.html b/files/pt-pt/glossary/scm/index.html index abed4317c5..bb4f1d5f09 100644 --- a/files/pt-pt/glossary/scm/index.html +++ b/files/pt-pt/glossary/scm/index.html @@ -1,12 +1,13 @@ --- title: GCS -slug: Glossário/GCS +slug: Glossary/SCM tags: - CodingScripting - GCS - Glossário - SCM translation_of: Glossary/SCM +original_slug: Glossário/GCS ---

O GCS (Gestão de Controlo de Software ou Source Control Management) é um sistema de gestão do código fonte. Normalmente refere-se à utilização de software para o controlo de versões. Um programador pode modificar arquivos de código fonte sem ter medo de editar coisas úteis, porque um GCS mantém um registo de como o código fonte muda e quem faz as alterações.

diff --git a/files/pt-pt/glossary/server/index.html b/files/pt-pt/glossary/server/index.html index f1e161b3ee..dca22e6b38 100644 --- a/files/pt-pt/glossary/server/index.html +++ b/files/pt-pt/glossary/server/index.html @@ -1,6 +1,6 @@ --- title: Servidor -slug: Glossário/Servidor +slug: Glossary/Server tags: - Glossário - Infraestrutura @@ -8,6 +8,7 @@ tags: - Rede - Servidor translation_of: Glossary/Server +original_slug: Glossário/Servidor ---

Um servidor hardware é um computador compartilhado em uma rede que provê serviços a clientes. Um servidor software é um programa que provê serviços a programas clientes.

diff --git a/files/pt-pt/glossary/signature/index.html b/files/pt-pt/glossary/signature/index.html index c09761e84d..a368dc1fe0 100644 --- a/files/pt-pt/glossary/signature/index.html +++ b/files/pt-pt/glossary/signature/index.html @@ -1,10 +1,11 @@ --- title: Assinatura -slug: Glossário/Assinatura +slug: Glossary/Signature tags: - Desambiguação - Glossário translation_of: Glossary/Signature +original_slug: Glossário/Assinatura ---

O termo assinatura pode ter vários significados dependendo do contexto. Este pode referir-se a:

diff --git a/files/pt-pt/glossary/tag/index.html b/files/pt-pt/glossary/tag/index.html index 825a294e51..f25d60ec10 100644 --- a/files/pt-pt/glossary/tag/index.html +++ b/files/pt-pt/glossary/tag/index.html @@ -1,7 +1,8 @@ --- title: Tag -slug: Glossário/Etiqueta +slug: Glossary/Tag translation_of: Glossary/Tag +original_slug: Glossário/Etiqueta ---

Em {{Glossary("HTML")}} é utilizada uma tag para criar um {{Glossary("element","elemento")}}.  O name de um elemento de HTML é o name utilizado em parêntese angular, tal como <p> para parágrafo. Note que a etiqueta de fim name é precedida pelo caráter "barra oblíqua", "</p>", e nos elementos vazios a etiqueta de fim não é necessária, nem permitida. Se os atributos não forem mencionados, são utilizados os valores predefinidos, em cada caso. 

diff --git a/files/pt-pt/glossary/utf-8/index.html b/files/pt-pt/glossary/utf-8/index.html index 2541862ba3..d89092ed0b 100644 --- a/files/pt-pt/glossary/utf-8/index.html +++ b/files/pt-pt/glossary/utf-8/index.html @@ -1,6 +1,6 @@ --- title: UTF-8 -slug: Glossário/UTF-8 +slug: Glossary/UTF-8 tags: - CodingScripting - Glossário @@ -8,6 +8,7 @@ tags: - JavaScript - Utf-8 translation_of: Glossary/UTF-8 +original_slug: Glossário/UTF-8 ---

UTF-8 (UCS Transformation Format 8) é o {{Glossary("Character encoding", "caráter de codificação")}} mais comum da World Wide Web. Cada caráter é representado por um até quatro bytes. UTF-8 é compatível com versões anteriores de {{Glossary("ASCII")}} e pode representar qualquer caráter Unicode padrão.

diff --git a/files/pt-pt/glossary/value/index.html b/files/pt-pt/glossary/value/index.html index 169f9a0f67..f3bb6c32a6 100644 --- a/files/pt-pt/glossary/value/index.html +++ b/files/pt-pt/glossary/value/index.html @@ -1,6 +1,6 @@ --- title: Valor -slug: Glossário/Valor +slug: Glossary/Value tags: - CodingScripting - Glossary @@ -8,6 +8,7 @@ tags: - NeedsContent - Precisa de Conteúdo translation_of: Glossary/Value +original_slug: Glossário/Valor ---

No contexto de dados ou um objeto {{Glossary("Wrapper", "wrapper")}} em torno desses dados, o valor é o {{Glossary("Primitive","valor primitivo")}} que o objeto wrapper contém. No contexto de uma {{Glossary("Variable","variável")}} ou {{Glossary("Property","propriedade")}}, o valor pode ser um primitivo ou uma {{Glossary("Object reference","referência de objeto")}}.

diff --git a/files/pt-pt/glossary/viewport/index.html b/files/pt-pt/glossary/viewport/index.html index 98daacebe0..2d6ce9bc4b 100644 --- a/files/pt-pt/glossary/viewport/index.html +++ b/files/pt-pt/glossary/viewport/index.html @@ -1,12 +1,13 @@ --- title: Viewport -slug: Glossário/Viewport +slug: Glossary/Viewport tags: - CodingScripting - Glossário - Layout - viewport translation_of: Glossary/Viewport +original_slug: Glossário/Viewport ---

Um viewport representa uma área poligonal (normalmente rectangular) na computação gráfica que pode ser visualizada. Em termos de navegador web, refere-se à area do documento que que é possível visualizar.

diff --git a/files/pt-pt/glossary/visual_viewport/index.html b/files/pt-pt/glossary/visual_viewport/index.html index 3bd82858fb..15e0f838d9 100644 --- a/files/pt-pt/glossary/visual_viewport/index.html +++ b/files/pt-pt/glossary/visual_viewport/index.html @@ -1,12 +1,13 @@ --- title: Viewport Visual -slug: Glossário/Viewport_Visual +slug: Glossary/Visual_Viewport tags: - Glossário - VisualViewport - viewport - viewport visual translation_of: Glossary/Visual_Viewport +original_slug: Glossário/Viewport_Visual ---

A parte do {{Glossary("viewport")}} que é actualmente visível chama-se o "viewport visual". Este pode ser menor que o viewport do layout, por exemplo, quando o utilizador faz um zoom localizado. O viewport visual é a parte visível de um ecrã, excluindo teclados no ecrã, áreas fora de uma área do zoom localizado, ou qualquer outro artefacto no ecrã cuja escala seja independente das dimensões de uma página.

diff --git a/files/pt-pt/glossary/webextensions/index.html b/files/pt-pt/glossary/webextensions/index.html index a86c3706b6..cd9eca2847 100644 --- a/files/pt-pt/glossary/webextensions/index.html +++ b/files/pt-pt/glossary/webextensions/index.html @@ -1,12 +1,13 @@ --- title: Extensões da Web -slug: Glossário/Extensoes_da_Web +slug: Glossary/WebExtensions tags: - CodingScripting - Extensões da Web - Glossário - Precisa de Conteúdo translation_of: Glossary/WebExtensions +original_slug: Glossário/Extensoes_da_Web ---

'Extensões da Web' é um sistema cruzado de navegador para o desenvolvimento de extensões de navegador no Firefox. Este sistema fornece APIs, que em grande parte são suportadas em diferentes navegadores , tais como o Google Chrome, Microsoft Edge, Mozilla Firefox e Opera Browser.

diff --git a/files/pt-pt/glossary/webrtc/index.html b/files/pt-pt/glossary/webrtc/index.html index 452b4f3f24..23ca2c94b2 100644 --- a/files/pt-pt/glossary/webrtc/index.html +++ b/files/pt-pt/glossary/webrtc/index.html @@ -1,6 +1,6 @@ --- title: WebRTC -slug: Glossário/WebRTC +slug: Glossary/WebRTC tags: - Glossário - Infraestrutura @@ -9,6 +9,7 @@ tags: - VoIP - WebRTC translation_of: Glossary/WebRTC +original_slug: Glossário/WebRTC ---

WebRTC (Comunicações da Web em Tempo Real) é uma {{Glossary("API")}} que pode ser utilizada por aplicativos de videoconferência, chamadas de voz, e P2P.

diff --git a/files/pt-pt/glossary/webvtt/index.html b/files/pt-pt/glossary/webvtt/index.html index 774a41a3fc..fcfc456686 100644 --- a/files/pt-pt/glossary/webvtt/index.html +++ b/files/pt-pt/glossary/webvtt/index.html @@ -1,6 +1,6 @@ --- title: WebVTT -slug: Glossário/WebVTT +slug: Glossary/WebVTT tags: - Audio - CodingScripting @@ -9,6 +9,7 @@ tags: - Web - WebVTT translation_of: Glossary/WebVTT +original_slug: Glossário/WebVTT ---

WebVTT (Web Video Text Tracks) (em português Faixas de Texto de Vídeo da Web) é uma especificação {{Glossary("W3C")}} para um formato de ficheiro que marca os recursos da faixa de texto em combinação com o elemento HTML {{HTMLElement("track")}}.

diff --git a/files/pt-pt/glossary/whatwg/index.html b/files/pt-pt/glossary/whatwg/index.html index 9de7c80ab8..7460bb77c4 100644 --- a/files/pt-pt/glossary/whatwg/index.html +++ b/files/pt-pt/glossary/whatwg/index.html @@ -1,6 +1,6 @@ --- title: WHATWG -slug: Glossário/WHATWG +slug: Glossary/WHATWG tags: - Communidade - DOM @@ -11,6 +11,7 @@ tags: - Web - standards translation_of: Glossary/WHATWG +original_slug: Glossário/WHATWG ---

O WHATWG (Web Hypertext Application Technology Working Group) é uma comunidade que mantém e desenvolve padrões web, incluindo {{Glossary("DOM")}}, Fetch, e {{Glossary("HTML")}}. Funcionários da Apple, Mozilla, e Opera estabeleceram o WHATWG em 2004.

diff --git a/files/pt-pt/glossary/world_wide_web/index.html b/files/pt-pt/glossary/world_wide_web/index.html index ee86b296c5..d7b77d6746 100644 --- a/files/pt-pt/glossary/world_wide_web/index.html +++ b/files/pt-pt/glossary/world_wide_web/index.html @@ -1,6 +1,6 @@ --- title: World Wide Web -slug: Glossário/World_Wide_Web +slug: Glossary/World_Wide_Web tags: - Glossário - Infraestrutura @@ -8,6 +8,7 @@ tags: - WWW - World Wide Web translation_of: Glossary/World_Wide_Web +original_slug: Glossário/World_Wide_Web ---

A World Wide Web (Rede Mundial) — comumente conhecido como WWW, W3 ou Web - é um sistema interligado de páginas da Web públicas acessíveis através da {{Glossary('Internet')}}. A Web não é o mesmo que Internet: a Web é uma das muitas aplicações criadas no topo da Internet.

diff --git a/files/pt-pt/glossary/wrapper/index.html b/files/pt-pt/glossary/wrapper/index.html index 534568d817..dbc16d0857 100644 --- a/files/pt-pt/glossary/wrapper/index.html +++ b/files/pt-pt/glossary/wrapper/index.html @@ -1,12 +1,13 @@ --- title: Wrapper -slug: Glossário/Wrapper +slug: Glossary/Wrapper tags: - CodingScripting - Glossary - Glossário - Wrapper translation_of: Glossary/Wrapper +original_slug: Glossário/Wrapper ---

Em linguagem de programação, tal como JavaScript, um wrapper é uma função destinada a chamar uma ou mais outras funções, às vezes apenas por conveniência, e às vezes adaptando-as para executar uma tarefa ligeiramente diferente no processo.

diff --git a/files/pt-pt/glossary/xhtml/index.html b/files/pt-pt/glossary/xhtml/index.html index 26022cfd3a..c2bc963462 100644 --- a/files/pt-pt/glossary/xhtml/index.html +++ b/files/pt-pt/glossary/xhtml/index.html @@ -1,11 +1,12 @@ --- title: XHTML -slug: XHTML +slug: Glossary/XHTML tags: - CodingScripting - Glossário - XHTML translation_of: Glossary/XHTML +original_slug: XHTML ---

HTML pode viajar através da rede para um navegador quer em sintaxe de HTML ou uma sintaxe chamada de XML.

diff --git a/files/pt-pt/glossary/xml/index.html b/files/pt-pt/glossary/xml/index.html index 7f196eb491..c96b2a429b 100644 --- a/files/pt-pt/glossary/xml/index.html +++ b/files/pt-pt/glossary/xml/index.html @@ -1,11 +1,12 @@ --- title: XML -slug: Glossário/XML +slug: Glossary/XML tags: - Glossário - XML - - 'l10n:priority' + - l10n:priority translation_of: Glossary/XML +original_slug: Glossário/XML ---

XML - Linguagem de Marcação Extensível, é uma linguagem de marcação genérica especificada pelo W3C. A indústria de tecnologia de informação (TI) utiliza muitas linguagens com base em XML, tal como as linguagens de descrição de dados.

diff --git a/files/pt-pt/learn/accessibility/index.html b/files/pt-pt/learn/accessibility/index.html index 0b6cbcefd7..ba1b7e42b3 100644 --- a/files/pt-pt/learn/accessibility/index.html +++ b/files/pt-pt/learn/accessibility/index.html @@ -1,6 +1,6 @@ --- title: Acessibilidade -slug: Learn/Acessibilidade +slug: Learn/Accessibility tags: - ARIA - Acessibilidade @@ -14,6 +14,7 @@ tags: - Principiantes - modulo translation_of: Learn/Accessibility +original_slug: Learn/Acessibilidade ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html b/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html index d2ba60f9a3..1eddf3b641 100644 --- a/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html @@ -1,11 +1,12 @@ --- title: Como funciona Internet? -slug: Learn/Questoes_comuns/Como_funciona_a_Internet +slug: Learn/Common_questions/How_does_the_Internet_work tags: - Mecânica da Web - Principiante - Tutorial translation_of: Learn/Common_questions/How_does_the_Internet_work +original_slug: Learn/Questoes_comuns/Como_funciona_a_Internet ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/common_questions/index.html b/files/pt-pt/learn/common_questions/index.html index 62deec5d05..23788a5fd7 100644 --- a/files/pt-pt/learn/common_questions/index.html +++ b/files/pt-pt/learn/common_questions/index.html @@ -1,7 +1,8 @@ --- title: Questões Comuns -slug: Learn/Questoes_comuns +slug: Learn/Common_questions translation_of: Learn/Common_questions +original_slug: Learn/Questoes_comuns ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html index 97655e6edf..ba4db13d68 100644 --- a/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ b/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -2,12 +2,13 @@ title: >- Qual é a diferença entre página da Web, site da Web, servidor da Web e mecanismo de pesquisa? -slug: >- - Learn/Questoes_comuns/Qual_e_a_diferenca_entre_pagina_site_servidor_da_web_e_mecanismo_pesquisa +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines tags: - Mecânica da Web - Principiante translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +original_slug: >- + Learn/Questoes_comuns/Qual_e_a_diferenca_entre_pagina_site_servidor_da_web_e_mecanismo_pesquisa ---

In this article, we describe various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's learn what they each mean!

diff --git a/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html b/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html index 389407247d..33cc5b661e 100644 --- a/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html +++ b/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html @@ -1,6 +1,6 @@ --- title: Como configurar um servidor local de testes? -slug: Learn/Questoes_comuns/Congiurar_um_servidor_de_testes_local +slug: Learn/Common_questions/set_up_a_local_testing_server tags: - Aprender - Nodo @@ -10,6 +10,7 @@ tags: - django - servidores translation_of: Learn/Common_questions/set_up_a_local_testing_server +original_slug: Learn/Questoes_comuns/Congiurar_um_servidor_de_testes_local ---

Este artigo explica como configurar um servidor de testes local simples  na sua máquina, e como o utilizar.

diff --git a/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html b/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html index b490ab9789..78aea58546 100644 --- a/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html +++ b/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html @@ -1,6 +1,6 @@ --- title: O que é um nome de domíno? -slug: Learn/Questoes_comuns/O_que_e_um_nome_de_dominio +slug: Learn/Common_questions/What_is_a_domain_name tags: - Infraestrutura - Introdução @@ -8,6 +8,7 @@ tags: - Principiante - Web translation_of: Learn/Common_questions/What_is_a_domain_name +original_slug: Learn/Questoes_comuns/O_que_e_um_nome_de_dominio ---

In this article we discuss domain names: what they are, how they are structured, and how to get one.

diff --git a/files/pt-pt/learn/common_questions/what_is_a_url/index.html b/files/pt-pt/learn/common_questions/what_is_a_url/index.html index b61a73433e..c197a3df0a 100644 --- a/files/pt-pt/learn/common_questions/what_is_a_url/index.html +++ b/files/pt-pt/learn/common_questions/what_is_a_url/index.html @@ -1,11 +1,12 @@ --- title: O que é um URL? -slug: Learn/Questoes_comuns/O_que_e_um_URL +slug: Learn/Common_questions/What_is_a_URL tags: - Infraestrutura - Principiante - URL translation_of: Learn/Common_questions/What_is_a_URL +original_slug: Learn/Questoes_comuns/O_que_e_um_URL ---

This article discusses Uniform Resource Locators (URLs), explaining what they are and how they're structured.

diff --git a/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html b/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html index a91ef08d6c..471ef60b06 100644 --- a/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html +++ b/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html @@ -1,10 +1,11 @@ --- title: O que é um servidor da Web? -slug: Learn/Questoes_comuns/O_que_e_um_servidor_da_Web +slug: Learn/Common_questions/What_is_a_web_server tags: - Infraestrutura - Principiante translation_of: Learn/Common_questions/What_is_a_web_server +original_slug: Learn/Questoes_comuns/O_que_e_um_servidor_da_Web ---

Neste artigo, nós examinamos quais são os servidores da Web, como é que estes funcionam, e por que é que eles são importantes.

diff --git a/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html index b73abb297f..a35e695b08 100644 --- a/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -1,10 +1,11 @@ --- title: Cascata e herança -slug: Web/CSS/Como_começar/Cascata_e_herança +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +original_slug: Web/CSS/Como_começar/Cascata_e_herança ---

{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}

diff --git a/files/pt-pt/learn/css/building_blocks/index.html b/files/pt-pt/learn/css/building_blocks/index.html index dff3dfb0ac..62d3b77849 100644 --- a/files/pt-pt/learn/css/building_blocks/index.html +++ b/files/pt-pt/learn/css/building_blocks/index.html @@ -1,10 +1,11 @@ --- title: Caixas -slug: Web/CSS/Como_começar/Caixas +slug: Learn/CSS/Building_blocks tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Building_blocks translation_of_original: Web/Guide/CSS/Getting_started/Boxes +original_slug: Web/CSS/Como_começar/Caixas ---

{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}

diff --git a/files/pt-pt/learn/css/building_blocks/selectors/index.html b/files/pt-pt/learn/css/building_blocks/selectors/index.html index f9d4505614..d10ad5f044 100644 --- a/files/pt-pt/learn/css/building_blocks/selectors/index.html +++ b/files/pt-pt/learn/css/building_blocks/selectors/index.html @@ -1,10 +1,11 @@ --- title: Seletores -slug: Web/CSS/Como_começar/Seletores +slug: Learn/CSS/Building_blocks/Selectors tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Building_blocks/Selectors translation_of_original: Web/Guide/CSS/Getting_started/Selectors +original_slug: Web/CSS/Como_começar/Seletores ---

{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}

diff --git a/files/pt-pt/learn/css/building_blocks/styling_tables/index.html b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html index ff21a00c82..8967f90eb8 100644 --- a/files/pt-pt/learn/css/building_blocks/styling_tables/index.html +++ b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html @@ -1,10 +1,11 @@ --- title: Tabelas -slug: Web/CSS/Como_começar/Tabelas +slug: Learn/CSS/Building_blocks/Styling_tables tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Building_blocks/Styling_tables translation_of_original: Web/Guide/CSS/Getting_started/Tables +original_slug: Web/CSS/Como_começar/Tabelas ---

{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}

diff --git a/files/pt-pt/learn/css/building_blocks/values_and_units/index.html b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html index d5c15375d7..1c5855e14c 100644 --- a/files/pt-pt/learn/css/building_blocks/values_and_units/index.html +++ b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html @@ -1,10 +1,11 @@ --- title: Cor -slug: Web/CSS/Como_começar/Cor +slug: Learn/CSS/Building_blocks/Values_and_units tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors translation_of_original: Web/Guide/CSS/Getting_started/Color +original_slug: Web/CSS/Como_começar/Cor ---

{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}

diff --git a/files/pt-pt/learn/css/css_layout/index.html b/files/pt-pt/learn/css/css_layout/index.html index 0612aad9b5..c6eb9caafa 100644 --- a/files/pt-pt/learn/css/css_layout/index.html +++ b/files/pt-pt/learn/css/css_layout/index.html @@ -1,10 +1,11 @@ --- title: Disposição -slug: Web/CSS/Como_começar/Disposição +slug: Learn/CSS/CSS_layout tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/CSS_layout translation_of_original: Web/Guide/CSS/Getting_started/Layout +original_slug: Web/CSS/Como_começar/Disposição ---

{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}

diff --git a/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html b/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html index 08ede46aa3..46e7d2db08 100644 --- a/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html @@ -1,10 +1,11 @@ --- title: CSS legível -slug: Web/CSS/Como_começar/CSS_legível +slug: Learn/CSS/First_steps/How_CSS_is_structured tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +original_slug: Web/CSS/Como_começar/CSS_legível ---

{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}

diff --git a/files/pt-pt/learn/css/first_steps/how_css_works/index.html b/files/pt-pt/learn/css/first_steps/how_css_works/index.html index bd667439ff..f73b96a63a 100644 --- a/files/pt-pt/learn/css/first_steps/how_css_works/index.html +++ b/files/pt-pt/learn/css/first_steps/how_css_works/index.html @@ -1,10 +1,11 @@ --- title: Como o CSS trabalha -slug: Web/CSS/Como_começar/Como_o_CSS_trabalha +slug: Learn/CSS/First_steps/How_CSS_works tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +original_slug: Web/CSS/Como_começar/Como_o_CSS_trabalha ---

{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}

diff --git a/files/pt-pt/learn/css/first_steps/index.html b/files/pt-pt/learn/css/first_steps/index.html index fa514756bd..bb21186eda 100644 --- a/files/pt-pt/learn/css/first_steps/index.html +++ b/files/pt-pt/learn/css/first_steps/index.html @@ -1,12 +1,13 @@ --- title: Como começar -slug: Web/CSS/Como_começar +slug: Learn/CSS/First_steps tags: - CSS - - 'CSS:Como_começar' + - CSS:Como_começar - Todas_as_Categorias translation_of: Learn/CSS/First_steps translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Web/CSS/Como_começar ---

 

diff --git a/files/pt-pt/learn/css/howto/css_faq/index.html b/files/pt-pt/learn/css/howto/css_faq/index.html index 357e271657..e0e558f33b 100644 --- a/files/pt-pt/learn/css/howto/css_faq/index.html +++ b/files/pt-pt/learn/css/howto/css_faq/index.html @@ -1,6 +1,6 @@ --- title: Perguntas Frequentes sobre CSS -slug: Learn/CSS/Howto/FAQ_de_CSS +slug: Learn/CSS/Howto/CSS_FAQ tags: - CSS - Exemplo @@ -9,6 +9,7 @@ tags: - Web - questões translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Learn/CSS/Howto/FAQ_de_CSS ---

Why doesn't my CSS, which is valid, render correctly?

diff --git a/files/pt-pt/learn/css/howto/generated_content/index.html b/files/pt-pt/learn/css/howto/generated_content/index.html index 523c408aad..c9b979f870 100644 --- a/files/pt-pt/learn/css/howto/generated_content/index.html +++ b/files/pt-pt/learn/css/howto/generated_content/index.html @@ -1,9 +1,10 @@ --- title: Conteúdo -slug: Web/CSS/Como_começar/Conteúdo +slug: Learn/CSS/Howto/Generated_content tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Howto/Generated_content +original_slug: Web/CSS/Como_começar/Conteúdo ---

{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}

diff --git a/files/pt-pt/learn/css/styling_text/fundamentals/index.html b/files/pt-pt/learn/css/styling_text/fundamentals/index.html index 373688d00f..d4e2e23478 100644 --- a/files/pt-pt/learn/css/styling_text/fundamentals/index.html +++ b/files/pt-pt/learn/css/styling_text/fundamentals/index.html @@ -1,10 +1,11 @@ --- title: Estilos de texto -slug: Web/CSS/Como_começar/Estilos_de_texto +slug: Learn/CSS/Styling_text/Fundamentals tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Styling_text/Fundamentals translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +original_slug: Web/CSS/Como_começar/Estilos_de_texto ---

{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}

diff --git a/files/pt-pt/learn/css/styling_text/index.html b/files/pt-pt/learn/css/styling_text/index.html index 5d00bc90c5..4707ead18c 100644 --- a/files/pt-pt/learn/css/styling_text/index.html +++ b/files/pt-pt/learn/css/styling_text/index.html @@ -1,6 +1,6 @@ --- title: Estilizar texto -slug: Learn/CSS/Estilo_de_texto +slug: Learn/CSS/Styling_text tags: - CSS - Hiperligações @@ -15,6 +15,7 @@ tags: - tipo de letra - tipos de letra da Web translation_of: Learn/CSS/Styling_text +original_slug: Learn/CSS/Estilo_de_texto ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/css/styling_text/styling_lists/index.html b/files/pt-pt/learn/css/styling_text/styling_lists/index.html index cff2108b51..654b8a240e 100644 --- a/files/pt-pt/learn/css/styling_text/styling_lists/index.html +++ b/files/pt-pt/learn/css/styling_text/styling_lists/index.html @@ -1,10 +1,11 @@ --- title: Listas -slug: Web/CSS/Como_começar/Listas +slug: Learn/CSS/Styling_text/Styling_lists tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/CSS/Styling_text/Styling_lists translation_of_original: Web/Guide/CSS/Getting_started/Lists +original_slug: Web/CSS/Como_começar/Listas ---

{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}

diff --git a/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html index 9b401915f7..066748249a 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html @@ -1,15 +1,16 @@ --- title: CSS - Essencial -slug: Learn/Comecar_com_a_Web/CSS_basico +slug: Learn/Getting_started_with_the_web/CSS_basics tags: - Aprender - Beginner - CSS - CodingScripting - Estilo - - 'I10n:priority' + - I10n:priority - Web translation_of: Learn/Getting_started_with_the_web/CSS_basics +original_slug: Learn/Comecar_com_a_Web/CSS_basico ---
{{LearnSidebar}}
{{PreviousMenuNext("Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web")}}
diff --git a/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html index 6489964938..0c168838bb 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -1,16 +1,17 @@ --- title: Lidar com ficheiros -slug: Learn/Comecar_com_a_Web/Lidar_com_ficheiros +slug: Learn/Getting_started_with_the_web/Dealing_with_files tags: - Beginner - Ficheiros - Guía - HTML - Programação Scripting - - 'l10n:priority' + - l10n:priority - site da Web - teoria translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Learn/Comecar_com_a_Web/Lidar_com_ficheiros ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html index 69fe6b79fa..6eaf47b5fc 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -1,6 +1,6 @@ --- title: Como funciona a Web -slug: Learn/Comecar_com_a_Web/Como_funciona_a_Web +slug: Learn/Getting_started_with_the_web/How_the_Web_works tags: - Aprender - Beginner @@ -11,8 +11,9 @@ tags: - Infraestrutura - Servidor - TCP - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +original_slug: Learn/Comecar_com_a_Web/Como_funciona_a_Web ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html index 4601e08092..bad6619e6c 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html @@ -1,14 +1,15 @@ --- title: HTML - Essencial -slug: Learn/Comecar_com_a_Web/HTML_basicos +slug: Learn/Getting_started_with_the_web/HTML_basics tags: - Aprender - CodingScripting - HTML - Principiante - Web - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/HTML_basics +original_slug: Learn/Comecar_com_a_Web/HTML_basicos ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/getting_started_with_the_web/index.html b/files/pt-pt/learn/getting_started_with_the_web/index.html index 59a4431592..aff432c058 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/index.html @@ -1,17 +1,18 @@ --- title: Primeiros passos na Web -slug: Learn/Comecar_com_a_Web +slug: Learn/Getting_started_with_the_web tags: - Beginner - CSS - Desenho - Guía - HTML - - 'I10n:priority' + - I10n:priority - Index - publicação - teoria translation_of: Learn/Getting_started_with_the_web +original_slug: Learn/Comecar_com_a_Web ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html index ebc5ddd3e3..b8ef979dd0 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -1,6 +1,6 @@ --- title: Instalar software básico -slug: Learn/Comecar_com_a_Web/Installing_basic_software +slug: Learn/Getting_started_with_the_web/Installing_basic_software tags: - Aprender - Beginner @@ -9,8 +9,9 @@ tags: - Mecânicas da Web - Navegador - editor de texto - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +original_slug: Learn/Comecar_com_a_Web/Installing_basic_software ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html index fec3caaf51..8a3efc4ba4 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html @@ -1,14 +1,15 @@ --- title: JavaScript - Essencial -slug: Learn/Comecar_com_a_Web/Elementar_de_JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics tags: - Aprender - Beginner - CodingScripting - JavaScript - Web - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +original_slug: Learn/Comecar_com_a_Web/Elementar_de_JavaScript ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html index 7e99504b95..63299c4e36 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -1,6 +1,6 @@ --- title: Publicar o seu site na Web -slug: Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web +slug: Learn/Getting_started_with_the_web/Publishing_your_website tags: - Aprender - Beginner @@ -12,6 +12,7 @@ tags: - Web - publicar translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +original_slug: Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html index 928a960b97..66f62d8178 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -1,6 +1,6 @@ --- title: A Web e os padrões da Web -slug: Learn/Comecar_com_a_Web/A_web_e_os_padroes_da_web +slug: Learn/Getting_started_with_the_web/The_web_and_web_standards tags: - Aprender - Beginner @@ -9,6 +9,7 @@ tags: - Padrões da Web - Web translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +original_slug: Learn/Comecar_com_a_Web/A_web_e_os_padroes_da_web ---

{{learnsidebar}}

diff --git a/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html index a5eacc3afa..8ca05fe1cb 100644 --- a/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ b/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -1,6 +1,6 @@ --- title: Qual será a aparência do seu site da Web? -slug: Learn/Comecar_com_a_Web/Apresentacao_do_meu_site +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like tags: - Aprender - Beginner @@ -8,8 +8,9 @@ tags: - Design - Planear - Tipos de Letra - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +original_slug: Learn/Comecar_com_a_Web/Apresentacao_do_meu_site ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html index d70dd147fc..e4bab3053b 100644 --- a/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html +++ b/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html @@ -1,7 +1,8 @@ --- title: Adicionar um mapa de zona clicável numa imagem -slug: Learn/HTML/Como/Adicionar_um_mapa_de_zona_clicavel_numa_imagem +slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +original_slug: Learn/HTML/Como/Adicionar_um_mapa_de_zona_clicavel_numa_imagem ---

Aqui, nós explicamos como configurar um mapa de imagens, e algumas desvantagens para considerar primeiro.

diff --git a/files/pt-pt/learn/html/howto/index.html b/files/pt-pt/learn/html/howto/index.html index abbfb425f3..45284b8764 100644 --- a/files/pt-pt/learn/html/howto/index.html +++ b/files/pt-pt/learn/html/howto/index.html @@ -1,10 +1,11 @@ --- title: Utilizar HTML para resolver problemas comuns -slug: Learn/HTML/Como +slug: Learn/HTML/Howto tags: - HTML - Programação Scripting translation_of: Learn/HTML/Howto +original_slug: Learn/HTML/Como ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html index 882f2eec7b..009c2cb6c0 100644 --- a/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -1,6 +1,6 @@ --- title: Formatação avançada de texto -slug: Learn/HTML/Introducao_ao_HTML/Formatacao_avancada_texto +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - Aprender - Guía @@ -10,6 +10,7 @@ tags: - abreviatura - semántica translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +original_slug: Learn/HTML/Introducao_ao_HTML/Formatacao_avancada_texto ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html index 502bfda4cf..2e7a228447 100644 --- a/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -1,6 +1,6 @@ --- title: Criar hiperligações -slug: Learn/HTML/Introducao_ao_HTML/Criar_hiperligacoes +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks tags: - Aprender - Guía @@ -11,6 +11,7 @@ tags: - URL - título translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +original_slug: Learn/HTML/Introducao_ao_HTML/Criar_hiperligacoes ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html b/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html index 9515ff4f37..fe3a77d5df 100644 --- a/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html @@ -1,6 +1,6 @@ --- title: Depurar HTML -slug: Learn/HTML/Introducao_ao_HTML/Depurar_HTML +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML tags: - Depuração - Erro @@ -9,6 +9,7 @@ tags: - Principiante - Validação translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +original_slug: Learn/HTML/Introducao_ao_HTML/Depurar_HTML ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html index 059f26a497..06450aaf64 100644 --- a/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -1,6 +1,6 @@ --- title: "Estrutura do\_documento e do website" -slug: Learn/HTML/Introducao_ao_HTML/Estrutura_documento_website +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure tags: - Guía - HTML @@ -9,6 +9,7 @@ tags: - pagina - semántica translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: Learn/HTML/Introducao_ao_HTML/Estrutura_documento_website ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html b/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html index 981b23e556..d1aab102ec 100644 --- a/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html @@ -1,6 +1,6 @@ --- title: Começar com HTML -slug: Learn/HTML/Introducao_ao_HTML/Iniciacao_HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started tags: - Comentário - Elemento @@ -11,6 +11,7 @@ tags: - espaço em branco - referência de entidade translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +original_slug: Learn/HTML/Introducao_ao_HTML/Iniciacao_HTML ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/index.html b/files/pt-pt/learn/html/introduction_to_html/index.html index 6e2ac788fd..c8a8ecce80 100644 --- a/files/pt-pt/learn/html/introduction_to_html/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/index.html @@ -1,6 +1,6 @@ --- title: Introdução ao HTML -slug: Learn/HTML/Introducao_ao_HTML +slug: Learn/HTML/Introduction_to_HTML tags: - CodingScripting - Estrutura @@ -11,6 +11,7 @@ tags: - head - semántica translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Learn/HTML/Introducao_ao_HTML ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html index 0545b789e0..e2e987b803 100644 --- a/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -1,6 +1,6 @@ --- title: Demarcar uma carta -slug: Learn/HTML/Introducao_ao_HTML/demarcar_uma_carta +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter tags: - Avaliação - HTML @@ -8,6 +8,7 @@ tags: - Principiante - Texto translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +original_slug: Learn/HTML/Introducao_ao_HTML/demarcar_uma_carta ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index 1f6310a395..7efe74d7fd 100644 --- a/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -1,6 +1,6 @@ --- title: Estruturar uma página de conteúdo -slug: Learn/HTML/Introducao_ao_HTML/Estruturar_pagina_de_conteudo +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content tags: - Avaliação - Estrutura @@ -8,6 +8,7 @@ tags: - Principiante - semántica translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +original_slug: Learn/HTML/Introducao_ao_HTML/Estruturar_pagina_de_conteudo ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 099166b821..8693cf24a5 100644 --- a/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -1,6 +1,6 @@ --- title: O que está em "head"? Metadados em HTML -slug: Learn/HTML/Introducao_ao_HTML/Os_metadados_de_head_em_HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML tags: - Guía - HTML @@ -10,6 +10,7 @@ tags: - head - metadados translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Learn/HTML/Introducao_ao_HTML/Os_metadados_de_head_em_HTML ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/multimedia_and_embedding/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/index.html index 724e0ca3f5..a20b442e8e 100644 --- a/files/pt-pt/learn/html/multimedia_and_embedding/index.html +++ b/files/pt-pt/learn/html/multimedia_and_embedding/index.html @@ -1,6 +1,6 @@ --- title: Multimédia e integração -slug: Learn/HTML/Multimedia_e_integracao +slug: Learn/HTML/Multimedia_and_embedding tags: - Aprender - Audio @@ -18,6 +18,7 @@ tags: - iframes - mapas de imagem translation_of: Learn/HTML/Multimedia_and_embedding +original_slug: Learn/HTML/Multimedia_e_integracao ---

{{LearnSidebar}}

diff --git a/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html index aad765e97a..23c82ac5c2 100644 --- a/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ b/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -1,6 +1,6 @@ --- title: 'Avaliação: Página inicial da Mozilla' -slug: Learn/HTML/Multimedia_and_embedding/Pagina_de_boas_vindas_da_Mozilla +slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page tags: - Avaliação - HTML @@ -14,6 +14,7 @@ tags: - imagem - tamanhos translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +original_slug: Learn/HTML/Multimedia_and_embedding/Pagina_de_boas_vindas_da_Mozilla ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 2ab6414459..e9ef0a8bb2 100644 --- a/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -1,6 +1,6 @@ --- title: Conteúdo de áudio e vídeo -slug: Learn/HTML/Multimedia_e_integracao/Conteudo_de_audio_e_vídeo +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content tags: - Artigo - Audio @@ -11,6 +11,7 @@ tags: - faixa - legendas translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +original_slug: Learn/HTML/Multimedia_e_integracao/Conteudo_de_audio_e_vídeo ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/tables/advanced/index.html b/files/pt-pt/learn/html/tables/advanced/index.html index 79f6bf801b..9aafceacb6 100644 --- a/files/pt-pt/learn/html/tables/advanced/index.html +++ b/files/pt-pt/learn/html/tables/advanced/index.html @@ -1,6 +1,6 @@ --- title: HTML - funcionalidades avançadas de tabela e acessibilidade -slug: Learn/HTML/Tables/Avancada +slug: Learn/HTML/Tables/Advanced tags: - Acessibilidade - Aprender @@ -16,6 +16,7 @@ tags: - legenda - tabela translation_of: Learn/HTML/Tables/Advanced +original_slug: Learn/HTML/Tables/Avancada ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/tables/basics/index.html b/files/pt-pt/learn/html/tables/basics/index.html index 98908322c9..7dac1c7d99 100644 --- a/files/pt-pt/learn/html/tables/basics/index.html +++ b/files/pt-pt/learn/html/tables/basics/index.html @@ -1,6 +1,6 @@ --- title: HTML - o essencial de tabela -slug: Learn/HTML/Tables/Basicos +slug: Learn/HTML/Tables/Basics tags: - Aprender - Artigo @@ -14,6 +14,7 @@ tags: - essencial - tabelas translation_of: Learn/HTML/Tables/Basics +original_slug: Learn/HTML/Tables/Basicos ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/html/tables/structuring_planet_data/index.html b/files/pt-pt/learn/html/tables/structuring_planet_data/index.html index 70fbf3601a..b64ba2d888 100644 --- a/files/pt-pt/learn/html/tables/structuring_planet_data/index.html +++ b/files/pt-pt/learn/html/tables/structuring_planet_data/index.html @@ -1,7 +1,8 @@ --- title: 'Avaliação: Estruturar os dados dos planetas' -slug: Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas +slug: Learn/HTML/Tables/Structuring_planet_data translation_of: Learn/HTML/Tables/Structuring_planet_data +original_slug: Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html index f752fdbf6c..c45af40a6a 100644 --- a/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -1,10 +1,11 @@ --- title: JavaScript -slug: Web/CSS/Como_começar/JavaScript +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents tags: - - 'CSS:Como_começar' + - CSS:Como_começar translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +original_slug: Web/CSS/Como_começar/JavaScript ---

{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}

diff --git a/files/pt-pt/learn/javascript/first_steps/index.html b/files/pt-pt/learn/javascript/first_steps/index.html index 02041b3355..c032772810 100644 --- a/files/pt-pt/learn/javascript/first_steps/index.html +++ b/files/pt-pt/learn/javascript/first_steps/index.html @@ -1,6 +1,6 @@ --- title: JavaScript - Os Primeiros Passos -slug: Learn/JavaScript/Primeiros_passos +slug: Learn/JavaScript/First_steps tags: - Artigo - Avaliação @@ -10,10 +10,11 @@ tags: - Operadores - Principiante - Variáveis - - 'l10n:priority' + - l10n:priority - modulo - strings translation_of: Learn/JavaScript/First_steps +original_slug: Learn/JavaScript/Primeiros_passos ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/server-side/django/index.html b/files/pt-pt/learn/server-side/django/index.html index 295b1e80b4..fb11f153e5 100644 --- a/files/pt-pt/learn/server-side/django/index.html +++ b/files/pt-pt/learn/server-side/django/index.html @@ -1,6 +1,6 @@ --- title: Framework da Web Django (Python) -slug: Learn/No-servidor/Django +slug: Learn/Server-side/Django tags: - Aprender - CodingScripting @@ -10,6 +10,7 @@ tags: - Python - django translation_of: Learn/Server-side/Django +original_slug: Learn/No-servidor/Django ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html b/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html index 242d0be946..913c38f450 100644 --- a/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html @@ -1,6 +1,6 @@ --- title: Configurar um meio de desenvolvimento Node -slug: Learn/No-servidor/Express_Nodejs/Configurar_um_meio_de_desenvolvimento_Node +slug: Learn/Server-side/Express_Nodejs/development_environment tags: - Ambiente de desenvolvimento - Aprender @@ -14,6 +14,7 @@ tags: - nodejs - npm translation_of: Learn/Server-side/Express_Nodejs/development_environment +original_slug: Learn/No-servidor/Express_Nodejs/Configurar_um_meio_de_desenvolvimento_Node ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/server-side/express_nodejs/index.html b/files/pt-pt/learn/server-side/express_nodejs/index.html index 1c7e7413ec..73e8f51f35 100644 --- a/files/pt-pt/learn/server-side/express_nodejs/index.html +++ b/files/pt-pt/learn/server-side/express_nodejs/index.html @@ -1,6 +1,6 @@ --- title: Framework da Web Express (Node.js/JavaScript) -slug: Learn/No-servidor/Express_Nodejs +slug: Learn/Server-side/Express_Nodejs tags: - Aprender - CodingScripting @@ -14,6 +14,7 @@ tags: - Programação no lado do servidor - node.js translation_of: Learn/Server-side/Express_Nodejs +original_slug: Learn/No-servidor/Express_Nodejs ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html b/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html index c39acc6f1d..1524676241 100644 --- a/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html +++ b/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html @@ -1,6 +1,6 @@ --- title: Introdução a Express/Node -slug: Learn/No-servidor/Express_Nodejs/Introduction +slug: Learn/Server-side/Express_Nodejs/Introduction tags: - Aprender - CodingScripting @@ -10,6 +10,7 @@ tags: - lado do servidor - nodejs translation_of: Learn/Server-side/Express_Nodejs/Introduction +original_slug: Learn/No-servidor/Express_Nodejs/Introduction ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/server-side/index.html b/files/pt-pt/learn/server-side/index.html index b8cc8d35f7..40460e8235 100644 --- a/files/pt-pt/learn/server-side/index.html +++ b/files/pt-pt/learn/server-side/index.html @@ -1,6 +1,6 @@ --- title: Programação do site da Web no lado do servidor -slug: Learn/No-servidor +slug: Learn/Server-side tags: - Aprender - Código @@ -11,6 +11,7 @@ tags: - Servidor - Tópico translation_of: Learn/Server-side +original_slug: Learn/No-servidor ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/server-side/node_server_without_framework/index.html b/files/pt-pt/learn/server-side/node_server_without_framework/index.html index 85bd786b58..99857fe56b 100644 --- a/files/pt-pt/learn/server-side/node_server_without_framework/index.html +++ b/files/pt-pt/learn/server-side/node_server_without_framework/index.html @@ -1,6 +1,6 @@ --- title: Servidor de Node.js sem uma framework -slug: Learn/No-servidor/Servidor_node_sem_framework +slug: Learn/Server-side/Node_server_without_framework tags: - JavaScript - Nodo @@ -8,6 +8,7 @@ tags: - Servidor - sem estrutura translation_of: Learn/Server-side/Node_server_without_framework +original_slug: Learn/No-servidor/Servidor_node_sem_framework ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html index c50c8854ba..f9199021f8 100644 --- a/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html +++ b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html @@ -1,7 +1,8 @@ --- title: Como tratar de problemas de acessibilidade comuns -slug: Learn/Tools_and_testing/Teste_cruzado_de_navegador/Acessibilidade +slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +original_slug: Learn/Tools_and_testing/Teste_cruzado_de_navegador/Acessibilidade ---
{{LearnSidebar}}
diff --git a/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html index f788649424..e2e99b740d 100644 --- a/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html +++ b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html @@ -1,6 +1,6 @@ --- title: Teste cruzado de navegador -slug: Learn/Tools_and_testing/Teste_cruzado_de_navegador +slug: Learn/Tools_and_testing/Cross_browser_testing tags: - Acessibilidade - Aprender @@ -16,6 +16,7 @@ tags: - cruzado navegador - modulo translation_of: Learn/Tools_and_testing/Cross_browser_testing +original_slug: Learn/Tools_and_testing/Teste_cruzado_de_navegador ---
{{LearnSidebar}}
diff --git a/files/pt-pt/mdn/about/index.html b/files/pt-pt/mdn/about/index.html index 1da67e04e5..7ab1b3740e 100644 --- a/files/pt-pt/mdn/about/index.html +++ b/files/pt-pt/mdn/about/index.html @@ -1,6 +1,6 @@ --- title: Sobre a MDN -slug: MDN/Sobre +slug: MDN/About tags: - Colaboração - Comunidade @@ -10,6 +10,7 @@ tags: - Licenças - Metadados da MDN translation_of: MDN/About +original_slug: MDN/Sobre ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/at_ten/history_of_mdn/index.html b/files/pt-pt/mdn/at_ten/history_of_mdn/index.html index ceaed18d08..8c49815a25 100644 --- a/files/pt-pt/mdn/at_ten/history_of_mdn/index.html +++ b/files/pt-pt/mdn/at_ten/history_of_mdn/index.html @@ -1,10 +1,11 @@ --- title: A História da MDN -slug: MDN_at_ten/Historia_da_MDN +slug: MDN/At_ten/History_of_MDN tags: - História - Metadados MDN translation_of: MDN_at_ten/History_of_MDN +original_slug: MDN_at_ten/Historia_da_MDN ---

In this talk, several contributors of the MDN project look at the past ten years of developer.mozilla.org, and at the decade to come. You will hear the story of different wiki software migrations, how a documentation community was built, and many more highlights of the history of the site. The group then also talks about current challenges and projects the MDN community is working on this year.

diff --git a/files/pt-pt/mdn/at_ten/index.html b/files/pt-pt/mdn/at_ten/index.html index fcd5f5875f..637fb0eb17 100644 --- a/files/pt-pt/mdn/at_ten/index.html +++ b/files/pt-pt/mdn/at_ten/index.html @@ -1,9 +1,10 @@ --- title: 10.º Aniversário da MDN -slug: MDN_at_ten +slug: MDN/At_ten tags: - MDN translation_of: MDN_at_ten +original_slug: MDN_at_ten ---
Celebrar 10 anos de documentação da sua Web.
diff --git a/files/pt-pt/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/pt-pt/mdn/contribute/howto/convert_code_samples_to_be_live/index.html index e0f16cc514..309ae4f848 100644 --- a/files/pt-pt/mdn/contribute/howto/convert_code_samples_to_be_live/index.html +++ b/files/pt-pt/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -1,11 +1,12 @@ --- title: Como converter exemplos de código para ficarem "live" -slug: MDN/Contribute/Howto/Como_converter_exemplos_de_codigo_para_ficarem_live +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live tags: - Como - Metadados MDN - Principiante translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +original_slug: MDN/Contribute/Howto/Como_converter_exemplos_de_codigo_para_ficarem_live ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/contribute/howto/create_and_edit_pages/index.html b/files/pt-pt/mdn/contribute/howto/create_and_edit_pages/index.html index e4d8572fe3..310334a95a 100644 --- a/files/pt-pt/mdn/contribute/howto/create_and_edit_pages/index.html +++ b/files/pt-pt/mdn/contribute/howto/create_and_edit_pages/index.html @@ -1,12 +1,13 @@ --- title: Como criar e editar páginas -slug: MDN/Contribute/Howto/Criar_e_editar_paginas +slug: MDN/Contribute/Howto/Create_and_edit_pages tags: - Guía - Introdução - MDN Meta - Principiante translation_of: MDN/Contribute/Howto/Create_and_edit_pages +original_slug: MDN/Contribute/Howto/Criar_e_editar_paginas ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/contribute/howto/report_a_problem/index.html b/files/pt-pt/mdn/contribute/howto/report_a_problem/index.html index 764d3fca0c..8145a208c9 100644 --- a/files/pt-pt/mdn/contribute/howto/report_a_problem/index.html +++ b/files/pt-pt/mdn/contribute/howto/report_a_problem/index.html @@ -1,11 +1,12 @@ --- title: Como comunicar um problema na MDN -slug: MDN/Contribute/Howto/Comunicar_um_problema +slug: MDN/Contribute/Howto/Report_a_problem tags: - Como... - Guía - Metadados MDN translation_of: MDN/Contribute/Howto/Report_a_problem +original_slug: MDN/Contribute/Howto/Comunicar_um_problema ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/contribute/howto/tag/index.html b/files/pt-pt/mdn/contribute/howto/tag/index.html index 2d0ca3d1d6..fe8f43b2c0 100644 --- a/files/pt-pt/mdn/contribute/howto/tag/index.html +++ b/files/pt-pt/mdn/contribute/howto/tag/index.html @@ -1,6 +1,6 @@ --- title: Como etiquetar devidamente as páginas -slug: MDN/Contribute/Howto/Etiqueta +slug: MDN/Contribute/Howto/Tag tags: - Como - Glossário @@ -11,6 +11,7 @@ tags: - Tutorial - contribuir translation_of: MDN/Contribute/Howto/Tag +original_slug: MDN/Contribute/Howto/Etiqueta ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html b/files/pt-pt/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html index 105853672c..4284498481 100644 --- a/files/pt-pt/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html +++ b/files/pt-pt/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html @@ -1,12 +1,13 @@ --- title: Como escrever e referenciar uma entrada no glossário -slug: MDN/Contribute/Howto/Como_escrever_uma_nova_entrada_no_Glossario +slug: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary tags: - Como... - Glossário - Guia(2) - Metadados da MDN translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary +original_slug: MDN/Contribute/Howto/Como_escrever_uma_nova_entrada_no_Glossario ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/contribute/howto/write_an_api_reference/sidebars/index.html b/files/pt-pt/mdn/contribute/howto/write_an_api_reference/sidebars/index.html index 8e28e33556..63a34dd7fe 100644 --- a/files/pt-pt/mdn/contribute/howto/write_an_api_reference/sidebars/index.html +++ b/files/pt-pt/mdn/contribute/howto/write_an_api_reference/sidebars/index.html @@ -1,6 +1,6 @@ --- title: Barras laterais de referência da API -slug: MDN/Structures/API_references/Barras_laterais_de_referencia_da_API +slug: MDN/Contribute/Howto/Write_an_API_reference/Sidebars tags: - API - Guía @@ -9,6 +9,7 @@ tags: - groupdata - onboarding translation_of: MDN/Structures/API_references/API_reference_sidebars +original_slug: MDN/Structures/API_references/Barras_laterais_de_referencia_da_API ---
{{MDNSidebar}}

Pode incluir uma barra lateral personalizada nas páginas de referência da API para exibir as hiperligações para as 'Interfaces' relacionadas, tutoriais, e outros recursos relevantes, apenas para essa API. Este artigo explica como.

diff --git a/files/pt-pt/mdn/guidelines/conventions_definitions/index.html b/files/pt-pt/mdn/guidelines/conventions_definitions/index.html index f3a57c70c3..67f3fbb27e 100644 --- a/files/pt-pt/mdn/guidelines/conventions_definitions/index.html +++ b/files/pt-pt/mdn/guidelines/conventions_definitions/index.html @@ -1,6 +1,6 @@ --- title: MDN - Convenções e Definições -slug: MDN/Guidelines/Convencoes_definicoes +slug: MDN/Guidelines/Conventions_definitions tags: - Documentação - Guía @@ -8,6 +8,7 @@ tags: - MDN - Metadados MDN translation_of: MDN/Guidelines/Conventions_definitions +original_slug: MDN/Guidelines/Convencoes_definicoes ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/guidelines/does_this_belong_on_mdn/index.html b/files/pt-pt/mdn/guidelines/does_this_belong_on_mdn/index.html index 429ffa389f..dc76b00182 100644 --- a/files/pt-pt/mdn/guidelines/does_this_belong_on_mdn/index.html +++ b/files/pt-pt/mdn/guidelines/does_this_belong_on_mdn/index.html @@ -1,11 +1,12 @@ --- title: Isto pertence aos MDN Web Docs? -slug: MDN/Guidelines/Isto_pertence_a_MDN +slug: MDN/Guidelines/Does_this_belong_on_MDN tags: - Guía - Linhas Diretrizes - Metadados MDN translation_of: MDN/Guidelines/Does_this_belong_on_MDN +original_slug: MDN/Guidelines/Isto_pertence_a_MDN ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/guidelines/writing_style_guide/index.html b/files/pt-pt/mdn/guidelines/writing_style_guide/index.html index fe96ad554e..5cf076f6f5 100644 --- a/files/pt-pt/mdn/guidelines/writing_style_guide/index.html +++ b/files/pt-pt/mdn/guidelines/writing_style_guide/index.html @@ -1,6 +1,6 @@ --- title: Guia de estilo de escrita -slug: MDN/Guidelines/Guia_de_estilo_de_escrita +slug: MDN/Guidelines/Writing_style_guide tags: - Documentação - Guia(2) @@ -8,6 +8,7 @@ tags: - MDN - Metadados MDN translation_of: MDN/Guidelines/Writing_style_guide +original_slug: MDN/Guidelines/Guia_de_estilo_de_escrita ---
{{MDNSidebar}}
diff --git a/files/pt-pt/mdn/structures/live_samples/index.html b/files/pt-pt/mdn/structures/live_samples/index.html index 91295fc37c..1e6380ba9e 100644 --- a/files/pt-pt/mdn/structures/live_samples/index.html +++ b/files/pt-pt/mdn/structures/live_samples/index.html @@ -1,12 +1,13 @@ --- title: Exemplos live -slug: MDN/Structures/Exemplos_live +slug: MDN/Structures/Live_samples tags: - Estruturas - Guia(2) - Intermediário - Metadados MDN translation_of: MDN/Structures/Live_samples +original_slug: MDN/Structures/Exemplos_live ---
{{MDNSidebar}}

Exemplos MDN supports turning sample code displayed in articles into running samples the reader can look at in action. These live samples can include HTML, CSS, and JavaScript in any combination. Note that "live" samples are not interactive; however, they do ensure that the output displayed for a sample matches the code of the sample exactly, because it is actually generated by the code sample.

diff --git a/files/pt-pt/mdn/yari/index.html b/files/pt-pt/mdn/yari/index.html index 3ffc29d8b6..1950f2c849 100644 --- a/files/pt-pt/mdn/yari/index.html +++ b/files/pt-pt/mdn/yari/index.html @@ -1,11 +1,12 @@ --- title: 'Kuma: Plataforma wiki da MDN' -slug: MDN/Kuma +slug: MDN/Yari tags: - Kuma - MDN Meta - Metadados MDN translation_of: MDN/Kuma +original_slug: MDN/Kuma ---
{{MDNSidebar}}{{IncludeSubnav("/pt-PT/docs/MDN")}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/pt-pt/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html index ecad403ae1..3dfff5adde 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -1,9 +1,10 @@ --- title: Anatomia de uma extensão -slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_extensao +slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_extensao ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/api/devtools/panels/index.html b/files/pt-pt/mozilla/add-ons/webextensions/api/devtools/panels/index.html index ebeb53d591..2d7cb8839d 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/api/devtools/panels/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/api/devtools/panels/index.html @@ -1,6 +1,6 @@ --- title: devtools.panels -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels +slug: Mozilla/Add-ons/WebExtensions/API/devtools/panels tags: - API - Extensões @@ -9,6 +9,7 @@ tags: - Referencia - devtools.panels translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels +original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/api/storage/index.html b/files/pt-pt/mozilla/add-ons/webextensions/api/storage/index.html index d267faf520..f4551690f3 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/api/storage/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/api/storage/index.html @@ -1,6 +1,6 @@ --- title: Armazenamento -slug: Mozilla/Add-ons/WebExtensions/API/Armazenamento +slug: Mozilla/Add-ons/WebExtensions/API/storage tags: - API - Armazenamento @@ -11,6 +11,7 @@ tags: - Não Padrão - Referencia translation_of: Mozilla/Add-ons/WebExtensions/API/storage +original_slug: Mozilla/Add-ons/WebExtensions/API/Armazenamento ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/pt-pt/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html index e34a4013d3..839b88a764 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -1,9 +1,10 @@ --- title: Suporte de navegador para as APIs de JavaScript -slug: Mozilla/Add-ons/WebExtensions/Suporte_navegador_APIs_JavaScript +slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +original_slug: Mozilla/Add-ons/WebExtensions/Suporte_navegador_APIs_JavaScript ---

{{AddonSidebar}}

diff --git a/files/pt-pt/mozilla/add-ons/webextensions/content_scripts/index.html b/files/pt-pt/mozilla/add-ons/webextensions/content_scripts/index.html index 51356eed85..13daea5bbf 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/content_scripts/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/content_scripts/index.html @@ -1,9 +1,10 @@ --- title: Scripts de Conteúdo -slug: Mozilla/Add-ons/WebExtensions/Scripts_Conteudo +slug: Mozilla/Add-ons/WebExtensions/Content_scripts tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +original_slug: Mozilla/Add-ons/WebExtensions/Scripts_Conteudo ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/examples/index.html b/files/pt-pt/mozilla/add-ons/webextensions/examples/index.html index 4a68068c6a..9e00250f9f 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/examples/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/examples/index.html @@ -1,9 +1,10 @@ --- title: Exemplos de extensões -slug: Mozilla/Add-ons/WebExtensions/Exemplos_extensoes +slug: Mozilla/Add-ons/WebExtensions/Examples tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/Examples +original_slug: Mozilla/Add-ons/WebExtensions/Exemplos_extensoes ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/pt-pt/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html index dc98e7fd37..ac5e8d664e 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -1,7 +1,8 @@ --- title: Extensão das ferramentas de desenvolvimento -slug: Mozilla/Add-ons/WebExtensions/Extensão_das_ferramentas_de_desenvolvimento +slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +original_slug: Mozilla/Add-ons/WebExtensions/Extensão_das_ferramentas_de_desenvolvimento ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/pt-pt/mozilla/add-ons/webextensions/intercept_http_requests/index.html index b938b514d4..fef2c0534f 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/intercept_http_requests/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -1,12 +1,13 @@ --- title: Interceptar Pedidos HTTP -slug: Mozilla/Add-ons/WebExtensions/Interceptar_Pedidos_HTTP +slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests tags: - Add-ons - Como-fazer - Extensões - ExtensõesWeb translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +original_slug: Mozilla/Add-ons/WebExtensions/Interceptar_Pedidos_HTTP ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/manifest.json/icons/index.html b/files/pt-pt/mozilla/add-ons/webextensions/manifest.json/icons/index.html index c9fd687771..66eb369f78 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/manifest.json/icons/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/manifest.json/icons/index.html @@ -1,11 +1,12 @@ --- title: Ícones (icons) -slug: Mozilla/Add-ons/WebExtensions/manifest.json/icones +slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons tags: - Extensões - Extensões da Web - Extras translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/icons +original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/icones ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/match_patterns/index.html b/files/pt-pt/mozilla/add-ons/webextensions/match_patterns/index.html index 8c0f5e3480..e7330b3010 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/match_patterns/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/match_patterns/index.html @@ -1,7 +1,8 @@ --- title: dubla padrões em extensão manifestos -slug: Mozilla/Add-ons/WebExtensions/dubla_padrões +slug: Mozilla/Add-ons/WebExtensions/Match_patterns translation_of: Mozilla/Add-ons/WebExtensions/Match_patterns +original_slug: Mozilla/Add-ons/WebExtensions/dubla_padrões ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_action/index.html index c5da78003b..421dffbb28 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_action/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_action/index.html @@ -1,9 +1,10 @@ --- title: Botão da Barra de Ferramentas -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Ação_navegador +slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action tags: - Extensão da Web translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Ação_navegador ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html index bc2f1bd2da..233cf4ff31 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html @@ -1,11 +1,12 @@ --- title: Estilos de navegador -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Estilos_de_navegador +slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles tags: - Extensões - Extensões da Web - Extras translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Estilos_de_navegador ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html index 231a800bc3..bf69421558 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html @@ -1,10 +1,11 @@ --- title: Itens do menu de contexto -slug: >- - Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Itens_do_menu_de_contexto +slug: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +original_slug: >- + Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Itens_do_menu_de_contexto ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html index a2bc9921ad..ffd1b942af 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html @@ -1,12 +1,13 @@ --- title: Painéis das ferramentas de desenvolvimento -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/devtools_panels +slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels tags: - Extensões da Web - Guía - Interface do Utilizador - Principiante translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/devtools_panels ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html index 4bf94b9653..bea67ee60c 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html @@ -1,7 +1,8 @@ --- title: Páginas de extensão -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Paginas_de_extensão +slug: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Paginas_de_extensão ---
{{AddonSidebar()}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/index.html index 6ec29a7fcf..b18f1afd85 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/index.html @@ -1,11 +1,12 @@ --- title: Interface do utilizador -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador +slug: Mozilla/Add-ons/WebExtensions/user_interface tags: - Interface do Utilizador - Landing - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/user_interface +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/notifications/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/notifications/index.html index 5b38d4f29f..8c8c113425 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/notifications/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/notifications/index.html @@ -1,9 +1,10 @@ --- title: Notificações -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Notificacoes +slug: Mozilla/Add-ons/WebExtensions/user_interface/Notifications tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Notifications +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Notificacoes ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/omnibox/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/omnibox/index.html index c0f9f41dca..2470a05c32 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/omnibox/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/omnibox/index.html @@ -1,10 +1,11 @@ --- title: Sugestões da barra de endereço -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Omnibox +slug: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox tags: - Extensões da Web - Interface do Utilizador translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Omnibox ---
{{AddonSidebar()}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html index b3bee11990..d3a560412f 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html @@ -1,9 +1,10 @@ --- title: Página de opções -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Options_pages +slug: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Options_pages ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/page_actions/index.html index 7093d3355c..57407bc175 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/page_actions/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -1,10 +1,11 @@ --- title: Botão da barra de endereço -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Acoes_pagina +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions tags: - Extensões da Web - Interface do Utilizador translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Acoes_pagina ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/popups/index.html index 6bbf3f7ce8..043afd3ad5 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/popups/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/popups/index.html @@ -1,6 +1,6 @@ --- title: Janelas (Popups) -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Popups +slug: Mozilla/Add-ons/WebExtensions/user_interface/Popups tags: - Extensions - IU @@ -8,6 +8,7 @@ tags: - Janela - popup translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Popups ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/sidebars/index.html index 2cfa1800a7..02509b9229 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/sidebars/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -1,9 +1,10 @@ --- title: Barras laterais -slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Barras_laterais +slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Barras_laterais ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/pt-pt/mozilla/add-ons/webextensions/what_are_webextensions/index.html index c2d7ef5d71..ada2698b44 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -1,10 +1,11 @@ --- title: O que são extensões? -slug: Mozilla/Add-ons/WebExtensions/O_que_sao_WebExtensions +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions tags: - Extensões - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +original_slug: Mozilla/Add-ons/WebExtensions/O_que_sao_WebExtensions ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/what_next_/index.html b/files/pt-pt/mozilla/add-ons/webextensions/what_next_/index.html index f16f7e619b..c4ac2a8348 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/what_next_/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/what_next_/index.html @@ -1,11 +1,12 @@ --- title: E a seguir? -slug: Mozilla/Add-ons/WebExtensions/E_a_seguir +slug: Mozilla/Add-ons/WebExtensions/What_next_ tags: - Extensão da Web - Extensões - Principiante translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +original_slug: Mozilla/Add-ons/WebExtensions/E_a_seguir ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/pt-pt/mozilla/add-ons/webextensions/your_first_webextension/index.html index 21b34f2e2c..2b711124ca 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -1,10 +1,11 @@ --- title: A sua primeira extensão -slug: Mozilla/Add-ons/WebExtensions/A_sua_primeira_extensao +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension tags: - Extensões da Web - Guía translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/A_sua_primeira_extensao ---
{{AddonSidebar}}
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/pt-pt/mozilla/add-ons/webextensions/your_second_webextension/index.html index 503f2b4ae9..9d3c22efac 100644 --- a/files/pt-pt/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ b/files/pt-pt/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -1,9 +1,10 @@ --- title: A sua segunda extensão -slug: Mozilla/Add-ons/WebExtensions/A_sua_segunda_extensao +slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension tags: - Extensões da Web translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/A_sua_segunda_extensao ---
{{AddonSidebar}}

Se já leu o artigo da A sua primeira extensão, já tem uma ideia de como escrever uma extensão. Neste artigo, nós iremos escrever uma extensão um pouco mais complexa que demonstra algumas mais das APIs. 
diff --git a/files/pt-pt/mozilla/developer_guide/index.html b/files/pt-pt/mozilla/developer_guide/index.html index 6f7396ce66..80dab6d83f 100644 --- a/files/pt-pt/mozilla/developer_guide/index.html +++ b/files/pt-pt/mozilla/developer_guide/index.html @@ -1,7 +1,8 @@ --- title: Guia do desenvolvedor -slug: Guia_do_desenvolvedor +slug: Mozilla/Developer_guide translation_of: Mozilla/Developer_guide +original_slug: Guia_do_desenvolvedor ---

There are lots of ways to contribute to the Mozilla project: coding, testing, improving the build process and tools, or contributing to the documentation. This guide provides information that will not only help you get started as a Mozilla contributor, but that you'll find useful to refer to even if you are already an experienced contributor.

diff --git a/files/pt-pt/mozilla/firefox/releases/1.5/index.html b/files/pt-pt/mozilla/firefox/releases/1.5/index.html index fdd748fd80..29dab49ca6 100644 --- a/files/pt-pt/mozilla/firefox/releases/1.5/index.html +++ b/files/pt-pt/mozilla/firefox/releases/1.5/index.html @@ -1,7 +1,8 @@ --- title: Firefox 1.5 para Desenvolvedores -slug: Firefox_1.5_para_Desenvolvedores +slug: Mozilla/Firefox/Releases/1.5 translation_of: Mozilla/Firefox/Releases/1.5 +original_slug: Firefox_1.5_para_Desenvolvedores ---
{{FirefoxSidebar}}

 

diff --git a/files/pt-pt/mozilla/firefox/releases/2/index.html b/files/pt-pt/mozilla/firefox/releases/2/index.html index 3701ecfc87..3ba2adba19 100644 --- a/files/pt-pt/mozilla/firefox/releases/2/index.html +++ b/files/pt-pt/mozilla/firefox/releases/2/index.html @@ -1,7 +1,8 @@ --- title: Firefox 2 para desenvolvedores -slug: Firefox_2_para_desenvolvedores +slug: Mozilla/Firefox/Releases/2 translation_of: Mozilla/Firefox/Releases/2 +original_slug: Firefox_2_para_desenvolvedores ---
{{FirefoxSidebar}}

Novas características para desenvolvedores no Firefox 2

diff --git a/files/pt-pt/mozilla/firefox/releases/3.5/index.html b/files/pt-pt/mozilla/firefox/releases/3.5/index.html index ec89c2b039..d175b9cc1c 100644 --- a/files/pt-pt/mozilla/firefox/releases/3.5/index.html +++ b/files/pt-pt/mozilla/firefox/releases/3.5/index.html @@ -1,7 +1,8 @@ --- title: Firefox 3.5 para desenvolvedores -slug: Firefox_3.5_para_desenvolvedores +slug: Mozilla/Firefox/Releases/3.5 translation_of: Mozilla/Firefox/Releases/3.5 +original_slug: Firefox_3.5_para_desenvolvedores ---
{{FirefoxSidebar}}

O Firefox 3.5 introduz várias funcionalidades novas, bem como suporte adicional e melhorado para uma larga variedade de padrões web. Este artigo oferece uma extensa lista, com links para artigos cobrindo as melhorias mais importantes.

Novas funcionalidades para desenvolvedores no Firefox 3.5

diff --git a/files/pt-pt/mozilla/firefox/releases/3.5/updating_extensions/index.html b/files/pt-pt/mozilla/firefox/releases/3.5/updating_extensions/index.html index f1eeef972a..613aa4f667 100644 --- a/files/pt-pt/mozilla/firefox/releases/3.5/updating_extensions/index.html +++ b/files/pt-pt/mozilla/firefox/releases/3.5/updating_extensions/index.html @@ -1,7 +1,8 @@ --- title: Atualizando extensões para o Firefox 3.5 -slug: Atualizando_extensões_para_o_Firefox_3.5 +slug: Mozilla/Firefox/Releases/3.5/Updating_extensions translation_of: Mozilla/Firefox/Releases/3.5/Updating_extensions +original_slug: Atualizando_extensões_para_o_Firefox_3.5 ---
{{FirefoxSidebar}}

{{ fx_minversion_header(3.5) }}

Este artigo proporciona informação útil para desenvolvedores tentando atualizar suas extensões para trabalharem corretamente no Firefox 3.5.

diff --git a/files/pt-pt/mozilla/firefox/releases/3.6/index.html b/files/pt-pt/mozilla/firefox/releases/3.6/index.html index 87e983ee35..1413f08199 100644 --- a/files/pt-pt/mozilla/firefox/releases/3.6/index.html +++ b/files/pt-pt/mozilla/firefox/releases/3.6/index.html @@ -1,7 +1,8 @@ --- title: Firefox 3.6 para desenvolvedores -slug: Firefox_3.6_para_desenvolvedores +slug: Mozilla/Firefox/Releases/3.6 translation_of: Mozilla/Firefox/Releases/3.6 +original_slug: Firefox_3.6_para_desenvolvedores ---