#优质博文 #前端 #CSS #新特性
How to Use attr() in CSS for Columns, Colors, and Font-Size
author Chris Coyier
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 Kravets、Bramus Van Damme 的相关文章。
• MDN 文档 已更新新特性说明。
author Chris Coyier
Frontend Masters
How to Use attr() in CSS for Columns, Colors, and Font-Size
I’ve personally put “advanced attr() usage” on my CSS wishlists for years and years. All the sudden we’re seeing support for it start to drop! Props to the Chrome gang and others for shipping and highlighting this wonderfulness. I’m avoiding being entirely…
#优质博文
台长的超长文,老有意思了,几天前看见的,忘记发了。
超短篇:苹果系统迁移史
author 中二电波台
台长的超长文,老有意思了,几天前看见的,忘记发了。
超短篇:苹果系统迁移史
AI 摘要:本文详细梳理了苹果公司自 1990 年代起从经典 Mac OS 向基于 UNIX 的 Mac OS X 系统的迁移历程,揭示了这场历时超34年、跨越四任 CEO、四次硬件平台更迭的技术与商业史诗。通过收购 NeXT 获取 NeXTSTEP 技术、构建多框架兼容体系、乔布斯回归后的战略转型等关键节点,苹果最终完成生态重塑,奠定了今日 iOS/macOS 统一架构的基础,成为商业史上罕见的成功系统迁移案例。
author 中二电波台
❤2
🥰2
#视频更新 #旅游 #碎碎念
5月10号去的了,昨晚才剪出来我真是懒狗~~
回看之前在云南的感觉真好啊,等有钱有闲了还要再多去几趟云南。
蓝月谷的放在下一次剪了,还有泸沽湖还有 BW,清素材大作战!
YouTube 【4K 玉龙雪山 vlog】下冰雹的玉龙雪山也很美
YouTube 频道 @nahida0721
B 站 【4K 玉龙雪山 vlog】下冰雹的玉龙雪山也很美
5月10号去的了,昨晚才剪出来我真是懒狗~~
回看之前在云南的感觉真好啊,等有钱有闲了还要再多去几趟云南。
蓝月谷的放在下一次剪了,还有泸沽湖还有 BW,清素材大作战!
YouTube 【4K 玉龙雪山 vlog】下冰雹的玉龙雪山也很美
YouTube 频道 @nahida0721
B 站 【4K 玉龙雪山 vlog】下冰雹的玉龙雪山也很美
YouTube
余弦自留地
喵~
#tools #插件
简洁好用,喜欢。
MaterialYouNewTab | Chrom 商店地址
简洁好用,喜欢。
MaterialYouNewTab | Chrom 商店地址
AI 摘要:此浏览器扩展程序是一个灵活的新标签页助手,受到谷歌“Material You”设计的启发,用户可根据自身需求进行主题定制、欢迎信息及多种实用工具的配置,同时与用户喜欢的搜索引擎无缝集成。
GitHub
GitHub - prem-k-r/MaterialYouNewTab: A Simple New Tab (browser's home page) inspired with Google's 'Material You' design
A Simple New Tab (browser's home page) inspired with Google's 'Material You' design - GitHub - prem-k-r/MaterialYouNewTab: A Simple New Tab (browser's home ...
🤩1
#视频更新 #旅游 #碎碎念
5月10号,从玉龙雪山下来之后就去了蓝月谷,终于抽时间剪好了~
然后发现上次投稿的时候忘记调帧率了,这次调了下换了下之前的源,素材是 4K 60 帧的。
你说这蓝月谷怎么不蓝啊~~哦原来是因为下雨天~
不过之后去的泸沽湖超级蓝,等下一期剪出来!
YouTube 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷
B 站 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷
5月10号,从玉龙雪山下来之后就去了蓝月谷,终于抽时间剪好了~
然后发现上次投稿的时候忘记调帧率了,这次调了下换了下之前的源,素材是 4K 60 帧的。
你说这蓝月谷怎么不蓝啊~~哦原来是因为下雨天~
不过之后去的泸沽湖超级蓝,等下一期剪出来!
YouTube 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷
B 站 【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷
YouTube
【4K60 | 玉龙雪山 | 蓝月谷 vlog】下雨天的蓝月谷
5月10号,从玉龙雪山下来之后就去了蓝月谷。
终于抽时间剪好了~发现上次投稿的时候忘记调帧率了,这次调了下,素材是 4K 60 帧的。
还有泸沽湖还有 BW,清素材大作战继续加油!
终于抽时间剪好了~发现上次投稿的时候忘记调帧率了,这次调了下,素材是 4K 60 帧的。
还有泸沽湖还有 BW,清素材大作战继续加油!
❤1
#优质博文 #前端 #css #SVG #course
An Interactive Guide to SVG Paths • Josh W. Comeau
author Josh W. Comeau
An Interactive Guide to SVG Paths • Josh W. Comeau
AI 摘要:这篇文章深入探讨了 SVG 的 <path> 元素,详细介绍了如何使用该元素绘制各种形状,尤其是 Bézier 曲线和弧形。文章通过示例和解释帮助读者建立对路径语法的直观理解,适合希望提升其 SVG 绘图技能的开发者。
1. 基本概念
• SVG <path> 元素类似于矢量图形软件中的“笔”工具,可以连接多个绘图指令。
• d 属性定义了一系列绘图指令,每个指令通过不同的命令(如 M、L)来实现。
2. 基本命令
• 移动命令 (M)**:用于将笔移动到画布的特定位置,不会绘制任何线条。
• 直线命令 (L):用于绘制从当前点到指定点的直线。
• **Bézier 曲线: 包括二次 (Q) 和三次 (C) Bézier 曲线,分别使用一个和两个控制点绘制平滑曲线。
3. 弧形 (Arcs)
• 弧的复杂性:弧的绘制涉及到多个参数,掌握其用途对于理解如何连线至关重要。
• 半径控制:水平和垂直半径影响着绘制的椭圆形状的深度和外观。
• 弧形路径选择:通过大弧标志和扫掠标志选择路径方向。
4. 动画与额外功能
• 提到了动画技术的学习课程,并介绍了路径闭合命令 (Z) 和相对命令 (小写字母形式)。
• 文章总结了一些常用的命令和其语法,帮助开发者更轻松地创建复杂的 SVG 图形。
author Josh W. Comeau
Joshwcomeau
An Interactive Guide to SVG Paths • Josh W. Comeau
SVG gives us many different primitives to work with, but by far the most powerful is the <path> element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some…
❤2
#碎碎念 #iOS
确实。想起杜叔叔那个招人帖子
https://fixupx.com/liseami1/status/1958362062645817494
确实。
https://fixupx.com/liseami1/status/1958362062645817494
赵纯想 (@liseami1): telegram : 世界上最好的UIKit黑魔法殿堂。一个UIKitUtils.m藏匿着一大堆私有API。
自定义毛玻璃:_UICustomBlurEffect 内部字段可调,半径、饱和度、暗角,完全可控。
PortalView: _UIPortalView 曝光,跨层级同步位置与变换。
CAFilter:直接实例化 gaussianBlur / luminanceToAlpha / colorInvert / monochrome。
内容遮罩:通过 KVC 设置 contentsSwizzle,切换 RGBA / AAAA。
https://github.com/TelegramMessenger/Telegram-iOS/blob/master/submodules/UIKitRuntimeUtils/Source/UIKitRuntimeUtils/UIKitUtils.m
🧵 Thread • FixupX
赵纯想 (@liseami1)
telegram : 世界上最好的UIKit黑魔法殿堂。一个UIKitUtils.m藏匿着一大堆私有API。
自定义毛玻璃:_UICustomBlurEffect 内部字段可调,半径、饱和度、暗角,完全可控。
PortalView: _UIPortalView 曝光,跨层级同步位置与变换。
CAFilter:直接实例化 gaussianBlur / luminanceToAlpha / colorInvert / monochrome。
内容遮罩:通过 KVC 设置 contentsSwizzle,切换…
自定义毛玻璃:_UICustomBlurEffect 内部字段可调,半径、饱和度、暗角,完全可控。
PortalView: _UIPortalView 曝光,跨层级同步位置与变换。
CAFilter:直接实例化 gaussianBlur / luminanceToAlpha / colorInvert / monochrome。
内容遮罩:通过 KVC 设置 contentsSwizzle,切换…
POLEBUG - WHAT ARE YOU THINKING?
聪明的 claude code 已经一去不复返了 😭😭😭 好想念一开始用 claude code 的效果啊啊啊
#折腾 #碎碎念 #插件 #浏览器插件 #开源
Moe Copy AI 又更了一点东西,现在能抓到更多网站结构了~试了一周还是蛮爽的,商店还在审核。(为什么这个点发啊我没救了)
• 新增了 Readability 抓取模式,用 Mozilla Firefox 阅读模式的核心算法 @mozilla/readability,也保留着原来的选择器模式。
• 新增全屏预览,预览抓取到的 Markdown 内容时支持全屏预览
Release 0.1.6
下一步想加个预设提示词管理切换的功能(
Moe Copy AI 又更了一点东西,现在能抓到更多网站结构了~试了一周还是蛮爽的,商店还在审核。
• 新增了 Readability 抓取模式,用 Mozilla Firefox 阅读模式的核心算法 @mozilla/readability,也保留着原来的选择器模式。
• 新增全屏预览,预览抓取到的 Markdown 内容时支持全屏预览
Release 0.1.6
下一步想加个预设提示词管理切换的功能(
GitHub
GitHub - yusixian/moe-copy-ai: ✨ 萌萌哒的 AI 网页数据提取助手 ✨
✨ 萌萌哒的 AI 网页数据提取助手 ✨. Contribute to yusixian/moe-copy-ai development by creating an account on GitHub.