五个最新的CSS特性以及如何用它们

尽管CSS简单，但CSS是一门非常有意思的语言，CSS每年都有变化，而且都有不同的博主都在不同的时间段总结少量CSS的新特性。尽管这些新特性无法立刻得到众多浏览器的支持，但总是随着时间的发展，这些特性都会得到浏览器的支持。哪怕未得到支持，也有少量方法让浏览器支持，比方最为出外的 cssnext ，即可以让很多未来的CSS特性就立马用，并且不使用花太多时间来考虑浏览器的兼容性。

今天这篇文章, @Daniel Crisp就当下的CSS的新特性 做了一个简单的总结 —— 五个最新的CSS特性（事实上这些特性，对我而言并不是新特性），并且使用示例告诉大家怎样用这些特性。那么接下来，咱们看看这五个新特性是什么？以及怎样用。假如您感兴趣，欢迎继续往下阅读。

前言

@Daniel Crisp在他的博文中 ，讨论了CSS的五个新特性，详情了这五个特性能做什么，以及如何将它们应使用到你的项目中。而且提供示例每一步的代码，可以在 GitHub的仓库中获取这些代码 ，不过在接下来，我将会借助 Codepen 来向大家展现。

接下来要详情的五个CSS新特性是：

• CSS Display Module Level 3 ： display:contents
• CSS Conditional Rules Module Level 3 ： @support(…){…}
• CSS Overscroll Behavior Module Level 1 ： overscroll-behavior: contain
• CSS Selectors Module Level 4 ： :focus-within ， :placeholder-shown
• CSS Containment Module Level 1 ： contain:paint

这些CSS特性，预计有些同学已经接触过了，假如你未接触过，建议你继续跟随着下面的步骤继续往下阅读。

案例：创立一个新闻提要（Newsfeed）

通过一个新闻提要为例，分不同的步骤向大家阐述这个新闻提要是怎样制作的，以及在制作这个案例的时候，这五个CSS特性是如何在案例中得到运使用。

Step1：新闻提要的HTML模板

我们这个案例其实很简单，并未用任何JavaScript框架，还是用原始的HTML结构来做这个Demo。所以我们需要少量简单的HTML的标签，帮助我们创立Demo。这里用了一个类名为 .container 的 div ，该 div 包含了一个类名为 .feed 的 ul ，而后创立了十个 li ，每个 li包含了一个类名为 .card 的 div 。

在第五个和第六个 li 之间创立了另一个名为 nested 的 li ，其包含了一个无序列表 ul ,而且包含了三个 li 创立三个卡片。

<div class=”container”>

<ul class=”feed”>

<li><div class=”card”>Card 1</div></li>

<li><div class=”card”>Card 2</div></li>

<li><div class=”card”>Card 3</div></li>

<li><div class=”card”>Card 4</div></li>

<li><div class=”card”>Card 5</div></li>

<li class=”nested”>

<ul>

<li><div class=”card”>Card A</div></li>

<li><div class=”card”>Card B</div></li>

<li><div class=”card”>Card C</div></li>

</ul>

</li>

<li><div class=”card”>Card 6</div></li>

<li><div class=”card”>Card 7</div></li>

<li><div class=”card”>Card 8</div></li>

<li><div class=”card”>Card 9</div></li>

<li><div class=”card”>Card 10</div></li>

</ul>