2023年6月20日发(作者：)

20个防御性的CSS处理⽅式，很细节很常见，也很容易被忽略的处理⽅式flexbox 内容换⾏当我们使⽤ flexbox 布局的时候，默认情况下，在容器宽度不够时，可能就会出现这样的情况。这个主要是因为 flex-wrap 的默认值是 nowrap，所以我们需要这样改变⼀下值。间距设计师在提供的设计稿中，很容易忽略⽂本在极限情况下与其他元素之间的间距，最终可能会出现这样的情况，⽂字与 icon 紧挨。要处理这个情况，就是需要考虑是在⽂本还是 icon 部分，根据实际情况分析后选择添加 margin 值来增加间距。.section__title { : 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;} 虽好，但⽬前存在很⼤的兼容性问题。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 的话，那情况就有所不同了。同理，在宽度的处理上也是⼀样。被忽略的 在使⽤背景图的时候，如果没加上 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 能完美解决这个问题。图⽚上的⽂字⽤户体验上的⼀个细节处理问题，如果在图⽚上有⽂案，但图⽚没加载出来，或者加载失败的时候，添加⼀个背景⾊，以保证图⽚加载失败的情况下，⽂字与背景能区分开。使⽤ 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 的时候，可能会导致页⾯布局出现⾮意料的情况，那么 就可以处理这个问题了。 还是⼀个不可避免的话题。假设不考虑兼容性的问题，那么我们就可以使⽤这个⽅法保留滚动条的空间。CSS flexbox 中的最⼩内容⼤⼩在使⽤ flex 布局的时候，很有可能其中某个 item 的⽂本内容很长，最终导致没有换⾏⽽溢出容器之外。这种情况也并不是说没有可能，就算是使⽤ overflow-wrap: break-word; 也不会有效果，那么这个时候需要加上 min-width: 0; 来处理。 对于这点， ⼼中有⼀个疑惑，为什么要考虑使⽤ overflow-wrap 的⽅式，⽽不使⽤ word-wrap 或者 word-break 呢？

通过 demo 对⽐之后发现，效果上 word-break: break-word; 与上述的例⼦是相同的结果，仅仅只是从⽂字换⾏的 demo 效果来看。但从 MDN 中对这两个属性的介绍来看，还是有区别的。word-breakThe word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its ow-wrapThe overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks withinan otherwise unbreakable string to prevent text from overflowing its line ⽹格中的最⼩内容⼤⼩与 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 的注意的确有⼀些还是不够到位。毕竟有⼀些内容过于细节了。

2023年6月20日发(作者：)

20个防御性的CSS处理⽅式，很细节很常见，也很容易被忽略的处理⽅式flexbox 内容换⾏当我们使⽤ flexbox 布局的时候，默认情况下，在容器宽度不够时，可能就会出现这样的情况。这个主要是因为 flex-wrap 的默认值是 nowrap，所以我们需要这样改变⼀下值。间距设计师在提供的设计稿中，很容易忽略⽂本在极限情况下与其他元素之间的间距，最终可能会出现这样的情况，⽂字与 icon 紧挨。要处理这个情况，就是需要考虑是在⽂本还是 icon 部分，根据实际情况分析后选择添加 margin 值来增加间距。.section__title { : 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;} 虽好，但⽬前存在很⼤的兼容性问题。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 的话，那情况就有所不同了。同理，在宽度的处理上也是⼀样。被忽略的 在使⽤背景图的时候，如果没加上 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 能完美解决这个问题。图⽚上的⽂字⽤户体验上的⼀个细节处理问题，如果在图⽚上有⽂案，但图⽚没加载出来，或者加载失败的时候，添加⼀个背景⾊，以保证图⽚加载失败的情况下，⽂字与背景能区分开。使⽤ 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 的时候，可能会导致页⾯布局出现⾮意料的情况，那么 就可以处理这个问题了。 还是⼀个不可避免的话题。假设不考虑兼容性的问题，那么我们就可以使⽤这个⽅法保留滚动条的空间。CSS flexbox 中的最⼩内容⼤⼩在使⽤ flex 布局的时候，很有可能其中某个 item 的⽂本内容很长，最终导致没有换⾏⽽溢出容器之外。这种情况也并不是说没有可能，就算是使⽤ overflow-wrap: break-word; 也不会有效果，那么这个时候需要加上 min-width: 0; 来处理。 对于这点， ⼼中有⼀个疑惑，为什么要考虑使⽤ overflow-wrap 的⽅式，⽽不使⽤ word-wrap 或者 word-break 呢？

通过 demo 对⽐之后发现，效果上 word-break: break-word; 与上述的例⼦是相同的结果，仅仅只是从⽂字换⾏的 demo 效果来看。但从 MDN 中对这两个属性的介绍来看，还是有区别的。word-breakThe word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its ow-wrapThe overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks withinan otherwise unbreakable string to prevent text from overflowing its line ⽹格中的最⼩内容⼤⼩与 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 的注意的确有⼀些还是不够到位。毕竟有⼀些内容过于细节了。