Módulo 13: CSS Moderno

2. Resumo da Aula Anterior

No Módulo 12, organizámos o nosso código com Variáveis CSS. Agora, vamos explorar as propriedades mais recentes que tornaram o desenvolvimento web muito mais simples e inteligente.

3. O Que Vais Aprender Hoje

✅ Manter proporções com aspect-ratio.
✅ Design internacional com Logical Properties.
✅ Verificar suporte do browser com @supports.
✅ Novas funções de cor e formas.

4. Teoria: O Código que se Explica

Conceito: O CSS moderno foca-se menos em "onde as coisas estão fisicamente" (esquerda/direita) e mais em "como o conteúdo flui". Isto ajuda a criar sites que funcionam em qualquer idioma ou orientação de ecrã sem re-escrever o código.

🌍 Analogia: O GPS vs. Indicações de Esquerda/Direita

Imagina que estás a dar indicações:

Antigamente (Left/Right): Dizes "vira à esquerda na padaria". Se a pessoa estiver a vir do lado contrário, o "esquerda" está errado!
Moderno (Inline/Block): Dizes "segue em direção ao norte". Não importa de onde a pessoa vem, o norte é sempre o norte. No CSS, inline-start é o início do texto, não importa se o idioma se lê da esquerda para a direita ou vice-versa!

5. Exemplos Práticos

Exemplo 1: Vídeos Proporcionais

Acabaram-se os vídeos "esborrachados".

.video-player {
  width: 100%;
  aspect-ratio: 16 / 9; /* Mantém sempre o formato de cinema */
  object-fit: cover;
}

O browser calcula automaticamente a altura correta baseada na largura atual.

Exemplo 2: Logical Properties

Margem inteligente.

.botao {
  /* Em vez de margin-left: 10px; */
  margin-inline-start: 10px;

  /* Em vez de padding-top: 5px; */
  padding-block-start: 5px;
}

Isto faz com que o espaçamento faça sentido mesmo que o site seja traduzido para árabe (onde se lê da direita para a esquerda).

6. Agora é a Tua Vez!

Vamos criar um "Card Moderno":

Cria uma <div> para um card de imagem.
Usa aspect-ratio: 1 / 1 para garantir que a imagem é sempre um quadrado perfeito.
Usa margin-inline: auto para centrar o card horizontalmente.
Adiciona um @supports (display: grid) e, lá dentro, muda o layout do card para usar Grid.
Observa como o site se mantém funcional mesmo que o browser seja muito antigo (embora hoje em dia quase todos suportem Grid!).

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 aspect-ratio é a solução definitiva para proporções.
📌 Logical Properties (inline/block) preparam o teu site para o mundo.
📌 @supports protege o teu código contra browsers antigos.
📌 O CSS moderno é mais descritivo e menos propenso a erros de layout.

9. Desafios Práticos

Desafio 1: O Quadrado Mágico

Como crias um elemento que é sempre um quadrado perfeito apenas definindo a largura?

Desafio 2: Internacionalização

Se o teu site for traduzido para um idioma vertical (de cima para baixo), qual propriedade lógica usarias para o espaçamento que normalmente seria o padding-left?

Desafio 3: Detetive de Browsers

Como verificas se o browser suporta a propriedade backdrop-filter antes de a usares?

Aprende Web: CSS

Módulo 13: CSS Moderno (O Futuro Agora)