I'm a big fan of using ::selection
and ::-moz-selection
to spruce up a website a bit - I hate the default blue and white colours!
However, I find one little thing that really bugs me: I can't put ::selection
and ::-moz-selection
in the same CSS rule, like this:
::selection, ::-moz-selection {
background:#8A1920;
color:#FFFF;
}
jsFiddle link
I find this quite annoying, because it means that if I want to change my background colour (or some other selection style) I have to edit two separate rules. It also violates a policy I follow almost religiously: D.R.Y. (don't repeat yourself).
I tested this in Chrome 28, Chrome Canary 30, Firefox 22, Firefox 23, IE 9 and IE 10 and they all yield the same result. What's going wrong here?
If they must remain separate, is there any way to have them join further on? Something like:
.selected {
background:#8A1920;
color:#FFF;
}
::selection {
@copy-from(.selected); /* I know this line is completely made up */
}
::-moz-selection {
@copy-from(.selected);
}
Would be really useful.
This is from the documentation:
Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written: ::-moz-selection, ::selection {...}. The rule would be dropped on non-Gecko browsers as ::-moz-selection is invalid on them.
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With