看板 SmallBee
作者 標題 [轉錄] Re: [閒聊] 怪IE之前先怪自己??
時間 2010年11月05日 Fri. PM 04:27:42
※ 本文轉錄自 SmallBee 信箱
看板
作者 標題 Re: [閒聊] 怪IE之前先怪自己??
時間 2010年11月05日 Fri. PM 04:16:02
※ 收件者: SmallBee
看板 Web_Design-
作者 標題 Re: [閒聊] 怪IE之前先怪自己??
時間 Thu Jul 8 17:18:39 2010
續上篇
4. 使用基本的CSS技巧
請先使用CSS2.1做設計
問題是IE6對於CSS2.1也有很多不支援的地方
了解有什麼東西不支援變成必要的功課
（事實上各瀏覽器都有不支援的屬性）
常常有人看到很屌的例子
就copy來抄，放在自己的css原始檔，卻不知道有什麼意義
出包的時候只好另下指令
結果搞的更亂XD
搞不好還衝到別的地方...（慘）
常見例子
Pseudo-elements :after :before 之類是IE6 IE7不可用
!important IE7 以後才能用
可是還是很多人會問這個問題
現在有許多地方都可以查詢
http://www.webdevout.net/browser-support-css
當使用CSS2.1設計都沒有問題的時候
才再往上加特別的CSS去讓有支援的瀏覽器更漂亮
重點是往上加的概念，而不是往下"再加覆蓋規則"蓋掉之前的
這樣因為重複的樣式覆蓋，更會出問題
5. 有效率的重複使用CSS
盡量把自己的CSS思考成組件
先設計基本組件
特別使用時，才再另添加特別的屬性（講的不是很好，下面有舉例）
基本組件做的好，拿出來引用就沒問題
功夫會少很多
例子：網頁多半會有按鈕要設計
假設我們在CSS頭的地方先設計好
整個網站想要的按鈕樣式
.button { 按鈕的樣式 }
那想要用這個按鈕的時候
<a class="button">按鈕</a>
就行了，這是很基本的
那如果又想設計第二個比較特殊的"刪除"按鈕
CSS就多寫規則
.del { background:red; }
html的部份使用
<a class="del button">刪除</a>
原本一模一樣的按鈕，就多了紅色背景
這樣我們就清楚有兩大好處：
* 原始碼容易看懂
* CSS量變少
而不是
.button { 基本按鈕樣式 }
.del_button { 刪除按鈕樣式 }
各別去設定
甚至各區域都重新設定
這樣如果出問題抓不完
版面有時候也會被form搞爛
不管是哪個瀏覽器
所以form裡頭的相關元素也一樣都要先做好
確定沒問題，到處引用就不怕出錯
如果不完美，再去修改原本的組件就好了
這是根源，所以看似有點離題
但有出包經驗的人應該可以體會吧？
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.32.77.168
推 :推認真用心好文，其實clean的使用時機也很重要1F 07/08 17:47
→ :會不會出現在下一篇呢！？期待期待...............XDDD
→ :會不會出現在下一篇呢！？期待期待...............XDDD
→ :CodeJob紅人: self clear 的文章我寫過了 基本上算組件3F 07/08 18:54
修改一下不通順的地方
※ 編輯: evenwu 來自: 114.32.77.168 (07/08 18:56)
推 :我很好奇為什麼CodeJob紅人會突然活躍在這個版4F 07/08 19:17
推 :請各位好好保護文章，避免亂轉載阿(尤其某人出現XD)5F 07/08 19:39
→ :轉載沒差啦6F 07/08 20:26
→ :推~7F 07/08 20:39
推 :寫的好啊!8F 07/08 21:07
修文章錯誤
※ 編輯: evenwu 來自: 114.32.77.168 (07/08 21:38)
推 :推推9F 07/08 22:14
推 :原來兩個不同的CLASS可以一起用～還真屌！10F 07/08 23:38
可以先看過一變CSS 2.1的規格沒耐心看的話看 http://htmldog.com/guides/cssbeginner/
有中文版 http://findbook.tw/book/9789866884412/basic
有耐心的話看 O'REILLY CSS 大全 http://findbook.tw/book/9789866840012/basic
推 :沒看這文章之前，會宣告.del_button +111F 07/09 02:14
我也不希望大家看了這篇文之後就照單全收了，因為還是有例外狀況
得靠自己嘗試
有時候文章上的最佳解，在不同的狀況下，不一定是最佳。
推 :推12F 07/09 04:09
回一些文
※ 編輯: evenwu 來自: 114.32.77.168 (07/09 06:34)
推 :.del-button 好像比較好吧 :p13F 07/09 10:24
推 :沒有好不好，只有適不適合吧14F 07/09 11:50
→ :如果 del-button 跟 一般button 長的完全不一樣
→ :當然要獨立出來
→ :如果 del-button 跟 一般button 長的完全不一樣
→ :當然要獨立出來
推 :dinos是說 - 比 _ 好吧 XD?17F 07/09 15:15
→ :喔，那是我會錯意了XD18F 07/09 17:33
→ :關於.del我有個疑問？網頁語言裡面就有<del>的元素了，那20F 07/14 10:07
→ :麼如果要設定del的話，直接用html的元素加del的css去寫應
→ :該會比較語意化跟輕量化吧！
→ :麼如果要設定del的話，直接用html的元素加del的css去寫應
→ :該會比較語意化跟輕量化吧！
--
※ 來源: Disp BBS (http://disp.cc)
※ 作者: SmallBee 時間: 2010-11-05 16:27:42 來自: ymu041-090.ym.edu.tw
※ 看板: SmallBee 文章推薦值: 0 目前人氣: 0 累積人氣: 104
回列表(←)
分享