◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
2020 年网页设计最新 CSS 属性和 API
ID:13442 / 打印为了帮助开发人员混合使用 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>输出
这将产生以下结果 -
