寫出能夠「防患未然」的程式碼,我覺得是剛入行的工程師需要花時間才能夠累積出來的能力。「經驗」之所以寶貴,是因為他不是只是透過看書就能夠學習到的,而是他會需要一些實戰的累積、有踩過什麼令人印象深刻的雷、有痛過一次而痛定思痛,而留在自己身上的痕跡。
學習防患未然的心態,能夠幫助我們減少即將會遇到的問題。本系列文將會逐一討論一些常見的案例,以及這些案例當中可以多考慮哪一些面向來讓我們避開問題。有時候好與壞的區別可能只是一行簡單的 CSS,但有能力可以考慮到這個面向而寫出那一行關鍵的 CSS,就是你比別人更經驗豐富的具體展現。
情境 談到響應式的佈局排版,除了 Flexbox 之外,還有一個不容忽視的重要屬性,就是 Grid。 以下圖為例,我們透過 Grid 也能夠很輕易的將主要內容以...
情境 CSS Grid 是一個格線佈局屬性,跟 Flexbox 的使用非常相似,是由外容器和內元件來組成整個結構。 以下面結構為例: <div class...
情境 在網頁內容很豐富的情境中,頁面上放置導覽列是很重要的功能,如下圖: 假設這是一個新聞或論壇網站,左邊 aside 部分就是我們的導覽列,上面有網站的 B...
情境 Flexbox 是 CSS3 的盒子模型(box model),他是我們現代響應式佈局設計上的一個重要利器。其中一個很重要的部分就是他可以幫助我們快速的做...
情境 步驟對話框/步驟條元件,是透過一系列的編號步驟來顯示當前操作的進度。由於某些操作過於複雜繁瑣,或者有順序性,以至於不太適合一次把全部的資訊展示在一個頁面當...
情境 響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為...
情境 CSS 選擇器的分組,能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。 舉個例子來說,假設我們要讓兩個元素都改變顏色,不用分組選擇器的寫法會是這樣...
情境 有時候我們會需要隱藏網頁上的元件。 舉幾個例子來說,例如我們為了使用者體驗的目的,我們希望在某某情境下,某些按鈕不要被使用者誤觸,或是為了畫面上排版的簡潔...
情境 z-index 可以幫助我們決定當元素重疊的時候,誰在上面,誰在下面。 那我們該如何使用 z-index 呢?首先,因為 z-index 只用於「重疊」的...
就算已經參加過兩屆了,到了這一天還是會有「天啊,沒想到我終於走到終點了啊!」的感覺。 如果有讀過我的 「Day01 參賽前言」的讀者就會知道,我今年絕對擁有 一...