为了帮助开发人员混合使用 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网格中使用微布局创建微布局。
示例
以下示例显示其中一些属性 –
实时演示
* { 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;}:is() operator is DEMOAlt + F4EnterHowzit?
输出
这将产生以下结果 –
示例
现场演示
#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);}Watch this cool effect
输出
这将产生以下结果 –
以上就是2020 年网页设计最新 CSS 属性和 API的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625717.html
微信扫一扫 
支付宝扫一扫 
