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.