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

Updated . Posted . Visible to the public. Repeats.

Some pseudo-elements Show archive.org snapshot need to be addressed with vendor prefixes. E.g. ::selection Show archive.org snapshot 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:

::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:

::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:

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

Then use it like this in your .sass file:

+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).

Henning Koch
Last edit
Besprechungs-PC
Keywords
declaration
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2017-04-25 12:40)