CSS3 進階應用培訓

1. 現代 CSS 及其演進

• 從 CSS3 到現代 CSS
• 目前的 CSS 標準與瀏覽器實現
• 理解 CSS 規範與瀏覽器支援度
• 漸進增強（Progressive Enhancement）
• 功能偵測與優雅降級（Graceful Degradation）
• 理解現代 CSS 生態系統

2. 進階選擇器

• 進階屬性選擇器
• 結構偽類（Structural pseudo-classes）
• :is()
• :where()
• :not()
• :has() 與關係選擇器
• 選擇器權重（Specificity）
• 在大型專案中管理權重
• 現代選擇器的最佳實務

3. 現代色彩與視覺效果

• RGB、HSL 及現代色彩函數
• color()、lab()、lch()、oklab() 及 oklch()
• 相對色彩（Relative colors）
• 透明度與 Alpha 通道
• 進階漸層
• 線性、徑向及圓錐漸層
• color-mix()
• 色彩插值
• CSS 濾鏡與視覺效果
• 現代主題設計與色彩系統

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

• CSS 變數 / 自訂屬性
• 變數與預設回退值
• 動態主題切換
• 元件層級的自訂
• 使用 CSS 的設計 Tokens
• 建立淺色與深色主題
• 使用 var()、@property 及具型別自訂屬性
• 建立可維護的 CSS 設計系統

5. CSS 巢狀結構與層級管理

• 原生 CSS 巢狀結構
• 巢狀語法與最佳實務
• CSS 巢狀結構與預處理器的比較
• 層級（Cascade）與繼承（Inheritance）
• 使用 @layer 的層級分層
• 管理第三方 CSS
• @scope 與範圍化樣式概念
• 建立可預測的 CSS 架構

6. 使用 Flexbox 的進階佈局

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

7. 進階 CSS Grid

• Grid 基礎回顧
• 顯式網格與隱式網格
• 進階軌道大小設定
• minmax()
• auto-fit 與 auto-fill
• min()、max() 及 clamp()
• 網格區域（Grid areas）
• 響應式 Grid 佈局
• 複雜頁面佈局
• CSS Subgrid
• 使用 Subgrid 對齊元件佈局

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

• 為何僅依賴視口媒體查詢往往不夠
• 容器查詢概念
• container-type
• @container
• 容器查詢長度單位
• 元件驅動的響應式設計
• 容器查詢樣式查詢
• 設計可重複使用的響應式組件
• 容器查詢與媒體查詢的比較

9. 現代響應式設計

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

10. 邏輯屬性與國際化

• 邏輯屬性 vs. 物理屬性
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• 邏輯尺寸
• 書寫模式（Writing modes）
• 從右到左（RTL）佈局
• 建立具有國際適應性的介面

11. 現代排版

• 響應式排版
• 可變字體（Variable fonts）
• 字體加載考量
• font-size-adjust
• 流式字級規模
• 文字換行與溢出處理
• text-wrap: balance
• text-wrap: pretty
• hyphens
• 現代排版最佳實務

12. 變形、過渡與動畫

• 2D 與 3D 變形
• 過渡（Transitions）
• 關鍵影格動畫（Keyframe animations）
• 時間函數（Timing functions）
• 動畫合成
• 變形效能
• 捲動驅動的動畫
• animation-timeline
• 視口時間軸概念
• 動態可及性
• prefers-reduced-motion
• 效能考量

13. 現代 CSS UI 功能

• 原生 CSS 對話框與彈出層（popovers）
• 樣式化互動式 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 封閉（Containment）概念
• content-visibility
• 渲染與佈局效能
• 減少佈局震動（Layout shifts）
• 組織大型 CSS 程式碼庫
• 使用現代瀏覽器開發人員工具除錯 CSS

18. 現代 CSS 實務專案

學員將建構一個整合以下功能的響應式現代網頁介面：

• CSS Grid
• Flexbox
• Subgrid
• 容器查詢
• CSS 巢狀結構
• 自訂屬性
• 層級分層
• 現代選擇器
• 流式字體
• 現代視口單位
• 響應式設計
• 現代色彩與漸層
• 動畫與過渡
• 可及性考量
• 效能最佳實務