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

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 个前缀中复制 background:red 和所有其他 css。如果我执行以下操作，似乎浏览器会忽略它（我相信这是由于接受 css 的方式）：

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

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

Answer 1

不幸的是，您似乎必须重复这些声明。查看站点点文章 - 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 */
}