Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederzhangxinxu.com
张鑫旭-鑫空间-鑫生活
Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.
Follow now 80 followers
Latest posts
Last updated 7 days ago
CSS contrast-color()函数简介
7 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12109 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、无障碍访问专用颜色函数 CSS contrast-color()函数是专为无障碍访问设计的。 WCAG – Web Content...
新特性速递：focus()行为新增focusVisible控制
10 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12203 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、focus()的两种控制 平时让一个输入框聚焦，我们可以这么设置： input.focus() 默认情况下，控件元素通过focus()方法获取焦点，浏览器会通过滚动的方式让元素重定位到页面可视区域内。 但有时候，这种行为会影响体验，毕竟页面会突然跳一下。 如果不希望这种滚动行为触发，可以这么设置。 input.focus({...
1分钟速度了解text-align match-parent声明
14 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12196 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、直接进入正题 text-align:match-parent声明的作用就是使用和父元素一样的对齐方式。 可仔细一想，这个属性值就很奇怪，text-align本身就具有继承特性，为何还要多此一举设计一个match-parent呢？ 因为现实开发中存在一个极为罕见的使用场景。 且看案例： <div class="box"&gt...
光标的形状也能设置了，就是CSS caret-shape属性
21 days ago
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;...
pretext与文字四面环绕效果的实现
28 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12177 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、pretext项目简介 特意看了下，这篇文章标题写好的时候，是4月9日，正好过去了一个月，终于排到了。 现在pretext在社区的讨论没有前段时间那么火了。 做前端开发这么多年，有一个心心念念的布局效果一直想要实现，那就是完全文字环绕效果。 CSS shapes布局可以实现一侧环绕，但是想要完整环绕，一直没有什么好的解决方案。 pretext的出现让我意识到有了比较好的解决方法了。...
JSON.rawJSON方法的作用是什么？
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12158 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 在前端开发中，JSON对象的方法我们最常用的就是parse和stringify，几乎每天都在和它们打交道——接口请求后用parse解析数据，提交数据前用stringify序列化对象。 但如果你最近关注JS的新特性，会发现多了一个不怎么起眼但却很实用的方法：JSON.rawJSON。 很多同学看到这个方法会一脸疑惑：stringify已经能序列化数据了，为什么还要整个rawJSON？它到底解决了什么问题？ 今天我们就抛开晦涩的官方文档，用最接地气的方式，把JSON.rawJSON的作用、用法和避坑点讲明白，看完就能直接用到项目里。 一、stringify的“隐形坑” 在讲rawJSON之前，我们先看一个日常开发中很容易踩的坑，也是rawJSON诞生的核心原因。 大家都知道，JavaScript里的数字都是浮点数，这就导致有些超大整数无法被精确表示。比如我们有一个超大的ID值：12345678901234567890，当我们用stringify序列化它时，会发现一个诡异的问题：...
如何使用CSS判断鼠标从哪个方向进入元素？
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12118 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、且看效果 下面是我使用CSS绘制的一个人脸，如果我希望如果用户鼠标从上面进入，表情变成哭丧脸；从下方进入，变成笑脸，该如何实现？ 相关代码如下所示： <div class="face-x"> <div class="face"></div>...
借助mediabunny纯JS实现视频水印、剪裁、合成等功能
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12166 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、推荐使用mediabunny 大约2年前，我更新了大量的音视频处理的文章，不过里面的技术实现大都使用原生代码和WebCodecs API手搓的实现。 因为那个时候，WebCodecs API刚出来，技术还不成熟。 自然而然，就陆续出现了不少基于WebCodecs API封装的音视频处理框架。...
务必谨慎使用JS WeakRef弱引用
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12155 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、weak三剑客 JS语言中的弱类型除了本文要介绍的WeakRef，还有WeakMap和WeakSet，其中WeakMap我5年前有介绍过，参见“JS WeakMap应该什么时候使用”。 WeakMap和WeakSet支持很多很多年了，无需顾忌任何兼容性问题，但是WeakRef则是前几年刚支持的特性。 三者的本质区别 用一句话说明WeakMap、WeakSet和WeakRef的区别，那就是： WeakMap...
CSS六边形头像的实现与蜂巢布局
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12118 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 本文内容分为两啪，一个是六边形头像效果的实现，而是金字塔布局（又称蜂巢布局）的实现。 一、六边形头像 不啰嗦，直接看代码和最终实现的效果，同样的，用的是CSS corner-shape属性。 img { aspect-ratio...
CSS corner-shape与背景底纹技术
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12115 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、corner-shape之前介绍过 CSS corner-shape属性去年8月份刚刚介绍过，可以实现多种图形效果。 很强，也大开眼界。 有兴趣的可以去这里学习其语法：“大开眼界的CSS corner-shape属性” 但是这些图形效果一次只能创建一个，如果可以将这些图形效果批量复制，岂不是可以实现各种复杂的底纹背景效果。...
浅学WebTransport API：下一代Web双向通信技术
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12112 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、比 WebSocket 更懂低延迟的开发新利器 时间如斯，一转眼，做前端开发已经十五六年了，刚开始那会儿，实时通信还是使用轮询、长轮询，后来就是 WebSocket，然后现在又出来了个WebTransport。 WebSocket虽然可以解决大部分的问题，但是并不完美，例如队头阻塞、只能单一流传输、网络切换就断连，尤其是做实时游戏、直播推流这类对延迟要求极高的场景，总觉得差点意思。 所以就有了...