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 175 followers
Latest posts
Last updated 2 days ago
CSS锚点定位实战-鼠标跟随交互效果
2 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11886 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、前言之锚点定位简介 锚点定位去年出来的时候就详细介绍过，参见“全新的CSS Anchor Positioning锚点定位API”，非常强大，非常实用。 能够解决overflow剪裁定位元素的问题，包含自动调整方向，尺寸自动适应等特性。 基本上任何浮层元素之间的定位都不再需要JavaScript代码的参与。 我看了下兼容性，所有现代浏览器目前均已支持。...
垃圾特性之CSS :heading伪类和:heading()函数
9 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11894 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、了解:heading伪类和 CSS又出了个名为:heading的伪类，用来匹配h1~h6元素的，也就是标题元素。 如果是其他标签元素，但是设置了role="heading"是不会匹配的。 :heading伪类的选择器优先级和类名一样。 二、关于:heading()函数 :heading()函数是用来匹配特定的标题元素，你可以理解为用来筛选标题元素的，语法如下所示： :heading([...
Canvas也支持锥形渐变了createConicGradient方法
17 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11914 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、千呼万唤始出来 好消息，Canvas也支持锥形渐变了，方法名称是createConicGradient()方法。 兼容性参见下图： 所有现代浏览器都已经支持，且已经支持了2年了。 需要使用Canvas锥形渐变的场景 最近遇到了个需求，必须使用Canvas实现锥形渐变，而不能是CSS。 那就是下图所示的饼图效果：...
CSS reading-flow和reading-order属性简介
23 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11889 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 继续介绍前端前沿新特性，这次介绍的是两个改进键盘无障碍访问的CSS属性reading-flow和reading-order。 一、Tabindex属性的问题 在Web开发中，DOM文档的属性和视觉表现顺序不一致是很正常的。 但是，此时，如果我们不进行干预，用户在使用Tab键进行索引访问的时候，顺序就会出现问题，导致困惑。 在过去，我们会使用tabindex属性进行交互处理。举个例子： <div class="box"...
CSS field-sizing属性简介
about 1 month 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返回更准确的字符长度
about 1 month 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滚动菜单自动高亮
about 2 months 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 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11841 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、被低估的linear()函数 CSS动画曲线函数新增了一个名为linear()的函数，目前所有现代浏览器都已经支持： 一开始，我以为又是什么缝缝补补的新特性，细细一眼就，发现这东西还是挺强的。 之前的动画缓动函数我们都是使用cubic-bezier()函数，贝塞尔曲线实现的，但是这个函数有个问题，最多就4个属性值，只能实现先快后慢，先慢后快，或者一次性bounce缓动。 但是真实的物理动画往往是复杂的，例如一个皮球落地，他不可能只弹一下，往往要蹦很多下，cubic-bezier()函数就无法模拟。 在这种背景下，就设计了linear()函数，虽然是线性函数，但是参数是无限的，于是我们可以通过枚举的方式，可以模拟任何的运动曲线。 举个例子，小球落地的动画效果。...
@function自定义函数让CSS支持编程啦
2 months 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的作用
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11844 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、hidden属性新增新值 任意HTML元素，设置hidden属性后，会隐藏自身（样式没有被重置的前提下）。 可能有些人并不知道，hidden属性还支持一个名为until-found值，他可以让内容隐藏，但是在特殊场景下也会显示。 这个特殊场景包括锚点锚定，或者浏览器层面的文字搜索匹配。 我们开看例子。 如下HTML代码： <div...
抢先学习大开眼界的CSS corner-shape属性
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11791 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、大开眼界的CSS效果 先通过几个GIF或静态图看下CSS corner-shape属性可以实现怎样的图形表现效果。 1. 十字形、菱形 2. 六边形...
这个有点屌CSS @container scroll-state容器滚动查询
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11807 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、温故而知新 在学习本文的scroll-state容器滚动查询之前，大家需要先了解CSS @container容器查询。 详见我之前的文章：“介绍2022年最期待的CSS container容器查询”。 这东西可以检测容器尺寸，并进行响应的布局调整，很强大。 现在，@container容器查询，再次进化，可以识别滚动边缘，让CSS的交互能力更上一层楼。...