CSS的一些新东西

很多同学估计都有类似的问题，怎么才能第一时间获取到有关于CSS相关的新特性呢？有关于这个问题，并不是一个很复杂的问题

如何理解规范的形成

任何一个规范的形成都是一个漫长的过程，到目前为止，W3C对Web标准制定的Web标准和草案接近1161个，包括WD、 CR、 PR、 PER、REC、 ret和 Note 这 7 种：

• WD（Working Draft 工作草案）：不稳定也不完整。目的是创建当前规范的一个快照，也能征求 W3C 和公众的意见
• CR （Candidate Recommendation 候选推荐标准）：所有的已知 issues 都被解决了，向 implementor 征集实现；AC 正式审查，可能有三种结果：成为标准、返回工作组继续完善、废弃(此阶段的很有可能成为标准，且如有改动，则需给出改动原因)
• PR （Proposed Recommendation 提案推荐标准）：从CR到PR需要全面的 test suite 和实现报告，以证明每个特性都在至少2款浏览器里实现了，意味着其质量足以成为REC。此时，W3C 成员再最后一次 review 下规范(一般不会有实质性的改动；若有，则只能再发布一个新的WD或CR)
• PER （Proposed Edited Recommendation 已修订的提案推荐标准）
• REC （Recommendation 推荐标准，通常称之为 standard，即事实标准）：此时，就不会有太多变动了，当然依然可以收勘误。它可能成为:Edited Recommendation 编辑推荐标准。微小改动，然后生成推荐的 Revised Edition；Amended Recommendation 修订推荐标准。不增加新功能的实质性更改；SPSD Superseded Recommendation 被取代的推荐标准（缺少足够的市场相关性）
• ret （Retired 退役的)
• Note （Group Note 工作组说明）：不打算成为标准的文档。已经停止使用了。通常记录规范以外的信息，eg.规范的用例及其最佳实践、解释规范被弃用的原因

对于CSS的每项规范大致都会经历以下几个过程：

• 编辑草案(ED)：这是一项规范的初始阶段，可能非常粗糙。对这个阶段没有什么要求，也不保证它会被工作组批准。但它也是各个修订版本的必经阶段，每次变更都是先从一个 ED 中产 生的，然后才会发布出来
• 首个公开工作草案(FPWD)：一项规范的首个公开发布版本，它应该准备就绪，以接受工作组的公开反馈
• 工作草案(WD)：在第一个 WD 之后，还会有更多的 WD 出来。 这些 WD 会吸收来自工作组和更广阔的社区的反馈，一版接着一版小幅改进。浏览器的早期实现通常是从这个阶段开始的，厂商基本不太可能对更早阶段的草案提供实验性的支持
• 候选推荐规范(CR)：这可以认为是一个相对稳定的版本。此时比较适合实现和测试。一项规范只有具备一套完整的测试套件和两个独立的实现之后，才有可能继续推进到下一阶段
• 提名推荐规范(PR)：这是 W3C 会员公司对这项规范表达反对意见的最后机会。实际上他们很少在这个阶段提出异议，因此每个 PR 推进到下一阶段(也是最后一个阶段)只是时间问题
• 正式推荐规范(REC)：一项 W3C 技术规范的最终阶段

用W3C上的一张图来简要的向大家展示一下一个CSS属性诞生的历程：

image

版本之争

随着前端社区开始有介绍CSS Selectors Level 4相关的文章开始，很多人把这个称之为CSS4选择器，也在说CSS3还未成为规范，CSS4就要来了，真心学不动了。为此@Rachel Andrew特别花了一点时间阐述了：

CSS发展至今，将不会有CSS版本之称，只会有模块的Level一说

有关于这个话题，早在2016年@Rachel Andrew特意写了一篇文章《Why there is no CSS4 - explaining CSS Levels》做出相关的解释。

想想，这就是我与大神之间的差距！

由于CSS 的各个模块在近些年里以不同的速度在推进，我们已经越来越难以把这些规范以CSS3、CSS4这样的方式来划分了，而且这样也难以被大众理解和接受。

所以，大家以后不要再把CSS按CSS3或者CSS4来称谓了，我们应该改变以前的习惯，按功能模块发布的版本号来称呼他们。这样才不会给别人造成误解或困惑！

CSS 的一些新东西

• CSS Grid Layout & Subgrid
• CSS Box Alignment
• Gap
• Intrinsic Sizing Keywords
• Scroll Snap
• Scrollbars
• Shapes
• Conic Gradients
• Aspect Ratio Units
• Exclusions
• CSS Houdini
• Meet Feature Queries

接下来简单的聊一下，如果要深入的聊，估计都足够写本书来聊了。

CSS Grid Layout & Subgrid

CSS Grid Layout到目前为止已经有Level 1和Level 2两个版本。而Subgrid是属于CSS Grid Layout Level 2中的一部分。CSS Grid Layout中的很多特性都得到了很多主流浏览器的支持，而且@Rachel Andrew预计在2019年将会成为主流布局方式之一。话又说回来，CSS Grid Layout能这么成熟和得到浏览器的支持，离不开@Rachel Andrew的功劳，因为她一直在推进该特性的向前发展。

CSS Grid Layout对于开发者而言是一件好事，他将改变Web布局的模式，因为在CSS Grid Layout之前的布局模式都是一维布局，只有Grid是二维布局。Grid很强大，但其涉及到相关概念也特别的多，如果要彻底的了解或掌握她，还是需要花不少的时间去学习。当然最好是能多写一些案例。有关于这方面的介绍，这里就不做过多的详细介绍，感兴趣的话可以阅读站上有关于CSS Grid Layout相关的文章。

CSS Box Alignment

CSS Box Alignment目前是Level 3，主要用于控制各种布局方法中项目是如何对齐的。由于不同布局方法在对齐方面有不同的约束，因此Box Alignment的一些行为依赖于布局方法。该规范定义了三种对齐方式：

• 位置对齐：start、end、center、self-start、self-end、flex-start、flex-end、left和rgiht
• 基线对齐： baseline、first baseline和last baseline
• 分布式对齐：stretch、space-between、space-around和space-evenly

而我们接触最多的应该是Flexbox布局中控制Flex项目对齐方式用到的属性，比如：

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

而在Grid布局中也可以用这样的方式来实现对齐：

.grid {
    display: grid;
    align-items: start;
    justify-content: space-between;
}

也就是说，以后不管是在Flexbox布局还是Grid布局中，控制元素对齐的方式都将会通过该规范中的一些特性来完成。而该规范中提到的特性不仅仅是上面提到的那部分。更详细的可以阅读相关规范。

要彻底理解CSS Box Alignment规范中提到的特性，还需要对CSS的一些基础特性要有彻底的了解，不然只能理解其表面上的特性。