Posted over 2 years ago. Visible to the public. Repeats.

CSS: Don't target multiple vendor-prefixed pseudo-elements in a single rule

Some pseudo-elements need to be addressed with vendor prefixes. E.g. ::selection is not supported by Firefox, you need to use ::-moz-selection instead.

What you cannot do is to define a single CSS rule to address both the standard and vendor-prefixed form:

Copy
::selection, ::-moz-selection { background-color: red; }

This rule will be ignored by all browsers. The reason is that if a browser does not know all pseudo elements in a selector, it ignores the entire rule. This is because the CSS spec says so.

So you need to copy & paste the rule instead:

Copy
::selection { background-color: red; } ::-moz-selection { background-color: red; }

If you're using a CSS preprocessor like Sass, you can write a mixin that does the copying and pasting for you:

Copy
=selection ::-moz-selection @content ::selection @content

Then use it like this in your .sass file:

Copy
+selection background-color: red

You will still have the rule twice in your CSS, but your .sass will be DRY (and the CSS will compress well before delivery).

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Henning Koch
Last edit:
3 months ago
by Besprechungs-PC
Keywords:
declaration
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more