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

參考與引用:

0 Shares:
1 comment
發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

You May Also Like

Painter彩繪學習之水彩作品

2年前從網拍買到將近5折的課程券,期間沒空去上,後來變成好像沒什麼課程好上,剛好最近對Painter有興趣,大概9月份就報名了,沒想到課程一直招不滿學生,不斷往後延期,終於在12月份正式開課…好啦,很興奮的去,結果有點敗興而歸。

IE8災難來了,設計師吐血了

有客戶已經開始使用IE8 (好羨慕…貴公司好有錢...電腦得先跑得動Vista才能安裝IE8的)。 網頁設計師要驚慌了,萬一客戶來幹譙說在IE8下有地方跑版了,又要改到死。 不過,最終極快速的解決方法(該站連不上只有頁庫存畫面)轉貼於此:

速度,是一種生活態度。

創意課程進入了第三週。 上週的發想主題是「光」,我表現的很遜…太保守,老師直接對我說,想法要再更放開一些,這裡是自由發揮的地方,不是在我那個小小的、封閉的公司裡。為了補強,改善,我檢討了自己,這一週很認真地思索主題「速度」到底是什麼。每個人至少要有三個作品(不限手法)呈現主題,我已經準備好兩個,還在苦思第三個。 就在上課前一天的週五晚上,老妹約我去永康街附近買精油保養品,順便吃吃飯。沒想到這趟旅程讓我振奮了起來,首先,販售天然保養品的小店還有脈輪精油可以當占卜般抽選,看看自己的身體狀況,和藹的店員還幫我們免費測驗自己屬於印度阿育吠陀平衡精油中哪種屬性的人,把適合的芳香精油滴到身上,我們兩隻手臂都是好香的味道,塗滿了各種保養品或精油,害我回家都不想洗澡洗掉。在店內逗留了快一小時,兩人都還沒吃晚餐,走到了一家上海點心叫做高記,享用了叉燒包、腸粉、清爽的豆腐細粉、美味的蘆筍牛肉炒糕以及非常鮮甜的蟹黃燒賣,真的好滿足、好享受。最後老妹去買好吃的芋頭冰,一起走到旁邊的公園邊吃邊休息。於是這張照片,成為我的作業之一。