关于前端:防御式CSS是什么这几点属性重点防御

作者：Ahmad Shadeed
译者：前端小智
起源：ishadeed

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

很多时候，咱们心愿有一种办法能够防止某种 CSS 问题或行为的产生。咱们晓得，网页内容是动静的，网页上的货色能够扭转，从而减少了呈现 CSS 问题或奇怪行为的可能性。

进攻式 CSS 是一个片段的汇合，能够帮忙我编写受爱护的 CSS。换句话说，就是未来会有更 bug 呈现。

CSS flexbox 是目前最有用的 CSS 布局性能之一。在一个包装器上增加 display: flex，让子项挨着排序。

问题是，当空间有余时，那些子项默认不会被包裹成一个新的行。咱们须要用 flex-wrap: wrap 来扭转这一行为。

上面是一个典型的例子。

.options-list {display: flex;}

当空间较少时，会呈现程度滚动。这应该是预料之中的，实际上并不是一个 “ 问题 ”。

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

应用 flexbox 时，个别的教训法令是容许包裹，除非你想要一个滚动的包裹。这是另一回事，但尽量应用 flex-wrap 来防止意外的布局行为（在咱们的例子中，是程度滚动）。

咱们开发者须要思考不同的内容长度。这意味着，间距应该增加到组件中，即便它看起来不须要。

在这个例子中，咱们在左边有一个 section 题目和一个操作按钮。目前，它看起来还不错。然而，如果题目再长一些，会产生什么呢?

留神到文本太凑近按钮了吗？这里，你可能会思考多行换行，但当初，咱们先关注距。

如果题目有空格和文本截断，咱们不会看到这样的问题。

.section__title {margin-right: 1rem;}

在构建布局时，思考到长的内容是很重要的。正如你在后面所看到的，当章节的题目太长时就会被截断。这是可选的，但对于某些 UI 来说，思考到这一点很重要。

对我来说，这是一种防御性的 CSS 办法。在 “ 问题 “ 真正产生之前就去解决它，这很好。

这里有一份人名清单，当初看起来很完满

然而，因为这是用户生成的内容，咱们须要小心如何进攻布局，以防某些内容太长。请看下图:

在这种布局中，一致性十分重要。为了实现这一点，咱们能够应用 text-overflow和它的好友来简略地截断名称。

在无法控制图片高宽比的状况下，如果用户上传的图片与高宽比不符，最好提前思考并提供解决方案。

在上面的例子中，咱们有一个带有照片的卡片组件。它看起来不错。

当用户上传一个不同大小的图像时，它将被拉伸。这可不是什么坏事。看看图像是如何被拉伸的!

最简略的修复办法是应用 CSS object-fit。

.card__thumb {object-fit: cover;}

在我的项目层面上，我偏向于为 所有图像 增加 object-fit，以防止出现意外的后果。

你是否已经关上一个模态并开始滚动，而后当你达到起点并持续滚动时，模态上面的内容（主体元素）会滚动？这就是所谓的滚动链。

默认状况下，当涉及页面顶部或者底部时（或者是其余可滚动区域），挪动端浏览器偏向于提供一种“触底”成果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。。

在过来的几年里，有一些黑科技来实现这一点，但当初，咱们只须要应用 CSS 即可，这要感激overscroll-behavior CSS 属性。

在上面的图中，能够看到默认的滚动链接行为。

为了提前防止这种状况，咱们能够将其增加到任何须要滚动的组件中（例如：聊天组件、挪动菜单 … 等）。这个属性的益处是，在有滚动之前，它不会产生影响。

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

CSS 变量在网页设计中失去了越来越多的利用。咱们能够利用一种办法，在 CSS 变量值因某种原因为空的状况下，以一种不毁坏体验的形式应用它们。

通过 JS 输出 CSS 变量的值时特地有用。上面是一个例子:

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

变量 --actions-width 在 calc() 函数中被应用，其值来自 JS。假如 JS 因为某种原因失败了，会产生什么？max-width 会被计算为零。

咱们能够提前防止这种状况，在 var() 中增加一个回退值。

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

这样，如果变量没有定义，就会应用回退 (70px)。这种办法能够在变量可能失败的状况下应用。

毁坏布局的常见状况之一是对一个有不同长度内容的元素应用固定的宽度或高度。

我常常看到主内容局部有固定的高度，而内容却大于这个高度，这就导致了布局的毁坏。如下所示：

.main {height: 350px;}

为了防止这种状况呈现，能够应用 min-height 代替 height:

你有没有见过按钮，它的标签离左右边缘太近？这是因为应用了固定宽度。

.button {width: 100px;}

如果按钮的标签大于100px，它将凑近边缘。如果它太长，文本会泄露进去。这是不好的！

为了解决这个问题，咱们能够简略地用 min-width 代替 width。

.button {min-width: 100px;}

很多时候，当应用一张大的图片作为背景时，咱们往往会遗记思考设计在大屏幕上观看时的状况。该背景将默认反复。

这在笔记本屏幕上大多不会看到，但在大屏幕上很常见。

为了提前防止这种行为，请确保应用重置 background-repeat。

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

有时，咱们很想建设一个组件，只通过调整浏览器的宽度进行测试。依据浏览器的高度进行测试能够发现一些乏味的问题。

这里有一个我见过屡次的例子。咱们有一个带有次要和主要链接组件。主要链接应该位于旁白局部的最底部。

考虑一下上面的例子。主导航和次导航看起来还不错。在我看到的这个例子中，开发者给二级导航增加了 position: sticky，这样它就能够粘在底部了。

然而，如果浏览器的高度较小，bug 就来了。留神这两个导航是如何重叠的。

通过应用 CSS 垂直媒体查问，咱们能够防止这个问题。

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

这样，只有当视口高度大于或等于600px 时，二级导航才会被粘在底部。好多了，对吗？

可能有更好的办法来实现这一行为（比方应用 margin-auto），但在这个例子中专一于垂直查问。

在一个 flex 的容器中，咱们可能会应用 justify-content 来使子项目之间有肯定的间距。如果有肯定数量的子项目，布局看起来会很好。然而，当它们减少或缩小时，布局会看起来很奇怪。

思考以下例子:

咱们有一个有四个我的项目的 flex 容器。每个我的项目之间的间距不是 gap 或 margin，它之所以存在是因为容器有 justify-content: space-between。

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

当我的项目的数量少于 4 个时，将产生以下状况：

这并不是坏事。对此有不同的解决方案：

margin
flexbox gap（审慎应用）
padding（可利用于每个子元素的父元素）
减少空的元素，作为距离。

为了简略起见，我应用 gap。

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

当在图片上搁置文本时，必须思考到图像无奈加载的状况。文本会是什么样子。上面是一个例子：

文本看起来是可读的，但当图像加载失败时，它的可读性变得很差。

咱们通过给 <img> 元素增加一个背景色来轻松解决这个问题。这个背景只有在图片加载失败时才会显示进去。

假如咱们有一个蕴含 aside 和main的网格。CSS 看起来是这样的:

.wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
}

因为不足空间，这在小的视口尺寸上会呈现问题。为了防止这样的问题，在应用上述 CSS 网格时，肯定要应用媒体查问。

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

咱们能够管制显示滚动条或不只是在有很长的内容的状况下。尽管如此，强烈建议应用 auto 作为 overflow 的值。思考以下例子:

请留神，即便内容很短，也有一个滚动条可见。这对一个用户界面来说并不是坏事。作为用户，在不须要滚动条的状况下看到滚动条是很凌乱的。

.element {overflow-y: auto;}

应用overflow-y: auto，滚动条只有在内容较长时才可见。否则，它就不显示。

另一件与滚动无关的事件是 Scrollbar Gutter。以后面的例子为例，当内容变长时，减少一个滚动条会导致布局的转移。布局挪动产生的起因是为滚动条保留了一个空间。

Scrollbar Gutter 是内边框边缘和外填充边缘之间的空间。对于经典滚动条，Scrollbar Gutter 的大小与滚动条的宽度雷同。这些滚动条通常是不通明的，并从相邻的内容中占用一些空间。

请看下图:

请留神，因为显示了滚动条，当内容变长时，它是如何移位的。咱们能够通过应用 scrollbar-gutter 属性来防止这种行为。

.element {scrollbar-gutter: stable;}

如果一个 flex 我的项目中的文本元素或图像大于或长于该我的项目自身，浏览器就不会放大它们。这是 Flexbox 的默认行为。思考以下例子：

.card {display: flex;}

当题目有一个很长的词时，它不会被包成一个新行。

即便咱们应用 overflow-wrap: break-word，也不会起作用。

.card__title {overflow-wrap: break-word;}

要扭转这种默认行为，咱们须要将 flex 我的项目的 min-width 设置为 0。这是因为 min-width 的默认值是 auto，溢出会产生。

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

同样也实用于 flex-direction:column 布局，对应的应用 min-height: 0。

与 flexbox 相似，CSS grid 对其子我的项目有一个默认的最小内容尺寸，即auto。这意味着，如果有一个元素比网格项大，它将溢出。

在下面的例子中，咱们在主局部中有一个 carousel。

<div class="wrapper">
    <main>
        <section class="carousel"></section>
    </main>
    <aside></aside>
</div>

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

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

因为 carousel是一个 flex 布局，当内容超出时，默认是不会换行的，所以会呈现程度滚动的。

为了解决这个问题，咱们有三种不同的解决方：

应用 minmax()
将 min-width 利用于网格我的项目
在网络中增加 overflow: hidden

作为一种防御性的 CSS 机制，我会抉择第一种，即应用 minmax() 函数。

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

Auto Fit Vs Auto Fill

在应用 CSS 网格 minmax() 函数时，决定应用 auto-fit 还是 auto-fill 的关键字很重要。一旦使用不当，会导致意外的后果。

当应用 minmax() 函数时，auto-fit关键字将扩大网格我的项目以填补可用空间。而 auto-fill 将保留可用的空间，而不扭转网格项的宽度。

也就是说，应用 auto-fit 可能会导致网格我的项目太宽，特地是当它们小于预期时。考虑一下上面的例子。

编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原谅：https://ishadeed.com/article/…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:防御式CSS是什么这几点属性重点防御

1.Flexbox 包裹

2. 间距

3. 长内容

4. 避免图像被拉伸或压缩

5. 锁定滚动链接

6. CSS 变量回退

7. 应用固定宽度或高度

固定高度

固定宽度

8. 遗记 background-Repeat

9. 垂直媒体查问

10. 应用 justify-content:space-between

11. 图片上的文字

12. 小心 CSS 网格中的固定值

13. 只在须要的时候显示滚动条

14.Scrollbar Gutter

15. CSS Flexbox 中的最小内容尺寸

16. CSS 网格中的最小内容尺寸

Auto Fit Vs Auto Fill

交换

Just My Socks（注册教程内含优惠码）

关于前端:防御式CSS是什么这几点属性重点防御

1.Flexbox 包裹

2. 间距

3. 长内容

4. 避免图像被拉伸或压缩

5. 锁定滚动链接

6. CSS 变量回退

7. 应用固定宽度或高度

固定高度

固定宽度

8. 遗记 background-Repeat

9. 垂直媒体查问

10. 应用 justify-content:space-between

11. 图片上的文字

12. 小心 CSS 网格中的固定值

13. 只在须要的时候显示滚动条

14.Scrollbar Gutter

15. CSS Flexbox 中的最小内容尺寸

16. CSS 网格中的最小内容尺寸

Auto Fit Vs Auto Fill

交换

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）