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

[evenwu (EvenWu)]

續上篇

     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
推 Ken52039:推認真用心好文，其實clean的使用時機也很重要
→ Ken52039:會不會出現在下一篇呢！？期待期待...............XDDD
→ evenwu:CodeJob紅人: self clear 的文章我寫過了 基本上算組件
修改一下不通順的地方
※ 編輯: evenwu          來自: 114.32.77.168        (07/08 18:56)

推 cassatte:我很好奇為什麼CodeJob紅人會突然活躍在這個版
推 shimuraken:請各位好好保護文章，避免亂轉載阿(尤其某人出現XD)
→ evenwu:轉載沒差啦
→ TonyQ:推~
推 magazine2006:寫的好啊!
修文章錯誤
※ 編輯: evenwu          來自: 114.32.77.168        (07/08 21:38)
推 joyolkreg:推推
推 yaoring:原來兩個不同的CLASS可以一起用～還真屌！
可以先看過一變CSS 2.1的規格
沒耐心看的話看 http://htmldog.com/guides/cssbeginner/
               有中文版 http://findbook.tw/book/9789866884412/basic
有耐心的話看 O'REILLY CSS 大全 http://findbook.tw/book/9789866840012/basic

推 akou:沒看這文章之前，會宣告.del_button  +1
我也不希望大家看了這篇文之後
就照單全收了，因為還是有例外狀況
得靠自己嘗試

有時候文章上的最佳解，在不同的狀況下，不一定是最佳。

推 aiyswu:推
回一些文
※ 編輯: evenwu          來自: 114.32.77.168        (07/09 06:34)
推 dinos:.del-button 好像比較好吧  :p
推 kyork:沒有好不好，只有適不適合吧
→ kyork:如果 del-button 跟 一般button 長的完全不一樣
→ kyork:當然要獨立出來
推 cassatte:dinos是說 - 比 _ 好吧 XD?
→ kyork:喔，那是我會錯意了XD
推 kewang:偷推自己的condition comments XDD    http://0rz.tw/DtesK
→ jojozyzy:關於.del我有個疑問？網頁語言裡面就有<del>的元素了，那
→ jojozyzy:麼如果要設定del的話，直接用html的元素加del的css去寫應
→ jojozyzy:該會比較語意化跟輕量化吧！