Recursos menos conhecidos do HTML/CSS moderno

• As principais causas recentes da queda de desempenho em sites são o uso excessivo de JavaScript e scripts de rastreamento, e em muitos casos isso pode ser substituído suficientemente apenas com HTML/CSS
• Recursos adicionados recentemente, como aninhamento em CSS, cores relativas e novas unidades de viewport (lvh, svh, dvh), permitem resolver de forma simples tarefas que antes dependiam de JS ou preprocessadores
• CSS não é apenas uma ferramenta de estilo, mas uma linguagem poderosa capaz de implementar animações, validação de entrada, temas em modo escuro e menus sanfona
• Também em termos de desempenho, o CSS usa aceleração por GPU e roda em uma thread separada, sendo mais suave e eficiente que JS em animações e transições
• O autor destaca o CSS não apenas como uma ferramenta prática, mas como um meio de expressão e arte, e recomenda que desenvolvedores aproveitem mais o potencial do CSS moderno

---

Introdução: a complexidade da web e uma nova tentativa

• Muitos sites sofrem com queda de desempenho e complexidade por causa do uso excessivo de frameworks JavaScript
  • Apps em React levam vários segundos para carregar, e o NextJS provoca erros de hidratação
  • A pasta node_modules ocupa vários gigabytes
• Mesmo sem JavaScript, é possível implementar recursos poderosos apenas com HTML e CSS
  • Fora carrinhos de compra complexos de sites de e-commerce ou dashboards, JavaScript pode não ser essencial
• Este texto apresenta os recursos mais recentes do CSS e incentiva desenvolvedores a explorarem várias possibilidades sem depender apenas de JavaScript

Equívocos e percepção sobre CSS

CSS é mesmo difícil e desconfortável?

• A percepção negativa sobre CSS vem da falta de aprendizado básico
  • Muitos desenvolvedores pulam os fundamentos de CSS e focam em JavaScript ou TypeScript
  • CSS não é uma simples ferramenta de estilização, mas uma linguagem específica de domínio com recursos poderosos
• CSS permite criar layouts complexos com facilidade usando ferramentas como flexbox
  • Exemplo: centralizar uma div com display: flex e justify-content: center é simples
  • As ferramentas de desenvolvedor do navegador oferecem widgets para ajustar visualmente propriedades de flexbox
• Se você se aprofunda só em um lado (por exemplo, JS) e negligencia CSS, é natural que a dificuldade aumente

A dor de escrever CSS, e o que mudou

• Antigamente CSS realmente não era tão confortável, por isso surgiram ferramentas como Sass e Tailwind
  • Ex.: era preciso gerenciar cadeias longas de seletores como .post > .buttons .like:hover
• Recentemente foram adicionados recursos de melhoria de qualidade (como aninhamento), tornando o desenvolvimento agradável mesmo só com CSS puro
  • O aninhamento em CSS reúne estilos relacionados em um só lugar e melhora a legibilidade
    • Ex.: .post { & > .buttons { .like { &:hover { ... } } } }
    • A relação entre pai e filho fica clara, permitindo nomes de classe mais curtos e simples
• Cores relativas facilitam o ajuste de cores
  • É possível ajustar a luminosidade com hsl(from #123456 h s calc(l + 10))
  • color-mix() mistura duas cores para gerar cores dinâmicas
• A sintaxe de intervalo em media queries permite condições intuitivas como (width <= 768px)
• A unidade lh permite estilização alinhada à altura da linha
• A propriedade scrollbar-gutter resolve problemas de deslocamento de layout causados pela barra de rolagem
• O Baseline garante compatibilidade de recursos entre os principais navegadores
  • newly available funciona em navegadores recentes
  • widely available é compatível até com navegadores de 2,5 anos atrás
  • Ex.: aninhamento em CSS é suportado por todos os navegadores desde dezembro de 2023

Por que desenvolver só com CSS/HTML?

• Alguns usuários desativam o JavaScript por padrão (por motivos de segurança, privacidade etc.)
• Ao oferecer um site apenas com CSS/HTML puro, aumenta a chance de esses usuários conseguirem usá-lo
• Do ponto de vista de desenvolvimento e da experiência do usuário, usar apenas CSS/HTML traz vantagens em velocidade, acessibilidade e uso de CPU/bateria
  • Animações em CSS rodam na thread do compositor, reduzindo a carga na CPU
  • JavaScript roda via event loop e pode introduzir um pequeno atraso
• Há melhora em acessibilidade e facilidade de uso
  • Efeitos de hover em botões, animações de toast e validação de entrada podem ser implementados facilmente com CSS

Exemplos práticos e principais recursos de CSS

Criando animações de entrada naturais com @starting-style

• Antes, implementar animações de entrada de elementos exigia estruturas complexas com keyframes, gatilhos em JS etc.
• Com a introdução de @starting-style, ficou simples definir o estado inicial. É fácil implementar a animação do estado inicial do elemento (por exemplo, fade-in)
  • Configuração com transition: opacity 1s; @starting-style { opacity: 0; }
  • Funciona sem @keyframes separado nem JavaScript
• Basta declarar o estado inicial junto com a transition para que a animação seja aplicada naturalmente
  • Ex.: tratar suavemente a transição de opacidade e posição de uma mensagem toast

Configuração fácil de tema claro/escuro

• color-scheme: light dark alterna o tema automaticamente conforme a preferência do usuário
• A função light-dark(#000, #FFF) define cores apropriadas para modo claro/escuro
• Botões de rádio e o seletor :has permitem que o usuário escolha o tema
  • É possível trocar de tema só com CSS, sem JavaScript
  • Opcionalmente, JavaScript pode ser adicionado para salvar/carregar o tema

Criando UI customizada com rádio/checkbox e :has, :checked etc.

• Interações complexas como abas, sanfonas e toggles também podem ser implementadas sem JavaScript
• Botões de rádio podem receber estilo customizado com :checked e :has
  • Ex.: label:has(input:checked) define o estilo do botão selecionado
  • O elemento de entrada pode ser ocultado com opacity: 0, mantendo a acessibilidade para leitores de tela
• O elemento details é ideal para implementar menus sanfona como os de FAQ
  • O atributo name permite controlar um único item aberto por vez
  • Também é possível adicionar animações conforme o estado [open]

Validação de entrada e reflexão de estado

• A combinação de atributos HTML como pattern e required com pseudoclasses CSS (:valid, :invalid, :user-valid etc.) oferece validação em tempo real e feedback visual
• Melhorias na experiência do usuário, como mudar o estilo de outline/border dos campos de entrada
• O atributo pattern do HTML permite validar campos de entrada
  • Ex.: \w{3,16} permite letras, números e underscore com 3 a 16 caracteres
• :valid e :invalid do CSS permitem estilização conforme a validade
  • :user-valid e :user-invalid só aplicam estilo depois que o usuário interage
• O seletor :has permite estilizar outros elementos de acordo com o estado do input
• Em alguns casos (por exemplo, condições de entrada complexas), JS é necessário, mas na maioria CSS/HTML é suficiente

Como usar corretamente unidades de viewport

• As unidades vw/vh têm problemas de precisão no mobile por causa do aparecimento/desaparecimento da barra de endereço (navegação)
• Recomenda-se usar as novas unidades de viewport, como lvh/svh/dvh (largest/smallest/dynamic viewport height)
  • lvh: para tela cheia (ex.: plano de fundo de tela inteira)
  • svh: para botões, links e outros elementos que sempre precisam permanecer visíveis na tela
  • dvh: para alocar tamanho de forma dinâmica conforme mudanças como rolagem
• Sobreposição do teclado pode ser tratada com a propriedade interactive-widget ou com a VirtualKeyboard API
  • <meta name="viewport" content="width=device-width, interactive-widget=resizes-content">
  • Em navegadores baseados em Chromium: navigator.virtualKeyboard.overlaysContent = true

Wishlist de CSS (o que faz falta ou seria desejável)

• Blocos reutilizáveis: aplicar outra classe dentro de uma classe (ex.: @apply border)
• Seletores combinados com media query: combinar @media e seletor de classe
• Variável de nth-child: span { --nth: nth-child(); } para estilização dinâmica
• Seletor nth-letter: estilizar uma letra específica (ex.: p::nth-letter(2))
• Remoção de unidade: gerar valor sem unidade com calc(100vw / 1px)
• Função image(): suporte a cor alternativa e fragmentos de imagem
• Tag style dentro do body: suporte oficial no padrão para aliviar problemas de FOUC

Encerramento: CSS e a dimensão artística da web

• CSS não é apenas uma ferramenta, mas um meio de expressão criativa
• Ferramentas de IA ou cadeias de build (linters, minificadores) podem limitar a criatividade
• CSS atende ao mesmo tempo desempenho, acessibilidade e expressão artística
• Este texto foi escrito com cerca de 49 kB de HTML/CSS sem JavaScript
  • Todos os widgets interativos e elementos visuais foram implementados manualmente
  • Ex.: CSS Click Game prova o potencial do CSS como linguagem de programação