css3 attr 簡單介紹和實例

本文不是w3c翻譯 保留原文的基礎上 作出本身的理解爲主

參考 http://www.w3.org/TR/2015/CR-css-values-3-20150611/#attr-notation

attr函數介紹

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考慮語義數據。

attr函數新語法

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

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

where <attr-name> 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 > 值可能包括逗號 取最後一個值

attr函數 使用注意事項

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()表達式的值是它的默認值

css 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 <integer> is also a <number>
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代碼

<stock>
    <wood length="12"/>
    <wood length="5"/>
    <metal length="19"/>
    <wood length="4"/>
</stock>

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()

attr 新版本兼容性

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