Use attr() tipado em CSS quando um atributo HTML numérico já descreve uma variação visual que o componente precisa renderizar. Um cartão com duração de atividade, por exemplo, pode usar a quantidade de minutos para desenhar uma faixa proporcional. Preserve a duração como texto no HTML e use a faixa como apoio visual. A Mozilla inclui o attr() moderno no Interop 2026, com foco no uso de atributos como valores em propriedades CSS além do conteúdo gerado.

Escolha um dado que mereça expressão visual

Imagine um programa de oficinas com cartões de dez, trinta e sessenta minutos. Os visitantes querem combinar atividades que caibam no tempo disponível. A duração visível permite comparar valores exatos. Uma faixa discreta ajuda a identificar atividades mais curtas quando vários cartões estão lado a lado. Defina o que o comprimento comunica. Se a faixa estiver ao lado de um botão de inscrição e lembrar um progresso de carregamento, mude a posição e associe-a visualmente ao rótulo de duração.

Reserve o tratamento proporcional para valores com unidade comum. Se parte dos cartões exibe “horário livre” e parte exibe “45 min”, o horário livre precisa de uma apresentação própria. O mesmo vale para intervalos estimados. Se a equipe quer mostrar que uma visita leva de vinte a trinta minutos, escolha se o gráfico representa um limite ou se basta o rótulo. Faça essa escolha no conteúdo e preserve a precisão na interface.

Use a mesma origem para o atributo e o rótulo

No exemplo, o HTML pode guardar data-minutos com o valor 30 e exibir “30 min” na área visível do cartão. Gere ambos a partir do mesmo campo do componente. O rótulo pode receber a formatação local, enquanto o atributo guarda o número na forma esperada pelo CSS. Essa decisão evita que a ficha informe trinta minutos e mostre uma faixa de sessenta. Para valores decimais, o texto pode usar vírgula conforme o idioma e o atributo deve usar a representação numérica compatível com a sintaxe do CSS.

Documente quem define o máximo da escala. Se dois conjuntos de cartões compartilham a mesma referência de sessenta minutos, uma faixa pela metade tem o mesmo significado nos dois. Se cada grupo usa um máximo diferente, o mesmo comprimento passa a ter sentidos diferentes. Um rótulo ao lado de cada faixa ainda permite comparar os valores, mas a comparação visual fica dependente do grupo. Para atividades em uma mesma programação, adote uma referência comum ou use a faixa apenas onde a escala puder ser compartilhada.

Declare o tipo e trate os limites separadamente

A função attr() pode interpretar o conteúdo de um atributo como número usando type com a sintaxe number entre sinais angulares. A referência de attr() da MDN mostra como indicar tipo, unidade e valor de reserva. Para uma faixa que representa minutos numa escala de zero a sessenta, calcule a proporção e limite o resultado ao intervalo que o cartão comporta. Uma entrada numérica negativa pode ser aceita pela função, mas continua inválida como duração para o componente.

Separe ausência de valor de duração zero. Se o campo estiver vazio, a equipe pode querer mostrar “duração a confirmar” e esconder a faixa. O CSS consegue aplicar um valor de reserva em caso de ausência ou falha de interpretação, mas o HTML precisa refletir a decisão editorial. Teste três entradas distintas: valor válido, atributo ausente e texto inesperado. Inclua também um número acima da escala. Se valores superiores forem comuns, reveja a escala em vez de deixar vários cartões diferentes com o mesmo comprimento aparente.

Evite que o estilo altere a hierarquia do cartão

A faixa deve ocupar um espaço previsível, mesmo quando o número é pequeno. Reserve o trilho com a mesma largura e ajuste apenas a extensão do preenchimento. Isso mantém alinhados os rótulos e títulos dos cartões. Em uma grade, confronte o comportamento com o padrão de cards responsivos usando container queries. Um cartão que vai de três para uma coluna pode ganhar largura absoluta sem mudar a proporção que a faixa representa.

Em uma lista de atividades, coloque os minutos junto de uma indicação textual clara e use contraste suficiente para que o preenchimento seja perceptível. O artigo sobre gráficos acessíveis sem depender da cor mostra como combinar cor, rótulo e forma. Se a faixa apenas repete a duração já escrita, mantenha-a decorativa para evitar leitura duplicada. Se existe uma ação no cartão, teste se sua área e indicação de foco continuam distinguíveis do gráfico.

Verifique o suporte no mesmo elemento que lê o atributo

Implemente primeiro a apresentação básica com rótulo e espaçamento estáveis. Use uma consulta de suporte para a sintaxe tipada antes de habilitar a faixa. Se o valor for armazenado em uma propriedade personalizada, declare-a no elemento que de fato possui o atributo e use a herança conscientemente. Uma variável calculada no cartão pai não pode adivinhar um atributo que existe apenas num filho. Esse detalhe importa quando a faixa vira um elemento separado por causa de uma mudança no desenho.

Faça uma inspeção no navegador e altere o atributo de um cartão de trinta para sessenta minutos. A faixa deve mudar como previsto. Em seguida, mude a atividade usando o mecanismo normal do componente e verifique se rótulo e atributo foram atualizados juntos. O primeiro teste isola a regra CSS. O segundo verifica o fluxo que entrega o conteúdo à interface. Repita sem a regra avançada. A duração deve continuar disponível em texto, inclusive em um cartão estreito.

Decida quando usar uma classe ou uma propriedade personalizada

Se o componente só tem três tamanhos fixos de faixa, uma classe por variante pode ser mais simples de revisar. Se a proporção já chega como valor de estilo tratado pelo componente, uma propriedade personalizada pode evitar repetir a conversão. Use attr() quando a fonte natural do valor é o atributo no mesmo elemento e há benefício em manter a regra de apresentação no CSS. Registre a unidade, o intervalo esperado e o comportamento para dados ausentes junto do componente.

Teste a comparação com uma linha de três cartões e depois com cartões empilhados. Peça a alguém para identificar a atividade que cabe em quinze minutos. Se a pessoa depender de estimar visualmente o comprimento da faixa, torne o rótulo mais evidente. Confira também uma descrição que quebre em três linhas. O valor proporcional deve continuar na mesma relação visual com a unidade e a faixa deve permanecer dentro do espaço previsto.

Para fechar a revisão, aumente o texto e alterne o tema da interface. Em algumas combinações, o trilho e o preenchimento podem se tornar quase indistinguíveis. Ajuste o contraste com os tokens do componente e confirme se os minutos continuam fáceis de encontrar em todos os cartões. A faixa complementa o número quando acelera a comparação e conserva o mesmo significado nos tamanhos de tela que o projeto atende.

Considere ainda o estado de carregamento dos cartões. Se os minutos chegam depois do título, deixe a faixa ausente até que exista um valor e mantenha um espaço que não empurre o botão para baixo quando os dados chegarem. Em uma lista filtrável, alterne entre atividades de durações diferentes e confira se o componente substitui o valor antigo ao reaproveitar o cartão. Compare um caso carregado de imediato com outro preenchido depois. Ambos devem terminar com o mesmo comprimento e o mesmo texto. Quando a duração for corrigida, verifique também o filtro que usa esse dado, pois uma faixa atualizada não compensa uma atividade que continua aparecendo na seleção errada. Repita em alto contraste.