Disable unwanted HTML elements with CSS

Often, when we submit a project to a client, we lose control of the HTML code. Sometimes the client uses CMS (Content Management Systems), which give him full control over certain parts of the HTML code. Sometimes the client simply uses our templates to display his code in the document.
In most cases, it is rather difficult to inform the client about how to use templates or CMS that you provide him, and sometimes it is simply unacceptable to push fiery speeches about semantic layout and web standards. The client can / will use the “old, good markup”, the one that he knows, simply because it works and looks like he was used to. Most likely, it will contain undesirable (deprecated) tags and attributes, such as bgcolor, align, and the "eternal" font . This article is about how to block unwanted HTML tags with CSS, thereby carefully guiding the client in the right direction.

There are several solutions to the problem. One of them is the output of a warning image using CSS when unwanted tags are used. Detailed explanations of this method are here and here . The second solution is “cutting out” unwanted tags and attributes on the server side. This method is the most effective, another thing that does not always have control over the server where the site is located.
The idea is to preserve the natural cascade and legacy of styles in all browsers, elegantly “turning off” HTML, which is undesirable for client use. And then the client will stop using it, because unwanted tags will simply stop “working”. An elegant and non-stressing way for a client to direct him on the right path.
Unwanted HTML tags and attributes:

  <font>
 <basefont>
 <center>
 <strike>
 <s>
 <u>
 bgcolor
 border
 align
 vspace
 hspace
 valign
 width
 height

Decision
Ideally, we could just correct some HTML tags by inserting the inherit value for the equivalent CSS property. The standards-based browsers will simply ignore the unwanted attributes specified in the code and will use the inherited values ​​in the cascade instead.
For example, this CSS:

  font {color: inherit;  } 

will prevail over this code:

  <font color = "blue"> Blue </ font> 

Accordingly, the color of the text inside the font tag will be the color inherited in a cascade, and not blue, as specified in the code. What you need. But as you probably know, Internet Explorer has problems with inherited values. And in the seventh version too. So for the job:
Expressions and currentStyle to help:

  font {
 color: inherit;  / * Normal browsers * /
 color: expression (this.parentNode.currentStyle ['color']);  / * IE * /} 

Works? Great, let's go further:

  font {
 font-family: inherit;  / * Normal browsers * /
 font-family: expression (this.parentNode.currentStyle ['fontFamily']);  / * IE * /
 } 

Everything is wonderful, except that Opera 9 does not inherit value for font-family . Fortunately, the font will suit us too:

  font {
 font: inherit;  / * Normal browsers * /
 font-family: expression (this.parentNode.currentStyle ['fontFamily']);  / * IE * /
 } 

With this sorted out. Let's go to the font-size property. Here, delicacy is needed, since the font size value is inherited with respect to the computed (computed) value. The previous expressions will not work here, since if the body has a font-size property value equal to 2em, the calculation of the font size value will start from this point. The browser will check the font-size value for the parent element of the font tag, which is 2em and will present a calculated value of 4em (2em from 2em). And this is not what we need. The solution is simple. You need to use an initial font-size value of 100% for all browsers. Let's add a few properties to an undesirable basefont tag to calm it down. Here is a complete list of rules for taming the font and basefont tags :

  font, basefont {
 color: inherit;  / * Normal browsers * /
 color: expression (this.parentNode.currentStyle ['color']);  / * IE * /
 font: inherit;  / * Normal browsers.  Font instead of font-size for Opera * /
 font-family: expression (this.parentNode.currentStyle ['fontFamily']);  / * IE * /
 font-size: 100%;  / * All browsers.  Sizes are inherited * /
 } 

Moving on. Let's use the basic technique to cancel the center, s, strike and u tags:

  center {
 text-align: inherit;  / * Normal browsers * /
 text-align: expression (this.parentNode.currentStyle ['textAlign']);  / * IE * /
 }
 s, strike, u {
 text-decoration: inherit;  / * Normal browsers * /
 text-decoration: expression (this.parentNode.currentStyle ['textDecoration']);  / * IE * /
 } 

It is finished! We "turned off" most unwanted tags, using only CSS and expression.
What about attributes? HTML4 includes a number of unwanted attributes that can badly spoil your nerves. Let's turn them on too. Start with align :

  * [align] {text-align: inherit;  } / * Normal browsers * / 

All is good, but IE6 does not support attribute selectors. Therefore, we need to modify the expression in order for it to check for the presence of the align attribute of the tag. Here's what happened:

  * [align] {text-align: inherit;  } / * Normal browsers * /
 * {text-align: expression (this.align? this.parentNode.currentStyle ['textAlign']: '');  } / * IE * / 

Next in line are the img tag attributes. In addition to the align attribute, we want to disable the border, vspace and hspace attributes. Since the values ​​of margin and border are not inherited, a simple rule applies:

  img {margin: 0;  border: none;  } / * All browsers * / 

This is where we face an unsolvable problem for IE6. vspace and hspace are not equivalent to the margin property in it, so IE6 will continue to display them. The only solution that occurred to me is to write a small script that will simply delete these attributes when loading a document:

  window.onload = function () {
 for (i = 0; i
 document.getElementsByTagName ('img') [i] .removeAttribute ('vspace');
 document.getElementsByTagName ('img') [i] .removeAttribute ('hspace');
 }
 } 

I would prefer not to use javascript , but in this case I just don’t see another alternative. So let it be. Now let's finish the type attribute in the ol tag:

  ol {list-style-type: decimal;  } / * All browsers * / 

And now the bgcolor attribute for body :

  body {background-color: transparent;  } / * All browsers * / 

Tables The final step. In the tables, in HTML4 / 4.01, there are a number of unwanted attributes that are actively used for page layout. But we do not want the client to use tables for layout? So let's turn off the width, height, bgcolor, valign and border attributes:

  table, tr, th, td {
 width: auto;  / * All browsers * /
 height: auto;  / * All browsers * /
 background-color: transparent;  / * All browsers * /
 vertical-align: inherit;  / * All browsers (including IE) * /
 border: none;  / * All browsers * /
 } 

Let's sum up:
Using CSS rules and minimal javascript, we managed to “turn off” most unwanted tags and attributes, while elegantly preserving natural inheritance. We do not need to “teach” the client, in any case he will have to use the correct markup. Taking into account one very important remark, it is very important to provide the client with a sufficient number of described CSS classes so that it is not limited in working with markup.
All styles together:

  font, basefont {
 color: inherit;  / * Normal browsers * /
 color: expression (this.parentNode.currentStyle ['color']);  / * IE * /
 font: inherit;  / * Normal browsers.  Font instead of font-size for Opera * /
 font-family: expression (this.parentNode.currentStyle ['fontFamily']);  / * IE * /
 font-size: 100%;  / * All browsers * /
 }
 center {
 text-align: inherit;  / * Normal browsers * /
 text-align: expression (this.parentNode.currentStyle ['textAlign']);  / * IE * /
 }
 s, strike, u {
 text-decoration: inherit;  / * Normal browsers * /
 text-decoration: expression (this.parentNode.currentStyle ['textDecoration']);  / * IE * /
 }
 * [align] {text-align: inherit;  } / * Normal browsers * /
 * {text-align: expression (this.align? this.parentNode.currentStyle ['textAlign']: '');  } / * IE * /
 img {margin: 0;  border: none;  } / * All browsers * /
 ol {list-style-type: decimal;  } / * All browsers * /
 body {background-color: transparent;  / * All browsers * /}
 table, tr, th, td {
 width: auto;  / * All browsers * /
 height: auto;  / * All browsers * /
 background-color: transparent;  / * All browsers * /
 vertical-align: inherit;  / * All browsers (including IE) * /
 border: none;  / * All browsers * /
 } 

Free translation and preparation of an article based on monc.se