网站做众筹需哪些条件,企业培训师,工作台,中小企业有哪些当我遇到一个新产品时#xff0c;我首先想到的是他们如何实现CSS。当我遇到Meta的Threads时也不例外。我很快就探索了移动应用程序#xff0c;并注意到我可以在网页上预览公共帖子。 这为我提供了一个深入挖掘的机会。我发现了一些有趣的发现#xff0c;我将在本文中讨论。 … 当我遇到一个新产品时我首先想到的是他们如何实现CSS。当我遇到Meta的Threads时也不例外。我很快就探索了移动应用程序并注意到我可以在网页上预览公共帖子。 这为我提供了一个深入挖掘的机会。我发现了一些有趣的发现我将在本文中讨论。 让我们深入了解吧 使用CSS Grid进行帖子布局 在生产应用程序中CSS Grid的最显着的用例之一就是Threads。CSS Grid用于构建帖子布局。 看一下 :root {--barcelona-threadline-column-width: 48px;
}.post {display: grid;grid-template-columns:var(--barcelona-threadline-column-width)minmax(0, 1fr);grid-template-rows: 21px 19px max-content max-content;
} 有趣的事实第一列网格被命名为--barcelona。我很好奇选择这个名字的原因。 帖子布局由2列* 4行网格组成。没有主容器使用grid-column和grid-row属性手动放置帖子中的每个项目 用户头像 .post-avatar {padding-top: 4px;grid-row: 1 / span 2;grid-column: 1;
} 头像位于第一列中跨越了前两行。值得注意的是存在padding-top。虽然我在生产代码中找不到具体原因但它似乎是对UI对齐进行微调。 这是带有和不带有padding-top处理的头像的前后外观 应用padding-top的另一个原因可能是将头像下移并使其更接近线条。 对网格行使用奇数值 奇数值作为网格行的高度是出于什么考虑经过进一步检查似乎是对用户界面进行微调的一种方式。行高的总和为40px这包括头像的高度和padding-top36px 4px。 可能会好奇为什么这些值没有标准化。设计系统通常被认为是设计师必须严格遵循预定义的UI元素规则的信仰。 然而这个例子表明使用手动调整的值是可以接受的。在某些情况下从严格的准则中偏离是可以接受的。 使用固定大小行的限制 由于前两行的固定宽度无法向它们添加填充。然而只要您意识到这个限制就可以通过使用边距来解决。 以下是一个例子 由于行大小固定添加顶部和底部填充不会影响帖子标题。 布局列之间的空间感觉有点乱 目前布局列之间的间隔为零。相反图像的大小为36 * 36像素而其容器的宽度为48像素。 这样可以模拟这里的间距。我不知道为什么团队会选择这种方法但我更喜欢使用gap属性。 为什么不使用命名的CSS网格区域呢 根据我目前观察到的情况有三种网格布局变体它们都可以受益于使用命名网格区域。 我尝试复制网格并基于命名区域构建它。与指定列和行的值相比它看起来更容易扫描。 为了证明这一点让我们为布局中的每个项目分配一个grid-area .AvatarContainer {grid-area: avatar;
}.HeaderContainer {grid-area: header;
}.BodyContainer {grid-area: body;
}.ThreadlineContainer {grid-area: line;
}.FooterContainer {grid-area: footer;
} 方式一默认 .post {display: grid;grid-template-columns:var(--barcelona-threadline-column-width)minmax(0, 1fr);grid-template-rows: 21px 19px max-content max-content;grid-template-areas:avatar headeravatar body. body. footer;
} 注意使用 .来表示空白区域。 变化2回复 变化是指某人回复另一个人的情况。 .post--reply {grid-template-rows: 36px 0 max-content max-content;grid-template-areas:avatar headerbody bodybody bodyfooter footer;
} 变化3螺纹连接细线 .post--withLine {grid-template-areas:avatar headeravatar bodyline bodyfooter footer;
} 这里使用命名网格区域使得只需在一个地方进行编辑就可以更改布局。 SVG细线处理 说实话最初吸引我注意的是Threads应用程序中的线条。我对它的构造方式感到好奇因为几周前我曾写过一个类似的主题。 请参见下图 连接我的头像和马克的头像的那条线是一条 SVG 路径。它由三部分组成。 第一部分的长度是用 JavaScript 计算的。 网格的内联CSS变量 我很高兴看到像Threads这样的大型应用程序正在使用我和许多其他人提倡的东西。 在用户个人资料中选项卡网格布局是使用包含选项卡数的内联CSS变量构建的。 很有用。当选项卡数量增加时我们只需要更改CSS变量的值。很简洁对吧 溢出换行 我注意到在帖子正文中使用了overflow-wrap: anywhere。我以前没有使用过或听说过这个关键词。我使用break-word。 根据MDN的说法它与break-word相同但有一个额外的东西 计算最小内容内在大小时考虑了单词折断引入的软换行机会。 我仍然没有发现使用break-word和anywhere之间的区别。如果Threads团队中有任何人正在阅读这篇文章我非常好奇为什么。 动态视口单位的使用 我喜欢在启动画面中使用动态视口单位dvh。 防御性的CSS策略 为了确保flexbox布局不会因为最小内容长度而破裂使用min-width: 0来重置该行为。 结论 今天就到这里。我喜欢检查CSS并了解Threads团队如何构建产品。我相信还有很多东西我没有注意到因为这只是Web上的预览版本。 由于文章内容篇幅有限今天的内容就分享到这里文章结尾我想提醒您文章的创作不易如果您喜欢我的分享请别忘了点赞和转发让更多有需要的人看到。同时如果您想获取更多前端技术的知识欢迎关注我您的支持将是我分享最大的动力。我会持续输出更多内容敬请期待。
