R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

一个由全屏引发的问题

注意:本文发布于 914 天前,文章中的一些内容可能已经过时。

最近在搞一个跟全屏有关的东西,我知道 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 想新加一个选择器,这个选择器在目前的浏览器上都用不了,那我为什么不能把这个选择器跟正常选择器放在一个组?要知道,有时候一个选择器对应的规则有很多。不管是拆开写,还是用工具生成,都不是什么好做法。

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

版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: world.execute(me); me.runSimulation(world);
下一篇: Rex.sh:一个伪 Web terminal

这是我们共同度过的

第 1553 天