Master CSS 是由台灣團隊開發的「一種具增強語法的虛擬 CSS 語言」。
僅需透過 HTML 便可高校建構你的用戶介面和設計系統。
與 Tailwind CSS 相比之下,學習 Master CSS 更加容易,因為你只需要熟悉其結構化的語法 ( 它與原生 CSS 語法很像 ) 及不同屬性所預設的單位差異,就能夠快速地上手。
響應式網頁設計 響應式網頁設計(Responsive Web Design)已經是網頁開發必備的一項技術,其原理是根據使用者的裝置、視窗寬度自適應網頁佈局。 它...
CSS 媒體查詢的應用非常地廣泛,昨天的單元 「Day11 - 在元素上應用響應式斷點」,就是使用媒體查詢的一種形式,Master CSS 提供了一系列媒體查詢...
群組功能 群組功能是 Master CSS 中非常實用的一種語法糖,可以幫助我們將 "具有相同後綴" 的選取器、媒體查詢等樣式進行分組,從而...
深色模式 深色模式在網頁上的應用已經越來越廣泛,使用者能夠依據自身的偏好來切換,它的好處包含以下幾點: 對光線敏感的用戶能夠更清楚地閱讀。 低光環境下也能舒適...
動態賦值 有時候我們需要透過程式去動態賦予元素樣式,下方程式碼以 Vue.js 為例,input 使用 v-model 綁定資料 size,當 range 拖動...
避免過早抽象化 在 「Day 02 - 避免過早抽象化」 這個單元裡,有介紹到應該盡量避免過早幫元素抽象化命名,因為會導致我們在 "不確定的狀況下&q...
預設顏色 雖然 Master CSS 官方有提供許多預設的顏色,但大部分開發者都需要依照設計而有自定義顏色的需求。 自定義顏色 在昨天的「Day 16 - 自...
預設斷點 在「Day 11 - 在元素上應用響應式斷點」這個單元裡,有介紹到 Master CSS 響應式斷點的使用方法,並且官方有提供多達十組的預設斷點。...
在「Day 12 - 在元素上應用媒體查詢」這個單元裡,有介紹到 Master CSS 提供了一系列媒體查詢的語法,例如響應式斷點 @斷點、列印模式 @prin...
配色方案 在「Day 14 - 在元素上應用深色模式」這個單元裡,有介紹到 Master CSS 預設提供兩種配色方案,分別為淺色模式及深色模式,讓我們來複習一...