标签的属性是否与 CSS 相关?
Are attributes of tags related to CSS at all?
我和一位同事发生了一些争论。比方说,我们有一个有序列表,其属性为 type="a"
:
<ol type="a">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
属性的存在将列表的样式从数字编号列表更改为字母编号列表。我的同事想知道这是否构成 CSS.
我争辩说显然不是,因为type="a"
是一个标签的属性,而CSS是一种风格sheet语言。
但是,我的同事认为,只要添加或更改属性会改变元素的外观,就应该构成为添加或更改CSS。
他们还认为 width
和 height
属性
<img src="..." width="100" height="100">
也应该构成CSS。
他们通过解释对于每个元素,网络浏览器都有自己的样式来扩展他们的论点sheet例如
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
添加 type="a"
有效地将 ol { list-style-type: lower-alpha; }
添加到 Web 浏览器的样式 sheet。因此,由于添加该属性会改变 Web 浏览器的 CSS,因此该属性也应构成为 CSS。
然而,这个论点对我来说仍然没有真正的意义,但我想不出任何方法来解释为什么这是错误的。
所以我的问题是:谁是正确的? CSS和属性是完全不同的概念吗?或者我的同事是否正确,type="a"
等属性应该构成 CSS(以及为什么)?
唯一可用于渲染和修改的真实事物是 DOM,它不是 HTML 或 CSS。它是 HTML、CSS、JavaScript 和浏览器提供的默认值的计算表示。
当您设置属性时,DOM 会被修改以修改其样式表示。 WebKit 使查看和理解这一点变得非常容易。
使用属性时 - 这是 WebKit 中的做法:
void HTMLOListElement::collectStyleForPresentationAttribute(const QualifiedName& name, const AtomicString& value, MutableStyleProperties& style)
{
if (name == typeAttr) {
if (value == "a")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueLowerAlpha);
else if (value == "A")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueUpperAlpha);
else if (value == "i")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueLowerRoman);
else if (value == "I")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueUpperRoman);
else if (value == "1")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueDecimal);
} else
HTMLElement::collectStyleForPresentationAttribute(name, value, style);
}
我和一位同事发生了一些争论。比方说,我们有一个有序列表,其属性为 type="a"
:
<ol type="a">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
属性的存在将列表的样式从数字编号列表更改为字母编号列表。我的同事想知道这是否构成 CSS.
我争辩说显然不是,因为type="a"
是一个标签的属性,而CSS是一种风格sheet语言。
但是,我的同事认为,只要添加或更改属性会改变元素的外观,就应该构成为添加或更改CSS。
他们还认为 width
和 height
属性
<img src="..." width="100" height="100">
也应该构成CSS。
他们通过解释对于每个元素,网络浏览器都有自己的样式来扩展他们的论点sheet例如
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
添加 type="a"
有效地将 ol { list-style-type: lower-alpha; }
添加到 Web 浏览器的样式 sheet。因此,由于添加该属性会改变 Web 浏览器的 CSS,因此该属性也应构成为 CSS。
然而,这个论点对我来说仍然没有真正的意义,但我想不出任何方法来解释为什么这是错误的。
所以我的问题是:谁是正确的? CSS和属性是完全不同的概念吗?或者我的同事是否正确,type="a"
等属性应该构成 CSS(以及为什么)?
唯一可用于渲染和修改的真实事物是 DOM,它不是 HTML 或 CSS。它是 HTML、CSS、JavaScript 和浏览器提供的默认值的计算表示。
当您设置属性时,DOM 会被修改以修改其样式表示。 WebKit 使查看和理解这一点变得非常容易。
使用属性时 - 这是 WebKit 中的做法:
void HTMLOListElement::collectStyleForPresentationAttribute(const QualifiedName& name, const AtomicString& value, MutableStyleProperties& style)
{
if (name == typeAttr) {
if (value == "a")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueLowerAlpha);
else if (value == "A")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueUpperAlpha);
else if (value == "i")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueLowerRoman);
else if (value == "I")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueUpperRoman);
else if (value == "1")
addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueDecimal);
} else
HTMLElement::collectStyleForPresentationAttribute(name, value, style);
}