所属分类：web前端开发
为了帮助开发人员混合使用 JavaScript 和 CSS 自定义网站，我们开发了新的 CSS 属性，现在支持流行的浏览器。下面列出了其中一些 -
它旨在解决元素内的焦点可访问性
这可以实现原生滚动和减速
帮助根据用户的设备偏好设置页面的 UI 和 UX，从而实现更高级别的个性化.
* 可以表示亮度、强制颜色、配色方案、对比度、减少运动和减少透明度
到将 UI 保持在视口内。
允许我们在元素内部和周围拥有动态方向间距。
此属性现在可用于 Flexbox。间隙将容器设置为拥有间距，而不是让每个子元素都有自己的间距。
用于方便地设置元素后面的样式。
CSS Houdini API一种低级 API，使开发人员能够告诉浏览器他们希望如何阅读和理解自定义 CSS。开发人员现在可以通过更易于使用的方式访问 CSS 对象模型。布局 API、Paint API、Parser API、Properties & Values API、AnimationWorklet、Typed OM 和 Font Metrics API 均属于此范围。
维护媒体尺寸
在一个属性中设置高度和宽度
对任何CSS属性设置约束
双值语法可以更好地适应元素
向列表添加自定义样式
我们现在可以使用 JavaScript 从本地或远程文件请求特定模块
填充区域带有内容
帮助我们在CSS网格中使用微布局创建微布局。
以下示例显示其中一些属性 -
实时演示
微博登录
QQ登录<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
text-align: center;
}
:is(header, main, footer) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:matches(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>这将产生以下结果 -
现场演示
<html>
<head>
<style>
#parent {
margin: 8%;
background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
padding: 2%;
width: 200px;
height: 200px;
box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
margin-top: 20vh;
backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body>这将产生以下结果 -
