Comment trouver des styles cachés dans le Shadow DOM ?

jeter un coup d'oeil dans le DOM fantôme pour découvrir des styles cachés

Vous êtes tombé sur un site Web avec une couleur d'espace réservé intrigante et souhaitez reproduire sa couleur précise ombre. Lors de l'inspection de l'élément dans Chrome Dev Tools, vous avez rencontré un obstacle : aucune information relative à l'espace réservé n'est visible.

N'ayez crainte, car le secret réside dans l'exploration du DOM fantôme. Voici comment percer le mystère :

1. Plongez dans les paramètres : commencez par cliquer sur l'icône d'engrenage dans le panneau Outils de développement Chrome et sélectionnez l'onglet Préférences.
2. Libérez le shadow DOM : dans la section Éléments, localisez la case à cocher intitulée "Afficher le shadow DOM de l'agent utilisateur" et cochez-la.
3. Révélez le royaume caché : Avec shadow DOM activé, vous verrez maintenant l'élément d'espace réservé associé à l'élément d'entrée que vous inspectez.
4. Jetez un œil aux styles : cliquez sur l'élément d'espace réservé pour accéder à ses propriétés CSS et découvrir le spécification de couleur insaisissable.

Pour l'exemple spécifique que vous avez fourni, vous observerez que l'élément d'espace réservé porte la classe :

.-webkit-input-placeholder

L'enquête sur ses styles calculés révélera la couleur de l'espace réservé. , y compris les valeurs alpha. Vous êtes désormais entièrement équipé pour reproduire cette couleur d’espace réservé séduisante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!