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 75 followers
Latest posts
Last updated 4 days ago
text-wrap进化:支持两子属性和pretty stable新值
4 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伪元素又是干嘛用的？
9 days 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事件干嘛用的？
18 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11717 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、总算有点眉目了 PageSwapEvent事件是一个新支持的全局事件，其兼容性如下： 目前Safari和Chrome均支持此事件类型。 乍一看，这个事件与页面选项卡切换相关，对吧，Swap就是交换的意思，但是，如果你在页面中写下类似这样的测试代码，是看不到任何效果的。 window.addEventListener("pageswap", (event) =>...
震惊，有生之年居然看到CSS attr()全属性支持
25 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11709 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、真的是有生之年系列 说实话，CSS attr()全属性支持这个特性我等了六七年至少有了。之前还为其写了个Polyfill工具：“Polyfill吊炸天的CSS attr()新语法” 本来以为这辈子都不会看到浏览器对其进行支持了。 万万没想到，Chrome133版本开始居然支持了，它居然支持了。 在过去，attr()函数只能用在content属性中，现在所有的CSS属性都支持，而且语法更加丰富，某种程度上，可以颠覆现有的前端开发习惯，一点也不夸张，...
你知道吗，输入框的value值也能直接返回数值类型
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11700 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、直接正题-valueAsNumber 我也是最近才知道，原来DOM对象获取属性值，不是都是字符串类型，还可以是数值类型。 已知输入框元素： <input id="number" min="1" max="10"...
CSS animation-composition可以让动画效果累加
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11689 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、前言 CSS animation-composition属性其实出来有一段时间了，2年多，见下面的附图，之前有见人分享过，最近有人在上一篇文章评论区提过，才想起了他，决定写篇文章简单记录下。 这个属性可以设置CSS动画效果再执行的时候，相关的CSS属性值是替换、直接相加还是计算累积。 二、animation-composition语法和案例 其语法如下所示： /*...
告别transform，是时候直接使用scale, rotate属性啦
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11624 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、兼容性已经很OK啦 最近已经在正式项目中使用scale, rotate, translate属性了（注意，没有skew属性），很赞，毕竟这几个特性已经支持4年多了。 二、transform实现变换的问题 问题1，计算复杂 当多种变换参杂在一起的时候，就需要更多的理解成本，比方说下面的例子，transform变换类型的顺序不同，渲染结果也会不同。...
光速了解HTML shadowrootmode等属性的作用
about 2 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
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11622 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、其实是3个方法 Web前端开发中，下面这3个方法几乎是同一时间支持的，注意措辞，是几乎同一时间实际上还是有细微的差别的。哪3个方法呢，分别是： getHTML() 返回元素的innerHTML。 setHTMLUnsafe() 设置元素的innerHTML。 parseHTMLUnsafe()...
DOM新特性之caretPositionFromPoint API
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11620 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、caretPositionFromPoint特性的语法和作用 caretPositionFromPoint是浏览器支持不久的一个新特性，可以基于当前的光标位置，返回光标所对应元素的位置信息，在之前，此特性使用的是非标准的document.caretRangeFromPoint()方法实现的。 caretPositionFromPoint()方法和elementsFromPoint()方法的区别在于，前者返回节点及其偏移、尺寸等信息，而后者返回元素。 比方说有一段<p>元素文字描述信息，点击这段描述的某个文字，caretPositionFromPoint()方法可以返回精确的文本节点以及点击位置的字符偏移值，而elementsFromPoint()方法只能返回当前<p>元素。 作用 caretPositionFromPoint()的作用场景比较小众，一般用在分词分句这种交互场景中。 例如制作视频封面的时候，书封标题的文字需要中断，此时，就可以直接点击实现。...
JS EditContext API 简介
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11618 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、EditContext API的作用和设计背景 JS EditContext API可以用来实现比较高级的Web输入编辑功能，包括控制更精细，反应更灵敏，和输入法配合更完美等。 目前我们实现内容输入与编辑多是借用<input> 和...
光速了解script style link元素新增的blocking属性
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11568 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、前言 继续介绍Web前端前言新特性，这次要介绍的是一个HTML属性，名为blocking 属性它主要用于控制资源加载时对渲染的阻塞行为。 blocking 属性允许开发者对资源加载的优先级和时机进行精细控制，从而影响页面的渲染流程。浏览器在解析 HTML 文档时，会根据...