我想再次向您介绍引起我注意的站点设计研究的结果。上次我写了有关Facebook新设计基础的CSS机制的文章。现在，我很好奇探索Twitter CSS。新的Twitter设计大约在一年前出现。我在CSS CSS中发现了很多有趣的东西：有些东西对我来说似乎很好，而有些奇怪。
用户头像纵横比
我在个人资料页面上注意到了用户头像的有趣实现。此实现使用CSS技术来保留元素的长宽比。个人资料页面上的用户头像下面的HTML和CSS代码说明了头像的实现。<a href="#" class="avatar">
<div class="avatar-aspect-ratio"></div>
<img alt="" src="me.jpg">
</a>
.avatar {
position: relative;
width: 25%;
display: block;
}
.avatar-aspect-ratio {
width: 100%;
padding-bottom: 100%;
}
.avatar img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
保留元素长宽比的技术之所以起作用，是因为以下事实：当元素具有垂直凹痕（属性padding-bottom或padding-top）时，凹痕取决于元素的宽度。看下面的例子：.element {
width: 250px;
padding-bottom: 100%;
}
计算值padding-bottom相等250px。这意味着我们有一个完美的正方形。Twitter团队使用相同的技术，但应用于<img>相对于父元素绝对定位的元素。为什么？这是原因。化身有问题，当图像放置不正确时，化身看起来像上图所示。必须使用100%宽度和高度的值来定位图像。通过这种方法，将根据包装元素的大小设置其大小。既然我们已经弄清楚了该解决方案背后的想法，让我们回到如何在Twitter上实现这个想法。该属性width: 25%基于包装元素的宽度。在我的屏幕上是-600px。我想知道为什么选择了这种技术。在了解了有关CSS代码的更多信息之后，我注意到在Edit Profile模式窗口中使用了相同的组件。的确，由于使用了以下样式，因此此处的元素较小：.avatar {
max-width: 8rem;
}
我真的很喜欢只影响属性来管理图像的想法width。这是一个说明此想法的视频。图像宽度控制在这里您可以找到本节的演示项目。上缩进百分比
为了使用户的头像与位于个人资料页面顶部的照片重叠，使用以百分比指定的负外部缩进：.avatar {
margin-top: -18%;
}
没错，在“编辑轮廓”模态窗口中，该设计已用于调整上部压痕margin-top: -3rem。注意，模态窗口中的缩进是使用单位设置的rem。使用相同的单位设置属性max-width。奇怪使用calc（）CSS函数
我注意到以下CSS用于设置某些按钮的样式：.button {
min-width: calc(45.08px)
}
为什么将函数传递calc()单个值？我不明白要点。也许他们想将数字四舍五入为45.08？但是用这种方法，它不能四舍五入到45。按钮的宽度很小。当将应用程序翻译为RTL语言（例如阿拉伯语）时，该按钮将太小。一个太小的按钮该功能calc()出现在嵌入式CSS中。因此，我相信这是使用React动态设置按钮样式的结果。混合CSS背景和HTML图像
在网站的许多地方，我发现混合了CSS和HTML图像定义的背景图像。看下面的例子：<div style="background-image: url(me.jpg);"></div>
<img alt="" src="me.jpg">
我在用户配置文件以及用于形成网格布局的组件中看到了这一点。有趣的是，opacityelement 属性<img>设置为0。活动图像的来源是属性background-image。另外，此处background-size: cover使用避免图像失真的属性。我试图做相反的事情，即显示元素<img>并隐藏CSS背景，并比较了网格布局。比较结果如下所示。左边是使用背景图像的选项，右边是使用HTML图像的选项，显然，右边的图像变形了！我不知道为什么开发团队不使用CSS属性object-fit: cover来防止变形。我想知道为什么在这里使用两个图像。重置样式
我注意到一种模式，这是不断添加到elements中的CSS类的使用<div>。这是相关的CSS：.css-1dbjc4n {
align-items: stretch;
border: 0 solid black;
box-sizing: border-box;
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 0px;
min-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
z-index: 0;
}
此样式实际上适用<div>于页面上的每个元素。为什么？在这里重置CSS样式还不够吗？上面介绍的某些样式对我来说是可以理解的min-width: 0，因为与Flexbox有一些联系。但是缩进，缩进，边框呢？<div>考虑到该元素没有适当的属性，为什么需要重置一个元素？Flexbox和最小宽度：0
该属性的默认值min-width是auto，它原来是零。当某物显示为flex元素时，其属性的值min-width等于其内容的大小。如果元素的内容大于其大小，则允许此行为可能会违反布局。为了避免此问题，您需要为min-widthflex-elements的后代重置属性。Flex元素和Flexbox包装器上面显示的布局显示了如果flex元素的内容太长会发生什么。请注意，文本超出了wrapper元素的范围。但是使用该属性时会发生什么min-width: 0。内容不超出flex元素使用位置：粘性
我注意到该属性position: sticky在Twitter右侧栏中的使用（显示了有关用户关注的媒体趋势和建议）。对我来说似乎很有趣，如何组织属性值的工作bottom以及top何时滚动。默认值如下：.sidebar {
position: sticky;
width: 350px;
bottom: -470.5px;
}
当页面向下滚动时，该属性bottom将替换为property top: -480.5px。我认为设计师这样做是为了让用户首先到达侧边栏的末端。top之后添加属性。分隔元素
就像我之前分析的Facebook设计一样，在Twitter设计中，很多地方都使用了分隔符元素。所有这些都是flex元素，其宽度是使用属性设置的flex-basis。分隔符元素上图中显示的第一个元素在设置分隔符元素时使用该属性flex-grow: 1。第二个使用以像素为单位指定的固定宽度。制作推文内容
Tweet以上是我的推文。乍一看，似乎我们面前有一个元素<p>或<span>，其中添加了文本。但是，事实证明，每个笑脸都由一个单独的标签表示<span>，并且如果文本在两个这样的元素之间，则它也被制成标签<span>。鸣叫文本的设计表情-这<span>，其中有一个元素<div>，<div>包含两个图像。一个是CSS背景，第二个是HTML图片。由于第一句话包装在标记中<span>，因此在与相同级别的元素之间必须有分隔符。设计师在第二个句子的开头添加了新行，以分隔句子。第二句话使用计算值来分隔项目
返回按钮在Twitter上执行搜索或打开个人资料页面时，可以看到一个按钮margin-left: -4px，指定了负的外部左缩进。我对计算此值的过程感兴趣。.back-button {
margin-left: calc(5px + (-1 * (39px - 1.5em)) / 2);
}
以上计算得出一个值-4px。为什么不问-4px呢？在这种情况下，这比使用函数更好calc()吗？导航链接的宽度
导航链接从第一天起，当我遇到一个导航链接面板时，我注意到当您将鼠标悬停在它们上面时，它们的宽度等于它们的内容。我想知道为什么不让图标和标签覆盖导航元素的整个宽度。在这里，我的注意力吸引到flex-direction: column了导航栏每个元素使用的属性。为什么？在这里只有一个孩子的情况下，这是否必要？外部缩进以防万一
设计中存在有问题的压痕，以防止不必要的页面布局行为。我提请注意两个在元素上使用缩进的示例，可以说是“以防万一”。让我们看看它们。缩进添加到元素以防万一。左侧是元素的常规内容。右边的内容明显长于正常内容，请注意当元素的内容明显长于正常内容时会发生什么。即，在这里发生以下情况：- 文本被裁剪。
- 元素之间有一个缩进。
外部缩进起占位符的作用，从而防止元素占据整个空间。如果及时考虑到这一点，则可以避免在项目期间可能出现的意外问题。建议您始终使用比“正常”长度长的内容来测试页面布局。小视野内的模态窗
我检查了模态轮廓编辑窗口。事实证明，在观看区域的一定高度处，Save这种窗口的按钮不可用。这是它的外观。无法访问的“保存”按钮由于模式窗口不支持滚动，Save因此无法进入按钮。但是用于控制元素外观的窗口支持动态高度更改和滚动。支持动态高度变化的窗口为什么一个窗口支持滚动而另一个不支持滚动？有趣的是，根据Twitter设计师知道哪个更重要？对于我-这正是用于编辑配置文件的窗口。您打算采用Twitter设计的任何想法吗？