自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中文网其他相关文章！