CSS Fun: Flag Deprecated HTML Tags
Here is a little fun CSS snippet that helped me identify deprecated HTML on a recent project. Put these lines into the CSS file of your website:
/* Watch out for invalid/deprecated HTML in CMS */
b{font-size: x-large; background-color: fuchsia; color: yellow; font-weight: normal;}
i{font-size: x-large; background-color: lime; color: blue; font-style: normal}
font{background-color: aqua; color: red}
b,i,font{text-decoration: blink;}
This was really useful for identifying dirty HTML that was generated from a Microsoft-based CMS.
Coloring and blinking text makes the editors aware that something is wrong. Two major advantages for this approach:
- Instant attention on HTML validation errors (also for non-developers)
- Developers spend less time on hunting down invalid HTML that constantly sneaks into the web application.
These lines may also be useful to you — unless you are able to guard your HTML before it’s inserted in your application (something that was not possible at this project).
January 8th, 2009 at 13:11 (GMT-1)
A great idea!
It might be better to differentiate between deprecated elements and the deprecated /use/ of elements.
The HTML 4.01 specs contain a list of elements, with those deprecated marked as such: http://www.w3.org/TR/REC-html40/index/elements.html
You’ll notice that the list of elements doesn’t mark ‘i’ and ‘b’ as deprecated. It is not that ‘i’ and ‘b’ have been deprecated, more than their /use/ has been cautioned against.
There are use cases supporting the need for ‘i’ to italicise a piece of text instead of using CSS to achieve the same visual effect.
A good example is the use of italics when presenting a book title within text. We can’t use ’em’ because we don’t want to emphasise the title, we merely want to use italics in following with the conventions of print. There are more justifications for this, but that would start getting too off-topic.
Back to my main point: use one form of colouring for deprecated elements (ones you can be certain should not be there) and a different form of colouring for commonly misused elements (which /probably/ shouldn’t be there, but might actually be correctly used).
January 20th, 2009 at 11:46 (GMT-1)
Jack Clarke wrote:
Actually, you could easily add this into a greasemonkey script or similar.
PS. I marked your original comment as spam because it’s refering to a product/SEO site. See our revised blog comment policy.