Introduction
隨著 Chrome VER.105 以及 Safari VER.16 的推出，CSS Layout 又邁向一個新的里程碑，一波設計革命即將展開，media queries 已經讓 web developers 可以快速勾勒出 responsive design 的神奇變化，加上 container queries 渲染後，兩者交乘，將讓 web page 呈現出更多元、非凡的樣貌～
透過 container queries，web developer 可以單獨定義特定 module 依照自身 size、style、state 進行變態。 宛如 CSS 針對 element 進行類監聽的動作，一但滿足 developers 所設定的條件，便可以針對 child element 樣式進行調整，網路上最知名的範例莫過於 Card 原本是橫向排列，一但滿足 element inline-size 的條件後，便會轉換成直式排列。
是不是令人感到興奮非常？有了這樣的神兵，便可以讓 module 依照不同條件呈現千貌～
How to Apply
設定方法其實非常的簡單，只要設定好 container-name 以及 container-type 即可，便可以清楚定義這個 element 將依照什麼為變異基準以及要以哪一個 @container 樣式作為定義。範例中，筆者以 shorthand 的寫法來將 container-name 以及 container-type 透過 / 隔開寫在一塊兒。目前 Chrome 以及 Safari 均支援 container-name / container-type 這樣的寫法。筆者建議就直接拆開兩個屬性來，就不用擔心後續瀏覽器 shorthand 寫法的支援與變更。
Something you must know before using it
雖然在使用上非常的簡易，不過這玩意兒時在太新穎了，筆者 spike 的時候遇到幾個蠻有趣的現象，所以特別整理出來，大家在開發的時候或許可以參考一下，避免產生困惑、不知所措～
※ container shorthand
MDN > CSS Container Queries 詳細的介紹了這個神兵，其中有說到可以透過 container 來將 container-name 以及 contain-type 結合在一起，不過很遺憾的是它並沒說闡述可怎麼撰寫。經 W3C 網頁查詢後發現，container-name 以及 container-type 透過 / 隔開寫在一塊兒。
※ container-type 目前不支援 block-size
雖然說 MDN 文件中有描述到 container-type 有支援 block-size 的設定，不過基於某些原因，Chrome VER.105 以及 Safari VER.16 均不支援 block-size 的設定，如果需要需要監聽 block-size 的變化，則可以透過 container-type: size 來進行設置，亦可針對 block-size 變化來下條件。
※ container-type value as inline-size or size needs to set absolute / relative unit. Value can not be 「fit-content」
一旦將 container-type 設置為 inline-size 或者 size 的話，則表示一定要對 container element 設置對應的數值，該數值可以是相對或者是絕對單位。（如果沒有設置相關 dimension value，則該 container element 將不佔用任何空間，等同無法正常顯示）
筆者嘗試使用 fit-content 來監聽 child 佔用面積的變化，不過很可惜的目前均不支援 fit-content 的設置。
※ Container Queries condition 可以使用新穎的寫法
隨著瀏覽器的更新，media / container queries 的 condition 可以使用較新穎的寫法，傳統 min-width / max-width 的寫法總是沒有判斷式來的容易理解，筆者建議既然都支援判斷式寫法了，為了日後好閱讀以及維護，不妨就放寬心來使用吧！
※ Container Query Units
是的！又多了一系列的相對單位了，其命名規則和 viewport units 雷同，只是前者相對於 viewport，後者相對於 container element。cqw / cqi 均相對於 container element 的寬度，cqh / cqb 則相對於 container element 的高度，另外還有 cqmin / cqmax 可以拿取最小或最大邊。
※ Chrome VER.105 DevTools & Container Queries
Chrome VER.105 > DevTools 針對 Container Queries 有了若干支援了，Developer 可以透過 Elements panel 來看到哪些 elements 目前設定了 container queries（container badge），點擊其 child elements 亦可以在 Styles pane 中看到它符合了什麼樣的 condition 去套用什麼樣式，讓開發體驗更加優雅非凡。（Chrome DevTools 應該會在後幾版支援 cq units）
Summary
新穎的玩具固然強大但仍有脾氣，雖然瀏覽器已經正式支援，但不代表規格都不會變化，所以開心之餘還是得順著他的毛摸，避免反噬～希望今天的分享能讓大家對於 CSS Container Queries 有更深刻的了解，也可以開始想像與實作該如何讓這神兵加速開發與維護囉～歡迎對這些主題興趣的朋友可以一同討論、互惠互利，共同成長～ #CSS #ContainerQueries