跨瀏覽器、陰影、圓角、可縮放的按鈕

元件化的概念！

最近花了很多時間，實作了未來所有網頁可共用的按鈕元件。很棒的一點是：產品部門也都同意往一致性、共用去規劃網頁。我們的終極目標都是：有朝一日可以「做新頁面、完全不用寫額外的 CSS 或切圖 」。這種元件化的概念必須要在公司初期就能夠導入，等到人多了、產品複雜了，到時要改變就會相對地困難。

陰影與圓角

UED (User Experience Department、使用者經驗部門）所做出的第一份共用 Guideline 是每個頁面上幾乎都有的按鈕元件。每種按鈕的定位很清楚，不過另我頭大的是，每一種按鈕都有圓角與陰影... 在像是 Firefox、Google Chrome、Safari 等標準瀏覽器，都有 box-shadow 與 border-radius 這兩種 CSS 屬性可用、單一標籤就可以做完所有事情。

令人憎恨的 Internet Explorer

但，問題再度發生在令人頭疼的 Internet Explorer 上，一直到 8 都還沒有實作 box-shadow 與 border-radius。由於目前市場主流還是使用 IE 7 或 8，所以要求產品設計部門不能有這兩種效果也說不過去... 只能硬著頭皮做啦 XD

實作結果

所以我先暫時不管效能（HTML 與 CSS 的程式碼數量）的問題，先把我自己認為最棒的按鈕給實作出來，達到了以下的目標。

• IE6 以外的主流瀏覽器都一致。
• 整顆按鈕都可以點。
• 有 link, hover, active, disabled 等效果 (IE 9 以前非 a 標籤需要 JavaScript 支援）。
• 放大縮小（只縮放文字）不會破圖。
• 背景顏色不同不需要重切。
• 雖然樣式不太一樣，但 IE6 仍可以使用。

以下是幾個瀏覽器的截圖：

這樣的結果，產品設計部門是很滿意的，因所有要求都達到了（連不需要管的 IE 6 也處理得很好）。但，身為一個龜毛的前端工程師，這樣的結果實在是令人很不滿意啊！！原因為何，看看下面的程式碼就知道了...

爆炸的 HTML Markup

下面還解說了，我每個標籤的用途為何。

<span class="miii-button">  
    <span class="miii-button-content miii-button-miii-button-core">  
        <span class="first-child">  
            <span class="text">  
                <span class="icon"></span>Lorem Ipsum is simply 
            </span>  
            <input type="submit" value="Lorem Ipsum is simply " disabled>  
        </span>  
        <span class="t"><span></span></span>  
        <span class="m"><span></span></span>  
        <span class="b"><span></span></span>  
    </span> 
</span>

1. 最外層
   • 只有 .miii-button，因為按鈕有多種類型，需要有一種最通用的，再套用到其他的類型。
2. 第二層
   • 第一個是 .miii-button-content
   • 第二個是按鈕類別 .miii-button-[type]： 不同的按鈕類別
   • 第三個是按鈕狀態 .miii-button-[state] : active, hover, disabled（IE 會以 JavaScript 產生，其他瀏覽器不處理）
   • 第四個也是按鈕狀態，但加上了按鈕類別 .miii-button-[type]-[state] （IE 會以 JavaScript 產生，其他瀏覽器不處理）
3. 第三層
   • .text : 放置使用者會看到的文字與圖示
   • .icon : 保留給圖片放置的地方（單獨一個 Tag 比較好做 CSS Sprite）
   • a 或 input : 看不到，但是是使用者實際會點選的（ Opacity = 100% ）
   • span.t : 上層圓角及陰影
   • span.m : 中層圓角及陰影
   • span.b : 下層圓角及陰影

目前共有 7 種樣式，未經壓縮的 CSS 檔案大小為驚人的 9246 bytes。

PHP Helpers

為了方便快速產生複雜的結構，所以也另外包了一個 Helper 方便快速產生

$button = button(array(
    "button" => "core",
    "name"   => "method",
    "value"  => "post",
    "label"  => "Input Button",
    "class"  => "save-button",
));

$button = button(array(
    "button" => "core",
    "href"   => "http://tw.yahoo.com",
    "label"  => "Link Button",
    "class"  => "yahoo-link",
));

如此一來，未來按鈕結構有變動就不需要一個個頁面去改了，其實還不錯！

有更好的解法嗎？

大家可以玩玩看：看看範例

見微知著，從小小的一顆 Button 就可以知道圓角及陰影的設計會帶來的問題，其他的共用元件（例如背景或 Div Module）的問題可能會更大，一是從程式面來解決，想看看讀到此篇的前端高手有沒有更好的解法？一是從設計面來解決，如果眾家好手都沒有一個很好的解法時，就必須跟產品設計溝通實作面的困難。

We are open to hear your advice！