前端那些新东西

old

1. window.getComputedStyle:mdn介绍

返回一个对象，在应用样式表解析并计算完成后，包含指定元素的所有css属性值。
let style = window.getComputedStyle(element, [pseudoElt]);
描述： 返回对象与从元素style属性返回的对象具有相同的类型。但从getComputedStyle返回的对象是只读的，用于检查元素样式；el.style对象用于在特定元素上设置样式。
defaultView: 在许多在线的演示代码中，getComputedStyle是通过 document.defaultView 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView, 那是在firefox3.6上访问子框架内的样式 。

2. createNodeIterator
   如何遍历输出页面中的所有元素?

const body = document.getElementsByTagName('body')[0]
const it = document.createNodeIterator(body)
    let root = it.nextNode()
    while(root) {
        console.log(root)
        root = it.nextNode()
    }

3. aspect-ratio按百分比保持宽高
   auto： 默认值，它指定元素没有首选的纵横比，应该像往常一样调整自己的大小。因此，替换元素，如具有固有纵横比的图像，使用 该 纵横比。
   : 由正斜杠 ( /)分隔的两个正数值，它们周围有或没有空格，目标是元素的宽度和高度。在单个值的情况下，第二个值被认为是 1。涉及首选纵横比的大小计算适用于指定的框的尺寸 box-sizing。
   initial： 应用属性的默认设置，即auto。
   inherit： 采用aspect-ratio父级的值。
   unset： 从元素中删除当前的纵横比。

new

CSS content-visiblity

只需一行CSS代码，让长列表网页的渲染性能提升几倍以上
content-visiblity

CSS @scroll-timeline 滚动时间线

@scroll-timeline 定义一个动画效果，该动画的开始和结束可以通过容器的滚动来进行控制。

@scroll-timeline 滚动时间线

CSS MASK

Mask
mask-mdn

mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

在google下需添加 -webkit-

{
    /* Image values */
    mask: url(mask.png);                       /* 使用位图来做遮罩 */
    mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */
    mask: linear-gradient(#000, transparent)  /* backgournd参数渐变 */
}

/*样一张图片，叠加上一个从透明到黑色的渐变，*/
{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

/* mask 实现简单的图片裁剪*/
/* 使用线性渐变，我们实现一个简单的切角图形*/
.notching{
    width: 200px;
    height: 120px;
    background:
    linear-gradient(135deg, transparent 15px, deeppink 0)
    top left,
    linear-gradient(-135deg, transparent 15px, deeppink 0)
    top right,
    linear-gradient(-45deg, transparent 15px, deeppink 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, deeppink 0)
    bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
/* 运用到 mask 之上，而 background 替换成一张图片，就可以得到运用了切角效果的图片：*/
{
	background: url(image.png);
    mask:
        linear-gradient(135deg, transparent 15px, #fff 0)
        top left,
        linear-gradient(-135deg, transparent 15px, #fff 0)
        top right,
        linear-gradient(-45deg, transparent 15px, #fff 0)
        bottom right,
        linear-gradient(45deg, transparent 15px, #fff 0)
        bottom left;
    mask-size: 50% 50%;
    mask-repeat: no-repeat;
}

/*两张图片，使用 mask，可以很好将他们叠加在一起进行展示。*/
div {
    position: relative;
    background: url(image1.jpg);

    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0;bottom: 0;
        background: url(image2.jpg);
        mask: linear-gradient(45deg, #000 50%, transparent 50%);
    }
}

效果如图：