Re: [閒聊] 怪IE之前先怪自己??

看板Web_Design作者 (EvenWu)時間15年前 (2010/07/08 17:18), 編輯推噓12(12推 0噓 10→)
留言22則, 14人參與, 最新討論串2/2 (看更多)
續上篇 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
推
07/08 17:47, , 1F
推認真用心好文，其實clean的使用時機也很重要
07/08 17:47, 1F
→
07/08 17:48, , 2F
會不會出現在下一篇呢！？期待期待...............XDDD
07/08 17:48, 2F
→
07/08 18:54, , 3F
CodeJob紅人: self clear 的文章我寫過了 基本上算組件
07/08 18:54, 3F
修改一下不通順的地方 ※ 編輯: evenwu 來自: 114.32.77.168 (07/08 18:56)
推
07/08 19:17, , 4F
我很好奇為什麼CodeJob紅人會突然活躍在這個版
07/08 19:17, 4F
推
07/08 19:39, , 5F
請各位好好保護文章，避免亂轉載阿(尤其某人出現XD)
07/08 19:39, 5F
→
07/08 20:26, , 6F
轉載沒差啦
07/08 20:26, 6F
→
07/08 20:39, , 7F
推~
07/08 20:39, 7F
推
07/08 21:07, , 8F
寫的好啊!
07/08 21:07, 8F
修文章錯誤 ※ 編輯: evenwu 來自: 114.32.77.168 (07/08 21:38)
推
07/08 22:14, , 9F
推推
07/08 22:14, 9F
推
07/08 23:38, , 10F
原來兩個不同的CLASS可以一起用～還真屌！
07/08 23:38, 10F
可以先看過一變CSS 2.1的規格 沒耐心看的話看 http://htmldog.com/guides/cssbeginner/ 有中文版 http://findbook.tw/book/9789866884412/basic 有耐心的話看 O'REILLY CSS 大全 http://findbook.tw/book/9789866840012/basic
推
07/09 02:14, , 11F
沒看這文章之前，會宣告.del_button +1
07/09 02:14, 11F
我也不希望大家看了這篇文之後 就照單全收了，因為還是有例外狀況 得靠自己嘗試 有時候文章上的最佳解，在不同的狀況下，不一定是最佳。
推
07/09 04:09, , 12F
推
07/09 04:09, 12F
回一些文 ※ 編輯: evenwu 來自: 114.32.77.168 (07/09 06:34)
推
07/09 10:24, , 13F
.del-button 好像比較好吧 :p
07/09 10:24, 13F
推
07/09 11:50, , 14F
沒有好不好，只有適不適合吧
07/09 11:50, 14F
→
07/09 11:51, , 15F
如果 del-button 跟 一般button 長的完全不一樣
07/09 11:51, 15F
→
07/09 11:52, , 16F
當然要獨立出來
07/09 11:52, 16F
推
07/09 15:15, , 17F
dinos是說 - 比 _ 好吧 XD?
07/09 15:15, 17F
→
07/09 17:33, , 18F
喔，那是我會錯意了XD
07/09 17:33, 18F
推
07/11 13:57, , 19F
偷推自己的condition comments XDD http://0rz.tw/DtesK
07/11 13:57, 19F
→
07/14 10:07, , 20F
關於.del我有個疑問？網頁語言裡面就有<del>的元素了，那
07/14 10:07, 20F
→
07/14 10:07, , 21F
麼如果要設定del的話，直接用html的元素加del的css去寫應
07/14 10:07, 21F
→
07/14 10:08, , 22F
該會比較語意化跟輕量化吧！
07/14 10:08, 22F
‣ 更多 evenwu 的文章
文章代碼(AID): #1CDPVpEJ (Web_Design)
‣ 更多 evenwu 的文章
文章代碼(AID): #1CDPVpEJ (Web_Design)