这是翻译的一篇文章，原文是：3 New CSS Features to Learn in 2017，翻译的不是很好，如有疑问欢迎指出。
新的一年，我们有一系列新的东西要学习。尽管CSS有很多新的特性，但有三个特性令我最激动并进行学习。
1. Feature Queries（特性查询）
在这之前我写了一篇关于Feature Queries的文章the one CSS feature I really want。现在，它已经在这里了！目前所有主流浏览器都支持特征查询（包括Opera Mini），IE浏览器除外。
Feature Queries，使用@supports规则，允许我们在它的条件区域内写入CSS规则，只有当当前的用户浏览器支持某个CSS属性-值对的时候，该CSS代码块才会生效。
举一个简单的例子，下面的代码中，只有当浏览器支持display: flex的时候才会应用Flexbox样式。
@supports ( display: flex ) {
.foo { display: flex; }
}另外也可以使用一些操作符，比如and与not，我们就可以创建更复杂的特征查询。例如，我们可以识别一个浏览器是否支持老版本的Flexbox语法。
@supports ( display: flexbox ) and ( not ( display: flex ) ) {
.foo {
display: flexbox;
}
}浏览器支持
拓展
Feature Queries同样支持Javascript接口：CSS.supports()，同样使用上面的例子，看下如何使用：
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栅格布局模块定义了一个创建以网格为基础的布局系统。这和弹性盒布局模块相似，但栅格布局是专门为页面布局设计，因此有很多不同的特性。
Explicit Item Placement
一个栅格系统是由栅格容器（Grid Containe，由display: grid创建）、栅格项（Grid Item）组成。在我们的CSS中，我们可以很容易且明确的组织布局以及栅格项的顺序、与标记中的布局相独立。
例如，我在用CSS栅格进行圣杯布局一文中如何使用栅格布局模块创建圣杯布局。
主要的HTML代码：
<body class="hg">
<header class="hgheader">Title</header>
<main class="hgmain">Content</main>
<aside class="hgleft">Menu</aside>
<aside class="hgright">Ads</aside>
<footer class="hgfooter">Footer</footer>
</body>主要的CSS代码：
.hgheader { grid-area: header; }
.hgfooter { grid-area: footer; }
.hgmain { grid-area: main; }
.hgleft { grid-area: navigation; }
.hgright { 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属性可以完成这项工作，这些属性接受一个681b2bd515aa1f62bd1f4d50ed120e94百分比数据类型作为值，与内容区域的尺寸对应的百分比。
例如，有5%的空隙，可以这样写：
.hg {
display: grid;
grid-column-gap: 5%;
}浏览器支持
CSS网格模块将最早在今年三月在浏览器中可用（提供默认支持）。
现在想体验怎么办？
参考我的这篇记录：各个浏览器开启CSS Grid Layout的方式。
3、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');
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
以上是分享三个CSS新特性的实例的详细内容。更多信息请关注PHP中文网其他相关文章！
每周平台新闻：改进慢速连接上的UX，用于编写ALT文本的提示和HTML加载属性的多填充Apr 17, 2025 am 11:09 AM在本周的综述中，如何确定慢速连接，我们应该在图像中放入alt文本中的内容以及用于HTML加载属性的新polyfill，
每周平台新闻：HTML加载属性，主要的ARIA规格以及从iframe转移到Shadow domApr 17, 2025 am 10:55 AM在本周的平台新闻综述中，Chrome引入了一个用于加载的新属性，Web开发人员的可访问性规范以及BBC Move
带有GraphQL的多人游戏TIC TAC TOEApr 17, 2025 am 10:54 AMGraphQL是API的查询语言，对前端开发人员非常有能力。正如GraphQL网站所解释的那样，您可以描述您的数据，询问什么
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
WebStorm Mac版
好用的JavaScript开发工具
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
