iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 2 留言 726 瀏覽

鐵人賽自我挑戰組 DAY 30

掌握 Master CSS 優化開發體驗系列第 30 篇

技術 Day 30 - 是結束也是開始

心得很高興第一次參加 iThome 鐵人賽可以順利完賽，這裡要特別感謝 Master CSS 的作者 Aron，在開賽前期給予我很多建議及方向，讓我對於整個單...

秘密基地 ‧ 2022-10-13

0 Like 1 留言 776 瀏覽

鐵人賽自我挑戰組 DAY 29

掌握 Master CSS 優化開發體驗系列第 29 篇

技術 Day 29 - CSS 屬性順序保持一致

屬性順序在使用 Tailwind CSS 或是 Master CSS 這類工具時，因為其特性是將屬性直接寫在 class 裡面，動輒就是數十個類名組合在一起，...

秘密基地 ‧ 2022-10-12

0 Like 0 留言 389 瀏覽

鐵人賽自我挑戰組 DAY 28

掌握 Master CSS 優化開發體驗系列第 28 篇

技術 Day 28 -【實戰演練】台灣旅遊景點 - 頁尾資訊

實戰演練 - Day 05 設計稿 - 台灣旅遊景點導覽，今天是實戰演練的最後一天，要撰寫的區塊是頁尾資訊。 GitHub 專案檔有興趣的朋友可以下載 Gi...

秘密基地 ‧ 2022-10-11

0 Like 0 留言 617 瀏覽

鐵人賽自我挑戰組 DAY 27

掌握 Master CSS 優化開發體驗系列第 27 篇

技術 Day 27 -【實戰演練】台灣旅遊景點 - 景點列表

實戰演練 - Day 04 設計稿 - 台灣旅遊景點導覽，今天要實作的區塊是景點列表，共分為三個部分。標題區塊卡片區塊分頁區塊 GitHub 專案檔...

秘密基地 ‧ 2022-10-10

0 Like 0 留言 623 瀏覽

鐵人賽自我挑戰組 DAY 26

掌握 Master CSS 優化開發體驗系列第 26 篇

技術 Day 26 -【實戰演練】台灣旅遊景點 - 搜尋功能

實戰演練 - Day 03 設計稿 - 台灣旅遊景點導覽，今天要實作的區塊是搜尋功能。 GitHub 專案檔有興趣的朋友可以下載 GitHub 專案檔一起...

秘密基地 ‧ 2022-10-09

0 Like 0 留言 640 瀏覽

鐵人賽自我挑戰組 DAY 25

掌握 Master CSS 優化開發體驗系列第 25 篇

技術 Day 25 -【實戰演練】台灣旅遊景點 - 分類按鈕

實戰演練 - Day 02 設計稿 - 台灣旅遊景點導覽，今天要實作的區塊是分類按鈕。 GitHub 專案檔有興趣的朋友可以下載 GitHub 專案檔一起...

秘密基地 ‧ 2022-10-08

0 Like 0 留言 731 瀏覽

鐵人賽自我挑戰組 DAY 24

掌握 Master CSS 優化開發體驗系列第 24 篇

技術 Day 24 -【實戰演練】台灣旅遊景點 - 導覽列

實戰演練 - Day 01 前面介紹了許多 Master CSS 的語法以及自定義的方式，從這個單元開始，要開始實際使用 Master CSS 來製作一個網站，...

秘密基地 ‧ 2022-10-07

0 Like 0 留言 723 瀏覽

鐵人賽自我挑戰組 DAY 23

掌握 Master CSS 優化開發體驗系列第 23 篇

技術 Day 23 - 官方 VSCode 套件 - Master CSS Language Service

開發者工具 Master CSS 團隊有開發屬於自己的官方 VSCode 套件 - Master CSS Language Service，不僅能優化開發體驗，...

秘密基地 ‧ 2022-10-06

0 Like 0 留言 602 瀏覽

鐵人賽自我挑戰組 DAY 22

掌握 Master CSS 優化開發體驗系列第 22 篇

技術 Day 22 - 自定義 CSS 語意類名

從「Day 16 - 自定義類名」這個單元開始，說明了一系列自定義屬性的方法，Master CSS 總共可以自定義的屬性總共有七種，而今天要介紹的是最後一種 s...

秘密基地 ‧ 2022-10-05

1 Like 0 留言 742 瀏覽

鐵人賽自我挑戰組 DAY 21

掌握 Master CSS 優化開發體驗系列第 21 篇

技術 Day 21 - 自定義 CSS 屬性值

自定義 CSS 屬性值前幾個單元介紹的 Style.extend 方法，它能夠自定義的有 classes、colors、breakpoints、mediaQu...

秘密基地 ‧ 2022-10-04

0 Like 0 留言 538 瀏覽

鐵人賽自我挑戰組 DAY 20

掌握 Master CSS 優化開發體驗系列第 20 篇

技術 Day 20 - 自定義配色方案

配色方案在「Day 14 - 在元素上應用深色模式」這個單元裡，有介紹到 Master CSS 預設提供兩種配色方案，分別為淺色模式及深色模式，讓我們來複習一...

秘密基地 ‧ 2022-10-03

0 Like 1 留言 647 瀏覽

鐵人賽自我挑戰組 DAY 19

掌握 Master CSS 優化開發體驗系列第 19 篇

技術 Day 19 - 自定義媒體查詢

在「Day 12 - 在元素上應用媒體查詢」這個單元裡，有介紹到 Master CSS 提供了一系列媒體查詢的語法，例如響應式斷點 @斷點、列印模式 @prin...

秘密基地 ‧ 2022-10-02

0 Like 0 留言 597 瀏覽

鐵人賽自我挑戰組 DAY 18

掌握 Master CSS 優化開發體驗系列第 18 篇

技術 Day 18 - 自定義響應式斷點

預設斷點在「Day 11 - 在元素上應用響應式斷點」這個單元裡，有介紹到 Master CSS 響應式斷點的使用方法，並且官方有提供多達十組的預設斷點。...

秘密基地 ‧ 2022-10-01

0 Like 0 留言 675 瀏覽

鐵人賽自我挑戰組 DAY 17

掌握 Master CSS 優化開發體驗系列第 17 篇

技術 Day 17 - 自定義顏色

預設顏色雖然 Master CSS 官方有提供許多預設的顏色，但大部分開發者都需要依照設計而有自定義顏色的需求。自定義顏色在昨天的「Day 16 - 自...

秘密基地 ‧ 2022-09-30

0 Like 0 留言 422 瀏覽

鐵人賽自我挑戰組 DAY 16

掌握 Master CSS 優化開發體驗系列第 16 篇

技術 Day 16 - 自定義類名

避免過早抽象化在「Day 02 - 避免過早抽象化」這個單元裡，有介紹到應該盡量避免過早幫元素抽象化命名，因為會導致我們在 "不確定的狀況下&q...

秘密基地 ‧ 2022-09-29

0 Like 1 留言 663 瀏覽

鐵人賽自我挑戰組 DAY 15

掌握 Master CSS 優化開發體驗系列第 15 篇

技術 Day 15 - 動態賦值

動態賦值有時候我們需要透過程式去動態賦予元素樣式，下方程式碼以 Vue.js 為例，input 使用 v-model 綁定資料 size，當 range 拖動...

秘密基地 ‧ 2022-09-28

0 Like 1 留言 659 瀏覽

鐵人賽自我挑戰組 DAY 14

掌握 Master CSS 優化開發體驗系列第 14 篇

技術 Day 14 - 在元素上應用深色模式

深色模式深色模式在網頁上的應用已經越來越廣泛，使用者能夠依據自身的偏好來切換，它的好處包含以下幾點：對光線敏感的用戶能夠更清楚地閱讀。低光環境下也能舒適...

秘密基地 ‧ 2022-09-27

0 Like 0 留言 459 瀏覽

鐵人賽自我挑戰組 DAY 13

掌握 Master CSS 優化開發體驗系列第 13 篇

技術 Day 13 - 在元素上應用群組功能

群組功能群組功能是 Master CSS 中非常實用的一種語法糖，可以幫助我們將 "具有相同後綴" 的選取器、媒體查詢等樣式進行分組，從而...

秘密基地 ‧ 2022-09-26

0 Like 0 留言 669 瀏覽

鐵人賽自我挑戰組 DAY 12

掌握 Master CSS 優化開發體驗系列第 12 篇

技術 Day 12 - 在元素上應用媒體查詢

CSS 媒體查詢的應用非常地廣泛，昨天的單元「Day11 - 在元素上應用響應式斷點」，就是使用媒體查詢的一種形式，Master CSS 提供了一系列媒體查詢...

秘密基地 ‧ 2022-09-25

0 Like 0 留言 581 瀏覽

鐵人賽自我挑戰組 DAY 11

掌握 Master CSS 優化開發體驗系列第 11 篇

技術 Day 11 - 在元素上應用響應式斷點

響應式網頁設計響應式網頁設計（Responsive Web Design）已經是網頁開發必備的一項技術，其原理是根據使用者的裝置、視窗寬度自適應網頁佈局。它...

秘密基地 ‧ 2022-09-24

0 Like 0 留言 773 瀏覽

鐵人賽自我挑戰組 DAY 10

掌握 Master CSS 優化開發體驗系列第 10 篇

技術 Day 10 - 在元素上應用選取器

通用選取器 _ 符號為選取後代節點，* 符號為所有元素。 _* 組合起來為選取到後代所有元素，常會應用在統一設定盒模型。 <body class=&quo...

秘密基地 ‧ 2022-09-23

0 Like 0 留言 598 瀏覽

鐵人賽自我挑戰組 DAY 9

掌握 Master CSS 優化開發體驗系列第 9 篇

技術 Day 09 - 在元素上應用偽元素

偽元素與上一個單元介紹的偽類不同，偽元素是由兩個冒號 :: 作為前綴詞宣告，緊接著是偽元素的名稱，例如 ::before、::after、::placehol...

秘密基地 ‧ 2022-09-22

0 Like 0 留言 743 瀏覽

鐵人賽自我挑戰組 DAY 8

掌握 Master CSS 優化開發體驗系列第 8 篇

技術 Day 08 - 在元素上應用偽類

偽類偽類是由一個冒號 : 作為前綴詞宣告，緊接著是偽類的名稱，例如 :hover、:focus、:first-child、:disabled 等等。而 Ma...

秘密基地 ‧ 2022-09-21

0 Like 0 留言 620 瀏覽

鐵人賽自我挑戰組 DAY 7

掌握 Master CSS 優化開發體驗系列第 7 篇

技術 Day 07 - 常用單位轉換

像素 / rem 轉換大部分的設計師習慣使用像素（pixel）來做為設計單位，而開發者則是習慣使用 rem 來設置網頁的文字大小、間距等等。因此開發者就需要...

秘密基地 ‧ 2022-09-20

0 Like 0 留言 472 瀏覽

鐵人賽自我挑戰組 DAY 6

掌握 Master CSS 優化開發體驗系列第 6 篇

技術 Day 06 - 語法簡短但五臟俱全

語意我們可以直接在元素上面寫 CSS，但這樣子寫會充斥著單位及各種 CSS 語法標記，因此這並不是 Master CSS 的本意。 <a class=&...

秘密基地 ‧ 2022-09-19

0 Like 0 留言 1031 瀏覽

鐵人賽自我挑戰組 DAY 5

掌握 Master CSS 優化開發體驗系列第 5 篇

技術 Day 05 - 開始使用 Master CSS

透過 CDN 快速啟動不受框架 / 平台所限，引入一行 CDN 即可啟用 Master CSS 的所有功能。<script src="http...

秘密基地 ‧ 2022-09-18

0 Like 0 留言 927 瀏覽

鐵人賽自我挑戰組 DAY 4

掌握 Master CSS 優化開發體驗系列第 4 篇

技術 Day 04 - 與 Tailwind CSS 有何不同？

什麼是 Tailwind CSS？ Tailwind CSS 的官網有介紹到，它是一套以 Utility-First 為基礎的 CSS 框架。與 Mas...

秘密基地 ‧ 2022-09-17

1 Like 0 留言 753 瀏覽

鐵人賽自我挑戰組 DAY 3

掌握 Master CSS 優化開發體驗系列第 3 篇

技術 Day 03 - 為何不寫行內樣式就好了？

為何不寫行內樣式就好了？上個單元我們用一張卡片的案例讓大家了解 Master CSS 是如何應用的，程式碼如下： <div class="ma...

秘密基地 ‧ 2022-09-16

1 Like 0 留言 841 瀏覽

鐵人賽自我挑戰組 DAY 2

掌握 Master CSS 優化開發體驗系列第 2 篇

技術 Day 02 - 避免過早抽象化

過早抽象化在開發網頁的時候，我們習慣為元素命名以設置元素樣式，這是導致過早抽象化的主因。以下方卡片為例：為了設置卡片的樣式，我們需要 "花費時間...

秘密基地 ‧ 2022-09-15

2 Like 1 留言 1903 瀏覽

鐵人賽自我挑戰組 DAY 1

掌握 Master CSS 優化開發體驗系列第 1 篇

技術 Day 01 - 什麼是 Master CSS？

一種具增強語法的虛擬 CSS 語言在官網首頁，作者將 Master CSS 定義為「一種具增強語法的虛擬 CSS 語言」。而不是將其定義為一套 CSS...

秘密基地 ‧ 2022-09-14