Publicado em: 11 de junho de 2025
Diga adeus aos hacks de borda e pseudoelementos e dê as boas-vindas às decorações de CSS.
A equipe do Microsoft Edge tem o prazer de anunciar que as decorações de lacunas do CSS, uma nova maneira de estilizar as lacunas entre itens em layouts flex, de grade e de várias colunas, agora estão disponíveis para teste de desenvolvedores no Chrome e no Edge 139.
Teste e compartilhe seu feedback para ajudar a moldar o futuro dessa API.
Links úteis
Problema
O estilo de lacunas em componentes da interface, como calendários, cards ou grids de dados, pode melhorar significativamente a legibilidade e aumentar a estética geral. No entanto, alcançar esse efeito em layouts de grade e flexbox tradicionalmente exigia soluções alternativas desajeitadas com bordas, pseudoelementos ou truques de plano de fundo. Essas soluções alternativas podem ser problemáticas por vários motivos.
- Não intuitivo:eles introduzem dependências estruturais para o estilo visual, o que vai contra os princípios do HTML semântico.
- Não são acessíveis:geralmente exigem elementos DOM extras, que podem interferir em tecnologias adaptativas, como leitores de tela.
- Dificuldade de manutenção:eles exigem uma lógica de layout complicada e dificultam o estilo consistente entre os componentes.
- Ruim para a performance:essas soluções alternativas podem adicionar elementos desnecessários ao DOM, o que pode levar a problemas de desempenho.
Embora a plataforma da Web já ofereça suporte a lacunas de estilo com a propriedade column-rule,
no momento, isso é limitado apenas a layouts
multicoluna. Os desenvolvedores da Web há muito tempo solicitam uma maneira consistente de estilizar lacunas
em outros tipos de layout relevantes, como grade e flexbox.
A solução: decorações de lacunas do CSS
As decorações de lacuna estendem a propriedade column-rule para trabalhar com outros tipos de layout,
como grade e flexbox, e introduzem uma nova propriedade row-rule para
complementá-la. Isso traz consistência e novas possibilidades de personalização para o estilo das lacunas
em diferentes tipos de layout.
As decorações de lacunas do CSS oferecem os seguintes benefícios:
- Sem impacto no layout:as decorações são puramente visuais. Eles não afetam o layout ou o espaçamento, então você pode adotar sem medo de quebrar os designs existentes.
- Sintaxe de repetição:semelhante ao CSS Grid, é possível usar a sintaxe
repeat()para criar padrões de decorações em diferentes partes de um contêiner, permitindo designs ricos e consistentes com um mínimo de CSS. - Marcação mais limpa:não é necessário ter elementos extras ou pseudoelementos, basta estilizar as lacunas diretamente.
- Personalização:novas propriedades CSS, como
*rule-break,*rule-outsetegap-rule-paint-order, permitem mais opções de personalização além do estilo de regra tradicional de largura, estilo e cor.
Com as decorações de lacunas do CSS, ficou mais fácil do que nunca criar layouts de página visualmente distintos e manutenção.
Decorações de lacuna em ação
Para usar as decorações de lacunas do CSS, use um navegador compatível: Edge
ou Chrome, a partir da versão 139, e ative a flag
Enable Experimental Web Platform Features em
edge://flags ou chrome://flags.
Playground interativo para desenvolvedores
Para testar os diferentes tipos de layouts com suporte a decorações de lacunas do CSS e com todas as novas propriedades, teste nosso ambiente interativo para desenvolvedores.
Menu de navegação
A demonstração do menu
hambúrguer
mostra como usar a propriedade column-rule-break: intersection para quebrar as decorações de
espaço de coluna em cada interseção visível com espaços de linha.
A demonstração também usa column-rule-offset: -15px para ajustar o comprimento das
decorações, afastando-as das bordas de cada interseção.
Notebook
Na demonstração do notebook,
row-rule-break: none garante que as decorações de linha não sejam interrompidas em
cruzamentos. Elas são executadas continuamente da esquerda para a direita do contêiner.
Por outro lado, column-rule-break: spanning-item garante que as decorações
de coluna não sejam pintadas atrás de itens que se estendem. Elas começam e param em
itens que se estendem, formando uma interseção T visível.
A propriedade row-rule usa a função repeat() para ter controle preciso
sobre como as decorações de lacunas são aplicadas em diferentes seções do layout.
Isso permite um padrão de estilo em que as regras de linha ficam ocultas no cabeçalho e
no rodapé, mais grossas ao redor do conteúdo principal e mais sutis em outros lugares.
Notícias diárias sobre CSS
A demonstração do CSS News Daily usa um layout no estilo de revista e define decorações de lacunas CSS em vários conjuntos de grade e flexbox.
Observe o jogo Sudoku à direita, que usa uma grade 9x9 e o padrão de repetição para desenhar as linhas finas e grossas entre linhas e colunas:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
Chamada para feedback
Esperamos que você teste as decorações de lacunas do CSS. Acreditamos que ele resolve um problema comum, e adoraríamos receber seu feedback para refinar o recurso de acordo com suas necessidades.
O recurso de decorações de lacunas do CSS ainda está sendo implementado no Chromium. Se você testar, saiba que ainda estamos trabalhando ativamente nele e que você pode encontrar casos em que ele não se comporta como esperado. Algumas das limitações atuais envolvem animar decorações de lacunas e usar um número muito grande de trilhas de grade.
Se você encontrar um bug ou tiver alguma dúvida sobre o recurso, compartilhe seu feedback abrindo um novo bug do Chromium.