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 Feeder

zhangxinxu.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()...