Unfortunately it seems you have to repeat those declaration. Look at sitepoint article - http://www.sitepoint.com/html5-full-screen-api/
how to avoid duplicate css when using vendor prefixes?
-
15-07-2023 - |
Question
I want to use the :fullscreen css pseudo-class which requires a number of vendor pre-fixes:
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 */
}
But for this example I would prefer not to have to duplicate background:red and all other css across the 4 prefixes. If I do the following it appears as though the browser ignores it (which I believe is due to how the accepts css):
html:fullscreen,
html:-moz-full-screen,
html:-webkit-full-screen,
html:-ms-fullscreen
{
background: red;
}
Is there any pure css way to make this work? If not what is the best way?
Solution
OTHER TIPS
Take a look at the -prefix-free thing.
I am not going to mark this the correct solution since it's not pure css, but my solution was to use less (Sass/Scss would also work) and implement a 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 */
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow