2017年值得学习的3个CSS特性

2024-04-27 15:14:45

字体：大中小

来源：转载

供稿：网友

原文：https://bitsofco.de/3-new-CSS-features-to-learn-in-2017/ 译文：http://caibaojian.com/3-new-css-features-to-learn-in-2017.html 译者：前端开发博客（蔡宝坚）

未经许可，禁止转载，如有不妥之处，欢迎指正。

新年快乐！随着新的一年到来，我们有一整套新的东西要开始学习。虽然今年的新特性有很多，但有3个新的特性是最令我激动不已的。

1.Feature Queries

前段时间，我写过关于Feature Queries的一篇文章，叫“我最想要的CSS特性之一”。好了，现在它已经出现在这里了。它支持除了IE浏览器之外的所有主流浏览器（包括Opera Mini）。

Feature Queries，使用这个 @supports 规则，允许我们包含CSS在一个条件块，但只有当前用户客户端支持一个特别的CSS PRoperty-value 才有效。举个简单的例子，只支持 display:flex 的浏览器才用Flexbox样式。

@supports ( display:flxe ){ .foo { display:flex; }}

另外，使用像 and 和 not 的操作符，我们可以创建更加复杂的特性查询。例如，我们可以检测一个浏览器只支持旧的Flexbox语法-

@supports ( display: flexbox ) and ( not ( display: flex ) ) { .foo { display: flexbox; }}

兼容情况

2.Grid 布局

CSS 网格布局模块定义了一个以创建网格为基础的布局系统。它跟Flexbible Box 布局模块很相似，但它更多的是为页面布局而设计，因此具有许多不同的特性。

清晰的项放置

一个网格是由Grid Container（用 display: grid 创建），和Grid项（这是子项）构成。在我们的CSS中，我们可以容易并且清晰的组织网格项的放置和顺序，而不用管他们在标记中的放置。

举个例子，在我的文章“使用CSS网格的圣杯布局，我展示一下我们如何使用这个组件来创建类似的“圣杯布局”。

下面这个CSS只有短短31行

.hg__header { grid-area: header; }.hg__footer { grid-area: footer; }.hg__main { grid-area: main; }.hg__left { grid-area: navigation; }.hg__right { grid-area: ads; }.hg { display: grid; grid-template-areas: "header header header" "navigation main ads" "footer footer footer"; grid-template-columns: 150px 1fr 150px; grid-template-rows: 100px 1fr 30px; min-height: 100vh;}@media screen and (max-width: 600px) { .hg { grid-template-areas: "header" "navigation" "main" "ads" "footer"; grid-template-columns: 100%; grid-template-rows: 100px 50px 1fr 50px 30px; }}