how to avoid duplicate css when using vendor prefixes?

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?

Marcin Nabiałek · Accepted Answer · 2014-05-04 18:17:22Z

2

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

answered May 4, 2014 at 18:17

Marcin Nabiałek

112k43 gold badges272 silver badges300 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander Pavlov · Accepted Answer · 2014-05-04 18:33:59Z

1

Take a look at the -prefix-free thing.

answered May 4, 2014 at 18:33

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

Comments

funkyeah · Accepted Answer · 2014-05-05 04:48:42Z

0

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

answered May 5, 2014 at 4:48

funkyeah

3,2147 gold badges33 silver badges48 bronze badges

Collectives™ on Stack Overflow

how to avoid duplicate css when using vendor prefixes?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related