css to remove text shadow on select / highlight te

问题:

I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.

::-moz-selection,
::-webkit-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).

Here's the jsFiddle

回答1:

It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.

I originally thought that it was sufficient to write each statement on a separate line.

I was mistaken.

So if I replace this code:

::-moz-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

..With this code:

::-moz-selection
{
    text-shadow: none;
    background: #333;
    color: #fff;
}
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

.... bingo, it works.

FIDDLE

Support is also very good (for desktop): Caniuse

Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.

回答2:

The following is documented on Mozilla Developer Network:

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).

The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.