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

不过这次前端记录有别于过往，会聊一聊学这些东西有没有价值。

先看学了什么。

第27周 2025.6.30-7.6

本周学习Select原生组件的样式自定义。

其中按钮部分若想完全自定义，使用下面的CSS代码：

select { appearance: base-select; }

若想下拉部分的样式可以自定义，则需要使用::picker()伪元素函数设置：

::picker(select) { appearance: base-select; }

此时，select元素和option元素就可以自如的自定义了。

其中，::picker-icon伪元素是设置下拉按钮后面那个三角的：

::checkmark伪元素伪元素指向的是下拉列表选中选项前面的勾勾：

根据我的实践，已经可以完全覆盖<select>元素的样式自定义了，唯一问题是目前仅Chrome浏览器支持。

更多更具体的细节参见我写的这篇文章：“好诶，select下拉框元素支持样式完全自定义啦！”

第28周 2025.7.7-7.13

本周学习3个与HTML相关的东西。

1. 全新的search元素

Chrome 117和Safari 17新支持了一个HTML元素名为 <search>，用于定义搜索区域，通常作为表单的一部分。

兼容性如下图所示：

2. h1元素样式规则要变

如果页面有多个h1元素，且这些h1元素被<section>,<aside>,<nav>, 以及<article>等元素嵌套，那么h1元素会自动降级为h2, h3, h4这种。例如：

渲染效果则是这样的：

不过，浏览器可能会改变这种策略，即所有h1的字号保持一致。

然后这种变化是和CSS :heading伪类和:heading()函数一起出现的。

3. 声明式Shadow DOM

无需JavaScript即可定义Shadow DOM，支持服务器端渲染（SSR），提升组件隔离性。

示意代码：

也就是，DOM内容无需像过去一样，全部都通过JavaScript创建的。

但是，如果有交互行为，通常还是需要借助JS代码的，包括自定义组件的注册等。

由于HTML结构可以直接呈现，因此，后端输出就非常方便，SEO也会比过去更友好。

兼容性：

第29周 2025.7.14-7.20

本周学习的是JS新特性，还挺实用的。

RegExp.escape()是所有前端都要熟知的静态函数，用于安全地将字符串转换为正则表达式字面量，目前所有现代浏览器都已经支持。

详见此文：“JS正则新特性：安全过滤RegExp.escape方法”

第30周 2025.7.21-7.27

本周学习CSS的if()函数。

CSS之前也支持类逻辑函数，例如数学函数中的min()、max()，本质上也是有逻辑的，例如：max(300px, 100vw)，表示:

• 如果100vw的计算宽度大于300px，则最终尺寸300px

• 否则是100vw的宽度。

现在，CSS支持 if() 函数了，这个是真正意义上的逻辑函数了。

目前，if() 支持三种不同类型的查询：

• style()：样式查询

• media()：媒体查询

• supports()：支持查询

其中，用得最多的当属 style() 样式查询，具体使用案例参见此文：“CSS倒反天罡居然支持if()函数了”

第31周 2025.7.28-8.3

本周学习HTML popover属性新增的值hint。

Popover可以说是弹出浮层最佳解决方案，自动显隐特性，外加顶层特性，非常香。

但是有一个问题，那就是一次最多只能有一个弹出层显示（如果不使用 showPopover() 方法手动设置的话），例如下面的Tips提示出现的时候会关闭前面的列表。

类似这种仅仅是用做信息展示的轻提示，其实无需关闭之前的弹出层，之前的popover属性能力就不够。

于是，从Chrome 133开始，popover属性新增了属性值hint，可以让轻提示显示的时候不会影响之前的弹出层。

目前仅Chrome浏览器支持：

第32周 2025.8.4-8.10

本周学习CSS索引和数量匹配函数sibling-index()和 sibling-count()。

sibling-index()可以返回当前子元素是第几个，sibling-count()可以返回当前元素的父元素总共有多少个子元素。

这两个函数特别适合用在很多重复子元素需要动态匹配计算的场景。

例如下面的浮动等宽布局示意：

渲染效果如下（目前仅Chrome才有效果），宽度自动等比例分配:

更多细节可以参考我写的这篇文章：“CSS索引和数量匹配函数sibling-index sibling-count简介”

第33周 2025.8.11-8.17

本周学习CSS @container scroll-state容器滚动查询。

此特性可以让我们，仅仅通过CSS，就可以检测是否滚动到容器边缘，Scroll Snap边缘，以及sticky元素是否触及定位的边缘。

 然后我们就可以实现更加精确友好的交互控制，参见下面的GIF示意。

还是挺实用的一个特性，例如很多文档需要阅读到底部才能按钮提交，就可以使用这里的CSS技术，无需JavaScript代码判断了。

详见此文：“CSS @container scroll-state容器滚动查询”

第34周 2025.8.18-8.24

本周学习的是CSS社区呼声已久的一个特性，叫做corner-shape属性。

CSS的corner-shape属性是CSS背景与边框模块（Level 4）中引入的新特性，它通过扩展border-radius的功能，允许开发者自定义元素的角形状，而不仅限于传统的圆角效果。以下是其核心作用及特性：

扩展border-radius的几何形状

• 传统圆角：border-radius默认生成四分之一椭圆形的圆角（round）。

• 新增形状：corner-shape支持五种专业级角形状：

  • bevel（斜角）：用直线替代圆弧，生成切角效果。

  • scoop（凹槽）：创建内凹的弧形角。

  • notch（缺口）：添加微小内凹的缺口。

  • squircle（超椭圆）：介于圆和矩形之间的平滑形状。

  • 保留默认的round（圆角）。

该特性可以实现各种五花八门的图形效果。

特性是个好特性，可惜太新了点，目前仅Chrome 139以上版本才正式支持。

有兴趣的可以访问此文进行进一步了解：抢先学习大开眼界的CSS corner-shape属性

第35周 2025.8.25-8.31

本周学习的是HTML新特性，啥呢？

就是hidden属性支持了一个名为until-found的新值，默认不可见，但是如果用户搜索匹配，或者锚点定位了，就会自动显示，有助于特定场景下提高用户体验。

until-found隐藏的元素还支持一个名为beforematch的事件，在该元素从隐藏变成显示之前的一瞬间执行。

详见我撰写的这篇文章：“HTML之快速了解hidden=until-found的作用”

第36周 2025.9.1-9.7

本周学习的也是个挺厉害的CSS特性，那就是@function规则，可以在CSS中函数编程了。

下面的代码是一个响应式布局的函数定义示意。

/* 在小于640px的屏幕上为侧边栏占用1fr的空间，在较大的屏幕上使用相对具体具体宽度值 */
@function --layout-sidebar(--sidebar-width: max(20ch, 20vw)) {
  result: 1fr;
  
  @media (width > 640px) {
    result: var(--sidebar-width) auto;
  }
}

.layout {
  display: grid;
  /*侧边栏宽度兜底20ch和20vw的较大计算值 */
  grid-template-columns: --layout-sidebar();
}

布局效果参见（需要Chrome 139+）：

@function 规则可以定义可重用的计算逻辑，让 CSS 代码更灵活、模块化且易于维护。

更多案例与细节见我写的这篇文章：“@function自定义函数让CSS支持编程啦”

第37周 2025.9.8-9.14

本周学习使用CSS linear()函数。

CSS 中的linear()函数用于创建自定义的线性缓动效果，它允许你通过定义多个关键点来精确控制动画在不同阶段的播放进度和速度变化。

无论是更加逼真的物理动画，还是特殊的阶梯式动画都不在话下。

目前所有浏览器都已经支持。

借助转换工具，可以将各类JS缓动动画变成CSS linear()函数，还是很厉害的一个特性。

详见我撰写的这篇文章：“使用CSS linear()函数实现更逼真的物理动画效果”

第38周 2025.9.15-9.21

本周学习的新特性也是期盼已久的，几行CSS就能实现页面滚动的时候，菜单栏根据标题内容自动高亮。

使用的是CSS scroll-target-group属性以及:target-current伪类。

实现代码非常简单，HTML代码就下面这些：

<menu>
    <li><a href="#intro">前言</a></li>
    <li><a href="#ch1">第1章</a></li>
    <li><a href="#ch2">第2章</a></li>
</menu>

<article>
    <h1>欢迎来到我的博客</h1>
    <section id="intro">...</section>
    <section id="ch1">...</section>
    <section id="ch2">...</section>
</article>

CSS代码也非常简单，就这么点内容：

menu {
    position: fixed;
    scroll-target-group: auto;
}

a:target-current {
    color: red;
}

结束了，就结束了，对吧，给菜单容器设置scroll-target-group:auto，然后菜单里面的链接元素使用:target-current设置匹配样式就可以了。

此时，链接元素对应的href锚点元素进入区域的时候，链接元素就会高亮啦！

牛逼！

目前Chrome浏览器Only！

详见我撰写的这篇文章：“CSS scroll-target-group加:target-current滚动菜单自动高亮”

第39周 2025.9.22-9.28

本周学习的是JS特性，Intl.Segmenter构造函数。

Intl.Segmenter不仅能精准返回Emoji字符的长度，还能实现中文语言的自动分词，分句效果，这个特性比预想的实用的多了。

目前所有现代浏览器都支持。

更多内容参见我的这篇文章：“使用Intl.Segmenter返回更准确的字符长度”

第40周 2025.9.29-10.5

国庆假期，学什么学，起来high啦！

第41周 2025.10.6-10.12

本周学习CSS field-sizing属性，该属性可以让文本输入框根据输入内容的多少自动改变宽度和高度大小。

某些场景下，还是挺实用的。

例如<textarea> 元素内容输入的时候，高度自动变高。

以前都是需要使用div元素模拟，或者JS代码计算，现在就一行CSS代码的事情。

Chrome已经支持，Safari即将大范围支持，这个CSS的应用前景还可以。

更多内容，可见我撰写的这篇文章：“CSS field-sizing属性简介”

第42周 2025.10.13-10.19

本周学习CSS reading-flow和reading-order和两个新属性。

Web开发中，DOM文档的属性和视觉表现顺序不一致是很正常的。

在过去，我们会使用HTML tabindex属性进行交互处理。

但是HTML tabindex属性在页面复杂的时候，容易冲突。

在这种背景下，reading-flow和reading-order属性应运而生。

其可以让可访问元素的Tab索引顺序和视觉表现顺序表现一致

目前仅Chrome浏览器支持：

注定沦为小众特性，有兴趣可以前往这里了解更多：“CSS reading-flow和reading-order属性简介”

第43周 2025.10.20-10.26

本周学习Canvas新支持的锥形渐变绘制方法createConicGradient方法。

CSS虽然也能实现锥形渐变，但是如果遇到需要前端截图的需求，那么CSS方案就会有问题，html2canvas并不支持锥形渐变。

此时，可以试试使用Canvas绘制图形。

浏览器全支持，下图就是使用createConicGradient()方法绘制的饼图。

完整代码和语法说明，参见我的这篇文章：“Canvas也支持锥形渐变了createConicGradient方法”

第44周 2025.10.27-11.2

本周学习CSS :heading伪类和:heading()函数。

这两个CSS选择器是用来选择h1-h6元素的。

唉，说实话，这是我见过最让我失望的新特性。

完全看不到任何使用这个特性的理由。

是让人无语的垃圾特性。

后来经过同行提醒，这两个CSS伪类匹配的是语义上是h1~h6的元素，参考第28周学习的h1元素自动降级。

不过还是很烂的特性。

为什么说烂呢？有兴趣的可以访问这里进行了解：“垃圾特性之CSS :heading伪类和:heading()函数”

第45周 2025.11.3-11.9

本周学习使用CSS锚点定位实现元素的鼠标跟随效果。

下图是其中一个案例的示意：

悬停跟着走，移开恢复到选中元素上。

具体实现参见这篇文章：“CSS锚点定位实战-鼠标跟随交互效果”

第46周 2025.11.10-11.16

本周学习CSS :state()伪类函数。

此选择器函数可以匹配Web Components内部通过attachInternals添加的状态，从而实现穿透组件，实现更加精准的样式设置。

兼容性如下：

我觉得还算个不错的设计。

具体案例和细节，可以参见我写的这篇文章：“介绍下与CSS自定义组件相关的:state()函数”

第47周 2025.11.17-11.23

本周学习了CSS ::details-content伪元素，可以用来匹配<details>元素的内容DOM，我们可以使用这个伪元素设置背景，边框等样式。

不过，实际开发，还是使用它实现动画效果更多一些。

目前所有现代浏览器都已经支持了这个特性。

详见这篇文章：巧用CSS ::details-content伪元素实现任意展开动画

第48周 2025.11.24-11.30

本周学习CookieStore对象。

在前端开发的长河中，Cookie始终扮演着重要角色。

从用户身份识别到状态维持，它是浏览器与服务器之间轻量通信的核心载体。

但长期以来，我们操作Cookie的方式始终停留在通过document.cookie拼接字符串的“原始阶段”，不仅代码冗余易出错，还无法应对异步场景下的复杂需求。

比方说，我们要设置一个Cookie，需要先获取，然后再手动进行键值对+属性的字符串拼接，例如：

document.cookie = "name=zhangxinxu; max-age=3600; path=/"

这就很麻烦，属性顺序、符号格式稍有偏差就会导致失效。

正是因为上面这些不足，CookieStore API才应运而生。

它将Cookie操作封装为标准化的异步方法，让Cookie管理变得简洁、可控。

详见我的这篇文章：“醒醒，该使用CookieStore新建和管理cookie了”

第49周 2025.12.1-12.7

本周学习单IMG标签的图片内阴影效果实现。

列举了三种方法：

1. 如果图片背景纯色，可以通过添加padding，让box-shadow内阴影显示。

2. 如果不考虑兼容性，可以使用attr()函数让图片地址作为背景图显示。

3. 最后一种方法，任意图片，且兼容性极佳，就是使用SVG滤镜。

效果示意：

详见我的这篇文章：“单IMG标签的图片内阴影效果实现”

第50周 2025.12.8-12.14

本周学习CSS progress()函数。

语法：

progress(<value>, <start>, <end>)

可以返回0-1之间的进度值，常用于进度条、动态过渡、动画关键帧等场景，是 CSS 原生实现进度关联样式的核心工具。

还挺实用的。

但是兼容性一般。

详见我的这篇文章：”CSS progress()函数简介“

第51周 2025.12.15-12.21

本周学习CSS锚点定位锚定容器回退检测语法。

CSS锚点定位有边界位置自动改变位置的能力，但是，浏览器却无法检测，导致很多交互效果并不能完全使用CSS实现，着实可惜。

然后，最近，Chrome浏览器新支持了一个特性，那就是锚定容器位置查询检测语法。

.float-element { position-try-fallbacks: flip-block; container-type: anchored; }@container anchored(fallback: flip-block) {   .float-element { /* 如果垂直定位方向改变，如何如何…… */ }}

可以实现下图所示的交互效果，纯CSS实现的：

详见我的这篇文章：“补全不足，CSS锚点定位支持锚定容器回退检测了”

第52周 2025.12.22-12.28

本周学习CSS style()样式查询及其range范围语法。

比方说下面的案例，识别CSS变量范围，显示不同的文字颜色。

<span class="score" style="--score: 95;">
  <data>95</data>
</span>
<span class="score" style="--score: 85;">
  <data>85</data>
</span>
<span class="score" style="--score: 65;">
  <data>65</data>
</span>
<span class="score" style="--score: 35;">
  <data>35</data>
</span>

此时，就可以在style()函数中，使用大于号，小于号进行匹配：

@container style(--score >= 90) {
  data {
    color: gold;
  }
}
@container style(--score >= 80) and style(--score < 90) {
  data {
    color: green;
  }
}
@container style(--score >= 60) and style(--score < 80) {
  data {
    color: orange;
  }
}
@container style(--score < 60) {
  data {
    color: red;
  }
}

通俗易懂，三岁小孩也能知道是什么意思。

效果图参考：

Chrome和Safari浏览器都支持，而且已经支持一段时间了。

另外，此查询和attr()、if()等函数配合使用后，该特性的场景适应性更是直线攀升。

详见这篇文章：“今日学习CSS style()样式查询及其range范围语法”

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

好，以上就是我这个40岁的老前端2025年下半年学习的内容。

接下来回答很多前端同行关心的一个问题，都什么年代了，还学这些细枝末节的东西，有什么用？

下面简单说说我的看法，注意，篇幅原因，真就简单说说，回头我专门写一篇聊聊这个事情。

前端还值得学习吗？

结论，还是要学习的，只是需要从以前的熟悉降为了解，然后把节约的精力去学习其他东西。

我本人是AI重度使用者，编程、写作、甚至在自制AI漫剧。

对目前AI编程能力的边界感受挺深的。

短期

以目前的AI能力，当我们实现一个需求的时候，它所实现的代码往往是基于历史代码训练的最稳健的实现，功能运行没问题，但是很多时候，并不是最佳实现。

我已经遇到很多类似的例子了。

例如一个划词评论功能，实现代码洋洋洒洒，实则啰嗦无比，非要提醒AI使用selectionchange事件，代码这才指数级腰斩。

又比如一个富文本输入框中的AT功能，也是一堆selection和range控制，天书一样，未能充分应用输入框自身拖拽、回撤等能力。

我再举本文中出现的一个例子，实现<textarea>多行文本输入框跟随内容高度自动的问题，我可以100%打包票，AI一定会使用JavaScript代码实现，他不会想到说使用CSS field-sizing实现，因为field-sizing有兼容性问题，如果开发者不主动让他优先使用field-sizing，AI绝对不会选择这个技术选型的。

但是，其实很多项目是不需要考虑兼容性的，只需要最新的Chrome浏览器支持。

下面问题来了，如果开发人员不学习，不知道有这么个东西，请问，这个可以大大简化代码量，降低复杂度的东西如何在项目中应用？

如果只奔着功能实现，公司为何还需要你，找个刚毕业的大学生不更香吗？

所以，就目前而言，学肯定是要学的，但是我们不需要去掌握语法和细节了，只需要知道有这么个东西，在什么场景下使用最合适就可以了。

作为优秀的指挥官，务必高屋建瓴，对吧，都有哪些手下、各自优缺点务必要了然于心，这样指挥作战的时候才能发挥出最大的威能。

长期

不过AI本身也是发展的，有可能：

1. AI自动分析项目运行环境，目标客户群体，或者适应技术人员的风格癖好，选择最适合的技术方案。

2. 不是人指挥AI，而是AI指挥人——老子会很多，你想要使用哪一个。

到时候，说不定这些广度知识也就没有必要去花时间去学习的了。

嗯……想了下，试试现在AI有没有这个水平吧。

使用Trae测试。

我让其新建一个空白HTML页面。

结果其自以为是连功能都实现了，果不其然是JavaScript实现的：

然后我对其进行使用其他技术的提示，结果还是一些传统实现：

我看了下其contenteditable的实现，很糟糕，没有关闭富文本的能力：

document.querySelectorAll('.editable-div').forEach(div => {    const placeholder = div.getAttribute('data-placeholder');        // 设置初始placeholder    if (placeholder && !div.textContent.trim()) {        div.innerHTML = `<span style="color: #aaa;">${placeholder}</span>`;    }        // 点击时清除placeholder    div.addEventListener('click', () => {        if (div.innerHTML.includes(placeholder)) {            div.innerHTML = '';        }    });        // 失去焦点时恢复placeholder    div.addEventListener('blur', () => {        if (!div.textContent.trim() && placeholder) {            div.innerHTML = `<span style="color: #aaa;">${placeholder}</span>`;        }    });});

应该设置contenteditable="plaintext-only"。

算了，我直接当面指挥他使用filed-sizing属性吧。

我观察AI的思考过程，发现其确实捞到了filed-sizing属性的语法，就在我以为AI可以完美完成任务的时候，结果生成的页面一看，尼玛，完全就是一本正经的胡说八道。

嗯……短期来看，学习还是有必要的，尤其是一些前沿技术。

更长期

其实人生在世，无需那么多算计、功利，纠结于投入产出比，担心价值流失之类的。

想那么多干嘛，持续学习，总不会错的，只要是能够提高自己的，都要学，前端技术本身如此，如何使用AI也是如此。

毕竟，人在职场，在社会，看起来是人与AI的竞争，本质上你活得如何，还是人与人的竞争。

我比你懂很多的前端知识，我又比你更懂AI，你说，我会担心被淘汰吗？

所以，2026年我还将继续学习，继续保持对前端的好奇心，欢迎关注，转发，一起进步。