[心得] 給網頁設計師的建議

看板Web_Design作者 (EvenWu)時間11年前 (2012/12/23 18:31), 編輯推噓50(500143)
留言193則, 38人參與, 最新討論串1/3 (看更多)
原文 http://blog.evendesign.tw/post/38567423298/web-designer 轉錄 前陣子因為案件的需要,面試了約 20 位熟悉 CSS 的網頁設計師。為了提高面試效率, 特地設計了一份 CSS 考題來進行篩選,考題雖命名為「煉獄CSS」但事實上非常初階, 我認為都是一些必須知道的事情。 由於面試過程是一對一,所以不會有互相影響的狀況。面試者來信履歷都極有自信, 幾乎都強調通曉 HTML/CSS 設計,經驗豐富,希望能盡力接下案件。但透過面試, 發現有九成面試者不但無法答題,且錯誤答案竟然也雷同,讓我覺得一定要特地記錄 下來。 首先來看看考題,總共十題,但多數人三題錯,就請回了。所以我只寫出這三題。 考題在現場有實際的 example 頁面、面試者可以自由開啟 Inspector 或是 上網 google。(也就是有上機啦...) === 第一題、不同瀏覽器的預設樣式不同,要怎麼解決? 正確答案:reset.css 或是 normalize.css,如果有使用過 css framework 也多半是先行採用了這兩個重設 CSS 的方式。 原先設計這一題的用意是熱身,沒想到在這邊就攔下了九成的網頁設計師… 多數人回答 不出預設樣式不同要怎麼辦,而是回答「針對不同的瀏覽器寫 css hack」有經驗的 設計師就會知道,這是非常糟糕的答案。 第二題、如果一個X元素內的子元素通通 float: left 請問元素本身會有 什麼狀況?如果我要在X元素內下背景,卻沒有顯示,請問如何解決? 正確答案:X元素本身會沒有高度,必須實作 clear-fix (self-clear) 或是在內部 塞任一新元素並設置 clear: both X元素才能包覆子元素 這一題也是很基礎的題目,如果回答不出來,可能連二欄式的版面都無法完成。 但仍然有高達九成的人回答:「將X元素本身設置 height 就可以解決」這是一個恐怖的 答案,很有可能在上線的時候就立刻破版。 第三題、為何 a 元素的寬度設置了 width: 150px 但是寬卻沒有 150px 呢? 正確答案:將 a 元素設定 display: block 或是 display: inline-block 我記得這一題也只有三個人答對,實在太令人驚訝了。這都是非常簡易的問題,絕非煉獄 等級的考題。大部分的人要求 google 此問題。或是在 inspector 進行「試誤法」, 某些人誤打誤撞找對了答案,但明顯不是真的知道解答。 === 雖然僅面試了 20 個網頁設計師,不代表全部的現況,但這些錯誤答案的普遍性, 確實存在,令人不安。希望能夠寫出問題,整理後建議如下: 建立資訊流觀念 很多人認為網頁只是網路上的平面,但網頁不是一張在瀏覽器的畫布。 網頁是一個排版系統,是資訊流。CSS 不只是制定位置、寬高,而是來制定排版規則。 要注意「寬高」是不定的這件事,也是一個基本觀念。熟悉 HTML/CSS 排版的設計師, 了解這點應該是基本功了。你看到的高不是高,而是讓內容多寡來決定外面的元素多高。 先打好基本功,再追求新規格 有不少面試者熟悉 CSS3 的新規格,幾乎都知道 border-radius、box-shadow… 等, 卻無法分辨 block 與 inline 的差異,也不知道哪些元素預設就是 inline, 有點像是小學沒念,直接跳級到高中的感覺。 這是因為網路範例的氾濫造成的,當你使用了別人的範例,基本功自然就不太需要, 錦上添花即可,非常速成,再去找些刺激、裝飾性的 CSS3 … 但一個 <span> 元素該如何 讓他有寬度,需要下 display: block 改變原本 inline 的類型,就考驗了你是否原本 就知道 <span> 預設是 inline 的一員。這些知識僅需耐心的買一本 CSS 書籍, 從頭讀起即可。 保持追根究柢的精神 我設計的這些問題,絕對是在進行每個案件都會遇到,而專業者應該是熟能生巧、 腦筋就內建解決方式,不用進行查詢或試誤。來面試的設計師,也都做過不少作品, 必定遇過這些問題,也曾解決過。但解決後沒有去理解為什麼, 缺乏理解的後果就是:每次遇到問題都要重新查詢、對於新產生的問題也完全 沒有頭緒。 所以當你遇到問題的時候,去問人、google 是很好的,但不要光拿著答案回來 copy / paste 上去,看到問題解決就算了,務必要保持「為什麼會發生、 為什麼可以解決」的思考,去追問給你答案的人,或是仔細看看解題文章。事後 多多實驗,重現問題,也能重新解決。 如果你追根究柢,其實也有可能因此多知道更多 CSS 的相關常識,甚至研究出比別人 給你的還更好的解決方法。 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.34.100.58

12/23 18:40, , 1F
我也不會 QQ
12/23 18:40, 1F

12/23 18:40, , 2F
reset.css到底之前在板上看過,但沒用過
12/23 18:40, 2F

12/23 18:43, , 3F
你的第三題,說實在的,光題目我看不懂你要問什麼
12/23 18:43, 3F
抱歉啦,因為實際答題時是有上機的,光看敘述如果對相關名詞不是很懂 確實會看不懂

12/23 18:44, , 4F
是說..... 即使是現在,很多人都還在用table排版的.....
12/23 18:44, 4F

12/23 18:45, , 5F
尤其是已經寫了五年、八年的系統..... 這種現象還蠻嚴重的
12/23 18:45, 5F

12/23 18:46, , 6F
或是.... 用了一堆frameset來排版之類的
12/23 18:46, 6F

12/23 18:47, , 7F
這種寫法對SEO很不友善,但是我看到的那個ERP、EIR系統就這
12/23 18:47, 7F

12/23 18:47, , 8F
樣幹 orz.....
12/23 18:47, 8F

12/23 18:56, , 9F
ERP會需要SEO嗎
12/23 18:56, 9F

12/23 19:14, , 10F
不需要,所以..... 主管就繼續這樣用,即使對外網站也是這
12/23 19:14, 10F

12/23 19:15, , 11F
樣搞。看見搜尋引擎排的很後面,就想花錢去做排名....
12/23 19:15, 11F
封閉系統當然沒什麼SEO的問題,只是說架構不好,未來也很難維護或擴增

12/23 19:23, , 12F
我是初學者 大致上都看得懂欸@@
12/23 19:23, 12F
所以說你有基本功,但是看的懂跟突然被問,可能不太一樣

12/23 19:28, , 13F
後面的建議 資訊類的工作都很受用
12/23 19:28, 13F

12/23 21:04, , 14F
我也覺得如果你開的這些題目不會,蠻誇張的...只是,
12/23 21:04, 14F

12/23 21:05, , 15F
我的小建議是,題目要再清楚明瞭一點,我2.3題是看你的
12/23 21:05, 15F

12/23 21:06, , 16F
說明才知道,你的問題是什麼XDD 目前身為前端工程師
12/23 21:06, 16F

12/23 21:06, , 17F
的一點小建議,因為我是本來都做設計,其實我發現有時
12/23 21:06, 17F

12/23 21:07, , 18F
程式跟設計人員在表達跟溝通模式還是差很多XDD
12/23 21:07, 18F

12/23 21:13, , 19F
To LA大:不只TABLE,還有一種流派是用CSS樣式中的
12/23 21:13, 19F

12/23 21:16, , 20F
dispaly:table-cell排版,之前幫人改到過,很想砸電腦
12/23 21:16, 20F

12/23 22:45, , 21F
我是覺得這些題目不適合用紙本考,但面試透過引導應該是
12/23 22:45, 21F

12/23 22:45, , 22F
不錯的考題。
12/23 22:45, 22F
回答以上大大的疑問,當場不是紙本考題阿!我上面有寫是上機阿 :)

12/23 23:01, , 23F
說這些不會的前端設計師該好好專精不要接超過本分的案子了
12/23 23:01, 23F

12/23 23:02, , 24F
inline跟block element是我在教學生html跟css最基本的基本
12/23 23:02, 24F

12/23 23:03, , 25F
基本弄不清楚只會一直重複寫一堆覆蓋樣式 不該把時間花在這
12/23 23:03, 25F

12/23 23:04, , 26F
種事情上 SEO效果應該只是從中可以獲得的其中一個小效益而已
12/23 23:04, 26F

12/23 23:04, , 27F
我必須說 當天不是考文字 是考實作 even大大會給你範例
12/23 23:04, 27F

12/23 23:04, , 28F
然後問你為何會這樣 請問該如何解決
12/23 23:04, 28F

12/23 23:04, , 29F
並非考考試卷好嗎 只是blog只能以文字呈現
12/23 23:04, 29F

12/23 23:05, , 30F
even大大應該把考題分享出來讓板友嚐嚐 XDDDDD
12/23 23:05, 30F

12/23 23:24, , 31F
很棒的分享!
12/23 23:24, 31F

12/23 23:25, , 32F
elq3z9c7版友,你是初學者大致上都看得懂...
12/23 23:25, 32F

12/23 23:25, , 33F
所以意思是你知道有那一些元素的預設是inline-block嗎囧
12/23 23:25, 33F
還有 120 則推文
還有 6 段內文
12/26 13:27, , 154F
不知道有沒有人這樣用過?實際上用起來會不會有問題呢
12/26 13:27, 154F

12/26 13:52, , 155F
全部的方法:http://mzl.la/10hb5hZ
12/26 13:52, 155F

12/26 14:18, , 156F
我再把問題說得明白一點,overflow:auto;width:100%;
12/26 14:18, 156F

12/26 14:18, , 157F
這種用法比較少見,是不是因為IE會出問題?
12/26 14:18, 157F

12/26 16:15, , 158F
看不懂題目在幹嘛
12/26 16:15, 158F

12/26 16:26, , 159F
但是我覺得你很厲害 哈哈
12/26 16:26, 159F

12/26 16:28, , 160F
第一題:我在本板看到前也不知道有那東西,我之前的解
12/26 16:28, 160F

12/26 16:29, , 161F
 法都是手動完整定義過相關CSS(原理差不多就是)。
12/26 16:29, 161F

12/26 19:08, , 162F
even大之前有一篇回覆文,內文有提過第二個問題,
12/26 19:08, 162F

12/26 19:08, , 163F
「請問css的 :after 到底是要怎麼用」這一篇。
12/26 19:08, 163F

12/26 19:12, , 164F
看過就明白第2題是什麼了。
12/26 19:12, 164F

12/26 20:10, , 165F
overflow:auto很有可能出現捲軸所以會用hidden
12/26 20:10, 165F

12/26 20:11, , 166F
至於width:100%,沒有作用。肯定是你記錯了
12/26 20:11, 166F

12/26 20:11, , 167F
跟IE沒有關係
12/26 20:11, 167F

12/27 05:42, , 168F
推~~
12/27 05:42, 168F

12/27 10:41, , 169F
HTML&CSS網站設計建置優化之道,p.374
12/27 10:41, 169F

12/27 10:42, , 170F
標題是:浮動元素的父元素:解決方案。
12/27 10:42, 170F

12/27 10:42, , 171F
書上可能寫錯了,但是我可以證明不是我記錯了。
12/27 10:42, 171F

12/27 13:10, , 172F
拍張圖來看看
12/27 13:10, 172F

12/27 13:14, , 173F
沒必要吧..... = =
12/27 13:14, 173F

12/27 14:02, , 174F

12/27 14:02, , 175F
第二題請google "clearfix"
12/27 14:02, 175F

12/27 14:03, , 176F
可是這方法不太實用就是 XD
12/27 14:03, 176F

12/27 17:08, , 177F
第二題目前我都使用overflow:hidden讓它自己去抓高度
12/27 17:08, 177F

12/27 17:10, , 178F
光用clear: both並不能完全解決高度問題
12/27 17:10, 178F

12/27 17:19, , 179F
是不是像上面的連結中最後一個解決方案,而width設定px
12/27 17:19, 179F

12/27 21:14, , 180F
原來width:100%是IE hack,後來都是推薦用height:1%或是
12/27 21:14, 180F

12/27 21:14, , 181F
*zoom:1
12/27 21:14, 181F

12/27 21:21, , 182F
所以overflow:auto;width:100%少見是因為後來有更好用的
12/27 21:21, 182F

12/27 21:22, , 183F
版本 overflow:hidden; *zoom:1;
12/27 21:22, 183F

12/27 22:59, , 184F
大家都太在意題目了,當場考你有經驗絕對會答對,因為
12/27 22:59, 184F

12/27 22:59, , 185F
因為你會上機,而我都會在旁邊給提示...
12/27 22:59, 185F

12/27 23:01, , 186F
但這三題如果看不懂,也是基本功有問題。
12/27 23:01, 186F

12/27 23:01, , 187F
因為題目的用詞是標準化的,有很多人只會看程式碼
12/27 23:01, 187F

12/27 23:02, , 188F
那其實就會有溝通討論上的問題了
12/27 23:02, 188F

12/27 23:04, , 189F
然而我不知道大家在意題目這麼多,文章重點不在題目上 XD
12/27 23:04, 189F

12/27 23:30, , 190F
看不懂文字版的敘述也是不太行 因為溝通能力也蠻重要的 XD
12/27 23:30, 190F

12/29 03:50, , 191F
有做題目有推~還滿好玩的題目啊XDDD
12/29 03:50, 191F

01/08 15:59, , 192F
我只會一題...><
01/08 15:59, 192F

01/10 14:29, , 193F
很有趣的問題, 真想看全部考題..轉職後也很少碰css了
01/10 14:29, 193F
文章代碼(AID): #1GrjsEju (Web_Design)
文章代碼(AID): #1GrjsEju (Web_Design)