FE.UX-常见CSS边界情况防御处理

遵循这种心态至少会减少您可能遇到的问题。

FE.UX-常见CSS边界情况防御处理_第1张图片
对于这个组件,标题可以是一个词,也可以是多个词。为避免标题卡在右侧的图标上,最好添加margin-right: 1rem,以防标题变长。

FE.UX-常见CSS边界情况防御处理_第2张图片
如果一个按钮与另一个按钮相邻,则为第二个按钮添加一个左边距,以防万一

.button + .button {
  margin-left: 1rem;
}

FE.UX-常见CSS边界情况防御处理_第3张图片
第一个解决方案是使用文本截断 & max-width。第二个只使用max-width,但如果标签有很长的文本,它可能会失败。

FE.UX-常见CSS边界情况防御处理_第4张图片
图像默认背景

img {
  background-color: #525252;
}

FE.UX-常见CSS边界情况防御处理_第5张图片
object-fit: cover避免头像拉伸

FE.UX-常见CSS边界情况防御处理_第6张图片
flex-wrap以避免元素溢出

FE.UX-常见CSS边界情况防御处理_第7张图片
文本截断+右边距

FE.UX-常见CSS边界情况防御处理_第8张图片
overscroll-behavior-y: contain;避免父元素一起滚动

css变量设置兜底值,如calc(100% - var(--actions-width, 70px))

FE.UX-常见CSS边界情况防御处理_第9张图片
使用min-height代替height

FE.UX-常见CSS边界情况防御处理_第10张图片
同理替换widthmin-width.

FE.UX-常见CSS边界情况防御处理_第11张图片
不要遗忘background-repeat

FE.UX-常见CSS边界情况防御处理_第12张图片
当标题有一个很长的词时,它不会换行。
即使我们使用overflow-wrap: break-word,它也不起作用。
要更改该默认行为,我们需要min-width将 flex 项的 设置为0。那是因为min-width默认值是auto,就会发生溢出。
同样的事情适用于列 flex 包装器,我们使用min-height: 0

.card {
    display: flex;
}
.card__title {
    overflow-wrap: break-word;
    min-width: 0;
}

分开选择器
下方无效

/* Don't do this, please */
input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #222;
}

正确写法

input::-webkit-input-placeholder {
    color: #222;
}

input:-moz-placeholder {
    color: #222;
}

一些渐进增强:

  • gap
  • @media
  • scrollbar-gutter
  • minmax()
  • sticky

参考资料

你可能感兴趣的