CSS em 2025 Polígonos Arredondados, Kit de Transições e o Retorno do Subgrid

O Cenário do CSS Está Acelerado

Se você piscou, pode ter perdido várias funcionalidades novas e poderosas do CSS chegando nos navegadores. Desde polígonos com clip-path que agora podem ser arredondados, até um kit completo de transições de visualização, a plataforma está evoluindo muito rápido. Este artigo reúne as adições e debates mais impactantes da comunidade.

Polígonos Arredondados Chegaram

Amit Sheen mostrou como construir um quebra-cabeça completo usando clip-path — uma ótima forma de entender a versatilidade da propriedade. Mas a grande novidade é que o Chrome Canary agora suporta polígonos arredondados com a palavra-chave polygon() round. Esse recurso, defendido por Lea Verou, permite criar formas orgânicas sem truques.

/* Exemplo: um triângulo arredondado */
.elemento {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100% round 10px);
}

Ative a flag enable-experimental-web-platform-features no Chrome Canary para testar hoje. Também há conversas sobre adicionar bevel e outras palavras-chave de formato de canto.

Kit de Ferramentas de Transições de Visualização

O time Chrome DevRel lançou um kit de ferramentas de transições de visualização — uma coleção de utilitários que facilitam o trabalho com transições. Com as transições de escopo de elemento lançadas no mês passado, agora é o momento perfeito para experimentar.

// Exemplo: disparar uma transição de visualização na navegação
if (document.startViewTransition) {
  document.startViewTransition(() => {
    // Atualizar o DOM
  });
}

Containers Somente com Nome vs. @scope

Chris Coyier explorou recentemente o uso de containers somente com nome para escopo, comparando-os com nomes de classe e a regra @scope. Embora @scope geralmente resulte em HTML mais limpo, a escolha depende das preferências do seu time. Qual é a sua opinião?

/* Exemplo com @scope */
@scope (.card) {
  .titulo { color: navy; }
}

Subgrid: Ainda Relevante

O subgrid se tornou Baseline Newly Available há dois anos e meio, mas muitos desenvolvedores ainda não o adotaram. A explicação simples de David Bushell mostra como o subgrid ajuda a sair de grids corretamente, evitando wrappers aninhados e margens negativas.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

Você Pode Não Precisar de JavaScript

O "The Great CSS Expansion" de Pavel Laptev lista alternativas CSS para padrões comuns de JavaScript — menores, mais rápidas e cada vez mais capazes.

Limitações e Cuidados

• Polígonos arredondados exigem Chrome Canary com flags experimentais; ainda não disponíveis no Safari ou Firefox.
• Transições de visualização ainda não são suportadas no Safari e Firefox.
• A adoção do subgrid continua baixa; ferramentas e educação estão atrasadas.

Próximos Passos

• Teste o kit de ferramentas de transições de visualização em um projeto pessoal.
• Experimente clip-path: polygon(... round ...) no Chrome Canary.
• Revisite o subgrid no seu próximo layout de grid para reduzir a complexidade de wrappers.

Baseado no artigo original.

Mergulho no Código: Polígonos Arredondados e Transições de Visualização

Polígono Arredondado na Prática

/* Faça uma estrela com pontas arredondadas */
.estrela {
  width: 200px;
  height: 200px;
  background: gold;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    round 5px
  );
}

Transição de Visualização com Escopo de Elemento

// Escopo de transição para um elemento específico
const transicao = document.startViewTransition({
  update: () => {
    document.querySelector('.galeria').innerHTML = novoConteudo;
  },
  types: ['slide'],
  elements: [document.querySelector('.galeria')]
});

Subgrid: Saindo de Grids Aninhados

<div class="grid">
  <div class="item">
    <header>Título</header>
    <p>Descrição que deve alinhar entre linhas</p>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

Referência: artigo original

Comparação: Containers Somente com Nome vs. @scope vs. Classes

Limitações e Cuidados

• Polígonos arredondados são experimentais; não use em produção sem fallbacks.
• Transições de visualização não têm suporte no Safari/Firefox — considere melhoria progressiva.
• Subgrid é poderoso, mas pode confundir desenvolvedores não familiarizados com aninhamento de grid.

Próximos Passos

• Crie um pequeno demo com o kit de ferramentas de transições de visualização.
• Substitua uma animação JavaScript por uma solução CSS-only com clip-path.
• Audite seus layouts de grid atuais para oportunidades de usar subgrid.

Fonte: CSS-Tricks What's Important #9

Conclusão

O CSS em 2025 está mais rico do que nunca. Polígonos arredondados, transições de visualização e subgrid resolvem problemas reais — mas vêm com ressalvas de suporte a navegadores. Comece a experimentar em projetos pessoais e fique de olho no Can I Use para uso em produção.

Leitura Adicional

• Como o Spotify Honk Automatizou 240 Migrações de Dataset em 6 Meses
• Como o Cloudflare Log Explorer Transforma Telemetria Bruta em um Mecanismo de Investigação de Ataques Multivetoriais