摘要：表達(dá)式的計(jì)算值和屬性的值與指定名稱(chēng)的元素有關(guān)根據(jù)下面的規(guī)則在的表達(dá)總是返回一個(gè)字符串。在沒(méi)有命名空間這將只是一個(gè)標(biāo)識(shí)符。

  
本文不是w3c翻譯 保留原文的基礎(chǔ)上 做出自己的理解為主
  
  
參考  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()函數(shù)允許一個(gè)元素或偽元素應(yīng)用組件屬性的值，返回一個(gè)元素上的一個(gè)屬性，如果在一個(gè)偽元素使用，返回偽元素的原始元素的屬性的值。

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

attr()表達(dá)式的計(jì)算值和屬性的值與指定名稱(chēng)的元素有關(guān),根據(jù)下面的規(guī)則

  
In CSS2.1 [CSS21], the ‘a(chǎn)ttr()’ expression always returns a string. In CSS3, the ‘a(chǎn)ttr()’ expression can return many different types. The ‘a(chǎn)ttr()’ expression cannot return everything, for example it cannot docounters, named strings, quotes, or keyword values such as ‘a(chǎn)uto’,‘nowrap’, or ‘baseline’. This is intentional, as the intent of the‘a(chǎn)ttr()’ 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()的表達(dá)總是返回一個(gè)字符串。在CSS3,attr()的表達(dá)式可以返回不同類(lèi)型。attr()的表達(dá)式不能返回所有的東西,例如它不能做柜臺(tái),命名字符串、引號(hào)、或關(guān)鍵字值如‘a(chǎn)uto’,‘nowrap 或者 ‘baseline’.這是有意的,因?yàn)椤產(chǎn)ttr()表達(dá)式的目的并不是讓我們可以描述一個(gè)表象的語(yǔ)言的使用CSS格式化,但是讓CSS考慮語(yǔ)義數(shù)據(jù)。

The new syntax for the ‘a(chǎn)ttr()’ expression is:
attr()的新語(yǔ)法表達(dá)式是：

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 >是一個(gè)CSS限定名稱(chēng)(qname生產(chǎn)[CSS3NAMESPACE])代表一個(gè)屬性的名字。(在沒(méi)有命名空間,這將只是一個(gè)CSS標(biāo)識(shí)符。)

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 >參數(shù)是一個(gè)關(guān)鍵字來(lái)自下面的列表告訴UA如何解釋屬性值,并定義了一個(gè)類(lèi)型attr()表達(dá)式。如果省略,“字符串”是隱含的。

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.

可選參數(shù)表示應(yīng)變值,如果命名屬性用于失蹤,或它的價(jià)值不能被解析到特定類(lèi)型或?qū)傩允菬o(wú)效或超出范圍。如果沒(méi)有,默認(rèn)值為給定的< type-or-unit >(從下面的列表)是隱含的。

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

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() 表達(dá)式僅在下列情況符合

attr()表達(dá)式的類(lèi)型是有效的表達(dá)式類(lèi)型

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

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

< fallback >不包含另一個(gè)attr()表達(dá)式

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

  
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 ‘a(chǎn)uto’, like in ‘width: attr(size px, auto);’.

  
注意,如果attr()表達(dá)式是整個(gè)屬性值, 默認(rèn)值不需要的類(lèi)型。列如, 如果屬性需要的是"px",

  默認(rèn)值可以是"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()與其他值形成完整的屬性值，默認(rèn)值必須匹配attr()的類(lèi)型。 舉例子，‘box-shadow: attr(size px, inset) 5px 10px blue;’ 即使它會(huì)創(chuàng)建一個(gè)有效的聲明 也是不正確的 如果你代替attr()表達(dá)式與px的長(zhǎng)度或“insert”關(guān)鍵字

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.

如果元素上存在指定的屬性 該屬性的值必須根據(jù)< type-or-unit > 參數(shù)。除了類(lèi)為‘string’時(shí) 前部 后部空白會(huì)被省略 結(jié)果值是attr()表達(dá)式的值 如果該值沒(méi)有根據(jù)需要解析, attr()表達(dá)式的值是它的默認(rèn)值

The keywords are:

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

‘string’

屬性值是作為一個(gè)css < string >的內(nèi)容。缺省值是空字符串

  
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)
  
  
注意，屬性?xún)?nèi)的內(nèi)容不會(huì)被css parser重新解析一次

/* 可以使用單引號(hào)或者雙引號(hào) 相同時(shí)須轉(zhuǎn)義 */
"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"

/*  可以用來(lái)轉(zhuǎn)義空白符 */
"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代號(hào)，而且要被正確解讀為一個(gè)< color > 默認(rèn)值是‘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 ‘a(chǎn)bout: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’

屬性值是作為一個(gè)CSS < string >的內(nèi)容 這是解釋為一個(gè)引用字符串url()的符號(hào) 默認(rèn)值是:‘a(chǎn)bout:invalid’,這是一個(gè)URI定義(附錄a)指向一個(gè)不存在的文件和一個(gè)通用的錯(cuò)誤條件 相對(duì)url必須絕對(duì)根據(jù)文檔語(yǔ)言的規(guī)則應(yīng)用到url源自元素 他們不是相對(duì)于樣式表

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’

這個(gè)屬性值必須可以解析為一個(gè) NUMBER css代號(hào)，而且必須可以被解釋為一個(gè)< integer > 默認(rèn)值是0 或?qū)傩云渌淖钚≈等绻? 0 "不是有效的屬性 默認(rèn)值必須在一定范圍內(nèi)

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’

這個(gè)屬性值必須可以解析為一個(gè) NUMBER css代號(hào) 而且必須可以被解釋為一個(gè)< integer > 默認(rèn)值是0 或?qū)傩云渌淖钚≈等绻? 0 "不是有效的屬性 默認(rèn)值必須在一定范圍內(nèi)

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

‘length’ ‘a(chǎn)ngle’ ‘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’ ‘a(chǎn)ngle’ ‘time’ ‘frequency’

屬性值必須解析作為 DIMENSION CSS令牌,并成功地解釋為指定的類(lèi)型 默認(rèn)值為“0”在相對(duì)應(yīng)單位,或?qū)傩云渌淖钚≈?如果“0”不是屬性的有效值 默認(rèn)值必須在有效范圍內(nèi)使用（0到90deg）如果是相對(duì)值 會(huì)被計(jì)算成為絕對(duì)值

‘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.

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

關(guān)于css 長(zhǎng)度單位我會(huì)專(zhuān)門(mén)寫(xiě)一系列的文章 希望第一時(shí)間得到文章的請(qǐng)訂閱我
大漠css單位的一些研究

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

這個(gè)例子展示了使用attr()在XML文件上直觀地說(shuō)明數(shù)據(jù)

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:

下面的例子都是無(wú)效的,將導(dǎo)致一個(gè)作為默認(rèn)值錯(cuò)誤,從而導(dǎo)致相關(guān)聲明這種情況下所有的被忽略

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 ‘a(chǎn)ttr()’ expression cannot currently fall back onto another attribute. Future versions of CSS may extend ‘a(chǎn)ttr()’ in this direction.

attr()的表達(dá)式不能目前回落到另一個(gè)屬性。css的未來(lái)版本可能在這個(gè)方向改進(jìn)attr()

你沒(méi)有看錯(cuò) 你沒(méi)有看錯(cuò) 你沒(méi)有看錯(cuò) 重要的事說(shuō)三遍 到目前為止沒(méi)有一個(gè)瀏覽器實(shí)現(xiàn)該草案返回非字符串類(lèi)型功能 但是 有人做了個(gè)例子 恩 雖然一點(diǎn)用也沒(méi)有
css3 attr codepen.io地址