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 174 followers
Latest posts
Last updated 8 days ago
光速了解script style link元素新增的blocking属性
8 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11568 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、前言 继续介绍Web前端前言新特性，这次要介绍的是一个HTML属性，名为blocking 属性它主要用于控制资源加载时对渲染的阻塞行为。 blocking 属性允许开发者对资源加载的优先级和时机进行精细控制，从而影响页面的渲染流程。浏览器在解析 HTML 文档时，会根据...
研究下attachInternals方法，可让普通元素有表单特性
12 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11570 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 本文又是独家内容，因为持续学习的人本就不多，持续关注前沿技术的人就更少，而关注自定义元素和原生表单特性的就更少，所以，也就我这样的老人家会研究并撰写相关的知识了。 可惜，现在做这类文字输出的收益极低，因为大家只能通过我的社交媒体账户获取，随着AI的日益普及，传统搜索引擎注定没落，而AI把我辛苦写的内容一抓，然后自己“思考”一番输出给用户，我什么好处都得不到。 某种意义上，AI智能是限制了原创内容输出的动力的，尤其是独立平台的个体创作者。 好了，不吐槽了，回到正题，讲下HTML元素的全局方法attachInternals()方法，此方法用在自定义元素中，也就是我们常说的Web Components组件中，可以让自定义元素具有原生表单元素一样的特性。 此方法的使用还是挺简单的，关键是如何理解其运作原理，想了下，没有通过一个案例来介绍更直观了。 一、自定义复选框组件案例...
一种更好的文字隐藏的方法-::first-line伪元素
19 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11559 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、前言 去年年中开始开启了《CSS世界》三部曲精讲视频系列，然后前段时间正好讲到::first-line伪元素，突然意识到，很长一段时间内，我居然把这个东西给忘记了。 ::first-line伪元素本身的作用是个鸡肋，就是控制第一行文字的样式。 但是其衍生的作用倒是有个妙用，那就是隐藏按钮或者图标内的文字的同时不改变color属性的上下文。 例如，LuLu UI中的按钮控件，其按钮的loading效果是隐藏文字，显示旋转图标🌼，按钮尺寸不变，如下GIF动图所示。 其中有个要求，那就是loading旋转图标的颜色要和文字保持一致，我们很自然会想到currentColor关键字，或者颜色不指定，直接继承。...
CSS @supports规则又新增font-tech,font-format判断
26 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全浏览器全支持
about 1 month 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简介
about 1 month 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属性
about 2 months 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 2 months 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 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11519 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、不改变原数组进行设置 先看使用场景。 在过去，我们修改某个数组项，通常会使用索引值进行设置，例如将数组的第2项修改为某某电影名称： const arr = ['魔童闹海',...
JS原生的深拷贝API structuredClone函数简介
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11509 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、开门即见山 目前，Web浏览器提供了原生的Object对象深度克隆方法structuredClone()函数。 使用方法很简单，JS代码如下所示： // 创建一个具有值和循环引用的对象 const original...
如何手搓SVG半圆弧，手把手教程
3 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页面广播通信
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11507 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、之前postMessage的局限 在12年的时候，乖乖，12年啊，都十几年前了，我有写过关于postMessage的跨页面通信的文章，见这里。 结果这么多年下来，在生产环境使用上述postMessage通信的机会屈指可数，这种跨页面通信平常的交互式页面是鲜有机会接触的。 然后，现在有多了个Broadcast Channel API，也是实现页面见通信的。 和十多年前的这个通信区别在于，这个是广播式的，而非点对点。...