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"），只有在暫?；蛲瓿奢斎霑r才會觸發請求。

<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屬性。該屬性允許指定新內容應該如何插入目標元素中?？赡艿娜≈蛋?span style="color: #0EA5E9; --tt-darkmode-color: #0EA5E9;">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選項?？梢允褂肅SS定義和配置視圖過渡效果。

下面是一個“彈跳”過渡效果的示例，其中舊內容彈出，新內容彈入：

@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 的藍圖

您的項目需求

說過CSS in JS，還有JS in CSS?