製作網頁時，必經流程之一是隨時開啟IE、Firefox、Chrome甚至Opera和Safari檢視自己的html/css有沒有跑版。最近我遭遇到的一個問題是：明明把font-size調到75%，IE和Firefox都很乖乖的顯示小小的字，偏偏Chrome就是硬不鳥我。原來，是Chrome本身預設最小字型為12px (關於px、%與em等等的差別請見此)，75%絕對比12px小，但撼動不了Chrome預設值。我們當然不可能要使用者(客戶端)去修改Chrome設定，所以就走CSS的方法，很簡單，在選擇器(Selector)下這個語法：

-webkit-text-size-adjust:none;

範例：

.smallText {

font-size:11px;
-webkit-text-size-adjust:none;

}

那麼不管你的font-size下多少，Chrome都會乖乖聽話了。

為何這語法有用？或許因為Chrome是使用webkit引擎，在CSS中有一套因應webkit的寫法，自然乖乖聽話了。

※ 2011/3/31  推薦延伸閱讀：小心使用 -webkit-text-size-adjust: none; (by Frank的五四三)

有客戶已經開始使用IE8 (好羨慕…貴公司好有錢...電腦得先跑得動Vista才能安裝IE8的)。

等等…好像有些弔詭的事情。

那Firefox和其他瀏覽器怎麼辦？

安全性有問題？

「你們應該義務(=free)把我網站調成跨瀏覽器的啊？」

結論

客戶或他人就因此輕忽了網頁設計師。

「div排版？那是什麼？能吃嗎？」(←非真實，僅模擬客戶對話)

因為客戶自覺美術能力宇宙無人能敵，所以最後決定自行用Illustrator做版面(謎之音：殺雞焉用牛刀？Photoshop就夠了。)，交給我切成HTML/CSS。但是，我只能用table排版，因為對方要求網頁將來要自己更新部分內容，如果我完全用div+css去做，恐怕它們排版時會剉屎，然後對我千刀萬剮─根據以往配合經驗，千錯萬錯一定是我們的錯。

「不要亂改我的圖，好嗎？」(←半真實，僅模擬客戶對話)

國外有個廣告icon常常在各大知名tutorial部落格出現：Psd to HTML。就是，大約48小時內把你的版型圖檔排成HTML/CSS。酷~太強了！這必須熟通HTML、CSS、Javascript才能「無痛」辦到。大多數客戶也非常希望所見(版型)即所得(網頁)，更「專業」一點的客戶甚至拿IE6、IE7、Safari、Firefox2、Firefox3來跟你對稿：請讓我的網頁在這些瀏覽器中通通長得一樣。龜毛到連1px都要和我計較…but…在illu用pt單位做圖的，是要如何和我計較螢幕解析度基本單位px(像素)？因為客戶永遠是對的，而所謂的「專業」─最近聽到一句話說：專業的人不動怒的。所以我要展現我的專業(只是內心充滿很多下流的OS)。

過去的觀念會認為：那我必須精通各大瀏覽器的CSS Hack寫法、各個擊破以滿足客戶需求。近1-2年來我卻注意到Web標準這件事。

我不想再讓css中充滿for IE、for FF等等的註解，針對各大瀏覽器寫Hack，盡量用最簡單卻換個觀念的方法盡量去達到畫面能通過各大瀏覽器的考驗，回頭打開研究html的第一行：<!DOCTYPE >。

以前美國文學的T老師給我們閱讀馬克吐溫的哈克歷險記，恰好google翻譯網頁時把hack也翻成哈克，讓我想到，那個不想受到嚴肅寡婦拘束的哈克，喜歡自由自在的冒險，其實<!DOCTYPE >就是那個寡婦，代表著規範，hack終究只是取巧的一種做法。

很多會使用Dreamweaver卻不看html的設計師是否注意到這個不起眼的宣告？即使熟悉html的我，長久以來都忽略這一行，其實最重要。這一行將會告訴你的瀏覽器：請用標準模式解析html tag和css！如果這行拿掉，瀏覽器會進入無政府狀態(尤其是IE…)，當你在無政府混亂中要如何用CSS HACK去力挽狂瀾？於是，最好的做法就是了解W3C制定的web標準，HTML中給予適當的文件宣告，盡量少用CSS HACK寫法來做編排，畢竟瀏覽器的版本更新得算很快，ex:IE8據說要出來，然後客戶跑來說畫面在新瀏覽器壞掉，想酌收修改費用又有點說不過去，幫改又很不爽快，而且，又不斷有後起之秀如google chrome，如果哪天真的進入瀏覽器戰國時代、百家爭鳴，1個SELECTOR裡面大概可以為padding寫10幾種HACK?結果戰死沙場的是網頁設計師。

css還沒有那麼風行時，已經有設計師落跑。作Flash動畫都比排html/CSS簡單有趣多，可是，ActionScript3出現了，物件導向式的語言，看起來比htmo可怕幾倍，不去痛苦學起來，只能停在影格動畫這小範圍內，然後，又有設計師夢碎落跑。所以那些連鎖補習班總是宣傳去那邊就能變成網頁設計達人，薪水幾倍跳，在我眼裡都很不真實。當你決定成為網頁設計師，除了美學，還要懂得相關語言、軟體操作和結合應用(至少我聽過有設計師寧願做點陣圖放到flash跑出鋸齒，卻不知道有as語法消除鋸齒or用同是向量的illustrator畫圖再匯入)，這些或許都可以在補習班學起來，很強，但不代表將來行走江湖只需要這一百零一招，語言和軟體版本不斷更新進化，甚至出現新技術取代掉我們現在所慣用的語言或軟體?所以走上這行，最基本要具備的大概是如小強般打不死+旺盛學習能力，而且最好發展除此之外的第二第三專長…

參考與引用：

• Integrated Web Design: CSS Beyond the Retrofit
• 简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera
• [XHTML] DOCTYPE (引用外部 DTD 規範)
• 指定网页的doctype解决CSS Hacking方法总结
• Cafe Phespirit – CSS Hacks
• In-CSS hacks

RSS示意圖

這篇要寫給完全沒用過RSS閱讀器，不知道什麼是RSS的朋友。找了滿多資料，都講得滿專業，迴響中卻說老人不屑用也不知怎用。其實一般老人不需要知道原理，只要知道：它好不好用。東西好用，想用了，才願意突破自己舊有的訂閱習慣、瀏覽網站的方式。請看上圖，應該多少能理解，通常不管自己在哪裡寫部落格，都有提供一顆﹝RSS訂閱﹞的按鈕，只要寫部落格，有人按了你家的RSS訂閱鈕，那個人可以不用上你網站，用閱讀器就能隨時知道你發表了新文章。反推過來呢，今天我看到一個不錯的寫手blog連載長篇小說，我只要訂閱它RSS，往後用閱讀器即時讀取有無更新文章即可，不用天天到他blog報到、深怕錯過精采章節。

可是老人就是時間多啊，愛上網慢慢看呢？我相信我這老人和大家一樣，電腦看久了，眼睛不爽快，或是去了網站卻撲個空，沒看到我想要的，內心不爽快。咱們為了維護眼睛健康，還是來嘗試看看使用閱讀器訂閱喜歡的站吧！

閱讀器，可以是種軟體，而且有好幾種牌子，就像瀏覽器，有IE牌、Firefox牌…等等。可是把閱讀器安裝到家裡電腦，萬一我在其他地方上網，想訂閱的時候怎辦？為了便利、不受限地點，建議使用網站提供的個人化首頁來訂閱喜歡的站。首推網站是Netvibes，如果懶得新註冊帳號、怕接觸新環境，建議可使用大家熟知的Google，它們有個iGoogle，帳號當然和你的Gmail通用，不用多個帳號了。如上圖，當你訂閱了9個網站/部落格的RSS，只要一上去個人化首頁，就同時讀取9個站點的最新文章標題。

要怎樣訂閱呢？

只要該網站或部落格網頁上有以下這些圖示，給它按下去就對了。

接著會進入一個很單純排版的網頁，請複製那網頁的http網址，結尾通常是.xml，然後到Netvibes新增一個消息來源，貼上那網址後按照指示就完成訂閱了。

用Netvibes訂閱

如下圖，用iGoogle的，可能更方便，因為按下RSS訂閱鈕後，出現的xml網頁上方通常也提供快速訂閱的下拉選單，裡面通常有預設Google Reader(咕狗閱讀器)，那更可省去手動貼網址的動作。只是我個人覺得在自由方便的範圍內，還是想保留手動新增消息來源的步驟，確保我沒訂錯或漏訂，然後即時安排新消息來源在Netvibes的版面位置。老人就這樣，DIY樂趣多嘛。

這兩個個人化首頁使用起來都很直覺，不用怕難以理解，畫面上一個個區塊都用拖拉的，常看的資訊放最上面，資訊太多時還有分頁頁籤可以新增，收錄更多消息來源(=你訂閱的)。個人化首頁好用的地方，除了讓我們訂閱想看的資訊，也提供很多現成的小工具(Widget)，可立即抓來用，譬如天氣預報、主要大報的新聞、即時檢查信件等等，而Netvibes更有趣的地方是允許使用者多一個玩法，把原本很私人的個人化首頁(你訂的東西當然自己看得到而已囉~)，透過一個按鈕，可以發布轉成公開的個人首頁。Netvibes把這項服務取名為宇宙(Universe)，長什麼樣子呢，可以來瞧瞧我的小宇宙。

不管私人的首頁或公開的宇宙，背景同樣提供許多現成主題自行套用，每個框框的顏色也可以自訂，看我的小宇宙，就知道我都在看什麼資訊，我的小宇宙第一頁就是抓了Netvibes提供的Widget，像是行事曆、待辦清單、Wall(類似碎碎唸)等等，利用這些漂亮、現成的小工具，可以玩更多東西，最近就發現一個很棒的範例：

FreeLand 的小宇宙 – http://freeland.no-ip.org/

他善用Netvibes提供的Widget，打造出個人網站，例如Wall這工具不見得要拿來寫日記、發牢騷，也可以當作公佈欄。

總之，歡迎嘗試看看喔！

最近整理代表作，想起這家公司。還有另個原因則是…深感某些男性客戶的優柔寡斷，百思不解：為何我當初可以和這家公司的女性負責人合作得如此明快「有展結」(←請台語發音)呢？

成為網頁設計師之後，很難能作出連自己都很「甲意」的作品，因為往往都在配合客戶的審美觀去作微調，這邊調調、那邊調，很像被「整形」過後，有種說不出來的奇怪感，可是客戶卻滿意了…那我也跟著微笑：「x的，老娘終於不用改來改去了！喔耶！」

不過，這個作品我很滿意。

當初那位負責網站對稿的A小姐，來公司一趟，直接把所有她找過的參考站秀給我看，一一解說她們公司所喜歡的表現方式，想要走歐美風格等等…經過那次完整的溝通，讓我很明確知道「她要什麼」，而我所設計出來的網頁，第一次風格提案就通過了，只有banner的部分需要修改。緊接著動畫製作、內頁切版排版、修改錯字什麼的…大概不到2個月就結案完工！天啊！超級順利的一個案子。

A小姐不是那種隨便做事的人，開會那天她就準備充分，我想不懂設計的她並沒有什麼設限或底圖，可是，她知道她們公司想要呈現怎樣的風格，用別人的網站和我溝通。她說話方式很簡單俐落，沒什麼贅詞，會詢問我的意見，然後馬上作出一個她覺得圓滿的決定，那天會議一點都不冗長，時間剛剛好，溝通得剛剛好。

最近配合的客戶呢，是兩位好好先生和我對稿，就真的是「想太多」類型。

問我這樣可否改、那樣可否作得到，才下決定是否要改，有趣的是，問也是白問，就算我說改起來很麻煩，最終他倆還是決定要改…搞得我很想說：沒有東西不能改！沒有畫面是做不到的！別問我了~要改什麼就直說啊~可是呢，好好先生們又說，怕改了會浪費太多時間…厄…和他們對話下來，感覺好像鬼打牆！明明問的問題是：能不能改？我說不能改，他們也堅持要改，已經代表他們明知道重工卻還是想改，但是要怎樣改才有效率，應該是我們的問題─我們執行的人才會懂得怎樣改的快，好好先生們在那邊好心的想破頭…真的是想太多。

A小姐還有一個優點，她認為，我們公司是專責於網頁，所以風格上的事都交給我們決定。她願意把部分權力賦予我們去利用，這是一種很好的信賴。

好好先生就相反了。他希望table不要有灰色的底，太陳悶，還要我用我的專業來重新配色…囧…就是我的專業驅使我選擇淡灰底來搭配的啊…我跟朋友開玩笑說，下次用顏色之前，我可能要先拿塔羅來算這位客戶不喜歡什麼顏色，因為我的設計專業雷達無法偵測出客戶的喜好，讓我感到好失敗。唉，人家facebook也有灰色底，還不是照樣一堆人愛用。

抱怨完畢…

明快果決、知道自己想要什麼的客戶，真是可遇不可求，我和A小姐都不需要委曲自己來配合對方，因為她已經給我充分發揮的權力以及完整的資訊，我們只是很愉快的合作把事情處理好。值得稱讚的一點是，A小姐僅僅是受雇於人的，她需要對上司有交代，但卻可以一方面信賴我們，事前先跟公司人員討論過想要的風格，總結給我們，這才是一個真正會掌握時間、事半功倍的強者。