呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #Chrome #DevTools #AI #MCP #前端 #CSS #浏览器
最近比较忙，这个发的有点晚了～不过大家应该都看到了～
Chrome DevTools (MCP) for your AI agent
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
author Mathias Bynens, Michael Hablich
最近比较忙，这个发的有点晚了～不过大家应该都看到了～
Chrome DevTools (MCP) for your AI agent
AI 摘要：本文介绍了 Chrome 新发布的 DevTools MCP 服务，它通过 Model Context Protocol (MCP) 将大型语言模型 (LLM) 与 Chrome DevTools 连接，使 AI 编程助手能够实时调试网页、诊断错误、模拟用户操作、分析性能问题等，从而提升生成代码的可用性和准确性。文章同时提供了使用场景示例、配置方法以及社区参与途径。
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 背景与意义
• AI 编程助手生成代码时往往无法看到运行效果，相当于“蒙着眼睛编程”。
• Chrome DevTools MCP 服务解决了这一问题，直接让 AI 编程助手接入浏览器调试环境。
2. Model Context Protocol (MCP) 概述
• MCP 是一个开源标准，用于连接大型语言模型 (LLM) 与外部工具和数据源。
• Chrome DevTools MCP server 将调试与性能分析能力引入 AI agent。
• 示例工具：performance_start_trace，可自动启动 Chrome 并记录性能数据以供分析。
3. 应用场景与示例
• 实时验证代码修改：AI agent 可直接在浏览器中确认修改是否生效。
• 诊断网络与控制台错误：AI 可检查网络请求和日志，排查如 CORS 问题。
• 模拟用户行为：自动执行表单填写、点击测试，复现功能性 bug。
• 调试样式与布局问题：实时检查 DOM 和 CSS，解决复杂样式错误。
• 自动化性能审计：运行性能追踪，分析如 LCP (Largest Contentful Paint) 等指标。
4. 使用与配置方法
• 配置方式：在 MCP client 中添加 chrome-devtools 服务。
• 测试示例：运行 prompt "Please check the LCP of web.dev."。
• 更多工具参考：见 tool reference documentation。
5. 社区参与与后续发展
• 当前为公测版本，功能会逐步增加。
• 欢迎开发者与厂商反馈需求与问题。
• 参与方式：通过 GitHub issue 提交建议或 bug。
author Mathias Bynens, Michael Hablich
Chrome for Developers
Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers
Public preview for the new Chrome DevTools MCP server, bringing the power of Chrome DevTools to AI coding assistants.
#优质博文 #AI #前端 #Chrome
Designing the Built-in AI Web APIs
author Domenic Denicola (Chrome AI Web APIs 团队)
Designing the Built-in AI Web APIs
AI 摘要： 本文由 Chrome 团队成员撰写，详细阐述了新一代内置 AI Web APIs（如 Prompt API、Summarizer、Translator 等）的设计思路与挑战。文章探讨了如何在快速演进的 AI 技术环境中，平衡 API 一致性（interoperability） 与 未来兼容性（futureproofing） 的需求，并分析了客户端优先的设计与传统 HTTP API 的差异，最终提出了一种具备状态管理、可扩展性和跨浏览器统一性的架构思路。
1. API 设计背景与挑战
• Chrome 推出一系列内置 AI APIs，目标是成为 Web 平台的标准库，被各大浏览器采纳。
• 与传统 Web API（如 USB、Payment、Codecs）不同，AI APIs 缺乏长期先例，且领域演进极快。
• 特别关注 Prompt API 的复杂性与标准化问题。
2. Prompt API 的设计核心
• 借鉴已有生态，采用对话消息数组模型（user、assistant、system 三种角色）。
• 主要挑战包括：
• 多模态输入输出（text、image、audio 等）。
• 约束条件（是否允许多条 system 消息、重复 assistant 消息等）。
• 语义一致性（拼接消息 vs 多条分离消息）。
• 简写形式（role 省略、直接输入字符串等）。
• Chrome 方案：统一为 {role, content: Array<{type, value}>, prefix?} 的标准格式，并增加约束规范。
3. 客户端优先 vs 服务端 API
• 传统 HTTP API 往往 stateless，依赖 JSON 与 HTTP 调用；而 Web API 则以 JavaScript 调用、支持 on-device 模型为核心。
• 优势：
• 使用原生对象类型（如 ImageBitmap、AudioBuffer），规避 base64 冗余。
• 工具调用通过 async Promise 方式隐藏复杂度。
• 设计为 有状态 API：
• LanguageModelSession 管理会话，支持 append()、clone()、destroy() 和 AbortSignal。
• 改善资源管理与性能，但需处理 context window 溢出机制。
4. 互操作性 (Interoperability) 与未来兼容性 (Futureproofing)
• 挑战：不同浏览器可能使用不同模型，API 需保证代码不因模型差异而崩溃。
• 解决策略：
• 引导开发者使用 结构化输出（JSON Schema、RegExp 约束）。
• 每个任务型 API 设计独立入口，允许底层模型自由组合（如 LoRA 扩展、语言包下载）。
• API availability() 与 create() 方法帮助开发者预判功能是否可用，降低模型差异带来的不确定性。
• Translator API 示例：对开发者暴露 {sourceLanguage, targetLanguage}，内部可实现 pivot language 策略（实际通过英文中转），保证未来兼容。
5. 仍在探索的前沿问题
• Sampling 参数扩展：Top-K、temperature、Top-P、repetition penalty 的标准化。
• 设备约束：隐私/性能可能要求 on-device 模型或 GPU 模型，如何给予开发者适度控制。
• Prompt injection 安全性：如避免任务 API 被恶意文本指令干扰。
6. 总结与展望
• 内置 AI APIs 是 Web 平台延续生态开放战略的一环，类似暴露硬件/系统能力。
• AI 发展过快，Web 可能被迫扮演“慢速跟随者”，标准化存在滞后。
• 核心疑问：Web 能否跟上前沿 AI 的实时交互与推理进展，还是只能在多年后提供简化、抽象的最低共同标准？
author Domenic Denicola (Chrome AI Web APIs 团队)
#优质博文 #Chrome #前端 #CSS #新动态
Chrome 140 Beta 版
author Rachel Andrew
Chrome 140 Beta 版
AI 摘要：Chrome 140 Beta 版为 Web 开发者带来了一系列重要更新。在 CSS 与界面方面，新增了类型化算术 (Typed Arithmetic) 以增强 calc() 的能力，引入了 scroll-target-group 属性改进滚动导航，并对视图过渡 (View Transition) 进行了多项功能增强。Web API 方面，提供了 Uint8Array 与 Base64/十六进制的内建转换方法，并通过权限提示限制本地网络访问以提升安全性。此外，还为独立式 Web 应用 (IWA) 引入了 Controlled Frame API，并开启了 clipboardchange 事件、来电通知等新的源试验 (Origin Trial)。此版本也为提升无障碍性而弃用了一些历史性的 <h1> 字号规则。
1. CSS 类型化算术 (Typed Arithmetic)：允许在 calc() 函数中进行带单位的数学运算，如 calc(10em / 1px)，方便排版和单位转换。
2. 滚动与视图增强：scroll-target-group 属性：用于定义滚动标记组容器，配合 :target-current 伪类可高亮当前视图内的目标锚点。
3. ScrollIntoView 容器选项：新增 container: 'nearest' 选项，可仅滚动最近的祖先滚动容器。
4. 视图过渡 (View Transition) 增强：伪类可继承更多动画属性，并支持嵌套视图过渡，以实现更复杂的过渡效果。
5. overscroll-behavior 传播修复：该属性现在从根元素 (<html>) 而非 <body> 传播，与其他浏览器行为保持一致。
6. 排版与无障碍性：在 content 属性的替代文本中支持 counter() 和 counters() ；支持在 @font-face 规则中使用 font-variation-settings 描述符。弃用 <h1> 元素在特定容器内的特殊字号规则
7. API 与交互改进：caret-animation 属性允许开发者手动控制光标动画，避免与默认闪烁行为冲突；highlightsFromPoint API 允许通过坐标点检测自定义高亮区域；ToggleEvent 新增 source 属性，可获取触发该事件的源元素；修复 SVG foreignObject 污染画布 (Canvas) 的问题，使其在使用 blob 网址时行为与其他浏览器一致。
author Rachel Andrew
Chrome for Developers
Chrome 140 Beta 版 | Blog | Chrome for Developers
了解最新 Beta 版中即将推出的 Chrome 功能。
#优质博文 #CSS #chrome #新特性
New in Chrome 139
author Rachel Andrew
New in Chrome 139
AI 摘要：Chrome 139 带来了多项面向开发者的重要新功能，包括本地 Web Speech API（语音识别）、CSS corner shaping（角样式）、CSS custom functions（自定义函数）等，进一步提升了 Web 应用的性能、安全性和界面设计能力。本文亮点简要梳理了此次版本中的主要更新和对开发者生态的影响。
1. 本地 Web 语音识别（Web Speech API）
• Web Speech API 现支持在本地进行语音识别，无需将音频数据上传至第三方服务，提升了隐私和安全性。
• 开发者可以检测本地语音识别能力、提示用户安装相关资源，并按需选择本地或云端识别方案。
• 有助于为多语言和对隐私敏感的场景提供更优支持。
2. CSS 角样式（CSS corner shaping）
• 新增 CSS 属性允许开发者自定义角的形状与曲度，超越传统的 border-radius。
• 支持创建如 squircles（圆角矩形）、notches（凹口）、scoops（挖口）等更为丰富的视觉样式，并可实现动画切换。
• 拓宽了 Web 设计在 UI 形状表现上的空间。
3. CSS 自定义函数（CSS custom functions）
• 引入 @function 规则，使开发者可像自定义属性一样定义函数，实现基于参数、条件的动态样式生成。
• 支持函数内调用变量，显著增强了 CSS 的可复用性与逻辑性，推动 CSS 向编程化发展。
• 这一特性属于 CSS Custom Functions and Mixins（函数与混入）规范的一部分。
4. 其他新特性与改进
• web app manifest 新增 scope_extensions 字段，方便多子域、多顶级域的站点整合作为单一应用呈现。
• Chrome 现在识别 WHATWG mimesniff 规范中定义的所有有效 JSON MIME 类型，提升兼容性。
• request-close 调用已集成至声明式 invoker commands API，优化 JavaScript 的事件处理模型。
author Rachel Andrew
Chrome for Developers
New in Chrome 139 | Blog | Chrome for Developers
Squircles and custom functions come to CSS, and on-device speech recognition to the Web Speech API.
#优质博文 #chrome #webgl #性能优化 #浏览器 #新动态
Introducing Skia Graphite: Chrome's Rasterization Backend for the Future
author Claire Charron
Introducing Skia Graphite: Chrome's Rasterization Backend for the Future
AI 摘要：本文详细介绍了 Chrome 在 Apple Silicon Macs 上推出的 Skia 新光栅化后端 Graphite。Graphite 是一个面向未来的图形渲染技术，显著提升了 Chrome 在 Motionmark 1.3 测试中的表现，同时为未来的图形改进奠定了基础。通过支持现代图形 API（如 Metal、Vulkan 和 D3D12）、多线程设计以及深度测试等创新技术，Graphite 不仅提高了渲染性能，还优化了用户体验，减少了滚动卡顿和页面加载等待时间。
1. Skia 在 Chrome 中的历史：
• 介绍了 Skia 作为 Chrome 图形渲染核心的历史，从最初的性能问题到引入 GPU 加速后端 Ganesh。
• Ganesh 虽性能优异，但因其以 OpenGL 为中心的设计，难以充分利用现代图形 API 的优势，因此团队开发了 Graphite。
2. Graphite 的成果：
• 在 Macbook Pro M3 上，Motionmark 1.3 得分提升近 15%。
• 优化了真实世界指标，如交互到下一帧时间（INP）、最大内容绘制时间（LCP）、图形流畅度（掉帧百分比）以及 GPU 内存使用等。
3. Graphite 与 Ganesh 的区别：
• 现代图形 API：Graphite 利用 Chrome 的 WebGPU 实现 Dawn，支持 Metal、Vulkan 等现代 API，减少维护负担并提升多线程和 GPU 计算能力。
• 2D 深度测试：通过深度测试减少过度绘制（overdraw），优化不透明和半透明对象的渲染顺序，提升性能并降低移动设备功耗。
• 多线程设计：Graphite 的 API 支持多线程，利用独立记录器（Recorders）在多线程上生成记录（Recordings），减轻主线程负担，减少卡顿和延迟。
• 性能悬崖与管线编译：Graphite 减少渲染管线数量，避免因管线编译导致的卡顿，确保复杂内容与简单内容渲染效率一致。
4. 未来计划：
• 多线程光栅化：计划将光栅化任务分配到多线程，进一步提升性能。
• 减少简单内容的 GPU 内存：通过重新发布记录（Recordings）优化滚动，减少不必要的 GPU 内存分配。
• GPU 计算路径光栅化：探索 GPU 计算路径光栅化技术，提升视觉质量和性能，替代传统的 MSAA 和 CPU 光栅化。
author Claire Charron
#优质博文 #前端 #新特性 #javascript #css #chrome
Support foldable devices with the Viewport Segments API
author Alexis Menard
Support foldable devices with the Viewport Segments API
AI 摘要：本文介绍了 Viewport Segments API 的功能与应用，该 API 从 Chrome 138 版本开始可用，支持开发者为可折叠设备优化界面。通过 JavaScript 或 CSS 访问视口逻辑分区的尺寸和位置，开发者可以为可折叠设备创建双窗格体验或避免内容跨折叠区域布局。文章还提及 API 的更新细节及演示案例，展示了如何利用该 API 提升用户体验。
1. API 简介与背景
• 介绍了 Viewport Segments API 的基本概念，解释了视口分区如何由硬件特性（如折叠或铰链）划分而成。
• 强调 API 的目标：帮助开发者将视口的不同区域视为逻辑上独立的区域，从而优化可折叠设备的用户界面。
2. 功能与应用场景
• 详细说明 API 的功能，支持通过 JavaScript 和 CSS 获取视口分区的尺寸和位置。
• 应用场景包括创建双窗格用户体验，以及避免内容布局跨折叠区域，提升用户体验。
3. API 更新与改进
• 提到自去年 Origin Trial 以来的两项主要变更：
a. JavaScript 属性 segments 现位于 window.viewport 对象中，而非之前的 window.visualViewport。
b. 当设备未折叠或不可折叠时，segments 属性行为与 CSS 行为对齐，返回包含单个分区（代表整个视口）的数组。
4. 演示与实践
• 提供了可折叠设备上 API 的演示案例，展示网页如何沿铰链分割成两个逻辑分区。
• 鼓励开发者通过演示了解 API 的实际效果。
5. 发布时间与版本支持
• API 从 Chrome 138 版本开始正式可用，发布时间为 2025 年 6 月 9 日。
author Alexis Menard
Chrome for Developers
Support foldable devices with the Viewport Segments API | Blog | Chrome for Developers
The Viewport Segments API has shipped with minor changes to the origin trial covered in this blog post.
#前端 #优质博文 #新动态 #chrome #css
试了试总结功能，真好用喵！搭配自己的 md2tg bot 可直接 copy 了。
New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!
试了试总结功能，真好用喵！搭配自己的 md2tg bot 可直接 copy 了。
New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!
Moe Copy AI 总结：Chrome 2025 年第一季度更新聚焦于 CSS 布局控制（如 text-box）、开发者工具增强（文件系统 API 扩展、DOM 状态保留）、交互体验优化（对话框轻量关闭），以及 Baseline 标准的推进（新功能标记与跨浏览器兼容性）。Interop 2025 将进一步推动关键 Web 技术的标准化。
1. CSS text-box
• 功能：新增 text-box-trim 和 text-box-edge 属性，允许开发者基于字体度量精确控制文本垂直间距（如裁剪大写字母顶部多余空间）。
• 应用场景：优化标题或文本容器的布局，避免因字体差异导致的间距不一致问题。
2. DOM 元素状态保留移动
• 新方法：Node.prototype.moveBefore 可在不重置元素状态（如 iframe 加载、焦点、动画等）的情况下移动 DOM 元素。
• 优势：相比传统的删除再插入操作，避免了不必要的状态重置。
3. 文件系统访问 API 支持 Android
• 扩展支持：原本仅限桌面端的 File System Access API 现已在 Android 和 WebView 中可用。
• 核心方法：
• showOpenFilePicker()：打开文件选择器并返回文件句柄。
• showSaveFilePicker()：保存文件到本地。
4. <dialog> 元素支持轻量关闭（Light Dismiss）
• 行为：通过 closedby="any" 属性，允许用户点击对话框外部或按 Esc 键关闭对话框（类似 Popover API 的 auto 行为）。
5. Baseline 更新
• 新功能（Newly Available）：
• CSS：scrollbar-gutter（预留滚动条空间）、scrollbar-width（调整滚动条宽度）、ruby-align（注音文本对齐）。
• JavaScript：Promise.try（简化同步请求的错误处理）。
• WebAssembly：垃圾回收和尾调用优化支持。
• 广泛可用（Widely Available）：
• Array.findLast() 和 findLastIndex()（从数组末尾查找元素）。
• 独立的 CSS 变换属性（如 translate、rotate）。
6. 2025 年互操作性项目（Interop 2025）
• 重点领域：视图过渡（View Transitions）、CSS 锚点定位（Anchor Positioning）、导航 API（Navigation API）等。
Chrome for Developers
New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more! | Blog | Chrome for Developers
Learn about the enhancements in Chrome 132-134, such as CSS text box control for vertical spacing, the File System Access API now on Android and WebView, state preserving way to move a DOM element, light dismiss comes to dialog, and more!
