Curso de CSS3 Avançado

1. CSS Moderno e Evolução do CSS

• Do CSS3 ao CSS moderno
• Padrões CSS atuais e implementação nos navegadores
• Compreensão da especificação CSS e suporte de navegadores
• Incremento progressivo
• Detectação de recursos e degradação graciosa
• Compreensão do ecossistema moderno de CSS

2. Seletores Avançados

• Seletores de atributo avançados
• Pseudoclasses estruturais
• :is()
• :where()
• :not()
• :has() e seletores relacionais
• Especificidade de seletores
• Gestão da especificidade em projetos de grande escala
• Melhores práticas para seletores modernos

3. Cores Modernas e Efeitos Visuais

• Funções de cor modernas: RGB, HSL
• 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 CSS e Sistemas de Design

• Propriedades personalizadas CSS (variáveis)
• Variáveis e valores de fallback
• Tematização dinâmica
• Personalização em nível de componente
• Design tokens com CSS
• Criação de temas claro e escuro
• Uso de var(), @property e propriedades personalizadas tipadas
• Construção de sistemas de design em CSS mantíveis

5. Aninhamento CSS e Gestão da Cascata

• Aninhamento CSS nativo
• Sintaxe de aninhamento e melhores práticas
• Aninhamento CSS vs. pré-processadores
• Cascata e herança
• Camadas de cascata com @layer
• Gestão de CSS de terceiros
• @scope e conceitos de estilização escopada
• 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
• Tamanho flexível
• gap
• Quebra de linha e ordenação
• Layouts Flexbox aninhados
• Padrões comuns de 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 trilhas
• minmax()
• auto-fit e auto-fill
• min(), max() e clamp()
• Áreas de grade
• Layouts Grid responsivos
• Layouts de página complexos
• Subgrid CSS
• Uso de Subgrid para layouts de componentes alinhados

8. Consultas de Container e Responsividade Baseada em Componentes

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

9. Design Responsivo Moderno

• Design mobile-first
• Pontos de quebra responsivos
• Tipografia fluida
• Espaçamento fluido
• clamp()
• Unidades modernas de viewport:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Considerações sobre 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
• Layouts da direita para a esquerda (RTL)
• Criação de interfaces adaptáveis internacionalmente

11. Tipografia Moderna

• Tipografia responsiva
• Fontes variáveis
• Considerações sobre carregamento de fontes
• font-size-adjust
• Escala de tipos fluida
• Quebra de texto e transbordo
• 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 de keyframes
• Funções de temporização
• Composição de animações
• Desempenho de transformações
• Animações impulsionadas por rolagem
• animation-timeline
• Conceitos de view-timeline
• Acessibilidade de movimento
• prefers-reduced-motion
• Considerações de desempenho

13. Recursos de UI CSS Modernos

• Diálogos e popovers nativos em CSS
• Estilização de estados interativos de UI
• :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 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 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
• Incremento progressivo

17. Desempenho e Manutenibilidade CSS

• Redução da complexidade do CSS
• Evitando especificidade desnecessária
• Camadas de cascata para manutenibilidade
• 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 deslocamentos de layout
• Organização de bases de código CSS grandes
• Depuração de CSS com ferramentas de desenvolvedor modernas de navegador

18. Projeto Prático em CSS Moderno

Os participantes construirão uma interface web moderna e responsiva incorporando:

• CSS Grid
• Flexbox
• Subgrid
• Consultas de container
• Aninhamento CSS
• Propriedades personalizadas
• Camadas de cascata
• 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