40岁老前端2025年上半年都学了什么？

前端学习记录第5波，每半年一次。对前四次学习内容感兴趣的可以去我的掘金专栏“每周学习记录”进行了解。

第1周 12.30-1.5

本周学习了一个新的CSS媒体查询prefers-reduced-transparency，如果用户在系统层面选择了降低或不使用半透明，这个媒体查询就能够匹配，此特性与用户体验密切相关的。

更多内容参见我撰写的这篇文章：一个新的CSS媒体查询prefers-reduced-transparency —— http://www.zhangxinxu.com/wordpress/?…

第2周 1.6-1.12

这周新学习了一个名为Broadcast Channel的API，可以实现一种全新的广播式的跨页面通信。

过去的postMessage通信适合点对点，但是广播式的就比较麻烦。

而使用BroadcastChannel就会简单很多。

这里有个演示页面：http://www.zhangxinxu.com/study/20250…

左侧点击按钮发送消息，右侧两个内嵌的iframe页面就能接收到。

此API的兼容性还是很不错的：

更多内容可以参阅此文：“Broadcast Channel API简介，可实现Web页面广播通信” —— http://www.zhangxinxu.com/wordpress/?…

第3周 1.13-1.19

这周学习的是SVG半圆弧语法，因为有个需求是实现下图所示的图形效果，其中几段圆弧的长度占比每个人是不一样的，因此，需要手写SVG路径。

圆弧的SVG指令是A，语法如下：

M x1 y1 A rx ry x-axis-rotation large-arc-flag sweep-flag x2 y2

看起来很复杂，其实深究下来还好：

详见这篇文章：“如何手搓SVG半圆弧，手把手教程” - http://www.zhangxinxu.com/wordpress/?…

第4周-第5周 1.20-2.2

春节假期，学什么学，high起来。

第6周 2.3-2.9

本周学习Array数组新增的with等方法，这些方法在数组处理的同时均不会改变原数组内容，这在Vue、React等开发场景中颇为受用。

例如，在过去，想要不改变原数组改变数组项，需要先复制一下数组：

现在有了with方法，一步到位：

类似的方法还有toReversed()、toSorted()和toSpliced()。

更新内容参见这篇文章：“JS Array数组新的with方法，你知道作用吗？” - http://www.zhangxinxu.com/wordpress/?…

第7周 2.10-2.16

本周学习了两个前端新特性，一个JS的，一个是CSS的。

1. Set新增方法

JS Set新支持了intersection, union, difference等方法，可以实现类似交集，合集，差集的数据处理，也支持isDisjointFrom()是否相交，isSubsetOf()是否被包含，isSupersetOf()是否包含的判断。

详见此文：“JS Set新支持了intersection, union, difference等方法” - http://www.zhangxinxu.com/wordpress/?…

2. font-size-adjust属性

CSS font-size-adjust属性，可以基于当前字形的高宽自动调整字号大小，以便各种字体的字形表现一致，其解决的是一个比较细节的应用场景。

例如，16px的苹方和楷体，虽然字号设置一致，但最终的图形表现楷体的字形大小明显小了一圈：

此时，我们可以使用font-size-adjust进行微调，使细节完美。

p {  font-size-adjust: 0.545;}

此时的中英文排版效果就会是这样：

更新细节知识参见我的这篇文章：“不要搞混了，不是text而是CSS font-size-adjust属性” - http://www.zhangxinxu.com/wordpress/?…

第8周 2.17-2.23

本周学习的是HTML permission元素和Permissions API。

这两个都是与Web浏览器的权限申请相关的。

在Web开发的时候，我们会经常用到权限申请，比方说摄像头，访问相册，是否允许通知，又或者地理位置信息等。

但是，如果用户不小心点击了“拒绝”，那么用户就永远没法使用这个权限，这其实是有问题的，于是就有了元素，权限按钮直接暴露在网页中，直接让用户点击就好了。

但是，根据我后来的测试，Chrome浏览器放弃了对元素的支持，因此，此特性大家无需关注。

那Permissions API又是干嘛用的呢？

在过去，不同类型的权限申请会使用各自专门的API去进行，这就会导致开始使用的学习和使用成本比较高。

既然都是权限申请，且系统出现的提示UI都近似，何必来个大统一呢？在这种背景下，Permissions API被提出来了。

所有的权限申请全都使用一个统一的API名称入口，使用的方法是Permissions.query()。

完整的介绍可以参见我撰写的这篇文章：“HTML permission元素和Permissions API简介” - http://www.zhangxinxu.com/wordpress/?…

第9周 2.24-3.2

CSS offset-path属性其实在8年前就介绍过了，参见：“使用CSS offset-path让元素沿着不规则路径运动” - http://www.zhangxinxu.com/wordpress/?…

不过那个时候的offset-path属性只支持不规则路径，也就是path()函数，很多CSS关键字，还有基本形状是不支持的。

终于，盼星星盼月亮。

从Safari 18开始，CSS offset-path属性所有现代浏览器全面支持了。

因此，很多各类炫酷的路径动画效果就能轻松实现了。例如下图的蚂蚁转圈圈动画：

详见我撰写的此文：“终于等到了，CSS offset-path全浏览器全支持” - http://www.zhangxinxu.com/wordpress/?…

第10周 3.3-3.9

CSS @supports规则新增两个特性判断，分别是font-tech()和font-format()函数。

1. font-tech()

font-tech()函数可以检查浏览器是否支持用于布局和渲染的指定字体技术。

例如，下面这段CSS代码可以判断浏览器是否支持COLRv1字体（一种彩色字体技术）技术。

@supports font-tech(color-COLRv1) {}

2. font-format()

font-format()这个比较好理解，是检测浏览器是否支持指定的字体格式的。

@supports font-format(woff2) {   /* 浏览器支持woff2字体 */ }

不过这两个特性都不实用。

font-tech()对于中文场景就是鸡肋特性，因为中文字体是不会使用这类技术的，成本太高。

font-format()函数的问题在于出现得太晚了。例如woff2字体的检测，这个所有现代浏览器都已经支持了，还有检测的必要吗，没了，没有意义了。

不过基于衍生的特性还是有应用场景的，具体参见此文：“CSS supports规则又新增font-tech,font-format判断” - http://www.zhangxinxu.com/wordpress/?…

第11周 3.10-3.16

本周学习了一种更好的文字隐藏的方法，那就是使用::first-line伪元素，CSS世界这本书有介绍。

::first-line伪元素可以在不改变元素color上下文的情况下变色。

可以让按钮隐藏文字的时候，里面的图标依然保持和原本的文字颜色一致。

详见这篇文章：“一种更好的文字隐藏的方法-::first-line伪元素” - http://www.zhangxinxu.com/wordpress/?…

第12周 3.17-3.23

本周学习了下attachInternals方法，这个方法很有意思，给任意自定义元素使用，可以让普通元素也有原生表单控件元素一样的特性。

比如浏览器自带的验证提示：

比如说提交的时候的FormData或者查询字符串：

有兴趣的同学可以访问“研究下attachInternals方法，可让普通元素有表单特性”这篇文章继续了解 - http://www.zhangxinxu.com/wordpress/?…

第13周 3.24-3.30

本周学习了一个新支持的HTML属性，名为blocking 属性。

它主要用于控制资源加载时对渲染的阻塞行为。

blocking 属性允许开发者对资源加载的优先级和时机进行精细控制，从而影响页面的渲染流程。浏览器在解析 HTML 文档时，会根据 blocking 属性的值来决定是否等待资源加载完成后再继续渲染页面，这对于优化页面性能和提升用户体验至关重要。

blocking 属性目前支持的HTML元素包括

使用示意：

更多内容参见我撰写的这篇文章：“光速了解script style link元素新增的blocking属性” - http://www.zhangxinxu.com/wordpress/?…

第14周 3.31-4.6

本周学习了JS EditContext API。

EditContext API 是 Microsoft Edge 浏览器提供的一个 Web API，它允许开发者在网页中处理文本输入事件，以便在原生输入事件（如 keydown、keypress 和 input）之外，实现更高级的文本编辑功能。

详见我撰写的这篇文章：“JS EditContext API 简介” - http://www.zhangxinxu.com/wordpress/?…

第15周 4.7-4.13

本周学习一个DOM新特性，名为caretPositionFromPoint API。

caretPositionFromPoint可以基于当前的光标位置，返回光标所对应元素的位置信息，在之前，此特性使用的是非标准的caretRangeFromPoint方法实现的。

和elementsFromPoint()方法的区别在于，前者返回节点及其偏移、尺寸等信息，而后者返回元素。

比方说有一段

元素文字描述信息，点击这段描述的某个文字，caretPositionFromPoint()方法可以返回精确的文本节点以及点击位置的字符偏移值，而elementsFromPoint()方法只能返回当前

元素。

不过此方法的应用场景比较小众，例如点击分词断句这种，大家了解下即可。

详见我撰写的这篇文章：“DOM新特性之caretPositionFromPoint API” - http://www.zhangxinxu.com/wordpress/?…

第16周 4.14-4.20

本周学习的是getHTML(), setHTMLUnsafe()和parseHTMLUnsafe()这三个方法，有点类似于可读写的innerHTML属性，区别在于setHTMLUnsafe()似乎对Shadow DOM元素的设置更加友好。

parseHTMLUnsafe则是个document全局方法，用来解析HTML字符串的。

这几个方法几乎是同一时间支持的，如下截图所示：

具体参见我写的这篇文章：介绍两个DOM新方法setHTMLUnsafe和getHTML - http://www.zhangxinxu.com/wordpress/?…

第17周 4.21-4.27

光速了解HTML shadowrootmode属性的作用。

shadowRoot的mode是个只读属性，可以指定其模式——打开或关闭。

这定义了影子根的内部功能是否可以从JavaScript访问。

当影子根的模式为“关闭”时，影子根的实现内部无法从JavaScript访问且不可更改，就像元素的实现内部不能从JavaScript访问或不可更改一样。

属性值是使用传递给Element.attachShadow()的对象的options.mode属性设置的，或者在声明性创建影子根时使用<template>元素的shadowrootmode属性设置的。

类似的属性总共有4个：

• 
  
• shadowRootClonable 标示可复制状态
  
• shadowRootDelegatesFocus 标示聚焦委托状态（子元素点击，ShadowRoot获得焦点）
  
• shadowRootMode 标示开放状态
  
• shadowRootSerializable 标示序列化状态
  

这些属性都是与Web Components开发相关的，我看还有人用在SSR中，可以遍历组件元素内部的信息。

详见我整理的这篇文章：“光速了解HTML shadowrootmode等属性的作用” - http://www.zhangxinxu.com/wordpress/?…

第18周 4.28-5.4

最近已经在正式项目中使用scale, rotate, translate属性了（注意，没有skew属性），很赞，毕竟这几个特性已经支持4年多了。

告别transform属性，直接使用scale、rotate和translate属性，是 CSS 发展的一个新趋势。它们不仅语法简洁、易于使用，而且能让我们更方便地对元素的变形效果进行独立控制，提高代码的可维护性和性能。在未来的前端开发中，我们应该积极拥抱这些新特性，让我们的 CSS 代码更加简洁、高效。

详见此文：告别transform，是时候直接使用scale, rotate属性啦 - http://www.zhangxinxu.com/wordpress/?…

第19周 5.5-5.11

本周学习CSS animation-composition属性，该属性可以让动画效果累加。

演示页面地址见这里：不同值混合后的动画效果demo - http://www.zhangxinxu.com/study/20250…

支持replace、add和accumulate这三个值，其中后面两个值很容易混淆，add直接就是属性值累加，accumulate则是属性的计算值累加。

animation-composition特别适合用在transform定位的同时需要transform动画的场景中。

详见我写的这篇文章：“CSS animation-composition可以让动画效果累加” - http://www.zhangxinxu.com/wordpress/?…

第20周 5.12-5.18

这是这周才知道的一个知识，那就是输入框的value值也能直接返回数值类型。

已知输入框元素： 

<input id="number" min="1" max="10" type="number" />

平常我们获取输入框的值都是使用 number.value 获取的，但是这个属性的返回值是个字符串。

其实现在浏览器支持直接返回数值类型的，使用numer.valueAsNumber即可。

类似的还有valueAsDate属性，适合时间类型的输入框。

详见此文：你知道吗，输入框的value值也能直接返回数值类型 - http://www.zhangxinxu.com/wordpress/?…

第21周 5.19-5.25

Chrome 133实现了attr()函数所有CSS属性都支持，这个特性可就厉害了。

举个例子，有一个链接地址是图片，那么，无需img元素介入，纯CSS就能让这个地址以图片的方式显示出来。

代码示意：

<a href="example.jpg">图片？</a>
[href]::before {   
content: '';   
display: block;  
width: 150px; height: 200px;   
background: image-set(attr(href));   
background-size: cover;

}

此时，图片显示的效果就可以实现了。

关于attr()函数更多内容，可以参加此文：“震惊，有生之年居然看到CSS attr()全属性支持” - http://www.zhangxinxu.com/wordpress/?…

第22周 5.26-6.1

本周学习的是JS PageSwapEvent事件，乍一看，以为是页面切换触发的事件。

后来细细一研究，并不是，这个事件发生在，如果页面设置了页面级别的Page Transition过渡效果（URL跳转的页面之间也能平滑过渡，参见下面GIF图），在页面离开的时候，会触发。

主要是方便开发者精确控制页面间的动画细节用的。

这么一看，此事件算是比较小众的，平常开发使用机会并不大，了解下即可。

详见此文：“JS PageSwap PageReveal事件干嘛用的？” -http://www.zhangxinxu.com/wordpress/?…

第23周 6.2-6.8

本周学习的是CSS新的伪元素::scroll-button，其通过特定语法，可以给滚动容器创建自定义的滚动定位按钮，例如：

ul::scroll-button(left) { content: "◄"; } 
ul::scroll-button(right){content:"►";}

配合Scroll Snap，可以纯CSS实现slider效果：

更多内容容我本周继续深入学习。

第24周 6.9-6.15

本周学习::scroll-marker伪元素。

上周学习的::scroll-button()伪元素函数可以给Carousel 效果增加左右切换按钮

这周学习的::scroll-marker则可以给Scroll Snap交互的列表元素创建索引切换按钮，以便定位到具体的元素上，效果参见：

::scroll-marker需要配合scroll-marker-group属性和::scroll-marker-group伪元素一起使用才能生效。

另外，同时被浏览器支持的还有::column伪元素，如果Snap效果是使用columns布局实现的时候使用。

更多内容，可以访问这篇文章：“CSS ::scroll-button ::scroll-marker伪元素又是干嘛用的？” - http://www.zhangxinxu.com/wordpress/?…

第25周 6.16-6.22

本周学习了text-wrap的两个子属性和两个新值。

text-wrap:pretty声明和text-wrap:wrap是一样的，区别在于text-wrap:pretty更注重排版，而非性能，也就是wrap的算法速度更快。

text-wrap:stable可以让编辑内容前面的行内容保持稳定，而不会整个文本内容发生排版变化。

两个子属性，一个是text-wrap-mode，还有一个是text-wrap-style。

更多相关内容参见这篇文章：text-wrap进化:支持两子属性和pretty stable新值 - http://www.zhangxinxu.com/wordpress/?…

第26周 6.23-6.29

本周学习clip-path shape()函数。

之前的路径剪裁使用的是path()函数，但是会有尺寸无法自适应的问题。

因为SVG路径里面的数值都是固定的像素px大小，在SVG元素中，这些大小与SVG外部尺寸关联，不会有问题，但是，放在CSS图像中，那就问题大了。

例如，Font Awesome小图标SVG基本尺寸都是512*512，其path坐标值都是好几百的值。

但是，CSS小图标的尺寸是20*20，如果应用几百数值的剪裁路径，小图标肯定就有问题，对不对？

要么path坐标等比例缩小，要么CSS小图标尺寸也设成512像素，然后再zoom缩放，但这样实现就很麻烦。

于是，在这个背景下，clip-path的shape()函数应运而生。

.use-shape {  

  clip-path: shape(from 50% 0%,curve to 0% 50% with 22.38% 0%/0% 22.38%,smooth by 50% 50% with 22.38% 50%,smooth by 50% -50% with 50% -22.38%,smooth to 50% 0% with 77.62% 0%,close);

}

支持百分比值，和CSS calc等数学函数，自动和元素尺寸相适应，就很厉害！

对此，我还专门开发了一个CSS clip-path path() to shape()函数转换工具 - http://www.zhangxinxu.com/sp/path2sha…

详见我撰写的这篇文章：“CSS小图标剪裁终极解决方案clip-path shape()函数” - http://www.zhangxinxu.com/wordpress/?…

-------------

好，以上就是我这个40岁的老前端上半年学习的内容，下半年我还将继续学习，继续保持对前端的好奇心，欢迎关注，转发，一起进步。