探索 Chrome
Android 版 Chrome 边到边迁移指南
打造无边框 Web 体验
为 Android 版 Chrome 采用无边框设计做好准备
从 Chrome 135 开始,Android 版 Chrome 将采用无边框设计。
- Chrome
CSS attr() 已升级
现在,您可以将 attr() 与任何 CSS 属性(包括自定义属性)搭配使用,并且它可以将值解析为字符串以外的数据类型。
- Chrome
CSS Wrapped 2024
加入 Chrome DevRel 团队和滑板 Chrome Dino,一起探索 2024 年为 Chrome 和 Web 平台推出的最新 CSS。
Chrome 131 中的新变化
Chrome 131 现已发布!为详情元素添加更多 CSS 样式,使用页边距框更轻松地设置打印布局,以及更多功能。
- Chrome
更多样式选项 <details>
现在,您可以使用新的 ::details-content 伪元素设置显示类型,还可以为可展开和收起的部分设置容器样式。
Chrome 130 中的新变化
Chrome 130 现已发布!文档画中画可让您更好地控制画中画窗口,CSS 嵌套声明可修复一些棘手的边缘情况,您还可以指定分布在多行中的元素上的装饰的行为方式。Pete LePage 详细介绍了 Chrome 130 中面向开发者的新功能。
- Chrome
适用于单页应用的同文档视图转换
开始同文档视图转换,以便在单页应用中使用。
为高度添加动画效果:auto;(以及其他固有尺寸关键字)
使用“interpolate-size”和“calc-size()”在固有大小调整关键字之间添加动画效果
滚动贴靠事件
引入了两个新的 JavaScript 事件:scrollSnapChange 和 scrollSnapChanged。
- Chrome
关于视图转换的误解
随着越来越多的人开始使用 View Transition API,您需要破除一些误解。
- Chrome
CSS 和网页界面最新动态:2024 年 I/O 大会回顾
阅读 2024 年 Google I/O 大会上发布的所有 CSS 和 Web 界面公告。
- Chrome
视图转换有哪些新变化?(2024 年 Google I/O 大会更新)
宣布推出适用于 MPA 的跨文档视图转换、使用活动类型的选择性视图转换,以及使用 view-transition-class 共享动画样式。
- Chrome
滚动条驱动动画案例研究
通过 Policybazaar、redBus 和 Tokopedia 探索滚动条驱动的动画的优势。
- Chrome
为什么 CSS 和界面功能对您的电子商务网站很重要?
了解电子商务网站如何从实现最新的 CSS 和界面功能(视图转换、滚动驱动的动画、Popover API 等)中受益。
- Chrome
全新推出“释放滚动动画的强大能力”
这个视频课程包含 10 个部分,全面介绍了滚动式动画
- Chrome
CSS 砌体的替代建议
定义不同规范的砌体和网格的方案。
- Chrome
使用 View Transition API 实现平滑过渡
利用 View Transition API,您可以在网站视图之间添加过渡效果。
适用于多页面应用的跨文档视图过渡
开始在您的多页应用 (MPA) 中使用跨文档视图过渡。
对 CSS ::backdrop 继承的更改
从 Chrome 122 开始,`::backdrop` 元素会继承其源元素的属性。
- Chrome
滚动条样式
使用 `scrollbar-width` 和 `scrollbar-color` 属性来设置滚动条的样式。
独家手风琴
创建一个包含多个具有相同 `name` 的 `` 元素的排他性手风琴。
CSS 封装:2023 年!
2023 年对 CSS 来说是重要的一年!了解今年哪些登陆 Chrome 和整个网络平台。
- Chrome
使用 CSS @scope at-rule 限制选择器的覆盖面
了解如何使用 @scope 仅在 DOM 的有限子树中选择元素。
使用 linear() 加/减速函数在 CSS 中制作复杂的动画曲线
引入了 linear(),这是 CSS 中的加/减速函数,可在各点之间线性插值,让您可以重现弹跳和弹簧效果。
CSS 和界面的新变化:2023 年 I/O 大会
2023 年 Google I/O 大会上重点介绍的 20 大 CSS 和界面功能,不容错过。
- Chrome
使用滚动驱动的动画,在滚动时为元素添加动画效果
了解如何使用滚动时间轴和视图时间轴,以声明方式创建滚动驱动的动画。
CSS 嵌套
我们最喜欢的 CSS 预处理器功能之一现在内置于语言中,即嵌套样式规则。
帮助选择 CSS 嵌套的语法
CSS 工作组仍在就 CSS 中定义嵌套的最佳方式展开讨论。如果您是 CSS 编写者,我们非常希望能够为您提供帮助。
- Chrome
为 Android 版 Chrome 即将发生的视口大小调整行为变更做好准备
Chrome 108 中的视口大小调整行为即将发生哪些变化、Chrome 为何做出此项更改,以及您可以采取哪些准备工作。
- Chrome
Chrome 106 的新变化
Chrome 106 现已推出。有一些新的国际 API,让您在设置数字格式时拥有更大的控制权。我们已针对新的 Pop Up API 开展了源试用,以便您轻松向用户展示关键内容。我们对 CSS 进行了一些改进。还有许多其他功能。
- Chrome
案例研究:使用开发者工具更好地进行 Angular 调试
通过使用 Angular 作为测试试点,Chrome 开发者工具和 Angular 团队通力协作,为您提供更好的调试体验。其他框架也可以进行类似的更改。
- Chrome
Chrome 开发者工具中的现代网络调试功能
了解 Chrome 开发者工具近期的一些变化,这些变化改善了您在使用捆绑器、框架和第三方代码时的调试和分析体验。
- Chrome
您的浏览器即将推出级联层
级联层是一种新的 CSS API,可帮助您管理代码的级联优先级,它很快就可以登陆所有现代浏览器。
- Chrome
Chrome 89 的新功能
Chrome 89 现已推出!WebHID、WebNFC 和 Web Serial 已结束源试用,现在提供稳定版。我们正在填补一些开发者用来绕过 PWA 可安装性检查的漏洞。在桌面设备上,“网络共享”和“网络共享目标”推出。还有许多其他功能!
- Chrome
How NRK uses scroll-driven animations to bring stories to life
Learn how scroll-driven and scroll-triggered animations enhance storytelling articles
- Chrome
Specify how multiple animation effects should composite with animation-composition
When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?
- Workbox
More control over :nth-child() selections with the of S syntax
Pre-filter a set of child elements before applying An+B logic on it.
- Workbox