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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#优质博文 #CSS #前端 #新特性 #course
Modern CSS Round-Out Tabs

AI 摘要:本文探讨了如何利用现代 CSS 的 shape() 函数与 clip-path 属性,构建出带有圆角、延展弧线的标签 (Tabs) 样式。文章从早期依赖多元素遮罩的实现方式出发,逐步演示如何使用 shape() 绘制可响应的标签形状,并通过变量 (CSS Variable) 优化灵活度。后续还包含兼容性 fallback、单方向滚动控制 overflow-inline/overflow-block 的技巧,以及对可访问性 (Accessibility) 实现的反思。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 背景与旧方案
• 作者回顾早期制作“round-out tabs”的方案,需要为每个标签使用四个额外元素来模拟圆角连接效果。
• 这种方法复杂、难维护且受限于层叠遮罩实现。

2. 使用 shape() 实现圆角标签
• 介绍 shape() 函数与 clip-path 的结合,能直接以绘图指令定义形状,无需额外 DOM 元素。
• shape() 的指令包含 from、curve、vline、hline 等步骤,用以绘制从矩形裁剪出的弧线标签外形。
• 每一步演示曲线、直线和坐标计算,使形状既可固定又可相对灵活。
• 最终实现完整闭合形状,只显示实际的标签区域。

3. 参数变量化与可动态调整
• 将固定数值(如 10px、20px)抽象为自定义属性 (--tabGirth),以便根据变量调整标签厚度。
• 使用 Knobs 等交互工具实时修改变量值以测试视觉效果。

4. 外观与行为增强
• 添加 hover 与 active 效果,通过 translate 实现微动。
• 解决非换行标签的滚动问题,利用 overflow-inline: auto 与 overflow-block: clip 控制单方向滚动。
• 使用 filter 为 clip 后的形状添加阴影效果。

5. 浏览器兼容性与 Fallback
• 当前仍有浏览器未完全支持 shape()。
• 提供 @supports 条件判定,未支持时以 border-radius 提供圆角退化方案,保证视觉一致性。

6. 可访问性 (Accessibility) 讨论
• 使用 anchor 作为基础标签实现,并在有 JavaScript 时补上 aria 属性。
• 承认目前键盘导航功能不足,提醒开发者参考更完善的无障碍 Tabs 模式。

7. 相关与延伸参考
• 提到 Temani Afif、Ana Tudor 的圆角或内凹标题组件为现代 CSS 造型提供灵感。


author Chris Coyier Modern CSS Round-Out Tabs
#优质博文 #CSS #前端 #color #新特性
学到很多,比如 rgb 可以不加 a。
A pragmatic guide to modern CSS colours - part one

AI 摘要:本文系统介绍了现代 CSS 颜色系统的演变与新特性,重点包括新版 rgb() 与 hsl() 的语法变化、相对颜色(relative colours)的用法、改进的亮暗主题处理方式、颜色空间(colour spaces)的应用,以及应对更广色域设备的新工具。作者旨在帮助不专注设计的开发者高效掌握现代 CSS 色彩特性,从而提高代码一致性与灵活性。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 现代 CSS 写法演进
• 从传统的十六进制与函数写法过渡到更灵活的空间分隔语法
• 新版 rgb() 与 hsl() 可直接包含透明度通道,无需“a”版本
• / 用于区分主色值与 alpha 通道,提高一致性
• 空格分隔语法引入新规范以支持更多色彩函数,如 oklch()、hwb()、color()

2. 相对颜色(Relative Colours)

• 允许从已有颜色生成新颜色,通过语法 rgb(from #ff0000 r g b) 实现
• 可结合自定义属性(CSS variables)动态调整不透明度或亮度
• 帮助快速生成同系浅色、深色变化,便于主题一致管理
• 可用于构造组件风格如提示框(toast),只需修改基础色

3. 改进的亮暗主题(Theming)
• 传统方法需在媒体查询与主题类中重复定义变量
• light-dark() 函数允许在单条声明中同时定义明亮与暗色配色
• 结合 color-scheme 可根据用户系统偏好自动切换
• 支持组件级别的独立 color-scheme 控制,增强设计灵活度

4. 颜色空间(Colour Spaces)
• 颜色空间决定浏览器如何计算与过渡颜色
• 支持在 linear-gradient() 中指定颜色空间,如 oklch、lab、hwb
• 新空间可避免传统 sRGB 中的颜色过渡失真
• “longer hue” 参数用于控制渐变方向,生成更自然或彩虹式渐变

5. 扩展色域与精准配色
• 介绍 color() 函数与广色域(wide gamut)空间 display-p3 的使用场景
• 适用于与品牌色或印刷标准(如 Pantone)匹配需求
• 浏览器会自动降级不支持的色域,保证兼容性

6. 展望与总结
• CSS 色彩能力远超以往,包括即将介绍的 color-mix()、oklch() 等函数
• 开发者无需成为设计师,也能直接在代码层面进行色彩管理与调和


author Kevin Powell A pragmatic guide to modern CSS colours - part one
#优质博文 #CSS #layout #新特性 #前端
We Completely Missed width/height: stretch | CSS-Tricks

AI 摘要:文章讨论 width: stretch 与 height: stretch 这两个新加入 CSS 标准的属性值。作者回顾其历史背景,说明它如何统一了过去 -webkit-fill-available 与 -moz-available 的实现,并探讨了它与 box-sizing: border-box 的区别、动画特性(animatable)以及当前的浏览器支持情况。文章指出,虽然 stretch 功能简单,但它解决了长期以来 width: 100% 受内边距影响导致溢出的问题,为布局控制带来了更直观、更可靠的选择。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. stretch 的由来与标准化
• Chromium 浏览器自 2025 年 6 月起支持 stretch,统一了非标准属性 -webkit-fill-available 与 -moz-available。
• 在 @supports 出现之前,开发者难以根据浏览器正确选择对应实现。
• 这一特性被开发者 Dave Rupert 在 Bluesky 平台上重新发现,引起社区关注。

2. stretch 的工作机制
• 行为类似 width: 100%,但忽略 padding,因此不会因内边距造成溢出。
• 从技术上看,stretch 控制元素的 margin box 以匹配包含块的尺寸。
• 对比 box-sizing: border-box :虽然二者可达相似效果,但 stretch 更语义化且更灵活。

3. 为什么考虑使用 stretch 而非通用 box-sizing
• 使用通配符选择器 * 设置 box-sizing: border-box 无法涵盖所有伪元素。
• 维护完整伪元素列表既繁琐又易错,而 stretch 可减少这类问题。
• 对某些场景而言,开发者可能希望保持 100% 不包含 padding 的默认行为。

4. 动画与过渡特性
• box-sizing 无法被动画化,但 stretch 可与 100% 间平滑过渡。
• 需启用属性 interpolate-size: allow-keywords 才能插值动画。
• 未来可通过 calc-size(stretch, size) 精确控制插值行为。

5. 浏览器兼容性与渐进增强方案
• 当前仅 Chromium 系列 (Opera 122+、Chrome/Edge 138+、Android 140+) 支持。
• 可通过 @supports 设置自定义属性 --stretch,为 Firefox 与 Safari 提供兼容实现。
• 一旦全面支持后,可直接使用 width: stretch。

6. 总结与开发者建议
• stretch 是一种小而实用的布局增强功能,提升工作流质量。
• 即使继续使用 box-sizing 也无妨,但理解并尝试新特性有助于优化设计思维。
• 多一种写法,意味着多一种选择,更贴合个人或项目的编码哲学。


author Daniel Schwarz We Completely Missed width/height: stretch | CSS-Tricks
#优质博文 #前端 #CSS #新特性
What's new in view transitions (2025 update)

AI 摘要:本文综述了 Chrome 团队在 2025 年对 View Transition API 的更新,包括浏览器支持进入 Baseline、React 核心支持、新的自动命名与嵌套过渡功能、调试工具改进、动画属性继承优化及未来即将推出的 Scoped View Transition 等特性。这些改进显著提升了过渡动画在 Web 开发中的灵活性、性能与一致性。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 浏览器与框架支持进展
• Baseline 支持:View Transition API 即将成为 Interop 2025 Baseline 新规范,Firefox 144 将支持 document.startViewTransition(updateCallback)、view-transition-class、自动命名(view-transition-name: match-element)及 :active-view-transition 选择器。
• React 集成:React 团队已在 React 核心中集成 <ViewTransition> 组件,从实验版 (react@experimental) 进入 Canary 通道,文档与讲解视频同步更新,意味着 API 设计趋于稳定。

2. 新发布功能(Recently Shipped Features)
• 自动命名元素:view-transition-name: match-element 允许浏览器自动为匹配元素生成内部名称,减少开发时的手动命名负担。
• DevTools 调试支持增强:Chrome 139 起,开发者工具能正确显示针对 ::view-transition-* 伪元素使用 view-transition-class 的样式规则,便于动画调试。
• 嵌套过渡组 (Nested View Transition Groups):自 Chrome 140 起可嵌套 ::view-transition-group,保留层级结构,使 3D 旋转、裁剪等效果在过渡中保持。
• 继承更多动画属性:伪元素现在会继承更多 animation-* 属性(如 timing-function、iteration-count 等),简化同步动画管理。
• 修正 finished promise 延迟问题:finished 回调执行不再等待额外帧,从而消除动画尾部闪烁问题。

3. 即将推出的功能(Upcoming Features)
• Scoped View Transitions:允许在任意 DOM 子树上启动局部过渡 (element.startViewTransition()),可同时运行多个独立过渡,并仅锁定交互范围在对应子树。Chrome 140 开放实验测试。
• ::view-transition 定位变更:将在 Chrome 142 从 position: fixed 改为 absolute,实现与 CSS 规范统一。
• document.activeViewTransition 属性:即将推出的新属性,可直接访问当前活动的 ViewTransition 实例,便于跨文档或同文档过渡管理。
• ViewTransition.waitUntil API:允许使用 Promise 控制过渡结束时机,可实现等待异步操作(如 fetch)后再结束动画,为未来滚动驱动(scroll-driven)过渡铺路。

4. 展望与反馈
• Chrome 团队表示将持续迭代 View Transition 技术,未来重点关注 Scoped Transition 与更丰富的开发者 API。
• 鼓励通过 CSS WG 或 Chromium 提交功能建议与问题反馈。


author Bramus What's new in view transitions (2025 update)  |  Blog  |  Chrome for Developers
#优质博文 #JavaScript #新特性 #前端
How to group arrays in JavaScript without reduce()

AI 摘要:文章由 Matt Smith 撰写,全面介绍了 ES2024 新引入的 Object.groupBy() 与 Map.groupBy() 两个静态方法,展示它们如何取代繁琐的 reduce() 实现数组分组。文中对两者的区别、使用场景、常见陷阱以及浏览器支持进行了清晰对比,并通过任务列表、日志、商品价格等案例演示了它们的实际应用。文章强调这些新特性提高了代码的表达力与可维护性,使分组操作更加声明式与直观。


author Matt Smith
#优质博文 #前端 #CSS #新特性
Dynamic Tooltip Position with Anchor Positioning

AI 摘要:本文演示了如何使用 CSS 的 Anchor Positioning(锚点定位)功能,让 tooltip(提示框)动态对齐并保持在可视区域内,无论锚点元素的位置如何,同时通过伪元素及 margin 技巧控制 tooltip 箭头的显示及隐藏效果。文章还分享了代码片段和在线交互示例,展示如何通过 @position-try 与 position-try-fallbacks 实现降级处理,并展望未来 CSS 规范中的 anchored queries 支持。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 锚点定位的核心概念
• 使用 anchor-name 将元素指定为锚点
• position-anchor 用于将 tooltip 锚定到指定的锚点元素
• 控制位置属性(如 bottom、top 等)动态计算,实现与锚点间距调整

2. Tooltip 位置与箭头处理
• 定义 --distance 和 --size 等 CSS 自定义属性控制间距与箭头尺寸
• 使用伪元素 :before 绘制 tooltip 箭头,并通过 clip-path 形成箭头形状
• 通过继承 margin 和位置计算,达到根据锚点自动隐藏或显示箭头的视觉效果

3. 动态适配与回退机制
• 利用 @position-try 和 position-try-fallbacks 为 tooltip 设置备用位置(如从上切换至下)
• 受限于当前 CSS Anchor Positioning 的语法限制,部分逻辑需通过“hack”实现
• debug mode 演示 tooltip 在视图中移动时的实时定位与隐藏动画

4. 标准进展与未来展望
• 目前 @position-try 中的可用属性有限
• 未来可通过 anchored queries 精准适配布局,实现更简洁的 tooltip 自动定位逻辑

5. 延伸阅读
3D Box using Modern CSS:使用 corner-shape 创建 3D 盒子效果
CSS Shapes using corner-shape:以 corner-shape 重现常见 CSS 图形


author Temani Afif Dynamic Tooltip Position with Anchor Positioning
#优质博文 #JavaScript #ES2023 #前端 #新特性
虽然但是,传统是这么做的吗(?)
Stop using .reverse().find(): meet findLast() - Matt Smith

AI 摘要:本文介绍了 JavaScript 新增的 findLast() 与 findLastIndex(),它们能高效地从数组末尾开始查找元素,解决传统 .slice().reverse().find() 的性能与可读性问题。文章展示了实际应用场景(如日志查找、消息列表、React 组件状态管理等),并详细说明了使用注意事项、最佳实践和浏览器支持情况。


author Matt Smith
#优质博文 #CSS #前端 #动画 #新特性
The Big Gotcha With @starting-style

AI 摘要:本文介绍了 CSS 的新特性 @starting-style,它允许使用 transition 实现入场动画,但作者指出该特性存在严重的 specificity(优先级)陷阱,使得动画常常无法按预期运行。作者对比了 @starting-style 与传统的 keyframes,分析了具体问题案例,并提出三类解决方案:使用 !important、借助 CSS custom properties(变量)、退回到 keyframes。整体结论是:虽然 @starting-style 看似简化了写法,但 keyframe 动画依然更稳定、通用且易于维护。


author Josh W. Comeau The Big Gotcha With @starting-style • Josh W. Comeau
#优质博文 #CSS #新特性 #前端
非常全的 CSS 新特性合集。
你需要知道的现代 CSS(2025版

AI 摘要:本文梳理了 2025 年现代 CSS 的最新进展,包括动画到 auto、@function、if()、text-wrap、linear() easing、 shape()、增强的 attr()、reading-flow 等特性。这些新功能大多提升了样式抽象能力、响应式设计的灵活性和排版的可控性,同时展现了 Chrome 为主、Safari/Firefox 跟进的支持现状,并给出 Polyfill 和渐进增强的可行性建议。


[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 动画与尺寸控制
- Animate to Auto:首度支持从固定数值过渡到 `auto`、`min-content` 等关键字,解决了长久以来无法动画到内在高度的问题。
- field-sizing:表单元素可根据内容自动扩展,高度自适应不再依赖 JS。

2. HTML 与交互增强
- Popovers & Invokers:新增 `popover` 和 `invoker` 属性,原生支持弹出层及控制呼叫,提升可访问性与无 JS 支持的友好性。
- Custom Selects:允许开发者完全自定义 `<select>` 的 UI,不再局限于操作系统原生样式。

3. 函数与逻辑能力
- @function:允许开发者在 CSS 内自定义函数,提升逻辑复用与避免重复代码。
- if():原生条件语法,类似 `switch`,用于条件性的样式应用。
- linear() easing:支持更复杂的动画缓动效果,可实现多点定义的动态曲线,而非仅限于 `cubic-bezier()`。
- shape():改良版路径函数,用 CSS 单位定义 `clip-path`、`offset-path` 等,实现复杂图形与路径动画。
- random()(预览特性):Safari 已支持,用于随机化样式值(实验性)。

4. 属性与排版优化
- text-wrap:新增 `balance`、`pretty`,提升文字换行的美观性与可读性,特别优化标题与段落排版。
- 增强的 attr():可将 HTML 属性值解析为数字、颜色等数据类型,提升数据驱动的 CSS 表达能力。
- reading-flow:重新映射视觉顺序与键盘导航顺序,避免因布局重排导致的 Tab 键焦点错乱。

5. 值得关注的趋势
- Masonry 布局:提案逐步接近规范化,用于实现瀑布流布局。
- margin-trim:Safari 首发,期待跨浏览器可用。
- sibling-index() / sibling-count():有助于顺序动画和灵活选择。
- View Transitions:Firefox 正在实现,进一步统一页面过渡体验。
- calc() 扩展:将支持单位间的乘除运算。

6. 经典与延续
- Container queries / container units:继承 `media queries` 的伟大进步。
- :has() 伪类:极大强化选择器能力。
- 滚动驱动动画 / Anchor Positioning / View Transition:现代 CSS 交互特性逐步进入主流支持。
- 额外视口单位(如 dvh) 已进入 baseline。


author Chris Coyier What You Need to Know about Modern CSS (2025 Edition)
#优质博文 #CSS #前端 #新特性
被低估的 linear() 函数 linear() 函数如何使用?了解下 linear() 函数的原理

AI 摘要:本文深入探讨了 CSS 新增的 linear() 函数,它突破 cubic-bezier() 的局限,能通过多个参数点实现复杂的分段线性动画,具有极高的可控性。作者还介绍了工具生成 linear() 代码的方法、与其他缓动函数的对比,以及实际应用场景,总结 linear() 在动画设计中的价值和独特作用。


author zhangxinxu
#优质博文 #CSS #前端 #新特性
What Can We Actually Do With corner-shape?

AI 摘要:本文介绍了 CSS 最新属性 corner-shape 的多种应用方式,它可以与 border-radius 配合,突破传统圆角与直角的限制,实现斜切、箭头、提示框、手绘风格、squircle(方圆形)等复杂的 UI 效果。目前仅 Chrome 139+ 支持,文章通过丰富实例展示其潜在的设计与交互价值。


author Daniel Schwarz
What Can We Actually Do With corner-shape? | CSS-Tricks
#优质博文 #CSS #前端 #新特性 #course
通过九个新模块重新学习 CSS

AI 摘要:本文介绍了 Web.dev 更新的 Learn CSS 课程,新增了 9 个涵盖最新 CSS 功能的模块,例如 CSS 嵌套 (nesting)、容器查询 (container queries)、自定义属性 (custom properties)、锚点定位 (anchor positioning) 等。此次更新反映了近四年 CSS 的重大进展,模块同时关注 Baseline 功能保证了实用性,适合学习或提升前端开发技能的开发者。


[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. Learn CSS 课程的演进
• 2021 年推出的 Learn CSS 是 Web.dev 基础 Web 开发内容的起点
• 四年间 CSS 特性快速发展(如容器查询从无到广泛可用)
• 每月数千人使用此课程,促使更新迭代

2. 本次更新的核心内容
• 新增 9 个重要模块:
CSS 嵌套
容器查询
自定义属性
计数器
光标和指针
锚点定位
浮层和对话框
单页应用 (SPA) 的视图过渡
路径、形状、剪切和遮罩
• 更新后的模块紧贴近几年 CSS 标准发展与浏览器支持

3. Baseline 功能的聚焦
• 所有教学功能均已达到或即将进入 Baseline 状态
• 包括 Interop 2025 中的新特性,如锚点定位和视图转换
• 每个模块配有明确的浏览器支持信息,保证学习即用


author Rachel Andrew 通过九个新模块重新学习 CSS  |  Blog  |  web.dev
#优质博文 #JavaScript #React #ES2023 #前端 #新特性
Finally, safe array methods in JavaScript - Matt Smith

AI 摘要:传统的 JavaScript 数组方法如 .sort() 、 .reverse() 和 .splice() 会直接修改原数组,可能带来难以排查的 bug,尤其在 React 等依赖 不可变数据 (immutability) 的框架中。ES2023 新增了 toSorted() 、 toReversed() 和 toSpliced() ,它们返回新数组而不会变异原始数据,从而提升代码可维护性和安全性。这一细小的语法改进带来了巨大的开发体验优化,特别是在现代前端应用中。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 新的不可变 (non-mutating) 方法
• toSorted():返回排序后的新数组,允许自定义比较函数
• toReversed():返回反转后的新数组,避免破坏原数组
• toSpliced():返回元素增删后的新数组,保持原数组不变

2. 在 React 中的应用场景
• 保证状态不可变性,触发正确的重新渲染
• 常见用法:展示反向排序的任务列表、根据条件生成新数组
• 避免额外的深拷贝操作(如 structuredClone())

3. 浏览器与环境支持
• Chrome/Edge 110+、Safari 16+、Firefox 115+、Node.js 20+ 原生支持
• 旧环境可依赖 core-js 提供 polyfill
• 与其他 ES2023 特性互补,如 optional chaining、top-level await


author Matt Smith
#优质博文 #CSS #前端 #新特性
Mixins & Functions to Streamline CSS

AI 摘要:本文介绍 CSS Mixins 与 CSS Functions 的基本概念、与 Sass 的区别、浏览器支持情况以及实际应用方法。同时,作者还分享了 CSS 工作组(CSSWG)的最新会议进展,包括 Masonry 布局、色域映射、Mixins 与层的交互、以及新提案“功能型捕获”(Functional Capturing) 等。最后还回顾了近期“Winging It”系列中关于容器查询、Popover 定位和 stretch 关键词的讨论。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. CSS Mixins
定义与区别:介绍 CSS Mixins 是什么,并对比 Sass Mixins 的差异。
用法说明:展示如何在 CSS 中编写和调用 Mixins。
兼容性:当前主要由 Chrome (开启 CSSMixins flag) 支持,其他浏览器尚未普遍实现。

2. CSS Functions
概念:解释 CSS Functions 的设计背景。
使用方法:介绍如何在 CSS 中定义与应用 Functions。
支持情况:目前仅在 Chromium 浏览器试验特性下可用,需要开启 Experimental Web Platform Features。

3. CSS 工作组 (CSSWG) 最新动态
Masonry Display:关于 Masonry 布局模式的进展。
色彩标准:就 gamut-mapping 提案达成一致意见。
Mixins 结合 Layers:讨论条件语句中使用 Mixin 的场景。
新提案:Functional Capturing 与 Indirect Cyclic Conditions。
参考文档
CSS Mixins & Functions Explainer
W3C CSS Functions and Mixins Module
Mixins Browser Support: Chrome
• ……

4. Winging It 系列回顾
Episode 23:庆祝容器查询 (Container Queries) 自 2023 年起在所有浏览器全面支持。
Episode 22:关于 Popover 的定位技巧,使用 CSS anchor positioning 与 position-area。
Episode 21:介绍新的 stretch 关键词,与 100% 和 100vh 的差异及应用场景。


author Miriam
#优质博文 #CSS #前端 #新特性
una.im | 5 Useful CSS functions using the new @function rule

AI 摘要:本文介绍了 CSS 新推出的 @function 规则,展示了如何通过自定义函数为样式表带来逻辑能力,使 CSS 更加动态、可维护,并提升设计系统的表达能力。作者通过五个实用案例(数值取反、透明度管理、流体排版、条件圆角、响应式侧边栏)以及一个 Bonus 案例(light-dark 主题切换函数),说明了现代 CSS 在逻辑处理和组件化方向上的巨大潜力,并展望了未来 @mixin@apply 等特性的应用场景。

[以下是方便搜索索引的大纲 (AI 生成),请读原文]
1. CSS @function 简介
• 新特性在 Chrome 139 中落地,允许编写自定义函数。
• 与 var() 的静态取值不同,@function 能处理逻辑与参数运算。
• 适合在 设计系统 (Design System) 场景下做动态样式抽象。

2. 五大示例函数
• Negation function:实现取反功能,可用于自动计算负值边距。
• Opacity function:将任意颜色与透明度参数结合,简化半透明色值生成。
• Fluid Typography function:在 clamp() 基础上提供更可读的语义化流体排版,允许不同文本类型按不同速率缩放。
• Conditional Radius function:在元素接近 viewport 边缘时移除圆角,避免布局异常,无需 media query。
• Responsive Sidebar function:根据屏幕宽度调整侧边栏宽度(默认 20ch),有效减少重复的媒体查询逻辑。

3. Bonus:Light-Dark Theme Function
• 扩展原生 light-dark() 的适用范围,不仅局限于颜色,还能应用到边框样式、字体粗细等。
• 结合 if()、:scope、style() 查询与 @function,实现更强大的主题自定义能力。

4. 未来展望
• CSS Functions and Mixins Draft Spec 将继续发展,未来的 @mixin@apply 将支持输出多条样式规则。
• 可以构建类似 utils.css 的工具库,与 reset.css、utils.js 类似,让 CSS 工程化更完善。


author Una Kravets
5 Useful CSS functions using the new @function rule
#优质博文 #前端 #CSS #新特性 #course
这个用示例来教学的方式太棒了。
The Basics of Anchor Positioning

AI 摘要:本文系统介绍了 CSS 锚点定位(Anchor Positioning)基础:通过为任意元素定义锚(anchor-name)并在目标元素使用 position-anchor、anchor() 或 position-area 等特性,实现在不重构 DOM 的前提下,将元素稳定地相对其他元素对齐,并用 position-try-fallbacks(如 flip-block、flip-inline)优雅处理视口溢出问题;文章配有交互示例与实践建议,并提示当前浏览器支持仍以 Chrome 为主,Safari/Firefox 仍待完善。

1. 背景与问题
• 回顾传统 position 定位的局限:绝对定位只能相对最近的定位父级,无法跨层级对齐;为对齐常被迫调整 DOM 结构,维护成本高。
• 实战场景:卡片布局中,将分类标签叠放在图片角落;当卡片改为横向布局时,基于父容器的绝对定位失效,出现脆弱的“魔法数”方案。

2. Anchor Positioning 基础能力
• 定义锚元素:在被参考的元素上设置 anchor-name,作为锚点。
• 目标关联:在目标元素上用 position-anchor 引用锚。
• 使用 anchor() 对齐:通过 anchor(top/right/bottom/left) 将目标 inset 到锚的边缘,可在任意布局变更下保持稳定相对位置。
• 要点:锚与目标无需同容器;适用于徽标、角标、标签、弹出层等跨层级对齐需求。

3. position-area 与 3x3 网格
• 核心概念:position-area 在锚周围生成 3x3 网格,以“方位 + 对齐”(如 top center)描述目标落位,更直观。
• 跨单元格:span-* 语法(如 span-right)让目标横纵向跨越多个单元格,便于描述宽度或高度延展。
• 实用场景:快速布置弹出层、提示框在锚的上/下/左/右及边角位置,减少复杂的位移计算。

4. 自适应回退与溢出处理
• position-try-fallbacks:声明回退策略以处理视口或容器溢出,减少对 JS 的依赖。
• flip-block:在块轴(垂直方向)空间不足时,自动上下翻转(如弹层从上侧切换到底侧)。
• flip-inline:在内联轴(水平方向)空间不足时,自动左右翻转(与 span-right 等组合更灵活)。
• 可视化与调试:示例中提供锚区域可视化,便于预判翻转与回退路径。

5. 兼容性与实践建议
• 浏览器支持:当前以 Chrome 桌面端体验最佳;Safari TP 中 position-area 示例存在问题;期待 Firefox 与 Safari 稳定支持。
• 开发建议:优先用锚点定位替代脆弱的绝对定位与“魔法数”;为弹出层与标签类组件提供更稳健的跨容器对齐与溢出回退。
• 资源延伸:CSS Anchor Positioning 规范与入门文章,帮助深入理解 API 设计与更多用例。


author Ahmad Shadeed The Basics of Anchor Positioning
#优质博文 #CSS #前端 #新特性 #HTML
唉最近忙的阅读频率都下降了。

1. 抢先学习大开眼界的CSS corner-shape属性
详解 CSS 新特性 corner-shape,基于 border-radius 自定义角形(round/squircle/scoop/bevel/notch/square 或 superellipse(K)),支持按方位设置与平滑动画,目前仅 Chrome 139+ 支持。

2. HTML之快速了解hidden=until-found的作用
介绍 hidden 的 until-found 隐藏机制及 beforematch 事件,基于 content-visibility:hidden 在锚点/页面查找时自动显现,适用于折叠内容、帮助信息与标签页,Chrome 已支持多年,Safari 亦已跟进。


author 张鑫旭
#优质博文 #前端 #CSS #新特性
How to Use attr() in CSS for Columns, Colors, and Font-Size

AI 摘要:本文介绍了 CSS attr() 函数的进阶用法,包括通过类型声明(如 <color>、<length>)将 HTML 属性值动态应用于网格布局、颜色和字体大小等场景,并提供了实际代码示例和设计系统中的应用思路。目前该功能仅在 Chrome 中支持,但未来将逐步普及。

1. 功能概述与背景
• 历史限制:传统 attr() 仅返回字符串,仅适用于 content 属性等简单场景。
新特性:现在可通过类型声明(如 type(<length>))将属性值解析为数字、颜色等,扩展了应用范围。
• 兼容性:目前仅 Chrome 支持,但其他浏览器将跟进(参考 Can I Use)。

2. 核心用法示例
• 基础语法:

attr(data-font-size type(<length>));
attr(data-color type(<color>), black);

• 支持的类型:包括 <color>、<integer>、<length-percentage> 等 11 种 CSS 数据类型。

3. 实际应用场景
• 网格控制:通过 data-columns 设置元素跨越的列数,或 data-column-start 定义起始位置。
• 动态颜色:结合 color-mix() 或 oklch() 调整亮度,确保可读性(如 max(l, 0.9))。
• 字体大小:使用 round() 限制字号为设计系统的固定增量(如 5px 倍数)。

4. 扩展思路与其他用途
• 设计系统工具:如 data-gap 控制间距,或 data-border 定义边框样式。
• 层叠传递:通过自定义属性(如 --button-color: attr(...))向子元素传递值。
• 命名空间建议:推荐使用 data-* 前缀避免与未来标准冲突,并兼容 dataset API。

5. 参考资料与社区动态
• 推荐阅读:Una KravetsBramus Van Damme 的相关文章。
MDN 文档 已更新新特性说明。


author Chris Coyier
#优质博文 #前端 #CSS #新特性
A gentle introduction to anchor positioning

AI 摘要:本文以头像菜单为例,系统介绍了锚点定位(Anchor Positioning)如何让元素基于另一元素进行纯 CSS 定位,涵盖锚点与目标的关联(anchor-name、position-anchor、position),两种定位思维模型:基于九宫格的 position-area 与基于边缘的 anchor()(仅用于 inset 系列),并演示了使用逻辑方向、溢出切换(position-try)与 calc() 的实战技巧,帮助开发者在无需 JavaScript 的情况下实现响应式菜单、气泡与工具提示。

1. 基本概念与关联关系
• 角色定义:被依附的元素为锚点(anchor),需要定位的元素为目标(target)。
• 建立关联:在锚点上声明 anchor-name(如 --profile-button),在目标上使用 position-anchor 指向该锚点名。
• 定位前置:目标需设置 position: absolute 或 fixed 才能启用锚点定位。

2. position-area:基于九宫格的定位模型
• 九宫格心智模型:以锚点为中心,在其包含块(containing block)上选定九宫格中的区域放置目标。
• 优先使用逻辑方向:以 block-start/block-end、inline-start/inline-end 与 center 取代物理方向(top/right/bottom/left),以适配不同书写模式与语言。
• 对齐与溢出:当目标比锚点宽时,使用 block-end span-inline-end 可实现“下方左对齐且向行尾延展”;类似地,可用 block-end center、block-start inline-end 等组合控制位置。
• 响应式回退:通过 position-try 指定备选位置,当首选位置空间不足时自动切换(如窄屏从向右溢出改为向左溢出)。

3. anchor():基于边缘的精确定位
• 使用范围:仅可用于 inset 系列属性(物理:top/right/bottom/left;逻辑:inset-block-start/end、inset-inline-start/end;以及 inset-block、inset-inline 简写)。
• 边缘对齐:例如让菜单左边与头像左边对齐、菜单顶与头像底对齐,可写为 left: anchor(left), top: anchor(bottom);逻辑等价为 inset-inline-start: anchor(start), inset-block-start: anchor(end)。
• 指定锚点:anchor() 可接收可选的锚点名(如 anchor(--profile-button left)),默认使用 position-anchor 指定的锚点。
• 配合 calc():可将 anchor() 与 calc() 组合做细粒度偏移(如对齐去除内边距影响:inset-inline-start: calc(anchor(start) + 1.25em))。

4. 实战场景与模式选择
• 导航头像菜单:点击头像(可结合 Popover API)后,菜单基于头像精准定位且纯 CSS 控制。
• 桌面与移动自适应:桌面可向 inline-end 溢出,移动端通过 position-try 切换为 inline-start 溢出,减少遮挡与视口溢出。
• 心智模型选型:喜欢“区域网格”可用 position-area;偏好“边缘数值”可用 anchor()。两者都能完成相同目标。

5. 规范与资源指引
• 推荐实践:优先使用逻辑属性与方向,增强无障碍与国际化适配;目标元素需 absolute/fixed 定位。
• 学习与实验:文中提供了 CodePen 示例用于自由尝试;更多详细属性与值可参阅 MDN 文档;还有教学游戏 Anchoreum。
• 反馈与社区:作者与 WebKit 福音师在 BlueSky/Mastodon 等渠道互动;遇到问题可提交 WebKit Bug 报告。


author Saron Yitbarek A gentle introduction to anchor positioning
 
 
Back to Top