寫出能夠「防患未然」的程式碼,我覺得是剛入行的工程師需要花時間才能夠累積出來的能力。「經驗」之所以寶貴,是因為他不是只是透過看書就能夠學習到的,而是他會需要一些實戰的累積、有踩過什麼令人印象深刻的雷、有痛過一次而痛定思痛,而留在自己身上的痕跡。
學習防患未然的心態,能夠幫助我們減少即將會遇到的問題。本系列文將會逐一討論一些常見的案例,以及這些案例當中可以多考慮哪一些面向來讓我們避開問題。有時候好與壞的區別可能只是一行簡單的 CSS,但有能力可以考慮到這個面向而寫出那一行關鍵的 CSS,就是你比別人更經驗豐富的具體展現。
情境 圖片在現代網站上面所扮演的角色越來越重要。我記得有一陣子很常看見大圖片當作網站背景的設計: 或是卡片式的排版也總是會需要搭配圖片: 你能看見多遠的未來...
情境 圖片和文字通常是相輔相成的存在。現代的網頁上面有許多的圖片,一方面是為了讓畫面看起來更多元、豐富,另一方面,圖片也能夠幫助瀏覽者一眼看出作者想要表達的內容...
情境 我們先前也提到一些圖片處理的相關防禦性 CSS,例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候,防止圖片的比例變...
情境 今天我們來討論一個卡片容器的例子: 當內容在一般裝況下,我們不會需要滾動條,但是當內容長度過多時,我們會需要滾動調,讓我們在不改變卡片容器大小的狀況下,...
情境 當我們內容超出頁面的時候,我們會設置滾動條。上個單元中,我們介紹了使用 auto 來設置,避免不需要的時候還出現滾動條: .card { overfl...
情境 有時候我們的畫面會需要用到如下圖的 Modal 彈窗: 這樣的 Modal 彈窗,他的內容有可能是針對某個地方的額外說明,因此這個說明也有可能會需要詳細...
情境 我們在認識 CSS Box Model 的時候,有一個必須要知道的屬性,就是 box-sizing。 我們來看看這個 Box Model: 我們在初學...
情境 CSS Box Model 盒子模型是 CSS 的基礎。我們可以簡單的理解為, html 元素在 CSS 裡面,都可以視為一個一個的盒子(Box)。 如下...
情境 Flexbox 是 CSS3 的盒子模型(box model),顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box),這個模型讓排版變得容...
情境 Flexbox 的排版已經太方便,以至於網頁上到處都可以發現 Flexbox 的蹤跡。今天我們再來舉一個例子,假設我們需要做一個使用者管理頁面,那我們可能...