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
（本篇完）
2025-07-31 16:12:55
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11801
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
去年年初有介绍HTML popover属性，详见“该使用原生popover属性模拟下拉了”一文。
可以说是弹出浮层最佳解决方案，自动显隐特性，外加顶层特性，非常香。
但是有一个问题，那就是一次最多只能有一个弹出层显示（如果不使用 showPopover() 方法手动设置的话），但是有些轻提示，仅仅是用做信息展示，可以无需关闭之前的弹出层，之前的popover属性能力就不够。
于是，从Chrome 133开始，popover属性新增了属性值hint，表示轻提示，显示的时候不会影响之前的弹出层。
一例胜千言。
我们开看一个hint值使用案例，HTML代码如下所示：
<button popovertarget="datalist">点击我 ▼</button> <div id="datalist" popover> <option>列表1</option> <option>列表2</option> </div> <!-- 轻提示 --> <button class="hint" onmouseover="hint.showPopover();" onmouseout="hint.hidePopover();" >?</button> <div id="hint" popover="hint">我是轻提示文字内容</div>
我们使用CSS锚点定位，让提示框的位置都跟随按钮(非必须)：
[popovertarget="datalist"] {
anchor-name: --button-anchor;
}
#datalist {
position-anchor: --button-anchor;
}
[popover] {
left: anchor(left);
top: calc(anchor(bottom) + 5px);
right: auto;
bottom: auto;
}
.hint {
anchor-name: --hint-anchor;
}
#hint {
background: #0009;
color: #fff;
position-anchor: --hint-anchor;
}
此时，我们点击第一个按钮，让列表显示，鼠标再经过第2个按钮的时候，第一个列表并未隐藏，如下截图所示：
如果<div id="hint" popover="hint">这段HTML代码是<div id="hint" popover>，那么鼠标hover问号按钮的时候，前面的下拉列表就会隐藏。
如下GIF录屏示意：
需要注意的是，如果点击行为，哪怕浮层设置的是popover="hint"，那么先前所有popover="auto"的浮层都会隐藏。
值hint适合用在鼠标悬停，focus/blur等事件中，或者直接JS触发的轻提示环境，类似于toast提示效果这种。
popover属性目前支持3个值：
hint值的出现算是补充了某一类交互场景的实现。
popover=hint 填补了轻量级提示与模态弹窗间的需求空白，尤其适合需非打断性辅助信息的场景。开发者可通过它减少传统工具提示库的依赖，但需注意渐进增强策略以兼容旧浏览器。
好了，就这些。
最后，如果你觉得本文内容还不错，看在我家宋玉长老的面子上，转发，分享，点赞！
😉😊😇
🥰😍😘
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11801
（本篇完）
