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

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

Some pseudo-elements Archive need to be addressed with vendor prefixes. E.g. ::selection Archive 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).

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Avatar
Henning Koch
Last edit:
about 3 years 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 short-lived cookies to improve usability.
Accept or learn more