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的設計權杖
• 建立亮色與暗色主題
• 使用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屬性
• 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
• 視圖時間軸概念
• 動作無障礙
• 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巢狀
• 自訂屬性
• 串聯層
• 現代選擇器
• 流體排版
• 現代視窗單位
• 響應式設計
• 現代色彩與漸層
• 動畫與轉場
• 無障礙考量
• 效能最佳實務