Disabling the <font> Tag Using CSS

Are you getting tired of clients using the deprecated <font> tag in their CMS? It’s easy enough to remove it using javascript or preferably server-side scripting, but you can also use CSS to disable the styles they define inside the font tag.

I found out when I was playing around with a better CSSReset File that standard browsers will override any style set in the HTML source if they are also defined as !important in the CSS file. In other words, if you set every CSS property as inherit !important in the font definition, it will override any attempt inside the HTML source and use the style previously defined in the CSS. It won’t take away the semantic error, but at least the client will not notice any visual effect and hopefully stop using it in time.

It’s a perfect companion to my newly updated CSSReset File.

So here it goes

This sort of bloated CSS code will not work in IE6/win, but in all other standard browsers I tested in. If the client attempt to write something like <font style="color: #aaa;">grey color<font> it will not work as they intended but instead inherit the default CSS style defined earlier. Feel free to post any glitches I missed.

font
	{
	color: inherit !important;
	margin: inherit !important;
	padding: inherit !important;
	font: inherit !important;
	text-decoration: inherit !important;
	border: inherit !important;
	background: inherit !important;
	bottom: inherit !important;
	top: inherit !important;
	left: inherit !important;
	right: inherit !important;
	position: inherit !important;
	clear: inherit !important;
	float: inherit !important;
	height: inherit !important;
	width: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	outline: inherit !important;
	overflow: inherit !important;
	display: inherit !important;
	visibility: inherit !important;
	text-indent: inherit !important;
	white-space: inherit !important;
	word-spacing: inherit !important;
	z-index: inherit !important;
	text-align: inherit !important;
	max-height: inherit !important;
	max-width: inherit !important;
	min-height: inherit !important;
	min-width: inherit !important;
	cursor: inherit !important;
	}