AI 摘要：本文主要聚焦于前端开发领域的最新动态和技术更新，尤其关注 WWDC25 带来的 Safari 26 新特性，如 SVG 图标支持、CSS 锚点定位和滚动驱动动画等。同时，文章涵盖了其他前端技术话题，如 contrast-color() 函数、Temporal JS API、响应式图片优化等，并分享了作者对技术趋势和行业现状的个人见解。整体内容旨在为读者提供前沿技术资讯、实用技巧和有趣的资源推荐。

1. Safari 26 新特性（WWDC25 亮点）
• SVG 图标支持：Safari 终于支持 SVG 作为 favicon，标志着“favicon 乱象”的终结，尽管相比其他浏览器晚了数年。
• CSS 锚点定位：介绍 CSS anchor positioning 功能，适用于工具提示和弹出框，Chromium 和 Webkit 已支持，Oddbird 提供了 polyfill。
• 滚动驱动动画：Safari 跟进 Chromium 支持 scroll-driven animations，Firefox 部分支持，作者推荐 Bramus 的免费课程学习相关技术。
• 其他小更新：包括 JS 小幅改进、text-wrap: pretty、contrast-color()、margin-trim 和 progress() 等 CSS 新特性。
• Safari 现状反思：尽管有进步，Safari 在 Web 平台测试中仍有较多失败案例，作者质疑其是否能摆脱“新 IE”的标签。

2. 技术热点与资源
• State of CSS 调查：鼓励读者参与年度 CSS 调查以了解新趋势。
• Import Maps 更新：Shopify 推动了 import maps 规范变更，解决了模块加载和单一 map 限制问题，已在 Chromium 和 Webkit 实现。
• Contrast-color() 函数：Safari 支持该函数，但仅限于黑白对比，作者讨论其局限性并推荐相关阅读。
• Optional Chaining 争议：作者对过度使用可选链 (?.) 提出质疑，认为频繁检查属性存在性可能是代码异味。

3. 有趣项目与工具
• Internet Roadtrip：一个由 Neal 开发的公路旅行，和互联网陌生人共同决定目的地。到目前为止已行驶 3000 多英里
• Temporal JS API：Firefox 率先支持 Temporal，改善了 JavaScript 日期处理体验。
• TypeScript Prettify：介绍一个提高 TypeScript 类型可读性的技巧。
• 响应式图片优化：为响应式图像编写正确的标记是很困难的，推荐一个响应式图片 linter 工具。
• 框架渲染方式：Ryan Carniato 讲解了 React、Vue 等框架的 DOM 渲染方法。
• Text-box 属性：介绍 MDN 上的 text-box 属性，用于未来文本垂直对齐。

4. 实用技巧与工具推荐
• 预加载响应式图片：通过旧的 link 元素预加载图片的技巧。
• 三个开源项目：包括 gron（命令行工具，转换 JSON 使其易于使用 grep 等工具进行搜索）、tweety（浏览器集成终端）和 parrot.live（终端动画）。
• CSS Shape 工具：介绍一个将 SVG 路径转换为 CSS shape() 的在线工具。

Stefanjudis

Web Weekly #160

Preloading responsive images, CSS `contrast-color()` and the long-awaited `Temporal` JS API.