了解 Chrome 提供的工具和技术,以便改进您网站的 CSS 和界面设计。

提升界面开发技能

使用 scrollbar-widthscrollbar-color 属性设置滚动条的样式。
一种经典的排版技术,就是手动为平衡的文本块编写换行符。
CSS Color 4 为 Web 提供了广色域颜色工具和功能:更多颜色、操作函数和更出色的渐变效果。
CSS 类型化对象模型 (Typed OM) 为处理 CSS 值提供了类型、方法和灵活的对象模型。
使用 @container 规则查询父元素的样式值。
我们最喜欢的 CSS 预处理器功能之一现在内置于语言中,即嵌套样式规则。
了解如何创建限定了作用域的样式,以便仅选择 DOM 子树内的元素。
直接在 CSS 中混合颜色(在任何受支持的颜色空间中)。
先过滤一组子元素,然后再对其应用 An+B 逻辑。
创建一个独占手风琴,其中包含具有相同 name 的多个 <details> 元素。
inert 属性是一个全局 HTML 属性,可简化如何移除和恢复元素的用户输入事件,包括焦点事件和来自辅助技术的事件。
选择启用优化的文本换行功能,快速实现美妆效果。
我们如何在开发者工具中设计和实现 CSS 网格工具支持。
我们如何在开发者工具中支持 CSS-in-JS,以及它与常规 CSS 有何不同。

阴影 DOM

一种直接在 HTML 中实现和使用 Shadow DOM 的新方法。
作者定义的名称和 shadow DOM 的当前互操作状态。

布局

同时使用各种尺寸单位在 CSS 中指定尺寸。
记录消息并运行 JavaScript。
Discover hide=until-found,一个属性值可确保用户可找到并链接到手风琴部分的内容。

CSS 和界面案例研究

网页界面功能究竟是什么?它们如何增强您的转化漏斗?采用这些功能有哪些好处。
了解使用 Policybazaar、redBus 和 Tokopedia 等工具的滚动条驱动动画的优势。
redBus、Policybazaar 和 Tokopedia 都使用 View Transitions API,并受益于更出色的性能和流畅的界面。
Tokopedia 使用 Popover API 减少其应用中的代码量。

Web 上的动画

Web Animations API 提供了强大的基元,用于描述来自 JavaScript 的命令式动画。
使用动画组合属性可以控制多个动画同时影响同一属性时应执行的操作。
linear() 是一个 CSS 加/减速函数,可在其点之间线性插值,允许您重新创建弹跳和弹簧效果。
使用滚动时间轴和视图时间轴,以声明性的方式创建滚动驱动的动画。
课程
阅读自适应设计的历史以及自适应布局的基础知识。您将学习自适应图片、排版和无障碍功能等。
课程
您将学习 CSS 基础知识,如框模型、级联和特异性、Flexbox、网格和 Z-index。此外,您还将学习函数、逻辑属性等方面的知识,从而更充分地利用您的前端开发者技能。