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

时间 2019-12-09

标签 2017年学习三个 css 特性栏目 CSS 繁體版

原文原文链接

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

这是翻译的一篇文章，原文是：3 New CSS Features to Learn in 2017，翻译的不是很好，若有疑问欢迎指出。javascript

新的一年，咱们有一系列新的东西要学习。尽管CSS有不少新的特性，但有三个特性令我最激动并进行学习。css

1. Feature Queries（特性查询）

在这以前我写了一篇关于Feature Queries的文章the one CSS feature I really want。如今，它已经在这里了！目前全部主流浏览器都支持特征查询（包括Opera Mini），IE浏览器除外。html

Feature Queries，使用@supports规则，容许咱们在它的条件区域内写入CSS规则，只有当当前的用户浏览器支持某个CSS属性-值对的时候，该CSS代码块才会生效。java

举一个简单的例子，下面的代码中，只有当浏览器支持display: flex的时候才会应用Flexbox样式。css3

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

另外也可使用一些操做符，好比and与not，咱们就能够建立更复杂的特征查询。例如，咱们能够识别一个浏览器是否支持老版本的Flexbox语法。浏览器

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

浏览器支持

拓展

Feature Queries一样支持Javascript接口：CSS.supports()，一样使用上面的例子，看下如何使用：frontend

if ( CSS.supports( '(display: flex)') ) { console.log('支持flex') } else { console.log('不支持flex') } if ( CSS.supports( '(display: flexbox)' ) ) { console.log('支持flexbox') } else { console.log('不支持flexbox') }

2. Grid Layout（栅格布局）

CSS栅格布局模块定义了一个建立以网格为基础的布局系统。这和弹性盒布局模块类似，但栅格布局是专门为页面布局设计，所以有不少不一样的特性。ide

Explicit Item Placement

一个栅格系统是由栅格容器（Grid Containe，由display: grid建立）、栅格项（Grid Item）组成。在咱们的CSS中，咱们能够很容易且明确的组织布局以及栅格项的顺序、与标记中的布局相独立。布局

例如，我在用CSS栅格进行圣杯布局一文中如何使用栅格布局模块建立圣杯布局。post

主要的HTML代码：

<body class="hg"> <header class="hg__header">Title</header> <main class="hg__main">Content</main> <aside class="hg__left">Menu</aside> <aside class="hg__right">Ads</aside> <footer class="hg__footer">Footer</footer> </body>

主要的CSS代码：

.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; } }

灵活的长度

CSS栅格模块介绍了一个新的长度单位：fr单元，它表示在栅格容器中剩余的空间部分。

咱们就能够经过栅格容器的可用空间来分配栅格项的高度与宽度。例如，在圣杯布局中，我想让main容器占满除两边容器以外的全部空间，为了实现这个效果，只需写以下一句代码：

.hg { grid-template-columns: 150px 1fr 150px; }

元素间间隔

咱们能够专门定义栅格布局中元素间的空隙，grid-row-gap、grid-column-gap以及grid-gap属性能够完成这项工做，这些属性接受一个<length-percentage>百分比数据类型做为值，与内容区域的尺寸对应的百分比。

例如，有5%的空隙，能够这样写：

.hg { display: grid; grid-column-gap: 5%; }

浏览器支持

CSS网格模块将最先在今年三月在浏览器中可用（提供默认支持）。

如今想体验怎么办？

参考个人这篇记录：各个浏览器开启CSS Grid Layout的方式。

三、Native Variables

最后一个是本地CSS变量。该模块介绍了建立用户自定义变量的方法，能够给一个CSS属性分配一个变量。

例如，若是我有一个主题色，这个主题色被用在了好几个地方，这时候，就能够抽象这个主题色到一个变量中，而且在使用的时候引用这个变量，这样比把这个颜色写到多个地方更容易维护。

:root { --theme-colour: cornflowerblue; } h1 { color: var(--theme-colour); } a { color: var(--theme-colour); } strong { color: var(--theme-colour); }

这种效果在以前咱们通常借助CSS预处理器来实现，好比SASS，可是CSS变量有个优势就是一直存在于浏览器中。这意味着这些变量值能够在线修改。例如，为了更新--theme-colour属性值，能够经过以下方式：

const rootEl = document.documentElement; rootEl.style.setProperty('--theme-colour', 'plum');

浏览器支持

2017年什么CSS特性最让你激动？

-转载