PTT數位生活區 / Web_Design

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

看板Web_Design作者 (EvenWu)時間12年前 (2012/12/23 18:31), 編輯推噓50(50推 0噓 143→)
留言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
這種用法比較少見，是不是因為ＩＥ會出問題？
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, 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
‣ 更多 evenwu 的文章
文章代碼(AID): #1GrjsEju (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 evenwu 的文章
文章代碼(AID): #1GrjsEju (Web_Design)