Comment puis-je inspecter et modifier:avant et: après les pseudo-éléments dans le navigateur?
J'ai créé des éléments DOM assez élaborés avec un pseudo-élément: after, et j'aimerais pouvoir les inspecter et les modifier dans Chrome Inspector ou Firebug ou équivalent.
Malgré cette fonctionnalité mentionnée dans ce blog WebKit/Safari (daté de 2010), Je ne trouve pas du tout cette fonctionnalité dans Chrome ou Safari. Chrome a au moins des cases à cocher pour inspecter :hover,: visited et: active, mais :before Et: after ne sont nulle part voir.
En outre, ce billet de blog (daté 2009!) mentionne cette capacité existe dans les outils de développement IE, mais j'utilise actuellement Mac OS, donc cela ne m'aide pas. De plus, IE n'est pas un navigateur que je cible principalement.
Existe-t-il un moyen d'inspecter ces pseudo-éléments?
EDIT: en plus d'avoir tort à propos de L'impossibilité pour Firebug d'inspecter ces éléments, J'ai trouvé Qu'Opera était assez bon pour inspecter :avant et: après les éléments du boîte.
5 réponses
Dans les outils de développement de Chrome , les styles d'un pseudo-élément sont visibles dans le panneau:
Sinon, vous pouvez également entrer la ligne suivante dans la console JavaScript, et inspecter la CSSStyleDeclaration objet:
getComputedStyle(document.querySelector('html > body'), ':before');
À partir de Chrome 31, Les pseudo-éléments s'affichent dans le panneau éléments en tant qu'éléments enfants de leur parent, comme indiqué dans l'image suivante:
Vous pouvez les sélectionner comme vous le feriez pour un élément normal, mais si vous supprimez le style content, le pseudo-élément sera également supprimé et le focus devtools passera à son parent.
Il semble que les styles css hérités sont pas visibles et vous ne pouvez pas modifier le contenu CSS à partir du panneau éléments.
Chrome n'affichera pas les pseudo-éléments :before et :after dans L'arborescence DOM, s'ils manquent l'attribut "content". Il devrait être réglé, même s'il est réglé sur rien.
Cela n'apparaîtra pas:
:after {
background-color: red;
}
, Ceci apparaîtra dans l'inspecteur:
:after {
content: "";
background-color: red;
}
J'espère que ça aide.
Après beaucoup de frustration, j'ai compris que firefox ne montre pas du tout les pseudo-éléments dans l'arborescence du document , mais si vous sélectionnez l'élément exact qui a un ou plusieurs pseudo-éléments définis, les styles pour son ou ses pseudo-éléments sont affichés dans la section Règles de style sur le côté droit. Cela est vrai pour firebug et l'inspection intégrée ("Q"), et je suis choqué que personne n'ait pris la peine d'expliquer cela clairement avant.
Il est clair que chrome / chromium gère les pseudo-éléments sont largement supérieurs, car ils peuvent être sélectionnés (à la fois dans l'arborescence du document et directement sur la page) et inspectés comme des éléments réguliers, avec la mise en page, les propriétés et tout le reste, indépendamment de leur "propriétaire".
Versions du navigateur que j'utilise actuellement: Chromium 40.0.2214.91, Firefox 31.3.0.
Firefox a eu cette fonctionnalité pendant un certain temps maintenant, juste un clic droit, "inspecter l'élément", et voir les éléments avant et après dans le panneau de droite de l'inspecteur.