【问题标题】:What happens when the browser doesn't support a CSS pseudo-class?当浏览器不支持 CSS 伪类时会发生什么?
【发布时间】:2016-12-15 19:44:29
【问题描述】:

如果浏览器不支持 CSS 伪类(如 :dir)会怎样?

例如:

html:dir(rtl) {
    color: red;
}

如果浏览器不理解:dir 伪类,他们会忽略这条规则吗?我对一般情况比对这个特定的伪类更感兴趣。我的直觉告诉我是的,但我还没有找到证实我的直觉的文档。


这个问题与这个问题不同:Invalid CSS selector causes rule to be dropped: What is the rationale?。它更窄,我问的是浏览器在看到它无法识别的伪类时会做什么,而不是它对一般无效的 CSS 选择器做什么。据我所知,例如,一个无法识别的伪类仍然可能被认为是一个有效的选择器。

【问题讨论】:

  • 由于 CSS 解析和支持的不同,每个浏览器都会有所不同。也就是说,这似乎很容易测试。 Chrome 和 Firefox 都支持 direction 属性,但只有 Firefox (49+) 支持 :dir 伪类。创建两个 div 元素并为每个元素分配不同的方向,然后使用 :dir(rtl) 伪类创建一个类,并将其分配给两个元素。在 Firefox 和 Chrome 中打开,然后观察结果。 (在撰写本文时,Firefox 48 和 Chrome 52 是最新的。)

标签: css css-selectors cross-browser pseudo-class


【解决方案1】:

浏览器目前不区分 unrecognizedunsupported 选择器和 invalid 选择器。如果浏览器识别出一个选择器,通常它会尽其所能实现它(并且任何不符合规范的行为都可以在其错误跟踪器上归类为错误),即使它没有实现所有其他功能在同一级别的选择器中(例如,当前使用 :dir() 的情况,历史上 Internet Explorer 7 和 8 具有级别 3 属性选择器,以及 Internet Explorer 6 具有通用选择器)。如果它不识别选择器,它会跟随CSS2.1 §4.1.7 到字母并丢弃整个规则集,不问任何问题。注意它说

当用户代理无法解析选择器(即,它不是有效的 CSS 2.1)时,它也必须忽略选择器和以下声明块(如果有)。

这意味着如果用户代理无法解析选择器,则它必须是无效的 CSS2.1(或在某些其他级别的选择器中无效);反之,如果它可以解析一个选择器,那么它一定是有效的。但这假设用户代理完全符合标准;我们都知道,在现实中,不同的实现对每个标准的符合程度不同,某些实现甚至有自己的供应商特定的选择器,它们不属于任何标准。因此,我将其视为“当用户代理无法解析选择器时”没有括号,我想浏览器供应商也会这样做。

事实上,Selectors 本身并没有区分具有不对应于有效伪类的标识或函数的伪类标记,以及一系列甚至不能被解析为伪类的字符——它们都同样无效——参见section 12 of css3-selectorssection 3.9 of selectors-4。从本质上讲,这意味着当前的浏览器行为完全符合标准,而不仅仅是浏览器供应商同意的任意决定。

我还没有听说过任何浏览器将伪类识别为对错误处理有效,然后继续忽略该伪类或整个复杂选择器(将其他复杂选择器留在选择器中-列表不受影响)。 WebKit 确实曾经有一个非常糟糕的习惯,即接受带有无法识别的伪元素的 CSS 规则,允许 ::selection, ::-moz-selectionproved useless anyway because every other layout engine followed the spec more strictly 之类的东西。但是,我相信 WebKit 不再这样做了,但是您知道 WebKit 是如何处理这些事情的。但是 AFAIK 它从来没有用伪类做到这一点。

在标准方面,选择器 4 似乎准备通过引入静态和动态配置文件来改变这一点。 My email on the subject 在 CSSWG 电话会议中得到解决;您可以找到分钟 here(搜索“不在快速配置文件中的选择器的行为”)。但是,已解决的问题是,不在动态(以前是快速)配置文件中的选择器应该被视为无效,并像往常一样导致整个 CSS 规则被删除。见section 2.1

符合选择器级别 4 的 CSS 实现必须使用动态配置文件进行 CSS 选择。使用动态配置文件的实现必须将配置文件中未包含的选择器视为未知且无效。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-03-07
    • 2010-09-19
    • 2014-11-26
    • 1970-01-01
    • 1970-01-01
    • 2019-02-12
    • 2012-01-21
    相关资源
    最近更新 更多