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

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

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

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

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

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

via 微信公众号 前端侦探

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

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

via Ahmad Alfy

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

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

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

via trevorlasn

#优质博文 #前端 #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

#优质博文 #前端
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

#前端 #新动态 #优质博文 #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

#优质博文 #前端 #新动态
🚀 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）。

#优质博文 #前端 #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

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

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

author Michał Bentkowski

#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 编辑团队

#前端 #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

#HTML #前端 #优质博文
真长知识了～
A Few Things About the Anchor Element’s href You Might Not Have Known

AI 摘要：本文深入探讨了 HTML 锚点 <a> 标签中 href 属性的一些不常见但非常实用的值。文章不仅回顾了 mailto: 、文本片段 (text fragments) 等已知用法，更重点介绍了一些鲜为人知的技巧，例如使用 ""、. 和 ? 对当前页面进行不同方式的重载，以及它们如何处理 URL 的查询参数和哈希。此外，文章还涵盖了 data: URL、媒体片段和 PDF 页面链接等高级应用，为前端开发者提供了更丰富的链接处理知识。

1. 页面导航与重载
• href="#" 或 #top 这两种写法都可以让页面滚动到顶部。特别的是，即使页面中不存在 id="top" 的元素，#top 依然会按规范 (spec) 生效。
• href="": 重新加载当前页面。此操作会保留 URL 中的查询参数，但会移除哈希值（# 及其后的部分）。
• href=".": 重新加载当前页面，同时移除查询参数和哈希值。注意：此行为对 URL 末尾是否有斜杠 / 非常敏感。如果 URL 是 /path，它会导航到父目录 /；如果 URL 是 /path/，它会导航到当前目录 /path/。
• href="?": 重新加载当前页面，移除查询参数和哈希值，但会在 URL 末尾保留一个 ? 字符。与 href="." 不同，此行为不受末尾斜杠的影响。

2. 特殊协议与片段链接
• href="data:": 可以创建指向 data: URL 的链接，将文本、HTML 等小型数据直接编码在链接中，实现不依赖外部资源的导航。
• 媒体片段 (Media Fragments): 允许链接到音视频文件的特定时间段。例如，video.mp4#t=10,20 会从视频的第 10 秒开始播放，到第 20 秒时停止。
• PDF 页面链接: 可以通过 #page=<页码> 的形式，直接链接到 PDF 文件中的某一页，例如 my-file.pdf#page=42。

author Jim Nielsen