Curso de CSS3 Avançado

1. CSS Moderno e Evolução do CSS

• Do CSS3 ao CSS moderno
• Padrões atuais do CSS e implementação nos navegadores
• Compreensão da especificação CSS e suporte dos navegadores
• Realce progressivo (Progressive enhancement)
• Detecção de funcionalidades e degradação graciosa
• Compreensão do ecossistema CSS moderno

2. Seletores Avançados

• Seletores de atributos avançados
• Pseudo-classes estruturais
• :is()
• :where()
• :not()
• :has() e seletores relacionais
• Especificidade dos seletores
• Gestão da especificidade em projetos de grande dimensão
• Boas práticas em seletores modernos

3. Cores Modernas e Efeitos Visuais

• RGB, HSL e funções de cor modernas
• color(), lab(), lch(), oklab() e oklch()
• Cores relativas
• Transparência e canais alfa
• Gradientes avançados
• Gradientes lineares, radiais e cônicos
• color-mix()
• Interpolação de cores
• Filtros CSS e efeitos visuais
• Temas e sistemas de cor modernos

4. Propriedades Personalizadas CSS e Sistemas de Design

• Variáveis CSS / propriedades personalizadas
• Variáveis e valores de reserva (fallback)
• Tematização dinâmica
• Personalização a nível de componente
• Tokens de design com CSS
• Criação de temas claros e escuros
• Utilização de var(), @property e propriedades personalizadas tipadas
• Construção de sistemas de design CSS mantiveis

5. Aninhamento CSS e Gestão da Cascata

• Aninhamento CSS nativo
• Sintaxe de aninhamento e boas práticas
• Aninhamento CSS vs. pré-processadores
• Cascata e herança
• Camadas da cascata com @layer
• Gestão de CSS de terceiros
• @scope e conceitos de estilização em escopo
• Construção de arquiteturas CSS previsíveis

6. Layout Avançado com Flexbox

• Revisão dos fundamentos do Flexbox
• Eixo principal e eixo transversal
• Alinhamento avançado
• Dimensionamento flexível
• gap
• Envolvimento (wrapping) e ordenação
• Layouts Flexbox aninhados
• Padrões comuns de Flexbox
• Componentes responsivos usando Flexbox

7. CSS Grid Avançado

• Revisão dos fundamentos do Grid
• Gráficos explícitos e implícitos
• Dimensionamento avançado de trilhos
• minmax()
• auto-fit e auto-fill
• min(), max() e clamp()
• Áreas de grade (Grid areas)
• Layouts Grid responsivos
• Layouts de página complexos
• Subgrid CSS
• Utilização de Subgrid para layouts de componentes alinhados

8. Queries de Contentor e Responsividade Baseada em Componentes

• Por que as media queries de viewport nem sempre são suficientes
• Conceitos de queries de contentor
• container-type
• @container
• Unidades de comprimento de queries de contentor
• Design responsivo dirigido por componentes
• Queries de estilo de contentor
• Design de componentes responsivos reutilizáveis
• Queries de contentor vs. media queries

9. Design Responsivo Moderno

• Design mobile-first
• Pontos de rutura responsivos
• Tipografia fluida
• Espaçamento fluido
• clamp()
• Unidades de viewport modernas:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Considerações sobre viewports dinâmicos
• Unidades relativas ao contentor
• Imagens e media responsivos
• Redução de media queries desnecessárias

10. Propriedades Lógicas e Internacionalização

• Propriedades CSS lógicas vs. físicas
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Dimensionamento lógico
• Modos de escrita (Writing modes)
• Layouts da direita para a esquerda (RTL)
• Construção de interfaces internacionalmente adaptáveis

11. Tipografia Moderna

• Tipografia responsiva
• Fontes variáveis
• Considerações sobre o carregamento de fontes
• font-size-adjust
• Escala de tipos fluida
• Quebra de texto e transbordo
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Boas práticas em tipografia moderna

12. Transformações, Transições e Animações

• Transformações 2D e 3D
• Transições
• Animações de frames-chave
• Funções de temporização
• Composição de animações
• Desempenho das transformações
• Animações conduzidas por rolagem
• animation-timeline
• Conceitos de view-timeline
• Acessibilidade de movimento
• prefers-reduced-motion
• Considerações de desempenho

13. Funcionalidades de Interface CSS Modernas

• Diálogos e popovers nativos CSS
• Estilização de estados de interface interativos
• :popover-open
• :modal
• :focus-visible
• :target
• Estilização de estados de formulários
• accent-color
• appearance
• field-sizing
• Controlos de formulários modernos
• Construção de interações apenas em CSS acessíveis

14. Funções CSS Avançadas

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Funções de cor relativa
• Combinação de funções para layouts fluidos
• Padrões práticos de design responsivo

15. Pré-processadores CSS

• Visão geral dos pré-processadores CSS
• LESS
• Variáveis e mixins
• Aninhamento de estilos
• Funções e operações
• LESS vs. CSS nativo moderno
• Quando um pré-processador ainda é útil
• Migração de funcionalidades de pré-processadores para CSS nativo

16. Considerações de Design e Acessibilidade

• Boas práticas CSS modernas
• Estilização com foco na acessibilidade
• Estados de foco do teclado
• :focus-visible
• Redução de movimento
• Considerações de contraste e cor
• Texto e conteúdo responsivos
• Texto sobre imagens
• Componentes responsivos acessíveis
• Realce progressivo (Progressive enhancement)

17. Desempenho e Mantibilidade CSS

• Redução da complexidade CSS
• Evitar especificidade desnecessária
• Camadas da cascata para mantibilidade
• Padrões reutilizáveis de utilitários e componentes
• Conceitos de contenção CSS
• content-visibility
• Desempenho de renderização e layout
• Redução de mudanças de layout (layout shifts)
• Organização de bases de código CSS de grande dimensão
• Depuração CSS com ferramentas de desenvolvedor modernas dos navegadores

18. Projeto Prático CSS Moderno

Os participantes constroem uma interface web moderna e responsiva incorporando:

• CSS Grid
• Flexbox
• Subgrid
• Queries de contentor
• Aninhamento CSS
• Propriedades personalizadas
• Camadas da cascata
• Seletores modernos
• Tipografia fluida
• Unidades de viewport modernas
• Design responsivo
• Cores e gradientes modernos
• Animações e transições
• Considerações de acessibilidade
• Boas práticas de desempenho