CSS Off 结果

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

好了,在错过了一个截止日期后,结果出来了!您可以在 CSS Off 结果页面 上浏览所有分数并查看人们的参赛作品。

获胜者

当然,所有这些人都做得很 **出色**。为了他们的利益,我们只会吹毛求疵提出一些建设性的批评。

第 1 名 - Steven Schrab - 查看条目

笔记:对图像压缩要更轻松一点。CSS 图像替换在标题上看起来不错,但不太实用。

第 2 名 - Edd Sowden - 查看条目

笔记:IE 8 应该使用一些回退 alpha 透明度支持。IE 6 拥有原始样式表,这通常很棒,但在本次比赛中支持它会更好。

第 3 名 - Mustafa Quilon - 查看条目

笔记:更希望在字体栈顶看到 Helvetica 而不是 Gill Sans。错过了页脚线条的阴影,因为它们在文章页面下方。

第 4 名 - Pam Griffith - 查看条目

笔记:font-stretch属性导致 WebKit 和 Gecko 之间的标题类型存在巨大差异。

这些获胜者已经联系,他们将反过来选择在 原始帖子 上获胜的评论者。一旦他们被选中,将联系这些人,然后开始选择奖品。

总体

每个参赛者都应该为自己鼓掌。总体而言,每个人都做得很好,应该感到自豪。这是一项为了公益和实践而进行的活动。我之所以提及这一点,是因为我知道你们中有些人会对自己的分数感到不满意。别太当真了……

评判

参赛作品由我和 Doug Neiner 评判。我们分别评判了每个参赛作品的不同交替部分。你可能认识我。这是 Doug

Doug 是一位设计师、开发人员,也是 Pixel Graphic Design Studio 的所有者。他是 Fuel 的 CTO,也是 Fuel Your Coding 的博主。他还拥有 个人网站

 

我们在以下 100 分制中进行了评判

干净一致的风格 1 - 10 分 所有代码(HTML/CSS)都经过组织,可读性强
语义 1 - 5 分 使用了智能元素和类/ID 名称。HTML5 可获加分
文件夹组织 1 - 5 分 文件夹结构合理且经过组织
匹配原始设计 1 - 20 分 在现代浏览器中与原始模型的接近程度
好的选择点 1 - 20 分 做出了明智的选择:应该为文本的用文本,按钮以智能灵活的方式完成,悬停效果看起来不错,等等。
现代浏览器支持 1 - 10 分 Firefox 3,Safari 4
略微过时的浏览器支持 1 - 5 分 IE 7
旧浏览器支持 1 - 5 分 IE 6
文件大小 1 - 10 分 最大(合理)条目得 1 分,最小条目得 10 分,然后根据该线进行评判
图像质量 1 - 10 分 图像的外观。这是为了平衡文件大小。在图像质量和文件大小之间取得平衡的条目将获得最多的分数。
总计 最高 100 分

特定问题领域

在 Helvetica Neue 的所有业务方面,我们对字体比较宽容。个人电脑没有这个字体,所以如果你在标题中使用了图像替换,那就没问题。但在文章标题中使用图像替换不是一个好主意,因此会因此扣分。我宁愿看到错误的字体,也不愿看到不灵活的东西。

经过所有这些评判,以下是人们最常遇到的问题

1. 行高

这个模型中到处都是文本,而且行高各不相同。这常常被忽略或误判。行高对于显示阅读起来舒适的文本至关重要。

2. 微妙的阴影

当三条细线延伸到文章框下方时,那里有一个微妙的阴影。

3. 网格

时钟的腿与模型中三个照片框的边缘完美对齐。许多设计没有做到这一点。如果时钟以灵活的宽度方式放置,但在窗口大小约为模型大小时对齐,那就可以接受。

4. 网页文本

底部三个“引号”框中的文本是三种不同颜色的 Georgia。这绝对应该是位于这些框顶部的网页文本,而不是图像,即使是图像替换或具有适当的 ALT 文本。网页文本渲染效果更好,更易于更新,可选择,等等。

有趣的条目

这些条目都没有获胜,但它们都做了一些有趣的事情,请查看!

#103 - 固定位置页脚,内容在下方滑动。
#117 - 查看源代码 =)
#104 – 其中一个例子,带有时钟指针的动画
#58 – 对设计的彻底改造
#127 – 也许是唯一尝试固定定位时钟的尝试
#11 – 使用了 MagicLine

总结

这是一段漫长的旅程!我们从举办这场活动中吸取的重要教训是,它比最初的想法要多得多工作。但我们挺过来了!下次我们会更坦率地说明时间框架,并让流程更加完善。一些赞助商会很好,以确保活动对每个人来说都是成本中立的。

如果您在上面错过了,结果在这里