CSS 的未來：PostCSS 和 cssnext

ostCSS 是使用 javascript 插件轉換 CSS 的后處理器。PostCSS 本身不會對你的 CSS 做任何事情，你需要安裝一些 plugins 才能開始工作。這不僅使其模塊化，同時功能加強。

cssnext 是一個 CSS transpiler，允許你使用最新的 CSS 語法。cssnext 把新 CSS 規范轉換成兼容性更強的 CSS，所以不需要等待各種瀏覽器的支持。

PostCSS 的工作原理就是解析 CSS 并將其轉換成一個 CSS 的節點數，這可以通過 javascript 來控制，然后返回修改后的樹并保存。它與 Sass（預處理器）的工作原理不同，你基本上是用一種不同的語言來編譯 CSS。

預處理和后處理的區別

為了簡單的方式解釋預處理和后處理的不同，這里以單位轉換為例。當書寫 Sass 時，我們可以用函數px轉換成rem：

/* input */
.selector { margin-bottom: rem(20px); }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }

這種方式節省了我們手工計算的時間。不過通過 PostCSS，我們能夠做的更好。因為是后處理的緣故，我們不需要任何函數來編譯 CSS。我們可以直接書寫px，它可以自動地轉換成rem。

/* input */
.selector { margin-bottom: 20px; }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }

PostCSS 會在每一個px值出現并運行計算之前處理聲明，將其轉換成rem的值。

cssnext 新特性

cssnext 包含了大量的新特性：

自動提供瀏覽器前綴支持
自定義屬性與 var() 支持
自定義屬性集合與 @apply 支持
簡化的、更安全的 calc()
可自定義的媒體查詢
媒體查詢范圍
自定義選擇器
嵌套
image-set()
color()
hwb()
gray()
rrggbbaa 顏色
rgba() 的降級方案
rebeccapurple 顏色
font-variant 屬性
filter 屬性
inital 值
rem 單位的降級方案
:any-link 偽類
:mathces 偽類
:not 偽類
:: 偽元素語法的降級方案
overflow-wrap 屬性的降級方案
不區分大小寫的屬性
功能增強的 rga()
功能增強的 hsl()
sysem-ui 字體

自動提供瀏覽器前綴支持

自動添加（以及刪除過時/沒用的前綴），由 autoprefixer 實現

自定義屬性與 var() 支持

自定義屬性的當前轉換旨在提供一種限定在:root選擇器中、面向未來的、由原生 CSS 自定義屬性提供的新特性。

使用特性：

:root {
--mainColor: red;
}
a {
color: var(--mainColor);
}

自定義屬性集合與 @apply 支持

允許你在已命名的自定義屬性中存儲一套變量，然后在其他類型規則中引用它。

:root {
--danger-theme: {
color: white;
background-color: red;
};
}
.danger {
@apply --danger-theme;
}

簡化的、更安全的 calc()

使用優化預分析 var() 引用來允許你更安全的用 calc() 使用自定義變量

:root {
--fontSize: 1rem;
}
h1 {
font-size: calc(var(--fontSize) * 2);
}

可自定義的媒體查詢

一個更好的方法來實現語義化的媒體查詢

@custom-media --small-viewport (max-width: 30em);
/* check out media queries ranges for a better syntax !*/
@media (--small-viewport) {
/* styles for small viewport */
}

媒體查詢范圍

允許用 <= 和 >=來取代min和max

@media (width >= 500px) and (width <= 1200px) {
/* your styles */
}
/* or coupled with custom media queries */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
@media (--only-medium-screen) {
/* your styles */
}

自定義選擇器

允許你創造自己的選擇器

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;
:--button {
/* styles for your buttons */
}
:--button:--enter {
/*
hover/focus styles for your button
Read more about :enter proposal
http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877
*/
}

嵌套

允許你使用嵌套選擇器

a {
/* direct nesting (& MUST be the first part of selector)*/
& span {
color: white;
}
/* @nest rule (for complex nesting) */
@nest span & {
color: blue;
}
/* media query automatic nesting */
@media (min-width: 30em) {
color: yellow;
}
}

image-set() 函數

允許你根據不同的用戶設備來提供不同的圖片解決方案

.foo {
background-image: image-set(url(img/test.png) 1x,
url(img/test-2x.png) 2x,
url(my-img-print.png) 600dpi);
}

color() 函數

一個顏色函數來修改顏色

a {
color: color(red alpha(-10%));
}
a:hover {
color: color(red blackness(80%));
}

hwb() 函數

與 hs1() 相似，不過更容易閱讀

body {
color: hwb(90, 0%, 0%, 0.5);
}

gray() 函數

允許你使用超過50種漸變的灰度值，對于第一個參數，你可以使用 0 - 255 的數值或者百分比。

.foo {
color: gray(85);
}
.bar {
color: gray(10%, 50%);
}

rrggbbaa 顏色值

允許使用4位或者8位十六進制數來表示顏色

body {
background: #9d9c;
}

rgba() 的降級方案

如果你使用的是舊的瀏覽器（比如 IE8），那么把 rgba() 轉換為實體顏色

body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}

rebeccapurple 顏色

允許你使用新的顏色關鍵詞

body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}

font-variant 屬性

通過 font-feature-settings降級的一種屬性。你可以通過這個鏈接來查看瀏覽器支持

h2 {
font-variant-caps: small-caps;
}
table {
font-variant-numeric: lining-nums;
}

filter 屬性

W3C 的 filters 只允許使用url(data:*)來轉換 svg filter。

.blur {
filter: blur(4px);
}

inital 值

允許你使用如何值的初始值。該值表示屬性初始化值所指定的值，但這并不意味著瀏覽器的默認值。

比如，對于display屬性，initial 時鐘標示內聯，因為這是屬性指定的初始值。一個例子，div { display: initial }并不代表block，而是inline。

div {
display: initial; /* inline */
}

rem 單位

在舊瀏覽器里將 rem 降級為 px（比如IE8）

h1 {
font-size: 1.5rem;
}

:any-link 偽類

允許你使用:any-link偽類

nav :any-link {
background-color: yellow;
}

:matches 偽類

允許你使用:matches偽類

p:matches(:first-child, .special) {
color: red;
}

:not 偽類

允許你使用支持最多選擇器的:not偽類，將此降級為只選擇一個選擇器的:not

p:not(:first-child, .special) {
color: red;
}

:: 偽元素語法降級

如果你的瀏覽器是舊瀏覽器，會將 :: 降級為:。

a::before {
/* ... */
}

overflow-wrap 屬性

將overflow-wrap轉換為word-wrap屬性

body {
overflow-wrap: break-word;
}

不區分大小寫的屬性

允許你使用不區分大小寫的屬性

[frame=hsides i] {
border-style: solid none;
}

功能增強的 rga()

允許你使用由空格分割的參數與可選的由斜線分割的不透明度新語法。

你也可以使用數字來表示顏色通道。

alpha 值接受百分比和數字，并且將 rgb() 作為可選參數。因此 rgb() 和 rgba() 現在是彼此的別名。

div {
background-color: rgb(100 222.2 100.9 / 30%);
}

功能增強的 hs1()

允許你使用由空格分割的參數與可選的由斜線分割的不透明度新語法。

hsl() 現在接受角度（deg, grad, rad, turn）以及用數字表示色調，用百分比或者數字來表示 alpha 值。所以 hsl() 與 hsla() 現在也是彼此的別名。

div {
color: hsl(90deg 90% 70%);
background-color: hsl(300grad 25% 15% / 70%);
}

system-ui 字體

允許你使用 system-ui 通用字體系列。當前轉換提供了一個實際的字體列表來作為降級方案。

body {
font-family: system-ui;
}

使用 cssnext 書寫未來的 CSS

cssnext 是一個 PostCSS 的包，我們可以在樣式表中利用 cssnext 額外增加一些 CSS 規范。

/* custom properties */
:root {
--heading-color: #ff0000;
}
/* custom selectors */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
/* usage */
:--headings {
color: var(--heading-color);
}

通過 cssnext，上述代碼會被處理成以下內容

h1,
h2,
h3,
h4,
h5,
h6 {
color: #ff0000;
}

這真的很簡潔，其中還有很多令人興奮的特性。因為我們書寫的是未來規范的 CSS，所以 PostCSS 的生成步驟不需要瀏覽器去執行。

用自定義函數擴展 CSS 的功能

使用 cssnext，我們可以通過 javascript 創建自定義函數來操作被解析的 CSS。在 Sass 中，我們經常使用生成行距的函數（根據基本的 line-height 計算），它有助于創建簡單且可維護的垂直韻律。

$line-height: 32px;
/* vertical rhythm function */
@function vr($amount) {
@return $line-height * $amount;
}
/* input */
.selector { margin-bottom: vr(2) }
/* output */
.selector { margin-bottom: 64px; }

如果用 PostCSS 做的話，我們可以自定義 CSS 組件而不是函數。

/* input */
.selector { margin-bottom: 2vr }
/* output */
.selector { margin-bottom: 64px; }

執行速度

PostCSS 聲稱比預處理器快 3-30 倍。這里使用 10000 個選擇器的 5 個屬性上使用上述 Sass 函數和 PostCSS 函數，也就是處理 50000 次，以下是對比結果。

Libsass 3.2

PostCSS

從結果中很顯然看出，PostCSS 比 LibSass 的速度快了很多。

送一個請求

Postman 可以輕松創建和發送 API 請求。向端點發送請求、從數據源檢索數據或測試 API 的功能。您無需在終端中輸入命令或編寫任何代碼。創建一個新請求并選擇Send，API 響應出現在 Postman 中。

定義的 API 請求

API 為一個應用程序訪問另一個應用程序的功能提供了一種結構化的方式。通常，這種通信通過 API 服務器在 Internet 上發生?？蛻舳藨贸绦颍ㄈ缫苿討贸绦颍┫蚍掌靼l送請求，請求處理后服務器向客戶端返回響應。

請求包括 API 端點的 URL 和 HTTP 請求方法。該方法指示您希望 API 執行的操作。以下是一些最常用的方法：

- GET從 API 檢索數據。

- POST將新數據發送到 API。

- PATCH并PUT更新現有數據。

- DELETE刪除現有數據。

以登錄功能為例請求設置如下圖：

接口名稱編輯

接口訪問方式設置：GET、Post、Put、Delete等

URL編輯

發送按鈕

params設置

Authorization 認證方式：

Headers設置

常規默認頭設置

Body（參數設置）

- none

- form-data

網站表單通常以multipart/form-data. form-data 您可以使用“正文”選項卡在 Postman 中復制此內容。表單數據允許您發送鍵值對，并指定內容類型。

您可以使用表單數據附加文件。當您反復進行發送相同文件的 API 調用時，Postman 將保留您的文件路徑以供后續使用。這也有助于您運行包含需要上傳文件的請求的集合。不支持上傳多個文件，每個文件都有自己的內容類型。

- x-www-from-urlencoded

URL 編碼的數據使用與 URL 參數相同的編碼。如果您的 API 需要 url 編碼的數據，請在請求x-www-form-urlencoded的“正文”選項卡中選擇。輸入要與請求一起發送的鍵值對，Postman 將在發送前對其進行編碼。

表單數據和 url 編碼之間有時會混淆。如果您不確定需要哪一個，請咨詢您的 API 提供商。

- raw

您可以使用原始身體數據來發送您可以作為文本輸入的任何內容。使用raw選項卡和類型下拉列表來指示數據的格式（Text、JavaScript、JSON、HTML或XML），Postman 將啟用語法突出顯示以及將相關標頭附加到您的請求中。

- binary

您可以使用二進制數據來發送無法通過請求正文在 Postman 編輯器中手動輸入的信息，例如圖像、音頻和視頻文件（您也可以發送文本文件）。

- graphql：您可以通過選擇請求正文中的GraphQL選項卡來發送帶有 Postman 請求的 GraphQL 查詢。在查詢區域中輸入您的代碼，并在GraphQL 變量部分中輸入任何變量

這些body體格式設置按后臺接口定義進行設置即可。具體表達每個公司的表述都有所不同，筆者就不瞎寫自己的文案了。

Pre-request Script（預執行腳本設置）

```javascript
pm.globals.get("variable_key");
pm.variables.get("variable_key");
pm.environment.get("variable_key");
pm.collectionVariables.get("variable_key");
pm.environment.set("variable_key", "variable_value");
pm.globals.set("variable_key", "variable_value");
pm.collectionVariables.set("variable_key", "variable_value");
pm.environment.unset("variable_key");
pm.globals.unset("variable_key");
pm.collectionVariables.unset("variable_key");
pm.sendRequest("https://postman-echo.com/get", function (err, response) {
console.log(response.json());
});
```

不多說這個了。需要進行JavaScript編程。后面講解腳本會涉及。這里不展開了

Tests

```javascript
pm.test("Status code is 200", function () {
pm.response.to.have.status(200);
});
pm.test("Body matches string", function () {
pm.expect(pm.response.text()).to.include("string_you_want_to_search");
});
```

這個需要**單元測試**理念和**JavaScript開發語言**。也略過。后面文章展開

Settings

一些請求設置

發送請求

準備好發送您的第一個請求了嗎？打開 Postman 并開始：

在主工作區中選擇+打開一個新選項卡。

輸入https://console-api.apipost.cn/api/demo/login請求 URL。

選擇發送。

您將在下部窗格中看到從服務器發送的響應數據。

```javascript
{
"code": 10000,
"msg": "success",
"data": {
"token": "31c011ce830d442af42ab3df31774a80"
}
}
```

在此示例中，Postman 充當客戶端應用程序并與 API 服務器通信。以下是您選擇Send時發生的情況：

Postman 向位于的Postman Echo API服務器發送了一個GET請求。console-api.apipost.cn API 服務器接收到請求，對其進行處理，然后將響應返回給 Postman。

Postman 收到響應并將其顯示在“響應”窗格中。

Body

Postman Body選項卡為您提供了多種工具，可幫助您快速了解響應。您可以在以下四種視圖之一中查看正文：Pretty、Raw、Preview和Visualize。

在響應中查找項目- 要打開搜索欄，請選擇搜索

結果窗格中的搜索圖標。您還可以將光標放在響應中并選擇?+F或Ctrl+F。此選項在響應的預覽或可視化視圖中不可用。

請注意，如果響應的Content-Type標頭表明響應是圖像，則 Postman 將自動檢測并渲染圖像

Pretty

Pretty 視圖格式化 JSON 或 XML 響應，以便更容易查看。Pretty 視圖中的鏈接被突出顯示，選擇它們可以在 Postman 中加載帶有鏈接 URL 的 GET 請求。

要導航大型響應，請選擇行左側的向下箭頭以折疊響應的大部分。

強制 JSON 格式。為了使 Postman 自動格式化正文，響應必須具有適當的Content-Type標頭。如果您收到帶有不同Content-Type標頭的響應，您可以通過 JSON 強制格式化。在 Postman 標題中，選擇設置圖標設置圖標，然后選擇設置。在常規選項卡中，從語言檢測下拉列表中選擇JSON 。

Raw

原始視圖是一個帶有響應正文的大文本區域。它可以指示您的響應是否被縮小

Preview

預覽視圖在沙盒 iframe 中呈現響應。默認情況下，某些 Web 框架會返回 HTML 錯誤，而 Preview 在這些情況下對調試特別有幫助。

由于 iframe 沙盒限制，JavaScript 和圖像在 iframe 中被關閉。對于二進制響應類型，您可以選擇“發送和下載”以將響應保存在本地。然后，您可以使用適當的查看器查看它。這使您可以靈活地測試音頻文件、PDF、zip 文件或 API 返回的任何其他文件類型。

Visualize

Visualize 視圖根據您添加到請求Tests的可視化代碼呈現 API 響應中的數據。有關如何添加、使用和調試可視化代碼的詳細信息

Cookies

您可以在Cookies選項卡中查看服務器發送的 cookie。cookie 的條目包括其名稱、值、關聯的域和路徑以及有關 cookie 的其他信息。

Headers

標題在標題選項卡下顯示為鍵值對。將鼠標懸停在信息圖標標頭名稱旁邊的信息圖標上可查看根據 HTTP 規范的標頭描述。

如果您發送 HEAD 請求，Postman 將默認顯示Headers選項卡而不是Body選項卡。

Test Results

如果您正在查看的 API 請求有任何測試腳本，則結果將顯示在“測試結果”選項卡中

network

當您的 API 返回響應時，Postman 會顯示網絡信息。將鼠標懸停在網絡圖標網絡信息圖標上可查看您發送的請求的本地和遠程 IP 地址。

當您提出https請求時，網絡圖標包括一個掛鎖。當您將鼠標懸停在該圖標上時，網絡信息將顯示其他信息，包括證書驗證詳細信息。

響應代碼

Postman 顯示 API 返回的響應代碼。將鼠標懸停在響應代碼上以查看代碼的簡短描述及其含義。

響應時間

Postman 自動計算響應從服務器到達所需的時間（以毫秒為單位）。此信息可用于一些初步的性能測試。將鼠標懸停在響應時間上可查看圖表，其中包含有關流程中每個事件所用時間的信息。

響應大小

Postman 顯示響應的大致大小。將鼠標懸停在響應大小上以查看按正文和標題大小劃分的細分。

保存回復

如果請求已保存在集合中，您可以保存該請求的響應。返回響應后，選擇Save Response。

選擇另存為示例以將響應保存為您以后可以訪問的示例。

選擇保存到文件以將響應保存為 JSON 文件。

ostCss

簡單點講，PostCSS是CSS的處理器。如果你以前使用過CSS的預處理器的話，比如Sass、LESS或者說Stylus。這幾個是使用預編碼來處理CSS，然后編譯成線上需要使用的CSS。而PostCSS剛好相反，他是處理你寫好的CSS，讓你的CSS更健康。可以用一張圖來簡單的描述：

上圖也告訴我們，在這個過程中有很多插件。這些插件就是PostCSS的插件，而且這些插件都是使用JavaScript寫的。言外之意，你可以使用JavaScript基于PostCSS核心的Core上編寫任何你想要的一款功能的插件。也因為這個原因，PostCSS的插件生態圈非常的強大，最常見的就是Autoprefixer、cssnext之類的。當然還有其他的，這也是PostCSS能在社區迅速發展狀大的原因之一。我自己很多時候常把PostCSS的插件生態看作是NPM的生態。這個時候你想想就知道了。

有了PostCSS，我們并不需要拋棄以前所熟悉的Sass或LESS之類的，你的開發模式可以這樣：

使用Sass先編譯成CSS，然后通過PostCSS對編譯好的 CSS做優化處理。讓自己的代碼更為健康。當然你也可以直接自己基于PostCSS定制一款適合你自己的預處理器。

PostCSS不是什么

盡管表面上它看起來是一個預處理器，其實它不是一個預處理器
盡管表面上它看起來是一個后處理器，其實它也不是一個后處理器
盡管它可以促進、支持未來的語法，其實它不是未來語法
盡管它可以提供清理、優化代碼這樣的功能，其實它不是清理、優化代碼的工具
它不是任何一件事情，這也意味者它潛力無限，你可以根據自己的需要配置你需要的功能

PostCSS特別之處

多樣化的功能插件，創建了一個生態的插件系統
根據你需要的特性進行模塊化
快速編譯
創建自己的插件，且具可訪問性
可以像普通的CSS一樣使用它
不依賴于任何預處理器就具備創建一個庫的能力
可以與許多流行工具構建無縫部署

它的插件生態系統提供不同的功能

像PostCSS本身一樣令人驚奇的是，它有很多不同的插件，這也是讓PostCSS發光之處。當你看到PostCSS在GitHub上的可用插件列表，你會發現其具有各式各樣的功能。

模塊化

另一方面，PostCSS具有很可用的插件，你可以根據自己所需盡可能使用多的選擇或盡可能少選擇。

如果僅想用PostCSS讓CSS是更有效率和讓瀏覽器更友好的話，加載一些優化插件，你就可以閃人了。

如果僅想用PostCSS作為預處理器的話，使用一些語言擴展插件就OK。

PostCSS的基本原理是粒子化，模塊化。簡而言之，沒有處理多個功能的笨重插件。相反，每創建一個插件，就是一個功能。

可以創建任何自己想要的插件

PostCSS是用JavaScript編寫的插件，這樣只要能編寫JavaScript的就可以創建一個自己想要的插件，達到自己的目的。值得慶幸的是，就算你不是專業的JavaScript開發人員，但使用PostCSS開發插件也就只需要短短的幾個小時，就可以開發出一個全功能的插件。

你可以像使用CSS一樣使用PostCSS

大多數PostCSS插件不需要使用自定義的語法，其實它就是典型的預處理器。相反，它們可以應用常規的CSS語法。這也意味著，你可以使用PostCSS就像是使用CSS一樣。比如說，你要完成一個前端框架，你完全可以使用別人項目中的文件，例如Normalize.css文件。

PostCSS庫不會綁定到一個處理器上

雖然過去他們可能一直使用Stylus、Sass或LESS來編寫一個庫，但我們也開始看到有人通過PostCSS來創建整個庫。

另外有一本書專門介紹PostCSS：

即將上架

這是一本英文書，聽說中文版本很快要上架了。如果喜歡的話，可以關注一下。

最后提到一點，各部分參考資料以及案例的小伙伴們可來我的前端群：621071874，這里有小編收集到的各部分資料以及案例，望能幫到各位。

在線咨詢

上一篇：槽點滿滿的《神廟逃亡》你還記得嗎？
下一篇：快速了解JavaScript文本框操作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商