WDD 231: Desenvolvimento Frontend para Web I

S01 - Atividade de Aprendizagem: Normalização de CSS

Visão Geral

Todos os navegadores e outros agentes de usuário (como bots ou outros programas) têm propriedades CSS padrão para elementos HTML. O objetivo de normalizar ou redefinir uma referência CSS é reduzir inconsistências do navegador no estilo padrão.

Preparação

Contexto Histórico

A redefinição de CSS já existe há muito tempo. O primeiro arquivo de redefinição de CSS foi criado por Eric Meyer em 2007. Era um arquivo simples que removia todo o estilo padrão do navegador. Desde então, muitos desenvolvedores criaram suas próprias variações de arquivos de redefinição de CSS. O mais popular deles é o normalize.css, criado por Nicolas Gallagher em 2011. O normalize.css é uma alternativa moderna às redefinições de CSS que preserva estilos padrões úteis em vez de apenas removê-los.

Estado Atual

Os navegadores percorreram um longo caminho na adesão aos padrões da web. Os estilos padrão são mais consistentes em navegadores modernos.

O normalize.css ainda é relevante, pois não elimina completamente os estilos padrões, mas os normaliza em todos os navegadores, preservando padrões úteis.

Muitas estruturas CSS, como Bootstrap e Tailwind CSS, usam alguma forma de normalização (reset) de estilos.

Resumo

O uso de normalização e redefinição de CSS reflete uma preferência ou decisão pessoal. Isso significa que seus benefícios e limitações podem ser debatidos entre profissionais. Dependendo da aplicação, pode ser benéfico usar normalização ou redefinição em certa medida. Talvez você precise oferecer suporte a navegadores antigos ou tenha designs altamente personalizados que exijam controle exato de pixels e consistência entre navegadores.

O vídeo abaixo usa o site noticias-br.aigrejadejesuscristo.org para analisar a normalização/redefinição de CSS.

Demonstração em Vídeo: ▶️ Normalização e Redefinição de CSS:

Instruções da Atividade

Nesta atividade, você criará seu próprio arquivo de normalização de CSS e o incluirá em seu site.

1. Crie um arquivo normalize.css localizado na pasta raiz estilos do wdd231.
2. Use a seguinte referência de código e copie o CSS para seu arquivo: arquivo normalize.css de Nicolas Gallagher.
3. Use o CSS incluindo o link no cabeçalho, head, de uma página. Por exemplo, esta linha de código seria incluída antes de qualquer outra referência de link CSS.

   <link rel="stylesheet" href="estilos/normalize.css">

   CONCEITO IMPORTANTE: Por que essa referência CSS deve preceder todas as outras referências CSS?

   Se você tiver mais de uma regra, todas exatamente com o mesmo peso, então a que vier por último no CSS prevalecerá (cascata).

4. Uma alternativa para hospedar seu próprio arquivo de normalização ou redefinição de CSS é usar uma referência de rede de entrega de conteúdo (Content Delivery Network - CDN).
   A referência usada abaixo minimizou o arquivo "normalize.css", conforme indicado pelo .min no nome do arquivo.

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

   Dê uma olhada no arquivo e veja como ele é difícil de ler, mas completamente utilizável pelo navegador.
   O que significa minimizar quando se trata de otimização de arquivos da web?

   Toda a sintaxe desnecessária no CSS é removida do arquivo, incluindo espaços, comentários e quebras de linha. Uma minificação mais sofisticada otimizaria o CSS e eliminaria redundâncias.