`) para ter a medida de `4rem`, ou seja 4 vezes o tamanho da nossa fonte base. Esse é uma tag de tamanho bem grande e por isso desejamos que esse tamanho ocorra somente em telas com tamanho suficiente para comportá-lo.
+
+Para fazer isso, primeiro criamos uma heading tag com tamanho bem menor para então usar media queries para sobrescrever o tamanho inicialmente definido pelo tamanho maior de `4rem` caso seja detectado que o usuário tem uma tela com no mínimo 1200px de tamanho.
```css
html {
@@ -224,24 +223,24 @@ h1 {
}
```
-We have edited our responsive grid example above to also include responsive type using the method outlined. You can see how the heading switches sizes as the layout goes to the two column version.
+Nós editamos nosso exemplo acima de grid responsivo com o método delineado. Você consegue observar como a seção da heading tag muda de tamanho conforme o layout chega na versão de duas colunas.
-On mobile the heading is smaller:
+Em um dispositivo móvel, a seção da heading tag é menor:
-On desktop however we see the larger heading size:
+Em um computador desktop contudo, vemos o tamanho maior dessa seção da heading tag:
> [!NOTE]
-> See this example in action: [example](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [source code](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html).
+> Veja esse exemplo funcionando em: [exemplo](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [código fonte](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html).
-As this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. They can be used to tweak any element to make it more usable or attractive at alternate screen sizes.
+Essa forma de abordar a tipografia responsiva demonstra que o uso das media queries não se restringe somente a mudar o layout da página. Elas podem ajustar qualquer elemento para torná-lo mais utilizável ou atrativo em tamanhos de tela alternativos.
-### Using viewport units for responsive typography
+### Usando unidades de Viewport para tipografia responsiva
-An interesting approach is to use the viewport unit `vw` to enable responsive typography. `1vw` is equal to one percent of the viewport width, meaning that if you set your font size using `vw`, it will always relate to the size of the viewport.
+Uma abordagem muito interessante para isso é usar a unidade de viewport `vw` para habilitar tipografia responsiva. O valor `1vw`é equivalente a um porcento (**1%**) da largura total do viewport, o que significa quê, caso você determine o seu tamanho de fonte utilizando `vw, esta vai sempre referenciar-se com o tamanho da viewport
```css
h1 {
@@ -249,9 +248,9 @@ h1 {
}
```
-The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. **Therefore you should never set text using viewport units alone**.
+O problema de fazer da forma como foi feito no exemplo acima, é que o usuário perde a capacidade de dar zoom em quaisquer textos cujos estilos são configurados para utilizar a unidade `vw` pois nesse caso estes textos sempre vão basear o tamanho da sua fonte com o tamanho da viewport. **Portanto, é aconselhável que você nunca faça uso somente das unidades de viewport para a estilização de textos.**
-There is a solution, and it involves using [`calc()`](/pt-BR/docs/Web/CSS/calc). If you add the `vw` unit to a value set using a fixed size such as `em`s or `rem`s then the text will still be zoomable. Essentially, the `vw` unit adds on top of that zoomed value:
+Existe uma solução para isso e ela envolve o uso de [`calc()`](/pt-BR/docs/Web/CSS/calc). Se você adiciona a unidade `vw` para um valor determinado através de um tamanho fixado como em `em` ou `rem`, então ainda é possível dar zoom no texto afinal o tamanho da unidade `vw`é adicionado com o valor de zoom.
```css
h1 {
@@ -259,43 +258,45 @@ h1 {
}
```
-This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.
+Isso significa que só é necessário especificar unicamente o tamanho da fonte para a tag heading `h1` ao invés de configurar para dispositivos móveis e daí redefini-lo nas media queries. Fazendo dessa maneira, a fonte gradualmente aumenta ou diminui na medida em que o tamanho da viewport aumenta ou diminui.
> [!NOTE]
-> See an example of this in action: [example](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [source code](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html).
+> Veja um exemplo disso em ação: [exemplo](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [código-fonte](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html).
-## The viewport meta tag
+## A meta tag de viewport
-If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the `` of the document.
+Se você olhar minuciosamente o código fonte de uma página responsiva, é bem possível que você note a seguinte tag {{htmlelement("meta")}} dentro do elemento `` do documento:
```html
```
-This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.
+Essa tag indica aos navegadores de dispositivos móveis que eles devem igualar a largura da viewport para a largura do dispositivo e escalonar o documento para 100% do seu tamanho pretendido, o que mostra o documento no tamanho otimizado planejado para dispositivos móveis.
+
+E por qual motivo isso é necessário? Porquê navegadores de dispositivos móveis tendem a mentir sobre o tamanho da sua largura de viewport.
-Why is this needed? Because mobile browsers tend to lie about their viewport width.
+Isso é inclusive o motivo para essa meta tag existir pois, quando os primeiros smartphones foram lançados, muitos sites não eram otimizados para dispositivos móveis. O navegador então determinava a largura da viewport para 960 pixels, renderizava a página naquela largura para por fim mostrar o resultado como uma versão zoomed-out do mesmo layout para computadores desktop. Usuários poderiam dar zoom e sair navegando pela tela (quase sempre com pelo menos um zoom-in -> zoom-out -> zoom-in) até conseguirem acessar a parte que lhes interessava mas no final o resultado era o mesmo: desnecessariamente ruim.
-This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would therefore set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.
+Ao determinarmos `width=device-width` você está subsituindo o padrão do dispositivo móvel como por exemplo o padrão Apple de `width=980px`, com a largura verdadeira do dispositivo. Sem isso, um design responsivo com breakpoints e media queries não funcionaria da maneira desejada nos navegadores de dispositivos móveis. Considere um layout para telas estreitas que aparece somente em viewports com 480 pixels de largura ou menos, se o aparelho diz que na verdade ele possui 980 pixels, o usuário daquele aparelho não vai conseguir ver o seu layout de tela estreita.
-The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting `width=device-width` you are overriding Apple's default `width=960px` with the actual width of the device, so your media queries will work as intended.
+**Emtão você deve _SEMPRE_ incluir a linha HTML de viewport na tag `head` dos seus documentos.**
-**So you should _always_ include the above line of HTML in the head of your documents.**
+Existem outras configurações que você pode fazer uso com a meta tag de viewport, de maneira geral contudo é preferível utilizar a linha como descrita no começo dessa seção.
-There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.
+- `initial-scale`: Determina o zoom inicial da página, o qual nós atribuímos o valor para 1.
+- `height`: Determina uma altura específica para o viewport.
+- `minimum-scale`: Determina o nível mínimo de zoom.
+- `maximum-scale`: Determina o nível máximo de zoom.
+- `user-scalable`: Bloqueia mudanças de zoom se estiver com valor de `no`.
-- `initial-scale`: Sets the initial zoom of the page, which we set to 1.
-- `height`: Sets a specific height for the viewport.
-- `minimum-scale`: Sets the minimum zoom level.
-- `maximum-scale`: Sets the maximum zoom level.
-- `user-scalable`: Prevents zooming if set to `no`.
+Você deve evitar o uso de `minimum-scale`, `maximum-scale` e em particular da configuração `user-scalable` com o valor de `no`. Usuários devem ter permissão para aumentar ou diminuir o zoom da tela tanto quanto for necessário; Quando o valor da configuração `user-scalable` está com o valor configurado para `no`, não é possível controlar o zoom da página e isso pode ocasionar problemas de acessibilidade, principalmente para deficientes visuais.
-You should avoid using `minimum-scale`, `maximum-scale`, and in particular setting `user-scalable` to `no`. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.
+## Resumo
-## Summary
+Em suma, Design Responsivo refere-se ao design de site ou aplicação que é capaz de reagir adequadamente ao ambiente no qual é visualizado, não importa qual sejam as características desse ambiente. Ela engloba alguns recursos do HTML e do CSS e é, essencialmente, o padrão de como websites e páginas web são construídas atualmente.
-Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques, and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.
+Pense, por exemplo, nos sites que você acessa diariamente no seu celular - é bastante raro topar com um site que é apenas uma versão diminuída do site para computadores ou no qual é necessário "duelar" com o zoom e a barra de rolagem para encontrar e utilizar partes do site. Isso se tornou algo cada vez menos comum justamente em razão do ambiente web ter caminhado na direção em favor da adoção de designs responsivos.
-It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.
+Algo que permitiu a essa caminhada passos cada vez mais largos foi a facilidade cada vez maior de construir esses designs responsivos, em parte conseguida com a ajuda dos métodos de layout aprendidos nessas aulas/lições. Se você é iniciante em desenvolvimento web, atualmente existe uma gama muito mais ampla de ferramentas a sua disposição do que na época que o design responsivo deu seus primeiros passos e os usos modernos de HTML e CSS são muito melhores para criar designs que são elegantes e úteis, não importando o dispositivo que o visitante ou usuário estejam usando no momento em que passam pelo seu site.
{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
diff --git a/files/pt-br/web/api/url/canparse_static/index.md b/files/pt-br/web/api/url/canparse_static/index.md
new file mode 100644
index 00000000000000..a1f564cddbc2b2
--- /dev/null
+++ b/files/pt-br/web/api/url/canparse_static/index.md
@@ -0,0 +1,112 @@
+---
+title: "URL: método estático canParse()"
+short-title: canParse()
+slug: Web/API/URL/canParse_static
+l10n:
+ sourceCommit: 22080a7cc403f7f45c8e85065b182c9f0d4d383c
+---
+
+{{ApiRef("URL API")}}
+
+O método estático **`URL.canParse()`** da interface {{domxref("URL")}} retorna um valor booleano de **`true`** ou **`false`** para indicar se uma URL absoluta ou uma URL relativa combinada com a URL base é analisável e válida.
+
+Esse método é uma alternativa mais fácil e mais rápida em relação a construir uma `URL` dentro de um bloco [try...catch](/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch).
+
+Ela retorna `true` para os mesmos valores que passariam com sucesso no [construtor `URL()`](/pt-BR/docs/Web/API/URL/URL), portanto valores que são válidos e `false` para valores reprovados e que fariam esse construtor lançar uma exceção [TypeError](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/TypeError), portanto valores que são inválidos.
+
+## Sintaxe
+
+```js-nolint
+URL.canParse(url)
+URL.canParse(url, base)
+```
+
+### Parâmetros
+
+- `url`
+ - : Uma string ou outro objeto qualquer com um {{Glossary("stringifier")}} — incluído nisso, como exemplo, um elemento {{htmlelement("a")}} ou {{htmlelement("area")}} — que representa uma URL absoluta ou relativa qualquer.
+ Se `url` é uma URL relativa, o pârametro `base` é obrigatório e o que será usado para a URL de base.
+ Se `url` é uma URL absoluta, caso o pârametro `base` seja dado ele será ignorado.
+- `base` {{optional_inline}}
+ - : Uma string que representa a URL base nos casos onde `URL` é uma URL relativa.
+ Caso não seja especificada, assume o valor padrão de `undefined`.
+
+> [!NOTE]
+> Os argumentos `url` e `base` serão stringificados, cada um a sua vez, a partir de qualquer valor que você passar e isso ocorre da mesma forma como acontece em outras Web APIs que aceitam strings como argumento.
+> Particularmente, você pode utilizar um objeto {{domxref("URL")}} existente para qualquer um dos dois argumentos e esse objeto será stringificado (isto é convertido em uma string) para a propriedade {{domxref("URL.href", "href")}} do objeto.
+
+### Valor de retorno
+
+Retorna **`true`** se a URL pode ser analisável e é valida; Do contrário, retorna **`false`**.
+
+## Exemplos
+
+Este exemplo funcional demonstra como utilizar o método estático `URL.canParse()` para alguns valores diferentes de URLs absolutas e relativas.
+
+A primeira parte do exemplo define um elemento HMTL `` para criar um log de registro, junto com um método `log()` para fazer esses registros.
+
+```html
+
+```
+
+```js
+const logElement = document.getElementById("log");
+function log(text) {
+ logElement.innerText += `${text}\n`;
+}
+```
+
+Depois, é preciso checar se o método `URL.canParse()` é suportado no navegador utilizado através da condição `"canParse"` na URL.
+Se o método for suportado pelo navegador, nós podemos registrar no log os resultados ao checar uma URL absoluta, uma URL relativa sem URL base e uma URL relativa com uma URL base válida.
+Também é possível registrar no log caso o método não seja suportado naquele navegador.
+
+```js
+if ("canParse" in URL) {
+ log("Testa URL absoluta válida");
+ let url = "https://developer.mozilla.org/";
+ let result = URL.canParse(url);
+ log(` URL.canParse("${url}"): ${result}`);
+
+ log("\nTesta URL relativa sem URL base");
+ url = "/en-US/docs";
+ result = URL.canParse(url);
+ log(` URL.canParse("${url}"): ${result}`);
+
+ log("\nTesta URL relativa com URL base válida");
+ let baseUrl = "https://developer.mozilla.org/";
+ result = URL.canParse(url, baseUrl);
+ log(` URL.canParse("${url}","${baseUrl}"): ${result}`);
+} else {
+ log("URL.canParse() não suportado nessa versão ou nesse navegador");
+}
+```
+
+Por último, o código abaixo mostra que o `baseURL` não se restring somente a strings.
+Aqui foi passado um objeto `URL`.
+
+```js
+if ("canParse" in URL) {
+ log("\nTesta URL relativa com a URL base fornecida como um objeto URL");
+ let baseUrl = new URL("https://developer.mozilla.org/");
+ let url = "/en-US/docs";
+ result = URL.canParse(url, baseUrl);
+ log(` URL.canParse("${url}","${baseUrl}"): ${result}`);
+}
+```
+
+Os resultados de cada uma das checagens estão mostrados abaixo.
+
+{{EmbedLiveSample('Examples', '100%', '200')}}
+
+## Especificações
+
+{{Specifications}}
+
+## Compatibilidade com browsers
+
+{{Compat}}
+
+## Veja também
+
+- {{domxref("URL.URL", "URL()")}}
+- [Um polyfill do `URL.canParse()`](https://github.com/zloirock/core-js#url-and-urlsearchparams) está disponível em [`core-js`](https://github.com/zloirock/core-js)
diff --git a/files/pt-br/web/api/url/revokeobjecturl_static/index.md b/files/pt-br/web/api/url/revokeobjecturl_static/index.md
index 3782f1b85d2dd5..a5092bcfb5b7e3 100644
--- a/files/pt-br/web/api/url/revokeobjecturl_static/index.md
+++ b/files/pt-br/web/api/url/revokeobjecturl_static/index.md
@@ -3,17 +3,15 @@ title: URL.revokeObjectURL()
slug: Web/API/URL/revokeObjectURL_static
---
-{{ApiRef("URL API")}}
+{{ApiRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}}
-O método estático **`URL.revokeObjectURL()`** anula uma URL que anteriormente foi criada pelo método {{domxref("URL.createObjectURL()") }}.
+O método estático **`URL.revokeObjectURL()`** anula uma URL que anteriormente foi criada pelo método {{domxref("URL.createObjectURL_static") }}.
-Execute este método quando terminar de utilizar um objeto URL para informar o browser que não preicsa mais manter uma referência deste arquivo.
+Execute este método quando terminar de utilizar um objeto URL para informar o browser que não precisa mais manter a referência ao arquivo.
-{{AvailableInWorkers}}
-
-> [!CALLOUT]
-> Este método não esta disponível em service workers, devido a
-> questões com cliclo de vida da interface {{domxref("Blob")}} e potenciais vazamentos.
+> [!NOTE]
+> Este método _não_ esta disponível em [Service Workers](/pt-BR/docs/Web/API/Service_Worker_API), devido a
+> problemas com o ciclo de vida da interface {{domxref("Blob")}} e a potencial vulnerabilidade para vazamentos.
## Sintaxe
@@ -24,11 +22,15 @@ URL.revokeObjectURL(objectURL);
### Parâmetros
- `objectURL`
- - : Uma {{domxref("DOMString")}} representando o objeto URL que anteriormente foi criado com {{domxref("URL.createObjectURL", "createObjectURL()") }}.
+ - : Uma {{domxref("DOMString")}} representando o objeto URL que anteriormente foi criado com {{domxref("URL/createObjectURL_static", "createObjectURL()") }}.
+
+### Valor de retorno
+
+None ({{jsxref("undefined")}}).
## Exemplos
-Veja [Usando o objeto URL para exibir imagens](/pt-BR/docs/Web/API/File/Using_files_from_web_applications#example_using_object_urls_to_display_images).
+Veja [Usando o objeto URL para exibir imagens](/pt-BR/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images).
## Especificações
@@ -40,6 +42,6 @@ Veja [Usando o objeto URL para exibir imagens](/pt-BR/docs/Web/API/File/Using_fi
## Veja também
-- [Usando arquivo de uma aplicação web](/pt-BR/docs/Web/API/File/Using_files_from_web_applications)
-- [Usando objetos Url para exibir imagens](/pt-BR/docs/Web/API/File/Using_files_from_web_applications#example_using_object_urls_to_display_images)
-- {{domxref("URL.createObjectURL()") }}
+- [Usando arquivo de uma aplicação web](/pt-BR/docs/Web/API/File_API/Using_files_from_web_applications)
+- [Usando objetos Url para exibir imagens](/pt-BR/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images)
+- {{domxref("URL.createObjectURL_static") }}