iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

防禦性 CSS - 建立「防患未然」的匠人心態 系列

寫出能夠「防患未然」的程式碼,我覺得是剛入行的工程師需要花時間才能夠累積出來的能力。「經驗」之所以寶貴,是因為他不是只是透過看書就能夠學習到的,而是他會需要一些實戰的累積、有踩過什麼令人印象深刻的雷、有痛過一次而痛定思痛,而留在自己身上的痕跡。

學習防患未然的心態,能夠幫助我們減少即將會遇到的問題。本系列文將會逐一討論一些常見的案例,以及這些案例當中可以多考慮哪一些面向來讓我們避開問題。有時候好與壞的區別可能只是一行簡單的 CSS,但有能力可以考慮到這個面向而寫出那一行關鍵的 CSS,就是你比別人更經驗豐富的具體展現。

鐵人鍊成 | 共 30 篇文章 | 51 人訂閱 訂閱系列文 RSS系列文 團隊光明頂
DAY 1

【Day01】參賽前言 & 精神喊話

參賽前言 大家好!我又來啦~~~在心裡默默下定決心,說好今年絕對死不參加,但是好死不死又因為各種難以啟齒的原因、五味雜陳的心情,所以我又來啦 XD 相信每一位參...

2022-09-15 ‧ 由 Taiming 分享
DAY 2

【Day02】什麼是防禦性 CSS?

在海賊王這部漫畫當中,有一個高人氣的反派角色,夏洛特·卡塔庫栗,他是 BIG MOM 海賊團「甜點三將星」之首、四皇「BIG MOM」夏洛特·莉莉的次子。 我...

2022-09-16 ‧ 由 Taiming 分享
DAY 3

【Day03】間距 - 標題與圖示

情境 今天我們來討論一個常見的設計,標題與圖示。下面這是一張很常見的卡片式設計,看起來很正常不是嗎? 我們在生活當中很常遇到類似這樣的設計,就是在一個卡片式的...

2022-09-17 ‧ 由 Taiming 分享
DAY 4

【Day04】間距 - 元件間的間距

間距、間距、間距! 情境 在討論今天的主題之前,我們先來看看下面這張圖: 第一張圖的情境,有可能是在介面上我們試圖要做一些不可逆的操作,例如你要去刪除某篇文章...

2022-09-18 ‧ 由 Taiming 分享
DAY 5

【Day05】內容長度 - 類別標籤

情境 如下圖,網站中有這樣一塊又一塊的圖形設計,稱之為「卡片」。近年來 卡片式設計 在網站上越來越常見。 矩形的卡片設計能夠順利的與不同視窗大小做搭配,因此無論...

2022-09-19 ‧ 由 Taiming 分享
DAY 6

【Day06】內容長度 - 過長的內容

情境 我們用下面這個垂直下拉選單來說明這個情境: 上圖示我們常見的下拉選單形式,這些選單有一些選項,例如我們可以對這個帳號做一些設定、登出、查看自己的個人資料...

2022-09-20 ‧ 由 Taiming 分享
DAY 7

【Day07】內容長度 - 過短的內容

情境 決定畫面的平衡有許多要考慮的因素,除了過長的內容會造成畫面破版之外,反過來,如果過短的內容是不是也會造成視覺上的不協調呢? 你能看見多遠的未來呢? 看看下...

2022-09-21 ‧ 由 Taiming 分享
DAY 8

【Day08】內容長度 - 固定的高度

情境 不知道大家有沒有設計過官網或是活動頁的經驗呢? 主頁橫幅(Hero Section)往往是針對網站訪問者遇到的第一視覺頁面,其目的是要提出一個該網站最重要...

2022-09-22 ‧ 由 Taiming 分享
DAY 9

【Day09】內容長度 - 固定的寬度

情境 在上一篇當中我們討論了固定高度在某些特定情境下有可能產生內溶溢出的問題。我相信我們的讀者一定也很能夠舉一反三,既然固定高度下,內容過長有可能會溢出,那換個...

2022-09-23 ‧ 由 Taiming 分享
DAY 10

【Day10】圖片 - 圖片比例

情境 現今科技越來越進步,手機拿起來,隨時隨地都可以拍照,記錄下生活中美好的瞬間。 並且,我們一天到晚在瀏覽網站,我們將越來越少看間一個網站是完全沒有圖片的。因...

2022-09-24 ‧ 由 Taiming 分享