【第2509期】编写防御性 CSS 实践 (Part Ⅱ)
前言
原文较长所以分期分享。今日前端早读课文章由公号:KooFE前端团队授权分享。
正文从这开始~~
取消滚动链接
当你打开一个弹框 (Modal) 并向下滚动到末尾时，如果继续向下滚动则会引起弹框下方的内容（通常是 body 元素）发生滚动。我们把这种现象称之为滚动链接 (scroll chaining)。
在过去，只能通过一些 hack 的方法来取消滚动链接效果；但现在，我们可以 CSS 的 overscroll-behavior 属性来优化滚动的效果。
在下图中，可以看到滚动链接的默认行为：
为了避免滚动扩散到其他元素，我们可以将其添加到任何需要滚动的组件中（例如：聊天组件、移动菜单等）。这个属性只有在发生滚动的时候才会产生效果。
.modal__content {
overscroll-behavior-y: contain;
overflow-y: auto;
}
自定义属性备用值
CSS 自定义属性 (变量) 被越来越多的用于网页设计中。为了避免破坏用户体验，我们需要做一些额外的处理，以防 CSS 自定义属性的值因某种原因为空。
特别是使用 JavaScript 设置 CSS 自定义属性的值时，要更加注意自定义属性的值无效的情况。比如下面的例子：
.message__bubble {
max-width: calc(100% - var(--actions-width));
}
calc() 函数中使用了自定义属性 --actions-width，并且它的值由 JavaScript 代码提供。假如在某些情况下，Javascript 代码执行失败，那么 max-width 的值会被计算为 none。
为了避免发生这种问题，要用 var() 来设置一个备用值，当自定义属性的值无效时，这个备用值就会生效。
.message__bubble {
max-width: calc(100% - var(--actions-width, 70px));
}
这样，如果自定义属性 --actions-width 未被定义，就会使用备用值 70px。这个方法用于自定义属性值可能会失败的场景，比如这个值来自于 JavaScript。在其它场景中，它并不是必须的。
使用固定的宽高
一常见的破坏布局的情形是，具有不同长度内容的元素使用了固定宽度或高度。
固定高度
我经常会碰到在一个具有固定高度的元素内部，它包含的内容大于它的高度，这会导致布局被破坏掉。例如下面这种情况。
.hero {
height: 350px;
}
为了避免内容超出 .hero，我们需要使用 min-height 而不是 height。
.hero {
min-height: 350px;
}
这样，当内容变得更大时，布局依旧不会被破坏掉。
固定宽度
也许你曾经碰到过 button 里的文字与左右边缘间隙很小，这可能是使用了固定宽度导致的。
.button {
width: 100px;
}
如果按钮里面的文字长度超过 100px，它将靠近左右边缘。如果再长一些，文本就会超出了按钮。这种体验很差！
为了解决这个问题，可以将 width 替换为 min-width。
.button {
min-width: 100px;
}
不要忘了 background-repeat
通常，当使用尺寸比较大的图片作为背景时，不要忘记检查一下页面在大屏幕上的展示效果。图片作为背景，在默认情况下，会被重复显示。
由于笔记本电脑的屏幕相对比较小，出现图片重复的概率较小。但在更大的屏幕上，元素的尺寸也随之变大，它的背景图片有可能会重复展示。
为了避免这种情况，我们需要设置 background-repeat 属性。
.hero {
background-image: url('..');
background-repeat: no-repeat;
}
垂直方向的媒体查询
有时，在开发组件时，我们会调整浏览器的宽度，测试组建的样式是否符合预期。如果对浏览器的高度进行测试，可以发现另外一些有趣的问题。
比如下面的图中，是一个比较常见的例子。在左侧的侧边栏组件中包含了主导航和下方辅助导航。辅助导航会被固定放在侧边栏组件的底部。开发人员将 position: sticky 添加到了辅助导航，这样它就可以固定到了底部（吸底）。如下图所示，主导航和辅助导航看起来都很正常。
然而，当浏览器的高度变小时，布局就会发生错乱。如下图所示，两个导航发生了重叠：
使用 CSS 垂直方向的媒体查询，可以避免此问题。
@media (min-height: 600px) {
.aside__secondary {
position: sticky;
bottom: 0;
}
}
这样，只有当浏览器视窗的高度超过 600px 时，辅助导航才会产生吸底效果；其他情况下，辅助导航不会产生吸底效果，按原有的方式布局展示。这样就避免了辅助导航和上面的主导航发生重叠。
关于本文
译者：@koofe
译文：https://mp.weixin.qq.com/s/ThVCN4XkgybThTLcnVZhew
作者：@Ahmad Shadeed
原文：https://ishadeed.com/article/defensive-css/
为你推荐
欢迎自荐投稿VX:zhgb_f2er，前端早读课等你来