关于css:20-个防御性的-CSS-处理方式很细节很常见也很容易被忽略的处理方式

看到一篇来自 @shadeed9 对于 CSS 的文章内容，整体来说次要在编写 CSS 时可能须要留神到的一些带有保护性的解决形式，以防止页面布局上呈现错位等状况。CSS 属性有些还是很常见的，只不过深感在细节上的把控真的很不错。

原文很长，取局部 内容简略分享，并非原文翻译，图片和代码来自原文，具体的可查看原文。原文地址：https://ishadeed.com/article/defensive-css/

目录

• flexbox 内容换行
• 间距
• 长文本内容
• 避免图像被拉伸或压缩
• 锁定滚动链接
• CSS 变量回退
• 应用固定宽度或高度
• 被疏忽的 background-repeat
• 垂直方向的媒体查问
• 应用 justify-content: space-between
• 图片上的文字
• 应用 CSS 网格中的固定值需注意
• 仅在须要时显示滚动条
• 滚动条装订线
• CSS flexbox 中的最小内容大小
• CSS 网格中的最小内容大小
• 主动适宜与主动填充
• 图片最大宽度
• 地位：粘性 css 网格
• 分组选择器

内容

flexbox 内容换行

当咱们应用 flexbox 布局的时候，默认状况下，在容器宽度不够时，可能就会呈现这样的状况。

这个次要是因为 flex-wrap 的默认值是 nowrap，所以咱们须要这样扭转一下值。

.options-list {
  display: flex;
  flex-wrap: wrap;
}

间距

设计师在提供的设计稿中，很容易疏忽文本在极限状况下与其余元素之间的间距，最终可能会呈现这样的状况，文字与 icon 紧挨。

要解决这个状况，就是须要思考是在文本还是 icon 局部，依据理论状况剖析后抉择增加 margin 值来减少间距。

.section__title {margin-right: 1rem;}

不过这个状况，我个别会思考在 icon 上加 margin-left，这样的话，在没有 icon 的时候，文字还是能够顶到容器边缘。

长文本内容

这个就简略，就是文本过长的解决形式，个别状况下就是换行或者截断并已 … 的模式呈现。至于抉择什么形式就要看以后页面模块的设计格调来决定了。

文中的解决形式是采纳了截断出 … 这种。

.username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

避免图像被拉伸或压缩

这种状况个别是在是图片由用户上传，或者图片未按规定比例应用导致的。

解决形式就是间接应用 object-fit 属性：

.card__thumb {object-fit: cover;}

锁定滚动链接

次要呈现的状况是在当页面中点击弹出 modal 弹层时，页面内容自身很长的时候。

.modal__content {
  overscroll-behavior-y: contain;
  overflow-y: auto;
}

overscroll-behavior 虽好，但目前存在很大的兼容性问题。

CSS 变量回退

这个 CSS 变量回退，说白了，其实就是当 CSS 变量值有效时而应用一个“安全值”来保障某个属性值还是可用的。

.message__bubble {max-width: calc(100% - var(--actions-width, 70px));
}

不过联合小志在做猎头之前写前端页面时的解决形式，可能还会去考虑一下浏览器对 var() 的兼容性问题，那么就会再加上一个属性。不过当初的浏览器来看，如同普遍性不存在这个问题。

.message__bubble {
  max-width: 70px;
  max-width: var(--actions-width, 70px);
}

应用固定宽度或高度

这个没啥说的，次要就是对内容过长时，溢出容器时的一个保护措施。比方当咱们把高度固定为 350px 之后，内容过长就会溢出。

而如果咱们把 height 换成 min-height 的话，那状况就有所不同了。

同理，在宽度的解决上也是一样。

被疏忽的 background-repeat

在应用背景图的时候，如果没加上 no-repeat 的话，默认就会把背景图平铺开。

所以，顺手加上 no-repeat 还是一个好习惯，除非你已知这张背景图是否要平铺。

.hero {background-image: url('..');
  background-repeat: no-repeat;
}

垂直方向的媒体查问

这个场景目前小志在页面中还未见过，个别在中后盾页面呈现的概率比拟多，比方作者提供的页面成果。

左下角是通过 position: sticky; 定位的，可能通过 fixed 定位也是一样吧，而后当浏览器的高度变小的时候，就会叠在左侧的导航下面。

显然，这样的页面成果就不对了。而如果这个时候，通过 @media 形式判断页面高度，在某个安全区外咱们才让左下角这部分通过 sticky 来定位。

@media (min-height: 600px) {
  .aside__secondary {
    position: sticky;
    bottom: 0;
  }
}

应用 justify-content: space-between

原文中这部分题目是 Using Justify-Content: Space-Between，但看起来更应该是 Using gap。应用什么题目不是要害，这部分次要是提到当应用 justify-content: space-between; 时，如果元素不够，元素与元素之间的间距就会拉长，因为要均匀散布元素之间的间距。

比方本来是想要这样的一个成果，间距的值是固定的：

在元素数量足够的状况下，元素与元素之间的间距还是比拟现实的，通过上面这个 CSS 解决形式：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

但，元素的数量总是会有余的时候，那么就会这样了。

可见，其实并不是想要均匀散布，而只是想要在最大的极限状况下和内容有余的时候，元素之间的间距是可控的。一般来说，这个解决形式挺多的，用 margin 之类的也是能够解决，不过目前有一个兼容性并不是非常好的 gap 能完满解决这个问题。

.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

图片上的文字

用户体验上的一个细节解决问题，如果在图片上有文案，但图片没加载进去，或者加载失败的时候，增加一个背景色，以保障图片加载失败的状况下，文字与背景能辨别开。

应用 CSS 网格中的固定值需注意

grid 网格布局当初开始缓缓被关注了，grid 与 flex 一样都能够做自适应的成果，也能够应用固定值的状况。在应用固定值的时候，最好是通过 @media 判断一下宽度，以便于满足最小宽度时的解决。

@media (min-width: 600px) {
  .wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
  }
}

不过个别这种状况下，可能就间接扭转页面布局了，感觉作者在这个方面上担心是多余的。或者次要是本人未遇到过他所遇到的场景吧。

仅在须要时显示滚动条

这个没啥说的，个别大家都是把 scroll 设置为 auto。不过在个别情况下，可能这个 auto 会让元素的宽度变小，而后导致内容或者布局呈现一点小瑕疵。

.element {overflow-y: auto;}

滚动条装订线

这个所谓的装订线，次要就是 scrollbar-gutter 属性，保留滚动条的空间。在下面那个 overflow 例子中提到，如果设置为 auto 的时候，可能会导致页面布局呈现非预料的状况，那么 scrollbar-gutter 就能够解决这个问题了。

兼容性还是一个不可避免的话题。

假如不思考兼容性的问题，那么咱们就能够应用这个办法保留滚动条的空间。

.element {scrollbar-gutter: stable;}

CSS flexbox 中的最小内容大小

在应用 flex 布局的时候，很有可能其中某个 item 的文本内容很长，最终导致没有换行而溢出容器之外。

这种状况也并不是说没有可能，就算是应用 overflow-wrap: break-word; 也不会有成果，那么这个时候须要加上 min-width: 0; 来解决。

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

对于这点，小志心中有一个纳闷，为什么要思考应用 overflow-wrap 的形式，而不应用 word-wrap 或者 word-break 呢？

通过 demo 比照之后发现，成果上 word-break: break-word; 与上述的例子是雷同的后果，仅仅只是从文字换行的 demo 成果来看。但从 MDN 中对这两个属性的介绍来看，还是有区别的。

• word-break

  The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
  

• overflow-wrap

  The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
  

CSS 网格中的最小内容大小

与 flexbox 相似，CSS 网格的子项有一个默认的最小内容大小，即 auto，这意味着，如果存在大于网格项的元素，它将溢出。

@media (min-width: 1020px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 248px;
    grid-gap: 40px;
  }
}

.carousel {
  display: flex;
  overflow-x: auto;
}

对于网格这块，理解的不够深刻，间接延用作者的意思就是将 grid-template-columns 的值扭转一下，改为：minmax(0, 1fr) 248px 就能够失去上面这个成果。

主动适宜与主动填充

过后看到效果图的时候，我还认为是 flex 布局中的状况，后果是 grid 网格布局中应用的状况。

在应用 grid 布局时，如果是这样写，利用 auto-fit 的话，就会是下面这个成果，item 不够时会被拉长。

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
}

而如果改为 auto-fill 的话就是上面这个成果。

对于 auto-fit 和 auto-fill 的区别能够看这张图。

图片最大宽度

作者倡议能够在 reset 局部中对 img 加上最大宽度的设置，但没说具体是为什么。集体猜测是思考图片在容器中的展现吧，同时还有一个 object-fit 属性。😆

img {
  max-width: 100%;
  object-fit: cover;
}

地位：粘性 css 网格

在应用 CSS 网格布局时，如果子元素应用了 position: sticky 的话，因为网格子元素的默认对齐形式是 stretch，所以会被拉伸。

而其实咱们想要的是，左侧边栏并非拉伸成果的，所以，须要通过 align-self: start; 扭转一下子元素本身的对齐形式。

aside {
  align-self: start;
  position: sticky;
  top: 1rem;
}

这样的话，成果就不一样了。

简略测试了一下，在 flex 布局中也是同样的状况，次要就是因为子元素的个性是拉伸的。

分组选择器

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

当初写 CSS 的时候基本上都不会去写带前缀的属性，而是通过构建工具来主动实现。所以平时也不会在意这个。依照作者的说法是，如果把这两个写在一起，会导致整个规定生效，倡议离开写。

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

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

最初

以上内容看着其实都是挺简略，挺高级的内容，然而在日常开发过程中，对于 CSS 的留神确实有一些还是不够到位。毕竟有一些内容过于细节了。