我们已经在 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 !
非常感谢您的阅读。另外,别忘了到 参考文档 看看哦!