Attr() - Function CSS

attr()

Summary of characteristics of the attr() function

Quick description
Returns the value of an attribute (standard or custom) from HTML or XML code.
Status
Standard
Percentages
Not applicable.
W3C Module
CSS Values and Units Module
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of attr().

Schéma syntaxique de la fonction CSS attr()Syntaxe de la fonction attr() utilisable en CSS pour récupérer la valeur d'un attribut. a a type(t) type(t) u u , d , dattr()attr()
Syntax diagram of the attr() function
The links in the diagram provide access to more details

Definition of terms used on the diagram:

  • a is the name of an attribute in the HTML or XML.
  • t is the type of expected data.
  • u is a CSS unit.
  • d is a fallback value.

Description of the attr() function.

⚠
This function is well supported when used with the content property. The operation is more hazardous with other properties. Make sure it is working properly before using it.

The attr() function returns the value of one of the element's attributes. The requested attribute must be specified in the HTML: attr() retrieves the values as they are written in HTML (or XML) and not the values calculated by the browser or defined in CSS.

Note: the specified attribute is not necessarily a standard HTML attribute, it can also be a custom attribute.

Example. Suppose the following HTML code:

a href="/promos/index.php" title="Promotions" /

It is then possible to retrieve the value of the title attribute with the content property, and display it before (or after) the link:

a::before {content: attr(title); }

It is not possible to retrieve the attribute of a given element and apply it to another element. But we can apply to a pseudo-element the value of an attribute of the main element.

The attr() function can be used with:

  • content : Add content to the document, mainly with the ::before and ::after selectors.

Normally the value returned by attr() should be able to be used with any property, but, at the moment (2024), this possibility is only supported by Chrome  .

Syntax of the attr() function.

  • content: attr(width); a

    The simplest syntax: you just specify the name of the attribute whose value you want to retrieve, without apostrophes or quotation marks.

  • content: attr(width type(length)); ⚠ a t

    Here we specify the name of the attribute (a) and the type (t) of the data to be retrieved. If the value found cannot be converted to the requested type, attr() returns a fallback value.
    Similarly, if the value found is not compatible with the property that uses attr(), the default value is taken into account.

    The possible types are as follows. Without any indication, the default type is string.

    angle
    The value read must be convertible to an angular value: a number followed by one of the angular units (see CSS angle units). The fallback value is 0.

    color
    The value of the attribute must be similar to a color. The fallback value is currentColor.

    custom-ident
    The value can be anything that matches an identifier.

    frequency
    The read value must be convertible to a frequency: it must be a number followed by a frequency unit (CSS units of frequency). The fallback value is 0.

    image
    The value of the attribute must be similar to an image. The fallback value is an empty image.

    integer
    The value must be convertible to an integer: the presence of a decimal separator is an error. The fallback value is 0.

    length
    The read value must be convertible to a dimension. The unit must be specified (see CSS dimension units). The fallback value is 0.

    number
    The value must be convertible to a number. It must not have unity. The fallback value is 0.

    percentage
    The value must be convertible to a decimal number followed by the % character. The fallback value is 0.

    resolution
    The value must be convertible to a resolution. It should be followed by one of the CSS units of resolution. The default value is 0.

    string
    No constraint on the value of the attribute. The fallback value is an empty string.

    time
    The read value must be convertible to a duration: a number followed by one of the CSS units of duration. The fallback value is 0.

    *
    To accept all types, use the star (*). It's different from string in that the value is still parsed.

    url (adresse) ✗
    This option is no longer accepted. It had to be a string with the correct syntax of a url. The default value is about:invalid, which is an address recognized by all browsers as invalid.

    Several types can be indicated, separated by a vertical bar |.

  • content: attr(width px); ⚠ a u

    In this syntax, the name of the attribute and a unit that will be added to the retrieved value are specified. All units are accepted (dimensions, duration, etc.). The unit implicitly defines the type of data. For example, the deg unit can only match the type angle, just as px can only correspond to one dimension.

  • content: attr(width type(length), 200px); ⚠ a t d

    The parameter a is the name of the attribute whose value we want to retrieve.
    The second t parameter is the type to which this value should be converted.
    Finally, the third d parameter (preceded by a comma) is the fallback value, to be returned if the The requested value is not present in the HTML, or if the value found is not compatible with the specified type, or if the value obtained is not within the range of acceptable values for the property.

Simulator.

The simulator uses two div tags, the HTML code of which is given below. We can see that each of the tags contains the standard title attribute and a custom attribute named data-price. On the other hand, the custom data-stock attribute is only present on the first element.

<div title="Souris optique" data-price="11.50€" data-stock="5">Optical mouse</div> <div title="clavier sans fil" data-price="23.50">Wireless keyboard</div>
content :
Optical mouse  
Wireless keyboard  

Browsers compatibility.

Current browsers correctly handle the attr() function when used with the content and with the simplest syntax (single parameter). But its use with other properties is not yet possible (2024), although this possibility is planned in the W3C specification. The complete syntax of attr(), with two or three parameters, is still very poorly recognized.

Column 1
Support for the general syntax of attr().
Column 2
Ability to use attr() function with any property.
Column 3
Accepts the syntax of attr() with a parameter indicating the type of value or a unit.
Column 4
Ability to specify a default value in the syntax of the attr() function.
1
attr()
function
2
Any
properties
3
Type or
unit
4
Fallback
Estimated overall support.
97%
66%
66%
68%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse
Caniuse

attr() function historic.

See also...

The W3C specification named CSS Values and Units Module includes many functions that can be used in CSS.

Functions:

abs()
Calculates the absolute value of a number.
acos()
Calculates the angle at which the cosine is equal to the specified value.
asin()
Calculates the angle at which the sine is equal to the specified value.
atan()
Calculates the angle whose tangent is equal to the specified value.
atan2()
Calculates the angle between the x-axis and the line connecting the origin point to the specified point.
calc()
Langue française
Performs a calculation. Can be used in place of a value for a property.
clamp()
Langue française
Calculates a value between two extreme values.
cos()
Calculate the cosine of an angle.
exp()
Calculates the exponential of a number.
hypot()
Calculates the square root of a sum of squares of numbers.
log()
Calculates the logarithm of a number.
max()
Langue française
Determines the largest value among a series of values.
min()
Langue française
Determines the smallest value among a series of values.
mod()
Langue française
Calculates the remainder of the integer division between two numbers.
pow()
Calculates a power boost.
rem()
Langue française
Calculates the remainder of the integer division between two numbers.
round()
Langue française
Calculates the rounding of a number.
sign()
Determines the sign of a number.
sin()
Calculate the sine of an angle.
sqrt()
Calculates the square root of a number.
⚠
src()
Langue française
Specifies the address of a resource such as an image for example. Synonym of the url() function.
tan()
Calculates the tangent of an angle.
url()
Langue française
Specifies the address of a resource such as an image for example.

Values:

e
Langue française
The predefined value of the number e (the basis of natural logarithms), which is approximately 2.7182818284590452354.
infinity
Langue française
An error value indicating that the result of a calculation is an infinite value.
⚠
NaN
Langue française
An error value indicating that a calculation could not be performed because of a non-numeric parameter.
pi
Langue française
The preset value of the number pi (about 3.1415926535897932).