各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊一个CSS新玩意儿——counter-set。这玩意儿啊，说白了，就是让你能更任性地控制列表编号，想从哪儿开始就从哪儿开始，想设成啥数就设成啥数，简直是列表界的“乾坤大挪移”。 一、为啥要搞个counter-set？ 在没counter-set之前，咱们用CSS计数器来做列表编号，一般都是这么玩的： ol { counter-reset: my-counter; /* 初始化计数器 */ } li::before { counter-increment: my-counter; /* 每次递增计数器 */ content: counter(my-counter) “. “; /* 显示计数器值 */ } 这段代码很简单，就是定义了一个名为my-counter的计数器，然后在每个<li>元素前面显示计数器的值，并且每次递增。 但是！问题来了。如果我们想让某个列表项的编号直接从一个特定的值开始，或者想在列表的中间突然跳到另一个编号，那可就麻烦了。以前的做法要么是改HTML结构，要么是用JavaScript，总之就是不优雅。 …
CSS `font-synthesis` `weight` / `style` / `small-caps` 的浏览器实现细节
各位观众老爷，大家好！今天咱们来聊聊CSS font-synthesis 这个有点冷门但关键时刻能救命的属性，特别是它的 weight, style, 和 small-caps 这三个小伙伴。这玩意儿涉及到浏览器如何“脑补”缺失的字体变体，属于底层实现细节，了解一下绝对不亏。 开场白：字体家族的那些事儿 话说，咱们在网页上显示文字，得先有字体吧？字体家族就像一个大家庭，里面有不同的成员，比如“微软雅黑”这个大家族，可能包含“微软雅黑 Regular（常规）”，“微软雅黑 Bold（加粗）”，“微软雅黑 Italic（斜体）”等等。 问题来了，如果设计师想要用一个特定的字体变体（比如“微软雅黑 ExtraBold Italic”），但是用户的电脑上偏偏没有这个变体，那怎么办？难道显示一片空白？ 这时候，font-synthesis 就登场了！它告诉浏览器，如果找不到完全匹配的字体变体，能不能尝试“合成”一个出来。 font-synthesis 的语法 font-synthesis 属性可以接受以下值： none: 禁用所有字体的合成。浏览器必须完全匹配字体，否则就用默认字体显示。 wei …
继续阅读“CSS `font-synthesis` `weight` / `style` / `small-caps` 的浏览器实现细节”
CSS `initial-letter` `align-to-line-grid` (提案)：首字下沉与基线网格对齐
各位前端小伙伴们，早上好/下午好/晚上好！我是今天的主讲人，很高兴能和大家一起聊聊一个CSS里比较冷门但又挺有意思的属性——initial-letter，以及一个与之相关的提案 align-to-line-grid。 这俩家伙，一个负责首字下沉，另一个负责让首字下沉的时候还能规规矩矩地对齐网格线。听起来是不是感觉有点像强迫症患者的福音？别急，我们慢慢展开。 第一部分：initial-letter——首字下沉的艺术家 顾名思义，initial-letter就是用来设置首字母样式的。它接收两个值： initial-letter: <number> <integer>? <number>：首字母占据的行数。比如，initial-letter: 2，首字母就占两行的高度。 <integer> (可选)：首字母沉降的行数。这个值可以理解为首字母基线距离第一行基线的距离。如果省略，浏览器会自己算一个合适的值。 我们先来个简单的例子： <p class=”drop-cap”> 这是一个段落，我们来做个首字下沉的效果。 </p> …
继续阅读“CSS `initial-letter` `align-to-line-grid` (提案)：首字下沉与基线网格对齐”
CSS `text-spacing` `trim-start` / `trim-end` (提案) 标点挤压与对齐
各位观众老爷，大家好！今天咱们来聊聊一个CSS界的新鲜玩意儿，它叫text-spacing，以及它里面两个小弟trim-start和trim-end。这哥仨儿要是用好了，能让你的文本排版瞬间精致起来，尤其是处理中文、日文、韩文（CJK）文本的时候，效果杠杠的。咱们废话不多说，直接上干货！ Part 1: 啥是text-spacing？ 简单来说，text-spacing属性就是用来控制文本字符间距的。但是，它可不是简单的letter-spacing的替代品。letter-spacing是粗暴地在每个字母之间插入固定间距，而text-spacing更加智能，它会根据字符的类型，进行精细化的间距调整。 text-spacing属性可以设置一个或者两个值。一个值的时候，同时影响trim-start和trim-end。两个值的时候，第一个值影响trim-start，第二个值影响trim-end。 目前，text-spacing还处于提案阶段，所以浏览器支持情况可能不太好。但是，了解一下总是没错的，说不定哪天就普及了呢！ Part 2: trim-start和trim-end：标点符号挤压的利器 …
继续阅读“CSS `text-spacing` `trim-start` / `trim-end` (提案) 标点挤压与对齐”
CSS `Transform Functions` `matrix()` / `matrix3d()` 的手写与解析
各位靓仔靓女，早上好！今天我们来聊聊CSS transform 里的 matrix() 和 matrix3d() 这两个看起来有点吓人的函数。别怕，其实它们就是把我们常用的变换操作，比如平移、旋转、缩放、倾斜，一股脑儿打包成一个矩阵而已。理解了矩阵的本质，你就掌握了操控网页元素的“变形金刚”的钥匙！ 开场白：矩阵的魅力 你可能在数学课上见过矩阵，一堆数字排列成方阵。当时你可能觉得它跟你的生活八竿子打不着，但是，在图形学里，矩阵可是个宝贝。它可以表示各种变换，而且最酷的是，多个变换可以合并成一个矩阵，一次性应用到元素上。是不是有点像“乾坤大挪移”？ 第一部分：2D 矩阵 matrix() matrix(a, b, c, d, tx, ty) 是 CSS 中 2D 变换的矩阵表示。这六个参数代表着一个 3×3 的矩阵（虽然实际上你只需要写 6 个数字）： [ a c tx ] [ b d ty ] [ 0 0 1 ] 这个矩阵会作用于元素的每个像素点 (x, y)，计算公式如下： x’ = a*x + c*y + tx y’ = b*x + d*y + t …
继续阅读“CSS `Transform Functions` `matrix()` / `matrix3d()` 的手写与解析”
CSS `Offset Path` 与 `Path()` 函数结合，实现非线性运动动画
各位观众老爷，大家好！今天咱们来聊聊 CSS 里一个挺有意思的东西：offset-path 结合 path() 函数，让你的动画不再走寻常路，玩出点花样来。 开场白：告别直线，拥抱曲线 咱们平时用 CSS 做动画，是不是经常让元素从左往右，从上往下，或者斜着飞过去？看起来是不是有点单调？就像每天吃炒饭，总得换个口味不是？offset-path 就是来拯救你的，它能让你的元素沿着你指定的路径运动，可以是曲线，可以是波浪线，甚至可以是你想画的任何形状！ 第一部分：offset-path 是个啥？ offset-path，顾名思义，就是偏移路径。它定义了一个元素在动画过程中应该遵循的路径。你可以把它想象成一条跑道，你的元素就是赛车，它会沿着这条跑道一路狂奔。 offset-path 的取值有很多种，但今天咱们重点讲的是 path() 函数。 第二部分：path() 函数：路径的魔法棒 path() 函数允许你使用 SVG 路径语法来定义你的路径。如果你对 SVG 不太熟悉，别担心，咱们会一步一步来。 SVG 路径语法速成班 SVG 路径语法是一系列的命令和坐标，用来描述一个形状。几个常用的命 …
CSS `CSS Shapes` (`shape-outside`, `shape-margin`)：文本环绕自定义形状
各位观众，掌声在哪里！欢迎来到今天的CSS魔法课堂，我是你们的老朋友，bug制造大师——但这次保证不制造bug，只教你如何用CSS让文字乖乖听话，围着你的奇形怪状“跳舞”。今天的主题是：CSS Shapes，让文字“环绕”你的想象力！ 开场白：告别死板的矩形世界 你有没有想过，为什么网页上的文字总是那么规规矩矩地挤在矩形框里？难道它们就不能有点个性，像小鸟一样自由地环绕着图片飞翔吗？答案是：可以！只要你有CSS Shapes这门“独门秘籍”。 CSS Shapes 是一组CSS属性，允许你定义一个非矩形的形状，让行内元素（比如文字）环绕它。想象一下，文字像藤蔓一样沿着一个圆形、椭圆形，甚至是自定义的复杂图形生长，是不是很酷？ 第一章：Shape-Outside：定义你的“环绕轨道” shape-outside 是CSS Shapes的核心属性，它定义了文字环绕的形状。它的取值有很多种，我们一个个来看： none： 这是默认值，文字就像没看到形状一样，直接穿过去，相当于没用CSS Shapes。 .element { width: 200px; height: 200px; float: …
继续阅读“CSS `CSS Shapes` (`shape-outside`, `shape-margin`)：文本环绕自定义形状”
CSS `Motion Paths` `offset-distance` / `offset-rotate` 路径动画的精确控制
嘿，各位观众老爷们，晚上好！我是你们的老朋友，今天咱们来聊聊CSS Motion Paths 里那些让人又爱又恨的 offset-distance 和 offset-rotate，保证让你们听完之后，也能像我一样，玩转路径动画，让你的网页动起来！ 一、什么是 Motion Path？ 首先，咱们得搞清楚啥是 Motion Path。简单来说，它就是让元素沿着你指定的路径移动。就像小火车沿着铁轨跑，只不过铁轨是咱们用CSS画出来的。 二、主角登场：offset-distance 和 offset-rotate 现在，咱们的主角要登场了，那就是 offset-distance 和 offset-rotate。 offset-distance: 这位老兄，负责控制元素在路径上的位置。你可以把它想象成一个进度条，0% 代表路径的起点，100% 代表路径的终点。 offset-rotate: 这位老弟，负责控制元素在移动过程中旋转的角度。它决定了元素是跟随路径的切线方向旋转，还是保持一个固定的方向。 三、基本用法：让元素跑起来！ 咱们先来个简单的例子，让一个 div 沿着一个圆形路径移动。 &l …
继续阅读“CSS `Motion Paths` `offset-distance` / `offset-rotate` 路径动画的精确控制”
CSS `CSS Typed OM` 操作 `Layout Worklet` `Constraints` (`min`, `max`)
各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊CSS Typed OM这家伙，以及它如何跟Layout Worklet狼狈为奸，哦不，珠联璧合，再扯上Constraints（min和max）这俩活宝。 咱们争取把这盘菜炒得既有技术深度，又通俗易懂，让各位吃得津津有味！ 一、CSS Typed OM：告别字符串，拥抱类型！ 很久很久以前，在CSS的世界里，我们操作样式都是这样的： const element = document.getElementById(‘myElement’); element.style.width = ‘100px’; element.style.padding = ’20px’; const width = element.style.width; // width是字符串 “100px” 看到没？全是字符串！这就意味着，浏览器要不停地解析字符串，转换成数值，进行计算，再转换回字符串。这效率简直是蜗牛爬树！ CSS Typed OM（CSS类型化对象模型）就是来拯救世界的！它引入了带类型的对象来表示CSS属性值。比如： const element = …
继续阅读“CSS `CSS Typed OM` 操作 `Layout Worklet` `Constraints` (`min`, `max`)”
CSS `Grid` `subgrid` 嵌套多层网格的对齐约束传递
各位亲爱的网格控们， 今天咱们来聊聊 CSS Grid 的一个稍微有点烧脑，但又非常酷炫的特性：subgrid，以及它在多层嵌套网格中如何传递对齐约束。准备好迎接这场关于网格的奇妙冒险了吗？ 系好安全带，发车咯！ 开场白：Grid 的世界观 首先，我们要明确一点：CSS Grid 布局是一个强大的二维布局系统。它允许我们将页面划分为行和列，然后在这些网格单元格中放置内容。subgrid 则是 Grid 的一个扩展特性，允许一个网格项（grid item）本身也成为一个网格，并能继承父网格的行和列定义。 subgrid：网格中的网格，套娃的艺术 想象一下俄罗斯套娃，一个套着一个。subgrid 就像这样，允许你在一个网格单元格里再嵌套一个网格，并且这个子网格可以和父网格共享行列的定义。这听起来是不是有点绕？没关系，咱们用代码说话。 最简单的 subgrid 示例 <div class=”grid-container”> <div class=”grid-item”> <div class=”subgrid-container”> <div cla …