attr
====

A função **`attr()`** do CSS é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em pseudo-elementos, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.


```css
/\* Uso Simples \*/
attr(data-count);
attr(title);

/\* Com o tipo \*/
attr(src url);
attr(data-count number);
attr(data-width px);

/\* Com fallback \*/
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');
```


**Nota:** A função `attr()` pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam `content` é experimental.

Sintaxe
-------

### Valores

`nome-do-atributo`

É o nome do atributo HTML do elemento referenciado no CSS.

`<tipo-ou-unidade>` 
Experimental

É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de `<tipo-ou-unidade>` como um valor para determinado atributo for inválido, a expressão `attr()` será inválida também. Se omitida, o padrão será `string`. A lista de valores válidos é:

| Palavra-chave | Tipo Associado | Comentário | Valor Padrão |
| --- | --- | --- | --- |
| `string` | `<string>` (en-US) | O valor do atributo é tratado como um CSS `<string>` (en-US). NÃO será reparado, e em particular os caracteres usados . | An empty string. |
| `cor` 
Experimental
 | `<color>` | O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor `<string>` (en-US) CSS válido. Os espaços do lead e trail são retirados. | corAtual |
| `url` 
Experimental
 | `<url>()` (en-US) | The attribute value is parsed as a string that is used inside a CSS `url()`function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped. | The url `about:invalid` that points to a non-existent document with a generic error condition. |
| `integer` 
Experimental
 | `<integer>` (en-US) | The attribute value is parsed as a CSS `<integer>` (en-US). If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `number` 
Experimental
 | `<number>` | The attribute value is parsed as a CSS `<number>`. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `length` 
Experimental
 | `<length>` (en-US) | The attribute value is parsed as a CSS `<length>` (en-US) dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` 
Experimental
 | `<length>` (en-US) | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<length>` (en-US) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `angle` 
Experimental
 | `<angle>` (en-US) | The attribute value is parsed as a CSS `<angle>` (en-US) dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. |
| `deg`, `grad`, `rad` 
Experimental
 | `<angle>` (en-US) | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as an `<angle>` (en-US) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. |
| `time` 
Experimental
 | `<time>` | The attribute value is parsed as a CSS `<time>` dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. |
| `s`, `ms` 
Experimental
 | `<time>` | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as an`<time>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. |
| `frequency` 
Experimental
 | `<frequency>` (en-US) | The attribute value is parsed as a CSS `<frequency>` (en-US) dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. |
| `Hz`, `kHz` 
Experimental
 | `<frequency>` (en-US) | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<frequency>` (en-US) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. |
| `%` 
Experimental
 | `<percentage>` (en-US) | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<percentage>` (en-US). If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0%`, or, if `0%` is not a valid value for the property, the property's minimum value. |

`<fallback>` 
Experimental

The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where `attr()` is used, even if it is not used, and must not contain another `attr()` expression. If `attr()` is not the sole component value of a property, its `<fallback>` value must be of the type defined by `<type-or-unit>`. If not set, CSS will use the default value defined for each `<type-or-unit>`.

### Sintaxe formal
```

<attr()> =   
  attr( <attr-name> <attr-type>? (en-US) , <declaration-value>? (en-US) )    
  
<attr-name> =   
  [ (en-US) <ident-token> '|' ] (en-US)? (en-US) <ident-token>    
  
<attr-type> =   
  string            | (en-US)  
  url               | (en-US)  
  ident             | (en-US)  
  color             | (en-US)  
  number            | (en-US)  
  percentage        | (en-US)  
  length            | (en-US)  
  angle             | (en-US)  
  time              | (en-US)  
  frequency         | (en-US)  
  flex              | (en-US)  
  <dimension-unit>    
  
```

Exemplos
--------

### HTML


```html
<p data-foo="hello">world</p>
```

### CSS


```css
p::before {
  content: attr(data-foo) " ";
}
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 5 # attr-notation |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.