Skip to main content

ATTR | CSS

  • ATTR | CSS

🧠 Introdução​

Tradicionalmente, a função attr() no CSS era limitada ao uso com a propriedade content, como em:

.title::before {
  content: attr(data-title);
}

Isso restringia seu uso a inserir texto baseado em atributos HTML. No entanto, com as atualizações recentes, é possível utilizar attr() em outras propriedades CSS, como color, width, grid-column, entre outras, desde que especificado o tipo de dado.

🚀 A nova sintaxe de attr()​

A nova sintaxe permite definir o tipo de dado que o valor do atributo representa:

color: attr(data-color type(<color>));

Além disso, é possível fornecer valores padrão para casos em que o atributo não esteja presente:

grid-column-start: attr(data-col-start type(<number>), 1);

Os tipos de dados suportados incluem:

  • <color>
  • <number>
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <image>
  • <string>
  • <custom-ident>
  • entre outros.

🧪 Detecção de suporte​

Para verificar se o navegador suporta a nova funcionalidade de attr(), pode-se utilizar a regra @supports:

@supports (x: attr(x type(*))) {
  /* Código CSS que utiliza attr() moderno */
}

Em pré-processadores como Sass, é necessário escapar a sintaxe:

@supports (#{"x: attr(x type(*))"}) {
  /* Código CSS que utiliza attr() moderno */
}

💡 Casos de uso práticos​

1. Definir colunas em grid​

Utilize atributos data-col-start e data-col-end para controlar a posição de elementos em um grid:

<div data-col-start="1" data-col-end="3">Conteúdo</div>
div {
  grid-column-start: attr(data-col-start type(<number>), 1);
  grid-column-end: attr(data-col-end type(<number>), 2);
}

2. Ajustar altura de textarea com base em rows​

textarea {
  min-height: calc(attr(rows type(<number>)) * 1em);
}

3. Controlar atraso em animações​

.element {
  animation-delay: attr(data-delay type(<time>), 0s);
}

4. Aplicar cores dinâmicas​

.element {
  background-color: attr(data-bg type(<color>), #fff);
}

5. Definir áreas de grid​

.element {
  grid-area: attr(data-area type(<custom-ident>), auto);
}

🧰 Mini framework CSS com attr()​

A funcionalidade moderna de attr() permite a criação de mini frameworks CSS, onde estilos podem ser controlados diretamente via atributos HTML, reduzindo a necessidade de classes adicionais e tornando o código mais declarativo.

✅ Vantagens sobre estilos inline​

  • Separação de preocupações: Mantém o estilo no CSS e o conteúdo no HTML.
  • Previsibilidade: Facilita a manutenção e evita conflitos de estilos.
  • Reutilização: Permite aplicar estilos consistentes em múltiplos elementos com diferentes valores de atributos.

⚠️ Suporte atual​

Até o momento, a funcionalidade moderna de attr() está disponível apenas no Chrome. Espera-se que outros navegadores adotem essa funcionalidade em breve.

🔗 Recursos adicionais​