Container Queries:認識自己容器,而非視窗的組件
同一張商品卡片,放在網格裡好端端的,放進狹窄的側邊欄卻整個散開——即使 media query 早已細心調校過。問題不在你的程式碼,而在 media query 問錯了問題:它問的是螢幕有多寬,而不是這個組件實際分配到多少空間。本文探討 container queries 如何把這個問題放回它本該提出的位置,以及當元素變成「查詢容器」時,底層究竟發生了甚麼事。
同一張商品卡片,放在網格裡好端端的,放進狹窄的側邊欄卻整個散開——即使 media query 早已細心調校過。問題不在你的程式碼,而在 media query 問錯了問題:它問的是螢幕有多寬,而不是這個組件實際分配到多少空間。本文探討 container queries 如何把這個問題放回它本該提出的位置,以及當元素變成「查詢容器」時,底層究竟發生了甚麼事。
CSS Houdini 唔係單一技術,而係一堆成熟程度參差不齊嘅規範集合。睇吓邊部分今日真係可以用喺production、@property 同 paint worklet 究竟點運作,以及點解其餘部分至今仍然只係實驗性質。