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 em navegadores
• Compreensão da especificação do CSS e suporte dos navegadores
• Progressive enhancement (Aprimoramento progressivo)
• Detectação de recursos e degradação graciosa
• Compreensão do ecossistema moderno do CSS

2. Seletores Avançados

• Seletores de atributo avançados
• Pseudo-classes estruturais
• :is()
• :where()
• :not()
• :has() e seletores relacionais
• Especificidade de seletores
• Gerenciando a especificidade em projetos grandes
• Melhores práticas de seletores modernos

3. Cores Modernas e Efeitos Visuais

• RGB, HSL e funções modernas de cor
• 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
• Tematização moderna e sistemas de cores

4. Propriedades Personalizadas do CSS e Sistemas de Design

• Variáveis CSS \/ propriedades personalizadas
• Variáveis e valores de fallback
• Tematização dinâmica
• Personalização em nível de componente
• Tokens de design com CSS
• Criação de temas claros e escuros
• Uso de var(), @property e propriedades personalizadas com tipagem
• Construção de sistemas de design CSS mantíveis

5. Aninhamento de CSS e Gerenciamento da Cascade

• Aninhamento nativo do CSS
• Sintaxe de aninhamento e melhores práticas
• Aninhamento de CSS vs. pré-processadores
• Cascade e herança
• Camadas de cascade com @layer
• Gerenciando 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 cruzado
• Alinhamento avançado
• Tamanho flexível
• gap
• Quebra de linha e ordenação
• Layouts aninhados de Flexbox
• Padrões comuns do Flexbox
• Componentes responsivos usando Flexbox

7. CSS Grid Avançado

• Revisão dos fundamentos da Grid
• Grids explícitos e implícitos
• Dimensionamento avançado de trilhos (tracks)
• minmax()
• auto-fit e auto-fill
• min(), max() e clamp()
• Áreas de grid
• Layouts responsivos de Grid
• Layouts de página complexos
• CSS Subgrid
• Uso da Subgrid para layouts de componentes alinhados

8. Consultas de Container e Responsividade Baseada em Componentes

• Por que as consultas de mídia de viewport nem sempre são suficientes
• Conceitos de consultas de container
• container-type
• @container
• Unidades de comprimento para consultas de container
• Design responsivo orientado a componentes
• Estilo queries para consultas de container
• Design de componentes responsivos reutilizáveis
• Consultas de container vs. consultas de mídia

9. Design Responsivo Moderno

• Design mobile-first
• Breakpoints responsivos
• Tipografia fluida
• Espaçamento fluido
• clamp()
• Unidades modernas de viewport:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Considerações de viewport dinâmico
• Unidades relativas ao container
• Imagens e mídias responsivas
• Redução de consultas de mídia 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 para carregamento de fontes
• font-size-adjust
• Escala de tipos fluida
• Quebra de texto e estouro (overflow)
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Melhores práticas de tipografia moderna

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

• Transformações 2D e 3D
• Transições
• Animações keyframe
• Funções de tempo (timing functions)
• Composição de animações
• Desempenho de transformações
• Animações impulsionadas por rolagem (scroll-driven animations)
• animation-timeline
• Conceitos de view-timeline
• Accessibility de movimento
• prefers-reduced-motion
• Considerações de desempenho

13. Recursos de UI Modernos em CSS

• Dialogos e popovers nativos do CSS
• Estilização de estados de UI interativos
• :popover-open
• :modal
• :focus-visible
• :target
• Estilização de estados de formulário
• accent-color
• appearance
• field-sizing
• Controles de formulário modernos
• Construção de interações acessíveis apenas com CSS

14. Funções Avançadas de CSS

• 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 de CSS

• Visão geral de pré-processadores de 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 recursos de pré-processador para CSS nativo

16. Considerações de Design e Acessibilidade

• Melhores práticas de CSS moderno
• Estilização com foco em 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
• Progressive enhancement (Aprimoramento progressivo)

17. Desempenho e Manutenibilidade do CSS

• Redução da complexidade do CSS
• Evitando especificidade desnecessária
• Camadas de cascade para manutenção
• Padrões reutilizáveis de utilitários e componentes
• Conceitos de contenção de CSS
• content-visibility
• Desempenho de renderização e layout
• Redução de alterações de layout (layout shifts)
• Organização de bases de código CSS grandes
• Depuração de CSS com ferramentas de desenvolvedor modernas dos navegadores

18. Projeto Prático de CSS Moderno

Os participantes constroem uma interface web moderna responsiva incorporando:

• CSS Grid
• Flexbox
• Subgrid
• Consultas de container
• Aninhamento de CSS
• Propriedades personalizadas
• Camadas de cascade
• Seletores modernos
• Tipografia fluida
• Unidades modernas de viewport
• Design responsivo
• Cores e gradientes modernos
• Animações e transições
• Considerações de acessibilidade
• Melhores práticas de desempenho