CSS 和界面
了解 Chrome 提供的工具和技术，以便改进您网站的 CSS 和界面设计。
提升界面开发技能
锚点定位
使用锚点定位 API 相对于其他元素定位元素。
为 height: auto;（以及其他固有尺寸调整关键字）添加动画效果
使用
interpolate-size 和 calc-size() 在固有尺寸调整关键字前后添加动画效果
滚动条样式
使用
scrollbar-width 和 scrollbar-color 属性设置滚动条的样式。
CSS 文本换行平衡
一种经典的排版技术，就是手动为平衡的文本块编写换行符。
高清 CSS 颜色指南
CSS Color 4 为 Web 提供了广色域颜色工具和功能：更多颜色、操作函数和更出色的渐变效果。
CSS 类型化对象模型
CSS 类型化对象模型 (Typed OM) 为处理 CSS 值提供了类型、方法和灵活的对象模型。
样式查询使用入门
使用 @container 规则查询父元素的样式值。
CSS 嵌套
我们最喜欢的 CSS 预处理器功能之一现在内置于语言中，即嵌套样式规则。
CSS @scope
了解如何创建限定了作用域的样式，以便仅选择 DOM 子树内的元素。
CSS color-mix()
直接在 CSS 中混合颜色（在任何受支持的颜色空间中）。
更好地控制第 n-child() 项选择
先过滤一组子元素，然后再对其应用 An+B 逻辑。
独占式手风琴
创建一个独占手风琴，其中包含具有相同
name 的多个 <details> 元素。
inert 简介
inert 属性是一个全局 HTML 属性，可简化如何移除和恢复元素的用户输入事件，包括焦点事件和来自辅助技术的事件。
CSS 自动换行
选择启用优化的文本换行功能，快速实现美妆效果。
开发者工具中的 CSS 网格
我们如何在开发者工具中设计和实现 CSS 网格工具支持。
开发者工具中的 CSS-in-JS 支持
我们如何在开发者工具中支持 CSS-in-JS，以及它与常规 CSS 有何不同。
阴影 DOM
声明式 Shadow DOM
一种直接在 HTML 中实现和使用 Shadow DOM 的新方法。
作者定义的 CSS 名称和 shadow DOM
作者定义的名称和 shadow DOM 的当前互操作状态。
布局
如何使用 calc()
同时使用各种尺寸单位在 CSS 中指定尺寸。
CSS 位置粘性事件
记录消息并运行 JavaScript。
使收起的内容可供访问
Discover hide=until-found，一个属性值可确保用户可找到并链接到手风琴部分的内容。
CSS 和界面案例研究
为什么网页界面功能对您的网站很重要？
网页界面功能究竟是什么？它们如何增强您的转化漏斗？采用这些功能有哪些好处。
滚动条驱动动画案例研究
了解使用 Policybazaar、redBus 和 Tokopedia 等工具的滚动条驱动动画的优势。
查看 Transitions 案例研究
redBus、Policybazaar 和 Tokopedia 都使用 View Transitions API，并受益于更出色的性能和流畅的界面。
Popover API 案例研究
Tokopedia 使用 Popover API 减少其应用中的代码量。
Web 上的动画
Web Animations API
Web Animations API 提供了强大的基元，用于描述来自 JavaScript 的命令式动画。
多种动画效果
使用动画组合属性可以控制多个动画同时影响同一属性时应执行的操作。
使用 linear() 进行复杂的动画曲线
linear() 是一个 CSS 加/减速函数，可在其点之间线性插值，允许您重新创建弹跳和弹簧效果。
滚动驱动的动画
使用滚动时间轴和视图时间轴，以声明性的方式创建滚动驱动的动画。
课程
了解自适应设计
阅读自适应设计的历史以及自适应布局的基础知识。您将学习自适应图片、排版和无障碍功能等。
课程
了解 CSS
您将学习 CSS 基础知识，如框模型、级联和特异性、Flexbox、网格和 Z-index。此外，您还将学习函数、逻辑属性等方面的知识，从而更充分地利用您的前端开发者技能。