午夜成人久久久,啪啪免费的网站,欧美性BBB槡BBB槡BBB,影音先锋三级资源,午夜AV福利电影,九九久久免费视频,欧美日韩精品一区,久操

2022年將成為 CSS 最偉大的一年。無論是在功能還是合作瀏覽器的功能發(fā)布方面，合作目標(biāo)是實(shí)現(xiàn) 14 個(gè)功能。

概述

本文是在 Google IO 2022上發(fā)表的演講的文字形式。這里不會(huì)對每個(gè)功能進(jìn)行深入的講解，而是對每個(gè)功能進(jìn)行簡要概述，提供廣度而不是深度。

下面是這些 CSS 功能的概覽：

瀏覽器兼容性

將這么多 CSS 功能設(shè)置為合作發(fā)布的主要原因是來自 Interop 2022 的努力，下面就來看看 Interop 2022 和 Compat 2021 分別做出了哪些努力。

1. Compat 2021

2021 年的目標(biāo)是由開發(fā)人員通過調(diào)查獲得的反饋來推動(dòng)的，旨在穩(wěn)定當(dāng)前功能、改進(jìn)測試套件并提高瀏覽器在五個(gè)功能方面的通過分?jǐn)?shù)：

sticky 定位
aspect-ratio 尺寸
flex 布局
grid 布局
transform 定位和動(dòng)畫

測試分?jǐn)?shù)全面提高，顯示出更高的穩(wěn)定性和可靠性。

2. Interop 2022

今年，瀏覽器們齊心協(xié)力，討論了他們打算開發(fā)的功能和優(yōu)先事項(xiàng)。他們計(jì)劃為開發(fā)者提供以下 web 功能：

級(jí)聯(lián)層@layer
顏色空間和方法
容器查詢
表單兼容性
滾動(dòng)
子網(wǎng)格subgrid
排版
視口單位
Web 兼容

2022年的新功能

毫不疑問，CSS 2022 的狀態(tài)受到 Interop 2022 工作的巨大影響。

1. 級(jí)聯(lián)層（@layer）

瀏覽器支持：

在 @layer 之前，加載樣式表的順序非常重要，因?yàn)樽詈蠹虞d的樣式會(huì)覆蓋之前加載的樣式。這樣開發(fā)人員就需要先加載不太重要的樣式，然后再加載更重要的樣式。

在@layer之后，入口文件可以預(yù)先定義圖層及其順序。然后，當(dāng)樣式加載、加載完成或已經(jīng)定義時(shí)，它們可以放置在一個(gè)層中，允許保留樣式覆蓋的重要性，但無需精心管理加載順序。

上圖展示了級(jí)聯(lián)層如何允許更自由、更開放地編寫和加載過程。同時(shí)仍然根據(jù)需要維護(hù)層疊。

Chrome DevTools 有助于可視化哪些樣式來自哪些圖層：

相關(guān)資源：

CSS Cascade 5 specification： https://www.w3.org/TR/css-cascade-5/#layering
Cascade layers explainer： https://css.oddbird.net/layers/explainer/
Cascade layers on MDN： https://developer.mozilla.org/docs/Web/CSS/@layer
Cascade Layers： https://developer.chrome.com/blog/cascade-layers/
Hello, CSS Cascade Layers： https://www.bram.us/2022/02/13/hello-css-cascade-layers/

2. 子網(wǎng)格（subgrid）

瀏覽器支持：

在subgrid之前，另一個(gè)網(wǎng)格中的網(wǎng)格無法與其父單元格或網(wǎng)格線對齊。每個(gè)網(wǎng)格布局都是獨(dú)一無二的。許多設(shè)計(jì)師在他們的整個(gè)設(shè)計(jì)上放置一個(gè)網(wǎng)格，并不斷地在其中對齊項(xiàng)目，這在CSS中是做不到的。

在subgrid之后，網(wǎng)格的子網(wǎng)格可以將其父網(wǎng)格的列或行作為自己的列或行，并將其自身或子網(wǎng)格與它們對齊！

在下面的demo中，body元素創(chuàng)建了一個(gè)經(jīng)典的三列網(wǎng)格，中間列為main，左邊和右邊的列稱為fullbleed。然后，body 中的每個(gè)元素，

和

通過設(shè)置 grid-template-columns: subgrid 來采用 body 中的命名行。

body?{
??display:?grid;
??grid-template-columns:
????[fullbleed-start]?
????auto?[main-start]?min(90%,?60ch)?[main-end]?auto?
????[fullbleed-end]
????;
}

body?>?*?{
??display:?grid;
??grid-template-columns:?subgrid;
}

最后，

或

的子級(jí)可以使用 fullbleed 和main列和行對齊或調(diào)整自己的大小。

.main-content?{
??grid-column:?main;
}

.fullbleed?{
??grid-column:?fullbleed;
}

完整示例：https://codepen.io/web-dot-dev/pen/JjMQzVV

目前，F(xiàn)irefox Devtools 可以幫助我們查看子網(wǎng)格。在下圖中，父網(wǎng)格和子網(wǎng)格已重疊。它現(xiàn)在類似于設(shè)計(jì)師對布局的思考方式。

在 Devtools 的“Elements”面板中，可以看到哪些元素是grid和subgrid，這對調(diào)試或驗(yàn)證布局是非常有用的。

相關(guān)資源：

Spec: https://www.w3.org/TR/css-grid-2/#subgrids
MDN: https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid
Practical CSS Subgrid Video Tutorials： https://www.bram.us/2021/11/04/practical-css-subgrid-video-tutorials/

3. 容器查詢

在 @container 之前，網(wǎng)頁的元素只能響應(yīng)整個(gè)視口的大小。這對于大型布局非常有用，但對于外部容器不是整個(gè)視口的小型布局，布局不可能進(jìn)行相應(yīng)調(diào)整。

在@container之后，元素可以響應(yīng)父容器的大小或樣式！唯一需要注意的是，容器必須將自己聲明為可能的查詢目標(biāo)，這是一個(gè)很小的要求，可以帶來很大的好處。

/*?新建一個(gè)容器?*/
.day?{
??container-type:?inline-size;
??container-name:?calendar-day;
}

這些樣式使下圖中的 Mon、Tues、Wed、Thurs 和 Fri 列能夠被事件元素查詢。

以下CSS用于查詢 calendar-day 容器大小，然后調(diào)整布局和字體大小：

@container?calendar-day?(max-width:?200px)?{
??.date?{
????display:?block;
??}

??.date-num?{
????font-size:?2.5rem;
????display:?block;
??}
}

下面是另一個(gè)示例：一個(gè)book組件根據(jù)其拖動(dòng)到的列中的可用空間進(jìn)行調(diào)整：

相關(guān)資源：

Spec: https:/www.w3.org/TR/css-contain-3/#container-queries
Explainer: https://css.oddbird.net/rwd/query/explainer/
MDN: https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries
The new responsive: https://web.dev/new-responsive/#responsive-to-the-container
Calendar demo by Una: https://codepen.io/una/pen/RwodQZw
Awesome container queries: ?https://github.com/sturobson/Awesome-Container-Queries
Designcember: https://web.dev/how-we-built-designcember/
Container Queries are Actually Coming / Say Hello To CSS Container Queries： https://www.bram.us/2021/04/14/container-queries-are-actually-coming-say-hello-to-css-container-queries/

4. accent-color

瀏覽器支持：

在accent-color之前，當(dāng)我們想要一個(gè)與品牌顏色匹配的表單時(shí)，最終可能需要復(fù)雜的庫或CSS解決方案，隨著時(shí)間的推移，這些解決方案會(huì)變得難以管理。雖然它們提供了所有選項(xiàng)，并希望包括可訪問性，但選擇使用內(nèi)置組件或采用自己的組件會(huì)變得單調(diào)乏味，無法繼續(xù)選擇。

在accent-color之后，一行CSS為內(nèi)置組件帶來了主題顏色，除了色調(diào)之外，瀏覽器還會(huì)智能地為組件的輔助部分選擇適當(dāng)?shù)膶Ρ壬⑦m應(yīng)系統(tǒng)配色方案（亮暗）。

/*?為所有顏色著色?*/
:root?{
??accent-color:?hotpink;
}

/*?為一個(gè)元素著色?*/
progress?{
??accent-color:?indigo;
}

相關(guān)資源

Spec: https://www.w3.org/TR/css-ui-4/#widget-accent
MDN: https://developer.mozilla.org/docs/Web/CSS/accent-color
web.dev: https://web.dev/accent-color/
Tint User-Interface Controls with CSS accent-color：https://www.bram.us/2021/08/23/tint-user-interface-controls-with-css-accent-color/

6. Color level 4 and 5

在過去的幾十年里，web 一直由 sRGB 主導(dǎo)，但在高清顯示器和預(yù)先配備 OLED 或 QLED 屏幕的移動(dòng)設(shè)備不斷擴(kuò)大的數(shù)字世界中，sRGB 是不夠的。此外，需要適應(yīng)用戶偏好的動(dòng)態(tài)頁面，并且顏色管理已成為設(shè)計(jì)師、設(shè)計(jì)系統(tǒng)和代碼維護(hù)人員日益關(guān)注的問題。

CSS有許多新的顏色功能和空間（不過不是在2022年）：

達(dá)到顯示器高清色彩功能的色彩。
與意圖相匹配的色彩空間，例如感知一致性。
漸變的顏色空間會(huì)顯著改變插值結(jié)果。
顏色功能可幫助你混合和對比，并選擇在哪個(gè)空間進(jìn)行工作。

在所有這些顏色特性出現(xiàn)之前，設(shè)計(jì)系統(tǒng)需要預(yù)先計(jì)算出適當(dāng)?shù)膶Ρ壬⒋_保調(diào)色板具有適當(dāng)?shù)幕盍ΓA(yù)處理器或JavaScript則起到了重要作用。

在完成了所有這些顏色功能之后，瀏覽器和CSS可以動(dòng)態(tài)、及時(shí)地完成所有工作。CSS可以進(jìn)行編排和計(jì)算，而不是向用戶發(fā)送很大的CSS和JavaScript來啟用主題和數(shù)據(jù)可視化顏色。CSS還可以更好地在使用前檢查支持情況，或者優(yōu)雅地處理回退。

@media?(dynamic-range:?high)?{
??.neon-pink?{
????--neon-glow:?color(display-p3?1?0?1);
??}
}

@supports?(color:?lab(0%?0?0))?{
??.neon-pink?{
????--neon-glow:?lab(150%?160?0);
??}
}

（1）hwb()

瀏覽器支持：

HWB代表色調(diào)、白度和黑度。它表現(xiàn)為一種對人類友好的表達(dá)顏色的方式，因?yàn)樗皇且环N色調(diào)，加上一定量的白色或黑色以使其變亮或變暗。

:root?{
??--hwb-swatch-1:?hwb(200?75%?0%);
??--hwb-swatch-2:?hwb(200?50%?25%);
??--hwb-swatch-3:?hwb(200?25%?50%);
??--hwb-swatch-4:?hwb(200?0%?75%);
??--hwb-swatch-5:?hwb(200?0%?90%);
}


.swatch:nth-of-type(1)?{
??background:?var(--hwb-swatch-1);
}

.swatch:nth-of-type(2)?{
??background:?var(--hwb-swatch-2);
}

.swatch:nth-of-type(3)?{
??background:?var(--hwb-swatch-3);
}

.swatch:nth-of-type(4)?{
??background:?var(--hwb-swatch-4);
}

.swatch:nth-of-type(5)?{
??background:?var(--hwb-swatch-5);
}


*?{
??box-sizing:?border-box;
??margin:?0;
}

html?{
??block-size:?100%;
}

body?{
??min-block-size:?100%;
??font-family:?system-ui,?sans-serif;
??
??display:?grid;
}

效果如下：

使用此顏色函數(shù)會(huì)產(chǎn)生來自 sRGB 顏色空間的顏色，與 HSL 和 RGB 相同。就 2022 年的新意而言，這并沒有給你帶來新的色彩，但它可能會(huì)讓語法和心智模型的粉絲更容易完成一些任務(wù)。

相關(guān)資源：

Spec: https://www.w3.org/TR/css-color-4/#the-hwb-notation
MDN: https://developer.mozilla.org/docs/Web/CSS/color_value/hwb()
hwb() – a color notation for humans?： https://www.stefanjudis.com/blog/hwb-a-color-notation-for-humans/

（2）顏色空間

顏色的表示方式是通過顏色空間完成的。每個(gè)顏色空間都為使用顏色提供了各種功能和權(quán)衡。有些人可能會(huì)將所有鮮艷的顏色打包在一起；有些人可能會(huì)先根據(jù)它們的亮度排列它們。

2022年， SS 將提供 10 個(gè)新的顏色空間，每個(gè)都有獨(dú)特的功能來幫助設(shè)計(jì)師和開發(fā)人員顯示、挑選和混合顏色。以前，sRGB 是處理顏色的唯一選項(xiàng)，但現(xiàn)在 CSS 釋放了新的潛力和新的默認(rèn)顏色空間 LCH。

（3）color-mix()

瀏覽器支持：

在 color-mix()之前，開發(fā)人員和設(shè)計(jì)人員需要像 Sass 這樣的預(yù)處理器在瀏覽器看到顏色之前混合顏色。大多數(shù)顏色混合功能也沒有提供指定在哪個(gè)顏色空間中進(jìn)行混合的選項(xiàng)，有時(shí)會(huì)導(dǎo)致結(jié)果混亂。

在 color-mix() 之后，開發(fā)人員和設(shè)計(jì)人員可以在瀏覽器中混合顏色以及所有其他樣式，而無需運(yùn)行構(gòu)建過程或包括 JavaScript。此外，他們可以指定在哪個(gè)顏色空間中進(jìn)行混合，或者使用 LCH 的默認(rèn)混合顏色空間。

通常，主題顏色被用作基礎(chǔ)顏色，并從中創(chuàng)建變體，例如懸停樣式的淺色或深色。下面是color-mix() 例子：

.color-mix-example?{
??--brand:?#0af;

??--darker:?color-mix(var(--brand)?25%,?black);
??--lighter:?color-mix(var(--brand)?25%,?white);
}

如果你想在不同的顏色空間中混合這些顏色，例如 srgb，請更改它：

.color-mix-example?{
??--brand:?#0af;

??--darker:?color-mix(in?srgb,?var(--brand)?25%,?black);
??--lighter:?color-mix(in?srgb,?var(--brand)?25%,?white);
}

在 2022 年享受在你的樣式表中混合各種顏色空間的顏色！

相關(guān)資源：

Spec: https://www.w3.org/TR/css-color-5/#color-mix
MDN: https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix()
Theming demo: https://codepen.io/argyleink/pen/WNoWadG
Another theming demo: https://codepen.io/argyleink/pen/YzZQYMq
Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()： https://www.bram.us/2021/04/28/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/

（4）color-contrast()

瀏覽器支持：

在 color-contrast() 之前，樣式表作者需要提前了解可訪問的顏色。通常，調(diào)色板會(huì)在顏色樣本上顯示黑色或白色文本，以向顏色系統(tǒng)的用戶指示需要哪種文本顏色才能與該樣本進(jìn)行適當(dāng)對比。

在 color-contrast() 之后，樣式表作者可以將任務(wù)完全轉(zhuǎn)移到瀏覽器。你不僅可以使用瀏覽器自動(dòng)選擇黑色或白色，還可以為其提供設(shè)計(jì)系統(tǒng)適用的顏色列表，并讓其選擇第一個(gè)通過所需對比度的顏色。

這是 HWB 調(diào)色板集 demo 的截圖，其中文本顏色由瀏覽器根據(jù)樣本顏色自動(dòng)選擇：

語法的基本內(nèi)容如下所示，其中灰色被傳遞給函數(shù)，瀏覽器確定黑色或白色是否具有最大對比度：

color:?color-contrast(gray);

該函數(shù)還可以使用顏色列表進(jìn)行自定義，它將從中選擇對比度最高的顏色：

color:?color-contrast(gray?vs?indigo,?rebeccapurple,?hotpink);

最后，如果最好不要從列表中選擇對比度最高的顏色，可以提供目標(biāo)對比度，并選擇第一種通過該對比度的顏色：

color:?color-contrast(
??var(--bg-blue-1)
??vs
??var(--text-lightest),?var(--text-light),?var(--text-subdued)
??to?AA?/*?4.5?could?also?be?passed?*/
);

這個(gè)函數(shù)不僅可以用于文本顏色，但這將是它的主要用途。想一想，一旦選擇適當(dāng)?shù)膶Ρ壬珒?nèi)置到 CSS 語言本身中，那么交付可訪問且易讀的界面將變得多么容易。

相關(guān)資源：

Spec: https://www.w3.org/TR/css-color-5/#colorcontrast
MDN: https://developer.mozilla.org/docs/Web/CSS/color_value/color-contrast()
Demo: https://codepen.io/web-dot-dev/pen/qBpzwZW

（5）相對顏色語法

瀏覽器支持：

在使用相對顏色語法之前，為了計(jì)算顏色并進(jìn)行調(diào)整，需要將顏色通道單獨(dú)放置到自定義屬性中。這一限制還使HSL成為處理顏色的主要顏色函數(shù)，因?yàn)樯{(diào)、飽和度或亮度都可以通過 calc() 直接調(diào)整。

在相對顏色語法之后，任何空間中的任何顏色都可以解構(gòu)、修改并作為顏色返回，所有這些都可以在CSS的一行中完成。在任何所需的顏色空間中，都無法對HSL操作進(jìn)行更多限制，并且需要?jiǎng)?chuàng)建更少的自定義屬性來簡化操作。

在以下語法示例中，提供了一個(gè)基本十六進(jìn)制，并相對于它創(chuàng)建了兩種新顏色。第一種顏色 --absolute-change 在 LCH 中從基色創(chuàng)建新顏色，然后繼續(xù)將基色的亮度替換為 75%，保持色度 (c) 和色相 (h)。第二種顏色 --relative-change 在 LCH 中從基色創(chuàng)建新顏色，但這一次將色度 (c) 降低了 20%。

.relative-color-syntax?{
??--color:?#0af;
??--absolute-change:?lch(from?var(--color)?75%?c?h);
??--relative-change:?lch(from?var(--color)?l?calc(c-20%)?h);
}

它類似于混合顏色，但它更像是改變而不是混合。你可以從另一種顏色創(chuàng)建一種顏色，訪問所用顏色函數(shù)命名的三個(gè)通道值，并有機(jī)會(huì)調(diào)整這些通道。總而言之，這是一種非常酷且強(qiáng)大的顏色語法。

在下面的例子中，使用了相對顏色語法來創(chuàng)建基色的更亮和更暗的變體，并使用 color-contrast() 來確保標(biāo)簽具有適當(dāng)?shù)膶Ρ榷龋?/p>

此函數(shù)也可用于調(diào)色板生成。這是一個(gè)例子，其中整個(gè)調(diào)色板是根據(jù)提供的基色生成的。這套 CSS 支持所有不同的調(diào)色板，每個(gè)調(diào)色板只是提供不同的基色。

:root?{
??--_color-base:?#339af0;
??
??--color-0:??lch(from?var(--_color-base)?98%?10?h);
??--color-1:??lch(from?var(--_color-base)?93%?20?h);
??--color-2:??lch(from?var(--_color-base)?85%?40?h);
??--color-3:??lch(from?var(--_color-base)?75%?46?h);
??--color-4:??lch(from?var(--_color-base)?66%?51?h);
??--color-5:??lch(from?var(--_color-base)?61%?52?h);
??--color-6:??lch(from?var(--_color-base)?55%?57?h);
??--color-7:??lch(from?var(--_color-base)?49%?58?h);
??--color-8:??lch(from?var(--_color-base)?43%?55?h);
??--color-9:??lch(from?var(--_color-base)?39%?52?h);
??--color-10:?lch(from?var(--_color-base)?32%?48?h);
??--color-11:?lch(from?var(--_color-base)?25%?45?h);
??--color-12:?lch(from?var(--_color-base)?17%?40?h);
??--color-13:?lch(from?var(--_color-base)?10%?30?h);
??--color-14:?lch(from?var(--_color-base)?5%?20?h);
??--color-15:?lch(from?var(--_color-base)?1%?5?h);
}

到現(xiàn)在為止，希望你可以看到色彩空間和不同的色彩函數(shù)如何根據(jù)它們的優(yōu)點(diǎn)和缺點(diǎn)用于不同的目的。

相關(guān)資源：

Spec: https://www.w3.org/TR/css-color-5/#relative-color-function
Palettes: https://codepen.io/web-dot-dev/pen/GRybLvm
Variants: https://codepen.io/web-dot-dev/pen/dyJBLWG

（6）漸變顏色空間

在漸變顏色空間之前，sRGB 是使用的默認(rèn)顏色空間。sRGB 通常是可靠的，但確實(shí)有一些弱點(diǎn)，例如灰色死區(qū)。

在漸變顏色空間之后，告訴瀏覽器使用哪個(gè)顏色空間進(jìn)行顏色插值。這使開發(fā)人員和設(shè)計(jì)人員能夠選擇他們喜歡的漸變。默認(rèn)色彩空間也更改為 LCH 而不是 sRGB。

語法添加在漸變方向之后，使用新的in語法，并且是可選的：

background-image:?linear-gradient(
??to?right?in?hsl,
??black,?white
);

background-image:?linear-gradient(
??to?right?in?lch,
??black,?white
);

這是從黑色到白色的基本且必不可少的漸變。查看每個(gè)顏色空間中的結(jié)果范圍。有些更早達(dá)到深黑色，有些更晚達(dá)到白色。

在下一個(gè)示例中，黑色轉(zhuǎn)換為藍(lán)色，因?yàn)樗菨u變的已知問題空間。大多數(shù)顏色空間在顏色插值期間會(huì)逐漸變?yōu)樽仙；蛘撸?dāng)顏色在其顏色空間內(nèi)從 A 點(diǎn)移動(dòng)到 B 點(diǎn)時(shí)。由于漸變將從 A 點(diǎn)到 B 點(diǎn)采用直線，因此色彩空間的形狀變化極大地改變了路徑沿途的停止點(diǎn)。

okLCH 和 okLAB 是專門的色彩空間，可以解釋各種變化，比如這個(gè)變成紫色的，這使得它們對于漸變特別準(zhǔn)確。

相關(guān)資源：

Spec: https://drafts.csswg.org/css-images-4/#linear-gradients
Codepen comparing gradients: https://codepen.io/argyleink/pen/OJObWEW
Observable notebook: https://observablehq.com/@argyleink/colorjs-notebook-fade-to-white

7. inert

瀏覽器支持：

在 inert之前，將用戶的注意力引導(dǎo)到需要立即關(guān)注的頁面或應(yīng)用程序區(qū)域是一種很好的做法。這種引導(dǎo)式焦點(diǎn)策略被稱為焦點(diǎn)捕獲，因?yàn)殚_發(fā)人員會(huì)將焦點(diǎn)置于交互空間中，監(jiān)聽焦點(diǎn)更改事件，如果焦點(diǎn)離開交互空間，則強(qiáng)制返回。使用鍵盤或屏幕閱讀器的用戶會(huì)被引導(dǎo)回到互動(dòng)空間，以確保在繼續(xù)完成之前的任務(wù)。

在inert之后，不需要設(shè)置陷阱，因?yàn)槟憧梢詢鼋Y(jié)或保護(hù)頁面或應(yīng)用程序的整個(gè)部分。當(dāng)文檔的這些部分處于惰性狀態(tài)時(shí)，單擊和焦點(diǎn)更改嘗試根本不可用。你也可以把它想象成守衛(wèi)而不是陷阱，惰性分子不想讓你待在某個(gè)地方，而是讓其他地方不可用。

JavaScript alert() 函數(shù)就是一個(gè)很好的例子：

請注意，在調(diào)用 alert() 之前，頁面是如何通過鼠標(biāo)和鍵盤訪問的。顯示警報(bào)對話框彈出窗口后，頁面的其余部分將被凍結(jié)或不活動(dòng)。用戶的注意力放在警報(bào)對話框中，無處可去。一旦用戶交互并完成警報(bào)功能請求，頁面將再次交互。inert使開發(fā)人員能夠輕松實(shí)現(xiàn)同樣的引導(dǎo)焦點(diǎn)體驗(yàn)。

下面示例來展示它是如何工作的：

<body>
??<div?class="modal">
????<h2>Modal?Titleh2>
????<p>...<p>
????<button>Savebutton>
????<button>Discardbutton>
??div>
??<main?inert>
????
??main>
body>

對話框是一個(gè)很好的例子，但inert也有助于諸如滑出式側(cè)邊菜單用戶體驗(yàn)之類的事情。當(dāng)用戶滑出側(cè)邊菜單時(shí)，讓鼠標(biāo)或鍵盤與后面的頁面交互是不合適的；相反，當(dāng)顯示側(cè)邊菜單時(shí)，使頁面處于inert狀態(tài)，現(xiàn)在用戶必須關(guān)閉或在該側(cè)邊菜單中導(dǎo)航，并且永遠(yuǎn)不會(huì)發(fā)現(xiàn)自己在打開菜單的頁面中迷失在其他地方。

相關(guān)資源：

Spec: https://html.spec.whatwg.org/multipage/interaction.html#inert
MDN: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert
Introducing inert： https://developer.chrome.com/blog/inert/

8. COLRv1 字體

在 COLRv1 字體之前，Web 有 OT-SVG 字體，這也是一種開放格式，用于漸變字體、內(nèi)置顏色和效果。不過，它們可能會(huì)變得非常大，雖然它們允許編輯文本，但定制的空間不大。

在 COLRv1 字體之后，Web 具有更小的占用空間、矢量可縮放、可重新定位、漸變功能和混合模式驅(qū)動(dòng)的字體，它們接受參數(shù)來自定義每個(gè)用例的字體或匹配主題。

下面是 Chrome Developer 博客文章中有關(guān)表情符號(hào)的示例。也許你已經(jīng)注意到，如果你放大表情符號(hào)的字體大小，它就不會(huì)保持清晰。這是一個(gè)圖像，而不是矢量藝術(shù)。使用 COLRv1 字體，表情符號(hào)既矢量又漂亮：

圖標(biāo)字體可以用這種格式做一些驚人的事情，提供自定義的雙色調(diào)調(diào)色板等等。加載 COLRv1 字體就像任何其他字體文件一樣：

@import?url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

自定義 COLRv1 字體使用 @font-palette-values 完成的，這是一個(gè)特殊的 CSS 規(guī)則，用于將一組自定義選項(xiàng)分組和命名為一個(gè)包以供以后參考。指定自定義名稱就像自定義屬性一樣，以 -- 開頭：

@import?url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values?--colorized?{
??font-family:?"Bungee?Spice";
??base-palette:?0;
??override-colors:?0?hotpink,?1?cyan,?2?white;
}

使用 --colorized 作為自定義的別名，最后一步是將調(diào)色板應(yīng)用于使用顏色字體系列的元素：

@import?url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values?--colorized?{
??font-family:?"Bungee?Spice";
??base-palette:?0;
??override-colors:?0?hotpink,?1?cyan,?2?white;
}

.spicy?{
??font-family:?"Bungee?Spice";
??font-palette:?--colorized;
}

隨著越來越多的可變字體和彩色字體的出現(xiàn)，網(wǎng)頁排版正朝著豐富的定制和創(chuàng)造性表達(dá)的方向發(fā)展。

相關(guān)資源：

Github: https://github.com/googlefonts/colr-gradients-spec
Chrome Developers: https://developer.chrome.com/blog/colrv1-fonts/
BlinkOn developer explainer video: https://www.youtube.com/watch?v=BmqYm5Wwz8M

9. 視口單位

在新的視口變體之前，web提供了物理單位來幫助適應(yīng)視口。有高度、寬度、最小尺寸 (vmin) 和最大邊 (vmax)。這些對很多事情都有效，但移動(dòng)瀏覽器帶來了復(fù)雜性。

在移動(dòng)設(shè)備上，加載頁面時(shí)，會(huì)顯示帶有 url 的狀態(tài)欄，此欄會(huì)占用部分視口空間。在幾秒鐘和一些交互之后，狀態(tài)欄可能會(huì)滑開，以便為用戶提供更大的視口體驗(yàn)。但是當(dāng)該條滑出時(shí)，視口高度發(fā)生了變化，任何 vh 單位都會(huì)隨著目標(biāo)大小的變化而移動(dòng)和調(diào)整大小。

在后來的幾年里，vh 單位特別需要決定要使用兩種視口尺寸中的哪一種，因?yàn)檫@會(huì)在移動(dòng)設(shè)備上造成不和諧的視覺布局問題。已確定 vh 將始終代表最大的視口。

.original-viewport-units?{
??height:?100vh;
??width:?100vw;
??--size:?100vmin;
??--size:?100vmax;
}

在新的視口變體之后，可以使用小型、大型和動(dòng)態(tài)視口單位，并在物理視口單元的基礎(chǔ)上添加邏輯等效單位。這個(gè)想法是讓開發(fā)人員和設(shè)計(jì)人員能夠選擇他們想要在給定場景中使用的單位。

當(dāng)狀態(tài)欄消失時(shí)，也許可以稍微改變一下不協(xié)調(diào)的布局，這樣就可以不用擔(dān)心使用dvh（動(dòng)態(tài)視口高度）。

以下是新視口變體提供的所有新視口單位選項(xiàng)的完整列表：

/*?高度視口單位?*/
.new-height-viewport-units?{
??height:?100vh;
??height:?100dvh;
??height:?100svh;
??height:?100lvh;
??block-size:?100vb;
??block-size:?100dvb;
??block-size:?100svb;
??block-size:?100lvb;
}

/*?寬度視口單位?*/
.new-width-viewport-units?{
??width:?100vw;
??width:?100dvw;
??width:?100svw;
??width:?100lvw;
??inline-size:?100vi;
??inline-size:?100dvi;
??inline-size:?100svi;
??inline-size:?100lvi;
}

/*?最小視口單位?*/
.new-min-viewport-units?{
??--size:?100vmin;
??--size:?100dvmin;
??--size:?100svmin;
??--size:?100lvmin;
}

/*?最大視口單位?*/
.new-max-viewport-units?{
??--size:?100vmax;
??--size:?100dvmax;
??--size:?100svmax;
??--size:?100lvmax;
}

希望這些將為開發(fā)人員和設(shè)計(jì)人員提供實(shí)現(xiàn)其視口響應(yīng)式設(shè)計(jì)所需的靈活性。

相關(guān)資源：

Spec: https://drafts.csswg.org/css-values-4/#viewport-relative-lengths
The Large, Small, and Dynamic Viewports： https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/