2

我想使用 :fullscreen css 伪类,它需要一些供应商前缀:

html:fullscreen {
    background: red;
}

html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:-ms-fullscreen {
    background: red;
    width: 100%; /* needed to center contents in IE */
}

但是对于这个例子,我不希望在 4 个前缀中复制 background:red 和所有其他 css。如果我执行以下操作,似乎浏览器会忽略它(我相信这是由于接受 css 的方式):

html:fullscreen,
html:-moz-full-screen,
html:-webkit-full-screen,
html:-ms-fullscreen
{
    background: red;
}

有没有任何纯粹的 CSS 方法来完成这项工作?如果不是最好的方法是什么?

4

3 回答 3

2

不幸的是,您似乎必须重复这些声明。查看站点点文章 - http://www.sitepoint.com/html5-full-screen-api/

于 2014-05-04T18:17:22.163 回答
1

看看-prefix-free的东西。

于 2014-05-04T18:33:59.963 回答
0

我不会将此标记为正确的解决方案,因为它不是纯 css,但我的解决方案是使用更少(Sass/Scss 也可以)并实现一个 mixin:

.fullscreenMixin {
  font-weight: normal;
  font-size: 49px;
}

html:fullscreen {
  .fullscreenMixin()
  background: red;
}

html:-moz-full-screen {
  .fullscreenMixin()
}


html:-webkit-full-screen {
  .fullscreenMixin()
}

html:-ms-fullscreen {
  .fullscreenMixin()
  width: 100%; /* needed to center contents in IE */
}
于 2014-05-05T04:48:42.870 回答