防御式 CSS 精讲--掘金小册课程推荐/优惠

作者介绍

大漠，W3CPlus 创始人，《现代 Web 布局》、《防御式 CSS 精讲》、《现代 CSS》、《Web 动画之旅》和《深入浅出 SVG》小册作者，曾就职于淘宝。对 HTML、CSS 和 A11Y 等领域有一定的认识和丰富的实践经验。CSS 中国布道者，2014 年出版《图解 CSS3：核心技术与案例实战》。

小册介绍

稍微老一点的前端工程师都应该知道，过去并没有“前端”的说法，而是叫重构（有的公司称为重构工程师，有些人自嘲是“切图仔”），主要工作内容是还原 UI 界面 ，即编写 HTML 结构（具有语义化的 HTML 结构）、编写 CSS（具有扩展性，可维护性）和切图等。 随着技术不断的革新，开发者面对的场景越来越复杂，比如复杂的交互、各式各样的终端、丰富的 UI 效果等，才慢慢演化出了“前端”的说法。

不管是之前的重构工程师，还是现在的前端工程师，他们面对的都是用户和设计师两个群体，将设计师的意图还原出来，以最好的一面呈现给用户。

设计师提供的设计稿是一种静态的产物，虽然优秀的设计师会在他的设计稿中展示出 UI 多态下的形态（表现形式），但他无法把动态数据完美地在设计稿中展示出来。而 Web 页面在客户端中展示时，面对的情况会很复杂，比如数据是动态的、设备是多样的等等，这些变化都会增加 CSS 出问题的概率，如果 Web 开发者在还原 UI 的时候，仅仅是按照一比一还原设计稿的话，就会产生很多问题（埋雷）。

面上展现出来的问题是最容易发现的，比如说，布局乱了、UI 不对、没有展示出来等等，还有一些问题是 Web 开发者无法定位和排除的，甚至有很多 Web 应用会带着“病态”上线，这些都非常影响用户体验。

@克军老师曾经这样说过：

从前端技术的根本价值出发，实现高可用性的产品用户界面，是用户体验的第一道关，这就跟 CSS 开发者的专业性紧密相关了。我认为体现 CSS 开发专业性看的就是防御式 CSS 开发。

如何使自己构建的 UI 或编写的 CSS 代码更具防御性（健壮性），确保还原的 UI 在不同的条件下都能工作， 不打破 Web 布局或 Web UI，是每个专业的 Web 前端开发者必备的技能。

好和坏的区别，往往就是一行代码的问题。遵循“万一”心态，即提前考虑一些特殊情况，对简单代码也保持警惕，会让你的 CSS 变得更健壮，更具防御性。

当然，大多数 Web 开发者并非不重视这些问题，只是不知道问题会出在哪，只有不断地踩坑和填坑，甚至很多时候会使自己陷入到很多想不到的问题中，苦不堪言。

基于此，我设计了这门课。结合我自己在 CSS 领域多年深耕的经验，总结出容易出现特殊情况的几种场景，包括：布局、UI 效果、媒体对象、交互体验等。

【高清大图请点击此处 链接 查看】

在这本小册中，我会把每个角度细化出来，保持我自己的图文加案例实战的风格进行精讲，解析其中的原因和规避问题的方法。

大家在学习这个课程时，可以随机挑选学习，因为每篇都是 CSS 中独立的知识点，它可以帮助你快速定位和排查 CSS 相关的问题，大家可以把这本小册当作是 CSS 技巧集合或 CSS 魔法集合！

你会学到什么？

• 编写健壮 CSS 代码的技巧集
• 定位和排查 CSS 问题的方法
• 深入细节，扫清 CSS 知识盲区
• 掌握防御式 CSS 理念和知识体系

适宜人群

适用于 Web 开发者，对 CSS 有认知，最好是具有 1 ~ 2 年开发经验的同学，以及希望更好提高自己的 CSS 能力，还有如何快速定位和排查 CSS 带来的问题。

名人推荐

• 固定网格轨道尺寸给 Web 布局带来的局限性

• Flexbox 和 Grid 中的换行

• 布局中的滚动失效和默认拉伸

• 如何根据 UI 形式选择视觉盒模型？

• Web 中的阴影

• Flexbox 和 Grid 中的最小内容尺寸

• Web 中的边框

• 如何灵活设置元素之间的间距？

• position: sticky 失效与修复

• 你不知道的 border-radius

• CSS 如何改善滚动体验

• 响应式图片：防止图片的拉伸或挤压

• 如何提高图片上文本的可读性？

• 你不知道的 CSS 渐变

• Web 图片：你不应该遗忘的 CSS 技巧

• 图片的裁剪术

• 条件 CSS 之 @规则和 CSS 选择器

• CSS 的滚动捕捉

• 美化滚动条 UI：自定义滚动条 UI

• 使用逻辑属性来替代物理属性

• 易碎的容器盒子：避免使用固定尺寸和长内容设置

• 多语言 Web 应用需要注意的细节

• CSS 的黑魔法

• z-index 失效与修复

• 重新思考 Web 中的裁剪：CSS 还是 SVG？

• 溢出常见问题与排查

• 条件 CSS 之 CSS 属性/值和 CSS 函数

• 推荐序｜克军：写好 CSS 是需要经验的