web新技术周报

139 阅读3分钟

web新技术双周报(5.28-6.11)

1. 今年秋季 Safari 将推出 88 项新功能,包括对popover属性的支持、Mac 上的 Web 应用程序、重新设计的开发人员工具等

News from WWDC23: WebKit Features in Safari 17 beta | WebKit

2. 16 分钟的演示,介绍 Safari 如何在 Vision Pro 上工作、导航如何工作、涉及 3D 网络体验,以及如何针对这个即将推出的平台优化您的网站

Meet Safari for spatial computing - WWDC23 - Videos - Apple Developer

3. Chrome 团队宣布INP 不再是实验性的,并将在 2024 年取代 First Input Delay (FID) 作为 Core Web Vital

Advancing Interaction to Next Paint

4. popover API

弹窗在网络上无处不在。您可以在菜单、切换提示和对话框中看到它们,它们可以表现为帐户设置、披露小部件和产品卡片预览。尽管这些组件非常普遍,但在浏览器中构建它们仍然非常麻烦。您需要添加脚本来管理焦点、打开和关闭状态、组件的可访问挂钩、进入和退出体验的键盘绑定。popover为了解决这个问题,从 Chromium 114 中的 API开始,一组用于构建弹出窗口的新 HTML API 将出现在浏览器中

developer.chrome.com/blog/introd…

5. Safari 16.5 中的 WebKit 特性

在Safari 16.4大规模发布后,该版本主要侧重于完善现有功能和修复错误。Safari 16.5 确实包含一些新功能,包括 CSS 嵌套,:user-valid支持:user-invalid使用 Apple Pay 进行预订和延期付款,以及对锁定模式的更新。

WebKit Features in Safari 16.5 | WebKit

6. Compute Pressure API 提供表示系统压力的状态。这些状态确保用户隐私和开发人员可以轻松推理的信息之间的良好平衡。此外,它允许实施使用正确的底层硬件指标,以确保用户可以利用他们可用的所有处理能力

developer.chrome.com/en/blog/com…

7. 使用 linear函数以获得更好的CSS动画效果

Using linear() for better animation

8. 在 CSS 中注册自定义属性,使用 JavaScript 获取和更新它们

Register custom properties in CSS, get and update them with JavaScript

9. 在选项卡和窗口之间共享 WebSocket 连接——如果您的用户在多个选项卡或窗口中打开您的应用程序,那么能够在客户端和服务器端共享 WebSocket 连接会更加高效

Sharing WebSocket Connections between Browser Tabs and Windows | Bright Inventions

10. Perspective--由 WASM 驱动的高性能数据可视化组件

Perspective | Perspective

11. 使用ImageDecoder API让GIF图片暂停播放

使用ImageDecoder API让GIF图片暂停播放 « 张鑫旭-鑫空间-鑫生活

12. CSS margin-trim属性设置在容器元素上,可以让子元素(需边缘接触)的margin设置计算值变成0

CSS margin-trim属性是做什么用的? « 张鑫旭-鑫空间-鑫生活

13. 一种基于 Svelte 的解决方案,使您能够使用 Svelte 编写和设计电子邮件模板并将它们呈现为 HTML 或纯文本

GitHub - carstenlebek/svelte-email: Write and send emails with Svelte ✉️🚀