CSS Container Query 搭配Grid打造原始碼好維護的靈活排版

以往我們要依據寬度為容器做改變時,我們通常只能用css media query。但media query中帶入的min-width或max-width寬度條件只限用於整個視窗,因此media query常常不能直覺地在Layout需求上實作。

比如說,有一個component,會被應用在主要內容區以及比較窄的sidebar時,我們通常也只能給他一個modifier class name來讓他在sidebar中不會破版。

閱讀全文 CSS Container Query 搭配Grid打造原始碼好維護的靈活排版

Chrome載入CSS問題

印象中看過「css的link標籤不論放在哪(head or body)都會先載入」的這個說法,不過今天卻發現當Chrome在某些情況時,結果似乎會有點非預期。

首先我在head與body最後都各放一個link標籤,並且在onload時跳出alert

在這個case,第一次alert時瀏覽器還是空白畫面,而第二次alert時,畫面上的row, col已被正確render了。看起來link不論放在哪都會先載的這個說法是成立的。

但奇怪的事情來了。當我把head裡的link拿掉時,chrome會呈現一個不穩定的結果。

閱讀全文 Chrome載入CSS問題

自訂checkbox, radio button的css

以前需透過label標籤配合css “+” selector來自訂checkbox與radio button的樣式,但現在已可透過將input設定 appearance: none 來將input視為一個普通的容器,更直覺地自訂radio button與checbox的外觀。以下是我們要完成的樣子:

看看實際的結果
閱讀全文 自訂checkbox, radio button的css

在CSS GRID Layout實現colspan, rowspan

善用 display: grid 來處理排版真的非常方便,不但可以簡化html巢狀結構,在處理RWD的時候,也增加了更多排版的彈性跟可能性。例如可以用 grid-template-areas 來隨意調整排版的位置順序等等。

說到 colspan 的話,上述提到的 grid-template-areas 也可以輕鬆達到這個需求,例如以下範例:

閱讀全文 在CSS GRID Layout實現colspan, rowspan