标签的属性是否与 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。

他们还认为 widthheight 属性

<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);
}

来源:https://github.com/WebKit/webkit/blob/d055853e59dd6cc4cfd835b143e79258bb13c552/Source/WebCore/html/HTMLOListElement.cpp