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 76 followers
Latest posts
Last updated 3 days ago
HTML新search元素,h1规则要变,声明式Shadow DOM
3 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11729 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、全新的search元素 Chrome 117和Safari 17新支持了一个HTML元素名为 <search>，用于定义搜索区域，通常作为表单的一部分。 兼容性如下图所示： 如果大家通过AI了解<search>元素，可能会看到类似下图的说法，注意，这个说法是错误的，一本正经的胡说八道。...
好诶，select下拉框元素支持样式完全自定义啦！
10 days 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()函数
13 days 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新值
25 days 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伪元素又是干嘛用的？
about 1 month 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事件干嘛用的？
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11717 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、总算有点眉目了 PageSwapEvent事件是一个新支持的全局事件，其兼容性如下： 目前Safari和Chrome均支持此事件类型。 乍一看，这个事件与页面选项卡切换相关，对吧，Swap就是交换的意思，但是，如果你在页面中写下类似这样的测试代码，是看不到任何效果的。 window.addEventListener("pageswap", (event) =>...
震惊，有生之年居然看到CSS attr()全属性支持
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11709 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、真的是有生之年系列 说实话，CSS attr()全属性支持这个特性我等了六七年至少有了。之前还为其写了个Polyfill工具：“Polyfill吊炸天的CSS attr()新语法” 本来以为这辈子都不会看到浏览器对其进行支持了。 万万没想到，Chrome133版本开始居然支持了，它居然支持了。 在过去，attr()函数只能用在content属性中，现在所有的CSS属性都支持，而且语法更加丰富，某种程度上，可以颠覆现有的前端开发习惯，一点也不夸张，...
你知道吗，输入框的value值也能直接返回数值类型
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11700 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、直接正题-valueAsNumber 我也是最近才知道，原来DOM对象获取属性值，不是都是字符串类型，还可以是数值类型。 已知输入框元素： <input id="number" min="1" max="10"...
CSS animation-composition可以让动画效果累加
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11689 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、前言 CSS animation-composition属性其实出来有一段时间了，2年多，见下面的附图，之前有见人分享过，最近有人在上一篇文章评论区提过，才想起了他，决定写篇文章简单记录下。 这个属性可以设置CSS动画效果再执行的时候，相关的CSS属性值是替换、直接相加还是计算累积。 二、animation-composition语法和案例 其语法如下所示： /*...
告别transform，是时候直接使用scale, rotate属性啦
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11624 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、兼容性已经很OK啦 最近已经在正式项目中使用scale, rotate, translate属性了（注意，没有skew属性），很赞，毕竟这几个特性已经支持4年多了。 二、transform实现变换的问题 问题1，计算复杂 当多种变换参杂在一起的时候，就需要更多的理解成本，比方说下面的例子，transform变换类型的顺序不同，渲染结果也会不同。...
光速了解HTML shadowrootmode等属性的作用
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11624 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、光速有多快？ HTML <template>元素新支持了一个名为shadowrootmode的属性，其兼容性如下所示： shadowrootmode作用 当我们在Web Components组件开发的时候，声明组件的Shadow DOM模式是open，那么我们使用类似getHTML()方法获取ShadowRoots代码的时候，就会看到这个属性，例如。...
介绍两个DOM新方法setHTMLUnsafe和getHTML
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11622 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、其实是3个方法 Web前端开发中，下面这3个方法几乎是同一时间支持的，注意措辞，是几乎同一时间实际上还是有细微的差别的。哪3个方法呢，分别是： getHTML() 返回元素的innerHTML。 setHTMLUnsafe() 设置元素的innerHTML。 parseHTMLUnsafe()...