自2015年CSS3以來，什麼是新的？

CSS3的影響是不可否認的。大量功能（級別，動畫，圓角，盒子陰影，變換）革命化了CSS開發。 CSS3（以及相關的“ HTML5”綽號）的廣泛採用導致了大量的學習資源。但是，從那以後，許多開發人員並沒有大量更新其CSS技能。這篇文章橋接了差距。

斯科特·范德海（Scott Vandehey）的“簡而言之”的“現代CSS”突出了這一學習曲線。他指出，對預處理器的需求減少（包括自動改裝器和未來功能的多填充物）以及CSS-In-JS的上下文特定相關性（主要在JavaScript較重的項目中有用）。他強調了掌握自定義屬性，Flexbox和網格的重要性。

以此為基礎，讓我們探索自2015年以來的關鍵CSS進步：

CSS3後增強功能

佈局革命：Flexbox和網格

Flexbox和網格對現代CSS至關重要。 Grid的功率通過Subgrid和Masonry佈局擴大（儘管跨瀏覽器的可靠性仍在發展）。

 。卡片 {
  顯示：網格；
  網格板柱：150px 1fr;
  差距：1REM；
}
.card .nav {
  顯示：Flex;
  差距：0.5REM；
}

CSS自定義屬性：設計令牌和主題

自定義屬性對於管理設計令牌，確保一致性和簡化維護至關重要。暗模式實現是一個很好的示例。整個站點都可以主要使用自定義屬性進行樣式，並補充諸如Tailwind CSS（儘管有分裂的方法）之類的框架。

 html {
  -bgcolor：＃70f1d9;
   -  Font-size base：夾具（1.833REM，2VW 1REM，3REM）;
  -Font-Size-LRG：夾具（1.375REM，2VW 1REM，2.25REM）;
}

html.dark {
  -bgcolor：＃2D283E;
}

優先查詢：以用戶為中心的設計

偏好查詢，擴展傳統的媒體查詢，檢測用戶偏好（例如， prefers-reduced-motion ， prefers-color-scheme ）。這允許更容易訪問和個性化的用戶體驗。

 @Media（預先減少的動作：降低）{
  * {
    動畫效果：0.001！重要；
  }
}

@Media（prefers-color-scheme：dark）{
  ：根 {
    -bg：＃222;
  }
}

增強的顏色語法和新的顏色空間

顏色語法已演變為將alpha值直接包含在功能中（例如rgb(0 0 255 / 0.5) ）。新的顏色空間color() ， lab() ， lch() ， hwb() - 提供擴展的顏色表示功能。

 。堵塞 {
  背景：HSL（0 33％53％ / 0.5）;
  背景：RGB（255 0 0）;
  背景：顏色（display-p3 0.9176 0.2003 0.1386）;
  背景：實驗室（52.2345％40.1645 59.9971 / .5）;
  背景：HWB（194 0％0％ / .5）;
}

可變字體：增強版式

與傳統的Web字體相比，可變字體可提供性能提高和設計靈活性。儘管存在顏色字體，但它們並沒有得到廣泛採用。

身體 {
  字體家庭：“遞歸”，sans-serif;
  字體重量：950;
  字體變化 - 插條：“單聲道” 1，'casl'1;
}

通過路徑，剪輯和掩蓋的SVG集成

CSS現在與SVG無縫集成，允許基於形狀的剪輯（ clip-path ），掩碼（ mask ），基於路徑的動畫（ offset-path ）和路徑操作（ d屬性）。

 。剪下 {
  剪輯路徑：多邊形（25％0％，75％0％，100％50％，75％100％，25％100％，0％50％）;
}

CSS過濾器：圖像和元素操縱

CSS過濾器提供了廣泛的圖像操縱功能（ filter ），背景混合（ background-blend-mode ），背景過濾（ backdrop-filter ）和元素混合（ mix-blend-mode ）。

 .disable {
  過濾器：Blur（1px）灰度（1）;
}

Houdini：使用JavaScript擴展CSS

Houdini提供了JavaScript供電的CSS擴展，包括油漆API，屬性和值API，Layout API和Animation API。儘管瀏覽器支持有所不同，但其模塊化和易用性是有希望的。

導入“ https://unpkg.com/extra.css/confetti.js”；

陰影DOM和Web組件樣式

陰影DOM會影響樣式網絡組件，需要了解外部樣式技術。

 my-component {
  -bg：Lightgreen;
}

CSS的未來

雖然趕上當前功能至關重要，但仍在範圍內：容器查詢，容器單元，獨立變換，嵌套，級聯層，改進的視口單元， :has()選擇器和滾動時間表。

此概述提供了CSS3時代以來CSS進步的全面更新，為開發人員提供了知識，以構建現代，高效和用戶友好的網站。

以上是自2015年CSS3以來，什麼是新的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！