Using CSS Diagnotics to Check Your Web Design.

CSS Tools: Diagnostic CSS

Have you ever created a website, only to find that some of the links are broken?!

Using validation is Very useful, but it won’t pick up everything. For example, if you have a link where you have not added a URL value to the href attribute, the validator won’t flag it as an error. The syntax is valid, even if it’s a ‘broken user experience’. Similarly, the validator will be happy to let through empty class and id values.

Maybe you planned your site to work that way, but more likely not. That’s where using diagnostic CSS come in.

With a diagnostic stylesheet, you can quickly identify where your markup may be having trouble.

/* put the code below at the head of your generic style sheet (linked to every page you’ve created).
simply ‘uncomment and use to check anything that may have been missed!
—————————————————————————————–

div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding : 0.5em; background : yellow; }
*[style], font, center { outline : 5px solid red; }
*[class=""], *[id=""] { outline : 5px dotted red; }
img[alt=""] { border : 3px dotted red; }
img:not([alt]) { border : 5px solid red; }
img[title=""] { outline : 3px dotted fuchsia; }
img:not([title]) { outline : 5px solid fuchsia; }
table:not([summary]) { outline : 5px solid red; }
table[summary=""] { outline : 3px dotted red; }
th { border : 2px solid red; }
th[scope="col"], th[scope="row"] { border : none; }
a[href]:not([title]) { border : 5px solid red; }
a[title=""] { outline : 3px dotted red; }
a[href="#"] { background : lime; }
a[href=""] { background : fuchsia; }

—————————————————————————————– */

Related posts:

1. Looking to start building online applications?
2. Five Tips For Reducing Your Bounce Rate Part 2
3. CSS is Like Poetry – ‘Plan it to Perfection’
4. Web Design School: Tips for writing good Web Copy
5. Web Design Index published
6. Web Design Browser Testing And Bugs.