互操作性 2025:网页平台改进的又一年  |  博客  |  web.dev

  • 发布信息:2025 年 2 月 13 日,Interop 2024 取得巨大成功后,2025 年项目回归,有新的重点领域。
  • 2025 年重点领域:包括锚定定位、backdrop-filter、核心网页重要指标、<details>元素、布局、模块、导航 API、指针和鼠标事件、移除突变事件、@scopescrollend事件、存储访问 API、text-decorationURLPattern、视图转换 API、WebAssembly、Web 兼容性、WebRTC、书写模式等。

    • CSS 和 UI 方面

      • 锚定定位:可将定位元素锚定到锚点,方便创建弹出框等界面,相关文档有锚定定位文档和 MDN 的CSS 锚定定位
      • 同文档视图转换:包括视图转换和view-transition-classCSS 属性,更多信息在单页应用的同文档视图转换和 MDN 的视图转换 API 文档
      • backdrop-filter属性:自 2024 年 9 月起已可在基线使用,可创建内容背后的效果,但存在一些实现问题,可查看backdrop-filter的失败测试
      • <details>元素:是一个可展开以显示额外内容的披露小部件,自身已广泛可用,还有一些相关新功能使其更有用,如::marker::details-content伪元素、content-visibility、自动展开和hidden="until-found"属性等。
      • @scopeat-rule:可将选择器作用域限定在 DOM 子树或树中的上下边界,更多示例在使用 CSS @scopeat-rule 限制选择器的范围和 MDN 的@scope文档
      • scrollend事件:可可靠检测滚动结束,无需使用setTimeout(),更多示例在Scrollend,一个新的 JavaScript 事件和 MDN 的scrollend文档
      • text-decoration属性:是一个简写属性,在 Safari 中只有text-decoration-line可正常工作,2025 年将解决此问题。
      • 书写模式:writing-mode属性有多种值,sideways-lrsideways-rl值用于垂直布局文本,逻辑 CSS 属性overflow-inlineoverflow-block可控制内容溢出框时的情况。
    • 核心网页重要指标:包括最大内容绘制(LCP)和交互到下一次绘制(INP)指标,通过实现相关 API 跨浏览器工作,CLS 指标不在范围内。
    • WebAssembly(Wasm):工作重点是 JavaScript 字符串内置函数和可调整大小缓冲区集成,可实现如在浏览器中运行整个博客应用等。
    • 功能移除:移除平台上的突变事件(Mutation events),用更高效的Mutation Observer API替代,Chrome 在 126 版已移除,此重点是从所有浏览器移除。
  • 学习更多:完整功能列表描述可在项目README中找到,也可阅读其他参与 Interop 2025 的公司的相关文章,如AppleBocoupIgaliaMicrosoftMozilla
阅读 7
0 条评论