前端学习记录第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，语法如下：
css
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进行微调，使细节完美。
css
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字体（一种彩色字体技术）技术。
typescript
@supports font-tech(color-COLRv1) {}2. font-format()
font-format()这个比较好理解，是检测浏览器是否支持指定的字体格式的。
typescript
@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属性设置的，或者在声明性创建影子根时使用