大家都很習慣使用 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 就知道差別了)
相關網頁:
