CSS 3: Pré-Requisitos#
Neste material, vamos finalmente conhecer as propriedades CSS que vão permitir fazer com que os documentos HTML tenham um layout parecido com o dos fluxos de tela. Mas, antes de fazer isso, precisamos "preparar o terreno".
Modo mobile do Google Chrome#
Como estamos fazendo um protótipo de aplicativo, seria interessante conseguirmos simular que estamos usando um celular ou tablet. Felizmente, as ferramentas de desenvolvedor do Google Chrome permitem fazer isso facilmente: basta clicar no botão do canto superior esquerdo.
Esse botão ativa o "modo mobile" do navegador. Esse modo reduz o tamanho da tela e faz o mouse se comportar como se fosse um dedo interagindo com uma interface touch. No canto superior esquerdo desse modo, há um menu com várias opções de dispositivo e uma opção especial Responsive, que permite a você mudar o tamanho da tela a qualquer momento: basta usar o handle no lado direito.
No entanto, se você fizer isso com o exemplo do bolo de cenoura talvez note algumas coisas estranhas, como o título principal estar menor que o esperado. Isso está relacionado ao assunto da próxima seção.
Definindo o tamanho do viewport#
O viewport de um documento HTML define o tamanho da tela em que esse documento é visualizado. O que está acontecendo no caso acima é que, por não termos configurado isso explicitamente no código, o navegador está considerando um viewport maior do que deveria e dando um "zoom out" para caber na tela mobile.
Para resolver isso, precisamos adicionar uma tag no head para informar ao navegador que a largura do viewport deve ser igual à largura do dispositivo (device-width).
<head>
<!-- ... -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ... -->
</head>
Também definimos que o initial-scale é 1 para garantir que a página nunca começa com "zoom out" ou "zoom in" ao ser carregada.
Resetando as regras do navegador#
Para terminar a "preparação do terreno", vamos fazer um CSS reset. Isso significa anular todas as regras de formatação do navegador, para partirmos de um estilo inicial consistente e não dependermos dos padrões específicos do Chrome.
O jeito mais fácil de fazer um CSS reset é linkar o documento HTML a um arquivo CSS especial feito especialmente para isso. Um dos arquivos de CSS reset mais populares é o da página do Eric Meyer. Para baixar esse arquivo, basta clicar aqui. Uma vez baixado, é só linká-lo no HTML junto aos outros.
<head>
<title>Exemplo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
Importante
Note que o href é css/reset.css. Isso significa que o arquivo reset.css deve estar na pasta css, que por sua vez está na mesma pasta que o exemplo.html.
Não esqueça que o arquivo de reset deve ser o primeiro a ser linkado! No código acima, se a tag do reset.css viesse depois, apagaria toda a estilização trazida pelo style.css.
Exercise 1
Answer
O autor (Eric Meyer) escolheu deixar o arquivo como domínio público, assim podemos utilizá-lo em qualquer projeto da maneira que quisermos. Existem diferentes tipos de licença de software. Quando vamos desenvolver software profissionalmente é importante nos atentarmos às licenças de tudo o que formos utilizar no nosso código.
Ok, isso conclui os pré-requisitos. Agora estamos prontos para apresentar as regras de desenvolvimento que devemos seguir.