前端学习记录第5波，每半年一次。对前四次学习内容感兴趣的可以去我的掘金专栏“每周学习记录”进行了解。
第1周 12.30-1.5
本周学习了一个新的CSS媒体查询prefers-reduced-transparency，如果用户在系统层面选择了降低或不使用半透明，这个媒体查询就能够匹配，此特性与用户体验密切相关的。
更多内容参见我撰写的这篇文章：一个新的CSS媒体查询prefers-reduced-transparency —— www.zhangxinxu.com/wordpress/?…
第2周 1.6-1.12
这周新学习了一个名为Broadcast Channel的API，可以实现一种全新的广播式的跨页面通信。
过去的postMessage通信适合点对点，但是广播式的就比较麻烦。
而使用BroadcastChannel就会简单很多。
这里有个演示页面：www.zhangxinxu.com/study/20250…
左侧点击按钮发送消息，右侧两个内嵌的iframe页面就能接收到。
此API的兼容性还是很不错的：
更多内容可以参阅此文：“Broadcast Channel API简介，可实现Web页面广播通信” —— 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半圆弧，手把手教程” - 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方法，你知道作用吗？” - 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等方法” - 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属性” - 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简介” - www.zhangxinxu.com/wordpress/?…
第9周 2.24-3.2
CSS offset-path属性其实在8年前就介绍过了，参见：“使用CSS offset-path让元素沿着不规则路径运动” - www.zhangxinxu.com/wordpress/?…
不过那个时候的offset-path属性只支持不规则路径，也就是path()函数，很多CSS关键字，还有基本形状是不支持的。
终于，盼星星盼月亮。
从Safari 18开始，CSS offset-path属性所有现代浏览器全面支持了。
因此，很多各类炫酷的路径动画效果就能轻松实现了。例如下图的蚂蚁转圈圈动画：
详见我撰写的此文：“终于等到了，CSS offset-path全浏览器全支持” - 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判断” - www.zhangxinxu.com/wordpress/?…
第11周 3.10-3.16
本周学习了一种更好的文字隐藏的方法，那就是使用::first-line伪元素，CSS世界这本书有介绍。
::first-line伪元素可以在不改变元素color上下文的情况下变色。
可以让按钮隐藏文字的时候，里面的图标依然保持和原本的文字颜色一致。
详见这篇文章：“一种更好的文字隐藏的方法-::first-line伪元素” - www.zhangxinxu.com/wordpress/?…
第12周 3.17-3.23
本周学习了下attachInternals方法，这个方法很有意思，给任意自定义元素使用，可以让普通元素也有原生表单控件元素一样的特性。
比如浏览器自带的验证提示：
比如说提交的时候的FormData或者查询字符串：
有兴趣的同学可以访问“研究下attachInternals方法，可让普通元素有表单特性”这篇文章继续了解 - www.zhangxinxu.com/wordpress/?…
第13周 3.24-3.30
本周学习了一个新支持的HTML属性，名为blocking 属性。
它主要用于控制资源加载时对渲染的阻塞行为。
blocking 属性允许开发者对资源加载的优先级和时机进行精细控制，从而影响页面的渲染流程。浏览器在解析 HTML 文档时，会根据 blocking 属性的值来决定是否等待资源加载完成后再继续渲染页面，这对于优化页面性能和提升用户体验至关重要。
blocking 属性目前支持的HTML元素包括
使用示意：
更多内容参见我撰写的这篇文章：“光速了解script style link元素新增的blocking属性” - www.zhangxinxu.com/wordpress/?…
第14周 3.31-4.6
本周学习了JS EditContext API。
EditContext API 是 Microsoft Edge 浏览器提供的一个 Web API，它允许开发者在网页中处理文本输入事件，以便在原生输入事件（如 keydown、keypress 和 input）之外，实现更高级的文本编辑功能。
详见我撰写的这篇文章：“JS EditContext API 简介” - www.zhangxinxu.com/wordpress/?…
第15周 4.7-4.13
本周学习一个DOM新特性，名为caretPositionFromPoint API。
caretPositionFromPoint可以基于当前的光标位置，返回光标所对应元素的位置信息，在之前，此特性使用的是非标准的caretRangeFromPoint方法实现的。
和elementsFromPoint()方法的区别在于，前者返回节点及其偏移、尺寸等信息，而后者返回元素。
比方说有一段
元素文字描述信息，点击这段描述的某个文字，caretPositionFromPoint()方法可以返回精确的文本节点以及点击位置的字符偏移值，而elementsFromPoint()方法只能返回当前
元素。
不过此方法的应用场景比较小众，例如点击分词断句这种，大家了解下即可。
详见我撰写的这篇文章：“DOM新特性之caretPositionFromPoint API” - www.zhangxinxu.com/wordpress/?…
第16周 4.14-4.20
本周学习的是getHTML(), setHTMLUnsafe()和parseHTMLUnsafe()这三个方法，有点类似于可读写的innerHTML属性，区别在于setHTMLUnsafe()似乎对Shadow DOM元素的设置更加友好。
parseHTMLUnsafe则是个document全局方法，用来解析HTML字符串的。
这几个方法几乎是同一时间支持的，如下截图所示：
具体参见我写的这篇文章：介绍两个DOM新方法setHTMLUnsafe和getHTML - 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等属性的作用” - www.zhangxinxu.com/wordpress/?…
第18周 4.28-5.4
最近已经在正式项目中使用scale, rotate, translate属性了（注意，没有skew属性），很赞，毕竟这几个特性已经支持4年多了。
告别transform属性，直接使用scale、rotate和translate属性，是 CSS 发展的一个新趋势。它们不仅语法简洁、易于使用，而且能让我们更方便地对元素的变形效果进行独立控制，提高代码的可维护性和性能。在未来的前端开发中，我们应该积极拥抱这些新特性，让我们的 CSS 代码更加简洁、高效。
详见此文：告别transform，是时候直接使用scale, rotate属性啦 - www.zhangxinxu.com/wordpress/?…
第19周 5.5-5.11
本周学习CSS animation-composition属性，该属性可以让动画效果累加。
演示页面地址见这里：不同值混合后的动画效果demo - www.zhangxinxu.com/study/20250…
支持replace、add和accumulate这三个值，其中后面两个值很容易混淆，add直接就是属性值累加，accumulate则是属性的计算值累加。
animation-composition特别适合用在transform定位的同时需要transform动画的场景中。
详见我写的这篇文章：“CSS animation-composition可以让动画效果累加” - 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值也能直接返回数值类型 - 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()全属性支持” - www.zhangxinxu.com/wordpress/?…
第22周 5.26-6.1
本周学习的是JS PageSwapEvent事件，乍一看，以为是页面切换触发的事件。
后来细细一研究，并不是，这个事件发生在，如果页面设置了页面级别的Page Transition过渡效果（URL跳转的页面之间也能平滑过渡，参见下面GIF图），在页面离开的时候，会触发。
主要是方便开发者精确控制页面间的动画细节用的。
这么一看，此事件算是比较小众的，平常开发使用机会并不大，了解下即可。
详见此文：“JS PageSwap PageReveal事件干嘛用的？” -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伪元素又是干嘛用的？” - 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新值 - 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()函数转换工具 - www.zhangxinxu.com/sp/path2sha…
详见我撰写的这篇文章：“CSS小图标剪裁终极解决方案clip-path shape()函数” - www.zhangxinxu.com/wordpress/?…
-------------
好，以上就是我这个40岁的老前端上半年学习的内容，下半年我还将继续学习，继续保持对前端的好奇心，欢迎关注，转发，一起进步。
