2026-06-01 22:54:42
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12109
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
CSS contrast-color()函数是专为无障碍访问设计的。
WCAG – Web Content Accessibility Guidelines（Web 内容无障碍指南）中有个概念叫做最小对比度（minimum contrast），意思是前景色和背景色的对比度一定不能小，否则色弱的用户会看不清楚文字，造成阅读障碍。
比方说很常见的，白底背景上千万不要是要颜色比较淡的灰色字。
实际上，由于淡灰色文字比较有设计感，广大的视觉设计师乐此不疲使用特别淡的灰色文字，实际上，这种设计是不友好的，我就遇到过公司老板级别的人反馈怎么文字都不见了，实际上是由于对比度太低，显示器没能很好渲染出来。
contrast-color()颜色函数可以根据提供的颜色，自动返回对比度最友好的颜色。
注意，说的是对比度最友好的颜色，而不是反相，这是有根本区别的。
contrast-color()返回的色值只能是白色white或者黑色black。
语法使用示意：
contrast-color(red) contrast-color(var(--backgroundColor))
眼见为实，下面的demo是实时渲染的，RSS订阅的文章应该是看不到效果的，可以访问原文体验：
请改变背景色：
其中，按钮背景色和文字颜色代码如下：
button {
background-color: var(--button-color, black);
color: contrast-color(var(--button-color, black));
}
可以看到，随着颜色的选择，文字颜色会自动匹配白色或者黑色，保证对比度都在一个合适的范围内。
而在之前，相关的实现需要大量的代码，已经巧妙使用颜色的边界特性才能实现。
看了下日期，啧啧，已经是8年前的文章了。
目前所有主流浏览器都已经支持了这个函数，如下截图所示：
可以麻溜的用起来啦，点个赞！
在中国，只要是与无障碍访问相关的前端特性，一定是无人问津的，contrast-color()也不例外，因为缺少强制的法律约束，全靠自觉，也就是所谓的工程师的追求。
追求？这东西早些年还很看重，如今已经很少听到这个词了。
就比方说抖音Web端的视频上传页面，里面的问题多如牛毛，改动是很勤快，没几个星期就能看到一些变化，结果呢，越改越差，无力吐槽，有时候真想自己上去帮忙搞定。
那个封面制作，一开始套用模板，文字可以自定义，现在完全不行，文字内容数量一旦不一致，丑死了；那渲染，还有AI书封生成，从来没成功过，一直在loading，然后下面的缩略图也无法拖动，生成速度也一言难尽。
这种水平，莫不是代码都是AI生成的？看不到一点追求！
扯远了，回到这里。
contrast-color()还是需要传递色值才能返回黑白，还是弱了点，如果就这种程度，我觉得以后很少会有前端人员使用它。
要是它可以自动识别背景，不仅是颜色，也可以是图片这些，然后自动配色，那倒是值得称赞一番。
比方说字幕颜色使用白色还是黑色，对吧，要是可以自动识别，这个函数就实用了。
眼下么，我觉得只能当做玩具使用了。
好了，懒得多扯淡了，感谢阅读，欢迎分享，么么哒。
😉😊😇
🥰😍😘
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12109
（本篇完）
2026-05-29 16:23:06
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12203
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
平时让一个输入框聚焦，我们可以这么设置：
input.focus();
默认情况下，控件元素通过focus()方法获取焦点，浏览器会通过滚动的方式让元素重定位到页面可视区域内。
但有时候，这种行为会影响体验，毕竟页面会突然跳一下。
如果不希望这种滚动行为触发，可以这么设置。
input.focus({
preventScroll: true
})
此特性已支持多年，我也多次在生产环境使用。
那么本文要介绍的focusVisible又是什么呢？
focusVisible可以控制元素获得焦点的时候，是否显示浏览器内置的outline轮廓效果。
先看一个案例，如下HTML代码：
<a href id="link">链接</a> <button onclick="link.focus()">点击我</button>
此时，点击按钮，链接是没有焦点效果的。
这在开发中其实是有用户体验的问题的，用户并不知道这个链接是否真的被聚焦了，除非有专门的CSS定义，例如：
:any-link:focus {
color: red;
}
效果示意：
不过针对每一个控件元素设置focus效果是啰嗦的，在一些对视觉要求不那么高的场合，通过focusVisible参数进行控制是最快捷的方法，例如：
<a href id="link">链接</a>
<button onclick="link.focus({focusVisible: true})">点击我</button>
点击按钮后的效果示意：
如果大家对自己手头的浏览器足够自信，也可以点击下面的按钮，亲自感受下聚焦后的轮廓效果。
当然，focusVisible也能用来关闭浏览器默认的轮廓效果。
例如下面的输入框获得焦点后，浏览器的发光轮廓是不会显示的。
<input id="input" type="text">
<button onclick="input.focus({focusVisible: false})">点击我</button>
一般与无障碍访问与用户体验相关的特性，在国内总是无人问津，因为缺少对应的法律法规约束。
所以focusVisible这个特性注定知者寥寥，加上其兼容性，我对其未来的应用程度表示并不乐观。
说实话，在AI时代，对AI模型的关注和研究，我已经落后于现在的年轻人了。
我不是做管理的，如果我带着一个团队，我会花很多时间思考这些模型和工具对团队生产力的赋能，因为那可以体现我的价值，或者说为数不多可以体验价值，或者至少让上级看到价值的地方。
虽说单纯的专业技术人员也能做这样的事情，但是，考虑到“上下左右”的现实障碍（这里写了不少，都删掉了，怕厂子的公关过来提醒），是很难推动的，所以很难让我投入大量的精力在这个上面。
作为一个纯专业立足的前端开发，究竟什么才是自己的核心竞争力，这个问题我其实一直在思考。
为什么会一直思考呢？
因为每次分享那些实用或不实用的前端技术，都会有人评论，现在都AI了，学这个还有什么用。
我的回答是：
如果我的水平比AI还要强，我实现的东西比AI实现的还要好，那我是不是不要担心被AI替代，这是不是我的核心竞争力！
人的精力是有限的，尤其到了我现在这个年纪，再像10年前那样，每天研究前端到凌晨1~2点，是不可能了，只能舍弃工具层面的关注与研究，继续把精力放在语言本身上。
那些好的，可能不稳定的特性，那些特别新的但是很高效的实现上。
比方说最近的项目使用scroll-state滚动容器查询：
@container excel-scroller scroll-state(scrolled: right) {
/* 第一列粘性定位启用的时候，出现右边框 */
:where(td, th):first-child {
border-right: 1px solid var(--ui-border);
}
}
AI绝对不会想到这么实现，为何？
一是训练的代码库还没有这样的的代码；二是AI为了项目稳定，一定会使用更加稳健的传统实现，虽然说最终也都能实现最终的效果，但是代码质量天差地别。
作为一个对兼容性要求不那么高的项目，AI生产的稳健代码并非是最好的实现，如果只是单纯使用AI生成一个能跑的东西，为何需要用你呢？换个更便宜的年轻人岂不更好。
不过，想要变得专业层面，至少某一个领域比AI强，还是很难的，而且越往后越难，这个之后的文章再碎碎念吧。
OK，就这样吧，感谢阅读，欢迎分享。
😉😊😇
🥰😍😘
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12203
（本篇完）
2026-05-25 16:41:37
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12196
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
text-align:match-parent声明的作用就是使用和父元素一样的对齐方式。
可仔细一想，这个属性值就很奇怪，text-align本身就具有继承特性，为何还要多此一举设计一个match-parent呢？
因为现实开发中存在一个极为罕见的使用场景。
且看案例：
<div class="box"> <p id="p">我的对齐是？</p> </div>
.box {
text-align: end;
}
此时，如果我们想要得知<p>元素的textAlign计算值，得到的结果会是 end。
console.log(getComputedStyle(p).textAlign); // 结果是 'end'
end? any problem?
这不很正常吗，不是理所当然的吗？
非也非也!
比方说下图所示的对称布局：
最简单高效的实现就是使用CSS逻辑属性，外加direction属性控制方向。
text-align:end就是逻辑属性。
下面问题来了，我们我希望知道布局列表中的元素是左对齐还是右对齐，会发现运行getComputedStyle(p).textAlign这行代码是无效的。
因为无论哪个方位，返回的都是end，而不是left或者right。
正是由于这样的场景存在，于是设计了match-parent。
比方说，我们把上面的CSS代码换成：
.box {
text-align: end;
p {
text-align: -webkit-match-parent;
text-align: match-parent;
}
}
此时，默认情况下，<p>元素的textAlign计算值就是right.
console.log(getComputedStyle(p).textAlign); // 结果是 'right'
如果此时<p>元素的上下文处于 direction: rtl 环境中，那么返回的textAlign计算值则回是 left。
这就是text-align:match-parent声明的唯一作用，可以返回当前元素精确对齐方向left/right，而不是含糊其辞的start/end。
direction属性本身就很少使用，毕竟属于CSS布局高级技巧。
加上需要获取textAlign计算值的场景本身就很小众。
所以，在实际生产环境需要用到match-parent的概率近乎是0.
可以说就是一个玩具特性，大家了解下有这么个东西就好了。
最后看下其兼容性，出乎意料，虽然作用鸡肋，但是兼容性却出奇的好，全都支持，就是Chrome浏览器还需要加-webkit-私有前缀。
装逼作用
如果抛开match-parent原本的作用，我们不是不可以在生产环境使用，不如这样，所有需要使用 text-align:inherit 代码的地方，全部替换成 text-align:match-parent，虽然渲染效果是一样的，但是装逼效果天差地别，同事一看你写的代码，顿时高山仰止，“望其项背”，爽！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12196
（本篇完）
2026-05-18 15:50:42
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12180
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
2018年的时候，分享过CSS改变光标颜色的caret-color属性，详见“CSS改变光标颜色caret-color简介及其它变色方法”一文。
现在，除了光标的颜色，光标的形状也能改变了，这个CSS属性就是caret-shape属性。
caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;
属性值bar的效果就是目前我们常见的效果，一根1像素的竖条条像小星星一样闪啊闪的。
这个不不放图。
block的光标效果是一个方块闪啊闪的，效果如下GIF动图：
当我们输入的字符会覆盖下一个字符的时候，就适合使用caret-shape:block块状光标。
underscore是下划线光标效果。GIF录屏效果参见：
当我们需要模仿打字机或下划线文本输入样式效果的时候，那就可以使用caret-shape:underscore下划线插入符号光标。
与caret-shape属性同时出现的还有个CSS属性，名为caret-animation，用来控制光标闪烁与否的。
语法如下：
/* 动感光波，闪闪闪 */ caret-animation: auto; /* 糟了，中了定身咒 */ caret-animation: manual;
当我们希望自定义光标闪烁效果的时候，就可以用到caret-animation:manual，例如下面这个案例，七色光标变色闪烁效果。
<input placeholder="focus me" class="custom-caret" />
CSS代码如下：
@keyframes custom-blink {
0%, 50% { caret-color: transparent; }
50%, 100% { caret-color: hsl(calc(3.6 * var(--seed)), 100%, 50%); }
}
@property --seed {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
@keyframes seed {
from { --seed: 0; }
to { --seed: 100; }
}
.custom-caret {
caret-animation: manual; /* 关闭默认的光标闪烁 */
caret-color: blue;
animation: custom-blink 1.5s infinite step-end, seed calc(1.5s * 7) both infinite linear;
}
眼见为实，您可以狠狠地点击这里：CSS自定义caret光标七色动画demo
由于光标比较细，其实效果没那么明显，如下GIF动图。
caret-color、caret-animation和caret-shape可以缩写为caret属性。
caret: red; caret: block; caret: manual; /* 两个值 */ caret: red manual; caret: block auto; caret: underscore orange; /* 三个值 */ caret: bar manual red; caret: block auto #00ff00;
由于三个属性的值类型都不一样，所以缩写属性数量任意，顺序也没有什么要求，一眼就看出什么意思。
不过日常开发不建议缩写，因为兼容性不一致。
caret-color很早就支持，但是你如果使用caret缩写属性设置光标颜色，本来支持的浏览器反而不支持。
所以，caret属性大家暂时先了解了解就可以了。
兼容性么，咳咳，暂时仅Chrome浏览器支持，还在这是个渐进增强特性，浏览器不支持，也就是默认效果，不影响在实际开发中的使用。
结语了，该说些什么呢。
现在年纪上去了，没有多少分享欲了。
算了，不扯淡了，就这样吧。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12180
（本篇完）
2026-05-11 11:53:06
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12177
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
特意看了下，这篇文章标题写好的时候，是4月9日，正好过去了一个月，终于排到了。
现在pretext在社区的讨论没有前段时间那么火了。
做前端开发这么多年，有一个心心念念的布局效果一直想要实现，那就是完全文字环绕效果。
CSS shapes布局可以实现一侧环绕，但是想要完整环绕，一直没有什么好的解决方案。
pretext的出现让我意识到有了比较好的解决方法了。
Pretext 是一个纯 JavaScript/TypeScript 库，用于多行文本测量和布局。它快速、准确，支持各种语言。
Pretext 避免了 DOM 测量的需求，实现了自己的文本测量逻辑。
这个库由 Cheng Lou 创建，通过 Canvas 测量文本宽度，然后使用纯数学运算进行布局。这样可以避免触发浏览器的重排操作，从而获得极高的性能。
使用 Pretext，你可以实现许多有趣的效果，比如文字环绕浮动元素、动态布局调整、以及各种创意排版效果。文本可以流畅地环绕图片或其他形状，创造出精美的视觉效果。
项目地址：https://github.com/chenglou/pretext
目前Star数已经是惊人的46.4K！
以下演示都是使用AI生成的，尼玛AI真的是越来越强了。
您可以狠狠地点击这里：pretext实现文字居中环绕图片demo
拖动图片，可以看到文字实时环绕图片的效果。
由于截屏录制的GIF体积有些大，我直接截个静态图给大家看看吧。
下面，我们将上述效果升级下，文字不再是环绕图片区域，而是环绕图片中的非透明图像轮廓，也是可以实现的。
您可以狠狠地点击这里：pretext实现文字居中环绕图片非透明区域demo
效果示意参见下面的截图：
可以看到，文字不再是围绕图片所占据的矩形区域环绕排版，而是围绕PNG图片的非透明像素部分进行环绕。
完整的实现代码demo页面上可见。
本文不谈语法，不谈具体细节，因为没必要。
要是几年前，我估计要花半天时间学习API，然后调试demo。
如今，AI，还不是最好的AI模型，已经可以巴拉巴拉把我的需求一口气实现，自己只需要再调整一些细节即可。
还学啥，有啥好学的，只需要知道有这么个东西就好了。
不管怎么说，心心念念的排版效果如今得见天颜，也算是了了一桩心愿。
最后，总结下我的五一节。
很简单，钓了5天的鱼，😄😄😄
给老板送了几年的温暖，现在钓鱼手艺越来越好了。
依次是：
218五小时，太仓晓渔园。128五小时，张家港林姐垂钓。常熟小飞鱼塘，99五小时。崇明三农，158三小时。上海东翔，138六小时。上海星河，180六小时。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12177
（本篇完）
