快速过下我2026年上半年的前端学了些啥

第1周 12.29-1.4

本周学习使用CSSStyleSheet构造CSS样式。

如果想要在页面中插入一段全新的CSS样式，大多数的前端开发人员都是通过创建<style>元素，然后插入字符串CSS代码实现的。

这种方法的不足非常明显，难以进行细粒度操作，例如要修改、删除或查询某一条具体的CSS规则，必须手动解析整个庞大的CSS字符串，这既繁琐又容易出错。

于是CSSStyleSheet()构造函数应运而生，专门用来创建CSS样式。

// 构造空白的样式表
const sheet = new CSSStyleSheet();
// 给样式表添加对应的CSS规则
sheet.replaceSync("article h3 { text-shadow: 2px 2px 4px #0006; }");
// 添加到页面中
document.adoptedStyleSheets.push(sheet);

并且提供了若干方法专门进行样式的插入、删除等处理。

兼容性不错。

有兴趣可以访问这里：学会使用CSSStyleSheet构造CSS样式

第2周 1.5-1.11

学习使用纯CSS实现直线或箭头连接元素效果。

主要是使用CSS锚点定位和一些CSS图像绘制技巧。

这个效果的实现比我一开始预想的要复杂些。

演示页面地址参见这里。

文章地址：纯CSS实现折线连接两个任意元素效果

第3周 1.12-1.18

本周学习CSS text-decoration-inset属性。

可以改变下划线的左右缩进大小。

目前兼容性还不好，仅Firefox浏览器才支持。

有兴趣的可以访问这里了解：CSS text-decoration-inset属性首发简介

第4周 1.19-1.25

本周学习Promise.try()和Promise.withResolvers()。

Promise.try() 可以捕获同步执行或返回 Promise 的异步错误，但是try...catch()呢有个小问题，那就是如果里面有异步操作，如 setTimeout、Promise 内部，那么这个错误就捕获不了。

Promise.withResolvers() 是 ECMAScript 2024 中新增的一个静态方法，其核心作用是将 Promise 的创建与其状态控制（resolve 和 reject）解耦，允许开发者同时获得一个新的 Promise 实例以及与其绑定的、用于控制其状态的函数。

更多内容参见：Promise.try()和Promise.withResolvers()作用速览

第5周 1.26-2.1

本周学习moveBefore这个API。

此API语法和之前的insertBefore类似，区别在于：

• insertBefore的移动是通过"删除" → "创建"实现的

• moveBefore是单纯地移动

因此，moveBefore可以保留元素当前的动画状况、交互状态、开关状态等。

同时，moveBefore还与Web Components开发相关联，当设置connectedMoveCallback生命周期函数的时候，disconnectedCallback()和connectedCallback()生命周期函数是不会执行的。

详见我的这篇文章：告别insertBefore，使用moveBefore移动DOM元素

第6周 2.2-2.8

本周学习CSS text-box属性。

在传统的 CSS 盒模型 中，文本行高（line-height）会在文字上下产生额外的"半行间距"（half-leading）。

这使得文本难以与旁边的图标或容器边缘精确对齐。

使用 text-box属性可以：

• 去除文本顶部和底部的多余空白。

• 实现严格的垂直居中和视觉对齐。

然而自己实践下来，CSS text-box属性并不能解决内联元素的垂直对齐问题。

具体细节可以参考：CSS text-box属性又是干嘛用的？

第7周 2.9-2.15 ~ 第8周 2.16-2.22

春节啦，学个毛啊，一起浪起来！♫ ♬ ♪ ♩ ♭ ♪

第9周 2.23-3.1

我最近才知道，JS正则除了全局g，不区分大小写i，换行m，还支持一个名为y的标识符。

表示粘性匹配，特别适合处理有结构规律的长文本。

更多内容见这篇文章：JS正则表达式y标识符之粘性匹配

第10周 3.2-3.8

本周学习HTML interestfor属性与悬停popover交互效果。

之前介绍过popover属性可以让元素有点击浮层交互，现在，Hover悬停浮层交互也有了原生实现方法，那就是interestfor属性。

不仅支持popover浮层，非popover类型对象元素也支持，然后触发元素除了按钮，还可以是链接元素，有配套CSS伪类 :interest-source和:interest-target。

可以匹配目标元素激活的状态。

更详细内容可以访问我这篇文章：HTML interestfor属性与悬停popover交互效果

第11周 3.9-3.15

本周学习了HTML <dialog>元素新支持的closedBy属性。

在之前，Dialog模态框弹层点击后面的黑色背景是不会关闭的。

现在，有了closedBy属性，我们可以主动设置点击背景蒙层会不会关闭了。

目前Chrome和Firefox都已经支持，不支持也没关系，可以引入Polyfill兼容。

更多内容可以参见这篇文章：HTML dialog元素新支持了closedBy属性

第12周 3.16-3.22

本周学习了下WebTransport API。

此API被誉为下一代Web双向通信技术。

WebSocket虽然可以解决大部分的问题，但是并不完美，例如队头阻塞、只能单一流传输、网络切换就断连，尤其是做实时游戏、直播推流这类对延迟要求极高的场景，总觉得差点意思。

所以就有了 WebTransport API，特别适用于在高并发、低延迟的实时场景。

更多内容参见此文：浅学WebTransport API：下一代Web双向通信技术

第13周 3.23-3.29

本周学习CSS corner-shape背景底纹技术。

corner-shape可以实现各种图形效果，如下图所示：

有没有可能把这些图形作为背景底纹显示呢？

还真可以，使用SVG的<foreignObject>元素。

下面的就是实现的案例：

更多内容可以访问我的这篇文章：CSS corner-shape与背景底纹技术

第14周 3.30-4.5

本周学习CSS六边形头像与蜂巢布局的实现。

首先是六边形头像：

img {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: 150px;
  border: 1px solid #0001;
  object-fit: cover;
}

效果示意：

我们可以基于这个六边形进一步实现蜂巢布局效果：

具体的实现参见此文：CSS六边形头像的实现与蜂巢布局

第15周 4.6-4.12

本周学习JS WeakRef弱引用。

JS语言中的弱类型除了本文要介绍的WeakRef，还有WeakMap和WeakSet。

其中：

WeakMap 和 WeakSet 是集合类数据结构，弱引用是它们管理成员的方式；WeakRef 是对单个对象的弱引用包装器，让你能主动检查对象是否还活着。

用更加通俗的话解释就是：

• **WeakMap：**我想给对象贴标签/存数据，但不阻止它被回收

• **WeakSet：**我想记住哪些对象出现过，但不阻止它们被回收

• **WeakRef：**我想保留一个对象的引用，但允许它随时被回收，用时再检查

虽然WeakRef可以优化内存开销，看起来很有价值，不过无论是官方还是我个人都建议大家谨慎使用，这又是为何呢？

详见文章：务必谨慎使用JS WeakRef弱引用

第16周 4.13-4.19

本周预研借助 mediabunny 纯JS实现视频水印、剪裁、合成等功能，之前开发的时候使用的是原生WebDecodecs API，虽然更有技术含量，但是代码深奥，对于其他接手项目的同事不友好。

最近遇到类似需求，决定使用成熟的工具库，那就是mediabunny。

确实业务代码清爽多了。

详见：借助mediabunny纯JS实现视频水印、剪裁、合成等功能

第17周 4.20-4.26

本周学习一个很有趣的CSS技巧，即如何使用CSS判断鼠标从哪个方向进入元素？

如下效果，如果鼠标从下方进入，笑脸，从上方进来，则是哭丧脸。

原理很简单：

创建一个50%高度的覆盖层覆盖在.face元素上，如果用户的鼠标进入后首先触碰的事这个覆盖层，就会匹配.face-x:hover:not(:has(.face:hover))，如果是从另外一个方向进入，由于没有覆盖层阻挡，就会匹配.face-x:has(.face:hover)。

如果匹配了前者，那么迅速将覆盖层的尺寸覆盖整个容器元素；如果匹配了后者，迅速隐藏覆盖层。

这样，两种匹配状态就不会冲突。

实现源码和更加详细的解释可以参见：如何使用CSS判断鼠标从哪个方向进入元素？

第18周 4.27-5.3

本周学习JSON.rawJSON方法。

在前端开发中，JSON对象的方法我们最常用的就是parse和stringify，几乎每天都在和它们打交道------接口请求后用parse解析数据，提交数据前用stringify序列化对象。

大家都知道，JavaScript里的数字都是浮点数，这就导致有些超大整数无法被精确表示。比如我们有一个超大的ID值：12345678901234567890，当我们用stringify序列化它时，会发现一个诡异的问题，末尾的数字被自动"四舍五入"了，精度直接丢失！

这不是bug，而是JavaScript浮点数的固有缺陷------它无法精确表示所有整数，当数字超过2^53时，就会出现精度偏差。

JSON.rawJSON可以解决此问题。

除此之外，JSON.rawJSON还可以精确控制JSON序列化格式。

更多内容参见：JSON.rawJSON方法的作用是什么？

第19周 5.4-5.10

本周学习内容是尝试使用pretext实现文字四面环绕效果。

有兴趣可以访问这里了解更多：pretext与文字四面环绕效果的实现

第20周 5.11-5.17

本周学习CSS caret-shape属性。

先前的caret-color属性可以让我们定义光标的颜色，现在光标的形状也能设置了，同时还能控制光标是否闪烁。

详见此文：光标的形状也能设置了，就是CSS caret-shape属性

第21周 5.18-5.24

本周学习text-align:match-parent声明。

此特性其实在《CSS新世界》中有介绍。

其字面作用是继承父元素的对齐方式，实际上，这个字面作用是很奇怪的。

因为text-align本身就有继承特性，实际上，它的作用体现在计算值的获取上。

当父元素设置为text-align: end，默认情况下，子元素的textAlign计算值会是end。

但是，end可能是左侧，也可能是右侧（受direction属性控制）。

如果我们想要知道精确的left还是right，就需要使用text-align:match-parent。

详见此文：1分钟速度了解text-align match-parent声明

第22周 5.25-5.31

继preventScroll参数之后，JS focus()方法又新增了一个名为focusVisible的可选参数，用来控制控件元素被focus()方法触发后的焦点轮廓是否显示。

与无障碍访问细节相关的特性。

详见此文：新特性速递：focus()行为新增focusVisible控制

第23周 6.1-6.7

CSS终于出了个可以自动匹配色值对比度的函数，这在无障碍访问领域特别受用，前景背景色从此可以自动适配了。

这个函数就是CSS contrast-color()函数。

这个函数可以根据传入的色值返回白色或者黑色（根据对比度）。

目前所有主流浏览器都已经支持了：

详见此文：CSS contrast-color()函数简介

第24周 6.8-6.14

本周学习全新的CSS border-shape属性。

border-shape可以让元素的边框盒子为任意的规则或不规则形状。

例如：

<style>
  .star {
    width: 150px;
    aspect-ratio: 1.076;
    border: dashed red;
    border-shape: shape(from 50% 0%,line to 62.39% 37.51%,line to 100% 37.51%,line to 69.85% 61.58%,line to 80.88% 100%,line to 50% 76.84%,line to 19.12% 100%,line to 30.15% 61.58%,line to 0% 37.51%,line to 37.61% 37.51%,close);
    box-shadow: 2px 2px 4px #0008;
    background: lightyellow;
  }
</style>
<canvas class="star"></canvas>

此时，便可以得到如下截图所示的渲染效果：

这是CSS图形表现领域的又一个利器，不过目前兼容性还不太好，只有Chrome浏览器支持，不过，不支持的浏览器可以使用clip-path+drop-shadow()滤镜（标签需嵌套）近似模拟。

详见此文：全新的CSS border-shape属性简介

第25周 6.15-6.21

本周学习HTML command属性以及JS toggle事件。

HTML command属性只能设置在按钮元素上，可以触发元素内置的方法。 例如：

<button commandfor="my-dialog" command="show-modal">
  点击显示弹框
</button>

<dialog id="my-dialog" closedby="any">
  我显示啦！
</dialog>

<dialog>弹框元素内置了showModal方法，此时，点击按钮，弹框就会显示。

ToggleEvent事件类型也是一个新特性，可以在Popover弹出框或<dialog>元素显示或隐藏后触发。

包含包括newState和oldState在内的事件对象属性，可以判断判断当前元素的展开还是收起状态。

详见此文：全是好东西！HTML command属性和JS toggle事件

第26周 6.22-6.28

本周学习CSS color-scheme属性与light-dark()颜色函数。

light-dark()这个 CSS 函数接受两种颜色或两个图像，并根据当前页面的配色方案返回一种颜色或一个图像，无需prefers-color-scheme媒体查询进行匹配。

prefers-color-scheme可以匹配系统层面设置的是深色模式，还是浅色模式。

这个媒体查询设计初衷是好的，但是落地到实际开发中，却是个鸡肋。

为何？很简单，只有高级用户才会在系统层面设置深色模式还是浅色模式，对于客户端的软件而言（网页也包括在内），对用户体验友好的交互方式应该是在当前的应用程序中直接设置。

而color-scheme属性可以改变网页上浏览器内置组件的配色。

配合light-dark() CSS函数，可以真正意义上实现深浅配色的完全自定义能力。

详见此文：CSS color-scheme属性与light-dark()颜色函数

好了，以上就是自己今年上半年学的些东西，新特性为主。

至于为何都是AI编程了还学这些，可以阅读我这篇文章：都AI时代了，我为何还在学习前端基础知识？

（完）