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 173 followers
Latest posts
Last updated 4 days ago
CSS @supports规则又新增font-tech,font-format判断
4 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11531 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 继续关注Web前端前沿新特性，这次快速介绍CSS @supports规则新增加的两个特性判断，一个是font-tech()，另外一个是font-format()函数，都来看看是什么作用吧。 一、font-tech()的功能 font-tech()函数可以检查浏览器是否支持用于布局和渲染的指定字体技术。 例如，下面这段CSS代码可以判断浏览器是否支持COLRv1字体（一种彩色字体技术）技术。 @supports font-tech(color-COLRv1)...
终于等到了，CSS offset-path全浏览器全支持
8 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11536 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、历史与发展 CSS offset-path属性其实在8年前就介绍过了，参见：“使用CSS offset-path让元素沿着不规则路径运动” 不过那个时候的offset-path属性只支持不规则路径，也就是path()函数，很多CSS关键字，还有基本形状是不支持的。 终于，盼星星盼月亮。 从Safari...
HTML permission元素和Permissions API简介
18 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11534 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 本文介绍一个全新的HTML元素<permission>元素，与浏览器权限申请与使用相关，同时介绍Permissions API。 年纪上去了，精力有限，本文就不扯淡了，直接讲最核心的东西。 一、permission元素的作用 在Web开发的时候，我们会经常用到权限申请，比方说摄像头，访问相册，是否允许通知，又或者地理位置信息等。 在过去，这种申请都是通过JavaScript代码触发的，使用各种权限专门的API，或者使用统一的Permissions API。...
不要搞混了，不是text而是CSS font-size-adjust属性
29 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11527 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 介绍一个前端新特性，CSS font-size-adjust属性，语法还有些小复杂，研究了下，怎么说呢，非常细节的一个CSS属性，设计的初衷是解决一个小众的问题场景。 一、不同字体下的字形大小问题 我们给一段文字设置同样大小的字号，要是字体的类型不同，那么呈现的大小就会有明显的不同。 例如，中文字体中的楷体就比雅黑和苹方字体显得小，英文字体中的Times字体就比Verdana字体显得小。 为了让整体字体下的视觉表现接近，于是就设计了font-size-adjust这个CSS属性，可以指定字体的尺寸。 参见下面的代码和截图示意：...
JS Set新支持了intersection, union, difference等方法
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11522 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 继续介绍前端前沿新特性，今天讲的是Set或者类似Set的数据新支持的若干方法，主要是交集、合集以及差异判定相关，API较多，一个一个来。 一、intersection交集 单词’intersection’就是交叉，交集的意思。 用数学公式表示就是： A∩B={x∊A∣x∊B}A\cap B =...
JS Array数组新的with方法，你知道作用吗？
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11519 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、不改变原数组进行设置 先看使用场景。 在过去，我们修改某个数组项，通常会使用索引值进行设置，例如将数组的第2项修改为某某电影名称： const arr = ['魔童闹海',...
JS原生的深拷贝API structuredClone函数简介
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11509 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、开门即见山 目前，Web浏览器提供了原生的Object对象深度克隆方法structuredClone()函数。 使用方法很简单，JS代码如下所示： // 创建一个具有值和循环引用的对象 const original...
如何手搓SVG半圆弧，手把手教程
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11545 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、还是先说说历史 SVG的曲线绘制在10多年前，我其实有撰文介绍过，也算是当时的热门文章了，见：“深度掌握SVG路径path的贝塞尔曲线指令”。 其中就有提到圆弧指令的绘制语法，不过这篇文章主要是讲贝塞尔曲线的，因此，圆弧指令并未多做介绍。 然后，最近遇到了一个需求，如下图所示，实现下图所示的渲染效果： 由于其中有个动态尺寸的圆环，用来表示走过的百分比进度，因此，这里使用静态的图片是不合适的，而那个动态圆环本身就是需要使用SVG实现的（一是因为端点是圆角，二是因为有路径动画），既然都A了，那B岂不就可以顺便也实现下。 因此，最终决定，总计4个圆环全部都手搓。 而手搓SVG圆环的指令是M…A…组合，具体语法如下：...
Broadcast Channel API简介，可实现Web页面广播通信
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11507 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、之前postMessage的局限 在12年的时候，乖乖，12年啊，都十几年前了，我有写过关于postMessage的跨页面通信的文章，见这里。 结果这么多年下来，在生产环境使用上述postMessage通信的机会屈指可数，这种跨页面通信平常的交互式页面是鲜有机会接触的。 然后，现在有多了个Broadcast Channel API，也是实现页面见通信的。 和十多年前的这个通信区别在于，这个是广播式的，而非点对点。...
一个新的CSS媒体查询prefers-reduced-transparency
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11505 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、为故而知新 三年前，我有介绍过渐弱动画的媒体查询prefers-reduced-motion，参见文章“你不知道的CSS media查询与用户体验”的第5小节。 使用示意： @media (prefers-reduced-motion: reduce)...
HTML select下拉框支持hr元素啦
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11503 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、hr元素与下拉分隔线 在过去，<select>下拉元素的子元素，只能是<option>和<optgroup>（下拉选项分组）元素。 而现在，<select>又多支持了一个元素，为<hr>元素。 可以在下拉选项中创建分隔线。 例如： <select is="ui-select">...
如何使用JS获取系统内存、CPU/GPU、电量等信息
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11498 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 目前，浏览器是有能力获取系统的一些信息的，包括内存大小，CPU/GPU、电量等。 一、JS获取内存大小 很简单，下面一行代码即可： navigator.deviceMemory 例如在我的Chrome浏览器控制台的输出结果就是： deviceMemory的兼容性如下截图所示，目前仅Chrome浏览器支持。 二、JavaScript...