CSS 的 @container 容器查詢和 @media 媒體查詢類似，都可以在判斷出指定條件時，針對特定的元素套用特定的樣式，但有別於 @media 是根據頁面判斷，CSS 的 @container 是根據「容器」進行判斷，這個單元會介紹 CSS @container 容器查詢 ( Media Queries ) 的相關用法。

影片重點：

• 00:01:17 認識與使用 @container
• 00:04:41 容器類型 container-type
• 00:07:27 容器名稱 container-name
• 00:10:06 容器縮寫格式 container
• 00:11:38 容器查詢語法 ( 媒體 media query )
• 00:14:51 容器查詢語法 ( 樣式 style query )
• 00:18:42 容器查詢的特殊單位

相關參考：

• 教學文：CSS @container 容器查詢 ( Container Queries )
• 影片連結：https://www.youtube.com/watch?v=09An1O-v29k

後記

最近發現使用 OpenAI Whisper 將聲音轉換成字幕時，偶爾會出現轉換錯誤的狀況，而且並不是全部錯，而是裡面某一兩段語音會重複出現，導致還得手動調整字幕順序，原本以為是時間太長導致，但最近一支才 13 分鐘的語音檔案也發生同樣的問題，真是滿詭異的...

不過後來發現檢查字幕的方式，就是直接在影片剪輯裡面匯入字幕，就比較容易知道狀況，而且調整完之後還可以再將字幕匯出，是滿不錯的檢查方式～

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html