你可能没见过的css

本文将会介绍的css有

1. blend Modes
2. aspect-ratio
3. clip-path
4. position: sticky
5. filter
6. backdrop-filter
7. 新的@media属性
8. @supports 各位看官可以根据自己的想法选择自己想要查看的css

blend Modes

<blend-mode>  是一种 CSS 数据类型，用于描述当元素重叠时，颜色应当如何呈现。它被用于 background-blend-mode 和 mix-blend-mode 属性。

那么到底这里可以做什么呢，我们来看一个例子

产品小红有一个需求，在一个区域背景色可以自定义 , 或者自定义图片，同时背景区域内的文字可以在和背景色相近或相同的情况下还能看清楚文字

如果我们文字颜色固定设置为白色，我们设置文字颜色为白色，同时设置颜色混合模式为mix-blend-mode: exclusion; 这个时候背景色为ff0000，文字的颜色会自动切换为反色00ffff。这样暂时就达到了产品同学想要的效果。

在线demo A Pen by sxuan (codepen.io)

兼容性:

aspect-ratio

aspect-ratio  CSS属性为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

aspect-ratio: 1 / 1;
/* 全局值 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: unset;

有没有什么办法可以让一个有宽度的元素的高度保持一个固定比例。在这个css出来之前，其实江湖上流传着一些黑科技。比如采用高度为0的padding-top 或 padding-bottom。或者采用calc函数。

在推出了aspect-ratio后，我们只需要配置一个宽度或一个高度，再配置一个你想要了宽高比例即可。

在线demo A Pen by sxuan (codepen.io)

兼容性:

clip-path

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

如果你的产品或者设计同学提出要将图片裁剪成一些奇怪的形状，不妨来尝试一下clip-path属性

在线demo A Pen by sxuan (codepen.io)

兼容性:

position: sticky

CSS **position**属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

• 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor） 和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

• 该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。

具体的效果和用法是什么呢，我们来看一个例子

交互小黄同学想要一个，一些元素滚动之后，在即将滚动出可是范围内，固定在这个滚动窗口顶部的一个交互效果

我们首先将需要吸附的元素设置sticky属性，设置任意一个偏移值即可

在线demo A Pen by sxuan (codepen.io)

兼容性:

filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素(SVG filter element)。

具体可能做什么呢，我们来看一个例子

产品小红想要一个图片在线编辑预览效果的工具，比如修改图片的明亮度，对比度等等

效果预览 A Pen by sxuan (codepen.io)

兼容性

backdrop-filter

backdrop-filter css 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

那么他和filter有什么区别呢

• backdrop-filter作用于当前元素所在区域的背景
• Filter作用于元素本身，同时子元素也会有这个效果

我们来看一个例子

设计小青想要在一个图片上实现文字背景部分高斯模糊的效果。同时背景图片和文字不能有高斯模糊的效果。例子。下图的红色部分模糊，文字不能模糊

效果预览 A Pen by sxuan (codepen.io)

兼容性

新的@media属性

• prefers-reduced-motion
• prefers-color-scheme
• inverted-colors

1.prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能

2.prefers-color-scheme用于检测用户是否有将系统的主题色设置为亮色或者暗色。

3.inverted-colors用于检测用户基础操作系统是否反转颜色

小例子

产品小红想要根据用户使用的主题外观是深色还是浅色实现背景的变色，比如用户是深色，页面的主色调为深色，文字变成浅色；用户是浅色，页面的主色调就变成浅色，文字变成深色

效果预览 A Pen by sxuan (codepen.io)

请改变系统的主题色查看效果

兼容性

@supports

supports CSS at-rule 您可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。 通俗点讲，就是如果这个css支持，就会使用这个css

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    float: right;
  }
}

兼容性