Funções de String: attr()

Aprenda a usar valores de atributos HTML no seu CSS.

No mundo do desenvolvimento web, o HTML é responsável pela estrutura e conteúdo, enquanto o CSS cuida da apresentação. Mas e se você quisesse usar um pedaço de informação que está no seu HTML (em um atributo, por exemplo) diretamente no seu CSS para estilizar algo? É aí que entra a função attr().

A função attr() permite que você recupere o valor de um atributo de um elemento HTML e o utilize como valor para uma propriedade CSS. Isso abre portas para algumas técnicas interessantes, especialmente para gerar conteúdo dinâmico ou estilizar elementos com base em seus atributos.

Como funciona attr()

A sintaxe básica da função attr() é:

propriedade: attr(nome-do-atributo <tipo-de-dado> <valor-de-fallback>);
  • nome-do-atributo (obrigatório): O nome do atributo HTML do qual você quer extrair o valor (ex: title, data-info, href).
  • <tipo-de-dado> (opcional): O tipo de dado esperado para o valor do atributo. Isso ajuda o navegador a interpretar corretamente o valor. Os tipos de dados comuns incluem:
    • string (padrão se omitido)
    • color
    • url
    • integer
    • number
    • length (ex: px, em, rem)
    • angle (ex: deg)
    • time (ex: s, ms)
    • resolution (ex: dpi)
  • <valor-de-fallback> (opcional): Um valor alternativo que será usado caso o atributo não seja encontrado no elemento.

Casos de Uso Comuns:

1. Gerando Conteúdo com content (o uso mais comum)

O uso mais clássico e amplamente suportado de attr() é com a propriedade content em pseudo-elementos (::before e ::after). Isso permite exibir o valor de um atributo diretamente na página, sem precisar adicioná-lo ao HTML.

HTML:

<a href="https://www.google.com" target="_blank" data-info="Abrir no Google">Visitar Google</a>
<span data-tooltip="Este é um tooltip!">Passe o mouse</span>

CSS:

a[data-info]::after {
  content: " (" attr(data-info) ")"; /* Exibe o valor de data-info após o link */
  color: gray;
  font-size: 0.8em;
}

span[data-tooltip] {
  position: relative;
  cursor: help;
}

span[data-tooltip]::after {
  content: attr(data-tooltip); /* Exibe o valor de data-tooltip */
  position: absolute;
  bottom: 120%; /* Acima do span */
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0; /* Esconde por padrão */
  transition: opacity 0.3s;
  pointer-events: none; /* Permite clicar no elemento abaixo */
}

span[data-tooltip]:hover::after {
  opacity: 1; /* Mostra o tooltip ao passar o mouse */
}

Explicação: O texto do data-info e do data-tooltip é inserido dinamicamente pelo CSS, sem precisar de JavaScript ou de texto extra no HTML.

2. Estilizando com base em Atributos (suporte limitado para tipos de dados)

Teoricamente, attr() pode ser usado com outras propriedades CSS, como width, height, color, font-size, etc. No entanto, o suporte para usar attr() com tipos de dados que não sejam string (como length, color, number) é muito limitado e inconsistente entre navegadores.

Exemplo (com suporte limitado/experimental):

<div data-largura="200px" data-cor="red"></div>
<div data-largura="300px" data-cor="blue"></div>

CSS (pode não funcionar como esperado em todos os navegadores):

div[data-largura] {
  width: attr(data-largura length); /* Tenta usar o valor como comprimento */
  height: 50px;
  background-color: lightgray;
  margin: 10px;
}

div[data-cor] {
  background-color: attr(data-cor color, black); /* Tenta usar o valor como cor, com fallback */
}

Importante: Para a maioria dos casos práticos de estilização baseada em atributos (que não seja com content), é mais confiável usar seletores de atributo ([data-largura="200px"]) ou Variáveis CSS (Custom Properties) manipuladas por JavaScript, se a dinamicidade for alta.

Vantagens e Limitações:

Vantagens:

  • Conteúdo Dinâmico: Excelente para gerar texto em pseudo-elementos (tooltips, legendas, informações adicionais).
  • Separação de Preocupações: Mantém o conteúdo no HTML e a apresentação no CSS.
  • Sem JavaScript: Permite adicionar conteúdo dinâmico sem a necessidade de scripts.

Limitações:

  • Suporte a Tipos de Dados: O suporte para usar attr() com tipos de dados que não sejam string (para propriedades como width, color, etc.) é muito fraco e não recomendado para produção.
  • Não é para Cálculos: attr() retorna o valor como uma string, então você não pode usá-lo diretamente em cálculos com calc().

Em resumo, a função attr() é uma ferramenta valiosa, principalmente quando usada com a propriedade content para exibir informações de atributos HTML. Para estilização mais complexa baseada em atributos, outras abordagens podem ser mais robustas.