社区编辑申请
注册/登录
项目稳定性治理思考:防御性CSS技能
开发 新闻
通常一个项目的稳定性指的都是逻辑层稳定和服务层稳定,CSS是极其容易被忽视的一层。

一、概念解释

防御性CSS,防的是谁?我把他总结为:一切使表现和行为偏离预期效果的情景。出现这些场景的原因是因为终端环境的多样化,开发及测试用例只能覆盖大多数使用场景,在其他环境下,解析机制差异、内容动态变化等,都是导致非预期效果的原因。

二、防御的必要性

防御性CSS不仅仅是为了兼容其他少数场景,避免边界情况,更大的价值在于提升团队协作的可能性。防御性CSS的意义类似JS中的try...catch, 他可能无法缩短需求开发的时间,但却是你程序正确运行和稳定运行的最后一道防线,更何况JS的错误只有在用户交互后才有感知,而CSS一旦出错,直接赤裸裸的展现在用户面前,直接影响用户的使用率和留存率。

都说编程风格分为三种:能跑就行风格、中规中矩风格、锦上添花风格。能跑就行风格代表的是:每一个设定和判断都和当次需求贴合的严丝合缝,如同山羊走钢丝,摇摇欲坠,但就是不倒,不得不令人称奇,但这种风格,不仅对编程人员要求极高,而且十分不利于团队协作,一旦意料意外的情景发生或者需求变更,带来的是雪崩式的改动;中规中矩风格概述为,该写注释的地方写注释,该写思路的地方写自己这么做的理由,该兜底处理的地方做拦截处理,程序的鲁棒性和可维护性直接拉满;万无一失风格更多的像是处女座,追求极致和完美,在中规中矩风格上再增一抹亮色,年轻时候的“雷布斯”就是典型代表。防御性CSS的目的就是从技术上尽可能的改变编程者能跑就行的侥幸心理,提升项目的可用性和可维护性。其目的也可以归纳为让你的项目做到:跑起来不出错,改起来不骂人。

防御性CSS的作用是对常规CSS的兜底,是实现项目稳定性建设重要但极其容易被忽视的一环。

三、防御技能

技能一:flex-wrap

属性背景:flex-wrap是flex布局中的属性,其作用是控制flex容器内元素所占空间超出flex容器空间时是否折行。

防御原因:flex-wrap属性默认是不折行,容易忽略多元素溢出兜底;为兜底,请设置flex-wrap: wrap;

意外后果:内部元素被裁剪,或flex容器出现滚动条;

应用场景:

1)开发中flex容器空间够用,但小尺寸屏幕会溢出;

2)内容由服务端下发,元素个数无法提前预支,超于预期时导致flex容器出现滚动条或内部元素被裁剪;

代码:

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

示例场景

技能二:margin间距

属性背景:margin作用是调整元素的外边距。用于指定元素与周围空间的距离关系。

防御原因:防止元素与元素之间挤压空间,造成重叠等情况;

意外后果:元素重叠或被挤压;

应用场景:

1)内容所占空间无法保证与其他元素不存在挤压的场景;

代码:

.section__title {
margin-right: 1rem;
}

示例场景

技能三:长文本处理

背景:当文本长度超出容器时,该如何显示。

意外后果:文本折行,样式不统一;

应用场景:

1)要求列表表现一致但文本长度不可控;

此处假设与设计最终商定,超出部分以省略显示,那么,意外兜底的样式代码为:

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

场景示例:

技能四:防止图像被拉伸或压缩

背景:通常,服务器下发的图片尺寸以及用户自定义上传的图片,显示在页面时,不可能百分百与容器尺寸贴合,不可避免的会遇到图片的放缩处理。

意外后果:图像被拉伸或压缩;

应用场景:

1)服务端下发多种不确定尺寸的图片;

2)用户自定义上传图片且需要预览和编辑;

.card__thumb {
object-fit: cover;
}

demo链接:https://monageju.github.io/Blog/object_fit.html

场景示例:

技能五:锁定滚动链接

背景:overscroll-behavior是overscroll-behavior-x和overscroll-behavior-y的简写属性,它控制的是元素滚动到边界时的表现。换个能听得懂的说法:在JS世界里,有事件冒泡机制,你可以通过event的stopPropagation方法去阻止冒泡的发生,同样,在CSS世界里,滚动也有冒泡机制,当内部元素滚动到边界时,如果继续滚动,会带动外层祖先元素发生滚动,这种现象被称为滚动链,为了方便记忆,你也可以把他形象的记忆为滚动冒泡。而overscroll-behavior这个属性,就是类似event的stopPropagation方法阻止冒泡事件一样,提供给开发者去控制内层元素是否可以发生”冒泡“带动外层元素滚动的属性。

意外后果:”滚动冒泡“ 或  ”滚动穿透“;

应用场景:

1)页面存在多层滚动元素,需要单独控制每层滚动是否引起外层滚动;

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

demo链接:https://monageju.github.io/Blog/overscroll_behavior.html

场景示例:如demo链接示例

拓展:

理解了overscroll-behavior属性的作用,现在我们来看点拓展的东西:

首先来看下overscroll-behavior的属性值有哪些:

overscroll-behavior 属性有 3 个值:

auto - 默认。元素的滚动会传播给祖先元素。

contain - 阻止滚动链接。滚动不会传播给祖先,但会显示元素内的原生效果。例如,Android 上的炫光效果或 iOS 上的回弹效果,当用户触摸滚动边界时会通知用户。注意:overscroll-behavior: contain 在 html 元素上使用可防止滚动导航操作。

none - 和 contain 一样,但它也可以防止节点本身的滚动效果(例如 Android 炫光或 iOS 回弹)。

这里有两个效果:一是下拉刷新,二是炫光回弹,这里有个demo可以看到具体效果:链接传送门

下拉刷新是原生支持的功能,如果项目要求自定义下拉刷新效果,除了要考虑如何实现自定义,还要考虑如何去掉默认原生下拉刷新,否则就会出现两个并存的下拉刷新,而去掉原生的下拉刷新也很简单,只需要在 body 或 html 元素添加如下代码:

body {
/* 禁用滚动冒泡,但是依然可以进行下拉刷新和炫光和回弹效果以及滑动导航 */
overscroll-behavior-y: contain;
}

至于禁用炫光和回弹效果,其实是应用overscroll-behavior属性的none属性值,具体代码如下:

body {
/* 禁用默认的下拉刷新和炫光和回弹效果,但是依然可以进行滑动导航 */
overscroll-behavior-y: none;
}

除了上述描述的两个效果,其实还有一个效果:手势导航,如左滑退出及右滑前进功能;而如果要禁用手势导航,可以使用如下代码:

body {
/* 禁用滑动导航 */
overscroll-behavior-x: none;
}

技能六:CSS变量默认值

背景:CSS变量可以实现动态控制元素属性,但是当CSS变量未定义或无效时,造成变量值异常,此时,元素的样式将会脱离预期,而变量默认值可以实现异常兜底,保证变量值异常时页面依然能运行。需要额外说明的是,备用值并不是用于实现浏览器兼容性的。如果浏览器不支持CSS自定义属性,备用值也没什么用。它仅对支持CSS自定义属性的浏览器提供了一个备份机制,该机制仅当给定值未定义或是无效值的时候生效,函数的第一个参数是自定义属性的名称。如果提供了第二个参数,则表示备用值,当自定义属性值无效时生效。

意外后果:因失去宽高等变量值而不显示或变形;

应用场景:

.item {
color: var(--my-var, red); /* Red if --my-var is not defined */
}

技能七:弹性元素尺寸 min-height / min-width

背景:当需求要求完整展示某个列表数据,但列表数据所占空间无法固定时,为避免部分内容过宽、过高突破固定空间破坏布局,可以使用弹性尺寸 min-*  或者  max-*  , 这样能自动适应部分内容所占空间过大或过小带来的样式美观问题;

意外后果:占用空间过大或过小,破坏布局或不美观;

应用场景:

.hero {
min-height: 350px;
}

场景示例:

max-width的使用场景:

如果对每一个元素使用固定的width,则当内容空间大于容器尺寸时,将发生溢出,此时,需要使用min-width 限制最小宽度,当超出尺寸时,能够实现自动适配。

技能八:被遗忘的background-repeat

背景:使用图片作为容器的背景图,当容器的尺寸大于图片尺寸时,默认背景图会重复,如果你在开发中忽略了上述问题,则会出现背景图重复的问题;

场景示例:

解决办法:

代码如下 :

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

解决后效果:

技能九:媒体查询 @media

背景:媒体查询的使用更像是CSS中的条件判断,它会根据你定义的条件,当条件满足时,条件内的样式生效;

举例:当屏幕的宽度小于600px时,body背景色为红色;当屏幕宽度介于600-800px之间时,body背景色为黄色;当屏幕宽度大于800px时,body的背景色为蓝色;

示例代码:

/* 将 body 的背景色设置为蓝色 */
body {
background-color: blue;
}

/* 在小于或等于 800 像素的屏幕上,将背景色设置为黄色 */
@media screen and (max-width: 800px) {
body {
background-color: yellow;
}
}

/* 在 600 像素或更小的屏幕上,将背景色设置为红色 */
@media screen and (max-width: 600px) {
body {
background-color: red;
}
}

demo链接如下:https://monageju.github.io/Blog/media.html

技能十:图片上的文字

背景:当需要在图片上层展示文字时,如果图片加载失败,而外层容器的背景色和文字颜色接近,那么文字的展示效果就不理想;

举例:容器背景设置为黑色,图片为橙色,文字颜色为近黑色,当图片加载失败时,文字的背景色直接变为容器的背景色,文字与容器背景色重合,示例如下;

解决后效果:

解决代码:

.card__img {
background-color: #FFF;
}

至此,即使图片加载失败,图片上的问题依然可以正常显示;至于图片加载失败时左上角的“破图”标记,可以使用伪类进行遮挡美化;

技能十一:合理使用滚动条属性

背景:当容器的空间固定时,如果内容超出容器,为正常显示完所有内容,同时不扩展所占空间,会使用overflow属性控制超出部分自动滚动展示,同时给与滚动条样式提示有剩余内容,但如果该属性使用不当,会造成样式很难看;

举例:overflow属性有两个作用很相近的属性值,一个是scroll, 另一个是auto; 这两个属性值都能实现当内容大于所占空间时滚动展示,不同点在于使用scroll属性无论内容是否超出容器空间,都会展示滚动条,而auto属性会分辩条件,内容超出时才会展示滚动条,为超出时则会自动隐藏,样式上较为美观;

解决代码:

.box {
overflow-y: auto;
}

场景示例:

技能十二:预留滚动条空间,避免重排

背景:接技能十一,当我们正确使用了overflow:auto就万事大吉了吗?也不尽然。

设想这样一个场景:有一个宽度100vw,高度为100vh的容器盒子,容器内展示商品卡片,滑动到页面底部时,触发滑动加载,当触发懒加载时,容器内商品卡片占用的高度已经超出100vh,依据外层容器设置的overflow:auto,内容超出时会展示滚动条,滚动条的出现,使得页面不得不给滚动条让出一定的宽度,这个切换的场景中,由于不得不给滚动条让位置,最外层的元素发生了元素宽度变化,产生了重排的效果,有没有可能避免这一次不必要的重排呢?答案是有的。

大家一定还记得vue的指令中有两个很相像的指令v-if 和 v-show, 他们俩的原理和区别是什么?分别用在什么情景下?提醒到这,是不是有思路了?如果还没有,那也没关系,再提示一点点,既然要避免多余的一次重排,而滑动加载又不可避免,如果我一开始就预留好滚动条的位置,只是你看不见,到了滚动条应该出场的时候再让你看见,是不是就能避免不必要的重排了呢?现在再想想,这是不是就是v-show指令的设计原理?

CSS中有一个scrollbar-gutter属性,当它的值设置为stable时,就能够实现上述的这种功能,代码如下:

.box {
scrollbar-gutter: stable;
}

举例:

内容较短时预留滚动条空间,内容超出时显示滚动条;

技能十三:图片最大宽度

背景:当给固定宽高容器设置背景图时,如果背景图尺寸超过容器宽高,图片会溢出,因此,最好在项目的resetCss中按照以下属性属性初始化:

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

实例:

技能十四:粘性定位

说明:position的粘性定位指的是通过用户的滚动,元素的position属性在 position:relative 与 position:fixed 定位之间切换;这对于需要使用滚动吸顶的场景非常方便;是典型的依据业务场景推动CSS技术发展的典例;

技能十五:浏览器兼容性CSS请勿批量处理

说明:根据W3C标准,批量分组选择选择器,如果分组中,其中一个无效,那么整个选择器都将会失效。因此,在遇到浏览器兼容属性时,切勿批量组合书写;

实例:

如果是如下书写方式,则该选择器没有任何问题,因为该分组选择器的所有选择器都有效:

h1, h2, h3 { font-family: sans-serif }

此时,它的作用等同于:

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

但如果,是下面这种情况就不同了:

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

该选择器使用了分组选择器,在确定的某一个浏览器中,该分组中只有一个选择器有效,而其他选择都是失效状态,根据规则,整个分组选择器都将会失效,因此,正确的做法应该是分开写,代码如下:

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

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

此时,其效果才是符合预期的。

四、结语

通常一个项目的稳定性指的都是逻辑层稳定和服务层稳定,CSS是极其容易被忽视的一层;当项目发生线上故障时,逻辑层和服务器可以通过日志查询、抓包等手段定位,而CSS问题则只能凭借经验和项目所运行环境进行大致推断,极难快速准确定位问题。在稳定性建设时,CSS的书写应该遵循“瞻前顾后”的防御性写法,尽可能的避免意外的边界情况,这才是防御性CSS的真实价值。

责任编辑:张燕妮 来源: 前端进阶指南
相关推荐

2022-05-20 14:54:33

数据安全数字化转型企业

2022-05-09 11:57:39

云原生实践安全

2022-05-25 16:52:55

数据智能瑞数信息API

2022-05-11 14:48:33

腾讯云寿险民生保险

2022-05-09 11:19:12

CSS函数开源

2022-05-17 15:51:32

数据中心运维能力基础设施

2022-05-13 11:24:09

数据美团

2022-05-19 14:57:30

CSS代码工具

2022-05-03 23:21:13

安全意识网络安全网络钓鱼

2022-05-25 10:04:43

Go编程

2022-05-11 14:05:11

区块链网络安全存储

2022-05-26 10:57:51

机器人人工智能

2022-05-17 08:39:05

VueViteTypeScript

2022-05-24 10:27:39

博云容器云运维

2022-05-11 15:08:52

驱动开发系统移植

2022-05-24 09:57:32

微软开源AI 驱动

2022-05-24 12:05:36

Testin云测试

2022-05-25 10:49:02

云存储云计算

2022-05-23 09:18:55

RocketMQ存储中间件

2022-05-24 14:26:11

云原生数据库云架构

同话题下的热门内容

突发!Gitee宣布仓库开源必须人工审核,「中国Github」要无了?让程序员心动的11种新编程语言风口上的低代码,技术人需要考虑哪些?中国首位游戏设计博士黄石:今日之技术即未来之艺术!所有技术都在加速发展Flutter vs ReactJS:2022年应该选哪个?用不同的测试模型来构建测试套件Linux容器技术的实现原理再有人问你什么是分库分表,直接把这篇文章发给他

编辑推荐

2017年9月编程语言排行榜:Java、C与C++三巨头还能统治排行榜多久?2017年最受欢迎的5个前端框架比较2017年11月编程语言排行榜:脚本语言怎么了?2017年3月编程语言排行榜:Swift首次进入前十最近租房有点烦!技术人如何用Python找到称心如意的“小窝”?
我收藏的内容
点赞
收藏

51CTO技术栈公众号