#前端 #HTML #CSS #新特性 #Accessibility #浏览器 #优质博文
A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks

AI 摘要：Chrome 139 正在实验 Open UI 提出的 Interest Invoker API，该 API 旨在通过声明式 HTML，无需 JavaScript 即可创建鼠标悬停触发的弹出界面，如工具提示和悬浮菜单。它通过 interestfor 属性关联触发器和作为 popover 的目标元素。文章详细探讨了触发器和目标元素的用法、不同 popover 类型的影响、相关的 JavaScript 事件、以及通过 interest-show-delay 和 interest-hide-delay 等 CSS 属性控制的“兴趣延迟”。同时，它也深入讨论了键盘和屏幕阅读器用户的可访问性支持，并指出该 API 虽处于早期实验阶段，但有望极大简化此类 UI 的开发，尽管在某些 popover 行为和触屏交互上仍有待完善。

author Daniel Schwarz

CSS-Tricks

A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks

Chrome 139 is experimenting with Open UI’s proposed Interest Invoker API, which would be used to create tooltips, hover menus, hover cards, quick actions, and other types of UIs for showing more information with hover interactions.

#Newsletter #新动态 #前端 #CSS #HTML #JavaScript #WCAG #性能优化 #tools #AI
🚀 Frontend Focus #702 — July 23, 2025

AI 摘要：本期《Frontend Focus》第702期聚焦前端领域的最新动态、实用工具、深度文章与观点。内容涵盖SVG基础入门、HTML 2025年度调查、AI辅助调试、可访问性标准解读、CSS动画、性能优化、前端框架更新等多个方面，为开发者提供了丰富的学习资源和行业洞察，同时介绍了多款前端实用工具和库，以及一些趣味简讯和广告。

1. 社区动态
• HTML 2025 年度调查启动：第三届年度 HTML 调查，旨在了解开发者如何使用 Web 平台日益增长的能力，其结果将直接影响明年 Interop 项目的优先级。
• WCAG 纯英文版：让无障碍标准易于理解：一个可搜索的资源，为官方 Web 内容无障碍指南（WCAG）提供了一个初学者友好的指南，使其更易于消化。
• Firefox 141 发布：新版本增加了垂直标签页和 AI 标签组织智能功能。
• GitHub 支持欧盟主权技术基金：GitHub 正在倡导设立一项欧盟主权技术基金。
• 为什么不信任 WCAG 2.2 以及对 3.0 的期望：Daniel Schwarz 提出了他对 WCAG 2.2 的担忧，并探讨了 WCAG 3.0 如何改进这些问题。
2. 文章、观点与教程
• 时间不多，范围却很多：滚动驱动动画的 animation-ranges 速查表 —— 一篇关于滚动驱动动画及其可用选项的入门指南。
• 小屏幕，大影响：为功能手机开发 Web 应用的被遗忘艺术：探讨了功能手机在2025年仍有意义的原因，以及如何为这类设备构建和发布Web应用。
• Tailwind 是“最糟糕的综合体”：一篇观点文章，认为 Tailwind 是 “将 CSS 和现代 Web 开发中所有糟糕之处结合在一起的令人遗憾的倒退”。
• 2025 年前端性能检查清单：一份高层次的清单，列出了创建快速、高效 Web 应用时需要牢记的事项。
• 利用 Web Speech API 让你的网站开口说话：一种简单直接的方法，为网站添加语音功能。
• 糟糕导航的隐性成本：信息架构如何直接影响业务指标：探讨了信息架构对业务指标的直接影响。
3. 开发工具与资源
• Glass3D 生成器：一个生成 3D 玻璃效果的 CSS 工具：一个允许编辑背景滤镜设置、颜色和纹理的工具，并实时预览效果。
• Astro 5.12 发布：新版本特性包括升级的 Netlify 开发体验、内容加载器中的 TOML 支持等。
• Tiptap v3：无头富文本编辑器框架：为构建强大的富文本编辑体验提供了基础，v3 版本包含大量开发者体验改进，如动态UI的卸载和重新挂载、创建自定义视图的 “Markviews”、SSR 模式等。
• macOS 光标 PNG 图片集合：一个提供各种 macOS 光标 PNG 图片的网站。

author Frontend Focus 编辑团队

State of HTML 2025

Take the State of HTML survey

#优质博文 #前端 #新动态 #html #安全
HTML spec change: escaping < and > in attributes

AI 摘要：本文详细介绍了 HTML 规范的一项重要更新，即在属性中对 < 和 > 字符进行转义，以防止变异型跨站脚本攻击 (mXSS) 漏洞。此更新已于 2025 年 5 月 20 日纳入 HTML 规范，并在 Chrome 138 版本中实现，预计于 2025 年 6 月 24 日正式发布为稳定版。文章分析了这一变化对 Web 开发者的影响，涵盖了变化的具体内容、不受影响的场景、可能导致问题的场景以及解决方案，旨在帮助开发者适应这一安全增强措施。

author Michał Bentkowski

Chrome for Developers

HTML spec change: escaping < and > in attributes  |  Blog  |  Chrome for Developers

What you need to know about this change to how attributes are escaped.

#优质博文 #前端 #html
HTML5 Elements You Didn't Know You Need

AI 摘要：本文介绍了八个鲜为人知但功能强大的 HTML5 元素，这些元素为常见的 Web 开发问题提供了原生解决方案，减少了对 JavaScript 和第三方库的依赖。作者强调了使用原生 HTML 元素的优势，包括提高可访问性、语义化以及简化代码，同时也指出了这些元素的局限性，鼓励开发者在选择工具前了解这些内置选项。

1. <dialog> 元素：原生模态窗口

介绍 <dialog> 元素用于创建模态窗口，浏览器自带焦点管理、背景渲染和键盘可访问性支持，提供了基本用法和样式化代码示例。提到其浏览器支持情况（2022 年后主流浏览器均支持）和 iOS Safari 的历史兼容性问题，建议复杂模态仍需专用库。
2. <details> 和 <summary> 元素：原生手风琴
介绍用于创建可折叠内容的手风琴效果，浏览器内置切换功能和可访问性支持。提供样式化示例和嵌套导航的应用场景，指出其动画效果的局限性。
3. <datalist> 元素：原生自动补全
介绍用于表单输入自动补全的元素，支持用户自定义输入。提供颜色选择器的创意用法和 JavaScript 增强示例，指出其样式定制的限制。
4. <meter> 元素：语义化度量显示
介绍用于显示范围内值的元素，浏览器根据阈值自动调整颜色，适用于仪表盘等场景。讨论其语义价值和样式限制。
5. <output> 元素：动态计算结果
介绍用于显示计算结果的元素，与输入元素关联提高可访问性。提供抵押贷款计算器的实际案例，强调其语义意义和表单提交的适用性。
6. <mark> 元素：语义化高亮
介绍用于文本高亮的元素，默认黄色背景可自定义样式，适用于搜索结果等场景。强调其对屏幕阅读器的语义支持。
7. <time> 元素：语义化日期和时间
介绍用于表示日期和时间的元素，支持 ISO 8601 格式，方便搜索引擎和浏览器扩展使用。提供多种格式示例和相对时间更新的 JavaScript 代码，适用于博客和新闻网站。
8. <figure> 和 <figcaption> 元素：语义化图片标题
介绍用于图片或其他独立内容单元的元素及其标题，适用于内容管理系统。提供 CSS 样式化示例，强调其对可访问性的提升。

author Max Prilutskiy

DEV Community

HTML5 Elements You Didn't Know You Need

As you know, we love unusual tech at Lingo.dev. So when in my last essay, David commented he was...

#优质博文 #前端 #新动态
🚀 Frontend Focus #688 — April 16, 2025

AI 摘要（注：重复多次的内容会手动删一下）：本期 Frontend Focus 涵盖前端领域多项重要动态，包括浏览器默认样式更新、桌面应用开发框架对比、AI 对开发者角色的影响，以及最新的工具和教程资源。核心内容涉及 H1 元素样式变更、Tauri 与 Electron 的对比、CSS 新特性实践指南，以及 Astro 5.7 等工具更新。

1. 社区动态
• H1 元素默认样式变更：浏览器正在调整嵌套标题的默认样式，开发者需关注兼容性问题（Simon Pieters）。
• Edge 134 性能显著提升，Opera Mini 浏览器集成 AI 助手。
• 🙁 和许多其他人一样，我们很遗憾地听到 Adam Argyle 不再在 Google 工作。 多年来，他一直是 Chrome 的 CSS 开发者代言人，是一股重要的正义力量。
• Astro 5.7 发布: 引入了 SVG 组件、实验性字体 API 支持、错误修复等。

2. 博文与工具
• Item Flow 本文解释了什么是 Item Flow，以及它对 Flexbox 和 Grid 的影响。 #css
• CSS shape() 函数：创建自适应比例的形状（Simon Fraser）。
• 在 2025 中使用 currentColor: 当然，自定义属性也可以做同样的事情，但 Chris 着眼于这个关键字替代方案的效用。
• 无障碍暗色模式设计：优化暗色主题的对比度与可读性，如何制作适合所有人的深色模式的指南（Alex Williams）。 #设计。
• 一个好的副业的幸福禅 —— “享受探索可能性的自由，并愉快地追随任何引人注目的奇思妙想——这就是一个好的副业的幸福禅意。”
• 使用 Chrome 的（预览版）Prompt API 进行数据汇总
• 减小网站上 HTML 文件大小的五种方法 #性能优化 #html
• 设计师 Noah Davis 批评细字体对可用性的负面影响。
• Tailwind CSS 速查表：覆盖 v3/v4 的实用类检索工具（kombai）。

MDN Web Docs

Default styles for h1 elements are changing | MDN Blog

Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages.

#前端 #新动态 #优质博文 #css #html
1. 现在可以使用 CSS 自定义 <select> 元素 —— 多亏了 appearance: base-select，现在有了一种可访问的标准化方法来创建可风格化的 <select> 元素。Adam 分享了这一 “多年酝酿 ”的过程，经过 “数小时的工程设计和协作规范工作”，我们现在拥有了一个不会在旧版浏览器中崩溃的丰富组件。下面我们就来看看 Chrome 浏览器（第一个实现支持的浏览器）是如何运行的，以及如何使用它。 【棒诶，Codepen Example 在这里 】
2. 如何看待 Baseline 和 Polyfill —— 尽管 polyfills 并未作为 Baseline 项目的一部分，但 Baseline 仍能帮助人们在决定是否使用它们时做出一些细微的调整。 #兼容性

在采用网络平台功能时，是否应该使用 Polyfills 的规则并不明确。就像你在网络上做的任何事情一样，在权衡收益和风险的同时，还需要深思熟虑。回顾一下，处理这个问题的一套粗略规则是
• 要明白，虽然 Polyfills 功能在某些方面具有优势，但它们也会带来潜在的性能和可访问性成本，而且可能无法忠实复制未实现的网络功能。
• 如果可能，利用用户数据确定 Baseline 阈值。如果不可能，Baseline 广泛可用功能集是一个很好的起点，可以考虑使用 RUM 洞察数据来做出明智的决定。
• 利用这些数据，评估如果浏览器不支持您希望使用的功能，有多少用户会受到影响，并评估影响的严重程度。
• 与项目利益相关者沟通，确定哪些功能是可以接受的，适合项目目标和业务需求。
• 如果必须使用有限可用性功能，请评估受众和使用风险。除非您的用户只能使用一个浏览器引擎，否则您无法保证兼容性，即使使用多填充功能也是如此。

这些原因就是为什么 Polyfill 不包含在 Baseline 中。Baseline 的作用是告知您所有主流浏览器引擎都支持哪些功能。您仍然需要知道有多少用户可以使用 Baseline 功能，并根据您的用户和项目需求做出决定。Baseline 广泛可用是一个很好的默认设置，并且在许多情况下通常会为用户提供最广泛的 Web 功能支持。

3. 重新审视 CSS border-image —— 深入了解强大的 border-image 属性以及如何以各种创造性的方式使用它：“ 通过切片、重复和设置图像，您可以用最少的代码创建复杂的边框、装饰元素甚至动态覆盖 ”。
4. 网页设计中认知可访问性的最佳实践 —— 这里有很多很好的实用建议，涵盖了改善网站认知可访问性的方法。 #无障碍 #WCAG
5. 25 个令人印象深刻的 HTML5 Canvas 实验 【其中几个我还用过，乐呵】 #webgl #demo
6. 用于 Playwright 和浏览器自动化的 MCP 服务器 —— MCP（模型上下文协议）服务器使某些基于代理（例如 Claude、Claude Code 和 Cursor）能够在其常用沙盒之外的系统上执行操作。微软的这个新项目使这些代理能够以结构化的方式与网页进行交互（就像 Playwright 允许您通过 Python 或 JavaScript 代码进行交互一样）。 #AI #MCP
7. Fancy Components：不断增长的即用型动画 React 组件库 —— 包含大量用于制作各种文本动画的组件，以及用于背景、物理相关动画、SVG 滤镜等的组件。 #组件库 #react #tailwind
via Frontend Focus 685

Chrome for Developers

现在可以使用 CSS 自定义 <select> 元素  |  Blog  |  Chrome for Developers

界面保持不变，焕然一新。

#优质博文 #前端
How to easily convert HTML to image in NodeJS or in the browser

推荐的是 html2canvas 库，但是之前做过类似的需求的时候我记得svg字体踩过坑，后来用过 html-to-image 挺好的，适合那种生成海报的场景。

AI 摘要：介绍在 NodeJS 中使用 Puppeteer 和在浏览器中使用 html2canvas 将 HTML 转换为图像的方法。

本文详细讲解了两种将 HTML 转换为图像的技术方案：
1. 服务器端方案（NodeJS）：通过 Puppeteer 库控制无头 Chrome/Chromium 浏览器，实现 HTML 渲染与截图。作者逐步演示了安装、启动浏览器实例、设置 HTML 内容、生成截图（支持 PNG/JPEG/WebP 格式）和关闭浏览器的完整流程，并列举了 page.screenshot() 方法的参数配置（如区域裁剪、背景透明、图像质量等）。
2. 浏览器端方案：使用 html2canvas 库将指定 HTML 元素异步转换为 Canvas 画布，再通过 toDataURL 生成图像数据并触发下载。文中提供了 CDN 加载方式和核心代码示例。

#node #puppeteer #html

Rafaelcamargo

How to easily convert HTML to image in NodeJS or in the browser

Whether you're exporting a chart or generating images with dynamic text, converting HTML into an image can be super useful in many situations. This post explains how to do it both on the server (NodeJS) and directly in the browser.

#优质博文 #前端 #tools
1. CSS 的 backdrop-filter 属性（英文） 本文介绍 backdrop-filter 属性，可以产生毛玻璃的效果。 #css

backdrop-filter 是一个强大的 CSS 属性，它可以对元素后面的内容应用模糊、亮度调整等滤镜效果，从而创造出玻璃拟态（Glassmorphism）等视觉效果。文章介绍了 backdrop-filter 的基本用法，如 blur() 进行模糊处理，以及 brightness() 进行亮度调整。同时，作者强调了 backdrop-filter 仅影响元素背景，不会影响其自身内容。此外，文章探讨了浏览器兼容性问题，指出 Safari 早期支持较好，而部分浏览器（如 Firefox）需要启用实验性功能才能使用。最后，作者提供了示例代码，并建议开发者结合 background 颜色和 backdrop-filter 以获得最佳视觉效果。

2. 基于 signal 的 Web 组件（英文） #html #WebComponents
作者介绍自己写的一个 Web 组件，可以在不加其他 JS 库的情况下，实现 signal 功能。

本文探讨了在 HTML 中直接定义 信号（Signals） 的可能性，提出 <x-signal> 自定义元素，使其能够管理状态并自动更新 UI，而无需依赖 JavaScript 框架。该方法基于 HTML-based state 概念，直接从 HTML 解析初始值，并支持类型转换、动态渲染、自定义格式化及派生状态计算。最终，作者认为 <x-signal> 代表了一种更细粒度的 **Islets 架构**，在静态 HTML 中提供轻量级的响应式交互能力。

3. 鸿蒙 ArkTS VSCode 插件 #vscode #ArkTS #插件 #鸿蒙
ArkTS 是华为鸿蒙系统的开发语言，属于 TypeScript 的超集，这是它的 VSCode 插件。
4. RAG Web UI #AI #RAG
一个开源的 AI 桌面应用，可以上传文档，生成本地的知识库问答系统，基于 RAG（检索增强生成）技术。
5. TEN Agent #AI #agent #语音
一个 AI 的工具框架，快速打造语音相关的 AI 应用。
6. 富文本编辑器比较2025版（英文） #富文本 #编辑器
这个页面详细比较了 JS 的富文本"所见即所得"编辑器，一共十几个库，详细介绍每个库的特点

本文分析了主流的富文本编辑器框架，帮助开发者在 2025 年做出最佳选择。文章涵盖 Lexical、ProseMirror、Slate、Tiptap、Quill 等编辑器，并从 可扩展性、性能、易用性、社区支持 等方面进行了对比。
• Lexical （Meta 开源）：高性能、模块化、适合复杂应用，但生态仍在发展中。
• ProseMirror ：功能强大、灵活，但 API 复杂，入门门槛较高。
• Slate ：React 友好，完全可定制，但文档有限，维护情况不稳定。
• Tiptap （基于 ProseMirror）：提供更简洁的 API 和更好的 TypeScript 支持，适合现代 Web 应用。
• Quill ：易用，适合基本需求，但扩展性受限。
结论: 如果你需要高扩展性和现代化 API，Lexical 或 Tiptap 是更好的选择；如果追求稳定和成熟方案， ProseMirror 仍然值得考虑。

via #阮一峰的科技周刊 337

#优质博文 #前端 #html
Native Popover Element with HTML

AI 摘要：文章介绍了利用原生HTML和CSS实现弹出框（Popover）的方法，核心是使用<dialog>元素和data-*属性控制弹出框的位置与行为，通过CSS自定义属性优化样式，并用简单的JavaScript处理交互逻辑。方法无需框架，代码简洁高效，兼具可访问性与性能，适合小型项目或纯前端开发场景。

via trevorlasn

software engineering, open source projects, startups, product design, strategy, web performance, security, and more

I'm a seasoned software engineer and product strategist with entrepreneurial drive. Since 2014, I've built successful products from scratch, led engineering teams, and shared my technical insights through writing since 2017.

#工具推荐 #前端 #在线网站 #markdown #html
Html To Markdown 是一个将 HTML 转换为 Markdown 格式的工具，支持高效、精准的内容格式转换。它适合开发者和内容创作者，将复杂的 HTML 代码快速简化为轻量级、可读性强的 Markdown 格式，从而便于在文档、博客和其他 Markdown 支持的平台上使用。

www.htmltomarkdown.io

Html To Markdown - Free HTML to Markdown Online Converter

Convert HTML to Markdown online, Efficiently manage and migrate your web content.

#优质博文 #前端 #html
Smarter than 'Ctrl+F': Linking Directly to Web Page Content

AI 摘要：这篇文章介绍了网页“文本片段（Text fragments）”功能，该功能允许用户直接链接到页面中的特定文本，而不需要使用锚点标签。通过在URL后添加特定的语法，浏览器可以定位、滚动并高亮显示目标文本。文章还讨论了如何通过CSS的 ::target-text 伪元素自定义高亮样式，以及当前的浏览器支持情况。文章最后指出，Chrome等浏览器已经内置了生成文本片段链接的功能，简化了操作。

via Ahmad Alfy

Ahmad Alfy's Blog

Smarter than 'Ctrl+F': Linking Directly to Web Page Content

Discover how text fragments revolutionize web navigation. Learn to link directly to specific text on any web page, surpassing traditional 'Ctrl+F' searches. Explore this powerful, user-friendly feature for precise content sharing and improved web experiences.

#优质博文 #前端 #新标准 #html
原生 details 支持手风琴模式了！

AI摘要：HTML的 details 元素最近新增了一个 name 属性，这一更新带来了手风琴模式的支持。details 元素通常与 summary 元素配合使用，提供了原生的展开和收起效果。通过CSS自定义，可以去除 summary 前的黑色三角形，并支持嵌套以实现树形结构目录。新增的 name 属性允许将多个 details 元素关联起来，实现手风琴效果，即打开一个元素时关闭其他元素。由于兼容性问题，可能需要通过 JavaScript 进行兼容性处理。目前，可以通过检测 'name' in document.createElement('details') 来确认浏览器是否支持此新特性。尽管这一特性可以通过 JavaScript 实现，但其提供了一种无需额外脚本即可实现的原生方法。

via 微信公众号 前端侦探

Weixin Official Accounts Platform

原生details支持手风琴模式了！

最近details元素新增了一个name属性，如下别看这只是一个普普通通的属性，这可是带来了一个全新的模式，

#前端 #阮一峰的科技周刊 #优质博文 #资源推荐 #typescript #css #html

科技爱好者周刊（第 266 期）：自己做双语 EPUB 电子书

（咕咕咕的有点久，问就是周末玩博德之门3玩的）

1、如何使用 Favicon（2023版）：本文介绍网页的 Favicon 现在应该怎么写。
2、PostgreSQL 如何制作全文搜索引擎：一篇初学者教程，讲解怎么使用 PostgreSQL 全文搜索功能。
3、TypeCell：一个 TypeScript 互动式网页环境，可以在网页文档上直接查看代码运行结果，类似于 Jupyter 笔记本，适合内嵌 TypeScript 代码的文档。
4、小抽屉：安卓 App，可以实现屏幕翻译，方便使用外国 App。
5、麦默笔记：基于 Web 的个人笔记软件，需要自己搭建服务，可以实现与其他站点的聚合。

evilmartians.com

How to Favicon in 2025: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog

Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.