Firefox DevTools 讓你輕鬆駕馭 CSS Grid

Mozilla Taiwan
Aug 24, 2017 · 3 min read

雖然 Bootstrap 等框架帶來了響應式(responsive)Web 設計的革命,但我們還是更喜歡原生的工具。如今,CSS Grid 終於幫我們達成了願望,Firefox 也有非常方便的學習工具。

CSS Grid 讓你以標準的 CSS 打造響應式網站。它非常簡單,不需要JavaScript(雖然我們很愛 JavaScript),也不需要額外的框架。儘管現代人喜好誇大,動不動把網頁設計的新技術形容成足以「改變全局」,但 CSS Grid 真的是革命性的發明,值得深入了解。幸運的是,Mozilla 的設計天后 Jen Simmons 幫大家列出了 CSS Grid 的好用學習資源,讓你可以自學 CSS Grid。

Firefox Nightly 提供極為方便的 CSS Grid DevTools。下載 Firefox Nightly 瀏覽器後,在鍵盤上按 hit ⌘-option-i(Mac)或 control-shift-i(PC)快速鍵,便可啟動 DevTools。Inspector-Layout 面板會列出網頁上所有的網格容器(grid containers),也有簡單的網格疊圖、以視覺化的方式呈現你的網頁佈局。你還能設定客製化的疊層屬性,包括格線(grid line)數目和大小(dimension)等等。

如果你剛開始學 CSS Grid,想要進一步了解怎麼使用,這面板非常好用。

側邊欄也有互動式的網格輪廓(grid outline)。把滑鼠移到 outline上,便可特別突顯頁面中網格的某些部分,並且顯示其大小、區域及定位(position)。

新的「顯示網格區域」(Display grid areas)設定則會呈現出邊界區域(bounding area)與每個相對應單元格(cell)的區域名稱。

最後,Grid Inspector 會呈現出你對 grid container 所做的改變。這讓開發人員可以看到經轉換(translate)、傾斜(skew)、旋轉(rotate)和縮放(scale)處理後的網格格線會出現在頁面上哪個位置。

歡迎造訪 Mozilla Developer Network,取得有關使用 CSS Grid 網頁設計指南。CSS Tricks 網站也提供能幫新手快速入門的絕佳 CSS Grid 資料

原文連結

)

    Mozilla Taiwan
    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade