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 173 followers
Latest posts
Last updated 4 days ago
震惊，有生之年居然看到CSS attr()全属性支持
4 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11709 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、真的是有生之年系列 说实话，CSS attr()全属性支持这个特性我等了六七年至少有了。之前还为其写了个Polyfill工具：“Polyfill吊炸天的CSS attr()新语法” 本来以为这辈子都不会看到浏览器对其进行支持了。 万万没想到，Chrome133版本开始居然支持了，它居然支持了。 在过去，attr()函数只能用在content属性中，现在所有的CSS属性都支持，而且语法更加丰富，某种程度上，可以颠覆现有的前端开发习惯，一点也不夸张，...
你知道吗，输入框的value值也能直接返回数值类型
10 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11700 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、直接正题-valueAsNumber 我也是最近才知道，原来DOM对象获取属性值，不是都是字符串类型，还可以是数值类型。 已知输入框元素： <input id="number" min="1" max="10"...
CSS animation-composition可以让动画效果累加
20 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11689 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、前言 CSS animation-composition属性其实出来有一段时间了，2年多，见下面的附图，之前有见人分享过，最近有人在上一篇文章评论区提过，才想起了他，决定写篇文章简单记录下。 这个属性可以设置CSS动画效果再执行的时候，相关的CSS属性值是替换、直接相加还是计算累积。 二、animation-composition语法和案例 其语法如下所示： /*...
告别transform，是时候直接使用scale, rotate属性啦
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11624 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、兼容性已经很OK啦 最近已经在正式项目中使用scale, rotate, translate属性了（注意，没有skew属性），很赞，毕竟这几个特性已经支持4年多了。 二、transform实现变换的问题 问题1，计算复杂 当多种变换参杂在一起的时候，就需要更多的理解成本，比方说下面的例子，transform变换类型的顺序不同，渲染结果也会不同。...
光速了解HTML shadowrootmode等属性的作用
about 1 month 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 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11622 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、其实是3个方法 Web前端开发中，下面这3个方法几乎是同一时间支持的，注意措辞，是几乎同一时间实际上还是有细微的差别的。哪3个方法呢，分别是： getHTML() 返回元素的innerHTML。 setHTMLUnsafe() 设置元素的innerHTML。 parseHTMLUnsafe()...
DOM新特性之caretPositionFromPoint API
about 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 简介
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11618 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、EditContext API的作用和设计背景 JS EditContext API可以用来实现比较高级的Web输入编辑功能，包括控制更精细，反应更灵敏，和输入法配合更完美等。 目前我们实现内容输入与编辑多是借用<input> 和...
光速了解script style link元素新增的blocking属性
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11568 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、前言 继续介绍Web前端前言新特性，这次要介绍的是一个HTML属性，名为blocking 属性它主要用于控制资源加载时对渲染的阻塞行为。 blocking 属性允许开发者对资源加载的优先级和时机进行精细控制，从而影响页面的渲染流程。浏览器在解析 HTML 文档时，会根据...
研究下attachInternals方法，可让普通元素有表单特性
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11570 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 本文又是独家内容，因为持续学习的人本就不多，持续关注前沿技术的人就更少，而关注自定义元素和原生表单特性的就更少，所以，也就我这样的老人家会研究并撰写相关的知识了。 可惜，现在做这类文字输出的收益极低，因为大家只能通过我的社交媒体账户获取，随着AI的日益普及，传统搜索引擎注定没落，而AI把我辛苦写的内容一抓，然后自己“思考”一番输出给用户，我什么好处都得不到。 某种意义上，AI智能是限制了原创内容输出的动力的，尤其是独立平台的个体创作者。 好了，不吐槽了，回到正题，讲下HTML元素的全局方法attachInternals()方法，此方法用在自定义元素中，也就是我们常说的Web Components组件中，可以让自定义元素具有原生表单元素一样的特性。 此方法的使用还是挺简单的，关键是如何理解其运作原理，想了下，没有通过一个案例来介绍更直观了。 一、自定义复选框组件案例...
一种更好的文字隐藏的方法-::first-line伪元素
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11559 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、前言 去年年中开始开启了《CSS世界》三部曲精讲视频系列，然后前段时间正好讲到::first-line伪元素，突然意识到，很长一段时间内，我居然把这个东西给忘记了。 ::first-line伪元素本身的作用是个鸡肋，就是控制第一行文字的样式。 但是其衍生的作用倒是有个妙用，那就是隐藏按钮或者图标内的文字的同时不改变color属性的上下文。 例如，LuLu UI中的按钮控件，其按钮的loading效果是隐藏文字，显示旋转图标🌼，按钮尺寸不变，如下GIF动图所示。 其中有个要求，那就是loading旋转图标的颜色要和文字保持一致，我们很自然会想到currentColor关键字，或者颜色不指定，直接继承。...
CSS @supports规则又新增font-tech,font-format判断
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11531 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 继续关注Web前端前沿新特性，这次快速介绍CSS @supports规则新增加的两个特性判断，一个是font-tech()，另外一个是font-format()函数，都来看看是什么作用吧。 一、font-tech()的功能 font-tech()函数可以检查浏览器是否支持用于布局和渲染的指定字体技术。 例如，下面这段CSS代码可以判断浏览器是否支持COLRv1字体（一种彩色字体技术）技术。 @supports font-tech(color-COLRv1)...