css新特性

css新特性

宣言：合抱之木，生于毫末；九层之台，起于累土

本篇可能有些属性已经不是那么新了，还是写了一下并有人知道有人不知道嘛！对于本篇的例子我写的那可谓是相当简单，非常易于理解。嘻嘻，至少我觉得是那样！如果看了本文的同学真的有所收获那我也是非常幸运，如果没什么收获，看看就好啦！我会再接再厉的！！！

:is()

:is()css伪类函数可将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。就是说is它的参数是一个列表可以选择列表任意的元素。

利用:is()来对css进行代码的重复部分的删减。

举个例子：

//选择header,main,footer任意一个悬浮状态的段落p
:is(header,main,footer)p:hover{
	color:red;
	cursor:pointer;
}
//上面的css相当于下面：
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

是不是觉得有了这个元素确实可以减少一些代码呢 。从下面的浏览器支持情况来看的话还不是很好ie完全不支持，其他的基本只支持高版本的浏览器。不建议在项目中直接使用。

:where()

:where()与:is()具有相同的语法和功能，但是:where()不会增加整体选择器的特殊性，因此我们可以使用:where()来降低特殊性.

什么是特殊性呢？就是某条css规则的特殊性越高，它的样式被应用的优先级越高

:where() 的优先级总是为 0 ，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

:not()

Selectors Level 3 只允许:not()伪类接受一个简单的选择器，元素不能匹配任何一个。因此不能写成：
not(a, .b, [c])或者:not(a.b[c])。但是在Selectors Level 4中允许:not()伪类接收一个列表选择器。因此可以支持:not(a, .b, [c])的写法。

:not()的用法

//设置所有未设置.header的标签内字体颜色
<p>第一行</p>
<p class="header">第二行</p>
<p>第三行</p>
<p class="header">第四行</p>
<p>第五行</p>

:has()

:has()表示只选择包含指定元素的内容。比如div:has(>img)

:empty

:empty()标识空的元素

//如果p标签内无元素，背景则为红色
p:empty{background-color:red}

这个伪类我感觉对于空的处理还是比较好的，无需if语句判断就可以直接css搞定。可以应用的场景也挺多。

比如列表某行为空时，可以利用empty为其添加为空的图片示意。但是如果说你想在空的地方插入内容，那只使用empty是远远不够的。我们可以使用:empty+:before/:after向标签内插入内容、图形，并不影响empty伪类的匹配。如下：

 p:empty::before{
            content:'_______'
        }
        
  <p>假如生活欺骗了你</p>
  <p></p>
  <p>不要心急</p>       

并且浏览器对与它的支持也比较好。

:blank

:blank选择输入框为空的元素比如和

目前:blank的浏览器完全无法支持，CSSWG正在持续改进它。

display：contents

display对于我们来说是最常见的属性，但是contents这个取值我们几乎用不到。但是它早在 2016 年就已经得到了 Firefox 的支持。

当前大多数浏览器对 display: contents; 的实现是：将设置了该值的元素从可访问性树中移除，但保留其子代元素。这会导致该元素自身不再被屏幕阅读技术访问zh。

设置display:contents的元素本身不会被渲染，但是其子元素可以正常被渲染。

那它可以做什么呢？

我觉得设置了它就类似于小程序里面的或者vue里面的.用来充当无语义的包裹框。而和不会被渲染在DOM树中，查看页面结构也无法看到，但是display:contents是存在于页面结构中的，只是没有生成任何盒子。

找个别人例子给大家看一下：

 .container {
            width: 200px;
            height: 100px;
            background: #bbb;
        }

        .wrap {
            border: 2px solid red;
            padding: 20px;
            box-sizing: border-box;
        }

        .inner {
            border: 2px solid green;
            padding: 20px;
            box-sizing: border-box;
        }
        
        <div class="container">
          <div class="wrap" style="display: contents">
            <div class="inner"></div>
          </div>
        </div>

未设置contents属性值的展示：

设置之后的展示：

目前这个属性值的浏览器支持情况如下：

css滚动快照

css引入滚动快照，它强制滚动位置，即滚动容器的滚动端口在滚动操作完成后可能结束的滚动位置。

它拥有滚动容器属性和滚动子元素上的属性。具体属性这里就不列举了地址贴在这里：

css滚动快照：容器属性和子属性

下面举个例子：利用滚动容器属性scroll-snap-type和子属性scroll-snap-align完成当滑动时一定落在一个整块内

ul {
            display: flex;
            width: 300px;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x mandatory; 
        }
        li {
            width: 300px;
            height: 100px;
            flex-shrink: 0;
            background-color: aqua;
            scroll-snap-align: center;//使得不规则子元素每次滚动后居于容器中间
            border-right: 2px solid #fff; 
        }

scroll-snap-type含有以下属性：

/* 关键值 */
scroll-snap-type: none;          //当这个滚动容器的可视的 viewport 是滚动的，它必须忽略临时点。
scroll-snap-type: x;             //滚动容器只捕捉其水平轴上的捕捉位置。
scroll-snap-type: y;             //滚动容器只捕捉其垂直轴上的捕捉位置。
scroll-snap-type: block;         //滚动容器仅捕捉到其块轴上的捕捉位置。
scroll-snap-type: inline;        //滚动容器仅捕捉到其内联轴上的捕捉位置。
scroll-snap-type: both;          //滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素）

/* 可选 mandatory | proximity*/
scroll-snap-type: x mandatory;    //捕捉x轴上的滚动，每次滚动后强制停留到规定的位置
scroll-snap-type: y proximity;    //捕捉y轴上的滚动，每次滚动后强制停留到规定的位置
scroll-snap-type: both mandatory;
//mandatory:当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。
//proximity:如果它当前没有被滚动，这个滚动容器的可视视图将基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

/* 全局值 */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

scroll-snap-align的属性值：

• start:指定滚动到子元素的开始位置
• end：指定滚动到子元素的结束位置
• center：指定滚动到子元素的中间位置

看完感觉捕捉快照这个css特性还是相当好用，不仅增强了用户体检并且更容易实现滚动体验。

下面是目前这属性的浏览器支持情况：

background-repeat

一直使用background-repeat这个属性，只了解这几个属性no-repeat或repeat(repeat-x/repeat-y)，但是对于剩余的属性round和repeat确实从未使用过。下面大概讲一下这些属性的特点：

repeat:有时候会造成背景图片在平铺的时候被裁剪

round:可以让背景图片在平铺的时候根据容器的宽高对背景图片做相应的尺寸调缩放，不会裁剪图片。

space:可以让背景图裁剪至容器大小，不会缩放。

@supports功能查询

这个特性可以指定依赖于浏览器中的一个或者多个特定的css功能的支持声明。被称为特性查询。

在javascript中，我们可以通过css对象模型接口CSSSupportsRule来访问@supports。

@supports支持由一组样式声明和一条支持条件构成。支持条件由一条或者多条使用and\or\not组成；可以使用圆括号调整操作符的优先级。

@supports (display: grid){//判断浏览器是否支持display: grid
            .site-content {
                display: grid;
            }
        }
        /* @supports理解操作符 not\and\or来创造更具体的规则 */

比如可能移动端经常会使用它来解决iphonex的底部的黑条：

// 判断浏览器是否支持 bottom: env(safe-area-inset-bottom）
@supports (bottom: env(safe-area-inset-bottom)) { 
  body::after{ //如果兼容，则给底部添加安全距离
　　 content:'',
　　 display:block,
　　 height:constant(safe-area-inset-buttom),  //高度等于小黑条的高度
    background-color:white,
 }
}

下面是目前这个特性的浏览器支持情况：

Gaps

经过查询资料发现gaps发布于2016年，在当时的话还并不适用，那经过了这么多年现在它的兼容性基本良好，可以应用在项目中。什么是gaps，翻译过来就是缝隙的意思。它一共有6个属性：

• row-gap
• column-gap
• gap
• grid-row-gap
• grid-column-gap
• grid-gap

我们基本可以忽略后面的这3个属性，因为随着使用渐渐被废弃了。虽然浏览器还支持，但是基本会忽略它的前缀 grid-

现在我们来讲件这前三个属性，gap是前两个属性的缩写，因此我们只要搞懂了前两个row-gap和column-gap，自然会明白gap作用啦

看个例子吧！

       .flex-column-gap{
            display: flex;
            column-gap: 16px;
        }
 
        .flex-row-gap{
            display: grid;
            row-gap: 16px;
            gap: 16px;
        }

（1）蓝色区域是使用了column-gap在列间中引入空隙
（2）红色区域使用了row-gap 在行间中引入空隙

现在我们对这几个属性清楚了吧，看一下兼容性，这里只贴了gap这个综合属性的兼容性，其它两个属性与这个基本类似，感兴趣可以去查查：

这个是gap和grid搭配使用的兼容性，与flexbox搭配的兼容情况如下：

content-visibility

content-visibility控制元素是否呈现其内容，能让用户潜在地控制元素的呈现。就像懒加载一样，仅渲染可视区域内的元素，让页面渲染性能极大提升。它包含三个属性值：visible、hidden、auto

• visible:没有效果。元素的内容按照正常的方式布局和呈现。
• hidden: 无论元素是否在可视区域内，都不渲染。类似于display:none比如：页面内查找、选项卡顺序导航等也是不能可选择的或者可聚焦的。
• auto：可视区域外的元素将会被跳过，一旦出现在可视区域内就会被渲染。

这个属性虽好，但是当前浏览器的支持率比较低。之后如果浏览器支持了那将会很nice哦

:target 和 :target-within

:target与我们熟知的锚点定位关系密切。那锚点定位是怎样子的呢？

锚点定位有以下几种方法：

1.id定位:任意标签都可
<a href='#content1'>
<div id="head"></div>
<div id="content1">....</div>
2.name定位:只能对a标签进行定位，其他标签不可以
<a href='#content1'>
<a name="content1">....</a>
3.js定位:
<div onclick='javascript:document.getElementById('here').scrollIntoView'></div>

为什么说它们关系密切，因为:target表示一个唯一的活动元素（目标元素），它的id与当前的URL跳转地址匹配。根据id，设置目标元素跳转后的样式。

 /* :target{
            width: 200px;
            border-radius: 4px;
            background-color: rgb(57, 100, 86);
        } */
        /* 或者这样 */
        #content1:target,
        #content2:target,
        #content3:target {
            width: 200px;
            border-radius: 4px;
            background-color: rgb(57, 100, 86);
        }

 <p><a href="#content1">跳转到1号位</a></p>
 <p><a href="#content2">跳转到2号位</a></p>
 <ul>
    <li id="content1">1号位的背景</li>
    <li id="content2">2号位的背景</li>
 </ul>

当然不仅仅可以做这种，我们也可以利用这个选择器做tab的切换或者抽屉式菜单（target和not:target）

既然这么好用了当然有人肯定要问兼容性了，看下图：还是很不错的哦

与此属性相关的一些属性还有:target-text和:target-within但是兼容性都不好基本没法使用。感兴趣的可以去体验一下这里就不讲啦。