養成好習慣的方法: 使用 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>