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-y:hidden;

white-space: nowrap;

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

scroll-snap-type: x mandatory;

}

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

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

更多关于该特性的介绍可以查看这里:https://www.w3.org/TR/css-scroll-snap-1/

不过遗憾的是,截至目前只有苹果的Safari浏览器支持该特性。

三、在中使用内联css

虽然我们很多人都试过在中使用css,但以前这认为是不规范的,而HTML5.2则正式将其合法化。

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

p { color: #069; }

Vestibulum interdum pellentesque massa

四、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;

}

}

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180117A0L75G00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励