CSS樣式表

階層樣式表,簡稱CSS,用於改變HTML文檔模型中的各個元素(瀏覽器則將文檔模型視覺化呈現),CSS可變更HTML網頁標籤屬性,如區塊大小與顯示位置、間距與外型、字體與匯入樣式(svg、json)等等,或使用動畫屬性(transition)製作轉場效果,帶給網頁多元且自由的視覺優化。

HTML標籤可自由定義類別名,在每個類別名添加CSS屬性來控制樣式,標籤本身也帶有特定屬性,如常用的<div>標籤自帶區塊屬性(block)、<h1>標籤則有32px字級與粗體屬性(font-weight);若以編寫一個icon為例,大致來說就是選擇HTML標籤 > 添加CSS類別名 > 樣式表內給予相關屬性讓它看起來像一個圖標。

See the Pen
xerYdj
by wenchi (@wenchi06)
on CodePen.

( HTML標籤種類有很多如按鈕、文字、表單、區塊、選擇器等等,皆有固定用途,類別名可依需求再添加複數;如上圖中每項屬性與值,為標籤做宣告)

手機版樣式覆蓋,並拆分樣式表文件管理

CSS樣式會受到排序影響,編寫在標籤行內樣式優先被讀取 > 嵌於頁面的內部樣式 > 使用外部匯入、gulp合併時的排序;樣式表內後列屬性優先於前列屬性,以上三者排序內皆通用,依照這些排序邏輯,可進一步作樣式表分類整理,與特殊用途如手機版樣式覆蓋、A/Btesting各別讀取。

樣式表編寫

以使用者體驗為前提設計視覺圖稿時,就該設想切版後可能會遇到的狀況,規劃如何編寫CSS樣式,編寫樣式需採用正規作法,並透過測試實際操作,檢查頁面執行是否流暢或有無遺漏樣式。從一些實際案例,檢視需要注意的問題點:

右圖未清除浮動影響造成跑版,codepen編寫範例

浮動 :最容易讓頁面發生跑版錯誤,display、float屬性與使用方式有密切關係。

  • 若使用浮動屬性(float),會使元素脫離父層,依指定方向移動;若未設定父層高度情況下,元素脫離後,父層高度會塌陷造成頁面跑版,須清除浮動影響。
  • display屬性值與其他屬性組合使用時,某些屬性可能無效;在原本定義上,inline為行內元素,block為區塊元素,行內元素無法對width、height、margin、padding屬性生效,屬性值inline-block則依需應用,可作為行內帶區塊元素,但float無效果。
  • 可添加清除浮動影響的屬性(clear),讓元素的某個方向不受浮動影響。也有多種清除方法,可視需求使用。
    • 父層設定高度,但內容資訊不固定時不適用,缺乏延展性,僅可運用在固定高度的區塊內。
    • 父層設定溢出屬性overflow清浮動影響,須配合區塊寬度使用,但內容量過多時可能被隱藏截斷。
    • 在浮動元素下方新增空白標籤<div>,並設定屬性clear,可清除上方浮動元素,但標籤語意不明,未來可能被移動或誤刪。
    • after偽元素清浮動, 新增於元素末端,幾乎不影響結構與延展性,為四種方法首選;可獨立成一份樣式表文件,匯入方式給HTML標籤使用,在需要清除浮動的標籤元素內添加即可。
NEW圖示定位於“玩遊戲”選單上

相對/絕對定位 :position屬性自由讓HTML元素設置於頁面任何地方,也能讓元素重疊在一起,是浮動屬性(float)做不到的。

  • 必須在父層使用相對定位值(relative),讓子層所有添加絕對定位值(absolute)的元素,可以在父層區塊範圍內移動。若未在父層級設置relative,則使用absolute 的子元素就有可能跑版。
  • 使用絕對定位(absolute)的元素,必須使用top、bottom、left、right定位屬性來調整位置;若使用邊距屬性padding、margin可能跑版,每種裝置瀏覽器對邊距屬性呈現結果不同。

彈性區塊:flexbox讓區塊內元素自適應不同螢幕尺寸,與浮動區塊不同,也不容易造成跑版問題,缺點為部分裝置瀏覽器不支援,所以得評估需求使用,其編寫方式也不困難。

  • 必須在父層使用彈性值flex,使父層區塊具備彈性,子層皆會自動包裝成自適應的 flex項目,主要以水平(justify-content)、垂直(align-items)屬性來控制彈性區塊內佈局。

輸入、連結 、內文樣式: 各標籤元素編寫皆有必備綁定的樣式, 熟悉樣式表屬性規則後,在測試頁面時多留意操作流程。

  • web網頁中"連結"元素或按鈕,在滑鼠游標移置時的基本設定,cursor屬性讓使用者直覺可點擊。有目標頁面時適用<a>連結標籤,若為非特定頁面,則使用<button>。
  • 考慮使用者輸入,變更<input>標籤屬性值,對應適合輸入法編寫。於手機開啟頁面時,可對焦輸入框。
  • 控制內容資訊排列,以最大化內容量為前提考慮,切版時須注意框架延展性、字元極限長度,包含中英文、數字連字與空白字元,善用word-break屬性。

樣式表優化

檢測玩競猜首頁,出現建議移除的樣式表

網站內包含龐大樣式用量,為達有效維護,必須採取更多優化的編寫與管理方法,編寫時盡可能降低樣式表文件大小、注意樣式重複性。
Google PageSpeed Insights檢測,查看最佳化建議,或使用其他檢測網頁。

  • 減少“*”全局通用寫法,雖然程式碼較少,但宣告效果差,並非所有標籤元素都帶相同屬性,如設置margin、padding重置預設樣式為0時,原本就無此屬性的標籤就會再被宣告一次。
  • 樣式表內不作“import”再引入其他文件,影響瀏覽器載入順序,也可能增加額外載入時間,在文件管理也較不理想。
拆分樣式表
  • 合併/壓縮CSS樣式,將頁面中通用的樣式如header、content、footer獨立寫作公版樣式,與重置樣式reset.css為每個頁面都要引入,可與頁面樣式用gulp合併壓縮為一份樣式表,如上圖“index.css”,僅讓頁面引入一份樣式表。
  • 同上,常用樣式提取作公版樣式,加入gulp合併樣式表以便管理,若未來不需要使用該樣式即可馬上移除;可考慮將按鈕、內容資訊樣式納為公版樣式使用。
樣式屬性值縮寫
  • 將樣式內屬性值寫法合併,減少列數,目前瀏覽器皆可支援此種寫法,如上圖。
  • 減少引用外部檔案或樣式,如web字體檔案較大,非預設字體需重新載入。
左圖css、右圖scss
  • 以SASS巢狀結構編寫,適度減少樣式碼含量。
  • 巢狀結構以三個層級為限,儘管使用SASS編寫樣式也相同。
  • 使用BEM命名樣式,使層級關係、用途更能清楚辨識,可依需求決定使用層級。

CSS動畫效果

使用transform屬性進行位移、縮放

See the Pen

transform屬性可用於表現元素過場與簡單的微互動效果,透過修改元素座標來進行旋轉、縮放、位移等動作,使用CSS動畫在網頁瀏覽上執行較佳,並不會觸發瀏覽器的重繪、重排,效能較低的裝置動畫也能流暢。添加陰影屬性則會增加效能負擔,製作扁平化動畫其實運用transform與opacity屬性已很足夠。

【控制svg路徑變形】

See the Pen
XQaLgB
by wenchi (@wenchi06)
on CodePen.

以設計軟體匯出的SVG文件,編碼的多寡視圖形複雜度而定,自動產生的路徑標籤可能不同,若為較簡易的圖形輸出,可利用線上工具vectorizer,轉換為純路徑<path>,再利用transition屬性來控制變形路徑,注意路徑變形前後的座標數需一致,路徑中第一個座標值M,為主要控制元素初始X、Y軸。

無論使用何種方式匯入SVG,寬度與高度屬性兩者為必要設定,瀏覽時才會顯示正確圖形尺寸;相較一般在使用<img>標籤時,設定寬度與高度屬性,可防止圖檔載入完成前的高度塌陷。

參考資料

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *