web-dev-qa-db-fra.com

css pour supprimer l'ombre du texte sur le texte sélectionné / surligné (mozilla)

J'utilise des ombres de texte pour la plupart des sites de texte, mais lorsque vous mettez en surbrillance/sélectionnez le texte - le texte semble flou. Donc, pour supprimer l'ombre du texte, j'utilise ce CSS de ici .

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

Le problème est que pour une raison quelconque moz-selection ne semble pas fonctionner (plus?) dans mozilla (Firefox).

Voici le jsFiddle

css-selectorsselectioncss
13
Danield

Il semble que le problème soit dû au regroupement de plusieurs règles css (pour le css spécifique au fournisseur) en conjonction avec le pseudo-élément :: selection.

Au départ, je pensais qu'il suffisait d'écrire chaque déclaration sur une ligne distincte.

Je me trompais.

Donc, si je remplace ce code:

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

..Avec ce code:

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

.... bingo, ça marche.

VIOLON

Le support est également très bon (pour le bureau): Caniuse

De plus, si vous utilisez LESS ou SASS - vous pouvez facilement écrire un mixin pour contourner la répétition.

28
Danield

Ce qui suit est documenté sur Mozilla Developer Network :

Bien que ce pseudo-élément soit dans les versions préliminaires de CSS Selectors Level 3, il a été supprimé pendant la phase de recommandation du candidat, car il semblait que son comportement était sous-spécifié, en particulier avec les éléments imbriqués, et l'interopérabilité n'a pas été réalisée (sur la base de la discussion dans la liste de diffusion W3C Style).

Le pseudo-élément :: selection n'est actuellement dans aucun module CSS sur la piste standard. Il ne doit pas être utilisé dans des environnements de production.

6
initall