鑫空间鑫生活

subgrid这个子网格特性当时Grid布局出来之后，呼声很高，现在终于支持了，非常适合那种比较规整的多层次嵌套的布局，赶快来了解一番吧。

目前所有现代浏览器都已经支持color-mix()这个颜色函数了，这个函数可以实现关键字颜色值的半透明表示，是其他CSS、JS语法都无法取代的实用特性，本文还有色调插值方法的介绍。

font-palette彩色字体又支持新特性了，一是可以使用palette-mix()实现基础模板的颜色混合，二是支持animation和transition动画了，至此Web字体渲染的表现力更上一层楼。

基于英文单词的发音规则，精准预估TTS语音合成每段内容所占据的时长，以便实现更精准的字幕同步，冷门应用场景，但却是稀缺的算法资源，值得收藏备忘。

本文介绍非常实用的CSS相对颜色语法，可以解构现有颜色，轻松实现相邻色、反色、半透明色等效果，有效减少项目的CSS颜色变量数量。

有些前端开发可能还不知道，JavaScript是有能力获取操作系统的内存、CPU/GPU、电量、蓝牙、掉线等信息的。

好消息，height:auto、width:fit-content这些以前无法触发transition过渡效果的CSS声明，现在也能动画啦，就是使用calc-size()函数或interpolate-size属性。

最近做的项目用到了一个比较冷门的DOM事件API selectionchange事件，文本选区变化时候触发，简单记录下，希望日后可以帮到遇到类似需求的同行。

算是把pixi.js中的颜色矩阵算法滤镜的使用和各种渲染效果给摸了个透，一通百通，对SVG滤镜，canvas 2D滤镜的学习与应用也是颇有帮助的。

充分且深入学习SVG feColorMatrix滤镜的语法，矩阵变换原理，常见颜色滤镜参数值，生成工具等。

介绍几个JS中非常雷同的方法或者语法，不知道诸位是否可知其中的差异？

盼星星，盼月亮，我的第5本书《HTML并不简单》已经正式上架了，这里讲讲为什么会想到写一本关于HTML的书籍，介绍下本书的内容结构，签字版购买等信息，希望可以得到大家的正版支持。

本文通过案例演示如何使用开源JS库实现音频淡入淡出、原生JS又该实现，以及如何从底层对音频进行淡入淡出转换，都是少见的技术分享。

View Transitions API可以让页面元素在无需设置具体定位属性值的情况下实现各种各样的动画效果，是个很强很有用的新特性。

CSS滚动动画比我预想的要强多了，项目中又有很多JavaScript代码可以淘汰了。

SVG光影相关的滤镜元素有5个，乍一看，还挺复杂，可细细一学，哦，原来也就是这么回事。

Chrome和Firefox浏览器都已经支持scrollend滚动停止事件了，快进来瞅瞅吧。

之前使用align-content控制元素的垂直对齐仅适用于Flex或Grid元素，而现在，Block元素也能使用啦！

好消息，所有现代浏览器都已经支持Map.groupBy()、Object.groupBy()静态分组方法了，我们的JavaScript代码又可以进一步简化了。

最近Chrome进行了第4批CSS数学函数的支持，包括mod()/rem()/round()，其中round()函数尤为的实用。

CSS @perporty规则最具代表性的作用是扩大了CSS动画和CSS过渡效果的应用范围，还是挺实用的一个Houdini特性。

带大家快速了解下CSS initial-letter属性，可以更好地设置首字母的排版效果。

既生瑜何生亮，没想到CSS有语法和作用如此相似的两套规则，一个是范围，一个是嵌套，大部分时候两者可以互相替换，怎会如此呢？

要想成为前端图形表现领域的高手，要必要弄懂SVG中各种滤镜元素的语法与作用，先从简单的feblend元素开始。

模糊和投影算是SVG滤镜中学习难度最低的元素了，所以放在一起介绍，从中可以看到CSS模糊和投影滤镜语法的影子。

后端这块只会Node.js的前端工程师如何实现每隔一两秒就获取一张小尺寸的视频截图的需求呢？

今天终于发现了一种适用于各种背景环境的文字变瘦方法，此方法居然无需用到任何与文字相关的CSS属性。

本文介绍两种Web中实现图片马赛克的方法，一个是SVG滤镜的，一个基于某个CSS属性的，都比较简单，不复杂。

没想到吧，借助SVG看似不起眼的feMerge滤镜，我们可以轻松实现任意DOM元素的样式的投影复制效果，还支持动画哦。

最近尝试在Dialog对话框组件中大肆使用顶层特性，以便减少z-index这类层级的判断，结果发现事情并没有预想的那样顺利，顶层特性也是有隐患的，好在有低成本的解决方法。

音视频合成的时候，有倍速合成的需求，起初，我以为这只是个手到擒来的小需求，细究之下发现问题并不简单……

全新的Screen Wake Lock API，可以让网页无论放置多久，都不要担心熄屏，或出现屏保，Web如今越来越强了。

从名称上看，@scope似乎是实现CSS作用域的，这个讨论了近20年的特性终于是要支持了吗，还是并非如此？

只要你的产品有SEO的需求，那么MicroData微数据就是必须要了解的知识，通过几个属性，让数据结构更适合搜索引擎识别。

SEO 优化 https://github.com/schemaorg/schemaorg

其实获取视频的缩略图并不需要视频解码就能实现，方法就是其貌不扬的HTML video元素。

Firefox也正式支持popover属性了，大人，时代变了，所有的下拉效果要换种实现方式啦。

原来前端纯JS就能实现人脸识别检测，使用简单，性能优异，准确率也高，有案例演示，有源码，希望可以帮到大家的学习。

给大家演示下如何对比两个IMG图片的相似度，性能和准确度均不错，然后……圣诞节快乐！🎄

其实使用Web Audio API就能从视频中提取音频文件了，本文有演示页面，有实现代码，有详细讲解，值得一看。

坚持探索Web标准下的原生浏览器开发行为，行为驱动和数据驱动的表单开发其实各有千秋，深入HTML，你会发现这个世界比你所知的要精彩的多。

自己体验了下，出乎意料，HTML elementtiming属性在性能监控这块，比预想的要实用的多。

MDN:Web/HTML/Attributes/elementtiming 可监听任意Element元素的加载性能

该属性可应用于 <img>​​​, <image>​​​里面的元素 <svg>​​​，海报图像 <video>​​​元素，具有 background-image​​​，以及包含文本节点的元素，例如 <p>​​​.

在 DOM 中，该属性体现为 Element.elementTiming​​​.

本文介绍三种改变音频播放音量的方法，其中还有一种方法直接改变音频AudioBuffer数据源的音量，说不定你哪天就会用到。

起初以为只是个小需求，实现JS复制图片到剪切板，直到深入了解，才发现，原来涉及到那么多知识，真是不虚此学。

3年前有更新过JS剪裁audio音频，今天我们再讲讲如何使用原生的JS实现多个音频的拼接或合并，此文可是其他地方见不到的哟。

应该是国内第一篇专门介绍用mp4box.js和VideoDecoder方法解码MP4视频序列帧的文章了。

想要提高网页的加载体验，其实有个非常简单且实用的技巧，那就是改变请求资源的加载优先级，这也可以改变？没错！

剪映中的视频特效虽多，其实就两类，一类改变原始像素，一类叠加混合，本文通过精简的源码和精致的案例给大家介绍具体如何实现。

滤镜效果大体分两类，一类是算法滤镜，另外一类则是颜色映射滤镜，本文就将介绍如何使用pixi.js在WebGL中应用颜色映射滤镜。

本文通过真实的demo演示案例给大家展示如何使用JS获取本地音乐文件的封面图、文件名及时长等信息。