CSS新特性有哪些及如何使用

這篇文章主要介紹“CSS新特性有哪些及如何使用”，在日常操作中，相信很多人在CSS新特性有哪些及如何使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS新特性有哪些及如何使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

一、容器查詢

1. 基本概念

容器查詢使我們能夠根據(jù)其父元素的大小設(shè)置元素的樣式，它類似于 @media查詢，不同之處在于它根據(jù)容器的大小而不是視口的大小進(jìn)行判斷。這一直是響應(yīng)式設(shè)計(jì)的一個(gè)問(wèn)題，因?yàn)槲覀冇袝r(shí)候希望組件能夠適應(yīng)它的上下文。

2. 使用方法

對(duì)于容器查詢，需要使用 container 屬性（它是 container-type 和 container-name 的縮寫）指定一個(gè)元素作為容器。container-type 可以是width、height、inline-size、block-size。inline-size 和 block-size 是邏輯屬性，根據(jù)文檔的寫入模式，它們可能會(huì)產(chǎn)生不同的結(jié)果。

main, aside {
    container: inline-size;
}

可以使用類似于媒體查詢的方式來(lái)使用@container。需要注意，兩者在括號(hào)中表達(dá)規(guī)則的方式有所不同（在容器查詢中應(yīng)該使用 inline-size > 30em 而不是 min-width: 30em）。這是媒體查詢 4 級(jí)規(guī)范的一部分。當(dāng)容器寬度大于 30rem 時(shí)，就切換到 flex 布局：

@container (inline-size > 30em) {
    .card {
        display: flex;
    }
}

CSS Containment Level 3 規(guī)范目前處于工作草案中，這意味著語(yǔ)法可能隨時(shí)改變。

3. 當(dāng)前狀態(tài)

目前容器查詢?cè)谥髁鳛g覽器是不可用的，可以期待一下容器查詢?cè)跒g覽器的實(shí)現(xiàn)。

二、:has()

1. 基本概念

:has()通常被稱為“父選擇器”，這個(gè)偽類使我們能夠根據(jù)其后代選擇一個(gè)元素。它有一些非常有趣的用例。例如，可以根據(jù)圖像是否包含 <figcaption>，而在<figure>中對(duì)圖像進(jìn)行不同的樣式設(shè)置。

2. 使用方法

要設(shè)置包含<h3>的<section>元素的樣式，可以執(zhí)行以下操作：

section:has(h3) {
    background: lightgray;
}

當(dāng) <img> 的父級(jí) <section> 包含 <h3>時(shí)，設(shè)置 <img>的樣式：

section:has(h3) img {
    border: 5px solid lime;
}

3 當(dāng)前狀態(tài)

目前還沒(méi)有主流瀏覽器支持該屬性，但可以在 Safari 技術(shù)預(yù)覽版中使用它。

三、@when/@else

1. 基本概念

@when/@else 是CSS中的條件規(guī)則，類似于其他編程語(yǔ)言中的if/else 邏輯。它可以使編寫復(fù)雜的媒體查詢更加符合邏輯。這里選擇使用@when而不是@if是為了避免與 Sass 產(chǎn)生沖突。

2. 使用方法

可以查詢多種媒體條件或支持的功能，例如用戶的視口是否超過(guò)一定寬度，用戶瀏覽器是否支持 subgrid。

@when media(min-width: 30em) and supports(display: subgrid) {
    
} @else {
    
}

3. 當(dāng)前狀態(tài)

現(xiàn)在改屬性還沒(méi)有在瀏覽器得到支持。現(xiàn)在還為時(shí)過(guò)早，仍在討論中。預(yù)計(jì)今年不會(huì)廣泛被瀏覽器支持，但它肯定是值得關(guān)注的一個(gè)非常實(shí)用的屬性。

四、accent-color

1. 基本概念

color-scheme 屬性允許元素指示它可以輕松呈現(xiàn)的配色方案。操作系統(tǒng)配色方案的常見(jiàn)選擇是“亮”和“暗”，或者是“白天模式”和“夜間模式”。當(dāng)用戶選擇其中一種配色方案時(shí)，操作系統(tǒng)會(huì)對(duì)用戶界面進(jìn)行調(diào)整。這包括表單控件、滾動(dòng)條和 CSS 系統(tǒng)顏色的使用值。

2. 使用方法

用法很簡(jiǎn)單，而且該屬性是可繼承的。所以可以在根級(jí)別設(shè)置它，以在任何地方應(yīng)用它：

:root {
    accent-color: lime;
}

可以在單個(gè)元素上使用：

form {
    accent-color: lime;
}

input[type="checkbox"] {
    accent-color: hotpink;
}

3. 當(dāng)前狀態(tài)

目前，accent-color 在 Chrome、Edge、Firefox 和 Safari 技術(shù)預(yù)覽版中已經(jīng)得到了支持。不支持該屬性的的瀏覽器會(huì)直接使用默認(rèn)顏色，并且輸入是完全可用的。

五、顏色函數(shù)

1. 基本概念

我們可能已經(jīng)很熟悉 Hex、RGB 和 HSL 顏色格式。CSS Color Module Levels 4 和 5 中包括一整套新的顏色函數(shù)，使我們能夠以前所未有的方式在 CSS 中指定和操作顏色。它們包括：

• hwb()：色相、白度、黑度。

• lab()：亮度以及決定色調(diào)的 a和b值。

• lch()：亮度、色度、色調(diào)。

• color-mix()：將兩種顏色混合在一起。

• color-contrast()：從顏色列表中，輸出與第一個(gè)參數(shù)相比對(duì)比度最高的顏色。

• color()：指定不同顏色空間中的顏色（例如display-p3）。

2. 使用方法

hwb(), lab() 和 lch() 的使用方式與我 rgb() 和 hsl() 函數(shù)基本相同，都有一個(gè)可選的alpha 參數(shù)：

.my-element {
  background-color: lch(80% 100 50); 
}

.my-element {
  background-color: lch(80% 100 50 / 0.5); 
}

color-mix() 將其他兩種顏色混合后輸出一種顏色。我們需要指定顏色插值方法作為第一個(gè)參數(shù)：

.my-element {
  background-color: color-mix(in lch, blue, lime);
}

color-contrast() 需要一個(gè)基色來(lái)比較其他顏色。它將輸出對(duì)比度最高的顏色，或者在提供額外關(guān)鍵字的情況下，輸出列表中符合相應(yīng)對(duì)比度的第一種顏色：

/*  輸出對(duì)比度最高的顏色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* 輸出符合AA對(duì)比度的第一種顏色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

3. 當(dāng)前狀態(tài)

Safari 目前在瀏覽器支持方面處于領(lǐng)先地位，從版本 15 就開(kāi)始支持hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通過(guò) flag 啟用。Firefox 支持 hwb()，并且還標(biāo)記了對(duì) color-mix() 和 color-contrast() 的支持。令人驚訝的是，Chrome 現(xiàn)在還不支持這些函數(shù)。

在代碼中提供樣式兼容并不難：給定兩種顏色規(guī)則，如果瀏覽器不支持第二種顏色規(guī)則，它將忽略第二種顏色規(guī)則：

.my-element {
    background-color: rgb(84.08% 0% 77.36%);
    background-color: lch(50% 100 331);
}

這樣，當(dāng)瀏覽器支持該函數(shù)時(shí)，就可以直接使用了。

六、層疊層

1. 基本概念

層疊層讓我們有更多的能力來(lái)管理CSS的“層疊”部分。目前，有幾個(gè)因素決定了 CSS 代碼中將應(yīng)用哪些樣式，包括選擇器群眾和出現(xiàn)的順序。層疊層允許我們有效地將CSS分組（或者“分層”）。順序較低的層中的代碼將優(yōu)先于較高層中的代碼，即使較高層中的選擇器具有更高的權(quán)重。

2. 使用方法

下面來(lái)看看層疊層的基本使用：

/* 按順序創(chuàng)建圖層 */
@layer reset, base, theme;

/* 將CSS添加到每個(gè)層 */
@layer reset {
  
}

@layer base {
  h2.title {
      font-size: 5rem;
  }
}

@layer theme {
  h2 {
      font-size: 3rem;
  }
}

theme 層中的CSS字體大小聲明將覆蓋base層中的字體大小聲明，盡管后者選擇器具有更高的權(quán)重。

3. 當(dāng)前狀態(tài)

最新版本的 Firefox 已經(jīng)支持了層疊層，并且可以在 Chrome 和 Edge 中使用 flag 啟用（Chrome 99 版本將全面支持層疊層）?？雌饋?lái)所有主流瀏覽器都在使用這個(gè)規(guī)范，所以希望盡快能得到更廣泛的支持。

七、subgrid

1. 基本概念

作為 CSS Grid Layout Module 2 規(guī)范的一部分，subgrid 允許元素在行軸或列軸上繼承其父元素的網(wǎng)格。subgrid 對(duì)于解決各種用戶界面挑戰(zhàn)非常有用。

例如，以下面這個(gè)帶有標(biāo)題的圖像為例。標(biāo)題的長(zhǎng)度各不相同，使用 subgrid 可以直接讓它們對(duì)齊，而無(wú)需設(shè)置固定的高度。

2. 使用方法

首先將父元素設(shè)置為grid布局，將子元素的“grid-template-columns”或“grid-template-rows”屬性設(shè)置為 subgrid：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

.grid > figure {
    display: grid;
    grid-template-rows: subgrid;
}

.grid figcaption {
    grid-row: 2;
}

實(shí)現(xiàn)效果：

完整代碼：

html：

<div class="grid">
  <figure>
    <img src='https://images.unsplash.com/photo-1633083018029-bd1d4d52cb19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTYyMw&ixlib=rb-1.2.1&q=80&w=400' alt='Bluetit'>
    <figcaption>A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors.</figcaption>
  </figure>
  <figure>
    <img src='https://images.unsplash.com/photo-1619976302135-5efbc2a7785a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTY4NA&ixlib=rb-1.2.1&q=80&w=400' alt='Robin'>
    <figcaption>Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders.</figcaption>
  </figure>
  <figure>
    <img src='https://images.unsplash.com/photo-1623627733740-4724cb1fe84e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTc4NQ&ixlib=rb-1.2.1&q=80&w=400' alt='Chaffinch'>
    <figcaption>The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.</figcaption>
  </figure>
</div>

CSS：

* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: max(1rem, 3vw);
}

figure {
  margin: 0;
  display: grid;
/*  grid-template-rows: subgrid; */
/*  grid-row: 1 / 3; */
}

img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  grid-row: 1 / 3;
  grid-column: 1;
}

figcaption {
  padding: 1rem;
  grid-column: 1;
  grid-row: 2;
  background: hsl(0 0% 0% / 0.6);
  color: white;
}

.grid {
  display: grid;
  max-width: 80rem;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

@media (min-width: 62em) {
  .grid {
    grid-template-rows: 1fr auto;
  }
  
  figure {
    grid-template-rows: subgrid;
    grid-row: 1 / 3;
  }
}

3. 當(dāng)前狀態(tài)

值得注意的是，自 2019 年以來(lái)，F(xiàn)irefox 已經(jīng)支持了 subgrid，但近三年后還沒(méi)有其他瀏覽器跟進(jìn)。有跡象表明 Chromium 團(tuán)隊(duì)已經(jīng)開(kāi)始著手實(shí)現(xiàn)它，所以可能有幸在今年看到它登陸 Chrome 和 Edge。

八、@scroll-timeline

1. 基本概念

@scroll-timeline 屬性定義了一個(gè)AnimationTimeline，其時(shí)間值由滾動(dòng)容器中的滾動(dòng)進(jìn)度決定（而不是時(shí)間決定）。一旦指定，@scroll-timeline 將通過(guò)使用animation-timeline 屬性與CSS Animation相關(guān)聯(lián)。

2. 使用方法

這里來(lái)看一個(gè)簡(jiǎn)單的例子：

/* 設(shè)置關(guān)鍵幀動(dòng)畫 */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* 配置scroll timeline，這里將它命名為了slide-timeline */
@scroll-timeline slide-timeline {
  source: auto;
  orientation: vertical; 
  scroll-offsets: 0%, 100%; 

/*  指定關(guān)鍵幀動(dòng)畫和 scroll-timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

我們也可以對(duì)scroll-offsets屬性使用基于元素的偏移量，以在特定元素滾動(dòng)到視圖中時(shí)觸發(fā)  timeline：

@scroll-timeline slide-timeline {
    scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}

3. 當(dāng)前狀態(tài)

如果對(duì) @scroll-timeline 感興趣，可以在 Chrome 中使用 flag 來(lái)啟用它。當(dāng)我們遇到一個(gè)復(fù)雜的動(dòng)畫時(shí)，可能需要使用 JavaScript 動(dòng)畫庫(kù)來(lái)實(shí)現(xiàn)，但是對(duì)于相對(duì)簡(jiǎn)單的動(dòng)畫，使用該屬性就可以減少不必要的import。

九、嵌套

1. 基本概念

如果你熟悉 Sass，就會(huì)知道嵌套選擇器的便利性。本質(zhì)上，就是在父級(jí)中編寫子級(jí)規(guī)則。嵌套可以使編寫CSS代碼更加方便，現(xiàn)在嵌套終于來(lái)到了原生 CSS！

2. 使用方法

從語(yǔ)法上講，它與 Sass 相似。下面來(lái)給 class 為 card 中的 h3 子元素定義樣式規(guī)則：

.card {
    color: red;

    & h3 {
        color: blue;
    }
}

可以將其用于偽類和偽元素：

.link {
    color: red;

    &:hover,
    &:focus {
        color: blue;
    }
}

這些就等價(jià)于下列 CSS 代碼：

.link {
    color: red;
}

.link:hover,
.link:focus {
    color: blue;
}

3. 當(dāng)前狀態(tài)

目前還沒(méi)有瀏覽器支持嵌套。如果你使用PostCSS，可以通過(guò)預(yù)置的 postcss-preset-env 插件來(lái)嘗試嵌套。

到此，關(guān)于“CSS新特性有哪些及如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！