Stakeout

Bullseye is a great way to display the CSS that affects a certain element on the page. But what about the reverse—marking the elements that are affected by a certain rule in the style sheet? Stakeout comes to the rescue.

Designing with web standards means there is a disconnection between markup (HTML) and presentation (CSS). While this is desirable, it also introduces complication: During development, it can be difficult to visualize which HTML elements are being “selected” by a given rule. And it's even more difficult if the style sheet is unfamiliar—for example, when working with the style sheet included with downloaded WordPress or Joomla template.

With Stakeout enabled, the elements that are selected by the active rule in the code grid are outlined in red. This solves the problem descibed above, and as an added bonus, it displays the boundaries of those elements—a features that's quite useful when adjusting the size of an element, or adjusting the spacing between elements.

← Size Grips Cleanser →