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 1 day ago
告别insertBefore，使用moveBefore移动DOM元素
1 day ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12051 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、新的moveBefore方法 以前我们要移动DOM元素或者Node节点都是使用insertBefore方法。 但是，insertBefore的移动是通过“删除” → “创建”实现的。 这就会有问题，包括： 元素的动画中断；...
Promise.try()和Promise.withResolvers()作用速览
9 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12048 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 本文介绍两个Promise相关的新特性。 一、Promise.try()的作用 之前我们运行一段代码，或者一个函数，想要捕获错误的时候，往往使用的是try...catch()，对吧。 但是try...catch()呢有个小问题，那就是如果里面有异步操作，如 setTimeout、Promise 内部，那么这个错误就捕获不了。 Promise.try()的作用之一就是统一同步与异步错误处理。...
CSS text-decoration-inset属性首发简介
12 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12029 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、text-decoration新特性 CSS text-decoration属性又新增了一个名为text-decoration-inset的子属性，可以改变下划线的左右缩进大小。 MDN上有案例，由于目前兼容性还不好，仅Firefox浏览器才支持，所以，我录个GIF屏给大家看下。 语法 /* auto...
纯CSS实现折线连接两个任意元素效果
15 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12026 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、事情的起因 之前介绍CSS锚点定位的时候有提到： 我们可以利用此特性，轻松实现任意两个点相连的折线效果，在过去，类似这样的效果一定要借助JS才可以。 然后我就抽空自己试验了自己的想法，发现此事并没有自己想的那么简单。 二、先看下效果 先看GIF录屏效果，纯CSS实现的： 演示页面...
学会使用CSSStyleSheet构造CSS样式
26 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12014 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、创建style元素的问题 如果想要在页面中插入一段全新的CSS样式，大多数的前端开发人员都是通过创建 <style> 元素，然后插入字符串CSS代码实现的，示意： const styleEl =...
今日学习CSS style()样式查询及其range范围语法
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11975 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、先了解下样式查询 @container规则除了尺寸匹配（这个支持有一段时间了），还支持样式匹配。 目前除了Chrome浏览器，Safari浏览器也已经支持了，实在是好消息啊！ 我们先看一个基础的案例，基于--status变量显示不同的样式。 HTML代码如下： <section class="card"...
补全不足，CSS锚点定位支持锚定容器回退检测了
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11972 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、CSS锚点定位的不足 CSS锚点定位是非常强大且实用的CSS新特性，这个特性我去年就介绍过，参见“全新的CSS Anchor Positioning锚点定位API” 虽然强大，但不完美。 这个问题我在升级LuLu UI的Select组件的的时候也遇到过，看下图一目了然：...
CSS progress()函数简介
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11969 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、progress()函数语法 最近CSS又出了个新的函数，名叫progress()，返回0-1的进度值，我研究了下，这个函数还是有一定的实用性的。 我们先看下他的语法： progress(<value>, <start>, <end>) 这个函数支持3个参数，分别是：...
单IMG标签的图片内阴影效果实现
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11969 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、内阴影不难实现 如果只是实现个内阴影效果，并不难，嵌套大法就可以了。 <div class="shadow-inset"&gt <img src="follow-me.jpg" alt="最会钓鱼的程序员">...
醒醒，该使用CookieStore新建和管理cookie了
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11954 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、为什么要抛弃传统Cookie操作？ 在前端开发的长河中，Cookie始终扮演着重要角色。 从用户身份识别到状态维持，它是浏览器与服务器之间轻量通信的核心载体。 但长期以来，我们操作Cookie的方式始终停留在通过document.cookie拼接字符串的“原始阶段”，不仅代码冗余易出错，还无法应对异步场景下的复杂需求。 比方说，我们要设置一个Cookie，需要先获取，然后再手动进行键值对+属性的字符串拼接，例如： document.cookie =...
巧用CSS ::details-content伪元素实现任意展开动画
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11900 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、温故而知新 <details>、<summary>元素我很早就介绍过了，看了一下，居然是2018年，七年前，奶奶的，时间过得也太快了，长叹一口气。 有兴趣访问这里：“借助HTML5 details,summary无JS实现各种交互效果” 本以为这个HTML元素已经很成熟了，结果在接下来的岁月中，其又发生了一些迭代与变化。 首先，哪个三角箭头改为::marker伪元素，和<ul>、<ol>这些元素的项目符号保持一致。 然后，支持name属性，也就是如果多个<details>元素使用同一个name属性值，那么这些<details>元素就会产生关联，每次最多只会展开一个<details>元素，可以实现手风琴这样的展开与收起交互效果。...
介绍下与CSS自定义组件相关的:state()函数
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11897 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、你需要提前知道的 Web Components组件开发又新增新特性，为:state()伪类函数。 4年多前，有介绍过::part()伪元素函数，可以穿透组件内部，对里面的样式进行设置。 详见这篇文章：“使用::part伪元素改变Shadow DOM的CSS样式” 而:state()伪类函数，则是穿透组件内部，匹配状态进行样式设置。...