2025-09-05 11:08:44
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11847
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
Chrome 139浏览器除了新支持了 CSS if()函数（参见“CSS倒反天罡居然支持if()函数了”一文），还支持了期待已久的@function规则。
@function规则可以让我们自定义运算逻辑，比之前单纯的CSS var()变量要更加强大。
下面我们通过几个案例带大家快速了解下@function规则的用法和作用。
先看下面这段代码，是我实际项目中代码的截图，大家注意看红框框部分：
字符版如下：
.board-bar-x {
/* 略... */
--bottom: calc(var(--offset-bottom, 0px) + 15px + 0.25rem);
--bottom2: calc(var(--offset-bottom2, 0px) + 15px + 0.25rem);
--size: calc(20px + calc((var(--char-length) + 1) * 1ch));
--size2: calc(20px + calc((var(--char-length2) + 1) * 1ch));
}
实现功能是使用::before和::after伪元素绘制两条线。
在没有@function规则之前，当一个复杂计算需要多处使用的时候，我会定义专门的CSS变量进行简化，例如上面的--bottom和--bottom2，可即便如此，后面的计算逻辑我还是要一个一个罗列。
上面这句话有些人估计不明白，那我重新处理下，如果不使用CSS变量进行二次变量处理，那么实际的CSS代码会是这样（仅展示关键部分）：
.board-bar-x::before {
position: absolute;
bottom: calc(var(--offset-bottom, 0px) + 15px + 0.25rem);
padding-bottom: calc(var(--offset-bottom, 0px) + 15px + 0.25rem);
}
.board-bar-x::after {
position: absolute;
bottom: calc(var(--offset-bottom2, 0px) + 15px + 0.25rem);
padding-bottom: calc(var(--offset-bottom2, 0px) + 15px + 0.25rem);
}
会出现4个冗长的CSS属性值，使用CSS变量简化后，就会是这样：
.board-bar-x::before {
position: absolute;
bottom: var(--bottom);
padding-bottom: var(--bottom);
}
.board-bar-x::after {
position: absolute;
bottom: var(--bottom2);
padding-bottom: var(--bottom2);
}
但是，定义变量的那个地方，还是需要一一罗列：
.board-bar-x {
--bottom: calc(var(--offset-bottom, 0px) + 15px + 0.25rem);
--bottom2: calc(var(--offset-bottom2, 0px) + 15px + 0.25rem);
}
CSS @function就可以将这种罗列，也一并处理掉。代码示意：
@function --fn(--offset) {
result: calc(var(--offset, 0px) + 15px + 0.25rem)
}
.board-bar-x {
--bottom: --fn(var(--offset-bottom));
--bottom2: --fn(var(--offset-bottom2));
}
.board-bar-x::before {
position: absolute;
bottom: var(--bottom);
padding-bottom: var(--bottom);
}
.board-bar-x::after {
position: absolute;
bottom: var(--bottom2);
padding-bottom: var(--bottom2);
}
或者不再使用CSS变量过渡，直接一步到位。
@function --fn (--offset) {
result: calc(var(--offset, 0px) + 15px + 0.25rem)
}
.board-bar-x::before {
position: absolute;
bottom: --fn(var(--offset-bottom));
padding-bottom: --fn(var(--offset-bottom));
}
.board-bar-x::after {
position: absolute;
bottom: --fn(var(--offset-bottom2));
padding-bottom: --fn(var(--offset-bottom2));
}
是不是就容易理解多了？
CSS代码如下所示：
/* 返回当前值的负值 */
@function --negate(--value) {
result: calc(-1 * var(--value));
}
aside {
--size: 999em;
padding-bottom: var(--size);
margin-bottom: --negate(var(--size));
}
/* 在小于640px的屏幕上为侧边栏占用1fr的空间，在较大的屏幕上使用相对具体具体宽度值 */
@function --layout-sidebar(--sidebar-width: max(20ch, 20vw)) {
result: 1fr;
@media (width > 640px) {
result: var(--sidebar-width) auto;
}
}
.layout {
display: grid;
/*侧边栏宽度兜底20ch和20vw的较大计算值 */
grid-template-columns: --layout-sidebar();
}
实时效果如下所示（拖拽右下角的小按钮，改变宽度，看看布局有没有变化）：
示意代码：
@function --light-dark(--light, --dark) {
result: if(
style(--scheme: dark): var(--dark);
else: var(--light)
);
}
只要在body或者HTML元素上设置 style="--scheme: dark"，就会自动使用黑夜模式的变量。
CSS 的 @function 规则为样式表带来了真正的编程能力，允许你定义可重用的计算逻辑，让 CSS 代码更灵活、模块化且易于维护。
使用 @function 定义，result 返回结果，示意：
@function --fn-name(arg) {
result: ...
}
支持传递参数，并可设置默认值。
例如：
@function --border(--color: red) { ... }
支持声明参数类型（如 length, color, number, angle），增强健壮性。
函数内部可以调用其他函数，实现逻辑复用，或者使用嵌套其他规则，上面有案例。
总结一下 CSS @function 通过引入参数、返回值、类型检查和组合能力，让 CSS 拥有了更强大的抽象和复用能力。它是实现 “CSS 即设计系统” 理念的重要工具，能有效提升大型或动态项目的样式代码质量。
OK，以上就是本文的全部内容，如果你觉得还不错，欢迎转发，点赞，分享。
😉😊😇
🥰😍😘
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11847
（本篇完）
2025-08-29 16:20:18
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11844
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
任意HTML元素，设置hidden属性后，会隐藏自身（样式没有被重置的前提下）。
可能有些人并不知道，hidden属性还支持一个名为until-found值，他可以让内容隐藏，但是在特殊场景下也会显示。
这个特殊场景包括锚点锚定，或者浏览器层面的文字搜索匹配。
我们开看例子。
如下HTML代码：
<div class="container">
<a href="#zhangxinxu">显示作者名字</a>
<h5 class="target">
<p id="zhangxinxu" hidden="until-found">名字是张鑫旭</p>
</h5>
</div>
我们不妨扔一点样式美化下，至于什么样式不重要，总之，就有会如下所示的实时渲染效果：
此时，我们点击上面的链接文字，触发锚点跳转，就会发现，原本隐藏的<p>元素显示了。
就像下图这样：
如果是桌面端浏览器，试试按下Ctrl+F搜索，例如：
此时，当我们的搜索选项与hidden="until-found"里面的内容匹配的时候，这段内容就突然显示了，且高亮的颜色（橙色背景）和其他区域匹配的文字颜色（黄色背景）不同，如下截图所示：
until-found隐藏的元素还支持一个名为beforematch的事件，在该元素从隐藏变成显示之前的一瞬间执行。
还是上面的案例，我们给元素加个beforematch事件，让显示的时候，外面的容器边框颜色高亮，则可以这么处理：
const untilFound = document.getElementById("zhangxinxu");
untilFound.addEventListener('beforematch', () => {
untilFound.closest('div').style.borderColor = 'red';
});
实时测试效果如下（大胆点击链接，看看边框红了没有）：
hidden="until-found"隐藏和传统的hidden隐藏不同，后者是display:none隐藏，但是，前者使用的是content-visibility:hidden隐藏，这个隐藏在我的《CSS新世界》这本书中有介绍。
content-visibility:hidden只会隐藏内容，元素的边框、布局、背景都是保留的，想必visibility: hidden，其不会除非内容渲染，在频繁显隐交互的场景下有更高的性能。
所以，hidden="until-found"直接设置在内容元素上是无效的，例如保持内联水平的<span>元素上，等。
基于其“隐藏但可被发现”的特性，hidden=”until-found” 非常适合以下场景：
至于提高页面内容显隐的渲染性能，这个大家就不用考虑了，没有任何意义，1ms和2ms的差异有区别吗？没有区别，对吧。
Safari浏览器已经确定支持该特性，Chrome浏览器已经支持好几年了。
懒得结语
见上一篇文章。
本周钓货回头补上。
好了，就这样吧。
😉😊😇
🥰😍😘
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11844
（本篇完）
2025-08-26 18:39:29
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11791
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
先通过几个GIF或静态图看下CSS corner-shape属性可以实现怎样的图形表现效果。
CodePen Embed Fallback
CSS corner-shape（角形状）属性需要配合CSS border-radius圆角属性一起使用。
其语法如下：
corner-shape: round; /* 默认值 */ corner-shape: squircle; corner-shape: scoop; corner-shape: bevel; corner-shape: notch; corner-shape: square;
各个属性值的含义参见下面的释义：
看一下同样规则的边框和圆角，在不同的角形状参数的效果。
公共HTML和CSS代码：
<canvas></canvas>
canvas {
border: 8px solid deepskyblue;
border-radius: 50%;
zoom: 0.5;
/* corner-shape: xxx */
}
实时渲染效果如下：
勺形:
斜面：
内角（border-radius重置为40%，不然看不到）：
方形：
以上效果为实时渲染效果，建议将浏览器升级到Chrome 139版本以上。
我们可以指定不同方位不同的角形状，语法和border-radius类似，通过top、left、right、bottom等方位值。
例如：
.container {
border-radius: 40px;
corner-top-right-shape: scoop;
}
可生成下图所示的效果：
不同的圆角效果是可以无缝平滑过渡的（参见本文开头的实时动画效果）：
例如：
@keyframes shape {
from { corner-shape: round; }
to { corner-shape: scoop; }
}
corner-shape属性还支持使用superellipse(K)函数来自定义角的曲率，其中 K 值控制曲率强度。
例如，superellipse(1) 生成标准圆角，superellipse(4) 则更接近矩形，superellipse(0)是斜面，小于0则是内凹的形状（如下截图所示）。
对应CSS代码：
corner-shape: superellipse(-1.88);
这也是不同关键字之间可以无缝动画过渡的底层数学基础。
不同关键字效果对应的K值参见这个滑块效果的标识：
corner-shape是非常新的一个特性，目前仅Chrome 139以上版本才正式支持，我今天刚Chrome升级到这个版本。
结语
CSS的corner-shape属性是CSS背景与边框模块（Level 4）中引入的新特性，它通过扩展border-radius的功能，允许开发者自定义元素的角形状，而不仅限于传统的圆角效果，可以解决以往用 CSS 创建复杂形状时的一些痛点。
渔获展示
本周休假第一天的钓货，常熟欣欣钓场，158元5小时，大板鲫小爆护：
第二天一天的钓货，2条大草鱼，5条鳊鱼和10斤鲤鱼，主要在张家港钓的，总共钓费300多，钓了4个鱼塘，还是上海钓鱼便宜。
也欢迎关注我的钓鱼抖音号：
参考文章
😉😊😇
🥰😍😘
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11791
（本篇完）
2025-08-15 18:15:51
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11807
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
在学习本文的scroll-state容器滚动查询之前，大家需要先了解CSS @container容器查询。
详见我之前的文章：“介绍2022年最期待的CSS container容器查询”。
这东西可以检测容器尺寸，并进行响应的布局调整，很强大。
现在，@container容器查询，再次进化，可以识别滚动边缘，让CSS的交互能力更上一层楼。
学习一个新特性最快的方法就是案例。
需求这样的，一段文本，需要用户滚动到底部，提交按钮的禁用样式才会取消。
则我们可以这么处理，HTML如下所示：
<div class="container">
<p>作者</p>
<p>zhangxinxu</p>
...
<p>作者</p>
<p>zhangxinxu</p>
<footer>
<button>提交</button>
</footer>
</div>
CSS如下所示（已省略部分无关键要的代码）：
.container {
height: 300px;
border: 1px solid;
container-type: scroll-state;
overflow: auto;
/* 底部黏性定位 */
footer {
background: #f6f6f6;
position: sticky;
bottom: 0;
text-align: center;
}
button {
width: 100px;
height: 32px;
border-radius: 12px;
background-color: crimson;
color: white;
cursor: pointer;
}
}
@container scroll-state(scrollable: bottom) {
/* 如果容器可以滚动，则按钮样式禁用 */
button {
filter: grayscale(1);
opacity: .35;
}
}
实时渲染效果如下所示（Chrome 133+ 浏览器有效果）：
作者
zhangxinxu
作者
zhangxinxu
作者
zhangxinxu
作者
zhangxinxu
作者
zhangxinxu
作者
zhangxinxu
作者
zhangxinxu
或者参考下面的GIF动图演示效果：
第一步
给滚动容器设置 container-type: scroll-state CSS声明。
第二步
使用@container容器查询判断滚动容器是否可以上下滚动，并进行对应的CSS样式设置。
就这么简单！
scroll-state()查询函数支持下面三种类型：
当前容器是否可以可滚动（滚动边缘）。
是否滚动到Snap边缘
查询位置值为sticky的容器是否粘在其滚动容器祖先的边缘。
我觉得这三种都还是挺实用的。
scrollable是最常用的，我们使用scrollable参数介绍下方位值。
scroll-state(scrollable: value)
其中，value可以是（示意三种类型）：
top: 上边缘。inline-end: 内联方向边缘，默认是水平方向。y: 垂直方向边缘。我们用的比较多的就是 top 和 bottom 了。
目前滚动容器查询Chrome浏览器支持，兼容性如下图所示：
目前还无法大规模使用。
—-
上周末继续探钓。
周六，先是奉贤龙泉钓场，混养塘新塘新水，150元6小时，前三个小时钓法不对路，等于空军，后面三个小时散炮打浮，钓了接近30斤鱼，其中三条花鲢（当场回塘），成功挽尊。
周日去了浦东航头镇的航盛钓场，138元6小时，钓下来都是工程鲫，全场就我一个人，结果口还不错，提前收杆的情况下47斤，成功上岸盘老板。
😉😊😇
🥰😍😘
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11807
（本篇完）
2025-08-07 20:23:26
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11804
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
sibling-index()在多个有规律子元素构建的图形或动画效果的场景下非常实用。
我们来看一个《CSS新世界》这本书的一个案例，演示下如何使用sibling-index()函数简化我们的实现。
先看原来的实现，可以访问这个地址：https://demo.cssworld.cn/new/5/4-3.php
所要实现的就是音波播放时候的波形上下运动的效果效果，静态截图效果如下所示：
之前的实现代码如下所示，HTML部分：
<div class="loading">
<i></i><i></i><i></i><i></i>
</div>
CSS代码：
.loading i {
display: inline-block;
border-left: 2px solid deepskyblue;
height: 2px;
animation: scaleUp 4s linear infinite alternate;
margin: 0 1px;
}
.loading i:nth-child(2) {
animation-delay: -1s;
}
.loading i:nth-child(3) {
animation-delay: -2s;
}
.loading i:nth-child(4) {
animation-delay: -3s;
}
@keyframes scaleUp {
to { transform: scaleY(10); }
}
使用的:nth-child伪类与一个一个匹配，现在有了sibling-index()函数，我们的代码就简单多了。
这样：
.loading i {
display: inline-block;
border-left: 2px solid deepskyblue;
height: 2px;
animation: scaleUp 1s linear infinite alternate;
margin: 0 1px;
animation-delay: calc(-0.25s * sibling-index());
}
@keyframes scaleUp {
to { transform: scaleY(10); }
}
看，代码是不是简单了很多？
实时渲染效果如下图所示，目前Chrome 138+以上浏览器有效果。
sibling-count()函数可以返回当前子元素的数量，用在父元素上。
还是通过案例了解这个函数的作用吧。
这里最近我做的一个需求，要求列表数量无论多少，都是两行展示（如下图所示），有了sibling-count()函数，我们就可以精确制定列数，来实现我们想要的效果。
如果是垂直流布局，我们可以使用Grid布局和grid-auto-flow属性（参见“CSS grid-auto-flow深入理解”一文）实现。
假设HTML代码为：
<zxx-grid> <zxx-item>格子1</zxx-item> <zxx-item>格子2</zxx-item> ... <zxx-item>格子8</zxx-item> <zxx-item>格子9</zxx-item> </zxx-grid>
则CSS代码如下所示，可以保证永远两行：
zxx-grid {
display: grid;
border: solid;
overflow: auto;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
}
zxx-item {
width: 100px;
outline: 1px dotted;
padding: .5rem;
}
效果如下图所示：
可若是水平流，无论数量多少，都是两行高度，那么sibling-count()函数就特别实用。
实现代码如下所示：
zxx-grid {
display: grid;
border: solid;
overflow: auto;
grid-template-columns: repeat(round(up, calc(sibling-count() / 2)), auto);
}
zxx-item {
width: 100px;
outline: 1px dotted;
padding: .5rem;
}
结果……结果实现的效果并不是如预期那样……怪了，这可是按照MDN文档的案例写的呀！
🤔🤔
🤔🤔
后来一研究，才发现，MDN文档提供的例子是错误的！
sibling-count()函数是用在子元素上的，等同于 element.parentElement.children.length。
嗯……那这个函数其实没多少好玩的，估计作用也就是sibling-index()函数相减，计算反向索引值。
或者等宽布局用一用：
ul li {
width: calc(100% / sibling-count());
}
目前这两个函数Chrome 138+支持，如下图所示：
sibling-count()和sibling-index()的值可以使用CSS数学函数计算，如calc()、round()函数等。
还能使用content属性直接明文显示数量值。
例如：
ul li::before {
content: counter(i) "/" counter(N);
counter-reset: N sibling-count() i sibling-index()
}
好吧，毕竟兼容性还不是很好，就不说太多了。
继续宋玉长老，看在宋长老的面子上，欢迎点赞，转发！
😉😊😇
🥰😍😘
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11804
（本篇完）
