CSS.3设计师的最佳实践

Louis Lazaris. 经过 Louis Lazaris.  |  可能。 28,2012

如果你’主要是一个设计师,最近开始学习CSS,你’可能开始纳入一些已添加到语言的新CSS功能 CSS.3.

但如果你不’与CSS有很多经验,那么你’RE可能试图弄清楚处理使用多个供应商前缀的一些挑战的最佳方式,处理旧版本的Internet Explorer和其他CSS3特定困境。

在这篇文章中,我’在处理这些问题时,请尝试覆盖一些重要的事情要记住。请记住,这里没有任何内容在石头上设置,但这些应该是帮助您更有效,更容易维护和未来证明代码的指导方针。

 

了解您的支持图表

你 probably won’T必须记住哪些功能在哪些浏览器中工作。在大多数情况下,CSS3功能在所有内使用的浏览器中都不工作。在某些情况下,即使是最新版本的浏览器也不 ’t have full support.

所以你应该做的第一件事就是理解缺乏支持的地方。您应该使用的主要资源是 我什么时候可以使用… 网站包括CSS3,HTML5和吨的图表。您甚至可以使用不同的浏览器并排比较,如下所示的屏幕截图所示 将CSS3支持与Firefox 3.6与IE9进行比较:

我什么时候可以使用......支持图表

虽然 我什么时候可以使用… 可能是唯一的支持图表资源’LL需要,这里有一些其他选择需要考虑:

但是知道,尽管可以在某处列出CSS功能“supported”, that doesn’t mean it’没有虫子或不一致。所以彻底测试。

 

大学教师’t overuse polyfills

由于客户或机构的压力,或者只是你想要一切看起来和运作到处都是相同的事实,你可能会诱惑使用许多人 CSS.聚填充物.

但是这些脚本中的许多脚本都可以大大减慢你的页面—特别是如果你使用多个。有 许多研究和来源 这表明网站的重要性’S速度,因此应仔细考虑任何合成填充物以及您的网站或应用程序’思想整体最大的利益。

为了帮助您决定哪个到多填充物以及允许降级到更小的经历,使用 HTML5请 地点。如下面的示例屏幕截图所示, HTML5请 通常建议避免某些功能的聚填充物:

HTML5请

 

测试功能如何降级

如果你’重新避免了很多聚填充物,然后自然地’重新将允许许多CSS3功能降低到较旧浏览器中的更原始的体验(通常是IE6-8)。但是不要’假设这将自动发生。

在许多情况下(例如,使用多个背景时),您’LL必须声明CSS3功能覆盖的属性,但仍将显示在较旧的浏览器中。

例如,对于多个背景,您可能会执行此操作:

.element {
    background: url(images/fallback.jpg) no-repeat;
    background: url(images/example.png) center center no-repeat,
            url(images/example-2.png) top left repeat;
}

注意在多个背景图像线之前声明的单个背景图像。非支持浏览器将显示单个图像,但将忽略第二行。支持浏览器将读取两行,但第一行将被第二行覆盖。

其他一些CSS3功能可以从这种类型的回力中受益,是RGBA颜色,HSLA颜色和渐变。

为了帮助您了解CSS3功能如何在较旧的浏览器中降级,您可以使用称为BookMarklet deCSS3.

deCSS3

它目前仅在Chrome和Safari工作,但只需将链接拖到书签栏中,然后单击您想要的任何网站上的链接‘de-CSS3’它将向您展示文本阴影,圆角和其他新内容的网站。当然,这对实际浏览器测试没有替代,但可以作为更快的开发之前的有用指南,然后在您对项目进行最终测试之前’s end.

另一个有助于处理回力的工具是 现代人 JavaScript库。但如果你’被图书馆吓倒了,唐’是。从CSS的角度来看,Modernizr并不难。查看 本教程 无痛苦的介绍。

 

处理供应商前缀

CSS.3的一个杂乱部分必须处理所有不同的供应商前缀。维护使用所有前缀的代码是乏味的,在某些情况下你不’需要所有这些。谁能记住何时包括“-o-” or “-ms-” and when not to?

好吧,如上所述,使用支持图将有所帮助。但这里有一些其他建议可以帮助处理供应商前缀。

使用CSS预处理器

预处理器现在都是愤怒。但是,CSS初学者和设计师’T Hardcore开发人员或程序员可能很难处理这些新工具。

因此,虽然预处理肯定不是每个人,但它们肯定值得考虑,因为他们可以认真提高生产和维护时间。

对预处理器的广泛讨论当然超出了本文,但这里有一些链接可以让您入门:

如果你发现这种东西过于沉重,CSS技巧的Chris Coyier有一些 关于预处理器的思考 这可能有助于您获得整体视图。和这里’s nettuts +上的帖子 涵盖使用一些最受欢迎的CSS预处理器的一些特征和优势。

在您的代码中保持一致

如果您选择不使用上述技术之一进行预处理CSS,那么您’LL必须处理维护所有供应商的前缀。因此,请确保为您的供应商前缀挑选风格和订单并坚持下去。这样,您的代码将更容易阅读和维护。

例如,某些CSS开发人员按字母顺序排列的供应商前缀行,并使用缩进使得值全线,如下所示:

.element {
    -moz-transition:    background-color linear .8s;
    -ms-transition:     background-color linear .8s;
    -o-transition:      background-color linear .8s;
    -webkit-transition:     background-color linear .8s;
    transition:     background-color linear .8s;
}

那’只是一种方法来做。但无论您选择的任何方法,都在整个代码中保持一致。如果您在其他人必须阅读和/或维护代码的团队中,这将是尤为重要的。

当然,并非所有CSS3功能都是这种易于组织的(例如,关键帧动画的代码更复杂),但对于大多数功能,您应该能够具有一致的风格,使开发和维护更加顺畅。

标准财产怎么样?

你’LL注意在上一节中的示例中,供应商行之后声明的最后一个属性是属性的标准版本。如果你’重新包括标准财产,这绝对是你应该如何做到的。所以在添加它时始终包含它。

这是为了确保使用标准实现覆盖该功能的供应商实现。但是在那里’s a caution here.

对于某些复杂的动画和交互,可以想到,实现可能会更改,即当浏览器开始支持标准属性时,它可能具有不良影响。因此,在某些情况下,您可能会更好地删除标准物业。

我写了关于这个主题更深入的话 on my blog,所以如果您想要更全面的讨论此问题,请检查出来。

使用prefixr.

处理所有跨浏览器供应商奇怪性的最简单方法是使用易于致电的小工具 prefixr.。使用prefixr,您只需始终开发代码,您只能使用单个供应商前缀(例如,仅限“-moz-“)对于所有CSS3。然后,当你’在该浏览器中重新进行测试,并拥有所有工作方式,只需将代码扔进前缀,它将为您生成所有额外的供应商代码。

prefixr.也可以自动集成 使用您的文本编辑器,并包括支持冗长的关键帧动画代码。作为替代方案,您也可以尝试一个调用的工具 动画填写代码 为关键帧动画添加额外的供应商代码。

 

彻底测试

最后的建议我’LL给这里是在所有浏览器中彻底测试’重新支持。您可以使用数十个工具和库来帮助您使用CSS3开发,但没有任何内容可以替换真实浏览器环境中的彻底测试。

如果你的话,这一建议尤为重要’重新处理大量响应的设计相关的CSS3(例如媒体查询),以及繁重的印刷功能。即使CSS3功能也希望您的所有浏览器中的内容可以使用和可读’t available.