Qu'est-ce que -webkit-focus-ring-color?
Je veux reproduire l'effet outline pour les zones de saisie ciblées dans les navigateurs webkit vers les navigateurs non-webkit. J'ai trouvé ici le CSS par défaut utilisé dans le webkit. Les lignes d'intérêt sont:
:focus {
outline: auto 5px -webkit-focus-ring-color
}
J'ai essayé de faire une recherche dans le code entier pour la définition -webkit-focus-ring-colorici mais n'a pu le trouver nulle part.
-webkit-focus-ring-color Est défini dans la base de code WebKit comme focusRingColor dans chaque classe RenderTheme. Ce travail a été réalisé en juin 2009 dans le cadre de cet ensemble de modifications par Jeremy Moskovich .
Par exemple, le thème Mac par défaut (utilisé par Safari) définit la couleur dans RenderThemeMac.mm (de manière détournée) comme:
[NSColor keyboardFocusIndicatorColor]
( la documentation très légère d'Apple sur cette propriété est disponible en ligne ).
Il existe une valeur de remplacement pour le Mac (appelée WebCore::oldAquaFocusRingColor) À utiliser pour les tests (presque comme je peux le dire, c'est pour que le code puisse effectuer une comparaison entre le rendu du navigateur et un graphique de référence; il est basculé en utilisant WebCore::usesTestModeFocusRingColor). Il est défini dans ColorMac.mm comme suit (qui apparemment correspond à Color(125, 173, 217)):
0xFF7DADD9
Chrome/Chrome définit la couleur dans RenderThemeChromiumSkia.cpp comme:
Color(229, 151, 0, 255)
La couleur par défaut (spécifiée dans RenderTheme.h ) est du noir pur:
Color(0, 0, 0)
Utilisez ceci jsFiddle . J'ai obtenu rgb(229, 151, 0) dans Chrome 14 sur Windows 7.
Modifier : Comme le note @chharvey, Highlight est maintenant un couleur système obsolète alors ne tenez pas compte de cette réponse.
-webkit-focus-ring-color ne fonctionne pas dans Firefox. Vous pouvez cependant utiliser la couleur système Highlight comme remplacement.
:focus {
outline: auto 2px Highlight;
outline: auto 5px -webkit-focus-ring-color;
}
Voir aussi this site pour savoir pourquoi la réinitialisation des styles outline est généralement une mauvaise idée.
FWIW: En utilisant Chrome sur un Mac, j'obtiens une couleur de contour bleu lorsque j'utilise le mode navigateur normal. Lorsque j'utilise la vue de l'appareil, j'obtiens une couleur de contour jaune/doré.
Je ne sais pas pourquoi cela change - était en fait très déroutant. Voir les exemples ci-dessous.
