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 6 days ago
CSS field-sizing属性简介
6 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11880 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、长话短说 CSS field-sizing是一个CSS新特性，专门给输入型表单元素使用的，例如<input>、<textarea>元素等。 是这样的，在过去，无论是单行输入框，还是多行文本域，其宽度在内容输入的时候，都是固定的，如果希望尺寸跟着内容的宽度走，需要使用JavaScript代码帮忙处理，现在，无需这么麻烦，使用field-sizing设置下就好了，例如： input { field-sizing:...
使用Intl.Segmenter返回更准确的字符长度
19 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11883 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、Emoji字符长度问题 我们平常获取字符串的长度都是直接使用length属性，但对于某些字符，返回的结果会在预期之外，例如： "鑫空间".length "🌝".length "🇮🇳".length "👨👩👧👦".length "दरबार".length...
CSS scroll-target-group加:target-current滚动菜单自动高亮
30 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11837 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、又一个JS交互被干掉了 本文要介绍的 CSS scroll-target-group属性以及:target-current伪类，可以实现滚动的时候，基于位置不同，对应的菜单项自动高亮的效果。 关于这种效果的实现，我之前还专门写文章介绍过：“尝试使用JS IntersectionObserver让标题和导航联动”。 没想到，短短几年之后，纯CSS就能实现这样的效果了。...
使用CSS linear()函数实现更逼真的物理动画效果
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11841 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、被低估的linear()函数 CSS动画曲线函数新增了一个名为linear()的函数，目前所有现代浏览器都已经支持： 一开始，我以为又是什么缝缝补补的新特性，细细一眼就，发现这东西还是挺强的。 之前的动画缓动函数我们都是使用cubic-bezier()函数，贝塞尔曲线实现的，但是这个函数有个问题，最多就4个属性值，只能实现先快后慢，先慢后快，或者一次性bounce缓动。 但是真实的物理动画往往是复杂的，例如一个皮球落地，他不可能只弹一下，往往要蹦很多下，cubic-bezier()函数就无法模拟。 在这种背景下，就设计了linear()函数，虽然是线性函数，但是参数是无限的，于是我们可以通过枚举的方式，可以模拟任何的运动曲线。 举个例子，小球落地的动画效果。...
@function自定义函数让CSS支持编程啦
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11847 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、@function规则来啦 Chrome 139浏览器除了新支持了 CSS if()函数（参见“CSS倒反天罡居然支持if()函数了”一文），还支持了期待已久的@function规则。 @function规则可以让我们自定义运算逻辑，比之前单纯的CSS var()变量要更加强大。...
HTML之快速了解hidden=until-found的作用
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11844 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、hidden属性新增新值 任意HTML元素，设置hidden属性后，会隐藏自身（样式没有被重置的前提下）。 可能有些人并不知道，hidden属性还支持一个名为until-found值，他可以让内容隐藏，但是在特殊场景下也会显示。 这个特殊场景包括锚点锚定，或者浏览器层面的文字搜索匹配。 我们开看例子。 如下HTML代码： <div...
抢先学习大开眼界的CSS corner-shape属性
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11791 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、大开眼界的CSS效果 先通过几个GIF或静态图看下CSS corner-shape属性可以实现怎样的图形表现效果。 1. 十字形、菱形 2. 六边形...
这个有点屌CSS @container scroll-state容器滚动查询
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11807 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、温故而知新 在学习本文的scroll-state容器滚动查询之前，大家需要先了解CSS @container容器查询。 详见我之前的文章：“介绍2022年最期待的CSS container容器查询”。 这东西可以检测容器尺寸，并进行响应的布局调整，很强大。 现在，@container容器查询，再次进化，可以识别滚动边缘，让CSS的交互能力更上一层楼。...
CSS索引和数量匹配函数sibling-index sibling-count简介
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11804 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、子元素索引值函数sibling-index() sibling-index()在多个有规律子元素构建的图形或动画效果的场景下非常实用。 我们来看一个《CSS新世界》这本书的一个案例，演示下如何使用sibling-index()函数简化我们的实现。 案例 先看原来的实现，可以访问这个地址：https://demo.cssworld.cn/new/5/4-3.php 所要实现的就是音波播放时候的波形上下运动的效果效果，静态截图效果如下所示： 之前的实现代码如下所示，HTML部分：...
HTML popover再进化 – 新增hint类型提示框
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11801 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、关于popover=hint 去年年初有介绍HTML popover属性，详见“该使用原生popover属性模拟下拉了”一文。 可以说是弹出浮层最佳解决方案，自动显隐特性，外加顶层特性，非常香。 但是有一个问题，那就是一次最多只能有一个弹出层显示（如果不使用 showPopover() 方法手动设置的话），但是有些轻提示，仅仅是用做信息展示，可以无需关闭之前的弹出层，之前的popover属性能力就不够。...
CSS倒反天罡居然支持if()函数了
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11788 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、CSS真逻辑函数 CSS之前也支持类逻辑函数，例如数学函数中的min()、max()，本质上也是有逻辑的，例如：max(300px, 100vw)，表示: 如果100vw的计算宽度大于300px，则最终尺寸300px 否则是100vw的宽度。 现在，CSS支持 if()...
JS正则新特性：安全过滤RegExp.escape方法
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11765 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、RegExp.escape静态方法 正则对象RegExp新增了一个名为escape()的静态方法，可以对字符串中不安全的，或者可以影响正则匹配的字符进行转义。 这些在正则中具有特殊含义的字符包括，如点号(.)、星号(*)、问号(?)、加号(+)、花括号({})、方括号([])、圆括号(())、竖线(|)和反斜杠()等。 目前所有现代浏览器都已经支持了该特性。 语法 语法比较简单，如下所示： RegExp.escape(string)...