WebKit Inside: CSS 样式表解码字符集

webkit,inside,css,样式表,解码,字符集 · 浏览次数 : 5

小编点评

**外部样式表** 1. 通过 `` 标签引入 2. 当 WebKit 解析到 `` 标签时,构造 `CachedCSSStyleSheet` 对象。 3. `CachedCSSStyleSheet` 中包含 `CachedResourceRequest` 和 `TextResourceDecoder` 对象。 **内部样式表** 1. 与行内样式表一起包含在 HTML 文件中。 2. 解码字符集使用文档的字符集。 **行内样式** 1. 与行内样式表一起包含在 HTML 文件中。 2. 解码字符集使用 HTML 字符集。 **字符集优先级** 1. **@charset at-rule:** 优先使用 `@charset` 属性指定的字符集。 2. **link 标签 charset:** 优先使用 `` 标签指定的字符集。 3. **文档字符集:** 否则,使用文档的字符集。 **代码示例** 外部样式表: ```css @media screen and (max-width: 768px) { body { font-size: 16px; } } ``` 内部样式表: ```html ``` 行内样式: ```html

这是一个段落。

```

正文

CSS 样式表引入有3种方式: 外部样式表、内部样式表、行内样式,不同的引入方式,解码样式表的字符集原理不一样。

外部样式表

外部样式表由 link 标签引入,当 WebKit 解析到 link 标签时就会构造 CachedCSSStyleSheet 对象。这个对象持有 CachedResourceRequest 对象和 TextResourceDecoder 对象。CachedResourceRequest 对象负责发送请求,TextResourceDecoder 对象负责对下载回来的 CSS 数据进行解码。TextResourceDecoder 对象里面的 m_encoding 属性,就是存储着解码 CSS 数据使用的字符编码信息。相关类图如下所示:

 在创建 TextResourceDecoder 对象时,会传入 CachedResourceRequest 使用的字符集信息,代码如下所示:

CachedCSSStyleSheet::CachedCSSStyleSheet(CachedResourceRequest&& request, PAL::SessionID sessionID, const CookieJar* cookieJar)
    : CachedResource(WTFMove(request), Type::CSSStyleSheet, sessionID, cookieJar)
    // 1. 创建 TextResourceDecoder,传入 CachedResourceRqeuest 字符集
    , m_decoder(TextResourceDecoder::create(cssContentTypeAtom(), request.charset()))
{
}

在上面代码注释 1 处,就是 CachedCSSStyleSheet 创建 TextResourceDecoder 对象,并且传入了 CachedResourceReqeust 的字符集用来初始化 TextResourceDecoder 内部的 m_encoding 属性,代码如下:

inline TextResourceDecoder::TextResourceDecoder(const String& mimeType, const PAL::TextEncoding& specifiedDefaultEncoding, bool usesEncodingDetector)
    : m_contentType(determineContentType(mimeType))
    // 1. specifiedDefaultEncoding 就是传入的 CachedResourceRequest 的字符集
    // m_contentType 此时是 CSS
    , m_encoding(defaultEncoding(m_contentType, specifiedDefaultEncoding))
    , m_usesEncodingDetector(usesEncodingDetector)
{
}

在上面代码注释 1 处初始化 TextResourceDecoder 的 m_encoding 属性,m_contentType 此时的值是 CSS,specifiedDefaultEncoding 就是 CachedResourceRequest 的字符集。但是在初始化 m_encoding 时,并不是直接将 m_encoding 直接赋值为 specifiedDefaultEncoding,而是调用了 TextResourceDecoder::defaultEncoding 函数,相关代码如下:

const PAL::TextEncoding& TextResourceDecoder::defaultEncoding(ContentType contentType, const PAL::TextEncoding& specifiedDefaultEncoding)
{
    // Despite 8.5 "Text/xml with Omitted Charset" of RFC 3023, we assume UTF-8 instead of US-ASCII 
    // for text/xml. This matches Firefox.
    // 1. 如果解码的是 XML ,那么无论传入的 specifiedDefaultEncoding 是什么值,都使用 UTF-8 作为默认解码字符集
    if (contentType == XML)
        return PAL::UTF8Encoding();
    // 2. 对于其他资源类型,如果 specifiedDefaultEncoding 使用的字符集名为 null,就默认使用 Latin-1 字符集,
    // 也就是 ISO-8859-1
    if (!specifiedDefaultEncoding.isValid())
        return PAL::Latin1Encoding();

    // 3. 将 specifiedDefaultEncoding 作为 TextResourceDecoder 的默认解码字符集
    return specifiedDefaultEncoding;
}

上面代码注释 1 处可以看出,TextResourceDecoder 不仅用来解码 CSS,还可以用来解码其他资源类型。如果解码的资源类型是 XML,那么默认的解码字符集就是 UTF-8。

从注释 2 处可以看到,如果不是 XML 资源类型,并且 specifiedDefaultEncoding 不合法,也就是 specifiedDefaultEncoding 内部代码字符集名的 m_name 属性为 null,那么就使用 Latin-1(也就是 ISO-8859-1) 作为 TextResourceDecoder 的默认解码字符集。

从注释 3 可以看到,对于非 XML 资源类型,specifiedDefaultEncoding 就会作为 TextResourceDecoder 的默认解码字符集。也就是会说,解码 CSS 的默认字符集和 CacheResourceRequest 使用同一个字符集。

 

那么,CacheResourceRequest 的字符集是如何来的呢?相关代码如下:

void HTMLLinkElement::process()
{   
    ...
    if (m_disabledState != Disabled && treatAsStyleSheet && document().frame() && m_url.isValid()) {
        // 1. 解析 link 标签的 charset 属性值
        String charset = attributeWithoutSynchronization(charsetAttr);
        if (!PAL::TextEncoding { charset }.isValid())
            // 2. 获取文档 Document 使用的字符集
            charset = document().charset();
        ...
        // 3. 设置 CachedResourceRequest 的字符集
        request.setCharset(WTFMove(charset));
        ...
        return;
    }
    ...
}

上面代码注释 1 处首先解析 link 标签的 charset 属性,如果解析到就使用这个字符集作为 CachedResourceRequest 的字符集,如 注释 3所示。如果解析不到,就使用文档 Document 的字符集作为 CachedResourceReqeust 的字符集,如注释 2 所示。文档 Document 的字符集由 <meta> 标签指定,如果没有 <meta> 标签,那么文档 Document 默认使用 Latin-1 字符集(ISO-8859-1)。

 

但是,解码 CSS 使用的字符集此时还并没有完全确定,因为 CSS 样式表本身支持 @charset at-rule,它可以指定解码 CSS 样式表需要使用什么字符集。因此,当从网络上下载到 CSS 样式表之后,还需要检测 CSS 样式表里面是否有 @charset at-rule,相关代码如下:

String TextResourceDecoder::decode(const char* data, size_t length)
{
    ...
    if (m_contentType == CSS && !m_checkedForCSSCharset)
        // 1. 当下载完 CSS 样式表,这里调用 checkForCSSCharset 函数,检测样式表里是否有 @charset
        if (!checkForCSSCharset(data, length, movedDataToBuffer))
            return emptyString();
    ...
}

上面代码注释 1处,当下载完 CSS 样式表使用 TextResourceDecoder 进行解码时,会调用 TextResourceDecoder::checkForCSSCharset 检测 CSS 样式表里面是否有 @charset at-rule。如果有 @charset at-rule,那么就将 TextResourceDecoder 的 m_encoding 属性值设置为 @charset 指定的字符集。

 

综上所述,对于外部引入的样式表,解码字符集的优先级为:

1 如果样式表有 @charset at-rule,就优先使用 @charset 指定的字符集;

2 否则,就看 link 标签有没有 charset 属性,有的话就优先使用 link 标签 charset 属性指定的字符集;

3 否则,就使用文档 Document 的字符集。

内部样式表与行内样式

由于内部样式表和行内样式本身就在 HTML 文件里面,因此对于它们的解码就使用 HTML 字符集。HTML 解码字符集确认规则如下:

1 如果有 <meta> 标签,就使用 <meta> 标签使用的字符集;

2 否则,就默认使用 Latin-1(ISO-8859-1) 字符集

 

与WebKit Inside: CSS 样式表解码字符集相似的内容:

WebKit Inside: CSS 样式表解码字符集

CSS 样式表引入有3种方式: 外部样式表、内部样式表、行内样式,不同的引入方式,解码样式表的字符集原理不一样。 外部样式表 外部样式表由 link 标签引入,当 WebKit 解析到 link 标签时就会构造 CachedCSSStyleSheet 对象。这个对象持有 CachedResource

WebKit Inside: CSS 样式表的解析

WebKit Inside: CSS 样式表的解析

WebKit Inside: CSS 样式表的匹配时机

WebKit Inside: CSS 的解析 介绍了 CSS 样式表的解析过程,这篇文章继续介绍 CSS 的匹配时机。 无外部样式表 内部样式表和行内样式表本身就在 HTML 里面,解析 HTML 标签构建 DOM 树时内部样式表和行内样式就会被解析完毕。因此如果 HTML 里面只有内部样式表和行内

WebKit Insie: Active 样式表

WebKit Inside: CSS 样式表的匹配时机介绍了当 HTML 页面有不同 CSS 样式表引入时,CSS 样式表开始匹配的时机。后续文章继续介绍 CSS 样式表的匹配过程,但是在匹配之前,首先需要收集页面里面的 Active 样式表。 1 Active 样式表 在一个 HTML 文件里面,

WebKist Inside: CSS 样式表的组成

WebKist Inside: CSS 样式表的组成

网页“悼念模式”全站变灰/黑白色CSS代码

【Playwright+Python】系列教程(四)Pytest 插件在Playwright中的使用

一、命令行使用详解 使用Pytest插件在Playwright 中来编写端到端的测试。 1、命令行执行测试 pytest --browser webkit --headed 2、使用 pytest.ini 文件配置 内容如下: [pytest] # Run firefox with UI addop

【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width

Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有 ::-webkit-scrollbar 规范可以控制滚动条,可是,::-webkit-scrollbar 是非标准特性,在 MDN 文