從 CSS sprite 進化到 SVG sprite

日期：2015.09.07
留言數：1
標籤：css 語法 sprite SVG 原創教學觀念

很久沒寫文章了，今天想跟大家分享 CSS sprite、Web icon font，以及 SVG sprite 這幾個東西的使用經驗。

這三個東西，雖然看似毫無關聯，但隱隱約約還是有種「進化」的感覺，如果你還在使用 CSS sprite 的技術，歡迎參考一下這篇文章，試著玩玩 Icon font 或 SVG sprite，瞭解並感受一下他們的特別之處吧 😄

CSS Sprite

當我們瞭解到每讀取一張圖，就會佔用一個 HTTP 需求時，我們改用 CSS sprite。
我們將所有網站會用到的 icon，全部集合起來放在同一張圖片裡，利用 class 再搭配 background-position 幫圖片做定位，就做到了 CSS sprite 的技術啦。

雖然可以有效減少 HTTP 需求，但他終究是圖片，只要把網站等比放大，圖片就可能會失真。在現今螢幕解析度提高，以及 RWD 網站盛行的環境下，用 CSS sprite 要面對的可能就是這種失真的小瑕疵。

另外一個比較惱人的困擾，就是要把所有的 icon 排在同一張圖片，再自己算出定位，其實很麻煩。雖然可以使用 compass 這樣的 CSS 預處理器幫忙，但也不是所有人都用 compass 啊 😊。

Web Icon Font

因為種種的因素，我們改用了另外一個技術：Web Icon Font (以下簡稱 icon font)，我們利用一些字體文件，將文字轉成圖片。好處是解決了「失真」的困擾，因為即使放大縮小，它的本質還是文字，文字放大縮小是不會失真的，可以保持它原有的清晰度。

但困擾來了，正因為他是文字，所以必須乖乖遵守文字的規範，我們常碰到的問題就是在「鋸齒」與「抗拒齒」之間徘徊，通常瀏覽器都會替文字進行抗拒齒的優化，以免放大閱讀文字時，會有凹凸不平的鋸齒狀，有的時候，某些圖標我們需要這些鋸齒，但另外一些圖片我們需要抗鋸齒，線段類的圖案、圓弧狀的圖案 … 等等，會依照不同的樣式有不同的需求。

而且除了瀏覽器外，不同系統 (WIN, iOS)針對文字的抗拒齒演算法也不同，如果真的要錙銖必較的去調校，應該會調整的天荒地老。

當然，這篇文章不是要一味地告訴大家 Icon Font 的缺點，畢竟我自己也還在用 Icon Font XDD。

這種細微的的改變，一般肉眼看不太出來，而且在解析度較高的裝置觀看，這問題才會比較明顯。如果真的發生類似的問題，我們可以用font-smooth去調整：

/* 來源： https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth */
font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased

.icon {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}

但誠如 MDN 說的: this is non-standard and should not be used. (他們不是標準格式，不推薦使用在專案上)。

因此，如果真的有這類問題需要解決，我們可以改使用 SVG sprite。 Icon font 還有其他不方便的地方，例如受到font-size, line-height..等等字型屬性的限制。一次要載入上百張 Icon font 的字型檔，但實際上用到的只是那幾張小圖，浪費了讀取的時間。最後還有一點是各家的 Icon font 整合不易.. 等。當然還是有一些網站服務可以解決部分問題，所以這邊只是把會碰到的狀況列出來，就不再細談了。

SVG sprite

在介紹 Icon font 文末提到有「網站服務」可解決部分問題，而這個網站也是我要介紹給大家的，就是 IcoMoon，他是一個整合眾家 Icon font 的網站，此外也支援 SVG 匯出。

該如何使用它？這邊不再贅述，我們只談 SVG sprite 的功能。

怎麼使用 SVG

在講 SVG sprite 之前，還是先簡單講一下什麼是 SVG 吧 XDDD。其實對我而言，SVG 的定義很簡單，就是用程式碼畫圖，這句話傳達了兩個意思：一、你必須要寫程式碼；二、他是不會失真的向量圖。

透過以上範例，你會發現這張圖片所有的線段(<path></path>)都是寫在 HTML 裡面，然後再利用 CSS 屬性去修改它的顏色、大小… 等樣式。

每一張圖片都有一個自己的<path></path>或者<circle></circle> … 這樣的屬性，通常會寫在網頁的最上方，再利用<use xlink:href="#icon-video-camera"></use>呼叫他。

雖然使用 SVG 可以有效解決解析度、鋸齒 … 等等這些問題，但參考我們上述語法，應該會發現，如果要載入多張不同的圖片，程式碼會拖得很長。為了解決這個問題，我們可以改用 SVG sprite，也就是將所有圖片存在 SVG 檔案，再從 HTML 呼叫他。

SVG sprite 實作

以 IcoMoon 網站為例，先選好你要的圖片，在匯出 SVG 之前勾選 Include Tiles (CSS Sprite)

解壓縮之後，找到sprite/目錄，裡面有一個sprite.svg，原理就跟 sprite.png 一樣，會把所有圖案排列整齊，差別在於它是向量圖，放大縮小都不會失真。

接下來只要在 HTML 載入這張 SVG 檔案，並且透過ID去呼叫對應的 icon 就可以了。

<svg class="icon" xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="sprite.svg#icon-facebook"></use>
</svg>
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="sprite.svg#icon-feed"></use>
</svg>

在xlink:href的地方，就輸入這個 svg 檔案的相對路徑，後面再寫 ID 即可，跟 CSS sprite 相比是不是簡單很多呢。我們不需要再寫background-position去調整他的位子，往後要新增其他的 icon，直接打開 sprite.svg 編輯就可以啦！

因為 svg 目前不支援絕對路徑，所以我沒辦法直接放在 codepen 讓大家看，因此另外做了一份頁面，請參考 🌍 範例網頁觀看效果，也歡迎使用 dev tools 玩玩看。

➡️ 範例：SVG sprite HTML demo

使用 IcoMoon 的 SVG sprite 注意事項

因為 IcoMoon 可以直接提供我們 SVG 的 path 程式碼，而且可以個別匯出，所以我用 IcoMoon 舉例。但如果你以後想用 IcoMoon 做 SVG sprite，請特別注意一件事情，就是你可能需要自行修改它的 SVG 檔案。

什麼意思呢？因為 IcoMoon 把 icon 的顏色、大小都寫死在 SVG 檔案裡，而且我覺得不是很好管理。

以icon-facebook為例，IcoMoon 是這樣寫的：

<svg id="icon-facebook" width="32" height="32" viewBox="0 0 32 32" x="48" y="0">
<path fill="#444444" d="M26.667 0h-21.334c-2.945 0-5.333 2.388-5.333 5.334v21.332c0 2.946 2.387 5.334 5.333 5.334h10.667v-14h-4v-4h4v-3c0-2.761 2.239-5 5-5h5v4h-5c-0.552 0-1 0.448-1 1v3h5.5l-1 4h-4.5v14h6.667c2.945 0 5.333-2.388 5.333-5.334v-21.332c0-2.946-2.387-5.334-5.333-5.334z"></path>
</svg>

以下是我修改後的語法：

<svg>
    <symbol id="icon-facebook" viewBox="0 0 32 32">
        <path d="M26.667 0h-21.334c-2.945 0-5.333 2.388-5.333 5.334v21.332c0 2.946 2.387 5.334 5.333 5.334h10.667v-14h-4v-4h4v-3c0-2.761 2.239-5 5-5h5v4h-5c-0.552 0-1 0.448-1 1v3h5.5l-1 4h-4.5v14h6.667c2.945 0 5.333-2.388 5.333-5.334v-21.332c0-2.946-2.387-5.334-5.333-5.334z"></path>
    </symbol>
</svg>

你可以發現我改用 <symbol></symbol> 管理 icon，並且移除了他們固定的樣式。

如果不把 IcoMoon 寫的樣式移除，我們將無法用 CSS 控制這些樣式，所以請特別記住這一點！

我也有把 IcoMoon 跟我修改後的 SVG 檔案放到網站上，大家可以自行打開原始碼比對。

IcoMoon：https://muki.tw/blog-demo/svg-sprite/sprite-icomoon.svg
MUKI edit：https://muki.tw/blog-demo/svg-sprite/sprite.svg

以上跟大家介紹 SVG sprite 的使用方法，以及該怎麼管理。希望對大家有所幫助囉

初探 Sass Maps 與使用介紹

日期：2015.07.15
留言數：0
標籤：sass sass map 技巧教學觀念

Sass Maps 是 Sass 3.3 版的新東西，我們可以利用它更有效的管理我們的變數；如果再搭配 if/else 條件式或 each 迴圈，可以寫出更簡單(也更程式導向) 的 CSS 語法。

雖然 Maps 有地圖或索引的意思，但你不妨把它想成是 JavaScript 的物件，這樣在觀念與使用上會比較接得起來 😊 ～

以往我們用 Sass 設定變數時，會用各種單字取名。通常會用這種比較沒有系統的寫法：

$font-color: #424242;
$base-color: #ff6599;
$background-color: #ebe4e8;
$light-grey: #efefef;

以上這些變數單拆開來，可能都看得懂。但真的要使用時，通常都要回頭翻閱；另外一個問題就是變數愈多管理愈不易。

所以我們可以利用 SASS Maps 幫我們解決這樣的問題。

Sass Maps 基本介紹

Sass Maps 的格式如下(Sass Maps 官方文件參考)：

$map: (
  key1: value1, 
  key2: value2, 
  key3: value3
);

將剛剛那些變數按照 Sass Maps 格式整理一番，可以比較有系統化：

$colors: (
  lt-grey: #efefef,
  grey: #424242,
  pink: #ff6599,
);

$backgrounds: (
  lt-grey: #ebe4e8
);

/* How to use */
body {
  background: map-get($backgrounds, lt-grey);
  color: map-get($colors, pink);
}

將上面的變數根據種類 / 屬性的不同，可以變成像物件一樣，需要哪一個資料再把它取出來即可。

利用 functions 包裝 Sass Maps

Sass Maps 看起來非常簡單也好上手，對吧！

不過每次都要寫 map-get 是不是覺得有點阿雜？如果不常用可能會忘記這段語法，又要回頭找資料。

會使用 Sass 的人，從本質上就是個懶鬼無誤，所以可以少寫幾個字，我們就要努力少寫幾個字💪，所以我們來利用 functions 幫我們包裝一下這段程式碼吧！

@function color($color-name) {
  @return map-get($colors, $color-name);
}

@function background($background-name) {
  @return map-get($backgrounds, $background-name);
}

body {
  background: background(lt-grey);
  color: color(pink);
}

大家可以用 codepen 玩玩看

用迴圈跑 Sass Maps

除了 functions 之外，我們也可以用迴圈跑一段 Sass Maps 唷。

假設今天要做一個選單組合，而每個選單的背景顏色都不一樣，我們可以先用 Sass Maps 定義好每個選單的顏色：

$menus: (
  menu1: #94a437,
  menu2: #cb0a3a,
  menu3: #5d5d5d,
  menu4: #0095a1,
  menu5: #5273d1
);

.menu a {
  color: #fff;
}

接下來用迴圈跑出menu1到menu5的顏色以及:hover

@each $menu-item, $menu-color in $menus {
  .#{$menu-item} {
    background: $menu-color;
  }
  .#{$menu-item}:hover {
    background: lighten($menu-color, 15%);
  }
}

最後編譯出來的 CSS 如下：

.menu1 { background: #94a437; }
.menu1:hover { background: #b9c95e; }

.menu2 { background: #cb0a3a; }
.menu2:hover { background: #f52d5f; }

.menu3 { background: #5d5d5d; }
.menu3:hover { background: #838383; }

.menu4 { background: #0095a1; }
.menu4:hover { background: #00dced; }

.menu5 { background: #5273d1; }
.menu5:hover { background: #8ea4e1; }

有感受到，多寫一點迴圈可以省很多事情的 FU 嗎😊

我能使用 Sass Maps 嗎

文章最前面有提到，Sass Maps 是 Sass 3.3 版的新東西，因此只要你的 Sass 高於 3.3 版都可以使用喔！

簡單檢測方法，直接在 terminal 輸入sass -v就可以知道目前的 Sass 版本囉。

參考資料： Sass Maps – Jonathan Su

使用 sass 有效控管 z-index 圖層順序

日期：2014.06.29
留言數：0
標籤：sass 技巧觀念

利用z-index可以讓多個圖層互相重疊，這件事情已經不稀奇了。但假設今天碰到複雜的版面，需要很多個z-index圖層，通常我們會用99,100,101,9999… 這種無限上綱的的寫法。

但其實，這不是一種好的寫法，因為寫到最後你會不知道現在寫到哪個數字？如果是多人寫一份網站，維護也很不容易，說不定最後為了省麻煩，會 99999 不知道 9 到幾位數去 OTL…。為了解決這個問題，我們可以使用 SASS 幫我們有效管理z-index喲！

使用 SASS 管理 z-index

讓我們先從簡單的 Layout 來看，這邊有三個圖層，分別是header, nav, modal。我們最後希望的排列效果如下圖所示：

如果是用 CSS，只要注意每個圖層的先後順序，再指定相對大的值就可以了。寫法也如同圖片上的z-index數字。

接下來讓我們使用 SASS 換個寫法吧！

一開始我們先使用 SASS 的變數，幫每個 DIV 設定相對應的值：

$elements: header-bar, navi, modals;

element以及後面對應的值都可以依照你的喜好作調整。為了方便日後維護，將值寫成跟class相同是個不錯的選擇。

接著設定每個 class 的z-index：

.header-bar {
  /* z-index: 1 */
  z-index: index($elements, header-bar);
}

.modals {
  /* z-index: 3 */
  z-index: index($elements, modals);
}
        
.navi {
  /* z-index: 2 */
  z-index: index($elements, navi);
}

z-index會根據我們前面的設定，找到對應的數字填入。如果最前面的設定值有所更動，每次 compile 之後都會幫我們重新計算z-index，我們就不用因為多增加一個 div，而要回頭調整z-index的順序喲！

這並不是 SASS 為了解決z-index所提出的方法，我們只是單純利用 SASS 的 index function 幫我們做到這件事情。

index($list, $value)
// Returns the position of a value within a list.(回傳 $value 在 $list 裡的順序，也可看成是索引)
SASS index function

因此Function index回傳的會是一個索引值，我們就利用這個特性套在z-index身上，達成幫我們管理z-index的目標。

有了這個規律後，如果今天接到一個複雜的網站專案，也可以將z-index獨立出來做成一份_zindex.scss。

$elements: img-cover, header-bar, navi, modals, tooltip;
$modal-elements: fields, com-dropdown, form, msg-errors, btn-close;

.img-cover {
  z-index: index($elements, img-cover);
}

.modals {
  .fields {
    z-index: index($modal-elements, fields);
  }
}

結論

雖然這只是一個 SASS Function 的簡單運用，但是卻很實用，所以在這邊分享給大家。對我來說，要手動管理z-index真的會很煩，用這種層級管理可以一目了然，又不用重新修改一堆程式碼，真的超好用的 XD。

此篇文章的概念取自 Sassy Z-Index Management For Complex Layouts。
Hugo Giraudel 有分享他的另一種解法：http://sassmeister.com/gist/11172138，但我個人比較喜歡 Jackie Balzer 的(小聲 XD

用 css 讓區塊水平垂直置中

日期：2014.06.24
留言數：5
標籤：css 語法技巧教學

有時候我們需要做個前導頁或是簡單的名片形象頁，在內容不多的情況下，可能需要讓 DIV 垂直以及水平置中；除了 DIV 外，甚至連文字也需要垂直與水平置中。

就如同下圖範例，這是一個很簡單的名片形象頁，深灰色底是一個 DIV。可以看到除了 DIV 之外，文字也是垂直水平置中。

另外當你移動畫面時，他也會固定在畫面中央，不會因為視窗縮放而有任何跑版情況。（線上 DEMO 網址：http://codepen.io/mukiwu/full/Iuncz/）

看起來很難的效果，其實只要短短幾行語法就能達成。就讓我們一步一步的拆解吧 🙂

DIV 垂直水平置中

先跟大家分享一張非常清楚的圖解，取自 Smashing Magazine 的大作。

（圖片來源：smashingmagazine）

如圖所示，不管該元素(DIV)多大，我們都可以先用position: absolute 讓元素放在中央。

position: absolute;
top: 50%;
left: 50%;

但事情可沒那麼簡單，利用absolute調整位子的基準，是從該元素的「左上角」開始算起。所以如果在 X 以及 Y 軸各設 50%，是針對元素左上角（紅色點）的 50%。

▼ 因此該元素(DIV)位子會掉到淺灰色區塊的地方，但是紅點剛好在畫面正中央。

我們必須要再給予元素明確的高與寬，利用margin-top以及margin-left把元素往回推。往回推的數值就是(高/2）以及(寬/2）。如果高是300px，就往回推150px，依此類推。

最後垂直置中的程式碼會如下所示：

div {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -300px;
}

文字垂直水平置中

想讓文字水平置中，只要寫text-align:center就可以囉！算是置中規則裡最簡單的一種。

而垂直置中卻沒那麼直覺，單純寫上vertical-align:middle，瀏覽器是不會鳥你的。

垂直置中有很多種解法，今天跟大家分享其中一種，透過display改變元素的形態，進而讓垂直置中有用。

HTML 必須要有一組二層的巢狀結構：

<section>  
  <div class="center">
    文字垂直置中
  </div>
</section>

利用 CSS 修改display：

section {
  display: table;
}

.center {
  display: table-cell;
  vertical-align: middle;
}

使用這種方法就可以讓文字垂直置中囉 ~。

延伸閱讀：In the Woods 有提供更多種垂直置中的解法，好處與壞處也寫得很詳細，可以參考看看。

最後你也可以將兩種垂直置中的效果合併在一起，完整的程式碼請參考我的 DEMO：http://codepen.io/mukiwu/full/Iuncz/

利用純 CSS3 做出自適應的 lightbox

日期：2014.05.14
留言數：6
標籤：css 語法 CSS3 效果教學

因為工作需求，要做一個使用說明頁。但「使用說明」並非這個案子的主要需求，所以決定利用 Lightbox 取代多做一頁 HTML，但使用功能強大的 Lightbox plugin 有些大材小用，所以思考了一下，決定使用純 CSS3 寫一個簡單、又能自適應的 Lightbox。

關於「純 CSS」到底有什麼好處？這邊就不再贅述了，簡單好上手、讀取速度快算是兩大特點；雖然不是所有瀏覽器都支援 CSS3，但我這個案子是應用在手機上，基本上沒有手機不支援 CSS3，所以不用太過擔心這方面的需求。

以下先放上範例讓大家試玩，點選按鈕「Click Me」或者是旁邊的圖片，都可以看到 Lightbox 的效果喲！

HTML 結構

要製作純 CSS 的 Lightbox 並不難，我們先從 HTML 開始寫起吧！
關於點擊後，要展開哪個 Lightbox？只需利用相同的id名稱即可做到。此外重點只有三個元件，分別為：

打開 Lightbox 的元件（例如按鈕、圖片）
Lightbox 展開後的內容
關閉 Lightbox 的元件

所以 HTML 結構可以這麼寫：

<body>
  <section>
    <a href="#notice" class="button">Click Me</a>
    <a href="#notice1" class="button"><img src="http://lorempixel.com/100/100/food/1"  /></a>
  </section>

  <div class="lightbox-target" id="notice">
    <div class="content">
      hello world<br /><a href="#">Hello World</a>
    </div>
    <a class="lightbox-close" href="#"></a>
  </div>

  <div class="lightbox-target" id="notice1">
    <img src="http://lorempixel.com/300/300/food/1" />
    <a class="lightbox-close" href="#"></a>
  </div>
</body>

這邊特地帶出body標籤，是要提醒大家，請把lightbox-target(Lightbox 展開後的內容)拉出來，寫在body的子層。

大家可以想像一下，正常點選 Lightbox 後，整個螢幕都會黑掉，Lightbox 會出現在螢幕的正中央才是正確的。如果將lightbox-target包在任何的div裡，就會受到該div的定位或寬度限制，讓你的 Lightbox 位置變得很詭異。

如果看不太懂沒關係，讓我們做成圖解吧！

▼ 正常的 Lightbox

▼ 錯位的 Lightbox

因為我們會利用lightbox-target製作透明的覆蓋底層，所以透過圖解，應該可以清楚瞭解他們的差異吧！總之lightbox-target的位置會影響到整個版面就對了 XD

以上就是 Lightbox 的 HTML 結構，接下來要使用 CSS 做出 Lightbox 的展開與關閉。

CSS 樣式與寫法

樣式的部分，會分成以下幾個區塊：

lightbox-target：Lightbox 的黑底背景，即俗稱的 overlay
content以及img：設定跳出 Lightbox 時，出現的內容或圖片樣式
lightbox-target:target：我們利用:target設定當「點選的元件變為目標時」，會出現的 CSS 樣式。
lightbox-close：關閉 Lightbox 的「X」樣式。

可以參考我的 CSS 寫法（我有在裡面加上註解，大家可以參考相關註解歐）：

.lightbox-target {
  /* 設定好背景層的樣式以及位置 */
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0,0,0,.7);

  /* 預設透明度為 0，觸發 :target 後，利用動畫效果調整透明度 */
  opacity: 0;
  @include transition(opacity .5s ease-in-out);
  overflow: hidden;
  .content {
    /* 設定內容的樣式及位置(白底區塊) */
	width: 90%;
	height: 90%;
	background: #fff;
	color: #333;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 3px solid #fff;
	@include box-shadow(0 0 8px rgba(0,0,0,.3));
	box-sizing: border-box;

	/* 預設寬高為 0，觸發 :target 後，利用動畫效果展開寬與高 */
	max-height: 0%;
	max-width: 0%;
	@include transition(.5s ease-in-out);
	}
  img {
	/* 設定圖片的樣式及位置，利用 */
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 3px solid #fff;
	@include box-shadow(0 0 8px rgba(0,0,0,.3));
	box-sizing: border-box;

	/* 預設寬高為 0，觸發 :target 後，利用動畫效果展開寬與高 */
	max-height: 0%;
	max-width: 0%;
	@include transition(.5s ease-in-out);
  }

  /* 當 :target 觸發後，index-target 的透明度為 1；content & img 的寬高為 100% */
  &:target {
    opacity: 1;
	top: 0;
	bottom: 0;
	.content, img {
	  max-height: 100%;
	  max-width: 100%;
	}
	.lightbox-close {
	  top: 5%;
	}
  }
}

/* 關閉 Lightbox 按鈕的位置及樣式 */
.lightbox-close {
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  background: #139dd7;
  color: #fff;
  position: absolute;
  top: 10%;
  right: 5%;
  @include transition(.5s ease-in-out);

  /* 利用偽元素做出 \ 以及 / 的線條，合併就變成 X 囉 */
  &:before, &:after {
	content: " ";
	display: block;
	height: 30px;
	width: 1px;
	background: #fff;
	position: absolute;
	left: 26px;
	top: 10px;
	@include transform(rotate(45deg));
  }
  &:after {
	@include transform(rotate(-45deg));
  }
}

利用 HTML 跟 CSS 就可以很快速的做出簡易的 Lightbox 囉，而且可以支援 HTML，或是單純的展示圖片，非常好用呢！！！

有興趣的朋友，也可以自行修改 Lightbox 的樣式，讓他更符合每個網站的需求 🙂

display: table-cell 無法使用 margin/ padding 的解法

日期：2014.04.28
留言數：0
標籤：css 語法技巧教學

只要是使用 HTML+DIV 排版的人，應該都很清楚table 是用來繪製表格，而非用來排版的這件事情。然而因為 DIV 真的太好用了，現在很多人幾乎都不知道table, tr, td… 該怎麼互相搭配與運用。雖然不清楚是哪些因素影響，但是 W3C 卻在 CSS 的display屬性裡面支援table值，讓我們可以使用 DIV 就做出跟 HTML 的 table 標籤一樣的效果。（該說是 CSS 跟 HTML 互打臉嗎？）

關於display: table的介紹與運用，知名部落客香腸已經有一篇很深入淺出的文章，我就不多贅述了。完全沒用過display: table的朋友、或想了解該怎麼使用的朋友，可以參考香腸的：用CSS+DIV畫表格(table)進行網頁排版。

我這篇針對的族群，是已實際用過display: table的朋友，當你們在使用的時候，也許會碰到「間距調整」的問題，例如要在每一個table-cell裡頭設定margin等間距調整，卻發現修改無效。假設你碰過這種狀況，不妨參考一下我推薦的解法

話不多說，先上個範例！我使用圖片+圖說當作範例，例子包含：

正常狀況下，圖片緊密排列
使用margin調整的結果
將寬度寫死的結果
使用border-spacing調整的結果

如果看完例子還是似懂非懂，或想更了解原理的朋友，可以繼續往下閱讀喲。

正常狀況下，圖片緊密排列

一般我們要做水平排列的圖層，多半會使用float或display等屬性設定。如果今天你有製表的需求，或是其它因素考量，也可以嘗試使用display:table達成。

display:table在預設情況下，只要我們給他一個寬度，裡面的元素就會自動依據總寬度分散對齊。

在這邊，因為每張圖寬為 120px，所以我先設定總寬是 480px，這樣他們就會緊密排列在一起，如下圖所示：

使用 margin 調整的結果

如果我們希望每張圖都有一點空隙，不要緊密排列的話。正常思維下，都會使用margin達成。因此我在範例二加入了這段語法：

.case-2 figure {
  margin: 10px;
}

▼ 顯示結果為(你可以嘗試將 10px 修改成 100px，會發現沒有任何作用)：

因此可以發現，margin對display:table*一家子是沒有任何作用的。透過 MSDN Document 對 margin 的介紹可以了解

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
除了 display 為 table 的屬性不支援外，適用所有元素（包含 table-caption, table, inline-table ）。
margin – CSS | MSDN

因為不支援margin，所以沒有任何效果也是正常的喔。

將寬度寫死的結果

既然margin沒有任何作用，我們可能會利用display:table分散排列的特性，手動設定寬度讓圖片對齊。

例如：4x120px + 5x5px = 480 + 25 = 505px

將整體寬度設定為 505px 後，就會根據寬度分散對齊，變成下面的圖片效果：

乍看之下達到了我們想要的效果，每張圖片中間都有間隙。但仔細研究後你會發現兩個問題：

第一張圖片的最左邊還是貼齊 div，沒有任何空隙
假使圖片超過四張，間隙就會消失了（因為圖片寬度寫死，所以沒彈性）

由此可知，將寬度寫死，絕對不是一個好解法。曾經嘗試過用這種解法的朋友，建議把它拋諸腦後吧！

使用 border-spacing 調整的結果

利用border-spacing，是目前普遍認為較適當的解法。

我們只要在display:table-cell的父層，也就是display:table這層加上第 3 跟 4 行的兩行語法就可以囉：

.image-list {
  display: table;
  border-collapse: separate;
  border-spacing: 5px;
}

▼ 顯示結果如下

跟剛剛使用寬度寫死的範例圖片相比，可以方便每一張圖片的左右空隙都是一樣的，不管是第一張或是最後一張，都留有 5px 的空隙。

但因為我們必須將這個設定寫在父層，所以在image-list底下的所有display:table-cell都會套用此設定，如果有的 table 不想要有空隙設定，就必須單獨把 HTML 的結構拉出來，或是再用 CSS 權重覆蓋，算是比較麻煩的一點。

目前還無法只針對table-cell做調整，希望以後 W3C 可以增加更多對display:table*的支援度囉！

最後再看一次線上範例，加深自己的印象吧！請記得，將寬度寫死，絕對不是一個好解法喲 🙂

動手更換 Facebook 的新版面

日期：2014.04.04
留言數：0
標籤：css 語法 redesign 原創

前陣子等得望穿秋水的 Facebook 終於改版了！雖然改版很開心，但是看了幾個小時後發現體驗不太好，舉例來說，這次塗鴉牆的圖片尺寸雖然變大了，但每則訊息的間距也因此變小，所有訊息交雜在一起，很難分清楚這是誰說的？那篇又是誰發的？假設一個人每天要看的資訊流很大，或像我一樣是 FB 重度使用者一直用滾輪看消息的話，就會覺得很痛苦。

另外廣告真的很阿雜，三欄訊息沒有一個比重，文字都是黑色字體，非常的沈重且壓迫，搞的塗鴉牆訊息無法跳出來，真的很痛苦。

所以花了一點時間微調了 Facebook 的版面，就像是我上面的圖片一樣。如果你的 Facebook 也改成新版了，不妨對照一下我改了哪些東西吧 🙂

原本使用 Stylish 這個擴充元件，只要稍微懂點 CSS 的朋友，都可以透過他在本機修改網站樣式，符合自己的閱讀習慣。此外官網也有許多同好做的佈景樣式，方便我們套用。

但是後來發現另外一套：Stylebot，功能更強大也更好用。雖然樣式沒有 Stylish 多，但是他的網站更漂亮，而且使用起來也更方便！推薦大家使用 Stylebot 喲～

▼ 比 Stylish 好看一百倍的網站！

關於 Stylebot 的介紹與教學，異塵行者已寫過一篇文章介紹，我這邊就不再贅述了：

當你來到一個網站，覺得它的內容排版方式不符合你的喜好時，會不會想要自訂替換新的網頁版面？當你正在架設自己的部落格，希望比較各種可能的外觀介面微調，會不會需要一個簡單易用的網頁樣式編輯器？在此之前，能夠滿足上述CSS樣式調整需求的工具，應該是Firefox、Google Chrome皆適用的擴充套件：Stylish。
Stylebot 設計網頁不用懂CSS語法，親切版Stylish隨意改造網站

套用我修改的 Facebook 樣式

最後要跟大家分享的是我自己修改後的語法，可以參考上面的截圖。
我有將語法放在 Stylebot 上，如果你已安裝相關擴充元件，可以直接點選網址套用：http://stylebot.me/styles/5315

比較特別的修改如下：

去除廣告 (一定要的)
修改動態牆的間距，讓每篇文章看起來有個分隔
修改文字大小、行高與段落，閱讀較為舒適
加大動態牆的寬度
刷淡左側側邊欄的顏色，讓塗鴉牆跳出來，不會被左側的側邊欄干擾
移除左側側邊欄的遊戲、朋友、以及其他資訊，讓資訊更為簡單
固定左側側邊欄，滾動的時候，側邊欄不會跟著移動
右側廣告部位預設為小勞勃道尼的帥氣照，懂 CSS 的朋友，可以將 http://i.imgur.com/RAv5bAy.jpg 改成任何你想放的照片。

因為 stylebot 不支援火狐瀏覽器，所以如果你恰巧使用火狐，也可以改裝 Stylish，然後複製我底下的 CSS 語法即可～

@import url(http://fonts.googleapis.com/css?family=Lato);

div._4-u2._5v6e {
    display: none;
}

#contentArea {
    width: 80%;
}

div.rightColumnWrapper.fixed_elem, div._64b.fixed_elem {
    margin-left: 140px;
    background: url("http://i.imgur.com/RAv5bAy.jpg") 0 0 no-repeat;
    text-indent: -5000px;
    font-size: 0;
    height: 650px;
    width: 400px;
    transition: .5s ease;
}

div.rightColumnWrapper.fixed_elem:hover, div._64b.fixed_elem:hover {
    opacity: 1;
}

div._4-u2.mbm._5jmm._5pat._5v3q._5sq8._5x16._5uun {
    margin-top: -90px;
}

div._4-u2.mbm._5jmm._5pat._5v3q._5sq8._5x16 {
    margin-bottom: 30px;
    border-bottom: 3px solid #ccc;
}

div.mbs._5pbx.userContent p {
    font-size: 13px;
    color: #000000;
}

#leftCol {
    opacity: .5;
    transition: all .3s;
    position: fixed;
}

#leftCol:hover {
    opacity: 1;
}

._6m7 {
    color: #555;
    line-height: 1.5em;
    font-family: ubuntu, arial, sans-serif;
}

._6m6 a {
    color: #333;
}

._59tj {
    display: none;
}

/* sidebar */

#pagesNav, #listsNav, #appsNav, #interestsNav, #developerNav {
    display: none;
}

#pagelet_web_messenger {
    width: 120%;
}

.ego_column {
    display: none;
}

div.text_exposed_root p {
    margin-bottom: 1em;
}

利用 css 讓 ul div 置中

日期：2014.03.10
留言數：0
標籤：css 語法技巧

我們常利用ul做選單、做列表、做頁碼 …等等，但會碰到一種狀況，是想讓ul置中，如果你直接寫text-align:center會發現ul完全不鳥你！

這是因為ul預設為display:block，所以如果想讓他置中，必須更改他的display狀態。

想瞭解一些 element 預設的 display 狀態，可參考以下資料：

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { 
    display: block; unicode-bidi: embed 
}

摘自：Appendix D. Default style sheet for HTML 4

我提供兩種不同的結構，跟大家分享如何讓ul置中

ul 外還有父層 div

假設你的結構為「ul 還有父層」，亦即：

<div class="wrap">
  <ul>
 	<li>Hello</li>
 	<li>World</li>
  </ul>
</div>

那我們可以在父層設定text-align，並修改ul的 display 狀態為 inline-block：

.wrap {
    text-align: center;
}

.wrap ul {
    display: inline-block;
}

ul 沒有父層

如果你的 HTML 結構中，ul沒有父層包覆，例如：

<ul class="wrap">
  <li>Hello</li>
  <li>World</li>
</ul>

那我們可以利用 margin: 0 auto 以及 display:table 調整 ul ：

ul.wrap {
  display: table;
  margin: 0 auto;
}

以上兩種方法供大家參考，可以針對不同的結構，採用不同的置中處理。

使用 CSS:not 與 data-index 即時搜尋頁面

日期：2014.03.07
留言數：1
標籤：css 語法 CSS3 HTML5 jQuery 實作教學

去年看了一篇文章「Client-side full-text search in CSS」可以在單一頁面即時搜尋資料，覺得非常的好用，之前也有在粉絲團分享過這篇文章。原本不打算重新寫教學(因為原作者已寫的很詳細)，但是最近發現有朋友不知道這功能，所以轉念想想，還是記錄下來順便推廣一下這好用的功能吧 🙂

我有將這個功能實作在前公司的網站(fanxin.tv)，如果你有登入，可以進入我的動態點選「朋友列表」或「尋友工具」的分頁觀看效果，或者可以參考以下我用 codepen 做的範例

直接在搜尋框打上要搜尋的人名(可以用J,j搜尋)，可以看到頁面即時篩選出正確的名字

這個範例有搭配 JavaScript，原作者使用的是原生的 JavaScript，而我為了稍作區別，將它改成了 jQuery，所以想瞭解怎麼用 jQuery 寫的朋友可以參考我的範例 🙂

這個即時頁面使用了 :not 以及 data-* 完成(不得不說， data-* 真的超好用的 XD)，以下簡單介紹如何使用它們達成該功能。

在 html 加入 data-* 屬性

從頁面看，感覺是搜尋類別 name ，但其實我們要在 name 的父層 wrap 加上 data-index ，利用 data-index 做搜尋，而不是用 name 。

因此可以看到我在每個 wrap 裡加上了 data-index ，值跟 name 一樣都是填上名字。(第 1 & 3 行、第 6 & 8 行)

<div class="wrap" data-index="ju chu ko">
  <img src="http://lorempixel.com/40/40/people/1" border="0" />
  <div class="name">Ju Chu Ko</div>
</div>

<div class="wrap" data-index="browny lin">
  <img src="http://lorempixel.com/40/40/people/2" border="0" />
  <div class="name">Browny Lin<</div>
</div>

唯一不同的是，即使原本的 name 有大小寫，我在data-index一律改成小寫表示，如果要透過後端產生資料，可以從後端作處理，在樣板輸出的時候就先將大寫轉成小寫。

使用 :not 屬性做篩選

接著我們在 HTML 頁面加入以下語法(可以加在搜尋框的後面)：

<style id="m-search"></style>

我們會利用 jQuery 動態在 style id="m-search" 裡加入 :not 語法，這樣就可以即時在頁面做篩選了。

:not是 CSS 的偽元素，跟 :nth-child 有異曲同工之妙，他可以幫我們做到元素篩選，假設今天我們搜尋「j」，希望出現所有名字有「j」的人，可以利用:not寫成：

<style id="m-search">
  .wrap:not([data-index*="j"]) {
    display: none;
}
</style>

這段意思是：「只要 data-index 的值沒有 J，就隱藏他」。

使用 data-index*= 是因為我們要做模糊比對，只要 data-index 有出現這個字都可以，畢竟我們不希望只搜尋字首或字尾，而是搜尋全部。

利用 jQuery 即時搜尋

最後，就可以利用 jQuery 即時搜尋，只要搜尋框有「改變、鍵盤輸入、貼上」等事件，我們就即時在 style id="m-search" 裡加入 :not 篩選，而他的篩選依據就是我們搜尋框的值：

var that = $(this);
var mSearch = $("#m-search");
$("#search-input").bind("change paste keyup", function(){
  var value = $(this).val();
  if (!value) {
    mSearch.html("");
    return;
  }; 
  mSearch.html('.wrap:not([data-index*="' + value.toLowerCase() + '"]) {display: none;}');
});

結語

以上就是整個過程，只要利用 CSS 以及 JavaScript(jQuery) 就可以做到即時搜尋，但是他只能搜尋這個頁面的東西，畢竟只是單純抓取 HTML DOM，如果要搜尋後端資料，還是要用 ajax 囉。

用 data-* 屬性做出純 CSS 的 tooltip

日期：2014.02.27
留言數：3
標籤：css 語法 HTML5 實作教學

最近因為案子需求，要做「tooltip」的功能，簡單來說，tooltip 是一種「當滑鼠移過文字時，會跳出一個簡短的提示說明」的特效。

tooltip 技術已存在很久，發展也有一段時間了，不論是用純 CSS 製作，或是透過 JavaScript 控制都有人寫過，不過最近我發現還可以利用 HTML5 的新標籤 data-* 達成。去年我有寫過一篇利用data-*在 HTML 以及 jQuery 存取資料的文章，但 data-* 厲害的地方不僅在此，我們還可以直接利用 CSS 的 attr 將 data-* 資料抓出來噢！！

那話不多說，就先上範例吧：

可以看到當滑鼠移過「Hover Me」的文字時，右方會淡出一個提示訊息；滑鼠移過「Push you mouse here」文字時，右方會出現多行的提示。

在此跟各位簡單介紹一下，如何使用 data-* 達成該功能。

在 html 加入 data-* 屬性

首先要做的第一件事情，就是設定 tooltip 的 html 程式碼。我的寫法為：

<div class="tip">
  <span data-tooltip="hello world">Hover Me!!!</span>
</div>

在span裡面寫上data-tooltip的屬性，然後可以把它當作 HTML 屬性直接使用，在值(value)裡寫上提示文字。data-tooltip的「tooltip」名字可以自取，只要前面的格式以data-為開頭即可。

在 CSS 利用 attr 抓取 data-* 屬性

CSS 的偽元素是個很強大的東西，我們可以利用他做很多運用，通常為了做一些效果，content:" "多半會留空，但其實可以在裡面寫上attr抓資料歐！

我們可以這樣寫：

.tip span:before {
  content: attr(data-tooltip);
}

在attr裡面塞入我們在 html 新增的data-tooltip屬性，這樣偽元素(:before) 就會得到該值。

利用 pre 解決 tooltip 自動換行

將 tooltip 的樣式做好後，也許你會發現文字的換行有點奇怪，可能會出現這樣的情況：

「Hello World」文字並沒有按照預期的情況換行，簡單來說是因為預設會使用空白換行，因此我們可以使用pre標籤保留空白字元，寫法為white-space: pre;

利用 Unicode 字元顯示多行 tooltip

最後，如果我們希望 tooltip 可以顯示多行文字該怎麼辦呢？
一開始我很直覺的在 data-tooltip 裡面加入 br 標籤，但他會直接將br秀出來：

後來我發現 bootstrap 有寫好 tooltip 的元件，他的做法是如果你要在 data-* 裡面使用 HTML 標籤，就必須加入一行 data-html="true" 的設定，當時看完覺得超神奇的，他把這串設定寫在 javascript 裡面做判斷，但我還是似懂非懂，不知道 bootstrap 的具體設定方法。

最後，我採用 Unicode \a 作處理。

在想要換行的地方改用&#xa ;取代br，這樣文字就會自動換行囉！！

<div class="tip">
  <span data-tooltip="this is line 1 &#xa ; this is line 2">push you mouse here!!!</span>
</div>

☞ 補充

; 的前面其實不需要空格，但如果我不空格，字元會被編輯器吃掉。想看比較完整的語法可以參考 codepen 範例喔。

參考來源：http://stackoverflow.com/questions/16451553/css-data-attribute-new-line-character-pseudo-element-content-value

雖然我還是很想知道 bootstrap 到底是怎麼寫的，有在 FB 問過朋友，但其實還是看不懂，OTL

總之，data-* 真的是一個強大又好玩的東西，不僅可以自定義屬性(把自己當成 HTML 的規則制定者?)，還可以透過 jQuery & CSS 存取～，大家一起來玩吧 😀

強烈推薦收藏好物 – CSS Specificity (CSS 權重一覽)

日期：2013.10.30
留言數：0
標籤：css 權重觀念資源

CSS 權重表來自於今年的 CSS DevConf，利用漫畫「圖+文」的表現方式，清楚的讓大家知道 CSS 的權重。

如果你搞不清楚 CSS selector, element, class, id, style 之間的權重關係，那麼你真的需要收藏這個網站的這張圖！(沒錯，這個網站就只有這張圖 XD)

雖然都是英文，可是透過這樣的表現手法，大家應該可以清楚的瞭解權重區分，假使你還是似懂非懂，可以參考我寫的簡單說明。

閱讀順序

從上至下
由左至右

▼ 圖解如下，後面的依此類推。

閱讀說明

可以看到每個小圖周圍都有 3 個文字說明區塊：

9 elements
- 表示你在 CSS 裡寫了 9 個元素，也就是寫了 9 層去指定最後一個元素的樣式。
body div … ul li p a
- 把圖解改成 CSS 語言，這個位置顯示的是我們在設定 CSS 樣式時候的寫法。假設你要設定a的連結顏色，但為了避免跟其他的a樣式衝突，你也許會一層一層寫下來，像這樣：body div article section div ul li p a來確保只會更改到這個a的顏色。
0 – 0 – 9
- 數字愈大權重愈高，層級愈高權重愈高
- 以 0 – 0 – 9 跟左邊的 0 – 0 – 2 相比，0 – 0 – 9 的權重會大於 0 – 0 – 2；
- 以 0 – 0 – 9 跟下面的 0 – 1 – 0 相比，0 – 0 – 9 的權重會小於 0 – 1 – 0；
愈後面的圖片權重愈高

如果看得懂這張圖，應該會覺得!important的漫畫會讓你嘴角上揚吧 XD，超有趣的圖解。

初學者撰寫 CSS 的時候，常常會因為這個蓋了那個設定、那個蓋了這個設定，結果永遠搞不清楚到底哪個要蓋哪個而感到焦躁不已，最後通通給我採用!important暴力法，每次看了都哭笑不得 XD。

所以我誠心推薦你們可以收藏這個網站，也可以把圖片印出來隨時對照，以後就可以寫出簡潔卻能顧到權重的 css code 囉：)

使用 CSS nth-child 必須要注意的事情

日期：2013.08.27
留言數：3
標籤：css 語法原創教學

之前有寫過一篇利用 :nth-child() 讓網頁展示商品時左右對齊的文章，裏面有稍微提到:nth-child()的使用方法。

其實:nth-child()好用的地方就在於他可以針對每個元素做個別的樣式設定，不用再像以往一樣用程式判斷然後算半天。不過我最近發現，有一些排版，沒辦法直接使用:nth-child()達到我想要的效果，所以最後我還是改用 jQuery 撰寫。如果你常使用:nth-child()寫網頁，不妨可以參考一下唷。

再次引用 W3C 的解釋(請特別記住這句話，接下來的範例，受到這句話的影響非常深刻唷)：

:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。n可以是數字、關鍵詞或公式。
【範例】規定屬於其父元素的第二個子元素的每個 p 的背景色：p:nth-child(2) { background:#ff0000; }
CSS3 :nth-child() 選擇器 / W3SCHOOL

看完如果似懂非懂的朋友，沒關係，請先記住這句話，下面會再詳細解說。這篇文章先當作大家已經會使用基本的:nth-child()。

範例

話不多說，直接上範例，CSS & HTML 語法請看我的 codepen，或參考以下 DEMO：

以上這個網頁結構，分作主課程 (WordPress, CSS, Html) 以及子課程 (install plugin, install theme…等) 兩種；在範例中，我想要做的效果是「當子課程是偶數欄時，背景會變咖啡色」。

左邊是用 CSS 的:nth-child(odd)語法，右邊則是用 jQuery 的:odd selector，大家可以看到最後呈現的兩種效果不太一樣。(是的，你沒看錯，odd 是奇數不是偶數，為什麼我會用 odd 而不用 even，後面會解釋)

就常理而言，應該是右邊的「Use jQuery(:odd)」會比較好閱讀，左邊的欄位變色感覺有些不連貫。如果你有看 codepen 的語法，應該會發現我都是使用:odd來控制，那為什麼計算的結果不一樣呢？難道是 CSS 跟 jQuery 對 odd 的計算方式不同嗎？

其實可以說是，也不是。事實上，這跟 HTML DOM 有比較大的關聯。

版面解析

讓我們先來拆解這個 HTML 版面。這是一個課程清單表，主課程底下會有很多子課程，所以用類似「合併儲存格」的功能，把最前面的主課程欄位合併，這樣在看課程的時候較一目了然。因此，我是這麼寫的：

<div class="class-wrap">
  <div class="class">Wordpress<br /><span class="week">(Wednesday)</span></div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">install plugin</div>
    <div class="time">19:00 ~ 21:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">install theme</div>
    <div class="time">14:00 ~ 18:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">post your first atricle</div>
    <div class="time">18:00 ~ 20:00</div>
    <div class="index"></div>
  </div>
</div>

我用.class-wrap包住最大的課程類別，再用.content包住子課程。所以簡化版的 HTML 會長這樣：

<div class="class-wrap">
  <div class="class">主課程標題 1</div>
  <div class="content">子課程 1</div>
  <div class="content">子課程 2</div>
  <div class="content">子課程 3</div>
</div>

<div class="class-wrap">
  <div class="class">主課程標題 1</div>
  <div class="content">子課程 1</div>
  <div class="content">子課程 2</div>
</div>

接著，回到原本我們想做的網頁效果：「子課程的偶數欄位要變色」。

我們想要變色的 class 是.content，然後是偶數(even) 欄位。假使我們用:nth-child來寫的話，正常毫無疑問會這麼寫：

.content:nth-child(even) {
  background: #A69689;
}

但你會發現，用:nth-child(even)後，居然是奇數欄位變色了!! (也可以直接編輯我的 codepen 看結果唷)

揪竟是為什麼呢！？只能說:nth-child是個非常奇妙的東西，尤其碰到像範例這種複雜的排版，整個計算方式會跟常理認知的不太一樣呢！讓我們來慢慢的、一步步了解吧。

一、先了解`:nth-child(n)`的初始值是 0 還是 1 ?

:nth-child(n)的初始值是 1 ，依序 1、2、3、4 這樣算下來。因此沒有:nth-child(0)這種東西

二、再了解`:nth-child(n)`的定義

★ 重點 ★ 請把剛才我請你記住的那句話，關於:nth-child(n)的定義，拿出來複習一下：「:nth-child(n)選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型」。

接著，我們再把剛剛的 CSS code.content:nth-child(even)，改成跟定義一樣的句子：「.content選擇器，匹配其父元素.class-wrap的第偶數(even)個子元素」

… 好吧，我覺得大家一定看不懂，讓我改用白話文說一遍 ~~(嗚嗚，要講解這一部分好難啊，不要逼我自暴自棄 T^T)~~

先找到.content的父元素：.class-wrap。
找出.class-wrap底下的所有子元素，以剛剛的語法範例來看，第 1 個子元素是class="class"的主課程標題，第 2 個子元素才是class="content"的子課程 1 。主課程標題 1 子課程 1 子課程 2
因此，原本我們以為「子課程 1 」會是匹配父元素的第 1 個元素，但因為.content前面還有一個.class，所以「子課程 1 」變成了匹配父元素的第 2 個元素。
再重新把.content:nth-child(even)拿回來看，其實符合偶數(even)的元素是這些：

這樣大家清楚嗎？因為前面多了一個不是.content的 class，但他也是.class-wrap的子元素阿！所以全部算下來，原本我們以為的偶數會是奇數、奇數會變偶數。因此我的範例語法才會寫:odd而非:even

如果了解，就讓我們繼續進行下去。

三、為什麼 n 的計算不是從 1 到 100 呢?

因為:nth-child(n)是以父元素.class-wrap作為起始點。假設第一個主課程底下有 4 個子課程，他的元素依序計算為 1、2、3、4；但，到了第二個主課程又會重新從 1 開始計算，並不會從 5 繼續數下去。

這就是為什麼我們看到左邊的範例會感覺參差不齊，但如果你把每個.class-wrap都當作一個段落，就會發現他其實偶數的元素還是會變色的。

圖解

那，到底每個子課程的:nth-child(n)是多少？

還是不太清楚的朋友，可以再看看我寫的 codepen：http://codepen.io/mukiwu/full/nmlkt ，然後隨意點選任何子課程的欄位。你會看到如下結果：

如果你點選了任意子課程的欄位，可以在紅底的區塊看到一些數字。

簡單總結：

「Use CSS nth-child(odd)」：以主課程作為區塊，每個主課程結束以後，會重新開始計算。這邊出現的數字是該欄位的:nth-child(n)的 n 值
「Use jQuery(:odd)」：單純計算有多少子課程，不受主課程影響，所以會從 0 算到最大個數。這邊出現的數字是所有子課程的 index 值

以上是兩種寫法主要的差別。

利用 jQuery :odd 撰寫

就如前面所說，為了視覺的平衡，我們幾乎都會採用右邊的表現手法，所以可以改用 jQuery 撰寫：

var contentOdd = $("#jquery-trick .content:odd");
contentOdd.css("background" , "#A69689");
contentOdd.children(".course").css("color","#eee");

只是要特別注意的是，jQuery(":odd")的初始值是 0 不是 1，所以第 1 個子課程是偶數、第 2 個子課程才是奇數… 以此類推。

我們以為偶數的欄位是奇數，以為奇數的欄位是偶數，這樣的情況會再度發生。

總結

如果你會用到像我這樣的排版，直覺的使用CSS nth-child來撰寫的話，也許會碰到同樣的問題。因此，可以嘗試使用 jQuery 解決。如果有可以直接用 CSS 解掉的方法，也歡迎告訴我唷：)

以後，我會將一些寫的較漂亮的範例轉移到 codepen，如果你喜歡我寫的範例，也歡迎到我的 codepen 支持我唷

CSS Sprite

Web Icon Font

SVG sprite

怎麼使用 SVG

SVG sprite 實作

使用 IcoMoon 的 SVG sprite 注意事項

Sass Maps 基本介紹

利用 functions 包裝 Sass Maps

用迴圈跑 Sass Maps

我能使用 Sass Maps 嗎

使用 SASS 管理 z-index

結論

DIV 垂直水平置中

文字垂直水平置中

HTML 結構

CSS 樣式與寫法

正常狀況下，圖片緊密排列

使用 margin 調整的結果

將寬度寫死的結果

使用 border-spacing 調整的結果

套用我修改的 Facebook 樣式

ul 外還有父層 div

ul 沒有父層

在 html 加入 data-* 屬性

使用 :not 屬性做篩選

利用 jQuery 即時搜尋

結語

相關 jQuery 插件應用

在 html 加入 data-* 屬性

在 CSS 利用 attr 抓取 data-* 屬性

利用 pre 解決 tooltip 自動換行

利用 Unicode 字元顯示多行 tooltip

閱讀順序

閱讀說明

範例

版面解析

一、先了解:nth-child(n)的初始值是 0 還是 1 ?

二、再了解:nth-child(n)的定義

三、為什麼 n 的計算不是從 1 到 100 呢?

圖解

利用 jQuery :odd 撰寫

總結

一、先了解`:nth-child(n)`的初始值是 0 還是 1 ?

二、再了解`:nth-child(n)`的定義