Uma nova forma de desenhar separadores no CSS: `CSS Gap Decorations`

• Adicionar separadores entre seções em uma página web é uma técnica de design comum para organizar o conteúdo com clareza e melhorar a legibilidade
• É possível adicionar separadores com técnicas CSS existentes, como border, mas há limitações como mudanças de tamanho e necessidade de código extra
• CSS Gap Decorations resolve esses problemas ao adicionar propriedades como column-rule e row-rule

Técnicas atuais de separadores em CSS e suas limitações

• A propriedade border é uma forma comum de adicionar separadores, mas pode causar os seguintes problemas
  • Adicionar border pode alterar o tamanho do elemento
  • É necessário escrever código extra para o primeiro e o último elemento
  • Quando ocorre quebra de linha em layouts Flexbox, o separador pode não cobrir toda a área
• É possível adicionar separadores usando os pseudo-elementos ::before e ::after, mas há as seguintes limitações
  • É necessário código extra para o primeiro e o último elemento
  • É necessário código complexo com posicionamento absoluto
• É possível simular separadores aplicando uma cor de fundo ao contêiner de grade e definindo cores de fundo nos itens
  • Não é possível ajustar o comprimento do separador
  • Se houver células vazias, a cor de fundo aparece
  • Se os itens não preencherem a célula, a cor de fundo aparece
  • Não funciona se o fundo da página não for de uma cor sólida
• Em layouts de múltiplas colunas, é possível adicionar separadores com a propriedade column-rule, mas existem as seguintes limitações
  • Funciona apenas em layouts de múltiplas colunas
  • Não é possível controlar a direção inline do conteúdo

Proposta de CSS Gap Decorations

• CSS Gap Decorations é uma nova proposta para resolver os problemas acima
• Principais pontos da proposta
  • Expandir a propriedade column-rule para que possa ser aplicada a layouts de grade e Flexbox
  • Introduzir a nova propriedade row-rule
  • Permitir configurações de separadores diferentes para cada parte do contêiner
• É possível alterar a cor do separador com a propriedade row-rule-color

  .alternate-red-blue {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    gap: 10px;  
    row-rule: 1px solid;  
    row-rule-color: red blue;  
  }  
  

• É possível configurar separadores com espessuras e cores diferentes

  .varying-widths {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    row-gap: 10px;  
    row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
  }  
  

• É possível controlar o comportamento dos separadores nas interseções
  • É possível usar as propriedades *-rule-break e *-rule-outset
  • É possível controlar onde o separador começa e termina nas interseções
  • É possível ajustar com precisão o comprimento e o deslocamento do separador

Pedido de feedback sobre a proposta

• A proposta de CSS Gap Decorations será aprimorada com base no feedback dos desenvolvedores
• Mais informações estão disponíveis no explainer oficial
• O feedback pode ser enviado por meio de issues no GitHub
• Feedback sobre o comportamento dos separadores nas interseções é especialmente bem-vindo

[GN⁺]

Comentários no Hacker News

• Queria um novo pseudo-elemento: .container:gap { background-color: red; }

  • Isso permitiria criar fundos mais legais, como linhas pontilhadas ou gradientes
  • Poderia usar { padding: 2px } para definir espaço nas extremidades do separador
  • Poderia usar :gap-horz e :gap-vert para definir separadamente os espaços vertical e horizontal
  • Poderia usar .container:gap:nth-gap(2n) { color: blue; } para obter cores alternadas

• Design por comitê não é o ideal, mas, como não nativo, os nomes de propriedades propostos não transmitem bem o significado

  • Por exemplo, define-se o espaçamento, mas o que se desenha é o separador

• Espero que tenham considerado o caso de uso de painéis ajustáveis

  • Mesmo que a implementação fique totalmente no espaço do usuário, seria útil se separadores estiláveis pudessem receber eventos

• Adicionar bordas muda o tamanho dos itens, e isso pode não ser desejável

  • Esse problema já vem sendo resolvido há mais de 10 anos
  • Imagino que a primeira linha do arquivo CSS de todo mundo seja * { box-sizing: border-box; }
  • Faria mais sentido pensar na borda como algo posicionado dentro da largura

• Interessante. Hoje em dia trabalho principalmente com UI em QML, e isso lida com quase todos os problemas

  • Há alguns meses, implementei linhas de grade em uma visualização de calendário usando o espaço entre itens para deixar o fundo aparecer
  • Deixei a propriedade "spacing" do layout e a GPU fazerem o trabalho

• É uma boa ideia, mas acho que teria sido mais útil uns 10 anos atrás

  • Com CSS moderno, dá para lidar com separadores com um único seletor e uma propriedade
  • Algo como .things .thing:not(:last-child) { border-bottom: 1px solid gray; }
  • O artigo menciona isso, mas parece superestimar a frequência dos casos de borda

• Foi um problema doloroso por muito tempo. É legal ver alguém fazendo algo a respeito

  • Isso é apenas display: grid, e não se aplica a elementos com largura não fixa
  • Em telas pequenas, o | entre links pode aparecer no fim da primeira linha ou no começo da segunda

• Isso me lembra um ditado de designers alemães: "Quando um designer não tem mais ideias, ele adiciona algumas linhas"

  • As pessoas começam a adicionar linhas quando não conseguem mais separar claramente o conteúdo

• Esse problema aparece com frequência, e eu queria algo melhor que <hr/>

  • Não funciona com linhas de tabela nem com múltiplas colunas

• Espero que isso seja aprovado... usar IA para consertar meu conhecimento fraco de flexbox foi uma bênção, mas isso parece uma solução de verdade