#优质博文 #新动态 #前端 #css
🚀 Frontend Focus #690 — April 30, 2025

AI 摘要：本期 Frontend Focus 涵盖前端领域多个热点话题，包括 Google Chrome 可能被拆分的影响争议、新型开发工具 Tonkotsu IDE 的发布、CSS 排版单位优化、3D 特效实现，以及 Firefox 新功能等。同时提供了丰富的教程、工具资源和行业动态，涉及 HTML 局限性、错误信息设计、Canvas 元素优化等实用内容。

1. 社区动态
• Google Chrome 拆分争议：DHH（Rails 创始人）反对强制拆分 Chrome，认为虽然 Google 需为广告市场垄断负责，但拆分 Chrome 可能损害生态
• Firefox 更新：新增标签分组功能，并在 Firefox 139 夜间版支持 View Transition API。
• Brave 浏览器：社区推动拦截 Cookie 横幅功能

2. 技术文章与教程
• 📑 万维网背后的软件在 1993 年的这一天  被放到公共领域，尽管 Web 的概念是在 1989 年发明的
• 3D 翻牌效果：Jhey Tompkins 详解如何用代码模拟机场时刻表的机械翻牌动画（3D split flap），附演示链接。
• 使用 CSS 行高单位完善排版：Jen Simmons 介绍 lh 和 rlh 单位，实现布局尺寸与文本行高的直接关联。
• HTML 局限性：Chris Coyier 探讨为何原生 HTML 不支持模块化引入（includes）
• 如何编写真正帮助用户而不是让他们感到沮丧的错误消息：Amy Hupe 提出关于创建错误消息的实用建议，帮助用户快速恢复并继续浏览您的产品/服务。
• The canvas Element：Heydon Pickering 分析其可访问性与性能取舍。
• CSS 锚点定位：Geoff Graham 解释如何简化元素重叠布局。
• AI 编码的隐性成本: 无论您是全神贯注于 vibe coding，还是觉得 AI 开发有些可疑，本文都会思考这门手艺的乐趣，值得深思。 #AI

3. 工具与资源
• 响应式字体生成器：支持 CSS/Sass 输出，使用 clamp() 函数适配不同屏幕 #响应式 #移动端适配
• Storybook 9 Beta：新增可视化测试、无障碍测试等组件开发功能
• track-list：Miriam Suzanne 推出封装播放列表控制的 Web Component
• 设计令牌名称生成器：当您需要快速入门时，此工具将为您的设计系统创建现成的命名约定

The Mozilla Blog

Related Articles

What happens when 4,500 people ask for the same feature? At Firefox, we build it. Tab groups have long been the most requested idea on Mozilla Connect –

#优质博文 #响应式 #前端 #移动端适配 #css
Control the Viewport Resize Behavior on mobile with interactive-widget

AI 摘要：文章介绍了通过 interactive-widget 关键字在 <meta> 标签中控制移动设备上虚拟键盘弹出时的视口调整行为。默认情况下，虚拟键盘会调整视觉视口（Visual Viewport），但不会影响布局视口（Layout Viewport）。通过设置 interactive-widget=resizes-content ，可以让布局视口也随之调整，从而使视口单位动态变化。该功能已在 Chrome 108+ 和 Firefox 132+ 支持，但 Safari 尚未实现。

via HTMHell

Control the Viewport Resize Behavior on mobile with `interactive-widget` - HTMHell

A collection of bad practices in HTML, copied from real websites.

#碎碎念 #坑 #前端 #移动端适配 #响应式
又是因为没有 iphone 踩坑的每一天，安卓移动端 chrome，我的设备上滚动的时候没意识到 ios 的 safari 滚动的时候可视区域是会变化的（讲真这个逻辑我看着挺别扭的，在一些滚动驱动的网站里），用 ipad 侧拉出来模拟了一下然后发现 md，心情美丽///
之前就因为类似的问题把 vh 换成 dvh，又因为 dvh 出了问题换成了lvh 🤔
有什么更好更优雅的办法吗（对于 gsap 滚动驱动的网站）

ps: 好像也不能说是因为 ios 踩坑，有这种行为的浏览器还挺有挺多的，下拉变化可视区域隐藏工具栏，比如小米的系统自带浏览器、firefox，我常用的 chrome 和 kiwi 没有
pps: 找了安卓和 ios 好几个浏览器对比，感觉还是 safari 的影响范围最大。

https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar

掉落邀请码：H8mjgx1Rkw
之后我要减少发邀请码的频率去 follow 打赏一些创造者了喵~要是实在想要的在频道评论区问我吧~

#优质博文 #前端 #WebComponent #组件 #响应式 #javascript #css
Hyper-responsive web components

AI 摘要：这篇文章介绍了如何构建“超响应”的Web组件，旨在适应不同网站和视口。作者首先探索了三种方法，最后选择了基于Web组件和Shadow DOM的方式，以实现样式的完全封装。通过使用CSS自定义属性和`clamp()`函数，组件可以在不同屏幕尺寸下自适应文本和间距。此外，使用CSS容器查询解决了流体排版在小容器中失控的问题。最终，文章展示了如何通过灵活的布局和渐进增强技术，实现高效、便携的Web组件设计。

容器查询带来了一个新的长度单位：CQI 。这个单位是以最近的命名容器（container-type：inline-size）的比例来计算的， 1vi === 视口的 1%， 1cqi === 容器的 1%。

via Trys Mudford

Trysmudford

Hyper-responsive web components | Trys Mudford

Intrinsic design, container queries and cqi typography

#资源推荐 #css #响应式
CSS 响应式根字号生成工具
可以根据字号最小/大值，视窗最小/大宽度，生成一个自适应的根字号，可以根据屏幕大小自动改变。

via 公众号 前端侦探

Chris Burnell

clamp() Calculator

Handy little tool for calculating viewport/container-based clamped values for use in CSS