跳到主要内容

5热门新CSS功能以及如何使用它们

在本文中,我们将探讨CSS的五个新属性,看看它们的作用以及如何将它们用于项目中。我们要创造一个网站布局对于包含新闻源和角落里的小聊天框的页面。有关更多CSS技巧,请查看我们探索不同的文章CSS动画示例

在本教程中,您需要Chrome 65+或Firefox 59+。看看吧随附GitHub回购对于分步代码。我们将利用以下功能创建更好的体验并解决一些问题。

CSS显示模块(3级)

CSS条件规则模块(3级)

CSS Overscroll行为模块(1级)

CSS选择器模块(4级)

CSS遏制模块(1级)

01.设置新闻源的HTML

首先,我们需要为我们的新闻源设置一些超级简单的重复标记。让我们创建一个。容器Div里面有一个无序列表。给

    班级。饲料,然后创建10个列表项,每个列表项包含一个div。卡课程和文字卡1,卡2等

    最后创造另一个项目清单在5到6之间有一类.nested- 这将在以后有用 - 并添加一个

      里面有三个列表项,使用文本卡A,卡B等。

      • 卡1
      • 卡2
      • 卡3
      • 卡4
      • 卡5
        • 卡片A.
        • 卡B.
        • 卡片C.
      • 卡6
      • 卡7
      • 卡8
      • 卡9
      • 卡10

      02.设计新闻源

      现在我们需要添加一些快速样式,这样看起来更像是新闻源。首先,我们可以给予一种微妙的灰色背景色。然后给。容器最大宽度为800px并使用保证金:0自动;中心对齐它。

      我们也给。卡一个白色的背景,10px的填充和边距,最后一个最小高度300px - 这应该足以使页面可滚动。最后,我们将在上面撒上一些Flexbox魔法。饲料使物品流畅,每排两张牌。

      .feed {display:flex; flex-wrap:wrap; } .feed li {flex:1 0 50%; }

      03.修复布局问题

      如果向下滚动列表,您会注意到嵌套列表中的卡A - C卡会导致一些布局问题。理想情况下,我们希望它们与剩下的卡一起流入,但它们都被粘在一起。这样做的原因是一个flex容器 - 它是使用创建的显示:flex- 仅将其直接子项(即列表项)转换为弹性项。

      现在,解决这个问题的唯一方法就是改变标记,但让我们假装你没有那么奢侈。也许新闻源标记是由第三方脚本生成的,或者是您只想重新设置的遗留代码。那我们怎么解决这个问题呢?

      遇见显示:内容。这个小小的衬里基本上使一个元素表现得好像它不存在。您仍然可以看到元素的后代,但元素本身不会影响布局。

      因为我们假装我们无法更改标记(仅适用于此步骤)我们可以对此有点聪明并使。卡元素flex项目,几乎完全忽略列表标记。

      首先删除现有的.feed Li上课再使用显示:内容对彼此而言

      • 内容:

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

        现在你应该看到卡片顺序流动,但我们已经失去了尺寸。通过将flex属性添加到。卡代替:

        .card {flex:1 0 40%; }

        当当!我们的卡现在正在使用Flexbox的奇迹,就好像它们的结构无序列表标记不存在一样。

        作为旁注,你可能想知道为什么柔性基础值设置为40%。这是因为。卡Class有一个margin,它不包含在宽度计算中,正如你在使用时所期望的那样Box-sizing:border-box。要解决这个问题,我们只需要设置柔性基础足够高以在必要的点触发包装,Flexbox将自动填充剩余空间。

        04.探索功能查询

        虽然显示:内容完全符合我们的要求,它仍然只处于W3C的工作草案状态。而Chrome支持仅在2018年3月发布的65版本中获得支持。令人难以置信的是,Firefox自2015年4月起就获得了支持!

        如果在DevTools中禁用该样式,您将看到我们的更改在布局时有点混乱显示:内容不适用。那么我们能做些什么呢?我们下一个新功能的时间 - 功能查询。

        这些工作就像媒体查询一样,但如果支持属性和值表达式,它们允许您向浏览器询问 - 仅使用CSS。如果是,则将应用查询中包含的样式。现在,让我们移动我们的显示:内容将样式转换为要素查询。

        @supports(display:contents){。feed ul,.feed li {display:contents; }。{flex:1 0 40%; }}

        05.使用'not'来获得更清晰的结果

        通常在这种渐进增强方案中,我们使用查询来添加新样式,但它还必须禁用回退布局所需的一些原始样式。

        但是,您可能会认为因为对功能查询的支持非常好(如果您忽略IE),您实际上想要使用功能查询运营商。它的工作方式与您期望的一样,因此我们可以重新应用原始版本柔性属性到列表项时显示:内容不受支持:

        @supports not(display:contents){。feed li {flex:1 0 50%; }}

        在 - 的里面查询我们可以添加一些样式.nested项目基本上重新应用使用的继承内容显示:内容

        饲料li.nested {flex-basis:100%; } .feed li.nested ul {display:flex; flex-wrap:wrap; }

        06.更进一步

        您已经可以看到功能查询的潜力,但真正酷的是您可以使用三个可用的运算符组合表达式:要么。也许我们也可以检查一下显示:flex支持然后添加基于浮动的回退。

        我们不会在这里这样做,但如果我们是第一次修改这两个功能查询:

        @supports(display:flex)和(display:contents){...} @supports(display:flex)和(not(display:contents)){...}

        作为奖励,您还可以测试自定义属性支持,如下所示:

        @supports(--foo:green){...}

        07.添加聊天框

        现在我们有一个漂亮的新闻源,让我们添加一个固定在屏幕右下角的聊天框。我们需要一个消息列表和一个文本字段供用户输入他们的消息。在打开之后添加此块标签:

        • 消息1
        • 消息2
        • 消息3
        • 消息4
        • 消息5
        • 消息6
        • 消息7
        • 消息8
        • 消息9
        • 消息10

        08.设置聊天框的样式

        是时候快速添加一些造型让它看起来不错了。

        .chat {background:#fff;边界:10px solid#000;底部:0; font-size:10px;位置:固定;右:0;宽度:300px; z-index:10; } .messages {border-bottom:5px solid#000;溢出:自动;填充:10px;最大高度:300px; } .message {background:#000; border-radius:5px;颜色:#fff;保证金:0 20%10px 0;填充:10px; } .messages li:last-child .message {margin-bottom:0; } .input {border:none;显示:块;填充:10px;宽度:100%; }

        09.滚动链接

        希望现在你会有一个小聊天框,其中有一个可滚动的消息列表,位于你的新闻源之上。大。但是,您是否注意到当您在嵌套区域内滚动并到达其可滚动范围的末尾时会发生什么?试试吧。一直滚动到消息的末尾,您将看到页面本身将开始滚动。这称为滚动链。

        在我们的例子中,这不是什么大问题,但在某些情况下可能是这样。在模态或上下文菜单中创建可滚动区域之前,我们必须先解决此功能。

        脏修复是设置溢出:隐藏,但有一个漂亮,闪亮的新CSS属性,修复了所有这一切,它是一个简单的单行。打招呼反弹时行为。有三个可能的值:

        • 汽车- 默认值,允许滚动链接
        • 包含- 禁用滚动链接
        • 没有- 禁用滚动链接和其他过度滚动效果(例如橡皮筋)

        我们可以使用速记反弹时行为或者我们可以针对特定的方向反弹时行为-X(要么-y)。让我们把它添加到我们的.messages类:

        .messages {... Overscroll-behavior-y:contains; ...}

        现在再次尝试滚动,当您到达内容的末尾时,您将看到它不再影响页面的滚动。

        如果你想在你的PWA中实现一个pull-to-refresh功能,比如刷新新闻源,这个属性也很方便。某些浏览器(如Chrome for Android)会自动添加自己的浏览器,直到现在还没有简单的方法来禁用它,而不使用JS来使用影响性能的非被动处理程序取消事件。

        现在你只需要添加过度滚动行为:包含可能是包含视口的元素要么

        值得注意的是,该属性不是W3C标准,而是Web Incubator Community Group(WICG)的提议。流行的,稳定的和成熟的WICG提案被考虑在稍后阶段迁移到W3C工作组。

        10.不使用时折叠聊天框

        目前,聊天框占用了相当多的空间,除非我们与它进行交互,否则会让人分心。幸运的是,我们可以用一点CSS魔法来做一些事情。

        但首先我们需要稍微修改现有的样式。默认情况下,我们希望折叠聊天框,因此我们需要减少聊天框最大高度价值在.messages类。当我们在那里时,我们也可以添加过渡到最大高度属性:

        .messages {... max-height:25px;过渡:最大高度500ms; }

        下一页:继续探索步骤11-20中的新CSS功能



翻译字数超限