attr
Description
Syntax
CSS
attr()
Values
<attr()> = attr( <q-name> <attr-type>? , <declaration-value>? )
<q-name>
The name of the attribute being referenced.
<attr-type> = string | url | ident | color | number | percentage | length | angle | time | frequency | flex | <dimension-unit>
string
A string value.
url
A URL value.
ident
A custom identifier value.
color
A color value.
number
A number value.
percentage
A percentage value.
length
A length value.
angle
An angle value.
time
A time value.
frequency
A frequency value.
flex
A flex value.
<dimension-unit>
A literal "%" character or an ident whose value is any of the CSS units for <length>, <angle>, <time>, <frequency>, or <flex> values (such as px or ms).
<declaration-value>
Any sequence of one or more tokens, so long as the sequence does not contain <bad-string-token>, <bad-url-token>, unmatched <)-token>, <]-token>, or <}-token>, or top-level <semicolon-token> tokens or <delim-token> tokens with a value of "!". It represents the entirety of what a valid declaration can have as its value.
Examples
1 · q-name
2 · JS
Links
Functions
- abs
- acos
- asin
- atan
- atan2
- calc
- clamp
- color
- conic-gradient
- cos
- counter
- counters
- hsl
- hsla
- hwb
- lab
- lch
- linear-gradient
- matrix
- matrix3d
- max
- min
- mod
- oklab
- oklch
- param
- perspective
- radial-gradient
- rem
- repeating-conic-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- rgb
- rgba
- rotate
- rotate3d
- rotateX
- rotateY
- rotateZ
- round
- scale
- scale3d
- scaleX
- scaleY
- scaleZ
- sin
- skew
- skewX
- skewY
- src
- tan
- translate
- translate3d
- translateX
- translateY
- translateZ
- url
- var