前端技術之難：CSS Hack之哈克歷險記

HTML是架構，CSS是表現。於是有人誤會，CSS只是一種美化網頁的手段，沒錯，是一種手段，但美不美還是得看你的圖像處理能力，然後，徹底發揮CSS語言編排出如你Photoshop所規劃出來的完美畫面。HTML和CSS都是基本的網頁語法，不論你用哪套網頁編輯軟體(Dreamweaver, NVU, Namo Web editor…)，通通都只是輔助，不管拖拉什麼現成的元件，當你檢視原始碼，通通都是一行行難以消化的編碼(code)，只是它們相對於PHP/ASP/JAVA而言又異常簡單，有了輔助編輯軟體，人人都可以把玩網頁，然後，入門門檻低的網頁設計，顯得沒什麼價值。

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

「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畫圖再匯入)，這些或許都可以在補習班學起來，很強，但不代表將來行走江湖只需要這一百零一招，語言和軟體版本不斷更新進化，甚至出現新技術取代掉我們現在所慣用的語言或軟體?所以走上這行，最基本要具備的大概是如小強般打不死+旺盛學習能力，而且最好發展除此之外的第二第三專長…

參考與引用：

分享出去吧!