養成好習慣的方法: 使用 CSS 關掉不建議使用的 HTML Tag 和 屬性

大家都很習慣使用 font, center, align, valign, bgcolor, border, width .. 的 HTML Tag 或 屬性來指定頁面呈現的模樣, 現在的做法是要把 HTML 原本該有的 語義 和 頁面呈現的樣式 做切割, 只要是頁面要呈現的樣式, 都應該交給 CSS 來負責.

但是一般人當然不會管這麼多, 只要 Dreamwave 打開, 看起來像樣就行了, 所以要改正此壞習慣, David’s Kitchen 提出的做法是, 用 CSS 把那些效果都關掉, 那使用者看不到那種效果, 久而久之就會放棄這種做法, 而依照你教他們的特定寫法去做(不過我是覺得, 老闆應該不會這樣想.. XD), 總之理想上就是這樣子~ 😛

下述摘要轉載自: David’s Kitchen 的 Disabling Deprecated HTML Using CSS

以下是不建議使用的 HTML Tag 和 屬性 列表:

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

註: 使用 YUI Reset CSS 這些 HTML 基本屬性要用都還是可以用的.(ex: <font size="+7"> 還是會把字型放大)

作者寫的 CSS/JS 如下, 用下述就可以把上面看到的屬性特性關掉:

<style type="text/css">
font,basefont {
  color:inherit; /* Standard browsers */
  color:expression(this.parentNode.currentStyle['color']); /* IE */
  font:inherit; /* Standard browsers. Font instead of font-size for Opera */
  font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */
  font-size:100%; /* All browsers. Sizes are inherited */
}
center {
  text-align:inherit; /* Standard browsers */
  text-align:expression(this.parentNode.currentStyle['textAlign']); /* IE */
}
s,strike,u {
  text-decoration:inherit; /* Standard browsers */
  text-decoration:expression(this.parentNode.currentStyle['textDecoration']); /* IE */
}
*[align] { text-align:inherit; }  /* Standard browsers */
* { text-align:expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); }  /* IE */
img { margin:0; border:none; }  /* All browsers. Borders & margins are not inherited */
ol { list-style-type:decimal; }  /* All browsers. Removes the type attribute */
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 (works in IE) */
  border:none; /* All browsers. Borders are not inherited */
}

</style>
<script type="text/javascript">
window.onload = function() {
  for (i=0;i<document.getElementsByTagName('img').length;i++) {
    document.getElementsByTagName('img')[i].removeAttribute('vspace');
    document.getElementsByTagName('img')[i].removeAttribute('hspace');
  }
}
</script>

這個是使用上面的 CSS 和 JavaScript 做一個 Demo: Deprecated HTML test page (關掉 CSS 就知道差別了)

相關網頁:

• 避免使用的 HTML Tag 及 取代方案