2020 年网页设计最新 CSS 属性和 API

百变鹏仔 3个月前 (09-20) #CSS

文章标签网页设计

为了帮助开发人员混合使用 javascript 和 css 自定义网站，我们开发了新的 css 属性，现在支持流行的浏览器。下面列出了其中一些 -

focus-within

它旨在解决元素内的焦点可访问性

scroll-snap

这可以实现原生滚动和减速

@media(prefers-*)

帮助根据用户的设备偏好设置页面的 UI 和 UX，从而实现更高级别的个性化.

* 可以表示亮度、强制颜色、配色方案、对比度、减少运动和减少透明度

立即学习“前端免费学习笔记（深入）”；

位置：粘性

到将 UI 保持在视口内。

具有标准布局的逻辑属性

允许我们在元素内部和周围拥有动态方向间距。

gap 属性

此属性现在可用于 Flexbox。间隙将容器设置为拥有间距，而不是让每个子元素都有自己的间距。

backfrop-filter

用于方便地设置元素后面的样式。

CSS Houdini API

一种低级 API，使开发人员能够告诉浏览器他们希望如何阅读和理解自定义 CSS。开发人员现在可以通过更易于使用的方式访问 CSS 对象模型。布局 API、Paint API、Parser API、Properties & Values API、AnimationWorklet、Typed OM 和 Font Metrics API 均属于此范围。

宽高比

维护媒体尺寸

size

在一个属性中设置高度和宽度

min()、max()和clamp()

对任何CSS属性设置约束

显示：外部内部

双值语法可以更好地适应元素

list-style-type

向列表添加自定义样式

CSS 模块

我们现在可以使用 JavaScript 从本地或远程文件请求特定模块

CSS 区域

填充区域带有内容

CSS子网格

帮助我们在CSS网格中使用微布局创建微布局。

示例

以下示例显示其中一些属性 -

实时演示

<!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>

输出