Vue新特性：在CSS中使用JS变量

言

《Vue 3：2020年中状态更新》的时候，文中曾经提到过尤雨溪希望7月中旬发布RC版(候选版本)，8月初发布3.0正式版。

不过现在已经八月初了怎么还是没发布呢？这个月初到底几号才算是"初"呢？于是我赶紧去github上看看现在到底有没有什么风吹草动，看着看着突然发现一个非常好玩的特性，这个特性我以前就经常这么想：要是我在data里面定义的变量也能在CSS里面用那该多好啊！(大家有没有也这么想过)

幻想

以前做项目的时候经常会这么想：

<template>
  <h1>{{ color }}</h1>
</template>

<script>export default {
  data () {
    return {
        color: 'red'
    }
  }
}</script>

<style>h1 {
  color: this.color;
}</style>

当然，想想也知道不可能，JS和CSS隶属不同上下文，CSS哪来的this呢？

那么怎么才能在CSS中使用JS变量呢？那就只能用JS操作DOM然后把变量塞进style里了，比如用ref获取到DOM元素，然后dom.style.color = this.color。

或者在模板里：

<template>
  <h1 :style="{ color }">Vue</h1>
</template>

<script>export default {
  data () {
    return {
        color: 'red'
    }
  }
}</script>

不过这种方式还是有缺陷的，比如本来就不推荐把样式写在style属性里，还有就是变量复用会很麻烦，比如一组DOM元素都想用这个变量，那就不得不给这一组起个类名，然后再在mounted里面document.getElementsByClassName()，获取到DOM集合之后还要循环遍历每个元素，为其加上dom.style.color = this.color，浪费了很多的性能。

其实CSS本身有很多缺陷，并不图灵完备，所以才导致了各种预处理器的出现：Sass、Less、Stylus等……

它们为CSS提供了很多特性：循环、条件语句、变量、函数等……

其中有个特性非常有用，那就是变量！于是CSS也引入了变量的这个概念，自从有了CSS变量，很多事情真的方便了许多，通过JS操作CSS变量，然后再在需要的地方使用CSS变量，这种方法比之前的高效得多。

什么是CSS变量

在JS里(不止JS，所有语言都差不多)，变量有如下几个特性：

声明
使用
作用域

声明

为了方便理解，咱们通过用JS的方式来类比：

var color = 'red';

在CSS中等同于：

--color: red;

当然这点跟JS不太一样，但是如果你学PHP这类语言或者Sass的话应该就很好理解了，在PHP或Sass中，声明变量的时候没有一个关键字，而是在变量名的第一位加上一个美元符号$，这就代表声明变量了。

PHP:

$color = 'red';

Sass:

$color: color;

但是$符号被Sass占用了，@符号被less占了，所以CSS只能想出别的符号了，CSS的符号就是两个减号--

使用

光声明一个变量是没有什么太大意义的，只有使用了它，这个变量才算有价值：

JS:

console.log(color)

可以看到var只是个声明变量的关键字，color才是变量名。

PHP:

echo $color;

Scss:

h1 {
    color: $color;
}

但是在PHP或Sass中，声明变量的时候带着，用的时候也得带着。

这就令许多开发者感到困惑，所以CSS在使用变量的时候用到了一个函数叫var()：

CSS:

h1 {
    color: var(--color);
}

虽然和PHP、Sass一样，调用时要带着前缀(因为那就是变量名的一部分)，但是不一样的是需要用一个**var()**来把变量包裹起来。

作用域

这个很好理解，不仅JS里有作用域，CSS里也有作用域，比如：

JS:

var color = 'red';

function h1 () {
    console.log(color);
}

function div () {
    var color = 'blue';
    console.log(color);
}

h1(); // red
div(); // blue

类似于CSS里的：

body {
    --color: red;
}

h1 {
    color: var(--color); /** 这里获取到的是全局声明的变量，值为red **/
}

div {
    --color: blue;
    color: var(--color); /** 这里获取到的是局部声明的变量，值为blue **/
}

也就是说，变量的作用域就是它所在的选择器的有效范围。

中文CSS变量

有一次我看到了两个脑洞大开的库，才发现CSS变量还可以这么玩：

chinese-gradient
chinese-layout

从他俩的名字就可以看出，都是用chinese开头的，那么大概率就是用中文做的CSS变量，点进去一看果不其然。

也就是说CSS变量的包容性很强，不像以往编程的时候都必须是英文命名，中文这次居然也可以完美运行，不信咱们来试一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>    /* 清除默认样式 */
    * { padding: 0; margin: 0 }
    ul { list-style: none }

    /* 全屏显示 */
    html, body, ul { height: 100% }

    /* 在父元素上写入九宫格 */
    ul {
      display: grid;
      grid: var(--九宫格);
      gap: 5px
    }

    /* 给子元素上色 */
    li {
      background: var(--极光绿)
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

运行结果：

也就是说，CSS变量可以这样定义：

body {
    --蓝绿色: aquamarine;
}

然后调用的时候：

h1 {
    color: var(--蓝绿色);
}

在vue中的变量

那么怎样才能在vue3的**<style>中使用<script>**里声明的变量呢？

首先我们先创建个支持vue3的vite项目：

npm init vite-app vars

然后进入到该文件夹安装依赖：

cd vars

npm i

然后创建一个组件，组件型式长这样：

<template>
  <h1>{{ color }}</h1>
</template>

<script>export default {
  data () {
    return {
      color: 'red'
    }
  }
}</script>

<style vars="{ color }">h1 {
  color: var(--color);
}</style>

还记得文章一开始写的幻想中的组件是什么样吗：

<style>h1 {
  color: this.color;
}</style>

但是就算vue再牛它也不可能给CSS安个this啊，除非再做一个什么预处理器，不过这次利用CSS变量已经可以很接近咱们幻想中的组件啦：

<style vars="{ color }">h1 {
  color: var(--color);
}</style>

首先要在**<style>标签中写个vars="{}"**，再在大括号里写上你在data中声明过的值。

再来试一下这个变量是不是响应式的，动态改变**<script>标签中的this.color**值会不会引起视图的变化呢？来试一下：

<template>
  <h1>Vue</h1>
</template>

<script>export default {
  data () {
    return {
      opacity: 0
    }
  },
  mounted () {
    setInterval(_ => {
      this.opacity >= 1 && (this.opacity = 0)
      this.opacity += 0.2
    }, 300)
  }
}</script>

<style vars="{ opacity }">h1 {
  color: rgb(65, 184, 131);
  opacity: var(--opacity);
}</style>

运行结果：

可以看到每300毫秒我们就改变一下this.opacity的值，它会映射到CSS变量上去，this.opacity变了，--opacity的值就会随之变化，视图也会随着数据的更新而相应的更新，这个特性简直太棒了！

多个变量之间使用逗号进行分隔：

<template>
  <h1>Vue</h1>
</template>

<script>export default {
  data () {
    return {
      border: '1px solid black',
      color: 'red'
    }
  }
}</script>

<style vars="{ border, color }" scoped>h1 {
  color: var(--color);
  border: var(--border);
}</style>

脑洞大开

既然chinese-gradient和chinese-layout这两个CSS库验证了CSS中文变量的可行性，而且我记得对象的属性也是可以写中文的，那么咱们就来试一下在vue中能不能用这种黑魔法来写中文：

<template>
  <h1>Vue</h1>
</template>

<script>export default {
  data () {
    return {
      '透明度': 0
    }
  },
  mounted () {
    setInterval(_ => {
      this['透明度'] >= 1 && (this['透明度'] = 0)
      this['透明度'] += 0.2
    }, 300)
  }
}</script>

<style vars="{ 透明度 }">h1 {
  color: rgb(65, 184, 131);
  opacity: var(--透明度);
}</style>

运行结果：

居！然！管！用！了！

以后大家不会命名的话也别用汉语拼音了，直接写中文吧哈哈！后续维护的时候一看变量名就能一目了然(不过还是推荐用英文)。

原理

猜也能猜到，大概率是用到了类似于**dom.style.setProperty('--opacity', this.opacity)**之类的方法，按下f12打开控制台一看，果不其然，它控制的是组件元素的style属性：

不过我们刚才在<style>标签中只用到了var，scoped其实也很常用，那么如果他们两个碰到一起去会编译成什么样呢？

<style vars="{ 透明度 }" scoped>h1 {
  color: var(--透明度);
}</style>

运行结果：

可以看到Vue把CSS变量也编译了一个和**data-v-**后面的那串随机字符一样的：

那么问题来了，假如我要是在全局样式里定义了一个**--color属性，我在带有scoped属性的组件里想用这个全局的CSS变量，可是一旦在scoped中使用CSS变量就会被编译成：--62a9ebed-color**，可是全局定义的不是**--62a9ebed-color而是--color**，这样就会出现找不到全局属性的局面，这个问题要怎么解决呢？其实也很简单，只需要在**--的后面加上一个global:**就可以了：

<style vars="{ color }" scoped>h1 {
  color: var(--global:color);
}</style>

这样编译出来的CSS就会变成：**var(--color)**啦！

结语

怎么样是不是很好玩？Vue这次更新诚意满满，不过大家都把关注点放在了Composition-API上了，没有注意到这些不起眼的边边角角，但就是这些边边角角却可以极大的提高我们的开发体验。

对了，CSS变量也是有兼容性的:

从[caniuse](<https://www.caniuse.com/#search=CSS Variables>)网站上可以看到，它是不兼容IE的，使用的时候记得确认一下自己项目需要兼容的范围。

今，Web 用户期望得到单页应用（SPA）提供的流畅、动态的体验。然而，创建 SPA 往往需要使用复杂的框架，如 React 和 Vue，学习和使用起来可能比较困难。这就是htmx的用武之地：一种通过直接在HTML中利用Ajax和CSS过渡效果等功能，为构建动态 Web 体验带来新思路的工具。下面就来看看 htmx 是什么，它有什么强大之处！

htmx 概述

HTMX 允许在不使用 JavaScript 的情况下添加现代浏览器功能。可以直接在 HTML 中使用属性来访问 AJAX、CSS 过渡效果、WebSockets 和服务器推送等功能，以便以超文本的简单性和强大性构建现代用户界面。

HTMX的设计理念是通过解除HTML在前端开发中的一些限制，使其成为一个更加完整和强大的超文本工具。通常情况下，在传统的Web开发中，只有<a>和<form>标签可以发起HTTP请求，只有点击和提交事件可以触发这些请求，只有GET和POST方法可用，并且只能替换整个屏幕内容。而HTMX打破了这些限制，允许使用额外的HTML属性来实现更多的功能，而不需要编写大量的JavaScript代码。例如，在HTML中使用特定的属性即可实现进度条、懒加载、无限滚动、内联验证等特性。

与其他前端框架（如Vue.js和React）不同，HTMX的工作方式是：当向服务器发送请求时，服务器返回完整的HTML响应，并更新页面中的相应部分，而不是以JSON格式返回数据。这使得HTMX可以与任何服务器端技术进行集成，因为应用的逻辑和处理都发生在后端。这种方式简化了前端开发并减少了对JavaScript的依赖。

可以通过如下方式使用npm安装HTMX：

npm install htmx.org

htmx 使用

HTMX提供了一组属性，可以直接从 HTM L中进行AJAX请求：

hx-post：发送一个POST请求到指定的URL。
hx-get：发送一个GET请求到指定的URL。
hx-put：发送一个PUT请求到指定的URL。
hx-patch：发送一个PATCH请求到指定的URL。
hx-delete：发送一个DELETE请求到指定的URL。

这些属性都接受一个 URL 作为参数，用于发送AJAX请求。因此，每当触发元素时，它会向指定的URL发送指定类型的请求。来看下面的例子：

<button hx-get="/api/resource">加载数据</button>

在上面的例子中，按钮元素被赋予了hx-get属性。一旦点击该按钮，就会向/api/resource URL发送一个GET请求。

那当从服务器返回数据时会发生什么呢？默认情况下，htmx 会将这个响应直接注入到发起请求的元素中，也就是示例中的按钮元素。然而，htmx 并不局限于这种行为，它提供了将响应数据指定为不同元素的目标的能力，接下来将深入探讨这个功能。

使用htmx触发请求

htmx根据特定元素上发生的特定事件来触发Ajax请求：

对于input、textarea和select元素，触发事件是change事件。
对于表单元素，触发事件是submit事件。
对于其他所有元素，触发事件是click事件。

下面来看一个例子：

<label>关键词：
  <input
    type="text"
    placeholder="输入关键词"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
    hx-target="#joke-container"
    name="contains"
  />
</label>

<p id="joke-container">笑话内容</p>

为了触发搜索，需要激活change事件。对于<input>元素而言，当元素失去焦点且其值已被改变时就会触发change事件。因此，当在文本框中输入一些内容，然后点击页面上其他地方，一个笑话就会出现在<p>元素中。简而言之，在输入关键词后，光标离开输入框，笑话就会自动显示出来。

这很不错，但通常用户希望在输入时就看到搜索结果更新，也就是说，当用户在输入框中输入内容时，将自动触发Ajax请求，并在后台获取最新的搜索结果，并将其更新到页面上相应的位置。因此，用户不需要手动点击其他地方以触发搜索，而是实时地在输入的同时获得更新的搜索结果。为了实现这一点，可以给<input>元素添加一个htmx trigger属性：

<input
  ...
  hx-trigger="keyup"
/>

现在结果会立即更新。但同时引入了一个新的问题：现在会在每次输入时都进行一次API调用。为了避免这个问题，可以使用修饰符来改变触发器的行为。htmx 提供了以下修饰符选项：

once：如果希望请求只执行一次，可以使用此修饰符。
changed：此修饰符确保只有在元素的值发生变化时才发出请求。
delay:<时间间隔>：此修饰符设置一个等待期（如1秒），在此等待期间再次触发事件将重新计时。
throttle:<时间间隔>：使用此修饰符，可以在发出请求之前设置一个等待期（例如1秒）。然而，与delay不同的是，如果在设定的时间内触发了新的事件，则该事件将被忽略，确保请求仅在定义的时间后触发。
from:<CSS选择器>：此修饰符使得可以在特定的元素上监听事件，而不是原始元素。

在这种情况下，delay是我们想要的修饰符：

<input
  ...
  hx-trigger="keyup delay:500ms"
/>

现在，当在输入框中输入内容时（尝试输入一个较长的词，比如"developer"），只有在暂停或完成输入时才会触发请求。

<label>关键字:
  <input
    type="text"
    placeholder="E输入关键字d"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
    hx-target="#joke-container"
    name="contains"   
    hx-trigger="keyup delay:500ms"
  />
</label>

<p id="joke-container">笑话内容</p>

正如你所见，这种做法只需要几行客户端代码就可以实现一个搜索框模式。

请求指示器

在Web开发中，当用户执行某个操作并且该操作可能需要一段时间才能完成（如进行网络请求），我们通常需要给用户提供反馈。其中一种常见的反馈方式是使用请求指示器，以可视化的方式提示用户该操作正在进行中。

htmx集成了对请求指示器的支持，让我们能够向用户提供这种反馈。它使用hx-indicator类来指定一个元素作为请求指示器。具有此类的任何元素的默认不透明度为 0，使其在DOM中不可见但存在。

当htmx发起一个Ajax请求时，它会在触发元素上应用htmx-request类。htmx-request类会导致该元素或任何具有htmx-indicator类的子元素的不透明度变为 1。

例如，下面是一个具有加载旋转图标作为其请求指示器的元素：

<button hx-get="/api/data">
  加载数据
  <img class="htmx-indicator" src="/spinner.gif" alt="Loading">
</button>

当具有hx-get属性的按钮被点击并且请求开始时，按钮会自动添加一个htmx-request类。这个类可以让请求指示器（例如加载旋转图标）在按钮上显示，当请求完成后，这个类会被移除，请求指示器也会停止显示。还可以使用htmx-indicator属性来指示接收htmx-request类的元素（显示请求指示器的元素）。

<label>关键字:
  <input
    type="text"
    placeholder="输入关键字"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
    hx-target="#joke-container"
    name="contains"   
    hx-trigger="keyup delay:500ms"
    hx-indicator=".loader"
  />
</label>

<span class="loader htmx-indicator"></span>

<p id="joke-container">笑话内容</p>

定位元素和更新内容

在某些情况下，我们可能需要在发送请求的元素之外更新其他元素。htmx 允许我们hx-target属性来指定Ajax响应应该更新的特定元素。可以通过在hx-target属性中设置一个CSS选择器来指定要更新的元素。例如有一个用于发布新评论的表单，希望将新评论添加到评论列表中，而不是更新表单本身。

<button
  hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
  hx-target="#joke-container"
>
  Hello htmx!
</button>

当用户点击按钮并发起请求时，获取到的响应数据将会更新显示在页面上具有"joke-container"这个ID的元素内部，而不是替换按钮本身的内容。这样可以实现在特定位置更新内容，而不影响其他部分的效果。

扩展CSS选择器

htmx提供了一些扩展的CSS选择器，用于更高级的元素选择和内容加载：

this ：指定带有 hx-target 属性的元素作为实际更新目标。
closest ：找到与给定CSS选择器匹配的最近的祖先元素。
next 和 previous ：在DOM中查找与给定CSS选择器匹配的后续或前置元素。
find ：查找与给定CSS选择器匹配的第一个子元素。

通过使用这些关键字，我们可以更灵活地选择要更新的元素。例如，在之前的例子中，我们可以使用 hx-target="next p" 来指定更新目标元素，而不是使用具体的 ID。这样可以简化代码，并且使得更新更加动态和通用。

更新内容

默认情况下，htmx会用Ajax响应替换目标元素的内容。但是，如果希望追加新内容而不是替换它，那就可以使用hx-swap属性。该属性允许指定新内容应该如何插入目标元素中。可能的取值包括outerHTML、innerHTML、beforebegin、afterbegin、beforeend和afterend。例如，使用hx-swap="beforeend"会将新内容追加到目标元素的末尾，这对于新评论的场景非常合适。

CSS 过渡

可以使用CSS过渡效果来使元素在不使用JavaScript的情况下平滑地改变样式。要实现这一点，需要在多个HTTP请求之间保持相同的元素 ID。这样，当 htmx 接收到新的内容并更新元素时，它将能够应用CSS过渡效果，使样式的改变过渡得更加平滑。

<button hx-get="/new-content" hx-target="#content">
  请求数据
</button>

<div id="content">
  初始内容
</div>

在htmx发起到/new-content的Ajax请求后，服务器返回以下内容：

<div id="content" class="fadeIn">
  新内容
</div>

尽管内容发生了变化，但是<div>元素保持了相同的ID。然而，新增的内容中添加了一个fadeIn类。通过为新内容添加fadeIn类，我们可以定义相应的CSS规则，例如opacity和transition属性，来实现淡入效果。这样，当htmx接收到新的内容并更新元素时，CSS过渡效果将被触发，使元素的变化过渡得更加平滑。

下面来创建一个 CSS 过渡效果，使元素从初始状态平滑过渡到新状态：

.fadeIn {
  animation: fadeIn 2.5s;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

当htmx加载新内容时，它会触发CSS过渡效果，从而创建一个流畅的视觉过渡到更新后的状态。

使用 View Transitions API

全新的View Transitions API提供了一种在DOM元素的不同状态之间进行动画转换的方式。与涉及元素CSS属性变化的CSS过渡不同，视图过渡是用于动画元素内容的变化。

View Transitions API 是一个正在积极开发中的全新实验性功能。该API已经在Chrome 111+中实现，并预计将来会有更多的浏览器支持它。htmx提供了与View Transitions API一起使用的接口，并在不支持该API的浏览器中回退到非过渡机制。

在 htmx 中，View Transitions API 的使用方法如下：

将htmx.config.globalViewTransitions配置变量设置为true。这将对所有交换使用过渡效果。
在hx-swap属性中使用transition:true选项。可以使用CSS定义和配置视图过渡效果。

下面是一个“弹跳”过渡效果的示例，其中旧内容弹出，新内容弹入：

@keyframes bounce-in {
  0% { transform: scale(0.1); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes bounce-out {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.bounce-it {
  view-transition-name: bounce-it;
}

::view-transition-old(bounce-it) {
  animation: 600ms cubic-bezier(0.4, 0, 0.2, 1) both bounce-out;
}

::view-transition-new(bounce-it) {
  animation: 600ms cubic-bezier(0.4, 0, 0.2, 1) both bounce-in;
}

在使用htmx时，可以在hx-swap属性中添加transition:true选项来启用过渡效果。然后，可以将bounce-it类添加到想要进行动画处理的内容上。

<button
  hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode" 
  hx-swap="innerHTML transition:true" 
  hx-target="#joke-container"
>
  加载新动画
</button>

<div id="joke-container" class="bounce-it">
  <p>初始动画内容</p>
</div>

在这个例子中，当<div>的内容被更新时，旧内容会以弹跳的方式退出视图，而新内容会以弹跳的方式进入视图，从而产生一种生动的视觉效果。

表单校验

htmx 与 HTML5 Validation API 可以良好的集成，在表单提交时，htmx会利用浏览器原生的验证功能进行表单验证。

例如，当用户点击提交按钮时，只有当输入字段包含有效的电子邮件地址时，才会向/contact发送POST请求。

<form hx-post="/contact">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>提交</button>
</form>

值得注意的是，htmx在验证过程中会触发一系列事件，可以利用这些事件来添加自己的验证逻辑和错误处理方法。例如，如果想要在JavaScript代码中实现邮箱检查，可以这样做：

form hx-post="/contact">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>提交</button>
</form>

<script>
  const emailInput = document.querySelector('input[type="email"]');

  emailInput.addEventListener('htmx:validation:validate', function() {
    const  pattern = /@gmail\.com$/i;

    if (!pattern.test(this.value)) {
      this.setCustomValidity('只接受谷歌邮箱!');
      this.reportValidity();
    }
  });
</script>

这里使用了htmx的htmx:validation:validate事件，该事件在调用元素的checkValidity()方法之前被触发。

现在，当尝试提交带有非gmail.com地址的表单时，将会看到一样的错误提示。

其他功能

除了上述提到的功能外，htmx 还具有很多其他功能，旨在增强HTML的能力，并为处理Web应用中的动态内容更新提供简单而强大的方式。它的功能不仅限于已经介绍的内容，还包括一些设计用于创建更具交互性和响应性的网站的功能，而无需使用复杂的JavaScript框架。

扩展

扩展是htmx工具中功能强大的工具。这些可定制的JavaScript组件使我们能够根据我们的特定需求进一步增强和定制库的行为。扩展包括在请求中启用JSON编码、操作HTML元素上类的添加和删除、调试元素、支持客户端模板处理等。有了这些，我们就可以将htmx自定义为更精细的粒度。

Boosting

htmx的“Boosting”功能允许我们将标准的HTML锚点（即链接）和表单转换为Ajax请求。在传统的Web开发中，点击链接或提交表单通常会导致整个页面刷新。而通过使用htmx的"boosting"功能，这些链接和表单将通过Ajax请求来处理，只更新需要更新的部分内容，而不需要刷新整个页面。这使得网站的加载速度更快，并提供了更流畅的用户体验。类似的技术在过去被称为pjax，现在在htmx中也可以实现类似的效果。

<div hx-boost="true">
  <a href="/blog">Blog</a>
</div>

这个 div 中的锚点标签会发出一个 Ajax GET 请求到 /blog，并将 HTML 响应替换到 <body> 标签中。

通过利用这个功能，可以为用户创建更流畅的导航和表单提交体验，使我们的 Web 应用更像单页面应用（SPA）。

历史记录管理

htmx 内置了对浏览器历史记录的支持，可以与标准的浏览器历史API对接。这样，可以将URL添加到浏览器导航栏，并将页面当前状态存储在浏览器的历史记录中，确保"返回"按钮按照用户的期望进行操作。这样一来，我们就可以创建出类似于SPA的网页，能够在不重新加载整个页面的情况下维护状态和处理导航。

与第三方库一起使用

htmx 可以很容易的与其他库进行集成。它可以无缝地与许多第三方库进行整合，利用它们的事件来触发请求。

总结

htmx是一个多功能、轻量级且易于使用的工具。它成功地将HTML的简洁性与通常与复杂JavaScript库相关的动态功能相结合，为创建交互式网络应用程序提供了一个全新的选择。

然而，它并不是适用于所有情况的解决方案。对于更复杂的应用，我们可能仍然需要使用JavaScript框架。但是，如果目标是创建一个快速、交互性强且用户友好的Web应用，而又不增加太多复杂性，那么 htmx 绝对是值得考虑的。

说过CSS in JS，还有JS in CSS?

CSS in JS

CSS in JS是一种解决css问题想法的集合，而不是一个指定的库。从CSS in JS的字面意思可以看出，它是将css样式写在JavaScript文件中，而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、tree-shaking。还解决了css中的一些问题，譬如：更方便解决基于状态的样式，更容易追溯依赖关系，生成唯一的选择器来锁定作用域。尽管CSS in JS不是一个很新的技术，但国内的普及程度并不高。由于Vue和Angular都有属于他们自己的一套定义样式的方案，React本身也没有管用户怎样定义组件的样式，所以CSS in JS在React社区的热度比较高。

目前为止实现CSS in JS的第三方库有很多:点击这里。像JSS、styled-components等。在这里我们就不展开赘述了，这篇文章的重点是JS in CSS。

JS in CSS又是什么

在上面我们提到CSS in JS就是把CSS写在JavaScript中，那么JS in CSS我们可以推断出就是可以在CSS中使用JavaScript脚本，如下所示。可以在CSS中编写Paint API的功能。还可以访问：ctx，geom。甚至我们还可以编写自己的css自定义属性等。这些功能的实现都基于CSS Houdini。

.el {
  --color: cyan;
  --multiplier: 0.24;
  --pad: 30;
  --slant: 20;
  --background-canvas: (ctx, geom) => {
    let multiplier = var(--multiplier);
    let c = `var(--color)`;
    let pad = var(--pad);
    let slant = var(--slant);

    ctx.moveTo(0, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
    ctx.lineTo(0, geom.height);
    ctx.fillStyle = c;
    ctx.fill();
  };
  background: paint(background-canvas);
  transition: --multiplier .4s;
}
.el:hover {
  --multiplier: 1;
}

Houdini 解决了什么问题

CSS 与 JS的标准制定流程对比

在如今的Web开发中，JavaScript几乎占据了项目代码的大部分。我们可以在项目开发中使用ES 2020、ES2021、甚至提案中的新特性（如:Decorator），即使浏览器尚未支持，也可以编写Polyfill或使用Babel之类的工具进行转译，让我们可以将最新的特性应用到生产环境中（如下图所示）。

而CSS就不同了，除了制定CSS标准规范所需的时间外，各家浏览器的版本、实战进度差异更是旷日持久（如下图所示），最多利用PostCSS、Sass等工具來帮我们转译出浏览器能接受的CSS。开发者们能操作的就是通过JS去控制DOM与CSSOM来影响页面的变化，但是对于接下來的Layout、Paint与Composite就几乎没有控制权了。为了解决上述问题，为了让CSS的魔力不再受到浏览器的限制，Houdini就此诞生。

CSS Polyfill

我们上文中提到JavaScript中进入提案中的特性我们可以编写Polyfill，只需要很短的时间就可以讲新特性投入到生产环境中。这时，脑海中闪现出的第一个想法就是CSS Polyfill，只要CSS的Polyfill 足够强大，CSS或许也能有JavaScript一样的发展速度，令人可悲的是编写CSS Polyfill异常的困难，并且大多数情况下无法在不破坏性能的情况下进行。这是因为JavaScript是一门动态脚本语言。它带来了极强的扩展性，正是因为这样，我们可以很轻松使用JavaScript做出JavaScript的Polyfill。但是CSS不是动态的，在某些场景下，我们可以在编译时将一种形式的CSS的转换成另一种(如PostCSS)。如果你的Polyfill依赖于DOM结构或者某一个元素的布局、定位等，那么我们的Polyfill就无法编译时执行，而需要在浏览器中运行了。不幸的是，在浏览器中实现这种方案非常不容易。

如上图所示，是从浏览器获取到HTML到渲染在屏幕上的全过程，我们可以看到只有带颜色（粉色、蓝色）的部分是JavaScript可以控制的环节。首先我们根本无法控制浏览器解析HTML与CSS并将其转化为DOM与CSSOM的过程，以及Cascade,Layout,Paint,Composite我们也无能为力。整个过程中我们唯一完全可控制的就是DOM，另外CSSOM部分可控。

CSS Houdini草案中提到，这种程度的暴露是不确定的、兼容性不稳定的以及缺乏对关键特性的支持的。比如，在浏览器中的 CSSOM 是不会告诉我们它是如何处理跨域的样式表，而且对于浏览器无法解析的 CSS 语句它的处理方式就是不解析了，也就是说——如果我们要用 CSS polyfill 让浏览器去支持它尚且不支持的属性，那就不能在 CSSOM 这个环节做，我们只能遍历一遍DOM，找到 <style> 或 <link rel="stylesheet"> 标签，获取其中的 CSS 样式、解析、重写，最后再加回 DOM 树中。令人尴尬的是，这样DOM树全部刷新了，会导致页面的重新渲染（如下如所示）。

即便如此，有的人可能会说：“除了这种方法，我们也别无选择，更何况对网站的性能也不会造成很大的影响”。那么对于部分网站是这样的。但如果我们的Polyfill是需要对可交互的页面呢？例如scroll，resize，mousemove，keyup等等，这些事件随时会被触发，那么意味着随时都会导致页面的重新渲染，交互不会像原本那样丝滑，甚至导致页面崩溃，对用户的体验也极其不好。

综上所述，如果我们想让浏览器解析它不认识的样式（低版本浏览器使用grid布局），然而渲染流程我们无法介入，我们也只能通过手动更新DOM的方式，这样会带来很多问题，Houdini的出现正是致力于解决他们。

Houdini API

Houdini是一组底层API，它公开了CSS引擎的各个部分，如下图所示展示了每个环节对应的新API（灰色部分各大浏览器还未实现），从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。Houdini是一群来自Mozilla，Apple，Opera，Microsoft，HP，Intel和Google的工程师组成的工作小组设计而成的。它们使开发者可以直接访问CSS对象模型（CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。

Properties & Values API

尽管当前已经有了CSS变量，可以让开发者控制属性值，但是无法约束类型或者更严格的定义，CSS Houdini新的API，我们可以扩展css的变量，我们可以定义CSS变量的类型,初始值,继承。它是css变量更强大灵活。

CSS变量现状：

.dom {
  --my-color: green;
  --my-color: url('not-a-color'); // 它并不知道当前的变量类型
  color: var(--my-color);
}

Houdini提供了两种自定义属性的注册方式，分别是在js和css中。

CSS.registerProperty({
  name: '--my-prop', // String 自定义属性名
  syntax: '<color>', // String 如何去解析当前的属性，即属性类型，默认 *
  inherits: false, // Boolean 如果是true，子节点将会继承
  initialValue: '#c0ffee', // String 属性点初始值
});

我们还可以在css中注册，也可以达到上面的效果

@property --my-prop {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

这个API中最令人振奋人心的功能是自定义属性上添加动画，像这样：transition: --multiplier 0.4s;，这个功能我们在前面介绍什么是js in css那个demo用使用过。我们还可以使用+使syntax属性支持一个或多个类型，也可以使用|来分割。更多syntax属性值：

属性值	描述
<length>	长度值
<number>	数字
<percentage>	百分比
<length-percentage>	长度或百分比,calc将长度和百分比组成的表达式
<color>	颜色
<image>	图像
<url>	网址
<integer>	整数
<angle>	角度
<time>	时间
<resolution>	分辨率
<transform-list>	转换函数
<custom-ident>	ident

Worklets

Worklets是渲染引擎的扩展，从概念上来讲它类似于Web Workers，但有几个重要的区别：

设计为并行，每个Worklets必须始终有两个或更多的实例，它们中的任何一个都可以在被调用时运行
作用域较小，限制不能访问全局作用域的API（Worklet的函数除外）
渲染引擎会在需要的时候调用他们，而不是我们手动调用

Worklet是一个JavaScript模块，通过调用worklet的addModule方法（它是个Promise）来添加。比如registerLayout, registerPaint, registerAnimator 我们都需要放在Worklet中

//加载单个
await demoWorklet.addModule('path/to/script.js');

// 一次性加载多个worklet
Promise.all([
  demoWorklet1.addModule('script1.js'),
  demoWorklet2.addModule('script2.js'),
]).then(results => {});

registerDemoWorklet('name', class {

  // 每个Worklet可以定义要使用的不同函数
  // 他们将由渲染引擎在需要时调用
  process(arg) {
    return !arg;
  }
});

Worklets的生命周期

Worklet的生命周期从渲染引擎内开始
对于JavaScript，渲染引擎启动JavaScript主线程
然后他将启动多个worklet进程，并且可以运行。这些进程理想情况下是独立于主线程的线程，这样就不会阻塞主线程(但它们也不需要阻塞)
然后在主线程中加载我们浏览器的JavaScript
该JavaScript调用 worklet.addModule 并异步加载一个worklet
加载后，将worklet加载到两个或多个可用的worklet流程中
当需要时，渲染引擎将通过从加载的Worklet中调用适当的处理函数来执行Worklet。该调用可以针对任何并行的Worklet实例。

Typed OM

Typed OM是对现有的CSSOM的扩展，并实现 Parsing API 和 Properties & Values API相关的特性。它将css值转化为有意义类型的JavaScript的对象，而不是像现在的字符串。如果我们尝试将字符串类型的值转化为有意义的类型并返回可能会有很大的性能开销，因此这个API可以让我们更高效的使用CSS的值。

现在读取CSS值增加了新的基类CSSStyleValue，他有许多的子类可以更加精准的描述css值的类型：

子类	描述
CSSKeywordValue	CSS关键字和其他标识符（如inherit或grid）
CSSPositionValue	位置信息 (x,y)
CSSImageValue	表示图像的值属性的对象
CSSUnitValue	表示为具有单个单位的单个值（例如50px），也可以表示为没有单位的单个值或百分比
CSSMathValue	比较复杂的数值，比如有calc，min和max。这包括子类 CSSMathSum, CSSMathProduct, CSSMathMin, CSSMathMax, CSSMathNegate 和 CSSMathInvert
CSSTransformValue	由CSS transforms组成的CSSTransformComponent列表，其中包括CSSTranslate, CSSRotate, CSSScale, CSSSkew, CSSSkewX, CSSSkewY, CSSPerspective 和 CSSMatrixComponent

使用Typed OM主要有两种方法：

通过attributeStyleMap设置和获取有类型的行间样式
通过computedStyleMap获取元素完整的Typed OM样式

使用attributeStyleMap设置并获取

myElement.attributeStyleMap.set('font-size', CSS.em(2));
myElement.attributeStyleMap.get('font-size'); // CSSUnitValue { value: 2, unit: 'em' }

myElement.attributeStyleMap.set('opacity', CSS.number(.5));
myElement.attributeStyleMap.get('opacity'); // CSSUnitValue { value: 0.5, unit: 'number' };

在线demo

使用computedStyleMap

.foo {
  transform: translateX(1em) rotate(50deg) skewX(10deg);
  vertical-align: baseline;
  width: calc(100% - 3em);
}

const cs = document.querySelector('.foo').computedStyleMap();

cs.get('vertical-align');
// CSSKeywordValue {
//  value: 'baseline',
// }

cs.get('width');
// CSSMathSum {
//   operator: 'sum',
//   length: 2,
//   values: CSSNumericArray {
//     0: CSSUnitValue { value: -90, unit: 'px' },
//     1: CSSUnitValue { value: 100, unit: 'percent' },
//   },
// }

cs.get('transform');
// CSSTransformValue {
//   is2d: true,
//   length: 3,
//   0: CSSTranslate {
//     is2d: true,
//     x: CSSUnitValue { value: 20, unit: 'px' },
//     y: CSSUnitValue { value: 0, unit: 'px' },
//     z: CSSUnitValue { value: 0, unit: 'px' },
//   },
//   1: CSSRotate {...},
//   2: CSSSkewX {...},
// }
复制代码

在线demo

Layout API

开发者可以通过这个API实现自己的布局算法，我们可以像原生css一样使用我们自定义的布局（像display:flex, display:table）。在 Masonry layout library 上我们可以看到开发者们是有多想实现各种各样的复杂布局，其中一些布局光靠 CSS 是不行的。虽然这些布局会让人耳目一新印象深刻，但是它们的页面性能往往都很差，在一些低端设备上性能问题犹为明显。

CSS Layout API 暴露了一个registerLayout方法给开发者，接收一个布局名（layout name）作为后面在 CSS中使用的属性值，还有一个包含有这个布局逻辑的JavaScript类。

my-div {
  display: layout(my-layout);
}

// layout-worklet.js
registerLayout('my-layout', class {
  static get inputProperties() { return ['--foo']; }
  
  static get childrenInputProperties() { return ['--bar']; }
  
  async intrinsicSizes(children, edges, styleMap) {}

  async layout(children, edges, constraints, styleMap) {}
});

await CSS.layoutWorklet.addModule('layout-worklet.js');

在线demo 目前浏览器大部分还不支持

Painting API

我们可以在CSS background-image中使用它，我们可以使用Canvas 2d上下文，根据元素的大小控制图像，还可以使用自定义属性。

await CSS.paintWorklet.addModule('paint-worklet.js');

registerPaint('sample-paint', class {
  static get inputProperties() { return ['--foo']; }

  static get inputArguments() { return ['<color>']; }

  static get contextOptions() { return {alpha: true}; }

  paint(ctx, size, props, args) { }
});

在线demo

Animation API

这个API让我们可以控制基于用户输入的关键帧动画，并且以非阻塞的方式。还能更改一个 DOM 元素的属性，不过是不会引起渲染引擎重新计算布局或者样式的属性，比如 transform、opacity 或者滚动条位置（scroll offset）。Animation API的使用方式与 Paint API 和 Layout API略有不同我们还需要通过new一个WorkletAnimation来注册worklet。

// animation-worklet.js
registerAnimator('sample-animator', class {
  constructor(options) {
  }
  animate(currentTime, effect) {
    effect.localTime = currentTime;
  }
});

await CSS.animationWorklet.addModule('animation-worklet.js');

// 需要添加动画的元素
const elem = document.querySelector('#my-elem');
const scrollSource = document.scrollingElement;
const timeRange = 1000;
const scrollTimeline = new ScrollTimeline({
  scrollSource,
  timeRange,
});

const effectKeyframes = new KeyframeEffect(
  elem,
  // 动画需要绑定的关键帧
  [
    {transform: 'scale(1)'},
    {transform: 'scale(.25)'},
    {transform: 'scale(1)'}
  ],
  {
    duration: timeRange,
  },
);
new WorkletAnimation(
  'sample-animator',
  effectKeyframes,
  scrollTimeline,
  {},
).play();

关于此API的更多内容点击这里

Parser API

允许开发者自由扩展 CSS 词法分析器。

解析规则：

const background = window.cssParse.rule("background: green");
console.log(background.styleMap.get("background").value) // "green"

const styles = window.cssParse.ruleSet(".foo { background: green; margin: 5px; }");
console.log(styles.length) // 5
console.log(styles[0].styleMap.get("margin-top").value) // 5
console.log(styles[0].styleMap.get("margin-top").type) // "px"

解析CSS：

const style = fetch("style.css")
        .then(response => CSS.parseStylesheet(response.body));
style.then(console.log);

Font Metrics API

它将提供一些方法来测量在屏幕上呈现的文本元素的尺寸，将允许开发者控制文本元素在屏幕上呈现的方式。使用当前功能很难或无法测量这些值，因此该API将使开发者可以更轻松地创建与文本和字体相关的CSS特性。例如：

flex布局: align-items baseline特性。需要知道每一个flex盒子中第一个元素的基线位置。
首字母: 需要知道每个字母的基线高度和字母最大的高度，以及换行内容的基线长度。
单个字形的前进和后退。
换行: 需要访问字体数据，文本的所有样式输入以及布局信息（可用的段落长度等）。
元素中的每一个line boxes都需要一个基线。(line boxes代表包含众多inline boxes的这行)

Houdini 目前进展

Houdini 的蓝图

了解到这里，部分开发者可能会说：“我不需要这些花里胡哨的技术，并不能带收益。我只想简简单单地写几个页面，做做普通的Web App，并不想试图干预浏览器的渲染过程从而实现一些实验性或炫酷的功能。”如果这样想的话，我们不妨退一步再去思考。回忆下最近做过的项目，用于实现页面效果所使用到的技术，grid布局方式在考虑兼容老版本浏览器时也不得不放弃。我们想控制浏览器渲染页面的过程并不是仅仅为了炫技，更多的是为了帮助开发者们解决以下两个问题：

统一各大浏览器的行为
像JavaScript一样，在推出新的特性时，我们可以通过Polyfill的形式快速地投入生产环境中。

几年过后再回眸，当主流浏览器完全支持Houdini的时候。我们可以在浏览器上随心所欲的使用任何CSS属性，并且他们都能完美支持。像今天的grid布局在旧版本浏览器支持的并不友好的这类问题，那时我们只需要安装对应的Polyfill就能解决类似的问题。

如在文中发现有误之处，欢迎反馈、纠正。

在线咨询

上一篇：前端入门-html 表单控件使用
下一篇：详细解析html字体属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Vue新特性：在CSS中使用JS变量

言

幻想

什么是CSS变量

声明

使用

作用域

中文CSS变量

在vue中的变量

脑洞大开

原理

结语

htmx 概述

htmx 使用

使用htmx触发请求

请求指示器

定位元素和更新内容

扩展CSS选择器

更新内容

CSS 过渡

使用 View Transitions API

表单校验

其他功能

扩展

Boosting

历史记录管理

与第三方库一起使用

总结

说过CSS in JS，还有JS in CSS?

CSS in JS

JS in CSS又是什么

Houdini 解决了什么问题

CSS 与 JS的标准制定流程对比

CSS Polyfill

Houdini API

Properties & Values API

Worklets

Typed OM

Layout API

Painting API

Animation API

Parser API

Font Metrics API

Houdini 目前进展

Houdini 的蓝图

您的项目需求