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

我想使用：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）：

---

有没有什么纯css的方法来实现这一点？如果不是，最好的方法是什么？

不幸的是，您似乎不得不重复这些声明。查看sitepoint文章-

看看这件事。

我不打算将其标记为正确的解决方案，因为它不是纯css，但我的解决方案是使用更少的（Sass/Scss也可以工作）并实现混合：

.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 */
}

.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 */
}