css

現在客戶對網站設計的要求越來越高，要用CMS 自助更新網頁，又要不時加入新功能，舊式以Table 排版的壞處是網站欠缺彈性，要更改或維護網站就需要更多時間。

CSS 中最常用的 display properties 一般有 block、inline、none。而 Inlin-block 是另一個極好用的屬性，卻因為 IE 不太支援，所以常常被忽略掉。

CSS3 的特性讓開發者都很方便, 可以省去很多沒用的 HTML, 也可以省掉不少切圖的工.

又是老話題。CSS3 PIE 又是另一個目的在令 IE6 – 8 支援圓角、陰影及漸變的 .htc hack。

瀏覽器越來越多，舊的未去，新的又來，CSS hacks 亦需定時整理。

strong>CSS3的 box- shadow屬性可以讓我們輕鬆實現圖層陰影效果。我們來實戰詳解一下這個 屬性。

1. box-shadow屬性的瀏覽器兼容性

IE-CSS3 是個能令 Internet Explorer 不完整地支援幾個常用的 CSS3 屬性的小 script。它利用了 Internet Explorer 專有的 Vector Markup Language (VML) 來繪制所需效果。

使用方法很簡單，如果你需要圓角效果，只需一如以往地用 border-radius，再加上 behavior: url(ie-css3.htc) 即可：

寫 CSS 最痛苦的是要搞定一堆 browser bugs ，其次就是要面對 CSS 不是 programming language 這現實，不存在其他程式語言常見的 變數、運算、繼承 等概念，使原本簡單的工作變得冗長，並且使維護工作變得麻煩。

less 的出現便是為了解決這個問題：在現有 CSS syntax 的基礎上，為 CSS 加入程式語言的特性，包括變數、scope、nested rules、運算、繼承。

CSS 在各個瀏覽器呈現多少有點差異, 於是就有 CSS Hack 產生, 主要用在瀏覽器的微調, 可見: CSS 處理不同瀏覽器畫面錯亂問題.

除了 *, _ 等, 還有其它的 Hack, 在各種瀏覽器的運作狀況如何呢?

Slickmap CSS 可幫你輕易美化網站地圖，使用時只需要使用 HTML 的 unordered list 製作 sitemap 的內容，加入 css 檔及依照其指引設定，就可以製作出如下圖一般美觀的 sitemap。

筆者嘗試用 Slickmap CSS 修改客戶的網站地圖，真的很客易，一般情況下製作網站地圖時都經已用了 unordered list，修改的不多。首先要數清楚在主頁之下有多少個大分類，然後修改 css 檔內 #primaryNav li { width: ; } 的數字，即 100% 除以分類數目，以示範的 sitemap 為例主頁之下有5大分類，因此 width 就是 20%。之後只需要把最外圍的 ul 加入 id 為 primaryNav，及用一個 div tag (class 為 sitemap) 把整個 list 放入就可以了。此外你可把不屬於 sitemap 結構的連結加入另一個 id 為 utilityNav 的unordered list 內，就會出現在頁面的右上角。香港網站常設有多語言版本，在這處加入其他語言版本的連結就很合適。

從 DOM 技術的角度看，網頁中每一件物件都是「箱」狀的，一段文字、一幅圖像、一個連結，它們的長度、闊度、位置等等都可以由 CSS 控制，若果你沒有設定箱子的大小，它會隨著內容的多寡而自行調整，確保容納並顯示所有內容，但若果箱子的大小被限制了，卻又無法容納所有內容的時候，這時 便是 CSS 的 overflow 屬性發揮作用的時候。

CSS Tricks 網站上 Chris Coyier 有一篇文章介紹 CSS 的 overflow 屬性，文章說，Overflow 的值可以是：visible (預設)、hidden、scroll 及 auto，它還有兩個「姊妹」屬性 overflow-x 及 overflow-y，但不是所有瀏覽器都支援。

驟眼看來 Object Oriented CSS 好像不過是另一個 CSS Grid，但背後有其一道哲學，就是以 Object Oriented 的方式去寫 CSS (廢話)，著重的是可以通過 code reuse，來分隔結構與皮膚、容器與內容。

可是這怎樣可以達成呢？CSS 本身並沒有所謂 Object 概念，其主要靠的是 Cascade，將 CSS Rules 一路堆疊下去。在這裏可以模擬到一點「繼承」特點，在同一個 tag 上使用多個 class (其實是 composition)。不過要真正做到很有規則，就要靠「自律」：自訂一些規則、實踐方法去跟從。