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 79 followers
Latest posts
Last updated 1 day ago
HTML interestfor属性与悬停popover交互效果
1 day ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12089 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、悬停popover也原生支持了 之前“该使用原生popover属性模拟下拉了”这篇文章有介绍过点击行为驱动的popover下拉。 最近发现，鼠标hover悬停也支持popover交互了。 且功能比点击更丰富，适用范围更广，那就是将popovertarget属性换成interestfor属性。 先看案例，HTML如下： <button interestfor="imgBook">Hover显示图片</button&gt...
点击图片放大查看交互效果的最佳实现
8 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12082 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、先看跟随放大效果 请看下面的MP4录屏效果（不动点击播放）： 除了视频看到的效果，相关实现还支持： ESC关闭； 地址栏回退关闭； 眼见为实，您可以狠狠地点击这里：点击缩略图以动画效果呈现大图demo 二、一步步原理说明...
JS正则表达式y标识符之粘性匹配
21 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12076 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、前言概述 当年我是捧着JavaScript高级语言设计这本书学习JS正则表达式的，知识基本上都停留在那个时期。 最近偶然发现，正则表达式还支持sticky粘性标识，使用字母y表示。 看了下支持的时间，距今也有五六年的时间了，已经谈不上新特性了。 趁着春节前比较有空，赶快学习一番。 二、y标识符基础常识 粘性匹配的标识符是y。...
CSS text-box属性又是干嘛用的？
27 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12067 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、text-box的设计初衷 在传统的 CSS 盒模型 中，文本行高（line-height）会在文字上下产生额外的“半行间距”（half-leading）。 这使得文本难以与旁边的图标或容器边缘精确对齐。如下图所示： 使用...
告别insertBefore，使用moveBefore移动DOM元素
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12051 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、新的moveBefore方法 以前我们要移动DOM元素或者Node节点都是使用insertBefore方法。 但是，insertBefore的移动是通过“删除” → “创建”实现的。 这就会有问题，包括： 元素的动画中断；...
Promise.try()和Promise.withResolvers()作用速览
about 1 month 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属性首发简介
about 2 months 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实现折线连接两个任意元素效果
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12026 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、事情的起因 之前介绍CSS锚点定位的时候有提到： 我们可以利用此特性，轻松实现任意两个点相连的折线效果，在过去，类似这样的效果一定要借助JS才可以。 然后我就抽空自己试验了自己的想法，发现此事并没有自己想的那么简单。 二、先看下效果 先看GIF录屏效果，纯CSS实现的： 演示页面...
学会使用CSSStyleSheet构造CSS样式
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12014 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、创建style元素的问题 如果想要在页面中插入一段全新的CSS样式，大多数的前端开发人员都是通过创建 <style> 元素，然后插入字符串CSS代码实现的，示意： const styleEl =...
今日学习CSS style()样式查询及其range范围语法
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11975 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、先了解下样式查询 @container规则除了尺寸匹配（这个支持有一段时间了），还支持样式匹配。 目前除了Chrome浏览器，Safari浏览器也已经支持了，实在是好消息啊！ 我们先看一个基础的案例，基于--status变量显示不同的样式。 HTML代码如下： <section class="card"...
补全不足，CSS锚点定位支持锚定容器回退检测了
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11972 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、CSS锚点定位的不足 CSS锚点定位是非常强大且实用的CSS新特性，这个特性我去年就介绍过，参见“全新的CSS Anchor Positioning锚点定位API” 虽然强大，但不完美。 这个问题我在升级LuLu UI的Select组件的的时候也遇到过，看下图一目了然：...
CSS progress()函数简介
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11969 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、progress()函数语法 最近CSS又出了个新的函数，名叫progress()，返回0-1的进度值，我研究了下，这个函数还是有一定的实用性的。 我们先看下他的语法： progress(<value>, <start>, <end>) 这个函数支持3个参数，分别是：...