Codrops CSS 参考文档

我们已经在 Codrops 上发布了新章节：CSS 参考文档。我们现在就来谈谈它，看看究竟加了什么新特征让学习 CSS 变得更简单实际。

Codrops 是最励志的网站之一。是的，我是有些偏袒的，但我肯定你也同意这一事实。

如果你正在寻求灵感，那你在这里就可以找到许多创意资源，它们能让你的脑袋里也会浮现一两个想法。我喜欢这个网站的理由之一是：Manoela 和 Pedro 提供的资源一定会给我们留下深刻印象。

如果你在寻找如何学习使用 CSS 属性的方法，你可以在这里找到很多源代码来学习。但如果你想学习更多关于属性的基础知识：属性定义，不同的取值，以及每个值的意义和作用，或是其它。而你能在这里找到一切你正在寻找的资源，这岂不是十分完美？

一年前，我们认为，如果 Codrops 有一些章节供读者来学习 CSS 属性，这会是一件激动人心的事。因此，将 Codrops 打造成为一个为用户提供灵感源泉和学习CSS 的优秀平台。这是 Manoela 向我提出的想法，而就在几天后，我开始着手实施了。

所以，在过去的一年里（不到一年），我们给 Codrops 新增了一个板块：CSS 参考文档。我们非常激动能够在最后与大家分享这一成果。

万事开头难，这篇参考文档仍在不断发展，我们都很努力地改进它，使其更加完善。倘若你有任何改善的建议，或发现错误，都可提交到这里 GitHub repo。

参考文档

Codrops 的 CSS 参考文档包含了一个条目列表入口：CSS 属性、CSS 功能、CSS 数据类型、CSS @规则和 CSS 伪类/伪选择器/伪元素。每个条目都定义和描述了CSS 的属性、功能、数据类型、@规则或伪类/伪选择器/伪元素。

除了以上 5 类条目，还有一类就是 CSS 概念。CSS 概念中的每个条目都包含具体 CSS 概念或完整的特性指导。

CSS 概念条目充当了一组相关属性的全局条目。比如，Flexbox 和 Counters 是两个概念，所以它们都有自己的条目。每个条目都解释其概念含义和用途，还包含了其属性的定义与范例。

那么，一个 CSS 条目到底是怎样的呢？

CSS 条目结构

每个条目拥有一个头部和智能搜索模块，而头部描述了该条目所属类别。下面某章节就介绍这个智能搜索特性。

每个 CSS 条目主要由这个几部分组成：描述、官方语法、属性值、范例、线上演示、浏览器支持、深入理解和相关条目。每部分可能由多个小部分组成。

在描述章节你可以学到 CSS 属性、功能、选择器等用法。该部分基本上是概念的定义和进一步说明。

在定义部分后就是一些综述，包括官方语法、初始值、该 CSS 特性能应用到哪些元素上以及属性值是否支持过渡（备注：CSS 3 的 transition-property）。有些类目不需要本节，所以，它是否存在取决于你正在阅读哪个类目。

属性值章节里会定义与描述每个取值。此外，如果一个 CSS 特性没有一组值（如：@ 规则），那么该章节就会被省略掉。

你会在范例章节里看到使用 CSS 特性的案例 – 包含主要的代码片段和运行结果的截图（如果有截图）。

线上演示章节里包含一个或多个线上演示的案例，这些案例中，有部分是来自范例章节的，有时会使用额外的案例。由于运行结果依赖于浏览器的支持，所以线上演示的案例可能会有用来展示运行结果的截图（如果浏览器不支持该 CSS 特性）。

需要注意的是，很多条目都包含一些线上演示，其中一些是嵌入在描述章节内。

请务必检查浏览器的支持程度，以确定您所使用的浏览器是否支持你正在阅读的特性。

由于有很多关于 CSS 特性和专题的优秀阅读资源，深入理解章节就包含了值得一读的优秀资源链接，其中有个规范文档链接，它包括了 CSS 将要引入的特性。

Codrops Playground

在我写条目期间，Manoela 和 Pedro 制作了 CSS 参考文档里最好的功能之一：playground。

在该条目里看到的所有案例，都能被你编辑和体验，并且我们强烈建议你这样做，这样能让你更好地理解某个特性的运作和它不同取值的结果。需要注意的是，playground 仍处于Alpha 阶段，有很多特性还没有实现。尽管发送任何 BUG 报告、建议和评论到 playground ‘at’ codrops.com。

智能搜索

每个条目里都有一个智能搜索模块。当然，你也可以在Codrops 首页找到它，紧靠左侧专题文章 。

正如“智能搜索”这名字，它会匹配你要搜索字符串，然后从所有 CSS 条目中返回一列结果。所以，如果你搜索明确的字符串（或一个字母），智能搜索模块会从所有条目中，将含有该字符串的标题形成一个下拉框。当你搜索一个具体属性时这很有用，它可以获取一些相关的相关属性（例如：border、border-top、border-bottom、bottom-right等）。

浏览器支持

无论何时可用，你会看到 CanIUse.com 的浏览器兼容性表格嵌入在浏览器支持章节，所以这个兼容性表格是一直保持最新的。

由于有些条目没有嵌入 CanIUse 的浏览器兼容性表格，我们会手工将这个浏览器支持信息写入。常见和经过测试的主要特性都得到浏览器支持，但有些特性可能会在未来被修改。所以，如果你发现体验过时的兼容性信息，请联系我们，让我们知道，我们会根据你的建议及时更新。

向前看

有些被遗漏属性，它们只得到小部分浏览器支持，甚至还没得到当今浏览器支持。对于它们的说明还不是很稳定，经常会变动。我们的愿望是把它们添加到条目里，因为它们在将来有希望得到浏览器更好的支持，并且它们的说明变得稳定起来。

我们都知道，在我们这个领域，每天都会有新发现。所以，我们希望 CSS 参考文档能一直得到成长和扩展，能随着时间不断添加额外的属性和特性。即时当前条目更新缓慢。

我们设定了一个里程碑式的目标，首先向你提供一个优秀的参考文档，并致力于不断改善它。

你的反馈

当然，你的评价和反馈对我们是非常重要的。毕竟，这个参考文档是为你们而做的，所以我们想确保你能在这里找到任何你需要的东西。

我们会在专门收集问题和建议的 Github 库上收集你的反馈与建议。

找到 BUG？找到一处需要更新的信息？有错别字？有改善参考文档的建议？希望我们在概念条目添加某个 CSS 概念？那就在 Github 尽情提交问题吧。我自己也会常常寻找问题和回答你的问题，并根据需要尽可能多和尽快进行编辑和更新。如果你想及时得到关于条目或请求的回答，可以在 Twitter 发信息给我。

留在最后的一些话

我们把全部心血都放到了这个参考文档，希望它能为你提供非常有用的学习资源。我希望你能从参考文档里学到尽可能多地东西，因为我也在写的过程中学会了很多。

同时我们也希望您喜欢经过小小改造的 Codrops ！

非常感谢您的阅读。另外，别忘了到 参考文档 看看哦！

原文地址：http://tympanus.net/codrops/