CODEWITHSUNDEEP
javascriptcssbrowservendor-prefix
funkyeah
funkyeah

Reputation: 3164

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?

Upvotes: 2

Views: 249

Answers (3)

funkyeah
funkyeah

Reputation: 3164

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

Upvotes: 0

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

Take a look at the -prefix-free thing.

Upvotes: 1

Marcin Nabiałek
Marcin Nabiałek

Reputation: 111829

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

Upvotes: 2

Related Questions