iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

【Day11】圖片 - 被遺忘的背景重複問題

情境 圖片在現代網站上面所扮演的角色越來越重要。我記得有一陣子很常看見大圖片當作網站背景的設計: 或是卡片式的排版也總是會需要搭配圖片: 你能看見多遠的未來...

2022-09-25 ‧ 由 Taiming 分享
DAY 12

【Day12】圖片 - 圖片上的文字

情境 圖片和文字通常是相輔相成的存在。現代的網頁上面有許多的圖片,一方面是為了讓畫面看起來更多元、豐富,另一方面,圖片也能夠幫助瀏覽者一眼看出作者想要表達的內容...

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

【Day13】圖片 - 圖片的最大寬度

情境 我們先前也提到一些圖片處理的相關防禦性 CSS,例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候,防止圖片的比例變...

2022-09-27 ‧ 由 Taiming 分享
DAY 14

【Day14】滾動條 - 僅在需要時才顯示滾動條

情境 今天我們來討論一個卡片容器的例子: 當內容在一般裝況下,我們不會需要滾動條,但是當內容長度過多時,我們會需要滾動調,讓我們在不改變卡片容器大小的狀況下,...

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

【Day15】滾動條 - 保留滾動條的空間

情境 當我們內容超出頁面的時候,我們會設置滾動條。上個單元中,我們介紹了使用 auto 來設置,避免不需要的時候還出現滾動條: .card { overfl...

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

【Day16】滾動條 - 避免滾動穿透

情境 有時候我們的畫面會需要用到如下圖的 Modal 彈窗: 這樣的 Modal 彈窗,他的內容有可能是針對某個地方的額外說明,因此這個說明也有可能會需要詳細...

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

【Day17】盒子模型 - 內容盒子與邊框盒子

情境 我們在認識 CSS Box Model 的時候,有一個必須要知道的屬性,就是 box-sizing。 我們來看看這個 Box Model: 我們在初學...

2022-10-01 ‧ 由 Taiming 分享
DAY 18

【Day18】盒子模型 - 邊距重疊

情境 CSS Box Model 盒子模型是 CSS 的基礎。我們可以簡單的理解為, html 元素在 CSS 裡面,都可以視為一個一個的盒子(Box)。 如下...

2022-10-02 ‧ 由 Taiming 分享
DAY 19

【Day19】Flexbox - 內元件溢出

情境 Flexbox 是 CSS3 的盒子模型(box model),顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box),這個模型讓排版變得容...

2022-10-03 ‧ 由 Taiming 分享
DAY 20

【Day20】Flexbox - 最小內容大小

情境 Flexbox 的排版已經太方便,以至於網頁上到處都可以發現 Flexbox 的蹤跡。今天我們再來舉一個例子,假設我們需要做一個使用者管理頁面,那我們可能...

2022-10-04 ‧ 由 Taiming 分享