新年快乐!
新的一年到了,我们重新有了一整套新的东西要学习。 虽然有很多新的功能,但以下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,你是否已经很期待了.