2017年值得学习的三个CSS新特性

在众多的CSS新特性中，今年采用的3个新特性让我兴奋不已。1.特性查询前段时间，我写了一个我真正想要的CSS特性，关于特性查询，现在它基本上已经存在了！它支持除InternetExplorer之外的主要浏览器（包括OperaMini）。使用@supports规则的特征查询允许我们将CSS包含在一个条件块中，该条件块检查当前用户代理是否支持CSS属性键值对，如果支持，则内容将生效。这是一个仅应用display:flex的简单示例，前提是浏览器支持Flexbox-@supports(display:flex){.foo{display:flex;此外，使用and和not等运算符，我们甚至可以创建更复杂的属性查询。例如，我们可以检测浏览器是否只支持旧的Flexbox语法-@supports(display:flexbox)and(not(display:flex)){.foo{display:flexbox;}}Support2.TableLayoutCSSTableLayout模块定义的系统，用于创建基于表格的布局。它类似于flexbox布局模块，但更明确地为页面布局而设计，它们之间有许多不同的特点。显式项目定位网格由表容器（使用display:grid创建）和表项目（子组件）组成。在我们的CSS中，我们可以清楚地组织表项的位置和顺序，而与它们的标记（称为HTML标记）无关。例如，我写了HolyWyeLayoutsUsingCSSTables，它展示了如何使用这个模块创建著名的“圣杯布局”。后面的CSS只有31行-.hg__header{grid-area:header;}.hg__footer{网格区域：页脚；}.hg__main{网格区域：主要；}.hg__left{网格区域：导航；}.hg__right{网格区域：广告；}.hg{显示：网格；grid-template-areas:"headerheaderheader""navigationmainads""footerfooterfooter";网格模板列：150px1fr150px；网格模板行：100px1fr30px；最小高度：100vh；}@mediascreenand(max-width:600px){.hg{grid-template-areas:"header""navigation""main""ads""footer";网格模板列：100%；网格模板行：100px50px1fr50px30px;}}灵活的长度CSSGrid模块引入了一个新的长度单位，fr，它表示表格容器中剩余空间的相等分数。它允许我们分配高度和宽度成为可能。例如在HolyGrail布局中，我希望主要部分占据除两个侧边栏之外的所有内容。我写了一段简单的代码来做到这一点-.hg{grid-template-columns:150px1fr150px;}间距我们可以使用grid-row-gap、grid-column-gap和grid-gap属性来显式定义间距。这些属性的值是数据类型，是内容区域尺寸的百分比。比如需要%5的间距，可以写-.hg{display:grid;网格列间隙：5%；}支持CSSGrid模块于今年三月首次获得浏览器支持。3.原生变量最要说的是原生CSS变量。这个模块为作者介绍了一种定义变量的方法，这些变量可以像CSS属性一样被分配。例如，假设我们的样式表中多处使用了一个主题色，我们可以将其抽象出来保存在一个变量中，然后引用该变量而不是直接多次写入实际值。:root{--theme-colour:cornflowerblue;}h1{颜色：var（--主题颜色）；}a{颜色：var（--主题颜色）；}strong{color:var(--theme-colour);这些事情目前在SASS等CSS预处理器中是可能的，但CSS变量存在于浏览器中。即它们的值可以实时更新。例如，要改变上例中的--theme-color属性的值，我们只需要这样做-constrootEl=document.documentElement;rootEl.style.setProperty('--theme-colour','plum');支持如何？可以看到，目前没有一个特性是所有浏览器都支持的，那我们应该怎么做才能安心的用在生产中呢？答案是：渐进增强！去年，我在Fronteers会议上就如何进行CSS相关的渐进增强发表了演讲。现在我把它放在这里——你有兴趣在2017年学习哪些CSS特性？