摘要：表達式的計算值和屬性的值與指定名稱的元素有關根據下面的規則在的表達總是返回一個字符串。在沒有命名空間這將只是一個標識符。

  
本文不是w3c翻譯 保留原文的基礎上 做出自己的理解為主
  
  
參考  http://www.w3.org/TR/2015/CR-css-values-3-20150611/#attr-notation

The attr() function is allowed as a component value in properties applied to an element or pseudo-element. It returns the value of an attribute on the element. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element"s originating element.

attr()函數允許一個元素或偽元素應用組件屬性的值，返回一個元素上的一個屬性，如果在一個偽元素使用，返回偽元素的原始元素的屬性的值。

The computed value of the ‘attr()’ expression is the value of the attribute with the specified name on the element, according to the rules given below.

attr()表達式的計算值和屬性的值與指定名稱的元素有關,根據下面的規則

  
In CSS2.1 [CSS21], the ‘attr()’ expression always returns a string. In CSS3, the ‘attr()’ expression can return many different types. The ‘attr()’ expression cannot return everything, for example it cannot docounters, named strings, quotes, or keyword values such as ‘auto’,‘nowrap’, or ‘baseline’. This is intentional, as the intent of the‘attr()’ expression is not to make it possible to describe a presentational language"s formatting using CSS, but to enable CSS to take semantic data into account.
  
  
在CSS2.1[CSS21],attr()的表達總是返回一個字符串。在CSS3,attr()的表達式可以返回不同類型。attr()的表達式不能返回所有的東西,例如它不能做柜臺,命名字符串、引號、或關鍵字值如‘auto’,‘nowrap 或者 ‘baseline’.這是有意的,因為‘attr()表達式的目的并不是讓我們可以描述一個表象的語言的使用CSS格式化,但是讓CSS考慮語義數據。

The new syntax for the ‘attr()’ expression is:
attr()的新語法表達式是：

attr(  ? [ ,  ]? )

where is a CSS qualified name (the qname production in [CSS3NAMESPACE]) that represents an attribute name. (In the absence of namespacing, this will just be a CSS identifier.)

其中< attr-name >是一個CSS限定名稱(qname生產[CSS3NAMESPACE])代表一個屬性的名字。(在沒有命名空間,這將只是一個CSS標識符。)

The optional argument is a keyword drawn from the list below that tells the UA how to interpret the attribute value, and defines a type for the attr() expression. If omitted, ‘string’ is implied.

可選< type-or-unit >參數是一個關鍵字來自下面的列表告訴UA如何解釋屬性值,并定義了一個類型attr()表達式。如果省略,“字符串”是隱含的。

The optional argument represents a fallback value, which is used if the named attribute is missing, or its value cannot be parsed into the given type or is invalid/out-of-range for the property. If it"s absent, the default value for the given (from the list below) is implied.

可選參數表示應變值,如果命名屬性用于失蹤,或它的價值不能被解析到特定類型或屬性是無效或超出范圍。如果沒有,默認值為給定的< type-or-unit >(從下面的列表)是隱含的。

  
Note that, unlike ‘toggle()’ s, an ‘attr()’  value may contain top-level commas, as it is always the last argument in the    functional notation.
  
  
注意，不像‘toggle’，’attr‘ < fallback > 值可能包括逗號 取最后一個值

The attr() expression is only valid if:

the attr() expression"s type is valid where the attr() expression is
placed,

if the attribute name is given with a namespace prefix, the prefix is defined

the is valid where the attr() expression is placed,

the does not contain another attr() expression,

and, if the attr() expression is not the sole component value of a
property, the matches the attr()"s type

attr() 表達式僅在下列情況符合

attr()表達式的類型是有效的表達式類型

如果屬性名稱的名稱空間具有前綴,前綴必須已被定義

< fallback >放置在attr()表達式正確的位置

< fallback >不包含另一個attr()表達式

attr()表達式,如果不是屬性的唯一組件值,< fallback >匹配attr()的類型

  
Note that the default value need not be of the type given, if the attr() expression is the entire property value. For instance, if the type required of the attribute by the author is ‘px’, the default could still be ‘auto’, like in ‘width: attr(size px, auto);’.

  
注意,如果attr()表達式是整個屬性值, 默認值不需要的類型。列如, 如果屬性需要的是"px",

  默認值可以是"auto", 如"width: attr(size px, auto);"

If the attr() is used alongside other values to form the full property value, however, the default value must match the attr()"s type. For example, ‘box-shadow: attr(size px, inset) 5px 10px blue;’ is invalid, even though it would create a valid declaration if you substituted the attr() expression with either a ‘px’ length or the ‘inset’ keyword.

如果使用attr()與其他值形成完整的屬性值，默認值必須匹配attr()的類型。 舉例子，‘box-shadow: attr(size px, inset) 5px 10px blue;’ 即使它會創建一個有效的聲明 也是不正確的 如果你代替attr()表達式與px的長度或“insert”關鍵字

If the specified attribute exists on the element, the value of the attribute must be parsed as required by the argument (as defined in the list below). Unless the type is ‘string’, it must first be stripped of leading and trailing white space. The resulting value is the attr() expression"s value. If the value did not parse as required, the attr() expression"s value is its fallback value.

如果元素上存在指定的屬性 該屬性的值必須根據< type-or-unit > 參數。除了類為‘string’時 前部 后部空白會被省略 結果值是attr()表達式的值 如果該值沒有根據需要解析, attr()表達式的值是它的默認值

The keywords are:

‘string’
The attribute value is taken as the contents of a CSS . The default is the empty string.

‘string’

屬性值是作為一個css < string >的內容。缺省值是空字符串

  
Note, this does not reparse the attribute value with the CSS parser. So, for example, an attribute whose value is "33" will produce a string containing those three characters, not a string containing "3" (the character that the escape would evaluate to)
  
  
注意，屬性內的內容不會被css parser重新解析一次

/* 可以使用單引號或者雙引號 相同時須轉義 */
"Awesome string with double quotes"
"Awesome string with " escaped double quotes"
"Awesome string with single quotes"
"Awesome string with " escaped single quotes"

/* A 可以增加一行 */
"Awesome string with Aline break"

/*  可以用來轉義空白符 */
"A really long 
awesome string"
"A really long awesome string"

‘color’
The attribute value must parse as a HASH or IDENT CSS token, and be successfully interpreted as a . The default is ‘currentColor’.

‘color’

屬性值必須解析作為 HASH 或 IDENT css代號，而且要被正確解讀為一個< color > 默認值是‘currentColor’

mdn < color > 文檔地址

‘url’
The attribute value is taken as the contents of a CSS < string >. It is interpreted as a quoted string within the ‘url()’ notation. The default is ‘about:invalid’, which is a URI defined (in Appendix A) to point to a non-existent document with a generic error condition. Relative URLs must be made absolute according to the rules of the document language as applied to URLs originating from the element; they are not relative to the style sheet.

‘url’

屬性值是作為一個CSS < string >的內容 這是解釋為一個引用字符串url()的符號 默認值是:‘about:invalid’,這是一個URI定義(附錄a)指向一個不存在的文件和一個通用的錯誤條件 相對url必須絕對根據文檔語言的規則應用到url源自元素 他們不是相對于樣式表

mdn < url > 文檔地址

‘integer’
The attribute value must parse as a NUMBER CSS token, and be successfully interpreted as an . The default is ‘0’, or else the property"s minimum value if ‘0’ is not valid for the property. The default must also be used if the property in question only accepts integers within a certain range and the attribute is out of range.

‘integer’

這個屬性值必須可以解析為一個 NUMBER css代號，而且必須可以被解釋為一個< integer > 默認值是0 或屬性其他的最小值如果" 0 "不是有效的屬性 默認值必須在一定范圍內

12          Positive integer (without a leading + sign)
+123        Positive integer (with a leading + sign)
-456        Negative integer
0           Zero
+0          Zero, with a leading +
-0          Zero, with a leading - (Though strange, this is an allowed value)

‘number’
The attribute value must parse as a NUMBER CSS token, and is interpreted as an . The default is ‘0’, or else the property"s minimum value if ‘0’ is not valid for the property. The default must also be used if the property in question only accepts integers within a certain range and the attribute is out of range.

‘number’

這個屬性值必須可以解析為一個 NUMBER css代號 而且必須可以被解釋為一個< integer > 默認值是0 或屬性其他的最小值如果" 0 "不是有效的屬性 默認值必須在一定范圍內

12          A raw  is also a 
4.01        正非整 <數字>
-456.8      負非整 <數字>
0.0         零
+0.0        帶正號的零
-0.0        帶符號的零(盡管奇怪，但合法)
.60         點前的數字可以省略
10e3        科學計數法               搞毛啊 誰會用這么大數
-3.4e-2     科學計數法最復雜的情況

‘length’ ‘angle’ ‘time’ ‘frequency’
The attribute value must parse as a DIMENSION CSS token, and be successfully interpreted as the specified type. The default is ‘0’ in the relevant units, or else the property"s minimum value if ‘0’ in the relevant units is not valid for the property. The default must also be used if the property in question only accepts values within a certain range (e.g. positive lengths or angles from 0 to 90deg) and the attribute is out of range (e.g. a negative length or 180deg). If the unit is a relative length, it must be computed to an absolute length.

‘length’ ‘angle’ ‘time’ ‘frequency’

屬性值必須解析作為 DIMENSION CSS令牌,并成功地解釋為指定的類型 默認值為“0”在相對應單位,或屬性其他的最小值,如果“0”不是屬性的有效值 默認值必須在有效范圍內使用（0到90deg）如果是相對值 會被計算成為絕對值

‘em’ ‘ex’ ‘px’ ‘rem’ ‘vw’ ‘vh’ ‘vmin’ ‘vmax’ ‘mm’ ‘cm’ ‘in’ ‘pt’ ‘pc’ ‘deg’ ‘grad’ ‘rad’ ‘ms’ ‘s’ ‘Hz’ ‘kHz’ ‘%’
The attribute value must parse as a NUMBER CSS token, and is interpreted as a dimension with the specified unit. The default is ‘0’ in the relevant units, or else the property"s minimum value if ‘0’ in the relevant units is not valid for the property. The default must also be used if the property in question only accepts values within a certain range (e.g. positive lengths or angles from 0 to 90deg) and the attribute is out of range (e.g. a negative length or 180deg). If the unit is a relative length, it must be computed to an absolute length.

=== 搞毛啊 和上面相同啊 ===

關于css 長度單位我會專門寫一系列的文章 希望第一時間得到文章的請訂閱我
大漠css單位的一些研究

This example shows the use of attr() to visually illustrate data in an XML file:

這個例子展示了使用attr()在XML文件上直觀地說明數據

xml代碼

css代碼

stock::before {
    display: block;
    content: "To scale, the lengths of materials in stock are:";
}
stock > * {
    display: block;
    width: attr(length em); /* default 0 */
    height: 1em;
    border: solid thin;
    margin: 0.5em;
}
wood {
    background: orange url(wood.png);
}
metal {
    background: silver url(metal.png);
}

All of the following examples are invalid and would cause a parse-time error, and thus cause the relevant declaration—in this case all of them—to be ignored:

下面的例子都是無效的,將導致一個作為默認值錯誤,從而導致相關聲明這種情況下所有的被忽略

content: attr(title color); /* "content" doesn"t accept colors */

content: attr(end-of-quote string, inherit) close-quote;
/* the "inherit" value is not allowed there, since the result would be
"inherit close-quote", which is invalid. */

margin: attr(vertical length) attr(horizontal deg);
/* deg units are not valid at that point */

color: attr(color); /* "color" doesn"t accept strings */

The ‘attr()’ expression cannot currently fall back onto another attribute. Future versions of CSS may extend ‘attr()’ in this direction.

attr()的表達式不能目前回落到另一個屬性。css的未來版本可能在這個方向改進attr()

你沒有看錯 你沒有看錯 你沒有看錯 重要的事說三遍 到目前為止沒有一個瀏覽器實現該草案返回非字符串類型功能 但是 有人做了個例子 恩 雖然一點用也沒有
css3 attr codepen.io地址