Question

我想使用：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个前缀中的所有其他css。如果我执行以下操作，似乎浏览器会忽略它（我认为这是由于接受css的原因）：

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

有没有纯粹的CSS方法来使这项工作？如果不是最好的方法是什么？

Answer 1

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

Answer 2

看一下-prefix-free的事情。

Answer 3

我不打算将此标记为正确的解决方案，因为它不是纯粹的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 */
}

如何在使用供应商前缀时避免重复的css？

3 个答案: