Search code examples
javascriptcssbrowservendor-prefix

how to avoid duplicate css when using vendor prefixes?

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

  • Unfortunately it seems you have to repeat those declaration. Look at sitepoint article - http://www.sitepoint.com/html5-full-screen-api/