2017年要学习的3个CSS新特性

原文:3 New CSS Features

新年快乐!

新的一年到了,我们重新有了一整套新的东西要学习。 虽然有很多新的功能,但以下3个是我今年最想要使用的.

1.功能查询

前一段时间,我写了关于功能查询是我真正想要的一个CSS功能。 好了,现在它基本上在这里! 除了IE,它现在支持其他主流浏览器(包括Opera Mini)。

使用@supports规则的功能查询允许我们在一个条件块中包装CSS,该条件块仅在当前用户代理支持特定的CSS属性值对时应用。 一个简单的示例是只将Flexbox样式应用于支持显示的浏览器:flex -


此外,使用'like'和'not'的运算符,我们可以创建更复杂的功能查询。 例如,我们可以检测浏览器是否只支持旧的Flexbox语法 -


Support


2. 网格布局

CSS网格布局模块定义用于创建基于网格的布局的系统。 它与Flexbible Box布局模块具有相似之处,但是更专业用于页面布局,因此具有许多不同的特征。

显示项展示位置

网格由网格容器(使用display:grid创建)和网格项(它的子项)组成。 在我们的CSS中,我们可以轻松和明确地定义网格项的位置和顺序,而与其在标记中的位置无关。

Support

CSS网格模块将在今年3月在浏览器中可用。


3.原生变量

最后,本地CSS变量(级联变量的自定义属性模块)。 此模块介绍了创建作者定义的变量的方法,它可以作为值分配给CSS属性。

例如,如果我们有一个主题颜色,我们在样式表中的几个地方使用,我们可以将它抽象成一个变量并引用该变量,而不是多次写出实际值。


这是我们能够在CSS预处理器(如SASS)的帮助下做的,但CSS变量具有生活在浏览器中的优势。 这意味着他们的值可以实时更新。 要更改上面的--theme-color属性,例如,我们所要做的就是以下 -


Support


以上内容应该都属于CSS4,你是否已经很期待了.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容