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

作者 : 开心源码 本文共1636个字,预计阅读时间需要5分钟 发布时间: 2022-05-12 共150人阅读

尽管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>

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 五个最新的CSS特性以及如何用它们

发表回复