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 ...继续阅读 (4)

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中 ...继续阅读 (5)

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好多了，参见下图，可以看到所有标准浏览器都是支持 ...继续阅读 (10)

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%的 ...继续阅读 (7)

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

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%, -- ...继续阅读 (11)

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)， ...继续阅读 (13)

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布局形成的尺寸是可计算尺寸，再其中使 ...继续阅读 (11)

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 ...继续阅读 (28)

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 ...继续阅读 (13)

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亮度的区别。前者指的是光源投射在物体表面的发光强度，后者表示物 ...继续阅读 (13)

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

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11387本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、Object.is和===的区别Object.is()静态方法可以比较两个对象是否严格相等，在绝大多数情况下，和三等于号===的作用是一样的。除了下面两种情况：1. NaN的比较如果使用等于好比较，则NaN和NaN的返回结果是false：NaN === NaN // false但使用Object.is()比较则返回的是true：Object.is(NaN, NaN) // true2. +0和-0的比较一句话，=== 是认为相等的，而Object.is()认为是不相等的，代码示意：+0 === -0 // true Object.is(+0, -0) // false二、数组at方法和直接索引的区别已知一个数组arr = [1,2,3]，则下面两种写法均等返回数组的第二项内容：const arr = [1,2,3]; console.log(arr.at(1), arr[1]); // 返回结果：2 2那问题来了，数组使用at()方法获取选项，和直接使用索引获取有什么区别呢？区别就在于参数或索引值为负数的时候，直接看例子：const arr ...继续阅读 (17)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11377本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、姗姗来迟的支持先看兼容性图表📈：可以看到，@property规则Chrome在2020年的时候就支持了，而Safari浏览器姗姗来迟，2023年才支持，目前已经进入可以再生产环境使用的阶段（对兼容性要求不是那么严苛的项目）。@property规则属于CSS Houdini中的一个特性，可以自定义CSS属性的类型，这个特性在现代CSS开发中还是很有用的，最具代表性的例子就是可以让CSS变量支持动画或过渡效果。二、“变量种子计数器”的升级在19年的时候，我曾提过使用“变量种子计数器”来颠覆现有的CSS动画实现方式。传统的CSS动画都是一个动画定义一个 @keyframes，但如果动画类型多，那页面就会有多个不同类型的@keyframes，代码就会很啰嗦。而使用这里的“变量种子计数器”，所有的动画都可以使用唯一的一个@keyframes动画规则解决。详见文章：“使用‘变量种子计数器’扩展CSS动画更多可能性”但是，之前受制于浏览器的显示，其@keyframes规则是使用枚举的方式实现的，例如（中间部分代码省略）：@keyframes seed { ...继续阅读 (20)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11363鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、CSS又更强了一点好消息，时隔两年，原本仅Safari浏览器支持的mod()/rem()/round()现在Chrome浏览器也支持啦。mod()函数CSS mod()函数返回第一个参数除以第二个参数的取模结果，类似于JavaScript余数运算符（%）。使用示意：/* 数值，无单位 */ line-height: mod(7, 2); /* 1 */ line-height: mod(14, 5); /* 4 */ line-height: mod(3.5, 2); /* 1.5 */ /* 百分比或者带单位的尺寸 */ margin: mod(15%, 2%); /* 1% */ margin: mod(18px, 4px); /* 2px */ margin: mod(19rem, 5rem); /* 4rem */ margin: mod(29vmin, 6vmin); /* 5vmin */ margin: mod(1000px, 29rem); /* 72px - 如果根字号是16px */ /* 正负值 */ rotate: mod(100deg ...继续阅读 (21)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11357本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、原生分组方法Object.groupBy()好消息，所有现代浏览器都已经支持浏览器原生的静态方法Object.groupBy()了，如下图所示，Safari浏览器支持最晚，今年4月份才开始支持。这就意味着最晚明年，就算不使用Polyfill代码，也能在生产环境使用该方法了。作用Object.groupBy()可以让可枚举对象，根据某个键进行自动分组。例如：const data = [{ id: 1, name: '张三' }, { id: 3, name: '李四' }, { id: 4, name: '王二' }, { id: 2, name: '张三' }]; const result = Object.groupBy(data, ({ name}) => name); console.log(result);输入结果则是：{张三: Array(2), 李四: Array(1), 王二: Array(1)} 张三: Array(2) 0: {id: 1, name: '张三 ...继续阅读 (20)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=5474本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、普大喜奔好消息好消息，实现元素垂直居中对齐终于有了专门的CSS属性，就是之前Flex布局和Grid布局中使用的align-content属性，现在已经可以在普通的block块级元素中使用啦！案例演示例如，有如下CSS和HTML代码：《HTML并不简单》这本书不错感谢正版支持《CSS新世界》ul { height: 150px; border: solid; align-content: center; }此时的渲染效果如下图所示，真就垂直居中了。我只能说——Nice！二、自然也支持居底因为支持的是align-content属性，并不仅仅是某一个属性值，因此，普通元素内的居底效果，也是轻松支持的，例如下面的柱状图实现效果：.box { height: 200px; border-bottom: 1px solid; border-left: 1px solid; align-content: end; } .bar { display: inline-block; width: 1 ...继续阅读 (14)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11347本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、这个特性期待已久了之前处理滚动行为的时候，由于滚动事件的触发太频繁，所有，都会用setTimeout优化处理。现在，浏览器支持了scrollend事件，就不需要那么麻烦了。目前Firefox和Chrome浏览器已经原生支持，Safari的话还是需要老代码polyfill下（本文后面会有展示）。效果体验只要你不是Safari浏览器（手机不是iPhone），均可以滚动下面这个iframe内嵌容器，体验scrollend效果。如果仅触摸，但是未发生滚动，scrollend事件是不会发生的。二、使用方法和兼容使用方法和scroll事件一致，可以在普通DOM元素上，也可以设置在全局的window的窗体对象上。例如：window.addEventListener("scrollend", (event) => { // 滚动结束 }); element.addEventListener("scrollend", (event) => { // 滚动结束 });Polyfill 和渐进式增强目前Safari浏览器还未支持，因此，生成环境还需要额外一 ...继续阅读 (15)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11330本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。SVG中有多个与光源相关的滤镜，看起来有些小复杂，今天就好好学一学，想办法都弄懂了，说不定哪一天就用到了。一、fePointLight滤镜顾名思义就是点光源滤镜效果。和很多其他光源滤镜一样，要想生效，需要用在照明过滤器元件中。所谓的照明过滤器，在SVG中，其实指的是和这两个元素。前者指的漫反射，后者指的镜面反射。其实，SVG光源滤镜就是那么回事，一是确定光源的类型，是点光（灯泡）、平行光（太阳），还是聚光（聚光灯），二是确定物体表面发射的类型，是漫反射还是镜面反射，这些初中还是高中物理应该都讲过的。好，为了方便学习，有必要先学习和这两个元素。二、以feSpecularLighting元素举例先从案例开始说起吧。使用feSpecularLighting，也就是镜面反射源实现一个点光照射的按钮效果吧。相关SVG代码如下所示（复制到页面任意位置）：然后给需要应用该滤镜效果的元素使用CSS代码就可以了，例如：button { filter: url(#spotlight); }此时，按钮的左上角就可以看到光照特效了。如下图效果所示：眼见为实，您可以狠狠 ...继续阅读 (22)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11318本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。生命不停，学习不止，CSS滚动动画出来已经有1年了。Safari浏览器到现在还没有支持，如下图所示：但是我已经等不及了，很多人都已经开始在生产环境使用这个新特性了，我也不能落后，学起来，不要管Safari了。然后，滚动动画需要的CSS属性不仅是scroll-timeline、view-timeline，animation-timeline属性也是需要的，这也是CSS新特性，会在本文一同介绍。好，开始吧。一、温故而知新其实滚动动画我很多年前也近似实现过，让我找找……哦，找到了，CSS实现滚动指示器，效果如下GIF示意（注意上边缘的）。详见“更好的纯CSS滚动指示器技术实现”一文。现在有了原生的CSS滚动动画，滚动指示器的实现那就简单多了。代码如下所示：.scroller { height: 200px; border: 1px solid; overflow: auto; scroll-timeline: --indicator; } .scroller ins { display: block; bo ...继续阅读 (35)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11308本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、先从最简单的案例开始本文介绍View Transitions API，可以实现类似Keynote里面神奇移动这样的动画效果，也即是浏览器自动识别场景1和场景2的不同，并让这个不同产生动画效果，特别适合复杂的页面级别的场景切换动画。先从最简单的案例开始。一、append图片淡出动画传统方法实现页面插入一个图片并有动画效果，需要用到CSS3 animation定义，例如：img { animate: fadeIn .2s both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }container.append(img);而实现View Transitions API实现则是另外的风格，只需要JS代码，这样：document.startViewTransition(() => { container.append(img); });此时图片插入就有淡出效果了，如下视频所示（不动点击播放）：就是这么简单。眼见为实，您可以狠狠地点击这里：startV ...继续阅读 (35)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11293本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、需求背景希望特效音可以有淡入淡出效果，同时能够在视频合成的时候体现在音轨中。二、播放淡入淡出先讲下偏浅层应用的技术实现，那就是播放淡入淡出。1. 使用howlerjs实现howlerjs这个项目（https://github.com/goldfire/howler.js）我多次提到过，凡是音频播放的需求（除了那种简单的点击播放），无需任何迟疑，也不用考虑其他，就是要howlerjs。两三万Star的项目，品质保证。下面演示下如何实现。假设页面上有个按钮，点击按钮播放某音频，HTML示意：点击播放则下面几行JavaScript代码可以实现音频播放淡入，结束淡出的效果。const url = './htmlbook.wav'; const sound = new Howl({ src: [url] }); // 点击按钮，音频淡入淡出播放 button.onclick = function () { sound.play(); sound.fade(0, 1, 1000); setTimeout(() => { ...继续阅读 (34)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11275本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。前言盼星星，盼月亮，我的第5本书《HTML并不简单》已经正式上架了。这本书是围绕HTML这门语言展开的，可以说是市面上唯一一本专讲HTML的书籍。而HTML诞生至今已有30多年，为何鲜有专门介绍这门语言的书籍呢？一方面是商业原因，另一方面则是从业人员对HTML的积累不足以撑起一本书籍的体量。作为一个学习门槛低，收益周期长的语言，很少有人会花大量的时间在这门语言的研究上。但我是个例外，工作至今已有15年，一直在一线开发，一直没有停止对前端基础语言的研究与学习，使得自己的知识储备足够支撑起一本干货满满，细节丰富，深入浅出的HTML书籍。可以说，如果不是阅读了本书，很多实用的前端知识你恐怕这辈子都不会知道。为什么会想到写HTML的书？其实，我和出版社的编辑大大们都心知肚明，在Web前端岗位日趋饱和的当下，纸质书日益衰落的如今，出版一本很多人并不在意的书籍的小众领域的书籍，其实风险还是挺大的。但是，有些事情终归是要有人做的，如果凡事都向功利看齐，小到行业发展，大到国家建设，怎么才能真正强大起来呢？毕竟，这个世界还有不少真正热爱学习，热爱技术，对自我成长有要 ...继续阅读 (33)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11282本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、前前前言生命不息，学习不止。本周实操一下CSS Custom Highlight API。首先，Firefox浏览器最近也支持了上述API，至此，现代浏览器完成了大统一，可以学起来了。这个API虽然以CSS开头，但是要实际应用，需要对JavaScript有一定积累的开发人员才能驾驭。不过好的是什么呢，其几个经典的应用场景，例如搜索高亮（MDN文档有案例，见下图1），或者源代码高亮（这里有案例，见下图2），相关的JS代码都是固定的，大家直接复制粘贴就可以使用了。历史经验告诉我，外面的站点都不靠谱，过个5年10年的，这些地址都不能访问了，所以，我做了个备份地址，以备不时之需。分别参见：CSS Highlight API文本高亮搜索demoCSS Custom Highlight API实现代码高亮demoOK，下面开始正式介绍如何自DIY一个文本高亮效果。二、文本高亮四步骤实现CSS纯文本高亮需要下面四步：创建Range对象（使用JS）；使用第一步创建的range创建Highlight对象（使用JS）；使用HighlightRegistry方法注册 ...继续阅读 (37)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11261本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、calc()函数支持的新关键字CSS在不断发展，除了新支持了若干数学函数之外，还支持了一些数学关键字，且这些关键字和JavaScript中的关键字神似。包括：elog常量，约等于：2.7182818284590452354.pi圆周率，约等于：3.1415926535897932.infinity&-infinity无穷大和无穷小NaN表示非数值。其中，e和pi比较容易理解，我们可以借助这些常量和特性数学函数实现缓动或正余弦函数动画效果（可以是可以，但比较牵强），这个后面会有案例。需要花些时间了解的是infinity这个关键字。二、了解infinity关键字及其应用先看一个案例，已知有如下HTML和CSS代码，请问对话框元素的上下堆叠顺序依次是多少？1234.a { z-index: 99999999; } .b { z-index: calc(1 / 0); } .c { z-index: calc(infinity + 1); } .d { z-index: calc(infinity * 1); }大家可以思考下。.... ...继续阅读 (46)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11252本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、时代变了某些没变Safari啊Safari，唉，不知道说什么才好。最近做项目，又遇到了近Safari才会出现的问题，拖拽元素的时候有奇怪的残影。包括之前也有很多问题，也都是Safari下才会出现的。所以，就出现了对Safari专门处理下的需求。我查了一下，居然没有专门匹配Safari的CSS的资料介绍，那就自己撸一个吧。二、使用@supports规则进行识别有些CSS特性如果Safari并不支持，但是其它浏览器支持，或者有些特性仅Safari支持，但其它浏览器并不支持，均可以用做Safari识别。我大致看了下，可以是这样的：@supports not (background: paint(xxx)) { button { color: red; } }可以非常安全地匹配iOS Safari浏览器：第2种方法：@supports (image-rendering: optimizeSpeed) { /* Safari 和 Firefox浏览器 */ }上面的代码适用于不需要管Firefox浏览器的场景。第3种方法：@suppo ...继续阅读 (47)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11245本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、现状描述有一个元素设置了display:none隐藏，然后使用JS让其实现的时候，希望同时有透明度变化的动画效果，使用transition属性是无效的。如下代码示意：占位内容.element { display: none; opacity: 0; transition: .2s; } .element.active { display: block; opacity: 1; }// 让元素显示 element.classList.add('active');此时元素是突然显示，而不是有透明度动画。在之前，有两种方法：元素先显示，透明度保持0，然后在下一个渲染绘制执行设置透明度为1.使用CSS animation动画，代码参见：.element.active { display: block; animation: fadeIn .2s both; } @keyframes { from { opacity: 0; } to { opacity: 1; } }不过上面两种方法都比较麻烦，不如直接一个trans ...继续阅读 (42)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11215本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、新的王牌特性Chrome 125已经正式支持CSS锚点定位了，至此，我们可以使用纯CSS实现绝对定位元素A相对于任意锚点元素B的定位效果了，过去那些使用JS实现的浮层效果均有了更好的实现方式。下面赶快一睹为快吧。二、先从最简单的案例开始一个按钮，一张图片。在过去，希望点击按钮让图片在按钮的下边缘对齐显示，要么有DOM结构限制，要么借助JS。DOM结构限制示意：按钮但是现在，直接CSS就可以了，DOM结构可以非常随意。例如有如下HTML和CSS代码：按钮.trigger { anchor-name: --my-anchor; } .target { position: absolute; position-anchor: --my-anchor; left: anchor(left); top: anchor(bottom); margin-top: .5rem; }我们就可以得到如下图所示的定位效果了：并且这种定位效果是实时的，也就是我们改变按钮的位置，下面的图片会自动跟随。我专门做了个演 ...继续阅读 (47)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11213本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、好不好用过才知道HTML5元素使用showModal()显示的时候，自动层级最高，自动居中，自动有黑色蒙层，明显就比使用show()方法或者设置open属性显示弹框要好。于是，就在前段时间，对于LuLu UI Edge主题的弹框组件，我就进行了大刀阔斧的修改，让弹框的显示均采用showModal()方法（通过劫持open属性实现）。修改完了自我感觉良好，但是真的实践之后，痛苦的事情来了，由于dialog元素顶层了，因此，自定义的验证提示，浮动定位，toast提示等，全都无法显示，因为这些组件的元素创建都是在body元素下的，由于弹框层级顶级，因此，这些组件样式被覆盖地死死的，用户根本就看不到。唯一的方法就是让toast元素，浮层元素全都append到元素中，这实在是太麻烦了。于是，没办法，妥协，仅alert和confirm类型的弹框使用showModal()显示，其他类型的弹框还是传统的show()方法显示，使用JavaScript进行层级控制。可见，看起来很棒的特性真正使用，可能并没有想的那么好。就像找对象一样，看起来长得漂亮身材又好，真正相 ...继续阅读 (46)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11200本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、故事的背景故事的背景是这样的，前段时间，有位同行咨询了我这么个问题：大佬，请教一下，css有没有办法在不增加dom元素的情况下，将一个元素的样式 copy多一个出来？像这样，是两个如下图所示：然后这是后续的对话：已经没有年轻时勤奋的我后来也没有去化时间调试。没想到，过了几日，这位同行说自己使用SVG滤镜搞定了，还发过来的示意demo。啧啧啧，这明显一看就是个人才。然后，最近不是在重新系统学习SVG的滤镜嘛，正好其中用到的最关键的代码就是feMerge和feMergeNode元素，因此，就决定，以此需求为案例，给大家讲讲这两个滤镜元素的语法和作用。二、关于feMerge滤镜SVG中的元素允许同时应用多个滤镜效果，而不是按顺序应用。最终效果的实现需要借助子元素，而的输入内容是其他滤镜执行的result结果，或者是内置的输入关键字，如最常用的SourceGraphic，表示应用滤镜的原始资源，在CSS中应用SVG滤镜的话，SourceGraphic就表示应用该CSS的HTML元素。feMerge的MDN文档提供了一个案例，其实基本上就是上面DOM样式 ...继续阅读 (59)