呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #无障碍 #WCAG
Please, can we have ARIA Notify

AI 摘要:本文作者 Nic Chan 强烈呼吁推动 ARIA Notify API 的实现,以解决当前 ARIA Live Regions 在无障碍开发中的诸多问题。文章详细分析了 Live Regions 的局限性,包括隐藏元素时的无效性、模态对话框中的管理复杂性、开发者的实现难度、规范内置的不一致性以及国际化翻译支持的不足。作者通过自己在 Audiom 项目中的经验,阐述了 Live Regions 在实际应用中的困境,并对 ARIA Notify API 寄予厚望,认为它能提供更精细的控制和更好的用户体验,同时希望未来能解决翻译等问题,避免成为另一个技术上存在但实用性受限的工具。


author Nic Chan
#优质博文 #前端 #新动态
Frontend Focus #689 — April 23, 2025

AI 摘要:本期 Frontend Focus 涵盖前端领域多项重要动态:Google 宣布放弃移除 Chrome 第三方 Cookie 的计划,转而维持现有隐私设置;AG Grid 推广其高性能数据网格库;WebGL 渐变技术解析;此外还包括浏览器市场动态、前端工具更新(如 Polypane 24 和 Tailwind Trainer)、PWA 离线图像上传方案、CSS 预处理替代方案探讨,以及 AI 与可访问性的未来等深度文章。

1. 社区动态
• Chrome 隐私策略调整:Google 终止移除第三方 Cookie 的计划,用户仍需通过隐私设置手动管理。 #草

“ 考虑到所有这些因素,我们决定保持目前在 Chrome 中为用户提供第三方 cookie 选择的方法, 并且不会为第三方 Cookie 推出新的独立提示。用户可以继续在 Chrome 的隐私和安全 设置中选择最适合自己的选项。

• 谷歌可能被迫出售 Chrome, 猜猜谁想买? OpenAI。[Source]
• TLS 证书有效期将缩短至 47 天(2029 年起)。
• 从今天到 2026 年 3 月 15 日,TLS 证书最长生命周期为 398 天。
• 自 2026 年 3 月 15 日起,TLS 证书最长生命周期为 200 天。
• 自 2027 年 3 月 15 日起,TLS 证书最长生命周期为 100 天。
• 自 2029 年 3 月 15 日起,TLS 证书最长生命周期为 47 天。
• Web 开发引擎 Toddle 更名为 Nordcraft 并发布 1.0 版本。
• Heydon 的 Web 辅助功能高级指导原则集现已提供新增多语言版本(法语、日语等)。

2. 博文与工具
AI is the Future of Accessibility:Karl Groves 通过汽车工业发展的类比,批判了当前无障碍设计领域对 AI 技术的消极态度,呼吁行业积极拥抱技术变革而非抵制。 #无障碍
网站“键盘导航”的真正含义:了解为什么能够使用键盘浏览我们的网站很重要,如何测试您当前的设置,并最终改进它。
构建离线友好的图像上传系统:利用 IndexedDB 和 Service Worker 提升弱网环境可靠性。
Tailwind Trainer:通过游戏学习 Tailwind CSS 语法。 #tailwind #游戏
Astro Font:自动优化字体的 Astro 插件,支持自定义字体、本地字体、任何 CDN 上的字体和 Google 字体的优化。
Symbl:轻松搜索、复制和使用 HTML 符号、表情符号等。
Markdown to Slides:将 Markdown 转换为 PDF/PPTX 幻灯片的在线工具。
CSS Hell:挑战性 CSS 谜题游戏(仅限桌面端)。 答案
css-hell/solutions.md at main · marcos-acosta/css-hell
#前端 #新动态 #优质博文 #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 现在可以使用 CSS 自定义 <select> 元素  |  Blog  |  Chrome for Developers
#优质博文 #前端 #css #设计 #无障碍
Beautiful focus outlines

AI 摘要:文章探讨了网页设计中聚焦轮廓(focus outlines)的重要性及美学优化。聚焦轮廓为键盘用户和动作障碍者提供视觉反馈,增强网页无障碍性。默认浏览器样式常不一致,建议自定义实现以确保可见性,需遵循WCAG准则:至少2px宽,色彩对比度≥3:1。

技术点包括:
1. 使用 :focus-visible 避免鼠标点击显示轮廓;
2. 使用 currentColor 自动匹配文本颜色;
3. 利用 outline-offset 调整轮廓位置;
4. 创建圆角或双线轮廓以增强视觉效果。

设计应平衡美观和功能,避免无意破坏交互性,同时确保不同背景的对比清晰度。

相关网站:Focus Appearance (Level AAA)

from Frontend Focus #668 Beautiful focus outlines · Medienbäcker Thomas Günther
 
 
Back to Top