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 81 followers
Latest posts
Last updated 3 days ago
单IMG标签的图片内阴影效果实现
3 days 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了
9 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11954 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、为什么要抛弃传统Cookie操作？ 在前端开发的长河中，Cookie始终扮演着重要角色。 从用户身份识别到状态维持，它是浏览器与服务器之间轻量通信的核心载体。 但长期以来，我们操作Cookie的方式始终停留在通过document.cookie拼接字符串的“原始阶段”，不仅代码冗余易出错，还无法应对异步场景下的复杂需求。 比方说，我们要设置一个Cookie，需要先获取，然后再手动进行键值对+属性的字符串拼接，例如： document.cookie =...
巧用CSS ::details-content伪元素实现任意展开动画
13 days 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()函数
20 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11897 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、你需要提前知道的 Web Components组件开发又新增新特性，为:state()伪类函数。 4年多前，有介绍过::part()伪元素函数，可以穿透组件内部，对里面的样式进行设置。 详见这篇文章：“使用::part伪元素改变Shadow DOM的CSS样式” 而:state()伪类函数，则是穿透组件内部，匹配状态进行样式设置。...
CSS锚点定位实战-鼠标跟随交互效果
27 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11886 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、前言之锚点定位简介 锚点定位去年出来的时候就详细介绍过，参见“全新的CSS Anchor Positioning锚点定位API”，非常强大，非常实用。 能够解决overflow剪裁定位元素的问题，包含自动调整方向，尺寸自动适应等特性。 基本上任何浮层元素之间的定位都不再需要JavaScript代码的参与。 我看了下兼容性，所有现代浏览器目前均已支持。...
垃圾特性之CSS :heading伪类和:heading()函数
about 1 month 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方法
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11914 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、千呼万唤始出来 好消息，Canvas也支持锥形渐变了，方法名称是createConicGradient()方法。 兼容性参见下图： 所有现代浏览器都已经支持，且已经支持了2年了。 需要使用Canvas锥形渐变的场景 最近遇到了个需求，必须使用Canvas实现锥形渐变，而不能是CSS。 那就是下图所示的饼图效果：...
CSS reading-flow和reading-order属性简介
about 2 months 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 2 months 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返回更准确的字符长度
2 months 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滚动菜单自动高亮
3 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()函数实现更逼真的物理动画效果
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11841 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、被低估的linear()函数 CSS动画曲线函数新增了一个名为linear()的函数，目前所有现代浏览器都已经支持： 一开始，我以为又是什么缝缝补补的新特性，细细一眼就，发现这东西还是挺强的。 之前的动画缓动函数我们都是使用cubic-bezier()函数，贝塞尔曲线实现的，但是这个函数有个问题，最多就4个属性值，只能实现先快后慢，先慢后快，或者一次性bounce缓动。 但是真实的物理动画往往是复杂的，例如一个皮球落地，他不可能只弹一下，往往要蹦很多下，cubic-bezier()函数就无法模拟。 在这种背景下，就设计了linear()函数，虽然是线性函数，但是参数是无限的，于是我们可以通过枚举的方式，可以模拟任何的运动曲线。 举个例子，小球落地的动画效果。...