Comments on: Pseudo-Phantoms

By: Learning To Use The :before And :after Pseudo-Elements In CSS |Layout to HTML

Tue, 17 Jul 2012 04:20:52 +0000

[...] thing to keep in mind is that developer tools such as Firebug do not show the content generated by pseudo-elements. So, if overused, pseudo-elements could cause maintainability headaches and make debugging a much [...]

By: Court Kizer

Court Kizer — Thu, 17 May 2012 17:46:11 +0000

Actually since the very first version of web inspector webkit/safari has ALWAYS shown the pseudo classes. Just click the little plus icon (different in older versions) at the top of the list of styles. It does the correct thing and lets you toggle on all the various states (:hover, :focus, :active, pseudo elements.

In Safari 5.2 new code based web inspect they are listed below as should be.

By: Ed

Ed — Wed, 24 Aug 2011 03:17:40 +0000

If for whatever reason you want to remove internet explorer developers tool menu here is a video i made

http://vid4.us/free_video_tutorial/157/internet-explorer-how-to-disable-developer-tools-menu/

By: Learning To Use The :before And :after Pseudo-Elements In CSS - Smashing Magazine

Thu, 14 Jul 2011 11:06:58 +0000

By: Colby Russell

Colby Russell — Mon, 17 May 2010 02:07:55 +0000

For the record (in response to Olli), DOM Inspector still allows you to set the hover, active, and focus pseudo-classes, but no help on pseudo-elements. The appropriate DOM Inspector bug for pseudo-elements is bug 185431. Dylan Helling has written a simple patch to extend Gecko's inspector interface (used by Firebug, as well) to allow querying individual pseudo-elements. That's bug 557726.

By: Eric Meyer

Eric Meyer — Fri, 08 Jan 2010 15:01:38 +0000

Dean, I see Firebug showing styles inherited from :first-child styles. If you go to the test page I linked in the post and inspect the (newly added) italicized text in the first list item, you should see the li:first-child styles listed as being inherited.

By: Dean Hall

Dean Hall — Fri, 08 Jan 2010 09:30:03 +0000

I must be missing something, but I’m failing to see where Firebug shows inherited style information for the :first-child pseudo-class. Gecko renders it properly, but Firebug never seems to report it.

Also of note: I thought I had a simple, ad hoc method of debugging the :first-line pseudo-class, but it failed also.

HTML:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

CSS:

p:first-line { font-variant: small-caps; }

Both Gecko (Firefox) and Webkit (Safari) render the text in the span properly as small caps, but both Firebug and Webkit’s inspector report the span’s font-variant property as “normal” (inherited). While the :first-line pseudo-class isn’t represented in the DOM, the span is, and its style is not being reported properly.

By: Tab Atkins

Tab Atkins — Thu, 05 Nov 2009 01:04:05 +0000

@Tiff Fehr: That last hack may fail in a majorly bad way relatively soon, when browsers start supporting content-replacement via the content: property on normal elements. If I were you I’d stop doing that *right now*, lest you forget and suddenly people start complaining about odd debugging messages showing up on your pages.

By: Norman

Norman — Wed, 04 Nov 2009 22:58:16 +0000

these "bugs" are known at least in firebug .. i guess its just pretty hard to make it work. if you want to see the :hover pseudo classes for links in firebug, you need to use the inspect tool, hovering over the link and click it.. firebug now shows you the :hover pseudo class. apart from pseudo classes and elements, each @* expression, like @font-face, @media etc. are also not shown by firebug (don't know about the other inspectors tho)

By: David Lantner

David Lantner — Wed, 04 Nov 2009 20:48:31 +0000

This issue has already been reported within the Firebug project at Google Code: Issue 365: Show :after and :before properties in CSS tab Personally, I find it confusing that the Developer Tools in IE8 shows the styles associated with a DOM node for any medium, even if the medium is not active, such as print styles. Also, the Developer Tools would be much more useful if it could show dynamically-generated DOM nodes. Still, it's a great resource and many people (myself included) benefit from it being included in the browser by default as opposed to being an add-on. The IE Developer Toolbar for IE6 and IE7 is useful, too, and it will show you the styles for supported pseudo-elements and pseudo-classes such as "a:link" if you select the element in the DOM tree and then go to the View menu, choose "Source" then "DOM (Element + Styles)."

By: Ollie

Ollie — Wed, 04 Nov 2009 03:27:37 +0000

Once upon a time in Mozilla, before Firebug (and maybe even Firefox), the venerable DOM Inspector had a nice feature for this. A contextual menu allowed one to explicitly set the pseudo state applied to the focused element. I’ve sorely missed this feature in Firebug.

By: Adrain Anderson

Adrain Anderson — Tue, 03 Nov 2009 22:42:13 +0000

Thanks for pointing that out John. I also primarily use “Inspect Element” and had just about forgotten about the CSS tab in the Firebug toolbar. I’m surprised this doesen’t get mentioned more around the web.

By: Kenneth

Kenneth — Tue, 03 Nov 2009 21:19:36 +0000

While I definitely see your point and agree that it's annoying for debugging purposes, I don't think the tools are in the wrong. You're inspecting the P element and you see its styles and rules. You're not expecting the (pseudo and thus not in the DOM) :after element, so you don't see its rules. Really, IMHO, they should adapt the DOM engines and debuggers to artificially put the :after elements into the DOM, at least for debugging purposes.

By: Max Design - standards based web design, development and training » Some links for light reading (3/11/09)

Tue, 03 Nov 2009 20:28:14 +0000

[...] Pseudo-Phantoms [...]

By: Tiff Fehr

Tiff Fehr — Tue, 03 Nov 2009 20:18:55 +0000

I’ve run into web inspector/DOM reporting over-zealousness from a different, likely sacrilegious direction. My company’s CSS is shared across different teams and skill-sets. We aim for liberal commenting (later stripped out by hand or caught by our compressor, of course), however we’ve also started to include comments via invalid CSS properties, too, so they show up in Firebug, etc. Example: ‘cleanup-note: “background img should move to sprite”;’.

The challenge is that we’d like those comments to show up in web inspectors where a designer is *investigating* an issue rather than having to go into the code (and our CMS + source control monolith) itself.

Of course, the browsers + web inspectors strip out invalid properties. The work-around we’ve used so far is something like ‘content: “NOTES: …blah…”;’ without a pseudo-class of :before or :after. Gross but it works.

I’m glad that web inspectors have become so ingrained in web workflow that we’re nitpicking advanced details. Is our web-inspection sophistication is pushing past the rendered DOM? Would the ability to provide custom/different validation schemas to web inspectors help? If so, how does the community take on a bigger, standardizing(?) role in web inspector features?