# Typed attr() (attr(data-x type(<length>)))

Status: Chrome 133; Firefox 152 Nightly (flag), Safari Technology Preview 249. Área de foco do Interop 2026. Não é Baseline.  
Fonte: https://github.com/web-platform-tests/interop/blob/main/2026/README.md and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/152  
Página: https://designforai.dev/pt/css/typed-attr

`attr()` agora funciona em qualquer propriedade e pode interpretar o atributo como um tipo (`type(<length>)`, `type(<color>)`, `px`), então dados do markup como `data-cols="3"` guiam o layout sem estilos inline.

## HTML

```html
<div class="fx-062" data-cols="3" data-accent="#ec4899"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
```

## CSS

```css
.fx-062 {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(attr(data-cols type(<integer>),2),1fr);
  font-family: system-ui
}
.fx-062 span {
  padding: 12px;
  text-align: center;
  border-radius: 6px;
  background: attr(data-accent type(<color>),#e5e7eb);
  color: #fff
}
```

Fallback: O segundo argumento de attr() é o valor de fallback usado por navegadores sem suporte (eles tratam o attr() inteiro como inválido fora de `content`, então defina também uma declaração simples antes).

## Prompt

Alimente valores de layout a partir de atributos data com `attr()` tipado: `repeat(attr(data-cols type(<integer>), 2), 1fr)`, `attr(data-accent type(<color>), gray)`. Sempre forneça o argumento de fallback e uma declaração simples antes, porque só o Chromium entrega isso no stable em 2026-09.