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 !

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

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

2 2 收藏 评论

关于作者:刘健超-J.c

前端,在路上...http://jchehe.github.io 个人主页 · 我的文章 · 19 ·     

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部