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;

}

有点抽象是吧？看下图就明白了。

在这个示例中，snapport由红色矩形框表示，捕捉区域由黄色矩形表示。由于我们在X轴上的滚动对齐设置为“center”，所以，当我们每次滚动的时候，图片的中心（用黄色虚线表示）将会对齐容器的X轴的中心（用红色虚线表示）。