#前端 #优质博文 #新动态 #chrome #css
试了试总结功能,真好用喵!搭配自己的 md2tg bot 可直接 copy 了。
New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!
试了试总结功能,真好用喵!搭配自己的 md2tg bot 可直接 copy 了。
New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!
Moe Copy AI 总结:Chrome 2025 年第一季度更新聚焦于 CSS 布局控制(如 text-box)、开发者工具增强(文件系统 API 扩展、DOM 状态保留)、交互体验优化(对话框轻量关闭),以及 Baseline 标准的推进(新功能标记与跨浏览器兼容性)。Interop 2025 将进一步推动关键 Web 技术的标准化。
1. CSS text-box
• 功能:新增 text-box-trim 和 text-box-edge 属性,允许开发者基于字体度量精确控制文本垂直间距(如裁剪大写字母顶部多余空间)。
• 应用场景:优化标题或文本容器的布局,避免因字体差异导致的间距不一致问题。
2. DOM 元素状态保留移动
• 新方法:Node.prototype.moveBefore 可在不重置元素状态(如 iframe 加载、焦点、动画等)的情况下移动 DOM 元素。
• 优势:相比传统的删除再插入操作,避免了不必要的状态重置。
3. 文件系统访问 API 支持 Android
• 扩展支持:原本仅限桌面端的 File System Access API 现已在 Android 和 WebView 中可用。
• 核心方法:
• showOpenFilePicker():打开文件选择器并返回文件句柄。
• showSaveFilePicker():保存文件到本地。
4. <dialog> 元素支持轻量关闭(Light Dismiss)
• 行为:通过 closedby="any" 属性,允许用户点击对话框外部或按 Esc 键关闭对话框(类似 Popover API 的 auto 行为)。
5. Baseline 更新
• 新功能(Newly Available):
• CSS:scrollbar-gutter(预留滚动条空间)、scrollbar-width(调整滚动条宽度)、ruby-align(注音文本对齐)。
• JavaScript:Promise.try(简化同步请求的错误处理)。
• WebAssembly:垃圾回收和尾调用优化支持。
• 广泛可用(Widely Available):
• Array.findLast() 和 findLastIndex()(从数组末尾查找元素)。
• 独立的 CSS 变换属性(如 translate、rotate)。
6. 2025 年互操作性项目(Interop 2025)
• 重点领域:视图过渡(View Transitions)、CSS 锚点定位(Anchor Positioning)、导航 API(Navigation API)等。