CSS 和界面
了解 Chrome 提供的工具和技术,以便改进您网站的 CSS 和界面设计。
提升界面开发技能
滚动条样式
使用
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 有何不同。
布局
如何使用 calc()
同时使用各种尺寸单位在 CSS 中指定尺寸。
CSS 位置粘性事件
记录消息并运行 JavaScript。
使收起的内容可供访问
Discover hide=until-found,一个属性值可确保用户可找到并链接到手风琴部分的内容。
Web 上的动画
Web Animations API
Web Animations API 提供了强大的基元,用于描述来自 JavaScript 的命令式动画。
多种动画效果
使用动画组合属性可以控制多个动画同时影响同一属性时应执行的操作。
使用 linear() 进行复杂的动画曲线
linear() 是一个 CSS 加/减速函数,可在其点之间线性插值,允许您重新创建弹跳和弹簧效果。
滚动驱动的动画
使用滚动时间轴和视图时间轴,以声明性的方式创建滚动驱动的动画。
课程
了解自适应设计
阅读自适应设计的历史以及自适应布局的基础知识。您将学习自适应图片、排版和无障碍功能等。
课程
了解 CSS
您将学习 CSS 基础知识,如框模型、级联和特异性、Flexbox、网格和 Z-index。此外,您还将学习函数、逻辑属性等方面的知识,从而更充分地利用您的前端开发者技能。