书名：CSS新世界
ISBN：978-7-115-56284-5
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 张鑫旭
责任编辑 刘雅思
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
本书是“CSS世界三部曲”的最后一部。这是一本关于CSS的进阶读物，专门讲CSS3及其之后版本的新特性。在本书中，作者结合自己多年的从业经验，讲解CSS基础知识，并充分考虑前端开发者的需求，以CSS新特性的历史背景为线索，去粗取精，注重细节，深入浅出地介绍了上百个CSS新特性。此外，作者专门还为本书开发了配套网站，用于书中实例效果的在线展示和问题答疑。
本书的所有内容都是作者经过深入思考和探索后提炼出来的，知识点多且内容丰富，注重技术细节、经验分享和解决问题的思路。本书的主要目标是帮助前端开发者突破CSS技能提升的瓶颈，非常适合具有一定CSS基础的前端开发者阅读。
“CSS世界三部曲”包括《CSS世界》《CSS选择器世界》和《CSS新世界》，本书是其中的第三部，也是最后一部。
CSS这门语言从CSS3开始就不断出现各种新特性，不专注于这个领域的前端开发者在面对这些新特性时一般都会备感困惑：首先是对很多可以用在实际项目中的很棒的新特性并不知晓；其次是对很多特性到底是糟粕还是精华并不确定；最后是以为对很多实用的CSS新特性很了解但其实只了解个大概，对很多潜藏的特性和有用的细节知识知之甚少。
本书的价值就在于帮助前端开发者节约时间。作为作者，我来研究和积累、实践和总结，而开发者只要保持学习的心态，反复阅读本书，就能在很短的时间内学到CSS的精华和细节，收获我10多年积累下来的经验和技巧。
尽管我从业10多年，已经是行业内的老人了，但我还是坚持在一线实践和探索，所谓“实践出真知”。因此，本书的内容并不是枯燥的文档或者教条的知识陈述，而是在大量实践和对CSS彻底深入理解的基础上积累的干货分享。正是因为我真正投身于这个领域，对CSS有足够的了解，才能以通俗易懂的方式把复杂的知识呈现出来。
CSS这门语言入门易、深入难，它与JavaScript相辅相成，且与用户体验关系极其密切。想要成为一名优秀的前端开发者，尤其是想成为用户体验领域的开发专家，本书绝对是你所需要的。
当然，如果你并不想成为什么专家，只想快速上手学一点儿CSS布局方面的知识，本书也非常适合你，因为我知道哪些特性是常用的，哪些特性是重要的，我会有的放矢地讲解，这样学比一板一眼地跟着文档学要轻松多了。
本书是一本CSS进阶书，适合有一定CSS基础的前端开发者学习，新手学起来可能会有一些吃力。为了精炼内容，过于基础的知识我会直接略过不讲。
本书融入了大量的个人理解，这些理解是我根据自己多年对CSS的研究和思考，经过个人情感润饰和认知提炼加工的产物。因此，与一般技术书相比，本书会显得更有温度、更有情怀。但是，人非圣贤，个人的理解并不能保证百分之百正确，欢迎业内同行提出宝贵意见和建议。
我专门为本书制作了一个网站（https://www.cssworld.cn），读者可以通过这个网站了解更多“CSS世界三部曲”的相关信息。如果你有疑问或者要提交勘误信息，欢迎你到官方论坛https://bbs.cssworld.cn/对应板块提问或反馈，也欢迎你添加微信号“zhangxinxu-job”与我直接沟通交流。
衷心感谢人民邮电出版社。
感谢人民邮电出版社的杨海玲编辑，她的专业建议对我帮助很大，她对细节的关注令人印象深刻，她使我的工作变得更加轻松。
感谢致力于提高整个前端行业CSS水平而默默努力的优秀人士，感谢在我成长路上为我指出错误的前端行业的同仁，你们让我在探索CSS的道路上可以走得更快、更踏实。
感谢读者，你们的支持给了我写作的动力。
最后，最最感谢我的妻子丹丹，没有她的爱和支持，本书一定不会完成得如此顺利。
本书由异步社区出品，社区（https://www.epubit.com/）为您提供相关资源和后续服务。
本书提供如下资源：
要获得以上配套资源，请在异步社区本书页面中点击
，跳转到下载页面，按提示进行操作即可。注意：为保证购书读者的权益，该操作会给出相关提示，要求输入提取码进行验证。
作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。
当您发现错误时，请登录异步社区，按书名搜索，进入本书页面，点击“提交勘误”，输入勘误信息，点击“提交”按钮即可（见下图）。本书的作者和编辑会对您提交的勘误信息进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。
本书责任编辑的联系邮箱是liuyasi@ptpress.com.cn。
如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。
如果您有兴趣出版图书、录制教学视频或者参与技术审校等工作，可以直接发邮件给本书的责任编辑。
如果您来自学校、培训机构或企业，想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。
如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接通过邮件发给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。
“异步社区”是人民邮电出版社旗下IT专业图书社区，致力于出版精品IT图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于2015年8月，提供大量精品IT图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网https://www.epubit.com。
“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社近30年的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的LOGO。异步图书的出版领域包括软件开发、大数据、AI、测试、前端、网络技术等。
异步社区
微信服务号
无论是学习一类应用技术，还是学习一门开发语言，对所学之物有一个清晰的整体认知都是非常重要的，因为准确清晰的认知能够让你抓住学习的精髓，明确学习的方向，从而更加游刃有余地学习。所以，在正式开启CSS新世界的大门之前，首先要让大家了解一下CSS新世界诞生的背景和CSS新世界的整体变化。这样在之后的学习过程中，你就会明白为什么会有这个CSS属性，以及为什么这个CSS属性要这样设计。
我在《CSS世界》一书中反复强调过，CSS2.1中的CSS属性的设计初衷是展示图文。因为在CSS2.1时代，互联网刚刚兴起，计算机硬件、网络带宽等基础设施都比较薄弱。例如：
迫于当时的环境，Web页面只能显示图文内容，而图文内容的显示并不需要特别复杂的布局。所以，严格来说，CSS2.1并没有专门的与布局相关的CSS属性。
后来的事情大家也看到了，Ajax技术的兴起让电子商务和社交网站这样的大型网站系统开始崛起，交互和布局都越来越复杂，但是CSS并没有跟着进步，怎么办呢？没有办法，只能充分挖掘已有CSS的潜力，看看能不能实现复杂的布局。于是，大家会看到很奇怪的现象，如float属性，明明设计这个CSS属性的初衷是实现简单的文字环绕效果，结果最后这个CSS属性居然成了实现网站布局的中流砥柱。
由于CSS发展滞后，已经无法满足产品开发需求，因此扩展CSS2.1的功能势在必行，于是有了后来的CSS3。从这一点可以看出，CSS3及其以后版本的新特性（下面均称为CSS新特性）都是根据当下具体的Web场景来设计的，这里所说的Web场景包括用户的设备情况、用户的产品需求等。
很具有代表性的例子就是环境变量函数env()。这个函数的出现是因为iPhone X等设备顶部的“刘海儿”和底部的触摸横条会和页面内容冲突，所以需要env()函数给网页设置安全距离。要是把时间拨回到几年前，再怎样开动脑筋都预料不到会出现这样一个函数。但是它就是出现了，就因为手机设备的变化和浏览器及时的支持。env()函数的草案在2018年8月才制定，在1年多的时间内，就可以在移动端放心使用它了。
又比如说CSS布局，大家肯定不知道，Multi-column多栏布局的第一版规范居然是在1999年6月制定的，比弹性布局早了整整10年。我们仅从规范制定的时间就可以推断Multi-column多栏布局和CSS中的float属性一样，它们都是为图文排版布局服务的，因为1999年的时候复杂布局还不是强需求，图文内容展示才是主要的用户需求。
我根据应用场景的类型将CSS新特性划分为下面4个方向：
本书的内容也均是围绕这4个方向展开的。
下面再说一说CSS新特性的另外一个特点，那就是语法更加复杂，但是理解更加简单。在CSS2.1的世界中，很多CSS属性虽然语法很简单，但是要理解渲染出来的样式表现，可是要花费大功夫的。除盒模型、块级格式化上下文、包含块等CSS特有的概念增加了学习成本之外，更重要的是下面两个原因。
（1）CSS2.1中CSS属性主要为图文排版服务，而图文排版是有一定难度的，更不用说是在英语框架体系下的排版设计了。这就导致中文开发者无法轻松理解一些样式表现，例如图文元素默认的基线对齐，这个“基线”就是英语中特有的概念。
（2）CSS属性用在了远离设计本意的场景中。例如之前提到的Float布局，很多人都不明白为什么容器元素的高度会塌陷，这是因为CSS的float属性的设计初衷本来就不包括将该属性用在模块布局上。
CSS新特性则不一样，其语法设计非常明确，布局相关的CSS特性就用来布局，视觉表现相关的CSS特性就用来实现视觉效果，背后没有其他看不见的CSS特性互相干涉。只要记住了语法，就不会出现意料之外的渲染场景。
但是，这并不表示学习CSS新特性就很容易，因为简洁明了的语法是牺牲CSS属性的数量换来的，也就是理解成本降低了，但是记忆的成本提高了。例如，网格布局中共有27个完全不同的CSS属性，其中还有网格布局专用的CSS函数和单位，想要学透网格布局是要下苦功的。
最后，总结一下，CSS新特性是跟随时代发展而产生的，旨在构建更加丰富的Web应用程序。CSS新特性分工很细，这带来的好处是让语法理解起来更简单，但是这些CSS特性属性种类更复杂，我们需要记住很多CSS特性，本书会详细介绍的CSS特性就不止100个。
CSS世界已经有了CSS2和CSS3，那会有CSS4吗？
答案是：不会有CSS4！实际上，现在连CSS3这个词都已经名存实亡了，因为CSS3已经解体了。
为什么说CSS3解体了呢？
因为CSS按照大版本的方式进行迭代实在是太低效了。低效的原因其实很好理解，如果CSS这门语言必须按照大版本迭代发布的话，只要其中一个版本有一个CSS特性存在极大的争议，那这个版本的CSS的发布时间就会延后。例如，CSS2.1的规范在2002年开始制定，而一直到2011年才成为推荐规范，整个过程足足花费了10年的时间，就是因为一些次要的CSS特性拖了后腿。
在Web前端领域，新技术的发展十分迅速，而CSS的规范又是基于当前环境制定的。如果CSS的规范从开始制定到最终浏览器完全支持需要横跨很多年，保不准这个CSS新特性很快就过时了，或者开发者都约定俗成使用其他方案替代实现了，那之前辛苦做的工作就白费了。CSS这门语言的竞争力和潜力也会因此下降，因为不能快速响应时代变化的语言不是一门好语言。
为了加速没有争议的CSS特性的标准化，W3C的CSS工作组做出了一项被称为“Beijing doctrine”的决定，该决定将CSS划分为更小的组件，并把这些组件称为模块。这些模块互相独立，各自按照自己的速度走向标准化。例如，CSS选择器模块已经到了Level 4了，弹性布局模块还是Level 1。
将CSS划分为独立的模块是一个非常明智的决定，浏览器厂商可以根据对自己需求的判断决定究竟对哪些模块进行支持，哪怕这个模块还处于草案状态。例如CSS的env()函数的规范还是草案状态，但是Chrome和Safari浏览器的厂商却快速响应，对其进行了支持。对开发者而言，如此迅速地支持新特性犹如一场及时雨。
近几年，浏览器陆续支持一个又一个新的CSS特性，这已经成为一种常态。得益于CSS这种模块化的划分，以及浏览器厂商的积极支持，我们可以非常及时地使用这些CSS新特性来让我们的Web应用程序变得更丰富多彩，毕竟有很多内部的项目是不需要考虑兼容性问题的。
当然，这种模块化的设计也不是没有弊端，最大的问题就是设计冗余。例如，弹性布局和网格布局中的对齐属性其实可以统一，但它们却是分离的，这就会徒增学习成本；分栏布局、弹性布局和网格布局中的间隙其实可以统一，但它们也都是分离的，各有各的间隙属性。好在纠正及时，现在这三大布局全部开始改用gap属性表示间隙，减少了因为模块化带来的设计冗余。
模块化策略带来的好处远远大于弊端，正所谓瑕不掩瑜，与带来的好处相比，模块化设计的弊端几乎可以忽略不计。从这个角度看，CSS2.1之后的CSS世界就是模块化的新世界，所以我称之为CSS新世界。这个CSS新世界带来了新的CSS属性，并让很多CSS2中模糊的概念有了明确的定义，如尺寸体系、逻辑属性、CSS值类型划分等。CSS新世界中各模块虽然发展独立，但是相互间还是有很多共性和联系的。因此，CSS新世界不仅是一个模块化的世界，还是一个缤纷多彩，同时又自成一体的严谨的世界。
最后，本书和《CSS世界》相互补充，《CSS世界》中讲解的都是CSS2.1的知识，本书讲解的都是CSS2.1之后的知识，再加上《CSS选择器世界》，这3本书中的内容一起构成CSS这门语言的完整面貌。
