探索 Chrome 提供的工具和技巧,改善網站的 CSS 和使用者介面設計。

提升 UI 開發技能

使用 scrollbar-widthscrollbar-color 屬性設定捲軸的樣式。
常見的字體排版技術是運用 CSS 手動撰寫換行符號,讓文字區塊均衡拼湊而成。
CSS Color 4 為網頁提供廣泛的色域色彩工具和功能,包括更多顏色、操作功能和更優異的漸層。
CSS 型別物件模型 (型別 OM) 可提供類型、方法和彈性的物件模型,以便處理 CSS 值。
使用 @container 規則查詢父項元素的樣式值。
我們現在推出了一項喜愛的 CSS 預先處理工具功能,也就是巢狀樣式規則。
瞭解如何建立範圍樣式,只在 DOM 的子樹狀結構內選取元素。
直接在 CSS 中在任何支援的色彩空間中混用各種顏色。
預先篩選一組子項元素,然後再對其套用 A+B 邏輯。
使用多個具有相同 name<details> 元素建立專屬摺疊元素。
認證屬性是一種全域 HTML 屬性,可簡化移除及還原元素使用者輸入事件的方式,包括輔助技術中的焦點事件和事件。
選擇啟用最佳化文字換行功能,享受飛快的美感。
我們如何在開發人員工具中設計及實作 CSS 格線工具支援。
我們如何在開發人員工具中支援 CSS-in-JS,以及與一般 CSS 的不同之處。

陰影 DOM

直接在 HTML 中實作及使用 Shadow DOM 的新方式。
作者定義名稱和 shadow DOM 的目前互通狀態。

版面配置

在 CSS 中混合使用尺寸單位來指定大小。
記錄訊息並執行 JavaScript。
探索 hide=until-found 屬性值,可確保使用者能找到控點部分的內容並建立連結。

CSS 和 UI 個案研究

究竟有哪些網頁 UI 功能?如何強化轉換漏斗?採用這些功能有什麼好處。
探索使用 Policybazaar、redBus 和 Tokopedia 如何運用捲動導向動畫的優點。
redBus、Policybazaar 和 Tokopedia 全都使用 View Transitions API,並享有更優異的效能及流暢的 UI。
Tokopedia 使用 Popover API 來減少應用程式中的程式碼數量。

網路上的動畫

Web Animations API 提供強大的基本功能,可描述 JavaScript 中的命令式動畫。
當多個動畫同時影響同一個屬性時,Animation-composition 屬性可讓您控管應發生什麼情況。
Linear() 是 CSS 加/減速函式,可在其點之間進行線性內插,讓您重新建立彈跳和彈簧效果。
使用捲動時間軸和檢視畫面時間軸,以宣告方式建立捲動式動畫。
課程
閱讀回應式設計史,瞭解回應式版面配置的基本概念。你將學習回應式圖片、字體排版和無障礙工具等主題。
課程
您將會瞭解 CSS 基礎知識,包括盒裝模型、層疊式與明確性、Flexbox、格線和 Z-index。您將學習函式、邏輯屬性等等,進而發揮前端開發人員技能。