原文 CSS :has() Interactive Guide

1. 什么是 :has()？

:has() 常被称为 “父级选择器”。它允许你根据一个元素内部是否包含某些子元素（或符合某种条件的后代元素）来给该元素本身设置样式。 本文将会探讨此问题，并介绍 :has() 的一些常见用法。

1.1 痛点

假设我们有一个 <figure> 标签，当它包含 <figcaption> 标签时，我们希望给 <figure> 添加一个样式。我们应该如何实现呢？

1
2
3
4

<figure>
  <img src="thumb.jpg" alt="" />
  <figcaption>A great looking tart.</figcaption>
</figure>

20260104 测试结果：

原文：You Should Use /tmp/ More

在 Linux 系统中 /tmp/ 是专门为临时文件设计的，通常用于保存不需要长期保留的 “东西”：比如你正在处理的文件的临时备份、浏览器缓存的内容、或是正在进行的更新的暂存地。/tmp/ 还有一个独特的优点：每当机器重启时，它都会被清空 —— 毕竟它是临时的。

最强大的一个用途是将 下载文件夹设置为 /tmp。这样就不会因为遗忘，而让默认的“下载”文件夹变成一个永远不会被清空的垃圾桶，从而造成文件残留。

比如：你可以将项目中临时使用的一张图扔进 /tmp/ 文件夹，而不是多年后看着一张莫名其妙的 JPEG 图片纳闷。

原文：Poor man’s signals

信号（Signals）目前正风靡一时。所有人都开始使用它们：Angular、Solid、Preact，对于那些还没有内置信号的框架，也可以使用第三方包。甚至还有将它们添加到语言规范中的提案，如果该提案通过，那么所有框架内置信号就只是时间问题了。

消息闭塞

如果你一直对这些新技术一无所知，下面是一个来自 Preact 文档的例子，它简洁地概括了信号的作用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { signal, computed, effect } from "@preact/signals";

const name = signal("Jane");
const surname = signal("Doe");

const fullName = computed(() => `${name.value} ${surname.value}`);

// 每次 name 变化时都会打印：
effect(() => console.log(fullName.value));
// 打印: "Jane Doe"

// 更新 `name` 会更新 `fullName`，从而再次触发 effect：
name.value = "John";
// 打印: "John Doe"

原文：The problem with new URL(), and how URL.parse() fixes that

new URL() 的问题，以及 URL.parse() 如何解决它

作为一个构建浏览器的人(译注：本文作者 Kilian Valkhof 也是 Polypane 浏览器的开发者)，我需要解析大量的 URL。其中一部分是为了验证它们，但也是为了规范化它们或并从中提取特定部分。浏览器中的 URL API 可以让你做到这一点，但其人体工程学设计并不理想。