Tag Inspector (with Relevant CSS Panel)

The Tag Inspector has seen a significant overhaul, and this may be your new favorite place. The Tag Inspector is now a panel group, housing Attributes, Behaviors, and Relevant CSS panels.

As far as CSS goes, the Attributes panel doesn’t hold much of interest. You can quickly see the class name applied to the tag, but that is available in a few places. I think an interesting application of this panel is the display of class, ID, and style attributes. Ever find yourself creating an inline style to counteract something in a class style (I know… shudder)? Now you can see it and edit it. Or, more likely, have you ever inherited an over-styled page? Now you can quickly identify the pesky inline styles and remove them.

Far more interesting for our purposes is the Relevant CSS panel of the Tag inspector panel group. With a given tag selected, this panel will indicate any CSS styles affecting that tag. I was able to apply class and ID selectors to a tag, add some inline styles, modify the style of the tag selector, and create a contextual selector… and all of the styles defined by these various selectors were listed in the top of the Tag Inspector’s Relevant CSS panel. It even showed styles defined in a grouping of selectors. Choose a selector from the list at the top, and you can modify the style attributes below. The more I think about this feature, the more I like it (and the more I will expect to become dependent upon it).

By the way, the Relevant CSS panel even indicates styles that are not literally relevant to the selection (but that are applied to an element that is relevant). For example, if both the body tag and H1 tag have been defined with style attributes, clicking in text surrounded with H1 tags will include the body tag in the panel, but any attributes that are not inherited by the H1 tag are indicated with a red strikethrough.

Figure 5. The Tag inspector.