最近在搞一个跟全屏有关的东西，我知道 Fullscreen API 浏览器的支持很有限，于是在写的时候加足了浏览器的私有前缀，包括 CSS：

.video-container-inner:-webkit-full-screen,
.video-container-inner:-moz-full-screen,
.video-container-inner:-ms-fullscreen,
.video-container-inner:fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

然后出人意料的是，这个 CSS 并没有被识别。起初我以为是 CSS Scoped 的问题，然而去掉了 Scope 标记之后依旧。后来搜到了一个 2014 年 6 月的帖子：385842 - CSS :fullscreen pseudoclass fails when combined in a selector group - chromium - Monorail，里面是这么说的：

这个 CSS 选择器 :fullscreen pseudo-class 在有多个选择器组合起来的时候无效：

:fullscreen foo, :-webkit-full-screen foo {
    /* 无效 */
}
:-webkit-full-screen foo {
    /* 有效 */
}

下面的唯一一条评论说，这是标准的问题，请看这里：Selectors Level 3。

在一组选择器中，如果有一个选择器不合法，那么这一个组就不合法。

于是我把四个选择器拆开写，成功了……

然而这涉及到了一个问题：浏览器的私有前缀。在大部分情况下，写在一起是没问题的，例如下面的 CSS：

.foo {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

JavaScript 当然更没问题：

const requestFullScreen = el.requestFullscreen || el.mozRequestFullScreen || el.webkitRequestFullScreen

不存在的东西，就当不存在好了。

然而如果是选择器的问题，那就必须拆开写。这个看起来很扎心的情况，要么是标准有问题，要么是浏览器有问题。

如果 CSS 想新加一个选择器，这个选择器在目前的浏览器上都用不了，那我为什么不能把这个选择器跟正常选择器放在一个组？要知道，有时候一个选择器对应的规则有很多。不管是拆开写，还是用工具生成，都不是什么好做法。

浏览器在支持带有私有前缀的选择器时，为什么要把标准形式看作是语法错误？可以不支持，可以不让它生效，但是不要让它错啊。