Diagnostic Styling
Posted: Feb 12, 07:00 AM"We’re all used to using CSS to make our designs live and breathe, but there’s another way to use CSS: to find out where our markup might be choking on missing accessibility features, targetless links, and just plain missing content."
Browsing around the web out of boredom today I ran across an interesting article by Eric Meyer. Pretty much, in a nutshell, Eric walks us through using certain CSS techniques to help you find out what problems are coming from where in your CSS.
Example Code:
- font, center {
- outline: 5px solid red;
- }
Example Output:
Example on the left uses the “border” property instead of the “outline” property
This is a technique that I personally have been using for a while, though I’ve been partial to the color pink for my borders/outlines. For those that are unfamiliar, the CSS2 property “outline” is very similar to the the “border” property, except it doesn’t effect your layout. If you’re like me though, sometimes you just have to forgo the use of the “outline” property and use the “border” property instead just to see things break a little, which can be beneficial in some instances when you can’t figure out whats going wrong.