這週二我去 TOSSUG 講了 HTML 5 的新標籤和 Web Forms 2.0 ，講的當下感覺是還好，不過回來後回想才發現不少東西忘了講，大概整理一下，結果那些東西要再另外還蠻有難度的，一是量不夠，二是主題有點分散，所以當天就決定寫一篇 blog 來補充，先放上當天投影片：
目前語意網的兩個方向
這部份算是個人見解，實際情形我比較沒相關資訊查證。語意網最早的想法是擺現有網際網路上的資料轉換成有語意的格式，也就是 XHTML 2.0 的方向，不過實際上遇到的問題就是沒人想花這種人力成本來跟做這種事情，那時候 Web 2.0 的概念也還沒起來，結果就變成 W3C 制定他們的，實際上在提供服務的、用網路的自己開發自己的，當然最後的結果就是產生了 WHATWG 和 HTML5 ，總之現有網際網路上的資料這方向失敗了，但是同時在發展的 Web Service 卻開出了另一條新的路，也就是 Tim Berners Lee 目前主要的推動目標，公開本來不在網路上的各種領域的資料，如果有在看 TED 的可能有看過他的兩場 Talk。
這兩場 Talk 就闡述他這幾年在做的事，到處推動、遊說個政府、組織、企業公開他們手中的資料，我覺得他來做這件事真的是很有說服力，因為早在網路地圖風行的年代前，他家的 經緯度 就已經公開在網路上了（顯然都還沒遭到導彈攻擊）。
W3C 接納 HTML5 背後的意義
一千零一網 書中有提到 Tim Berners Lee 對於網際網路的願景是對所有人都是自由免費的，而且不應該由任何一個企業、團體所操控把持，包括 W3C 自己，這個想法讓我真是很佩服 Tim Berners Lee ，說我成為他的粉絲也不為過，當然現實世界不會這麼美好，大陸的 Great Wall 就是一個例子，之前微軟 IE 過高的市佔率也造成很多負面影響，像是讓整個網路發展停滯了好幾年。回到重點，W3C 接納 HTML5 這件事本身就是這個理念的實踐，證明了他們不是說假話。
HTML 砍掉重練、 ECMAScript 也砍掉過、那 CSS?
這幾年主流的文件結構、行為、表現三種分開的網頁編寫方式，其各自的代表技術其實就是 HTML、ECMAScript、CSS，不過其中兩者已經砍掉重練過了，分別是 XHTML 2.0 廢棄，改發展 HTML5，ECMAScript 4 (JavaScript 2.0) 廢棄改發展 ECMAScript Harmony，而且兩者都是因為過度發展的情形下，功能加太多，太理想化等，才被砍掉重練的，現在 CSS3 又有點肆無忌憚的一直加新東西，其實我還蠻擔心哪一天會不會也被砍掉重練的，大概變成像是某種必經之路的吧。
<article> 對搜尋引擎的影響
<article> 就我腦袋所想到的，其實對於搜尋的正確性應該會有很大的幫助，回憶看看你是不是有這樣的經驗，丟入兩三個關鍵字後，打開的結果網頁是個部落格索引頁，每篇文章都有摘要，然後卻發現你輸入的兩三個關鍵字分散在不同的文章中，當然每篇文章都不是你想要的，<article> 的出現就可以解決這樣的問題。
<p> 不只是段落
簡單說你的一段文字找不到適當語意的區塊標籤來包的話，都可以用 <p> ，詳細請參考 HTML5 Spec ，這以前對於過度的語意正確要求者來說也是不小的困擾～
Web Forms 2.0 支援度
那天我忘了提到 mobile device 像是 iPhone 就有支援了，不同的 input type 它會給你不一樣的螢幕小鍵盤，其他的平台我就沒看過測試，所以比較不清楚這樣，不過手機平台某方面來說因為沒有 IE 的包袱，所以開發起來比較可以開心的使用新東西，雖然有人擔心 iPhone 會變成下一個 IE 就是。
CSS3 的那一堆 - 開頭的屬性是哪來的
這只是順便提的，CSS 2.1 時就已經有規範 Vendor-specific extensions ，就是各家瀏覽器可以自己定樣式，當然是不建議使用，而目前想要用 CSS3 的話幾乎都要用這種寫法，原因之一是標準還沒完全定案，所以各家都先用這種方法來實作，等到哪一天定案了，在把對應的字串改過來就好了，當然這些自定樣式也會慢慢移除掉，所以別忘了最後還是要加一個非 Vendor-specific extension 的寫法，免得以後還要修改，當然如果最後定案的語法和你現在寫的不一樣，還是免不了，所以現階段我有用的話會盡量寫簡單一點，像是圓角框就盡量四個角一樣。
不願意提的，HTML5 何時定案？
最後一次聽到消息是 2022，不過不表示那時候才能用，HTML5 比較特別是可能 2012 年就會把功能都定好，剩下10年是推廣實作修改階段，到 2022 要成為正式標準時，應該是直接可以用的狀況，不過這是兩年以前的消息了，我覺得比較可信的版本是，沒有定期限。
當然還有更不願意提的問題， CSS3 何時定案？答案是完全沒消息，甚至我想還會繼續冒出新東西，雖然 3D Transform 就已經很令人驚嚇了。之前甚至還有 Safari 先說他們做了什麼新東西，測試版也出了可以用，但是過了一陣子 W3C 那邊才看的到那東西初版 Working Draft 的情形。
參考網站
最後放上一些參考網站：
- HTML5 Spec ，新的 HTML 標準在標籤語意上比以前詳細很多
- HTML5 Doctor ，有一系列和新標籤及語意相關的文章
- Dive Into HTML 5 ，內容很棒的電子書
- HTML: The Markup Language ，新的 W3C working draft，裡面有定標籤的預設樣式
- html5shiv ，讓 IE 也可以給新標籤套上樣式的小 script
另外新出的 HTML5 For Web Designers 內容似乎剛好就是我這次分享的主題（感謝 even 情報）。
dive into mark 在去年11月有一篇文章 Why do we have an IMG element? ，裡面翻出了很多當初 HTML 剛起步時的討論，當時就在針對網頁上的媒體內容要怎樣放進去作了不少爭論，過程有興趣的可以自己去看，結果還是先下手為強，先做出來的贏， mark 歸納出的幾點結論中有一點蠻有趣的：「HTML一直都是瀏覽器製造者、標準制定者、網頁製造者和其他想參與其中的人所討論而得的，而多數成功的標準都是 retro-specs （實作、制定標準同時，甚至先實作），有些人認為標準應該保持純潔，不要受到瀏覽器製造者或網頁製造者的影響，這完全是錯誤的。」HTML 5 也是一個 retro-specs ，新功能都是跟著網路的變化所產生，像是 拖拉 API 、 近端儲存系統 等，最近還多了 device 標籤 和 stream API ，這些都是現在大家需要的功能，而目前只能用其他方法弄起來，像是拖拉要去算位置、範圍，近端儲存要裝像 Google Gears 的外掛，要抓 webcam 畫面或是撥影片則要用 Flash 或是 Java，未來這些功能都會變成瀏覽器原生支援，甚至用顯示卡 加速畫 3D 圖形 都不是問題。
另外可以拿來作反例的我覺得是 XML Schema ，整個複雜過頭，還有難解的用詞，據之前修課時的老師說是語言學家制定的，結果造成沒有工具很難寫，就算寫了沒驗證過我看也不敢拿來用。
暫時站本來用下面的語法來阻擋IE使用者：
<!--[if IE]><style type="text/css">* {display: none; !importanat}</style><![endif]-->
不過用IE還是看的到 title，不太愉悅，今天 EvenWu 推薦我另一個弄法：
<!DOCTYPE html>
<!--[if !IE]>-->
<html>
<head>
<title>blah...</title>
</head>
<body>
blah blah...
</body>
</html>
<!--<![endif]-->
現在用 IE 來看感覺真是棒XD
大約兩週前在 Mozilla Webdev Blog 上有一篇 Cross-Browser Inline-Block ，介紹如何用 inline block 代替 float 排列，好解決方塊高度不同時，float 排列會造成的問題，當然，這麼新(?)的 display 屬性，必定會有瀏覽器不支援，加上其實目前各家瀏覽器的行為表現都還不是很一致，所以整篇文章大部分的篇幅是在處理 cross browser 的問題。那時候 DK 長輩說我要是有什麼想法的話可以發一篇，那時候雖然覺得好像有什麼可以講的，不過直到昨天看了 flickr 的原始碼時才知道我想講的是什麼。
首先，其實這篇文章介紹的方法我覺得做的很好了，CSS hack的部份也還算乾淨，不過我很龜毛，覺得用到 inline 來做這種像是 block 的東西就是覺得怪怪的，昨天在看 flickr 時突然就在想：「他們是用什麼方法來排照片的？」打開原始碼一看，是 table，flickr 是用 table 來排照片的，我才回憶起之前買的 Everything You Know About CSS is Wrong 這本書，裡面主要介紹到的東西是 table-cell, table-row, ... 等表格元件的 display 屬性，又稱為 css-table，簡單說就是可以拿其他標籤來做 table，這些 display 屬性值可以讓 HTML 文件保持它比較適合的語意，但是顯示上又能夠和 table 一樣排列，雖然我在 Everything You Know About CSS is Wrong 的書評中寫到我覺得拿 css-table 來排版還是怪怪的，但是如果是拿來排照片、商品目錄這種，我就突然覺得還不錯，不過 css-table 很理所當然的和 table 一樣，一列要幾個 cell 在寫 HTML markup 階段時就要決定了，不像 float 或是 inline-block 可以透過控制長度來調整，真的達到文件結構和顯示分開的理想。
用 css-table 來排還是有它的好處，最明顯的就是同一列的 cell 高度都會一樣。想要元件高度會自動調整，然後同排的還會一樣高，目前只有用 table 的解法，不論是真的用 table 還是用 css-table，當然，盡量避免非表格資料的東西使用 table 標籤，所以比較好的處理方法還是 css-table。
兩種方法各有他的優缺點，還很難說哪種方法比較好，先不考慮 css-table 方法在舊瀏覽器的支援度問題的話，我是覺得可以用整個版面的 layout 是固定寬度還是自動寬度來決定用那個方法比較好，如果版面是固定寬度的話比較適合用 css-table，反之則是用 inline block。
在 HappyDesigner Meetup 4 和摩茲連續聚 第三集用的投影片，由於是用 HTML + JavaScript 寫的，背景圖有點大，暫時還沒有 PDF 版，處理完之後會有比較小的 PDF，也會丟到 slideshare 上。另外有些我沒介紹到的東西應該會在之後發文章介紹吧～～
IEBlog的消息，CSS expression就是可以在CSS value裡面進行一些簡單運算，像是「10%+4px」這樣的長度設定，雖然記憶中W3C也曾經有過草稿，不過總之這就是不太有人使用的東西，所以一直以來也只有IE支援，然後這次IE Team終於決定要把它拿掉了，不過Ajaxian上的第一篇回文很XD：
I can't believe they're doing such big changes and don't want to rename their XMLHttpRequest object... pff...
這東西好像很久以前有看過一次，那時不知道為什麼沒深入接觸（或許是看到java就逃跑了），期間還有試過perl的javascript compressor，不過用起來都不是很方便，直到前陣子看到DK示範了一下才又提起興趣，可惜我的blog剛搬離研究室的電腦，而且linux上也不像FreeBSD上有port好的，所以就變成需要在windows下使用，用命令列操控是還算方便，不過因為是包成jar檔，檔名又蠻長的，打命令的時候還蠻辛苦的，所以就寫了個batch檔案來處理：
SET PP=D:\tools\yuicompressor\
java -jar %PP%yuicompressor.jar --charset utf-8 %1 %2 %3 %4 %5 %6 %7 %8 %9確定檔案路徑和基本的選項之後，把這個batch檔丟到path下的目錄，以後就可以用這個指令來壓縮js和css檔了，不過在我自己的電腦上還有遇到別的問題，就是.bat檔不會真的執行，不知道做了什麼事才變成這樣，總之又去找了bat2exec把bat檔轉成com檔，不過這個小程式出處不明，希望沒有什麼木馬在裡面@@。
事後感想是windows的命令列能不能好用一點啊Q_Q。
今天要來介紹的這個CSS TIP，一部分是為了應付IE的box model才出現的。
首先，我有一個固定寬高的頁首區塊，也就是我接下來要介紹的CSS TIP所可以應用的地方，這種頁首區塊內的文字通常只有一行，其他類似的物件還有各種標題（h1~h6）、導覽列清單（li）等。這些區塊物件在還沒有任何設定的時候，裡面的文字通常都是貼齊左上角的，這邊舉一個 h1標題 的例子，它的 CSS Code 如下：
h1 {
font-size: 200%;
color: #fff;
background: #000;
height: 100px;
}
顯示結果如下：
這通常不是我們想要的效果，我們可能想要有一點內距、文字水平置中、垂直置中、或是把文字藏起來，用背景圖來代替，不過隨便設定padding，可能就會遇到IE的box model問題，雖然IE 7已經可以用標準模式，但是IE 6的使用者還很多，目前還不能忽略這個問題。除了垂直置中以外，其他幾種要求大概都可以簡單達成，如果是用表格排版的話連垂直置中也不是問題，不過基本上我不考慮表格排版就是，一般的作法有CSS hack和多層div兩種，我要介紹的則是用line-height和text-indent兩種屬性來達到我們的需求，不用CSS hack和多層div。首先就來把文字垂直置中吧，這邊我用的是line-height（行高）這個屬性，只要設定的高度和區塊高度一樣（此例為100px），這單一行的文字就會垂直置中了，結果如下圖：
如果想要文字水平也置中，只要加上 text-align: center; 就可以了，不過我比較喜歡讓文字靠左，然後留一點邊距，讓文字不要這麼貼齊邊緣，這時可以用text-indent（首行縮排）這個屬性，因為內文只有一行，所以可以偷偷用這個屬性來做出padding-left的效果，如果文字是多行的話，大概上個行高設定就讓你的內文爆炸了吧XD。加上15px縮排的結果如下圖：
text-indent除了可以製造內距的效果之外，還可以用來把文字隱藏，免得檔到背景圖，只要把值設成負的，例如-1000000px，文字就會跑到視窗可視範圍之外，要保險一點還可以加上 overflow: hidden; 的設定，讓超出區塊範圍的東西隱藏起來。以上就是本次的CSS TIP內容，希望能幫到大家，下篇應該會說javascript的東西吧。
補充：考量到親和力的情況下，還是比較推薦使用img標籤配合alt屬性的替代文字的，這樣在圖片讀取不到的狀況下，也還是看得到文字內容。
原文：10 Principles of the CSS Masters
1. 保持CSS簡單乾淨 - Peter-Paul Koch
少用CSS hack。
2. CSS宣告盡量放進一行 - Jonathan Snook
舉例來說：
body {margin: 0; padding: 0; background: #fff;}不過這工作我覺得交給機器來做比較好。
3.使用簡化的寫法 - Roger Johansson
使用如下的簡化寫法：
border-width: 0 1px 2px 3px;而不是用border-top-width、border-right-width、border-bottom-width、border-left-width分開設訂定。
4.讓區塊元素自己填滿空間 - Jonathan
設定width的話，就不設定margin、padding，設定margin、padding的話，就不設定width，這樣可以迴避掉IE的box model錯誤。
5.用float元素自己clear float - Trevor Davis
其實是利用 :after { clear: both; }來做啦。
6.使用負的邊界直 - Dan Cederholm
讓物件突出更顯眼。
7.使用CSS把版面置中 - Dan Cederholm
固定寬度的版面配置，盡量使用CSS把內容置中。
8.使用正確的DOCTYPE - Jeffrey Zeldman
好處多多。
9.使用CSS把物件置中 - Wolfgang Bartelme
雖然不是指整個版面而是指所有想要置中的東西，不過原文的例子還是把網頁主內容來置中，結果和第七點蠻容易混淆的。
10.善用大小寫轉換 - Trenton Moss
和中文語系使用者關係不大。
最後看下來，扣掉第10點，9點中我有7點有做到吧...
tfoot是table裡面用來把表格列群組化用的標籤之一，專門用在表格底端的表格列，不過要注意的是他不能放在tbody之後，而是要用thead、tfoot、tbody這樣的順序才對。