#优质博文 #前端 #AI #新动态
Octoverse: A new developer joins GitHub every second as AI leads TypeScript to #1：2025 年 GitHub 的年度报告，比较有意思，摘了其中几个点看看：

1. GitHub 总用户达 1.8 亿，年增 3600 万，创下历史最高增长率。每秒新增 1 名开发者，印度贡献 500 万以上新用户，占全球新增 14%。

2. 生成式人工智能如今已成为开发中的标准配置。超过 110 万个公共代码库正在使用 LLM SDK，其中仅过去 12 个月就新增了 693,867 个项目（同比增长 178%）。开发者们还合并了创纪录的 5.187 亿个拉取请求（同比增长 29%），80% 的新开发者在第一周就开始使用 Copilot。

3. TypeScript 首次成为 GitHub 最常用语言，超越 Python 和 JavaScript。即便如此，Python 在人工智能和数据科学工作负载方面仍然占据主导地位，而 JavaScript/TypeScript 生态系统的整体活跃度仍然高于 Python 本身。

4. 总计 3.95 亿个公共存储库托管了 11.2 亿次贡献和 5.187 亿次合并拉取请求。

还有很多很多数据，感兴趣的建议阅读原文。

The GitHub Blog

Octoverse: A new developer joins GitHub every second as AI leads TypeScript to #1

In this year’s Octoverse, we uncover how AI, agents, and typed languages are driving the biggest shifts in software development in more than a decade.

#优质博文 #CSS #前端 #新特性
Detect fallback positions with anchored container queries from Chrome 143

AI 摘要：本文介绍了 Chrome 143 支持的 anchored container queries，它解决了 CSS Anchor Positioning Level 1 规范中无法识别元素使用了哪种回退定位的问题。通过 container-type: anchored 和 @container anchored(fallback: …) 的新语法，开发者可以在纯 CSS 中检测锚定元素（如 tooltip 或 popover）使用的最终定位方式，并进行样式调整，无需借助 JavaScript。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 现有问题与功能背景
• CSS Anchor Positioning API 允许元素与锚对象绑定，并定义多个回退 (fallback) 定位方案。
• Level 1 规范中，浏览器自动调整位置但 CSS 本身无法得知采用了哪种回退方式。
• 导致样式无法自适应最终的显示状态（如 tooltip 箭头方向错误），过去常需借助 JavaScript 解决。

2. 新特性：Anchored Container Queries
• 来自 CSS Anchor Position Level 2 规范的新机制，引入 container-type: anchored。
• 该属性让定位元素成为可感知锚定状态的容器 (container)。
• 使用 @container anchored(fallback: …) 查询语法，可检测当前被应用的回退选项。
• 示例展示 tooltip 根据最终定位方向自动切换箭头符号与位置，实现完全基于 CSS 的适配。

3. 应用方式与优势
• 无需监听器或手动逻辑，即可通过 CSS 自主响应布局变化。
• 对 Popover API 的支持更自然，可隐式创建锚点。
• 扩展应用包括：动态改变菜单背景色、移动边框位置、调整圆角、根据回退位置触发动画。
• 极大提升组件的鲁棒性、上下文感知能力和可维护性。

4. 相关资源与规范
• Chrome Platform Status
• Spec: CSS Anchor Positioning Level 2

author Una Kravets

Chrome for Developers

Detect fallback positions with anchored container queries from Chrome 143  |  Blog  |  Chrome for Developers

#优质博文 #前端 #CSS #新动态 #浏览器
New in Chrome 142

AI 摘要：Chrome 142 引入了多项前端开发相关的新特性，包括用于滚动标记的 :target-before 与 :target-after 伪类、支持比较运算符的 CSS 样式容器查询 (style container queries) 与 if() 函数的范围语法 (range syntax)，以及可用于交互触发的 interestfor 属性。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 样式与选择器增强
• 新增 :target-before 和 :target-after 伪类，用于精确匹配滚动标记上下文中的前后状态，实现滚动位置的更直观样式反馈。
• 该伪类配合 :target-current 共同用于管理同组滚动标记的状态，可根据文档平面树 (flat tree order) 定义前后关系。

2. CSS 条件查询能力升级
• 样式容器查询与 if() 函数新增范围语法 (range syntax)，支持通过比较运算符（如 >、<）判断数值型样式变量。
• 可在样式级别进行动态比较，包括自定义属性、文字值 (literal) 与替代函数值 (attr()、env() 等)，前提是比较双方需为同一数据类型，如 <length>、<number>、<percentage> 等。
• 提供灵活的 CSS 逻辑表达方式，例如根据容器宽度或自定义属性值动态切换样式。

3. 新的用户交互机制：Interest Invokers
• 新增 interestfor 属性，可在 <button> 与 <a> 元素上声明“兴趣触发”行为。
• 用户通过长按、悬停或特殊快捷键表现出“兴趣”时，浏览器将触发目标元素的 InterestEvent，默认动作可显示或隐藏弹出层 (popover)。
• 为交互式组件提供无需脚本的原生事件机制，提高用户体验与无障碍交互能力。

4. 延伸阅读与订阅
• 文章并列出扩展资源，包括 Chrome 142 Release Notes、DevTools 更新、ChromeStatus、Release calendar 等。
• 鼓励开发者通过 YouTube、X、LinkedIn 等渠道订阅 Chrome Developers 更新，以持续获取版本迭代信息。

author Rachel Andrew

Chrome for Developers

New in Chrome 142  |  Blog  |  Chrome for Developers

The :target-before and :target-after pseudo-classes, range syntax for container queries, and more.

#碎碎念
只要 200 块钱就能收买一只贫困文科大学生妹妹，当义父！