為什麼有 <img> 這個標籤
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，整個複雜過頭，還有難解的用詞，據之前修課時的老師說是語言學家制定的，結果造成沒有工具很難寫，就算寫了沒驗證過我看也不敢拿來用。
09:29@CSS & HTML|迴響(1)|引用(0)
肆月 27Handle IE
暫時站本來用下面的語法來阻擋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
10:13@CSS & HTML|迴響(0)|引用(0)
參月 04Cross-Browser Inline Block
大約兩週前在 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。
01:40@CSS & HTML|迴響(0)|引用(0)
拾壹 22HTML 5 投影片
在HappyDesigner Meetup 4和摩茲連續聚 第三集用的投影片，由於是用 HTML + JavaScript 寫的，背景圖有點大，暫時還沒有 PDF 版，處理完之後會有比較小的 PDF，也會丟到slideshare上。另外有些我沒介紹到的東西應該會在之後發文章介紹吧～～
16:12@CSS & HTML|迴響(0)|引用(0)
拾月 22IE8標準模式將不支援CSS expression
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...
01:22@CSS & HTML|迴響(0)|引用(0)
拾月 11YUI Compressor
這東西好像很久以前有看過一次，那時不知道為什麼沒深入接觸（或許是看到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。
玖月 13CSS TIP - 縮排和文字垂直置中
今天要來介紹的這個CSS TIP，一部分是為了應付IE的box model才出現的。
首先，我有一個固定寬高的頁首區塊，也就是我接下來要介紹的CSS TIP所可以應用的地方，這種頁首區塊內的文字通常只有一行，其他類似的物件還有各種標題（h1~h6）、導覽列清單（li）等。這些區塊物件在還沒有任何設定的時候，裡面的文字通常都是貼齊左上角的，這邊舉一個 h1標題 的例子，它的 CSS Code 如下：
h1 {
font-size: 200%;
color: #fff;
background: #000;
height: 100px;
}顯示結果如下：
09:39@CSS & HTML|迴響(4)|引用(0)
捌月 28CSS大師的10條原則
原文：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點有做到吧...
00:40@CSS & HTML|迴響(2)|引用(0)
參月 17tfoot
tfoot是table裡面用來把表格列群組化用的標籤之一，專門用在表格底端的表格列，不過要注意的是他不能放在tbody之後，而是要用thead、tfoot、tbody這樣的順序才對。
00:25@CSS & HTML|迴響(3)|引用(0)
壹月 23W3C發佈HTML 5 Working Draft
W3C剛發佈的HTML 5 Working Draft，正熱，不過太晚了，我已經沒力看改了什麼東西，明天醒來應該也可以看到不少評論了吧。
不過我其實還是快速看過目錄，nl(navigation list)和h(heading)好像不見了。
01:59@CSS & HTML|迴響(0)|引用(0)
