css3 属性の簡単な紹介と例_html/css_WEB-ITnose

この記事は、w3c の翻訳ではなく、原文を保持した上での独自の理解に基づいています

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

attr 関数の概要

attr() 関数は、要素または疑似要素に適用されるプロパティのコンポーネント値として使用できます。使用された場合は、要素の属性の値を返します。擬似要素では、擬似要素の元の要素の属性の値を返します。 attr() 関数を使用すると、要素または擬似要素にコンポーネントの属性の値を適用できます。要素を疑似要素で使用した場合、疑似要素の元の要素の属性の値を返します。

「attr()」式の計算値は、以下に示すルールに従って、要素の指定された名前を持つ属性の値です。

attr()式の計算値と値次の規則に従って、指定された名前の要素に関連する属性の

CSS2.1 [CSS21] では、'attr()' 式は常に文字列を返します。CSS3 では、'attr()' 式は常に文字列を返します。 「attr()」式はすべてを返すことはできません。たとえば、「auto」、「nowrap」、「baseline」などのキーワード値、名前付き文字列を返すことはできません。 「attr()」式の目的は、CSS を使用してプレゼンテーション言語の書式設定を記述できるようにすることではなく、CSS がセマンティック データを考慮できるようにすることであるため、意図的なものです。

CSS2.1[CSS21] では、 attr() の式は常に文字列を返します。 CSS3 では、attr() 式はさまざまな型を返すことができます。 attr() 式はすべてを返すことはできません。たとえば、カウンター、名前付き文字列、引用符、または「auto」、「nowrap」、「baseline」などのキーワード値を返すことはできません。これは「attr()」が目的であるため、これは意図的です。式の改善は、CSS 書式設定を使用して表現言語を記述できるようにするためではなく、CSS が意味論的なデータを考慮できるようにするためです。

attr 関数の新しい構文

'attr()' 式の新しい構文は

:

attr() の新しい構文式は次のとおりです:

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

ここで、 は CSS 修飾されています。 name ([CSS3NAMESPACE] の qname 生成) は属性名を表します (名前空間がない場合、これは単なる CSS 識別子になります)

ここで、< attr-name > は CSS 修飾名です。 Produce [CSS3NAMESPACE]) はプロパティの名前を表します。 (名前空間がなければ、これは単なる CSS 識別子になります。)

オプションの引数は、以下のリストから抽出されたキーワードで、UA に属性値の解釈方法を指示し、 attr() 式の型を定義します。省略した場合は、'string' が暗黙的に指定されます

.

オプション < type-or-unit > 引数は、UA に属性値の解釈方法を指示し、型 attr() 式を定義します。 。省略した場合は、「文字列」が暗黙的に指定されます。

オプションの引数は、名前付き属性が見つからない場合、またはその値が指定された型に解析できない場合、またはプロパティに対して無効または範囲外である場合に使用されるフォールバック値を表します。それが存在しない場合は、デフォルトが使用されます。指定された (以下のリストから) の値が暗黙的に指定されます。

オプションのパラメーターは、指定されたプロパティが見つからない場合、またはその値を特定の型に解析できない場合、またはプロパティが無効または範囲外である場合の値を表します。そうでない場合は、指定された のデフォルト値が暗黙的に設定されます。

'toggle()' とは異なり、'attr()' 値は常に関数表記の最後の引数であるため、最上位のカンマが含まれる場合があることに注意してください。 ' ' attr()' 値には、関数表記の最後の引数であるため、最上位のカンマが含まれる場合があります。 ', 'attr' < 値には、最後の値を取得するためのカンマが含まれる場合があります。

attr 関数の使用に関する注意事項

attr() 式は次の場合にのみ有効です:

attr() 式が配置されている場所で attr() 式の型が有効である、

属性名は名前空間プレフィックスで指定され、プレフィックスは定義されています

• 
  attr() 式が配置されている場所で有効です
• には別の attr() 式が含まれていません
• そして、 attr() 式が プロパティの唯一のコンポーネント値ではない場合、 は attr() の型と一致します
• attr() この式は次の場合にのみ true になります。
• 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 integer0           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地址