我在重寫網站 CSS 時發現的各種事

這篇文章是 #100DaysToOffload 的第二篇。這個計畫主要是藉由在一年完成 100 篇文章,促使自己寫作、思考。

最近我重新寫過了整個網站的 CSS,讓網站煥然一新。我一直以來很欣賞像是 Slackware 首頁 或是一些 GNU 說明文件網頁的風格,因此這次重寫就是以這幾個網頁為參考標準。

但是重寫的過程中,總是有許多可怕的眉角等著絆倒你…

單位長度:px、em、rem

之前在網路上學 HTML / CSS 的時候,總會看到:盡量避免用 px,因為 px 會隨著各個裝置螢幕大小而有所不同;如果想要設計適應性(能在電腦、平板跟手機上瀏覽的)網頁,要多用 em 跟 rem。

但這次我完全不遵照這個規定,一切以 px 為主,有必要時才使用 rem,但還是能達成適應各種螢幕大小的目的。為什麼呢?因為在 CSS 中,px 不是實際上的螢幕像素,而是「一個能舒適地用肉眼看見的大小,不會小到要瞇眼才能看得清楚,也不會大到看得到各個像素」(翻譯自這篇 Mozilla Hacks 文章)。因此用 px 作為大小的基礎其實沒有想像中的糟,反而能完整反映讀者「看到的大小」會是多少。至於不用 em 或 rem 的原因是,em 其實沒有想像中的好控制,因為只要讀者設定不同的字體大小,版面就會跑掉。

border、padding、margin 對於 width 跟 height 的影響

在設計頁面的時候,為了讓一行不會長到影響閱讀,會需要控制最大寬度;但最大寬度這件事,跟許多 CSS 中的排版設定有很大的關係。我發現:

border 跟 padding 不算在 max-width 內。

在寫這個網站的 sidebar 時出現了這個問題:sidebar 如果要放左邊,真正的內容就要往右移;而這個寬度是:sidebar 的 width + 兩邊 border 的寬度 + padding 的寬度 + 空隙的距離。因此最後右移的大小是:

  112px(sidebar 寬度)
   16px(兩邊 padding:8px*2)
    4px(兩邊 border:2px*2)
+   8px(預留給空隙的寬度,等同於導覽列跟sidebar的距離)
-------
  140px

在算各種距離的時候,也同樣要把這套邏輯套上去,才能算出最適合的寬度。

行距(line-height

行距在 CSS 中的定義其實大有問題:他並不是單純在每行之間加入空白,而是將每行上下各加一點空白,讓文字在兩邊空白的中間。這個奇怪之處讓段落邊的空白很難拿捏,因為段落與段落間的空白視覺上會大於段落到邊界的空白。用文字很難描述這個現象,見下圖:

行距怪狀

更大的問題是,這個問題似乎只存在於英文字上,中文字則沒這個問題,因此不能直接將第一行行距減少就拍拍屁股走人。目前還沒試到滿意且滿足兩種語言的作法,只好先擱著。

這次更新還有動到其他部份,像是清單項目的行距;總而言之,整體調起來還算滿意。

Last updated: 2023-03-19

標籤:隨想

如果想讓我知道您看過這個頁面,請點擊這個連結運作原理