视野修炼第91期 | 惊讶线条

欢迎来到第 91 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）

下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。

🔥强烈推荐

看完你就清楚，为什么 Chrome 的 UA为什么会有Mozilla, Safari，like Gecko 这些内容。

全文还蛮有意思的！

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
// ...省略500+

使用伪元素 + CSS 动画。

使用简单，蛮有意思的。

已经 Star 2000 多个项目了，这手动分类起来还是太麻烦了，有AI加持就好了。

使用 Next.js 构建，比较美观简洁，先收藏了。

① 使用 @supports 选定 Safari 不支持属性

css

@supports not (background: paint(xxx)){}

② 使用 @supports 选定仅 Safari 支持属性

css

@supports (-webkit-touch-callout: none) {}

核心就是找一些稳定仅 Safari 支持或不支的属性做选择。

html

<script type="speculationrules">
  {
    "prerender": [
      {
        "urls": ["/shop", "/contact"]
      }
    ]
  }
</script>