CSS3 進階培訓

1. 現代 CSS 與 CSS 演進

• 從 CSS3 到現代 CSS
• 當前 CSS 標準與瀏覽器實現
• 了解 CSS 規範與瀏覽器支援
• 漸進增強
• 特性偵測與優雅降級
• 了解現代 CSS 生態系統

2. 進階選擇器

• 進階屬性選擇器
• 結構偽類
• :is()
• :where()
• :not()
• :has() 和關係選擇器
• 選擇器特異性
• 在大型專案中管理特異性
• 現代選擇器最佳實踐

3. 現代顏色與視覺效果

• RGB、HSL 和現代顏色函數
• color()、lab()、lch()、oklab() 和 oklch()
• 相對顏色
• 透明度與 alpha 通道
• 進階漸層
• 線性、徑向和錐形漸層
• color-mix()
• 顏色插值
• CSS 濾鏡與視覺效果
• 現代主題與顏色系統

4. CSS 自訂屬性與設計系統

• CSS 變數／自訂屬性
• 變數與後備值
• 動態主題設定
• 元件層級自訂
• 使用 CSS 的設計標記（Design Tokens）
• 建立亮色與暗色主題
• 使用 var()、@property 和具型別自訂屬性
• 建立可維護的 CSS 設計系統

5. CSS 巢狀與層疊管理

• 原生 CSS 巢狀
• 巢狀語法與最佳實踐
• CSS 巢狀與預處理器的比較
• 層疊與繼承
• 使用 @layer 的層疊層
• 管理第三方 CSS
• @scope 和作用域樣式概念
• 建立可預測的 CSS 架構

6. 使用 Flexbox 的進階版面

• Flexbox 基礎回顧
• 主軸與交叉軸
• 進階對齊方式
• 彈性尺寸調整
• gap
• 換行與排序
• 巢狀 Flexbox 版面
• 常見 Flexbox 模式
• 使用 Flexbox 建立響應式元件

7. 進階 CSS Grid

• Grid 基礎回顧
• 明確格線與隱含格線
• 進階軌道尺寸調整
• minmax()
• auto-fit 和 auto-fill
• min()、max() 和 clamp()
• 網格區域
• 響應式 Grid 版面
• 複雜頁面版面
• CSS Subgrid
• 使用 Subgrid 對齊元件版面

8. 容器查詢與基於元件的響應式設計

• 為什麼視窗媒體查詢並非總是足夠
• 容器查詢概念
• container-type
• @container
• 容器查詢長度單位
• 元件驅動的響應式設計
• 容器查詢樣式查詢
• 設計可重複使用的響應式元件
• 容器查詢與媒體查詢的比較

9. 現代響應式設計

• 行動優先設計
• 響應式斷點
• 流式字體排版
• 流式間距
• clamp()
• 現代視窗單位：
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• 動態視窗考量
• 容器相對單位
• 響應式圖像與媒體
• 減少不必要的媒體查詢

10. 邏輯屬性與國際化

• 邏輯 CSS 屬性與實體 CSS 屬性
• margin-inline ／ margin-block
• padding-inline ／ padding-block
• inset-inline ／ inset-block
• 邏輯尺寸調整
• 書寫模式
• 從右到左（RTL）版面
• 建立國際適配的介面

11. 現代字體排版

• 響應式字體排版
• 變數字體
• 字體載入考量
• font-size-adjust
• 流式字級比例
• 文字換行與溢出
• text-wrap: balance
• text-wrap: pretty
• hyphens
• 現代字體排版最佳實踐

12. 變換、過渡與動畫

• 2D 和 3D 變換
• 過渡效果
• 關鍵幀動畫
• 計時函數
• 動畫合成
• 變換效能
• 捲動驅動動畫
• animation-timeline
• View-timeline 概念
• 動作無障礙設計
• prefers-reduced-motion
• 效能考量

13. 現代 CSS UI 功能

• 原生 CSS 對話框與彈出層
• 樣式化互動 UI 狀態
• :popover-open
• :modal
• :focus-visible
• :target
• 表單狀態樣式
• accent-color
• appearance
• field-sizing
• 現代表單控制項
• 建立無障礙的純 CSS 互動

14. 進階 CSS 函數

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• 相對顏色函數
• 組合函數以建立流式版面
• 實用響應式設計模式

15. CSS 預處理器

• CSS 預處理器概觀
• LESS
• 變數與混合元件（mixins）
• 巢狀樣式
• 函數與運算
• LESS 與現代原生 CSS 的比較
• 何時仍需要預處理器
• 將預處理器功能遷移至原生 CSS

16. 設計與無障礙設計考量

• 現代 CSS 最佳實踐
• 無障礙優先樣式化
• 鍵盤焦點狀態
• :focus-visible
• 減少動態效果
• 對比度與顏色考量
• 響應式文字與內容
• 圖像上的文字
• 無障礙響應式元件
• 漸進增強

17. CSS 效能與可維護性

• 減少 CSS 複雜度
• 避免不必要的特異性
• 使用層疊層提升可維護性
• 可重複使用的工具與元件模式
• CSS 封裝概念
• content-visibility
• 渲染與版面效能
• 減少版面跳動
• 組織大型 CSS 程式碼庫
• 使用現代瀏覽器開發人員工具除錯 CSS

18. 現代 CSS 實作專案

學員將建立一個包含以下內容的響應式現代網頁介面：

• CSS Grid
• Flexbox
• Subgrid
• 容器查詢
• CSS 巢狀
• 自訂屬性
• 層疊層
• 現代選擇器
• 流式字體排版
• 現代視窗單位
• 響應式設計
• 現代顏色與漸層
• 動畫與過渡效果
• 無障礙設計考量
• 效能最佳實踐