CSS 的 overflow 屬性

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

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

繼續閱讀

20 個帶領 CSS 成為主流技術的網站

你對那些研究 CSS 的網站印象最深刻?Tim Wright 在 SitePoint 網站列舉 20 個推動 CSS 成為主流技術的網站,Tim 把這份名單分為「明顯」和「不那麼明顯」兩部份,前者是一些大部分人馬上想到的網站,遺漏了任何一個都可能會引發一場論戰;後者則包含一些我們可能會忽略,但是對推動 CSS 有重大貢獻的網站。

開始編製這份名單的時候,Tim 認為很多人都推動過 CSS 的發展,這份名單應該不難製作,但隨著他明白他要列舉的是網站,而非背後推動的人,而研究 CSS 技術的網站多如恆河沙數,無論如何,他還是製作了一份很值得參考的 CSS 網站名單。

繼續閱讀

為超連結加上有意義的圖示

正當你在網上愉快地瀏覽著,按了一下超連結後,瀏覽器突然跳出一個視窗,詢問你是否要儲存一個壓縮檔案,這是多麼不爽的事!若果你的訪客一早知道這 個超連結會開啟一個壓縮檔案(你當然有很好的理由送出一個壓縮檔案,例如這是一個軟件包之類),他們的感受會好得多,也可以讓他們自行決定是否開啟,或者 什麼時候開啟。傳統的作法是在超連結後面加上一個檔案類型的提示,這可以是一句文字,也可以是一個小圖示,但要把所有這類型的超連結加上提示,除了手動以 外,有沒有更方便快捷又不會出錯的方法?Toby Somerville 在 SitePoint 有一篇教學文件介紹兩個作法。

繼續閱讀

CSS 技巧 ── 絕對位置、相對位置

若果你要做一個網頁,左邊是一個固定寬度的選單,右邊是一個佔用所有餘下空間的主內容,兩邊的長度都剛好是瀏覽器視窗的高度,選單和主內容都會隨著視窗的大小而自動調整大小,不用 JavaScript 的話,你會怎麼做?

本來最直接的方法是寫一段 JavaScript,每次載入頁面或者變更瀏覽器大小之後,JavaScript 會從新調整 div 的高度,可惜這樣做我們要在window.innerHeight、document.documentElement.clientHeight、和 document.body.clientHeight 之間選擇合適的函數,也要考慮不同瀏覽器中事件處置器的不同使用方法,若果有純 CSS 的解決方案,並不用頭疼這些問題了。

繼續閱讀

有用的 CSS 提示

Jonathan Snook 根據他個人經驗和習慣,總結了一些有用的 CSS 提示,包括是否應該使用像素作為字型大小的單位、把 CSS 宣告寫成單行、適當地縮排、只需支援最新的瀏覽器等等,這些提示很大程度上是 Jonathan 的個人偏好,正如他自己說:「我希望把我在 CSS 上的工作習慣與大家分享,但我必須提醒你,這裏所說的可能很有爭議性,但不活在危機之中生命有甚麼意義呢?(對的,當 CSS 被視為「危機」的時候,我的確活得很刺激。)」

繼續閱讀

如何編寫動態網頁:結合 HTML、JavaScript 和 CSS 的範例

IBM developWork 有一連兩篇的文章介紹如何編寫動態網頁,內文舉出了幾個常見的例子,包含詳細的說明和原始碼,對於希望令自己編寫的網頁有更多互動效果、更多姿多采,卻對於 JavaScript、CSS 等不甚了了的人來說,這是一份不錯的教學文件。

這份文件介紹以下六種動態網頁效果:矩形彈出視窗、tooltip、隱形/顯示段落、分頁、統計圖表等。

矩形彈出視窗

DHTML 矩形彈出視窗

tooltip

繼續閱讀

用 CSS 產生語法高亮顯示效果

語法高亮顯示(syntax highlighting)幾乎是每一個技術網站都必備的功能,比較以下兩個例子便很容易明白沒有這項功能是多麼令人懊惱的事:




My Page


Heading

HTML source without syntax highlighting, is it easy to read?


大部分系統實現這項功能的方法都是倚靠特定的函數來加插顏色到原始碼中,例如使用一個 highlight_html($input_str) 把一段 HTML 字串加插顏色效果,這個方法違反了把表達層和運算層分開的軟件設計理念,而且這種為特定系統編寫的函數移植到其他系統也有一定的困難,而且由編程語言直接 生成 HTML 原始碼,使維護和修改顏色方案時十分困難。

繼續閱讀

用 PHP 控制 CSS

thecssweblog 有一篇由 Amber Rhea 寫的有關使用 PHP 來動態控制 CSS 的文章。文章引述 Patrick Fitzgerald 另一篇有關使用 PHP 來控制顏色的文章

Amber Rhea 說:「用途可以說是數之不盡,例如你可以建立一個動態的外觀主題系統,每個星期自動更換網站的主題顏色,在特別的日子例如耶誕節和情人節使用特別的佈景主題等。

至於 Patrick Fitzgerald 控制 CSS 中的顏色的方法是:

  1. 把所有顏色用變量來表示,例如:
    $white = "#fff";
    $black = "#000";
  2. 所有顏色用抽象的功能性名稱來命名,例如 “base”(基本色)、”highlight”(高亮)等,達到內容和表達分家的目的。
  3. 由一種基本色自動生成其他深淺色調。
  4. 自動調整前景顏色的反差,使它在背景顏色上顯示時比較清晰

他也解釋了如何在 CSS 檔案中使用 PHP:

繼續閱讀

一篇關於 DHTML 和 DOM 的長文

From DHTML to DOM scripting by Christian Heilmann

忘了在哪兒見到這篇文章的介紹,當時 click 入去看一看,竟然分為 20 來個章節,PDF 版本有 40 大頁,心想:「大作啊!」第一個反應就是把網址記下,然後離開。

昨天找了這篇大作出來閱讀,內容是講解編寫動態網頁的方法,從舊式的 DHTML 到新興的 DOM scripting,兩者其實都是使用 Javascript, CSS 來使網頁達到互動的效果,但卻無需每次到 server 更新頁面。

繼續閱讀