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

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

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

前言

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

接下来要介绍的五个CSS新特性是:

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

案例:创建一个新闻提要(Newsfeed)

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

Step1:新闻提要的HTML模板

我们这个案例其实很简单,并未使用任何JavaScript框架,还是使用原始的HTML结构来做这个Demo。所以我们需要一些简单的HTML的标签,帮助我们创建Demo。这里使用了一个类名为.containerdiv,该div包含了一个类名为.feedul,然后创建了十个li,每个li包含了一个类名为.carddiv

在第五个和第六个li之间创建了另一个名为nestedli,其包含了一个无序列表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>
</div>

在没有任何样式的情况之下,你看到的效果是这样的:

Step2:添加样式

现在要给示例添加一些基本样式,使其看起来更像一个新闻提要:

body {
    background-color: grey;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

.card {
    background-color: #fff;
    padding: 10px;
    margin: 10px;
    min-height: 300px;
}

最后,在.feed上使用Flexbox相关的特性,让每行有两张卡片:

.feed {
    display: flex;
    flex-wrap: wrap;

    li {
        flex: 1 0 50%;
    }
}

效果如下:

如果你从未接触过Flexbox相关的知识,强烈建议你花点时间阅读这些文章。因为Flexbox发展到今天,已经开始取代float来布局,成为最主流的布局方式之一,特别是在移动端上的布局。

Step03:解决布局问题

当你向下滚动列表时,你会发现.nested下的三个li(对应的是CardA ~ CardC)影响了整体的布局效果:

其实我们想要的,或者说理想状态下,所有的卡片按流的方式排列,但事实并未如此。造成这种现象的原因是Flex容器 —— ul.feed设置了display:flex(创建了一个Flex容器),创建Flex容器之后,只会对其子元素(ul.feed > li.card)有影响,即可子元素自动会变成Flex项目。但不会影响其后代子元素,换句话说,.nested > li是无法自动变成Flex项目。

通常解决这个问题的唯一方法是更改HTML模板,但有些情况之下,比如说在CMS系统中(假设你没有修改HTML标签的权利),那么面对这种情况,你就会束手无策了。当然,你也许会想到使用JavaScript来处理。或许以前你会这么想,但时至今日,咱们可以通过新的CSS特性来解决这个问题 —— display:contents

W3C规范是这样对display:contents描述的:

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.“

大至意思是:“元素本身不产生任何边界框,而元素的子元素与伪元素仍然生成边界框,元素文字照常显示。为了同时照顾边界框与布局,处理这个元素时,要想象这个元素不在元素树型结构里,而只有内容留下。这包括元素在原文档中的子元素与伪元素,比如::before::after这两个伪元素,如平常一样,前者仍然在元素子元素之前生成,后者在之后生成。

那么display: contents这一简单的代码实际上让元素表现得好像不存在一样。但仍然可以看到元素的后代,而且元素自身并不影响布局。也就是说,.nested的子元素.card也将变成Flex项目。

首先删除现有.feed li的类名,然后在ulli是使用display: contents

.feed ul,
.feed li {
    display: contents;
}

这个时候.feed下所有的.card都变成了Flex项目(不仅是.feed下的子元素li,还包括后代的li元素):

现在你看到的所有卡片都是有序的排列,但是尺寸不对:

可以通过在.card上添加flex属性来解决这个问题:

.card {
    flex: 1 0 40%;
}

这个时候每张卡片的尺寸就又恢复正常了:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/5-hot-new-css-features-and-how-to-use-them.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部