byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11736本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、告别path函数clip-path的path()函数可以传入SVG路径，从而实现元素的剪裁效果，比方说SVG小图标。例如：clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z");我多年前，我去，看了下，已经5年了，2020年的时候，有基于路径剪裁，研究了下“clipPath Sprites小图标技术”，还制作了配套的转换工具。但是最后实践下来，这个技术无人问津，包括我自己也不使用，原因就在于尺寸控制太麻烦。目前主流就是两种，一种是SVG图标元素直接内容，一种是CSS背景转移使用遮罩实现。这两种技术尺寸控制都非常方便，前者直接CSS尺寸设置，后者通过background-size等属性进行设置。path()函数的尺寸问题使用path()函数，或使用url()函数执行SVG元素的元素，都有尺寸无法自适应的问题。因为SVG路径里面的数值都是固定的像素px大小，在SVG元素中，这些大小与SVG外部尺寸关联，不会有问题，但是，放在CSS图像中，那就问题大了。例如，Font Awesom ...继续阅读 (4)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11717本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、前文回顾，balance属性值两年前有介绍过text-wrap:balance的作用，详见“5分钟快速了解text-wrap:balance的作用”此文。这个声明还是挺好用的，特别适合用在可换行的水平列表排列上。比方说过去，点赞头像这种布局，就可能第一行很多，第二行很少：使用text-wrap:balance之后，可以让两行的数量接近，布局效果很好很多。现在text-wrap又支持了两个新的属性值，pretty和stable。二、值pretty和stable的作用1. text-wrap:pretty按照MDN上的说法，text-wrap:pretty声明和text-wrap:wrap是一样的，区别在于text-wrap:pretty更注重排版，而非性能，也就是wrap的算法速度更快。所以我就很好奇，既然pretty和wrap效果一样，性能还更差，那为何还要设计出来呢？后来查了个资料，终于明白pretty和wrap的差异了，text-wrap:pretty可以避免最后一行过短。MDN页面的demo我通过添加文字，让最后一行只露出一个单词，终于看到了 ...继续阅读 (10)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11727本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。先回答题目抛出的问题，一句话：::scroll-button可以自定义上下或左右滚动按钮，::scroll-marker可以自定义切换按钮，用在CSS Scroll Snap交互场景下，以便实现完整的Carousel，Slider等交互效果。一、一反常态，先上案例先看::scroll-button()伪元素使用场景，可以模拟Scroll Snap上一项和下一项切换展示效果。您可以狠狠地点击这里：CSS ::scroll-button实现slide左右切换demo可以看到图片slider左右有切换按钮，点击的时候，图片就会左右滑动，非常的流畅，整个交互过程没有任何JS的参与。如下MP4录屏所示（不动点击播放）：其中还使用了锚点定位技术，有兴趣的可以参见“全新的CSS Anchor Positioning锚点定位API”这篇文章。核心代码其中，HTML结构比较简单：CSS核心代码如下所示（完整代码访问demo获取）：zxx-slide { overflow: auto; scrollbar-width: none; overscroll-beh ...继续阅读 (14)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11717本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、总算有点眉目了PageSwapEvent事件是一个新支持的全局事件，其兼容性如下：目前Safari和Chrome均支持此事件类型。乍一看，这个事件与页面选项卡切换相关，对吧，Swap就是交换的意思，但是，如果你在页面中写下类似这样的测试代码，是看不到任何效果的。window.addEventListener("pageswap", (event) => { console.log(event); });怎么回事，难道这个事件不是这样执行的？对，没错，不是这样执行的。这个事件必须与页面级可视动画View Transitions API一同使用才有效果。不知大家阅读过之前这篇热文没有：“页面级可视动画View Transitions API初体验”其中展示了一个案例，就是页面A调整到页面B（直接刷新的那种跳转），也是可以有transition过渡效果的。这里有演示页面，您可以狠狠地点击这里：传统跳转页面变得单页一样滑来滑去demo而JS PageSwapEvent事件就是为了这个交互场景而设计的。二、PageSwap事件语法与作用如果我们的Web页 ...继续阅读 (16)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11709本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、真的是有生之年系列说实话，CSS attr()全属性支持这个特性我等了六七年至少有了。之前还为其写了个Polyfill工具：“Polyfill吊炸天的CSS attr()新语法”本来以为这辈子都不会看到浏览器对其进行支持了。万万没想到，Chrome133版本开始居然支持了，它居然支持了。在过去，attr()函数只能用在content属性中，现在所有的CSS属性都支持，而且语法更加丰富，某种程度上，可以颠覆现有的前端开发习惯，一点也不夸张，二、CSS代码减半，属性为王有了attr()函数的全支持，那么类似tailwind 的原子类CSS框架都可以退出历史舞台了，因为浏览器原生支持了，相对于回到了过去所有CSS属性都HTML属性设置的年代。于是，重复样式类名，非重复样式HTML属性外加一点点CSS，开发效率up，开发代码down。例如之前调整元素之间的间距，可能是这样的CSS原子类：.m0 { margin: 0; } .ml0 { margin-left: 0; } .ml1 { margin-left: .25rem; } .ml2 { margi ...继续阅读 (21)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11700本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、直接正题-valueAsNumber我也是最近才知道，原来DOM对象获取属性值，不是都是字符串类型，还可以是数值类型。已知输入框元素：平常我们获取输入框的值都是使用number.value获取的，但是这个属性的返回值是个字符串。其实现在浏览器支持直接返回数值类型的，使用number.valueAsNumber即可。实地演示眼见为实，我们实地测试下，例如typeof下number.valueAsNumber的返回值类型，看看返回的是string还是number.output.textContent = typeof number.valueAsNumber;比方说有下面一个数值输入框：valueAsNumber值类型是？结果是：?点击上面的按钮，可以看到输出的结果是’number’。如果是普通输入框？我们不妨拿元素测试下，测试代码如下：10点击我结果是undefined。说明valueAsNumber属性返回数值不能是普通的输入框元素。二、valueAsDate属性类似除了valueAsNumber，还有valueAsDate ...继续阅读 (17)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11689本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、前言CSSanimation-composition属性其实出来有一段时间了，2年多，见下面的附图，之前有见人分享过，最近有人在上一篇文章评论区提过，才想起了他，决定写篇文章简单记录下。这个属性可以设置CSS动画效果再执行的时候，相关的CSS属性值是替换、直接相加还是计算累积。二、animation-composition语法和案例其语法如下所示：/* 三个动画值 */ animation-composition: replace; animation-composition: add; animation-composition: accumulate; /* 多个动画 */ animation-composition: replace, add; animation-composition: add, accumulate; animation-composition: replace, add, accumulate;这里出现了3个值replace,add,accumulate就是animation-composition支持的几个关键字值 ...继续阅读 (21)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11624本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、兼容性已经很OK啦最近已经在正式项目中使用scale, rotate, translate属性了（注意，没有skew属性），很赞，毕竟这几个特性已经支持4年多了。二、transform实现变换的问题问题1，计算复杂当多种变换参杂在一起的时候，就需要更多的理解成本，比方说下面的例子，transform变换类型的顺序不同，渲染结果也会不同。CSS 代码如下所示，位移旋转同时变换：.circle { width: 160px; height: 80px; background: skyblue; } .circle1 { transform: rotate(30deg) translateX(100px) scale(1.5); } .circle2 { transform: scale(1.5) translateX(100px) rotate(30deg); }最终效果如下截图所示，渲染位置并不一样：问题2 动画冲突比方说一个toast提示效果，使用了transform属性实现的水平居中定位，CSS代码示意：.toast { po ...继续阅读 (19)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11624本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、光速有多快？HTML元素新支持了一个名为shadowrootmode的属性，其兼容性如下所示：shadowrootmode作用当我们在Web Components组件开发的时候，声明组件的Shadow DOM模式是open，那么我们使用类似getHTML()方法获取ShadowRoots代码的时候，就会看到这个属性，例如。注意，开发者自己在元素上设置这个属性是没用的。所以，从某种意义上讲，shadowrootmode属性就是个可看不可玩的属性。上面的截图还同时出现了一个名为shadowrootserializable的属性，这个也是元素新支持的属性。二、光速来不及了，音速了解元素完整新增4个属性为：shadowRootClonable 标示可复制状态shadowRootDelegatesFocus 标示聚焦委托状态（子元素点击，ShadowRoot获得焦点）shadowRootMode 标示开放状态shadowRootSerializable 标示序列化状态和shadowrootmode属性一个调调，都与使用attachShadow()方法创建Sh ...继续阅读 (18)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11622本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。一、其实是3个方法Web前端开发中，下面这3个方法几乎是同一时间支持的，注意措辞，是几乎同一时间实际上还是有细微的差别的。哪3个方法呢，分别是：getHTML()返回元素的innerHTML。setHTMLUnsafe()设置元素的innerHTML。parseHTMLUnsafe()解析字符串为HTML。这里有一个奇怪的点，那就是设置innerHTML的方法是setHTMLUnsafe()，而不是setHTML()，并不是说没有setHTML()方法，而是此方法浏览器目前都还没有支持，且根据我的判断，以后很长一段时间也不会支持。这其实有些奇怪，按照道理讲，setHTML()方法自带过滤XSS之类的攻击代码，更加安全，更加支持才对，我猜测，可能此方法和目前浏览器已知的API实现逻辑并无共性，反而会带来未知的风险和困扰。所以目前浏览器支持的是setHTMLUnsafe()方法。二、getHTML()和innerHTML的区别根据文档的说道，Element.getHTML()方法和Element.innerHTML是等同的，除非需要获取序列化的Shadow ...继续阅读 (21)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11620本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、caretPositionFromPoint特性的语法和作用caretPositionFromPoint是浏览器支持不久的一个新特性，可以基于当前的光标位置，返回光标所对应元素的位置信息，在之前，此特性使用的是非标准的document.caretRangeFromPoint()方法实现的。caretPositionFromPoint()方法和elementsFromPoint()方法的区别在于，前者返回节点及其偏移、尺寸等信息，而后者返回元素。比方说有一段元素文字描述信息，点击这段描述的某个文字，caretPositionFromPoint()方法可以返回精确的文本节点以及点击位置的字符偏移值，而elementsFromPoint()方法只能返回当前元素。作用caretPositionFromPoint()的作用场景比较小众，一般用在分词分句这种交互场景中。例如制作视频封面的时候，书封标题的文字需要中断，此时，就可以直接点击实现。语法语法如下所示：const range = document.caretPositionFromPoint(x, ...继续阅读 (19)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11618本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、EditContext API的作用和设计背景JS EditContext API可以用来实现比较高级的Web输入编辑功能，包括控制更精细，反应更灵敏，和输入法配合更完美等。目前我们实现内容输入与编辑多是借用和元素，如果有富文本编辑内容（常见的文章发布编辑器），则是借助contenteditable属性，或者使用CSS-webkit-user-modify属性。但是，以contenteditable属性举例，其自带的很多内置行为在高级开发的时候是不需要的。举几个例子，有序或无需列表在起始位置按下Backspace删除，默认行为是当前列表删除，同时内容和上一个列表合并，但往往我们希望的是取消列表状态。Tab键之后二级缩进而不是创建Tab空格。链接文本后面换行或输入空格，自动超链接。换行使用而不是div。内容inline-block或inline-flex之后需要作为整体，光标可以定位在后面，但是不能在里面。这些内置行为均无法满足。以及，一些开发场景需要使用Canvas做图形编辑器，例如，B站或者抖音视频上传时候封面的DIY，其中就有canvas中 ...继续阅读 (26)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11527本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。介绍一个前端新特性，CSSfont-size-adjust属性，语法还有些小复杂，研究了下，怎么说呢，非常细节的一个CSS属性，设计的初衷是解决一个小众的问题场景。一、不同字体下的字形大小问题我们给一段文字设置同样大小的字号，要是字体的类型不同，那么呈现的大小就会有明显的不同。例如，中文字体中的楷体就比雅黑和苹方字体显得小，英文字体中的Times字体就比Verdana字体显得小。为了让整体字体下的视觉表现接近，于是就设计了font-size-adjust这个CSS属性，可以指定字体的尺寸。参见下面的代码和截图示意：中文字体我是中文内容，都是16px，最终的表现为？我是中文内容，都是16px，最终的表现为？明明都是16px，结果楷体的字形大小小了一圈：英文也是类似的，衬线字体看起来都小了一圈。英文字体Welcome to support my new book - HTML is not simpleWelcome to support my new book - HTML is not simple尤其英文，字体不同，其占据的宽度大小区别很大，这就 ...继续阅读 (17)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11522本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。继续介绍前端前沿新特性，今天讲的是Set或者类似Set的数据新支持的若干方法，主要是交集、合集以及差异判定相关，API较多，一个一个来。一、intersection交集单词’intersection’就是交叉，交集的意思。用数学公式表示就是：A∩B={x∊A∣x∊B}A\cap B = \{x\in A\mid x\in B\}用更直观的图形表示则为：应用举例已知数组A和数组B，请返回两个数组相同的数组项。在过去，是需要对两个数组分别循环处理，现在就是一行代码的事情，参考实现：const arr1 = ['CSS世界', 'CSS新世界', 'HTML并不简单']; const arr2 = ['CSS选择器世界', 'CSS新世界']; // 相同数组项 console.log([...new Set(arr1).intersection(new Set(arr2))]); // 返回结果是： // ['CSS新世界']例如，在Chrome console控制台的运行结果截图：二、union合集union()方法可以让Se ...继续阅读 (17)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11519本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、不改变原数组进行设置先看使用场景。在过去，我们修改某个数组项，通常会使用索引值进行设置，例如将数组的第2项修改为某某电影名称：const arr = ['魔童闹海', '蛟龙行动', '侠之大者', '唐探1900']; // 修改数组第2项 arr[1] = '流浪地球';但这种修改会改变原数组。如果我们希望原数组不发生改变，在过去，都是先要复制一下数组，然后再处理。复制数组的方法非常多，下面这些方法都可以：// 原数组 const fruits = ["Apple", "Mango"]; // 复制数组，使用...扩展语法 const fruitsCopy = [... fruits] // 复制数组，使用from()静态方法 const fruitsCopy2 = Array.form(fruits) // 复制数组，使用slice()方法 const fruitsCopy3 = fruits.slice() // 复制数组，使用concat()方法 const fruitsCopy4 = fruits.concat()我个人比较 ...继续阅读 (16)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11509本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、开门即见山目前，Web浏览器提供了原生的Object对象深度克隆方法structuredClone()函数。使用方法很简单，JS代码如下所示：// 创建一个具有值和循环引用的对象 const original = { name: "zhangxinxu" }; original.itself = original; // 克隆 const clone = structuredClone(original); // 两者对象是不相等的 console.assert(clone !== original); // 两者的值是相等的 console.assert(clone.name === "zhangxinxu"); // 并且保留了循环引用 console.assert(clone.itself === clone);语法语法如下：structuredClone(value, options)其中：value需要被深拷贝的值options可选参数，支持一个名为transfer的参数值，其值为一组可转移的对象，它们将被移动而不是克隆到返回的 ...继续阅读 (20)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11545本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、还是先说说历史SVG的曲线绘制在10多年前，我其实有撰文介绍过，也算是当时的热门文章了，见：“深度掌握SVG路径path的贝塞尔曲线指令”。其中就有提到圆弧指令的绘制语法，不过这篇文章主要是讲贝塞尔曲线的，因此，圆弧指令并未多做介绍。然后，最近遇到了一个需求，如下图所示，实现下图所示的渲染效果：由于其中有个动态尺寸的圆环，用来表示走过的百分比进度，因此，这里使用静态的图片是不合适的，而那个动态圆环本身就是需要使用SVG实现的（一是因为端点是圆角，二是因为有路径动画），既然都A了，那B岂不就可以顺便也实现下。因此，最终决定，总计4个圆环全部都手搓。而手搓SVG圆环的指令是M…A…组合，具体语法如下：二、搞懂M…A圆弧指令圆弧指令其实挺简单的。如下所示：M x1 y1 A rx ry x-axis-rotation large-arc-flag sweep-flag x2 y2其中：x1 y1是圆弧的起点坐标x2 y2是圆弧的终点坐标rx ry是圆弧的x半径和y半径，正圆的话这两个值是一样的，椭圆会不一样再然后： ...继续阅读 (29)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11507本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、之前postMessage的局限在12年的时候，乖乖，12年啊，都十几年前了，我有写过关于postMessage的跨页面通信的文章，见这里。结果这么多年下来，在生产环境使用上述postMessage通信的机会屈指可数，这种跨页面通信平常的交互式页面是鲜有机会接触的。然后，现在有多了个Broadcast Channel API，也是实现页面见通信的。和十多年前的这个通信区别在于，这个是广播式的，而非点对点。所谓广播通信，就是所有域名相同的页面，A发送消息，其他所有页面都能接收到，这在需要数据实时同步的场合非常有用。二、Broadcast Channel使用挺简单的Broadcast Channel API看起来复杂，实际使用简单地出乎意料，我想，最复杂的应该就是这个API的拼写了。是这样的，所有需要通信的页面都new一个相同的广播通道，就像这里：const bc = new BroadcastChannel('zhangxinxu');然后一个页面发送，就像这样：bc.postMessage('欢迎支持正版书籍');然后其他页面就能接收到这个信息 ...继续阅读 (20)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11505本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、为故而知新三年前，我有介绍过渐弱动画的媒体查询prefers-reduced-motion，参见文章“你不知道的CSS media查询与用户体验”的第5小节。使用示意：@media (prefers-reduced-motion: reduce) { /* ⽤户希望减弱动画 */ }目前Chrome浏览器新支持了一个名为prefers-reduced-transparency的媒体查询，其设计初衷和使用背景与上面提到的prefers-reduced-motion类似。是这样的：在设备层面，不透明界面会增加渲染绘制的开销，在移动设备上会加速电量的流失。在用户层面，对于少部分用户，不透明界面会导致头痛，或者因为各种类型的视力缺陷而造成视觉障碍。此时，用户就会考虑关闭操作系统的半透明设置选项。二、如何使用降低透明度目前，Windows、macOS 和 iOS 都提供了系统偏好设置，可降低或移除界面的透明度。例如，在我的Windows 10操作系统下，在显示设置里，就有这么个开关选项，如下截图所示：而prefers-reduced-transpar ...继续阅读 (22)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11503本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、hr元素与下拉分隔线在过去，下拉元素的子元素，只能是和（下拉选项分组）元素。而现在，又多支持了一个元素，为元素。可以在下拉选项中创建分隔线。例如：选项1.1选项1.2选项2.1选项2.2实时渲染效果如下：选项1.1选项1.2选项2.1选项2.2下图是我电脑上的截图效果：我试试看这个hr样式能不能自定义。结果，和option元素一样，是无法自定义的，sad 😔。二、一些细节知识首先，hr元素可以不闭合。其次，如果元素需要设置分隔效果，那么祖先元素不能是元素，因为可能会有渲染问题。例如下面这样的HTML代码：选项1.1选项1.2选项2.1选项2.2在Chrome 129下，元素会中断元素，变成下图所示的效果：不过Chrome在版本131之后修复了这个渲染bug，不过用户不一定实时升级Chrome浏览器，因此，还是避免p > hr的标签组合。兼容性最先开始支持的是Chrome浏览器，时间应该是去年年底，caniuse上的截图：Safari支持最晚，今年3月份才开始支持。为什么都是棕黄色，而非绿色呢，是因为可访问性这块还没怎么支持。二、LuLu UI中 ...继续阅读 (28)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11498本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。目前，浏览器是有能力获取系统的一些信息的，包括内存大小，CPU/GPU、电量等。一、JS获取内存大小很简单，下面一行代码即可：navigator.deviceMemory例如在我的Chrome浏览器控制台的输出结果就是：deviceMemory的兼容性如下截图所示，目前仅Chrome浏览器支持。二、JavaScript get cpu信息目前Web没法获取CPU具体的参数信息，但是可以获取CPU的核数。同样是navigator对象，不过属性值看不到CPU三个字母的影子，名为hardwareConcurrency，表示可以并行运行的硬件数量。代码示意：navigator.hardwareConcurrency运行结果示意：没想到，我的破电脑CPU是12核的，应该与去年换主板有关，不过没看出性能有多少提升。不过Mac下貌似可以看出芯片的品牌，例如我的Mac办公电脑运行navigator.platform返回的是'MacIntel'。hardwareConcurrency值的兼容性比deviceMemory好多了，参见下图，可以看到所有标准浏览器都是支持 ...继续阅读 (35)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11455本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。无论是rgb()颜色函数，还是hsl()颜色函数，现在还支持一种使用from关键字的相对语法，可以基于现有的色值设置相似色或互补色。特别适合用在hover等交互效果的实现上。一、相对语法本质是解构先来学习下语法，这语法看起来花里胡哨，其实很简单，一学就会。例如，设置一个文字颜色为红色：p { color: rgb(from red r g b / alpha); }实时渲染效果如下：我是文字，看看我的颜色是啥子？如果你使用的是Chrome浏览器，或者Safari版本在18以上，就可以看到上面的文字（含外面的虚点）都会是红色。而其中的 r g b 以及 alpha 实际上是对red的解构，其计算值分别是255 0 0 / 1（或者100%）。于是，我们就可以基于结构后的值进行对应的颜色设置处理。1. 直接设置r g b 以及 alpha可以直接使用数值进行替换，从而改变color的计算值。例如，50%透明度的red颜色，我们可以这般设置：p { color: rgb(from red r g b / .5); }实时渲染效果如下：我是50%的 ...继续阅读 (30)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11473本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。本文属于工作技术实践经验分享。一、先说下需求背景目前TTS语音合成技术非常成熟，再配合一些静态图片，就能轻松合成一个MP4视频。但有个问题，字幕。为了节约成本，一个TTS语音包含的文字往往会有上百字，不可能全部一股脑作为字幕显示，需要进行分词，有一种简单的分词方法就是在逗号等标点位置进行分割。如下图所示：然后播放到对应时间，显示对应的字幕，就像下面这样：有的TTS语音供应商会返回每个分词的播放时间（见下图字段截图示意），例如字节的，这个就很方便，可以让我们精准控制语音和字幕的匹配时机。但有的TTS语音合成供应商只有一个总时长，没有分词时间，例如微软，这个就需要我们额外处理。如果是中文还好，可以按照字数来处理，因为每个中文都会发音，最终的结果大差不差，用户通常无感知。但是最近公司的海外平台也需要接入视频生成，用来投放引流，之前的算法就遇到了问题。因为英文和中文不同，很多字母是不会发音的，或者连续几个字母只发一个音，此时，再根据字符数机械地处理，很容易会遇到视频发音和字幕不同步的问题。所以，就需要额外的更精准的算法，在业界，称为“音素算法”。二、音素算 ...继续阅读 (32)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11447本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、温故而知新在学习本文内容之前，大家有必要先了解彩色字体与font-palette属性，见此文：“超酷！CSS font-palette与彩色字体显示”不然，本文的这些内容学习起来会比较吃力。什么内容呢？介绍font-palette属性两个全新的特性，支持animation和palette-mix()函数。其兼容性如下：目前Chrome浏览器已经支持，下面花几分钟时间快速了解下这两个特性的作用和样式表现。二、palette-mix()混合函数palette-mix()函数可以对两个不同的调色板色值进行混合，支持多种颜色模式，语法参考：/* 混合字体定义的调色板 */ font-palette: palette-mix(in lch, normal, dark) /* 混合开发者定义的调色板 */ font-palette: palette-mix(in lch, --blues, --yellows) /* 每种调色板混合的百分比各不相同 */ font-palette: palette-mix(in lch, --blues 50%, -- ...继续阅读 (37)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11449本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、突然发现，浏览器全支持啦color-mix()颜色函数去年年初其实我就介绍过了，不过只是简单提了一嘴，见“是时候介绍这几个全新的CSS颜色函数了”一文。然后，最近发现，这个颜色函数所有现代浏览器都已经支持啦，看看看，绿油油一片大好。是时候好好介绍这个我认为还挺实用的颜色函数。二、白加黑的颜色是？先通过一个简单的案例预热下对color-mix()颜色函数的认知。canvas { background-color: color-mix(in srgb, black, white) }按照我们的认知，白色和黑色混合应该是灰色，那最终的渲染结果是不是灰色呢？见如下截图所示：果然是灰色，哦，原来这就是颜色混合。比例设置如果希望白色多一点，黑色少一点，怎么办呢？也好办，white色值后面的百分值设得大一点就好了。例如：canvas { background-color: color-mix(in srgb, black, white 75%) }效果：上面的混合颜色设置等同于color-mix(in srgb, black 25%, white)， ...继续阅读 (32)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11437本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、subgrid若干常识性知识subgrid表示子网格，这个东西不是和Grid布局一起出来的，要滞后数年（CSS Grid Level2的内容），其兼容性么……对外的项目还要等个一两年，如果是内部的中台项目，则可以尝鲜了。subgrid并不是一个CSS属性，而是grid-template-columns和grid-template-rows属性支持的关键字，其使用的场景需要外面已经有个Grid布局，否则……嗯，虽然语法上不会识别为异常，但是渲染结果上却是没有区别的。例如：.container { display: grid; } .item { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: subgrid; }二、什么时候使用subgridGrid布局负责大的组织结构，而里面更细致的排版对齐效果，则可以使用subgrid布局。实际上，subgrid布局其实并非必须的，因为Grid布局形成的尺寸是可计算尺寸，再其中使 ...继续阅读 (33)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11430本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。2年前有个中台文档产品有个划词评论的功能，那时候还写了篇文章介绍了相关的技术实现，参见：“划词评论与Range开发若干经验分享”一直运行的好好的。突然，就在最近，老板提了一嘴，这手机上怎么没法划词评论。好了，需求就来了。当时手机上内置的复制、翻译等tips等与划词评论小按钮会有冲突，以及开发成本等原因（台式机模拟touch长按有些麻烦），就没做。简单研究了下，事件是通用的，就是selectionchange事件。一、关于selectionchange事件根据我的测试，selectionchange发生在选区范围发生变化的时候，假如你拖拽选区范围的“棒棒子”改变文本的选中范围，此事件是不断触发的。使用示意：尝试选中这段文字：《HTML并不简单》是目前市面上...document.addEventListener('selectionchange', function () { const selection = document.getSelection(); result.textContent = selection.toStri ...继续阅读 (35)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11424本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。就算每周学习一个前端新特性，我发现我都来不及学习。都没有时间钓鱼了，苦啊。这不，又出了个啥calc-size()函数和interpolate-size属性。没关系，我还学得动，快扶我起来。一、非固定尺寸也能动画calc-size()函数和interpolate-size属性的设计初衷是一致的，就是可以让width、height等尺寸相关的属性即使值是auto，也能有transition过渡动画效果。最具代表性的就是height:auto的过渡动画实现。例如：点击我p { height: 0; transition: height .25s; overflow: hidden; } .active + p { height: auto; height: calc-size(auto, size); }此时，在Chrome 129及其以上版本浏览器下，点击按钮，就可以看到图片以切片动画的形式呈现了，如下GIF动图所示：眼见为实，您可以狠狠地点击这里：CSS calc-size()实现height:auto动画de ...继续阅读 (34)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11418本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、趁热打铁gogogo上一篇我们介绍了Pixi.js中的颜色矩阵变换滤镜，接下来，我们趁热打铁，来一起学习下SVG中的colorMatrix滤镜，使用的是这个元素。先从语法说起。支持in,type和values（注意有s）这三个属性，其中，in属性的实际用法都是固定的，值都是SourceGraphic，表示应用滤镜的原始资源。在CSS调用场景中，就是应用该CSS的对应元素。主要是type属性的区别，参见：饱和度变化色调变化发光亮度变化矩阵变化其中，饱和度和色调变化比较简单，这个在CSS中的filter属性中也有对应的滤镜方法，分别是filter:saturate()和filter:hue()，效果是一样的，关键是后面两个滤镜。下面好好说道说道。二、luminanceToAlpha的作用和效果luminanceToAlpha的作用是亮度透明化，白色会完全透明，黑色保持不变，其余黑灰半透明，类似传统胶卷的影印效果。说到亮度，讲一个小tips，就是Luminance亮度和Brightness亮度的区别。前者指的是光源投射在物体表面的发光强度，后者表示物 ...继续阅读 (41)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11393本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、背景短视频投放为了有更好的流量推荐，就需要避免重复，以免被系统判定为非原创。这就需要对视频进行去重。常见的手段就是翻转，剪裁，叠加素材等。最近就遇到类似需求，思来想去，其实可以借助算法滤镜对视频的每一帧进行重新处理，这个要比使用其他视频画面1%透明度叠加效率高得多。所以，就去研究了下Pixi.js中ColorMatrixFilter自带的算法滤镜，称为ColorMatrixFilter，就是通过矩阵变换改变画面色彩的滤镜，这个与模糊、马赛克这类滤镜还是有所不同的。我看了下官方文档，有20多个自带的方法，品类倒是挺多，但是却没有对应的效果展示，纯文本，且描述也很简单。这对于新人的学习不太友好，对于我而言，也不利于我选择应该使用哪个滤镜效果。于是，我就花时间整了个演示demo，大家可以看到每个滤镜大致的效果。二、演示您可以狠狠地点击这里：Pixi中ColorMatrixFilter各个滤镜方法效果demo大家可以滑动滑杆调整参数，感受不同的效果。ColorMatrixFilter使用示意使用contrast()示意下如何使用ColorMatrixF ...继续阅读 (36)