HTML和CSS增加了5个新特性

　　很多人对html和css会不屑一顾，认为这不属于编程的范畴，而且没有什么技术含量。但实际上，html和css一直在发展前进，而为了支持一些新的特性，其实浏览器厂商在背后做了大量的技术工作，从而，开发人员可以通过简单的语法、标签就能够实现丰富的功能和效果。如果你现在还认为html和css只是新手的专利，那么，你是时候要转变一下观念了，不然的话，你将很可能会被这个世界所抛弃。

　　那么，展望2018年，html和css又会有哪些新的变化呢?我们先来一睹为快。

　　一、元素

　　当你要在网页中实现一个dialog，你通常的做法可能是通过第三方库来实现，例如jquery ui、bootstrap等都可以做出很漂亮的dialog。随着2017年12月html 5.2规范发布，你以后将可以直接在html中使用标签来定义一个对话框。当然，要实现绚丽的效果，你还得配合css使用。

　　目前，主流浏览器对该特性的支持情况如下：

二、css scroll snap(滚动捕捉)

css scroll snap是css的 新模块，引入了滚动捕捉位置。它可以决定滚动操作完成后容器的滚动端口结束的具体位置。

img {

/*指 定每个图片的中心在对齐时应该与x轴上滚动容器的中心对齐*/

scroll-snap-align ： center none ;

}

.photogallery{

width:500 px ;

overflow-x:auto ;

overflow-y:hidden;

white-space: nowrap;

/*滚动操作完成时，要求滚动位置始终处于捕捉位置。*/

scroll-snap-type: x mandatory;

}

三、在

虽然我们很多人都试过在

p { color: #069; }

四、css变量

css预处理器已经存在很长一段时间，目前大多数浏览器都对其提供了支持，如今css变量正式作为一种规范纳入，意味着它从杂牌军转为正规军，还是值得高兴的。

:root {

--main-color: #069;

}

h1, h2, h3 { color: var(--main-color); } 

a { color: var(--main-color); text-decoration:underline }

五、@supports

浏览器兼容性对于做前端的朋友感触很深，尤其是在ie当道的年代，那种痛苦真的可谓哑巴吃黄连，有苦自己知。新的规范为我们提供了一个@supports功能，它可以供开发人员来检查浏览器是否支持特定的属性。目前，除了ie以外的所有主流浏览器都支持该特性。

@supports (mix-blend-mode: overlay) {

.example {

mix-blend-mode: overlay;

}

}

文中图片素材来源网络，如有侵权请联系删除

查看上一篇

查看下一篇