![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/05\/diagnostic-400.gif\" "\\"diagnostic-400\\"")
<\/p>\n<\/p>\n
I have to admit that I\u2019m a bit of a code purist. In my heart of hearts, I\u2019d really like to think that every developer out there that this site helps will turn around and produce clean, semantic XHTML to which to apply their lovely, efficient CSS. But that isn\u2019t always the case. Sometimes people write code that isn\u2019t quite semantic, whether they\u2019re in a rush or just don\u2019t know any better. Or sometimes designers are charged with redesigning a website that was first built during the Neolithic period. <\/p>\n
Any way you slice it, there\u2019s still a lot old-skool code floating around out there, and it can be a bear to dig through all that HTML to find the bits that could use a good refreshing. So once again, CSS comes to the rescue! The technique I\u2019m talking about today is sometimes called \u201cCSS Diagnostics.\u201d Basically, you\u2019re just using CSS to highlight specific elements and attributes \u2013 specifically, the ones that shouldn\u2019t even be there in the first place.<\/p>\n
Our first order of business is to decide what elements you\u2019d like to weed out of your code. You could create a list of every single deprecated tag out there, but most developers didn\u2019t use every tag out there. For our purposes, I\u2019m going to look for the <font>, <center>, <s> (strikethrough), <u> (underline), <b> (bold), and <i> (italic) tags, which probably make up around 80% of the still-common deprecated tags out there. If I want to see where those tags are used in any website, all I need to do is apply some CSS to make them stand out:<\/p>\n
font, center, s, u, b, i {\n\tcolor: #000;\n\tfont-weight: bold;\n\tbackground-color: #f99;\n\tborder: 3px solid #c00; }<\/pre>\nAnd just like that, all of our deprecated tags are boldfaced on a light red background with a nice, wide dark red border. And assuming that wasn\u2019t your previous design of choice (please tell me that wasn\u2019t your previous design of choice), they should stand out on your website like the big, red sores that they are. :)<\/p>\n
And that takes care of our tags, but what about all those deprecated attributes out there that might be applied to perfectly legitimate tags? For that, we\u2019ll use the magic of CSS attribute selectors (more on those here).<\/a> So for example, if I knew that the previous developer of the site I\u2019d just inherited was fond of applying margins to their body tags using \u201crightmargin,\u201d \u201cleftmargin,\u201d and so on, and also loved to scatter \u201cbgcolor\u201d and \u201cbackground\u201d attributes like so many apple seeds, I could just write a rule like this to weed them out:<\/p>\nbody[bottommargin], body[leftmargin], \nbody[rightmargin], body[topmargin],\n*[background], *[bgcolor] {\n\tcolor: #000;\n\tfont-weight: bold;\n\tbackground-color: #fc6;\n\tborder: 2px solid #c60; }<\/pre>\nHere I\u2019m using attribute selectors to highlight elements with particularly unsavory attributes. I\u2019m also using the universal selector (*) to find all instances of attributes that can apply to multiple types of elements (like backgrounds). That way, I don\u2019t have to write out every possible combination of element and attribute under the sun. And just like that, I\u2019ll be able to hunt down all sorts of problem bits of code! You can see our examples from above in action here.<\/a><\/p>\nA few words of caution: when you\u2019re doing this sort of styling, it\u2019s important to apply these styles after<\/em> all of your other CSS has been applied. That way, you don\u2019t accidentally overwrite parts of your diagnostic CSS with other rules later on down the line. To do that, either put your diagnostic rules at the bottom of your CSS files, or create a whole new file for your diagnostic rules and <link> them after your main CSS file, or just copy and paste them into a <style> tag if you\u2019re only diagnosing a page or two.<\/p>\nAlso, as mentioned in the last article about attribute selectors, IE6 doesn\u2019t recognize them. Of course, since this are purely diagnostic rules, that shouldn\u2019t be much of a problem… just be sure to view your website in a modern browser (Firefox, Opera, Safari, IE7 (if you must), etc) when checking it for problems. And really, if you\u2019re still using IE6 for all of your web design work, you\u2019ve bigger issues to work through than just a deprecated tag or two here and there. :)<\/p>\n
And finally, this build-your-own-diagnostic method is great if you know what to look for, but if you\u2019d prefer a more one-size-fits-all solution to your diagnostic woes, I\u2019d suggest downloading a full diagnostics stylesheet, like the one Neal Grosskopf offers here.<\/a> However, be aware that his solution will highlight elements and attributes that are technically deprecated but still commonly used to good ends \u2013 such as the \u201cheight\u201d and \u201cwidth\u201d attributes on images. I may be a code purist, but I still find those attributes mighty useful!<\/p>\n