iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

【Day21】Grid - 最小內容大小

情境 談到響應式的佈局排版,除了 Flexbox 之外,還有一個不容忽視的重要屬性,就是 Grid。 以下圖為例,我們透過 Grid 也能夠很輕易的將主要內容以...

2022-10-05 ‧ 由 Taiming 分享
DAY 22

【Day22】Grid - 自動填滿效果

情境 CSS Grid 是一個格線佈局屬性,跟 Flexbox 的使用非常相似,是由外容器和內元件來組成整個結構。 以下面結構為例: <div class...

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

【Day23】Grid - 使用 Sticky

情境 在網頁內容很豐富的情境中,頁面上放置導覽列是很重要的功能,如下圖: 假設這是一個新聞或論壇網站,左邊 aside 部分就是我們的導覽列,上面有網站的 B...

2022-10-07 ‧ 由 Taiming 分享
DAY 24

【Day24】Flexbox - 使用 justify-content: space-between 佈局

情境 Flexbox 是 CSS3 的盒子模型(box model),他是我們現代響應式佈局設計上的一個重要利器。其中一個很重要的部分就是他可以幫助我們快速的做...

2022-10-08 ‧ 由 Taiming 分享
DAY 25

【Day25】元件高度 - 步驟對話框的高度

情境 步驟對話框/步驟條元件,是透過一系列的編號步驟來顯示當前操作的進度。由於某些操作過於複雜繁瑣,或者有順序性,以至於不太適合一次把全部的資訊展示在一個頁面當...

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

【Day26】元件高度 - 響應式高度設計

情境 響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為...

2022-10-10 ‧ 由 Taiming 分享
DAY 27

【Day27】CSS 語法 - 分組選擇器

情境 CSS 選擇器的分組,能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。 舉個例子來說,假設我們要讓兩個元素都改變顏色,不用分組選擇器的寫法會是這樣...

2022-10-11 ‧ 由 Taiming 分享
DAY 28

【Day28】CSS 語法 - 隱藏網頁上的元件

情境 有時候我們會需要隱藏網頁上的元件。 舉幾個例子來說,例如我們為了使用者體驗的目的,我們希望在某某情境下,某些按鈕不要被使用者誤觸,或是為了畫面上排版的簡潔...

2022-10-12 ‧ 由 Taiming 分享
DAY 29

【Day29】CSS 語法 - 失效的 z-index

情境 z-index 可以幫助我們決定當元素重疊的時候,誰在上面,誰在下面。 那我們該如何使用 z-index 呢?首先,因為 z-index 只用於「重疊」的...

2022-10-13 ‧ 由 Taiming 分享
DAY 30

【Day30】完賽心得

就算已經參加過兩屆了,到了這一天還是會有「天啊,沒想到我終於走到終點了啊!」的感覺。 如果有讀過我的 「Day01 參賽前言」的讀者就會知道,我今年絕對擁有 一...

2022-10-14 ‧ 由 Taiming 分享