建站
咨詢
售后
建站咨詢
新聞中心
一、概念解釋
二、防御的必要性
防御性CSS不僅僅是為了兼容其他少數(shù)場(chǎng)景，避免邊界情況，更大的價(jià)值在于提升團(tuán)隊(duì)協(xié)作的可能性。防御性CSS的意義類似JS中的try...catch, 他可能無(wú)法縮短需求開發(fā)的時(shí)間，但卻是你程序正確運(yùn)行和穩(wěn)定運(yùn)行的最后一道防線，更何況JS的錯(cuò)誤只有在用戶交互后才有感知，而CSS一旦出錯(cuò)，直接赤裸裸的展現(xiàn)在用戶面前，直接影響用戶的使用率和留存率。
都說(shuō)編程風(fēng)格分為三種：能跑就行風(fēng)格、中規(guī)中矩風(fēng)格、錦上添花風(fēng)格。能跑就行風(fēng)格代表的是：每一個(gè)設(shè)定和判斷都和當(dāng)次需求貼合的嚴(yán)絲合縫，如同山羊走鋼絲，搖搖欲墜，但就是不倒，不得不令人稱奇，但這種風(fēng)格，不僅對(duì)編程人員要求極高，而且十分不利于團(tuán)隊(duì)協(xié)作，一旦意料意外的情景發(fā)生或者需求變更，帶來(lái)的是雪崩式的改動(dòng)；中規(guī)中矩風(fēng)格概述為，該寫注釋的地方寫注釋，該寫思路的地方寫自己這么做的理由，該兜底處理的地方做攔截處理，程序的魯棒性和可維護(hù)性直接拉滿；萬(wàn)無(wú)一失風(fēng)格更多的像是處女座，追求極致和完美，在中規(guī)中矩風(fēng)格上再增一抹亮色，年輕時(shí)候的“雷布斯”就是典型代表。防御性CSS的目的就是從技術(shù)上盡可能的改變編程者能跑就行的僥幸心理，提升項(xiàng)目的可用性和可維護(hù)性。其目的也可以歸納為讓你的項(xiàng)目做到：跑起來(lái)不出錯(cuò)，改起來(lái)不罵人。
防御性CSS的作用是對(duì)常規(guī)CSS的兜底，是實(shí)現(xiàn)項(xiàng)目穩(wěn)定性建設(shè)重要但極其容易被忽視的一環(huán)。
三、防御技能
技能一：flex-wrap
屬性背景：flex-wrap是flex布局中的屬性，其作用是控制flex容器內(nèi)元素所占空間超出flex容器空間時(shí)是否折行。
防御原因：flex-wrap屬性默認(rèn)是不折行，容易忽略多元素溢出兜底；為兜底，請(qǐng)?jiān)O(shè)置flex-wrap: wrap;
意外后果：內(nèi)部元素被裁剪，或flex容器出現(xiàn)滾動(dòng)條；
應(yīng)用場(chǎng)景：
1）開發(fā)中flex容器空間夠用，但小尺寸屏幕會(huì)溢出；
2）內(nèi)容由服務(wù)端下發(fā)，元素個(gè)數(shù)無(wú)法提前預(yù)支，超于預(yù)期時(shí)導(dǎo)致flex容器出現(xiàn)滾動(dòng)條或內(nèi)部元素被裁剪；
代碼：
.options-list {
display: flex;
flex-wrap: wrap;
}示例場(chǎng)景
技能二：margin間距
屬性背景：margin作用是調(diào)整元素的外邊距。用于指定元素與周圍空間的距離關(guān)系。
防御原因：防止元素與元素之間擠壓空間，造成重疊等情況；
意外后果：元素重疊或被擠壓；
應(yīng)用場(chǎng)景：
1）內(nèi)容所占空間無(wú)法保證與其他元素不存在擠壓的場(chǎng)景；
代碼：
.section__title {
margin-right: 1rem;
}示例場(chǎng)景
技能三：長(zhǎng)文本處理
背景：當(dāng)文本長(zhǎng)度超出容器時(shí)，該如何顯示。
意外后果：文本折行，樣式不統(tǒng)一；
應(yīng)用場(chǎng)景：
1）要求列表表現(xiàn)一致但文本長(zhǎng)度不可控；
此處假設(shè)與設(shè)計(jì)最終商定，超出部分以省略顯示，那么，意外兜底的樣式代碼為：
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}場(chǎng)景示例：
技能四：防止圖像被拉伸或壓縮
背景：通常，服務(wù)器下發(fā)的圖片尺寸以及用戶自定義上傳的圖片，顯示在頁(yè)面時(shí)，不可能百分百與容器尺寸貼合，不可避免的會(huì)遇到圖片的放縮處理。
意外后果：圖像被拉伸或壓縮；
應(yīng)用場(chǎng)景：
1）服務(wù)端下發(fā)多種不確定尺寸的圖片；
2）用戶自定義上傳圖片且需要預(yù)覽和編輯；
.card__thumb {
object-fit: cover;
}demo鏈接：https://monageju.github.io/Blog/object_fit.html
場(chǎng)景示例：
技能五：鎖定滾動(dòng)鏈接
背景：overscroll-behavior是overscroll-behavior-x和overscroll-behavior-y的簡(jiǎn)寫屬性，它控制的是元素滾動(dòng)到邊界時(shí)的表現(xiàn)。換個(gè)能聽得懂的說(shuō)法：在JS世界里，有事件冒泡機(jī)制，你可以通過(guò)event的stopPropagation方法去阻止冒泡的發(fā)生，同樣，在CSS世界里，滾動(dòng)也有冒泡機(jī)制，當(dāng)內(nèi)部元素滾動(dòng)到邊界時(shí)，如果繼續(xù)滾動(dòng)，會(huì)帶動(dòng)外層祖先元素發(fā)生滾動(dòng)，這種現(xiàn)象被稱為滾動(dòng)鏈，為了方便記憶，你也可以把他形象的記憶為滾動(dòng)冒泡。而overscroll-behavior這個(gè)屬性，就是類似event的stopPropagation方法阻止冒泡事件一樣，提供給開發(fā)者去控制內(nèi)層元素是否可以發(fā)生”冒泡“帶動(dòng)外層元素滾動(dòng)的屬性。
意外后果：”滾動(dòng)冒泡“ 或 ”滾動(dòng)穿透“；
應(yīng)用場(chǎng)景：
1）頁(yè)面存在多層滾動(dòng)元素，需要單獨(dú)控制每層滾動(dòng)是否引起外層滾動(dòng)；
.child {
overscroll-behavior-y: contain;
overflow-y: auto;
}demo鏈接：https://monageju.github.io/Blog/overscroll_behavior.html
場(chǎng)景示例：如demo鏈接示例
拓展：
理解了overscroll-behavior屬性的作用，現(xiàn)在我們來(lái)看點(diǎn)拓展的東西：
首先來(lái)看下overscroll-behavior的屬性值有哪些：
overscroll-behavior 屬性有 3 個(gè)值：
auto - 默認(rèn)。元素的滾動(dòng)會(huì)傳播給祖先元素。
contain - 阻止?jié)L動(dòng)鏈接。滾動(dòng)不會(huì)傳播給祖先，但會(huì)顯示元素內(nèi)的原生效果。例如，Android 上的炫光效果或 iOS 上的回彈效果，當(dāng)用戶觸摸滾動(dòng)邊界時(shí)會(huì)通知用戶。注意：overscroll-behavior: contain 在 html 元素上使用可防止?jié)L動(dòng)導(dǎo)航操作。
none - 和 contain 一樣，但它也可以防止節(jié)點(diǎn)本身的滾動(dòng)效果（例如 Android 炫光或 iOS 回彈）。
這里有兩個(gè)效果：一是下拉刷新，二是炫光回彈，這里有個(gè)demo可以看到具體效果：鏈接傳送門
下拉刷新是原生支持的功能，如果項(xiàng)目要求自定義下拉刷新效果，除了要考慮如何實(shí)現(xiàn)自定義，還要考慮如何去掉默認(rèn)原生下拉刷新，否則就會(huì)出現(xiàn)兩個(gè)并存的下拉刷新，而去掉原生的下拉刷新也很簡(jiǎn)單，只需要在 body 或 html 元素添加如下代碼：
body {
/* 禁用滾動(dòng)冒泡,但是依然可以進(jìn)行下拉刷新和炫光和回彈效果以及滑動(dòng)導(dǎo)航 */
overscroll-behavior-y: contain;
}至于禁用炫光和回彈效果，其實(shí)是應(yīng)用overscroll-behavior屬性的none屬性值，具體代碼如下：
body {
/* 禁用默認(rèn)的下拉刷新和炫光和回彈效果,但是依然可以進(jìn)行滑動(dòng)導(dǎo)航 */
overscroll-behavior-y: none;
}除了上述描述的兩個(gè)效果，其實(shí)還有一個(gè)效果：手勢(shì)導(dǎo)航,如左滑退出及右滑前進(jìn)功能；而如果要禁用手勢(shì)導(dǎo)航，可以使用如下代碼：
body {
/* 禁用滑動(dòng)導(dǎo)航 */
overscroll-behavior-x: none;
}技能六：CSS變量默認(rèn)值
背景：CSS變量可以實(shí)現(xiàn)動(dòng)態(tài)控制元素屬性，但是當(dāng)CSS變量未定義或無(wú)效時(shí)，造成變量值異常，此時(shí)，元素的樣式將會(huì)脫離預(yù)期，而變量默認(rèn)值可以實(shí)現(xiàn)異常兜底，保證變量值異常時(shí)頁(yè)面依然能運(yùn)行。需要額外說(shuō)明的是，備用值并不是用于實(shí)現(xiàn)瀏覽器兼容性的。如果瀏覽器不支持CSS自定義屬性，備用值也沒(méi)什么用。它僅對(duì)支持CSS自定義屬性的瀏覽器提供了一個(gè)備份機(jī)制，該機(jī)制僅當(dāng)給定值未定義或是無(wú)效值的時(shí)候生效，函數(shù)的第一個(gè)參數(shù)是自定義屬性的名稱。如果提供了第二個(gè)參數(shù)，則表示備用值，當(dāng)自定義屬性值無(wú)效時(shí)生效。
意外后果：因失去寬高等變量值而不顯示或變形；
應(yīng)用場(chǎng)景：
.item {
color: var(--my-var, red); /* Red if --my-var is not defined */
}技能七：彈性元素尺寸 min-height / min-width
背景：當(dāng)需求要求完整展示某個(gè)列表數(shù)據(jù)，但列表數(shù)據(jù)所占空間無(wú)法固定時(shí)，為避免部分內(nèi)容過(guò)寬、過(guò)高突破固定空間破壞布局，可以使用彈性尺寸 min-* 或者 max-* , 這樣能自動(dòng)適應(yīng)部分內(nèi)容所占空間過(guò)大或過(guò)小帶來(lái)的樣式美觀問(wèn)題；
意外后果：占用空間過(guò)大或過(guò)小，破壞布局或不美觀；
應(yīng)用場(chǎng)景：
.hero {
min-height: 350px;
}場(chǎng)景示例：
max-width的使用場(chǎng)景：
如果對(duì)每一個(gè)元素使用固定的width,則當(dāng)內(nèi)容空間大于容器尺寸時(shí)，將發(fā)生溢出，此時(shí)，需要使用min-width 限制最小寬度，當(dāng)超出尺寸時(shí)，能夠?qū)崿F(xiàn)自動(dòng)適配。
技能八：被遺忘的background-repeat
背景：使用圖片作為容器的背景圖，當(dāng)容器的尺寸大于圖片尺寸時(shí)，默認(rèn)背景圖會(huì)重復(fù)，如果你在開發(fā)中忽略了上述問(wèn)題，則會(huì)出現(xiàn)背景圖重復(fù)的問(wèn)題；
場(chǎng)景示例：
解決辦法：
代碼如下 ：
background-image: url('..');
background-repeat: no-repeat;解決后效果：
技能九：媒體查詢 @media
背景：媒體查詢的使用更像是CSS中的條件判斷，它會(huì)根據(jù)你定義的條件，當(dāng)條件滿足時(shí)，條件內(nèi)的樣式生效；
舉例：當(dāng)屏幕的寬度小于600px時(shí)，body背景色為紅色；當(dāng)屏幕寬度介于600-800px之間時(shí)，body背景色為黃色；當(dāng)屏幕寬度大于800px時(shí)，body的背景色為藍(lán)色；
示例代碼：
/* 將 body 的背景色設(shè)置為藍(lán)色 */
body {
background-color: blue;
}
/* 在小于或等于 800 像素的屏幕上，將背景色設(shè)置為黃色 */
@media screen and (max-width: 800px) {
body {
background-color: yellow;
}
}
/* 在 600 像素或更小的屏幕上，將背景色設(shè)置為紅色 */
@media screen and (max-width: 600px) {
body {
background-color: red;
}
}
demo鏈接如下：https://monageju.github.io/Blog/media.html
技能十：圖片上的文字
背景：當(dāng)需要在圖片上層展示文字時(shí)，如果圖片加載失敗，而外層容器的背景色和文字顏色接近，那么文字的展示效果就不理想；
舉例：容器背景設(shè)置為黑色，圖片為橙色，文字顏色為近黑色，當(dāng)圖片加載失敗時(shí)，文字的背景色直接變?yōu)槿萜鞯谋尘吧?，文字與容器背景色重合，示例如下；
解決后效果：
解決代碼：
.card__img {
background-color: #FFF;
}至此，即使圖片加載失敗，圖片上的問(wèn)題依然可以正常顯示；至于圖片加載失敗時(shí)左上角的“破圖”標(biāo)記，可以使用偽類進(jìn)行遮擋美化；
技能十一：合理使用滾動(dòng)條屬性
背景：當(dāng)容器的空間固定時(shí)，如果內(nèi)容超出容器，為正常顯示完所有內(nèi)容，同時(shí)不擴(kuò)展所占空間，會(huì)使用overflow屬性控制超出部分自動(dòng)滾動(dòng)展示，同時(shí)給與滾動(dòng)條樣式提示有剩余內(nèi)容，但如果該屬性使用不當(dāng)，會(huì)造成樣式很難看；
舉例：overflow屬性有兩個(gè)作用很相近的屬性值，一個(gè)是scroll, 另一個(gè)是auto; 這兩個(gè)屬性值都能實(shí)現(xiàn)當(dāng)內(nèi)容大于所占空間時(shí)滾動(dòng)展示，不同點(diǎn)在于使用scroll屬性無(wú)論內(nèi)容是否超出容器空間，都會(huì)展示滾動(dòng)條，而auto屬性會(huì)分辯條件，內(nèi)容超出時(shí)才會(huì)展示滾動(dòng)條，為超出時(shí)則會(huì)自動(dòng)隱藏，樣式上較為美觀；
解決代碼：
.box {
overflow-y: auto;
}場(chǎng)景示例：
技能十二：預(yù)留滾動(dòng)條空間，避免重排
背景：接技能十一，當(dāng)我們正確使用了overflow:auto就萬(wàn)事大吉了嗎？也不盡然。
設(shè)想這樣一個(gè)場(chǎng)景：有一個(gè)寬度100vw，高度為100vh的容器盒子，容器內(nèi)展示商品卡片，滑動(dòng)到頁(yè)面底部時(shí)，觸發(fā)滑動(dòng)加載，當(dāng)觸發(fā)懶加載時(shí)，容器內(nèi)商品卡片占用的高度已經(jīng)超出100vh，依據(jù)外層容器設(shè)置的overflow:auto，內(nèi)容超出時(shí)會(huì)展示滾動(dòng)條，滾動(dòng)條的出現(xiàn)，使得頁(yè)面不得不給滾動(dòng)條讓出一定的寬度，這個(gè)切換的場(chǎng)景中，由于不得不給滾動(dòng)條讓位置，最外層的元素發(fā)生了元素寬度變化，產(chǎn)生了重排的效果，有沒(méi)有可能避免這一次不必要的重排呢？答案是有的。
大家一定還記得vue的指令中有兩個(gè)很相像的指令v-if 和 v-show, 他們倆的原理和區(qū)別是什么？分別用在什么情景下？提醒到這，是不是有思路了？如果還沒(méi)有，那也沒(méi)關(guān)系，再提示一點(diǎn)點(diǎn)，既然要避免多余的一次重排，而滑動(dòng)加載又不可避免，如果我一開始就預(yù)留好滾動(dòng)條的位置，只是你看不見，到了滾動(dòng)條應(yīng)該出場(chǎng)的時(shí)候再讓你看見，是不是就能避免不必要的重排了呢？現(xiàn)在再想想，這是不是就是v-show指令的設(shè)計(jì)原理？
CSS中有一個(gè)scrollbar-gutter屬性，當(dāng)它的值設(shè)置為stable時(shí)，就能夠?qū)崿F(xiàn)上述的這種功能，代碼如下：
.box {
scrollbar-gutter: stable;
}舉例：
內(nèi)容較短時(shí)預(yù)留滾動(dòng)條空間，內(nèi)容超出時(shí)顯示滾動(dòng)條；
技能十三：圖片最大寬度
背景：當(dāng)給固定寬高容器設(shè)置背景圖時(shí)，如果背景圖尺寸超過(guò)容器寬高，圖片會(huì)溢出，因此，最好在項(xiàng)目的resetCss中按照以下屬性屬性初始化：
img{
max-width: 100%;
object-fit: cover;
}實(shí)例：
技能十四：粘性定位
說(shuō)明：position的粘性定位指的是通過(guò)用戶的滾動(dòng)，元素的position屬性在 position:relative 與 position:fixed 定位之間切換；這對(duì)于需要使用滾動(dòng)吸頂?shù)膱?chǎng)景非常方便；是典型的依據(jù)業(yè)務(wù)場(chǎng)景推動(dòng)CSS技術(shù)發(fā)展的典例；
技能十五：瀏覽器兼容性CSS請(qǐng)勿批量處理
說(shuō)明：根據(jù)W3C標(biāo)準(zhǔn)，批量分組選擇選擇器，如果分組中，其中一個(gè)無(wú)效，那么整個(gè)選擇器都將會(huì)失效。因此，在遇到瀏覽器兼容屬性時(shí)，切勿批量組合書寫；
實(shí)例:
如果是如下書寫方式，則該選擇器沒(méi)有任何問(wèn)題，因?yàn)樵摲纸M選擇器的所有選擇器都有效：
h1, h2, h3 { font-family: sans-serif }此時(shí)，它的作用等同于：
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }但如果，是下面這種情況就不同了：
input::-webkit-input-placeholder,
input:-moz-placeholder {
color: #222;
}
該選擇器使用了分組選擇器，在確定的某一個(gè)瀏覽器中，該分組中只有一個(gè)選擇器有效，而其他選擇都是失效狀態(tài)，根據(jù)規(guī)則，整個(gè)分組選擇器都將會(huì)失效，因此，正確的做法應(yīng)該是分開寫，代碼如下：
input::-webkit-input-placeholder {
color: #222;
}
input:-moz-placeholder {
color: #222;
}此時(shí)，其效果才是符合預(yù)期的。
四、結(jié)語(yǔ)
通常一個(gè)項(xiàng)目的穩(wěn)定性指的都是邏輯層穩(wěn)定和服務(wù)層穩(wěn)定，CSS是極其容易被忽視的一層；當(dāng)項(xiàng)目發(fā)生線上故障時(shí)，邏輯層和服務(wù)器可以通過(guò)日志查詢、抓包等手段定位，而CSS問(wèn)題則只能憑借經(jīng)驗(yàn)和項(xiàng)目所運(yùn)行環(huán)境進(jìn)行大致推斷，極難快速準(zhǔn)確定位問(wèn)題。在穩(wěn)定性建設(shè)時(shí)，CSS的書寫應(yīng)該遵循“瞻前顧后”的防御性寫法，盡可能的避免意外的邊界情況，這才是防御性CSS的真實(shí)價(jià)值。
當(dāng)前名稱：項(xiàng)目穩(wěn)定性治理思考：防御性CSS技能
網(wǎng)頁(yè)URL：http://www.5511xx.com/article/copidoi.html
