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 34 followers
Latest posts
Last updated 1 day ago
这个有点屌CSS @container scroll-state容器滚动查询
1 day 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简介
10 days 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类型提示框
17 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11801 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、关于popover=hint 去年年初有介绍HTML popover属性，详见“该使用原生popover属性模拟下拉了”一文。 可以说是弹出浮层最佳解决方案，自动显隐特性，外加顶层特性，非常香。 但是有一个问题，那就是一次最多只能有一个弹出层显示（如果不使用 showPopover() 方法手动设置的话），但是有些轻提示，仅仅是用做信息展示，可以无需关闭之前的弹出层，之前的popover属性能力就不够。...
CSS倒反天罡居然支持if()函数了
23 days 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方法
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11765 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、RegExp.escape静态方法 正则对象RegExp新增了一个名为escape()的静态方法，可以对字符串中不安全的，或者可以影响正则匹配的字符进行转义。 这些在正则中具有特殊含义的字符包括，如点号(.)、星号(*)、问号(?)、加号(+)、花括号({})、方括号([])、圆括号(())、竖线(|)和反斜杠()等。 目前所有现代浏览器都已经支持了该特性。 语法 语法比较简单，如下所示： RegExp.escape(string)...
HTML新search元素,h1规则要变,声明式Shadow DOM
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11729 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、全新的search元素 Chrome 117和Safari 17新支持了一个HTML元素名为 <search>，用于定义搜索区域，通常作为表单的一部分。 兼容性如下图所示： 如果大家通过AI了解<search>元素，可能会看到类似下图的说法，注意，这个说法是错误的，一本正经的胡说八道。...
好诶，select下拉框元素支持样式完全自定义啦！
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11746 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 Tips：演示页面在本文最后。 一、appearance:base-select <select>下拉框元素现在已经支持完全自定义了，太不容易了，太感动了。 LuLu UI的Edge主题的Select组件现在已经接入了这个新特性。 如果你的浏览器是Chrome 135+，可以访问这里体验一下。...
CSS小图标剪裁终极解决方案clip-path shape()函数
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11736 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、告别path函数 clip-path的path()函数可以传入SVG路径，从而实现元素的剪裁效果，比方说SVG小图标。 例如： clip-path: path("M 0 200...
text-wrap进化:支持两子属性和pretty stable新值
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11717 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、前文回顾，balance属性值 两年前有介绍过text-wrap:balance的作用，详见“5分钟快速了解text-wrap:balance的作用”此文。 这个声明还是挺好用的，特别适合用在可换行的水平列表排列上。 比方说过去，点赞头像这种布局，就可能第一行很多，第二行很少： 使用text-wrap:balance之后，可以让两行的数量接近，布局效果很好很多。 现在text-wrap又支持了两个新的属性值，pretty和stable。 二、值pretty和stable的作用...
CSS ::scroll-button ::scroll-marker伪元素又是干嘛用的？
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11727 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 先回答题目抛出的问题，一句话： ::scroll-button可以自定义上下或左右滚动按钮，::scroll-marker可以自定义切换按钮，用在CSS Scroll Snap交互场景下，以便实现完整的Carousel，Slider等交互效果。 一、一反常态，先上案例 先看::scroll-button()伪元素使用场景，可以模拟Scroll Snap上一项和下一项切换展示效果。...
JS PageSwap PageReveal事件干嘛用的？
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11717 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、总算有点眉目了 PageSwapEvent事件是一个新支持的全局事件，其兼容性如下： 目前Safari和Chrome均支持此事件类型。 乍一看，这个事件与页面选项卡切换相关，对吧，Swap就是交换的意思，但是，如果你在页面中写下类似这样的测试代码，是看不到任何效果的。 window.addEventListener("pageswap", (event) =>...
震惊，有生之年居然看到CSS attr()全属性支持
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11709 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、真的是有生之年系列 说实话，CSS attr()全属性支持这个特性我等了六七年至少有了。之前还为其写了个Polyfill工具：“Polyfill吊炸天的CSS attr()新语法” 本来以为这辈子都不会看到浏览器对其进行支持了。 万万没想到，Chrome133版本开始居然支持了，它居然支持了。 在过去，attr()函数只能用在content属性中，现在所有的CSS属性都支持，而且语法更加丰富，某种程度上，可以颠覆现有的前端开发习惯，一点也不夸张，...