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地址