Video.js：開放原始碼 HTML5 影片撥放函示庫

Video.js 是一個開放原始碼的 HTML5 影片撥放函示庫，提供一個統一且跨瀏覽器的 API，並且可以在瀏覽器不支援 HTML5 時自動使用其他的替代方案。

在最新的 HTML5 標準中，已經可以直接撥放影片檔了，如果您想要有更完整的功能，可以使用 Video.js 這個函示庫，他是以既有的 HTML5 為基礎所發展的影片撥放工具，並且添加了更多的功能，提供不同瀏覽器統一的 JavaScript API，在瀏覽器不支援時也可以使用 Flash 等替代方案。

使用 CSS 的 ::before 自訂 HTML Ordered Lists 的編號樣式

這裡介紹如何使用 CSS 的 ::before selector 自訂 HTML ordered lists（ol）的編號樣式。

一般 HTML 的 ordered lists（ol）呈現的效果是這樣：

1. 這是第一個項目
2. 這是第二個項目
3. 這是第三個項目
4. 這是第四個項目
5. 這是第五個項目

我們這裡介紹如何使用 CSS 自訂每一個項目的編號：

1. 這是第一個項目
2. 這是第二個項目
3. 這是第三個項目
4. 這是第四個項目
5. 這是第五個項目

YUI Compressor： JavaScript 與 CSS 壓縮工具，產生最小化的網頁

YUI Compressor 是由 Yahoo 所發展的一套 JavaScript 與 CSS 壓縮工具，可以協助網頁開發者產生最小化的網頁。

網頁大小跟載入的速度有很大的關係，如果要降低網頁的大小，除了可以使用 Google Closure Compiler 編譯器將 JavaScript 最小化之外，也可以使用 Yahoo 所發展的 YUI Compressor，它除了可以處理 JavaScript 之外，也可以一併將 CSS 檔最小化。

加速 JavaScript 執行效率的 DOM 操作技巧（降低瀏覽器回流）

在開發 RIA 的過程中，會常常使用到 JavaScript 來變更網頁元素，甚至增加新的網頁元素，而不同的操作方式也會對執行效能有所影響。

瀏覽器在顯示網頁時，會需要計算每一個網頁元素應該放置在哪個位置，這個計算過程就稱為瀏覽器回流（browser reflow）。當我們對 DOM 進行操作（例如更改元素的 CSS 樣式、大小等）或是改變視窗大小時，也會造成瀏覽器的回流，由於瀏覽器的流回需要耗費時間，所以如果可以盡量減少回流，就可以增加整個網頁應用程式的效率。

Stylus：Node.js 架構下的 CSS 前處理器

Stylus 是一個 Node.js 架構下的 CSS 前處理器，這裡介紹它的基本使用方式。

Stylus 是一種用來產生 CSS 的程式語言，其語法基本上是從傳統的 CSS 簡化而來，所以跟 CSS 的寫法類似，但是更精簡，另外也加入一些函數與運算的功能，讓使用上更彈性。

HINT.css：以 CSS3 與 HTML5 實作的提示訊息方塊（Tooltip）工具

HINT.css 是一個使用 CSS3 與 HTML5 實作的 tooltip 函式庫，可以在網頁中呈現漂亮的提示訊息方塊。

一般在網頁中若要顯示提示訊息，可以使用 title 這個 HTML 屬性，像上面這張圖將 title 設定為 "HTML.css Logo"，所以當你將滑鼠移到圖片上面時，停留一段時間他就會顯示這行提示訊息。

Autoprefixer：最佳的 CSS 供應商前綴（Vender Prefixes）後處理器

Autoprefixer 是一個 CSS 供應商前綴（Vender Prefixes）的後處理器，這裡告訴你這個工具如何使用以及它的優點在哪裡。

既有問題

在之前的文章中我們介紹過好幾種處理 CSS 供應商前綴的問題，但是各種工具都有其優缺點，像 Prefixr 這類的工具在處理比較大量的程式碼時，老是要將程式碼複製與貼上，就會很累。

自製中文網頁字形（Web Font）並內崁至網頁中（使用 CSS @font-face）

這裡教大家如何自己製作中文的字形檔，並轉為網頁用的字型格式，藉由 CSS 的 @font-face 功能在網頁中使用。

現在大部份的瀏覽器都可以支援 @font-face 這樣的自定網頁字型功能，但是到目前為止這項技術大部份都是應用於英文的字型上，而中文的字型檔由於大小通常都很大，如果讓使用者在看網頁文字時還要再下載好幾 MB 的字型檔，通常都會讓整個網頁效率大幅下降，所以大部份的網頁中的中文字都比較少使用自定的字型。

CSS 網頁字型 @font-face 使用教學與範例

這裡介紹 CSS 的 @font-face 使用方式與範例，讓網頁設計者可以在網頁的字型使用上更有彈性。

@font-face 這個 CSS 的 at-rule 可以讓網頁設計者可以使用網路上的字型檔來顯示網頁中的文字，甚至還可以讓設計者使用自己所提供的字型檔，讓網頁的設計更具有彈性，在選擇字型時就可以不需要考慮一般的電腦是否有安裝，凡是放在網路上的任何字型檔都可以使用。而 @font-face 除了在 CSS 的頂層設定上使用之外，在任何 CSS 條件群組（conditional-group）at-rule 中也可以使用。

浮動的網頁表單欄位名稱（Floating Form Label）製作教學

這裡介紹製作浮動的網頁表單欄位名稱（Floating Form Label）的幾種方式，讓網頁上的表單看起來更美觀。

傳統網頁上的表單都是以靜態的方式呈現，而現在隨著網頁技術的發展與新的設計概念不斷演進，現在你可以使用一些工具讓網頁的表單看起來更漂亮，更具有設計感。

如何對付各種不同的 CSS 供應商前綴（Vendor Prefixes）？

這裡介紹如何對付各種不同的 CSS 供應商前綴（vendor prefixes），讓網頁開發更有效率。

在使用 CSS 設計網頁時，多多少少都會遇到需要處理不同瀏覽器之間的相容性問題，其中一個很棘手的問題就是 CSS 的供應商前綴，為了要使每一種瀏覽器都支援你寫的 CSS 程式碼，你必須依照各種不同的瀏覽器加上它們專屬的供應商前綴，以確保該 CSS 可以被正常執行。

舉例來說，在使用 CSS 的動畫（animation）功能時，animation 相關的屬性就必須要加上 -webkit- 與 -moz- 這類的供應商前綴，確保不同的瀏覽器都可以支援，動畫關鍵影格（keyframes）at-rule 的部分，也要加上供應商前綴，變成類似 @-webkit-keyframes 與 @-moz-keyframes 這樣的型式，這裡最麻煩的地方就是每一個 CSS 屬性與每一個供應商前綴的組合都要寫出來，如果只是一兩行程式的話是還好，但是通常一個內容比較豐富的網頁，這類的 CSS 會非常多，這個時候要處理這些供應商前綴就是一個大問題。

使用 CSS Animation 製作網頁上的動畫（只要 CSS3，不用 JavaScript！）

這裡介紹如何使用 CSS3 的 animation 功能在網頁上製作動畫，而且不需要使用到 JavaScript。

CSS3 所提供的動畫（animation）功能可以讓網頁元素的 CSS 樣式（style）從一個設定轉換到另外一個，藉著這樣的方式產生動畫的效果。CSS 的再設定動畫時包含兩個部份，一個是用來設定 CSS 動畫的樣式，另外一個則是指定動畫開始、結束或中途路徑的關鍵影格（keyframes）設定。

使用 CSS 產生的動畫跟傳統上以 JavaScript 製作的動畫比較起來，有一些優點：

1. 使用 CSS 會比 JavaScript 容易很多，對於簡單的動畫而言，不需要學習 JavaScript 即可馬上製作出來。
2. 使用 CSS 的動畫比較節省資源，甚至在有一定負載量的系統中也可以很平順的執行，但是 JavaScript 的動畫就很容易因為效能問題而跑不起來（除非經過很精心的設計），而且一般瀏覽器的繪圖引擎（rendering engine）還可以透過 frame-skipping 這類的方式，提升整體的效能。
3. CSS 把動畫播放的控制權交給瀏覽器控制，這樣可以讓瀏覽器進行更多的最佳化動作，例如當一個動畫放在背景的籤頁時，瀏覽器就可以減低這個動畫的更新頻率。

Colorpeek：查看與分享 CSS 色碼的線上工具

Colorpeek 是一個查看與分享 CSS 色碼的線上工具，除了顯示 CSS 顏色還可以自動取出圖片的主要顏色。

一般在設計網頁時，一定常常會需要查看某項網頁元素的顏色，或是為某一個網頁元素選擇一個適當的顏色，如果是團隊開發的情況，在多個網頁開發者之間討論顏色時，也會碰到需要互相交流顏色選擇的看法，當然你可以直接將 hex triplet 貼上 Photoshop 這類的會提軟體，看看這個顏色的感覺，調整好顏色之後，再把這個 hex triplet 貼在 Email 寄給另外一位開發者，跟他說這個顏色不錯，但是這樣每次調整顏色時都要開啟 Photoshop 這樣的軟體，其實不太方便。

使用 Google 雲端硬碟（Drive）放置 Blogger 部落格使用的 CSS 與 JavaScript 檔案

這裡介紹如何使用 Google 雲端硬碟（Drive）放置 Blogger 部落格使用的 CSS 與 JavaScript 檔案。

一般撰寫網頁時，通常會將比較複雜的 CSS 與 JavaScript 跟一般的 HTML 網頁分開，分別以 .css 與 .js 這樣的檔案來儲存，這樣可以避免一個 HTML 檔太大、難管理且雜亂無章，而且也可以重複給不同的 HTML 網頁使用，對於大型網站來說是個很重要的功能。

Google 的 Blogger 部落格雖然可以允許我們自定樣板，但是並沒有提供上傳 CSS 與 JavaScript 檔案的功能，如果你需要使用一些網路上別人寫好的 CSS 或 JavaScript 函式庫時，就會比較麻煩了，因為這類的函式庫通常都需要先把它提供的 .css 或 .js 檔放在自己的網頁空間，再將對應的連結路徑加入 HTML 網頁中，如果你是 Blogger 的使用者，要找個地方來放置這些檔案就是個問題。

還好 Google 還有一個雲端硬碟的服務，我們可以利用它的公開分享功能來解決這個問題，概念上就是把 .css 或 .js 檔放在 Google 雲端硬碟上，然後把連結放進 Blogger 部落格中使用。

當然除了 Google 雲端硬碟之外，你也可以使用任何網路上的免費空間，而這裡我們選用 Google 雲端應碟，主要是因為它的一些優點：

• 空間大：Google 雲端硬碟跟 Gmail 合併空間計算之後，你最多可以放置 15G 的檔案在上面。
• 穩定性高：Google 的伺服器有高達 100% 的 uptime，且沒有流量限制，你可以很放心你的網站不會因為伺服器問題而停擺。
• 免費：不用錢也是很大的優點。