And by Dark Matter I mean “content that only gets styled by pseudo-selectors”. 🙂

When you’re rebuilding, re-designing or even tweaking a website, it’s often quite painful to restyle the items on a page that are hidden by default. Navigation panels, menus, etc., are often hidden until you mouse over them or click a drop-down, which means it can be very fiddly (and often impossible) to use Firebug or the Web Inspector to interactively edit their CSS while they’re hovered over.

The Google Chrome developers obviously realized this, and built a feature to help you temporarily lock the state of certain elements. Unfortunately they put this feature in the most subtle place I’ve ever seen. And they gave it the same icon as a completely different feature in Firebug. I’ve added a highlight to help you spot it in this screenshot:

For some reason its icon is identical to that of the select element toggle in Firebug. Because of that I let months go by before I ever clicked on that button; I was happy to toggle select element mode with ⌘⇧C.

But when you do click the button it reveals a set of pseudo-selectors that you can check in order to lock the relevant states on the selected element:

These are all states that you can usually trivially activate with the mouse: for example, ordinarily you can hover over an element and the hidden content will appear. However, as soon as you try to use the inspector to change the element’s properties, then you have to move your mouse away from the hover element! That’s where these checkboxes come in: they allow you to lock pseudo-selectors (such as :hover) in place until you uncheck the box later.

Activate the pseudo-selectors!

This means that when you have a navigation menu on a site like linkedin.com, (pictured below), you can now make changes to the hoverable items interactively. This shortens your develop-test cycle dramatically.

Interactivity editing your styles helps you develop pixel-perfect designs faster, and helps you get to something beautiful more naturally. You can take things one step further and check the :visited option, to see and edit how your links will look when a user has already clicked them.

This special little feature, which I’m henceforth going to call the black-hole button, is wonderfully useful for tweaking those hard-to-see parts of your site. It’s not a tool you’re likely to use often, but when you do, it makes things much easier.

Have you found any other obscure features in the Inspector or Firebug that are essential productivity boosters when editing a great site? Please let me know in the comments below!

Follow @LeeMallabone to see future front-end development tips and tricks.