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
Last updated about 21 hours ago
about 21 hours ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11847 本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。 一、@function规则来啦 Chrome 139浏览器除了新支持了 CSS if()函数(参见“CSS倒反天罡居然支持if()函数了”一文),还支持了期待已久的@function规则。 @function规则可以让我们自定义运算逻辑,比之前单纯的CSS var()变量要更加强大。...
8 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11844 本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。 一、hidden属性新增新值 任意HTML元素,设置hidden属性后,会隐藏自身(样式没有被重置的前提下)。 可能有些人并不知道,hidden属性还支持一个名为until-found值,他可以让内容隐藏,但是在特殊场景下也会显示。 这个特殊场景包括锚点锚定,或者浏览器层面的文字搜索匹配。 我们开看例子。 如下HTML代码: <div...
11 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11791 本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。 一、大开眼界的CSS效果 先通过几个GIF或静态图看下CSS corner-shape属性可以实现怎样的图形表现效果。 1. 十字形、菱形 2. 六边形...
22 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11807 本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。 一、温故而知新 在学习本文的scroll-state容器滚动查询之前,大家需要先了解CSS @container容器查询。 详见我之前的文章:“介绍2022年最期待的CSS container容器查询”。 这东西可以检测容器尺寸,并进行响应的布局调整,很强大。 现在,@container容器查询,再次进化,可以识别滚动边缘,让CSS的交互能力更上一层楼。...
30 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部分:...
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11801 本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。 一、关于popover=hint 去年年初有介绍HTML popover属性,详见“该使用原生popover属性模拟下拉了”一文。 可以说是弹出浮层最佳解决方案,自动显隐特性,外加顶层特性,非常香。 但是有一个问题,那就是一次最多只能有一个弹出层显示(如果不使用 showPopover() 方法手动设置的话),但是有些轻提示,仅仅是用做信息展示,可以无需关闭之前的弹出层,之前的popover属性能力就不够。...
about 1 month 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()...
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11765 本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。 一、RegExp.escape静态方法 正则对象RegExp新增了一个名为escape()的静态方法,可以对字符串中不安全的,或者可以影响正则匹配的字符进行转义。 这些在正则中具有特殊含义的字符包括,如点号(.)、星号(*)、问号(?)、加号(+)、花括号({})、方括号([])、圆括号(())、竖线(|)和反斜杠()等。 目前所有现代浏览器都已经支持了该特性。 语法 语法比较简单,如下所示: RegExp.escape(string)...
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11729 本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。 一、全新的search元素 Chrome 117和Safari 17新支持了一个HTML元素名为 <search>,用于定义搜索区域,通常作为表单的一部分。 兼容性如下图所示: 如果大家通过AI了解<search>元素,可能会看到类似下图的说法,注意,这个说法是错误的,一本正经的胡说八道。...
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11746 本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。 Tips:演示页面在本文最后。 一、appearance:base-select <select>下拉框元素现在已经支持完全自定义了,太不容易了,太感动了。 LuLu UI的Edge主题的Select组件现在已经接入了这个新特性。 如果你的浏览器是Chrome 135+,可以访问这里体验一下。...
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...
3 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的作用...