O Que Rolou no CSS Essa Semana?

Se você piscou, pode ter perdido uma enxurrada de propostas, lançamentos de navegadores e tutoriais práticos. Aqui vai um resumo rápido do que mais impacta o dia a dia do desenvolvedor web.

Favicons SVG que Respeitam o Esquema de Cores

Paweł Grzybek mostrou como criar favicons SVG que se adaptam ao modo claro/escuro usando media queries prefers-color-scheme dentro do próprio SVG. A ideia é elegante, mas o suporte entre navegadores ainda é inconsistente. A comunidade está se mobilizando para uma padronização. Veja o artigo original no CSS-Tricks para os detalhes.

@mixin no CSS – Ajude a Definir a Especificação

Lea Verou compartilhou um trecho de código e pediu feedback da comunidade sobre a sintaxe de mixins no CSS. O objetivo é ter blocos de estilo reutilizáveis tão naturais quanto no Sass, mas sem precisar de pré-processador. O CSS Working Group está ouvindo ativamente os desenvolvedores.

/* Sintaxe proposta para @mixin no CSS (não final) */
@mixin card-responsivo($min-width: 300px) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  & > * {
    flex: 1 1 $min-width;
  }
}

.container-cartao {
  @include card-responsivo(250px);
}

Morphing com Âncoras (AIM) – Tutorial

Chris Coyier publicou um tutorial de como construir uma galeria de imagens usando popovers e AIM. A técnica anima um elemento da posição inicial até a posição ancorada, criando transições suaves sem bibliotecas JavaScript.

object-view-box – Corte de Imagem Nativo em CSS

Victor Ponamariov lembrou a todos sobre object-view-box, uma propriedade que permite zoom, corte ou enquadramento de um elemento como o viewBox do SVG. O Chrome suporta desde agosto de 2022, mas Safari e Firefox ainda não implementaram.

/* Cortando uma imagem com object-view-box */
.imagem-cortada {
  object-view-box: inset(10% 20% 30% 40%);
}

corner-shape para Componentes do Dia a Dia

Brecht De Ruyte explorou como usar corner-shape em componentes práticos como cards, botões e badges. Atualmente só funciona no Chrome, mas permite criar cantos arredondados, chanfrados ou recortados com uma única propriedade.

Lançamentos dos Navegadores

  • Firefox 149: popover=hint (também no Chrome), containers com nome (@container nome { })
  • Safari 26.4: containers com nome, display: grid-lanes, flow-tolerance
  • Safari TP 240: melhorias em grid
  • Chrome 148: consultas de features em at-rules; background-image agora suporta light-dark()

Um novo site chamado BaseWatch monitora o status de baseline de todas essas features.

Leia também: Nosso mergulho em "O Novo Capítulo do React: Migrando para uma Fundação Independente" – outra grande mudança no ecossistema web.

Developer inspecting CSS code with browser dev tools showing new features like @mixin and corner-shape Software Concept Art

Mão na Massa: Morphing com Âncoras e Popovers

Vamos ver um exemplo prático de AIM. A ideia é animar um popover da posição do elemento gatilho até um overlay centralizado.

<button popovertarget="galeria-popover">Abrir Galeria</button>

<div id="galeria-popover" popover>
  <img src="foto.jpg" alt="Imagem da galeria" />
</div>

[popover] {
  /* Começa na posição do botão */
  position-anchor: --gatilho;
  top: anchor(--gatilho bottom);
  left: anchor(--gatilho left);
  transition: top 0.3s, left 0.3s, transform 0.3s;
}

[popover]:popover-open {
  /* Morph para o centro */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Essa técnica elimina a necessidade de animações com JavaScript e mantém toda a lógica no CSS.

CSS toggle switch and popover gallery demo on a modern laptop screen System Abstract Visual

Limitações e Cuidados

  • Suporte fragmentado. Muitas features (@mixin, corner-shape, object-view-box) são exclusivas do Chrome ou estão atrás de flags.
  • A sintaxe do @mixin ainda é proposta. Pode mudar bastante antes de virar baseline.
  • AIM depende de popover e anchor-positioning, que ainda não têm suporte universal.
  • Favicons SVG com prefers-color-scheme não funcionam de forma consistente em todos os navegadores (Safari ignora, por exemplo).

Próximos Passos

  1. Teste object-view-box no Chrome para se familiarizar com corte nativo.
  2. Participe da discussão sobre @mixin no GitHub para dar seu feedback.
  3. Monte uma galeria popover simples usando AIM para entender o fluxo de animação.
  4. Fique de olho no BaseWatch para saber quando essas features virarem baseline.

Web developer testing object-view-box and light-dark() background-image in Chrome and Firefox Development Concept Image

Considerações Finais

As novidades CSS desta semana mostram que a plataforma está evoluindo rapidamente. Muitas features ainda são experimentais, mas a direção é clara: mais poder para o CSS, menos dependência de JavaScript para layout e interação. Comece a testar essas funcionalidades no Chrome hoje e prepare-se para o suporte ampliado nos próximos meses.

Vale a pena conferir também: "RCCLX da Meta: Revolucionando a Comunicação GPU para Plataformas AMD" – como a Meta está mudando o jogo para computação de alto desempenho.

Este conteúdo foi elaborado com o auxílio de ferramentas de IA, com base em fontes confiáveis, e revisado pela nossa equipe editorial antes da publicação. Não substitui o aconselhamento de um profissional especializado.