- 搜索
德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流（https://www.wxclwl.com）
日期：2023/04/23 19:27作者：陈淑妤人气：
在本文中，我们将探讨css的五个新属性，看看它们的作用以及如何将它们用于项目中。我们将为包含新闻源和角落里的小聊天框的页面创建网站布局。有关更多CSS技巧，请查看我们探索不同CSS动画示例的文章。
在本教程中，您需要使用Chrome 65+或Firefox 59+。请查看随附的GitHub仓库以获取分步代码。我们将利用以下功能创建更好的体验并解决一些问题。
· display: contents;
· - 工作草案
·
· @support（...）{...}
· - 候选推荐
· 参考阅读：
· overscroll-behavior: contain;
· - 非官方
·
· 参考阅读：
· :focus-within
· - 工作草案
·
· 参考阅读：MDN web docs ,
· contain: paint;
· - 候选推荐
·
· 参考阅读：
下面具体来看看这些新特性：
01.设置新闻源的html
首先，我们需要为我们的新闻源设置一些超级简单的重复标记。我们先来创建一个带有无序列表的.container div。给<ul>提供.feed类，然后创建10个列表项，每个列表项包含一个带有.card类和文本卡1，卡2等的div 。
最后使用.nested类在5和6之间创建另一个列表项 - 这将在以后有用 - 并使用文本卡A，卡B等在内部添加<ul>三个列表项。
<body>
<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>
</body>
02.新闻源样式
现在我们需要添加一些快速样式，这样看起来更像是新闻源。首先，我们可以给<body>一个微妙的灰色背景颜色。然后给.container最大宽度为800px并使用margin：0 auto; 中心对齐它。
让我们给.card一个白色背景，10px填充和边距，最后一个最小高度为300px - 这应该足以让我们使页面可滚动。最后，我们将在.feed上撒上一些Flexbox魔法，使物品流畅，每行两张牌。
.feed {
display: flex;
flex-wrap: wrap;
}
.feed li {
flex: 1 0 50%;
}
03.修复布局问题
如果向下滚动列表，您会注意到我们在嵌套列表中的卡A - C卡会导致一些布局问题。理想情况下，我们希望它们与剩下的卡一起流入，但它们都被粘在一起。原因是flex容器（使用display：flex创建）仅使其直接子项（即列表项）成为flex项。
现在，解决这个问题的唯一方法就是改变标记，但让我们假装你没有那么奢侈。也许新闻源标记是由第三方脚本生成的，或者是您尝试重新设置的遗留代码。那我们怎么解决这个问题呢？
可以使用display: contents。这个小小的单行程基本上使一个元素表现得好像它不存在。您仍然可以看到元素的后代，但元素本身不会影响布局。
因为我们假装我们无法更改标记（仅适用于此步骤），我们可以对此有点聪明，并使.card元素成为flex项，几乎完全忽略列表标记。
首先删除现有的.feed li类，然后对<ul>和<li>元素使用display：contents：
.feed ul,
.feed li {
display: contents;
}
现在你应该看到卡片顺序流动，但我们已经失去了尺寸。通过将flex属性添加到.card来修复此问题：
.card {
flex: 1 0 40%;
}
我们的卡片现在正在使用Flexbox的奇迹，就好像它们的结构无序列表标记不存在一样。
作为旁注，您可能想知道为什么将flex-basis值设置为40％。这是因为.card类有一个边距，它不包含在宽度计算中，正如您在使用box-sizing时所期望的那样：border-box。要解决这个问题，我们只需要将flex-basis设置得足够高，以便在必要的点触发包装，Flexbox将自动填充剩余的空间。
04.探索功能查询
尽管display：contents正是我们所需要的，但它仍然只处于W3C的Working Draft状态。而Chrome支持仅在2018年3月发布的65版本中获得支持。令人难以置信的是，Firefox自2015年4月起就获得了支持！
如果在DevTools中禁用该样式，您将看到我们的更改在显示时对布局造成了一些混乱：未应用display: contents。那么我们能做些什么呢？我们下一个新功能的时间 - 功能查询。
这些工作就像媒体查询一样，但它们允许您询问浏览器 - 仅使用CSS - 如果支持属性和值表达式。如果是，则将应用查询中包含的样式。现在，让我们将display: contents样式移动到要素查询中。
@supports (display: contents) {
.feed ul,
.feed li {
display: contents;
}
.card {
flex: 1 0 40%;
}
}
05.使用not来获得更清晰的结果
通常在这种渐进增强方案中，我们使用查询来添加新样式，但它还必须禁用回退布局所需的一些原始样式。
但是您可能会认为因为对功能查询的支持非常好（如果您忽略IE），您实际上想要使用功能查询not运算符。它的工作方式与您预期的一样，因此当 display: contents 不支持时，我们可以将原始的Flex属性重新应用到列表项中：
@supports not (display: contents) {
.feed li {
flex: 1 0 50%;
}
}
在NOT查询中，我们可以添加一些样式，这样.nested项基本上可以通过使用display：content重新应用继承的内容。
feed li.nested {
flex-basis: 100%;
}
.feed li.nested ul {
display: flex;
flex-wrap: wrap;
}
06.更进一步
您已经可以看到特性查询的潜力，但真正酷的是，您可以使用三个可用的运算符来组合表达式：and、or和not。也许我们也可以检查display: flex支持，然后添加一个基于浮动的回退。我们不会在这里这样做，但如果是这样的话，我们将首先修改两个特性查询，如下所示：
@supports (display: flex) and (display: contents) {
...
}
@supports (display: flex) and (not (display: contents)) {
...
}
作为奖励，您还可以测试自定义属性支持，如下所示：
@supports (--foo: green) {
...
}
07.添加聊天框
现在我们有一个漂亮的新闻源，让我们添加一个固定在屏幕右下角的聊天框。我们需要一个消息列表和一个文本字段供用户输入他们的消息。在打开<body>标记之后添加此块：
<div class="chat">
<div class="messages">
<ul>
<li><div class="message">Message 1</div></li>
<li><div class="message">Message 2</div></li>
<li><div class="message">Message 3</div></li>
<li><div class="message">Message 4</div></li>
<li><div class="message">Message 5</div></li>
<li><div class="message">Message 6</div></li>
<li><div class="message">Message 7</div></li>
<li><div class="message">Message 8</div></li>
<li><div class="message">Message 9</div></li>
<li><div class="message">Message 10</div></li>
</ul>
</div>
<input type="text" class="input">
</div>
08.设置聊天框的样式
是时候快速添加一些造型让它看起来不错了。
.chat {
background: #fff;
border: 10px solid #000;
bottom: 0;
font-size: 10px;
position: fixed;
right: 0;
width: 300px;
z-index: 10;
}
.messages {
border-bottom: 5px solid #000;
overflow: auto;
padding: 10px;
max-height: 300px;
}
.message {
background: #000;
border-radius: 5px;
color: #fff;
margin: 0 20% 10px 0;
padding: 10px;
}
.messages li:last-child .message {
margin-bottom: 0;
}
.input {
border: none;
display: block;
padding: 10px;
width: 100%;
}
09.Scroll链接
希望现在你能有一个小聊天室，上面有一个可滚动的消息列表在你的新闻提要上。太棒了但是，当您在嵌套区域内滚动到其可滚动范围的末尾时，您注意到了发生了什么吗？试试看。一直滚动到消息的末尾，您将看到页面本身将开始滚动。这称为滚动链。（Scroll Chaining）
在我们的例子中，这不是什么大问题，但在某些情况下可能是这样。当我们在modals或context menus中创建可滚动区域时，我们之前就必须围绕这一特性工作。
脏修复是将<body>设置为overflow：hidden，但是有一个很好的，有光泽的新CSS属性可以修复所有这些并且它是一个简单的单行程序。向过度滚动行为问好。有三个可能的值：
· auto - 默认值，允许滚动链接
· contain - 禁用滚动链接
· none - 禁用滚动链和其他过卷效果（例如橡皮筋）
我们可以使用速记过度滚动行为，或者我们可以使用overscroll-behavior-x（或-y）来定位特定方向。让我们将它添加到我们的.messages类：
.messages {
...
overscroll-behavior-y: contain;
... }
现在再次尝试滚动，当您到达内容的末尾时，您将看到它不再影响页面的滚动。
如果您想在PWA中实现pull-to-refresh功能，比如刷新新闻源，这个属性也非常方便。某些浏览器（如Chrome for Android）会自动添加自己的浏览器，直到现在还没有简单的方法来禁用它，而不使用JS来使用影响性能的非被动处理程序取消事件。
现在你只需要添加overscroll-behavior：contains到 viewport-containing的元素，可能是<body> 或<html>。
值得注意的是，该属性不是W3C标准，而是Web孵化社区组织（WICG）的提议。流行的，稳定的和成熟的WICG提案被考虑在稍后阶段迁移到W3C工作组。
10.不使用时折叠聊天框
目前聊天框占用了相当多的空间，除非我们与它进行交互，否则会让人分心。幸运的是，我们可以用一点CSS魔法来做一些事情。
但首先我们需要稍微修改现有的样式。默认情况下，我们希望折叠聊天框，因此我们需要减少.messages类中的max-height值 。当我们在那里时，我们还可以添加到max-height属性的转换：
.messages {
...
max-height: 25px;
transition: max-height 500ms; }
下一页：继续探索步骤11-20中的新CSS功能
