by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1133

//zxx:以下为翻译内容全文，有编辑（如画外音之类）

昨天的CSS峰会上一些优秀的人才就CSS一些尖端的问题发表了他们的看法。有大量的非常有用的信息，总共有8部分的内容，下面的是每个上台者最佳信息片段打包：

• Denise Jacobs – CSS高级故障排除
• Chris Eppstein – 使用Sass和Compass创作样式
• Jason Cranford Teague – 2010网页字体年
• Zoe Gillenwater – CSS3下的有效&有效率的设计
• Estelle Weyl – CSS3 & iPhone
• Stephanie Rewis – CSS3 & 渐进增强
• David McFarland – CSS3 Animations
• Nicole Sullivan – CSS肿胀!

一、Denise Jacobs – CSS高级故障排除

Denise演讲的亮点就在于“清除浮动内容”的一些特别的代码技巧。

她以标准的overflow: hidden方法开篇，此方法在支持borders & margin时就会变得不标准，还有，就是当需要滚动条时，此方法也不行。Denise建议使用overflow:auto; width:100%; 这样就可以避免这些问题。你没有必要确切使用上面精确的值，你仅仅设置一些overflow和width/height值即可。

Denise然后讨论了.clearfix:after方法，要点见这里。

Denise喜欢这种清除方法，因为其不需要额外的无语义的标签（与<br class=”clearfix” />相反）。然而，事实上，在我看来，:after选择器在IE6/7下是不顶用的。最后，我还是坚持上面的overflow: auto;方法。

阅读Denise的博客 或者 在twitter上follow她

//zxx: 对于我这样的流体布局控，width属性总是尽可能避免的。所以，不会专门使用width清除浮动。至于overflow:auto，很多新人往往样式控制不好，易出现相当丑陋的滚动条。我的做法是：首先有个全局的清除浮动方法，:after伪类+*zoom，遇到实际的情况，根据已有属性再使用最高效的清除浮动方法。

二、Chris Eppstein – 使用Sass和Compass创作样式

关于Sass我已经多次听到，老实讲，起初我对其是怀疑的，某种程度上说，Sass就像是给Rails粉丝的另外一个兔子洞：通俗易懂，但是不标准，复杂，且可能最后过时。但听过Chris Eppstein的谈话后，我有了足够的兴趣并给它一个机会。

Sass有大量的优点，允许你在CSS中使用变量，定义CSS3属性只要一行，而不是4个不同的浏览器前缀，这两点看上去似乎节约了大量的时间。另外，Sass还允许各种颜色的处理，你可以让颜色淡一点，深一点，修改各种颜色属性，例如饱和度、透明度等。最后，Sass还支持数学方法，例如：width: $width1 + $width2;。

Sass主要将静态的CSS转换成更多的脚本语言。如果Sass的缺点仅仅是要学习新的语法的话，我会在我的项目中使用Sass的。然而，Sass只能运行在Ruby环境下，所以，你不是正在运行一个Ruby/Rails站点，你需要在本地编译Sass文件，然后部署CSS到你的站点上。

在twitter上follow Chris 或者 看看他的Compass项目

//zxx: 关于Sass，我在“翻译-不同CSS技术及其CSS性能”一文中有所提及，还包括对其CSS性能的检测，性能可以与OOCSS媲美。

三、Jason Cranford Teague – 2010网站字体年

Jason就web字体发布了不错的演讲，从我开始写文章讨论这个起，观点已经发生了巨大的变化。

Jason演讲亮点在于其在字体堆栈中选择字体的规则。一个字体堆栈包含一个最初原始字体，还有就是一些替补字体，这些替补字体可以在初字体不可用是其作用。

font-family: rockwell, garamond, georgia, serif;

上面CSS代码中，rockwell是最初字体，garamond, georgia等是替补字体。

在我们考虑候选字体的时候，需要记住下面4点：

• 一致性：对于任何替补字体来讲，元初字体类似的字款和字体间距是非常之重要的。如果没有，页面上的文字内容的表现可能就会有差异。虽然对于大段文字来讲，这可能没有多大的关系。但是，对于一些精细的短元素，例如页面导航、按钮等可能就会产生问题了。
• 样式可用性：所有堆栈中的字体应该可以支持许多字体相关的属性，例如：italic, bold, 甚至是bold-italic，对于样式表现，这是非常重要的。如果字体对这些CSS样式属性不支持，则就限制了你站点字体。
• 易辨认：字体有稳定的质量和厚度是很重要的。一般说来，应避免又轻又细的字体，因为他们是否易辨认受字体大小控制。
• 可读性：与易辨认想法，可读性指用户读大段的文字时也能非常轻松自如。一般可读性好的文字，在字距，字款和x方向高度上有着不错的平衡。

阅读Jason的博客 或是 看看他的web安全字体信息图标(.pdf)。

//zxx:国外关于font的文章很多，因为外文，比如英语，就26个字母，形态、大小等和汉字完全不可同日而语。所以，这些文章大部分都不适用于中文。

四、Zoe Gillenwater – CSS3下的有效&有效率的设计

当Zoe在谈论使用media queries构建流体布局的时候，我的思维完全被打击了。在此之前，我一直以为media queries仅仅用在打印&屏幕设备样式上的，难有大的作为。而结果却是media queries比我想象的要更有用。

除了打印/屏幕容器，media queries允许你根据用户窗口/屏幕大小应用对应样式。例如，我们让导航在窗口宽度大于700像素时左浮动。

@media screen and (min-width: 700px) {
    #main-nav {
        float: left;
    }
}

这是实现真实流体布局很有用的一个属性，比同等效果的JavaScript方法要好多了。

除了min-width，media queries还允许你使用max-width, device-width, min-device-width, max-device-width甚至是给类似iphone4的移动设置orientation属性。

阅读Zoe的博客 或者 在Twitter上follow她。

//zxx: media queries确实是流体布局者的福音，但是，一旦着眼于目前各浏览器对CSS3支持情况的现实，media queries也只是让我们YY而已。

五、Estelle Weyl – CSS3 & iPhone

Estelle演说的亮点在于在iphone上使用标签调用各种各样自带方法功能的技术讨论。

我对跨平台的HTML5 input类型兴趣由来已久，不过现在看来，对于iphone而言，他们甚至更重要。在iPhone上，如telephone和email（电话和电子邮件）的特殊输入类型不仅会引发特定类型的验证，另外还会影响iPhone键盘弹出。

例如，<input type="telephone" />触发10数字的呼叫键盘。<input type="email" />则触发标准的传统键盘，但是带有Email特带的些字符，例如”@”和”.”。

除了HTML5 input类型，Estelle还介绍了让iPhone电话号码可点击的技术。

<a href="tel:15032084566">点击这里呼叫我</a>

下为作者演说时使用的讲稿：

阅读Estelle的博客 或者 在Twitter上follow她

六、Stephanie Rewis – CSS3 & 渐进增强

Stephanie讲演的亮点是对CSS3选择器的讨论。虽然我之前就用过诸如:enabled, :disabled, :first-child 和 :last-child等不少CSS3选择器。Stephanie教会了我一些:nth-child和:nth-of-type的有用的技术。之前我使用这类选择器仅仅是以完美的静态方式，例如:nth-child(4)指向第四个孩子。

但是这些选择器可以变得更动态，例如找到所有奇数孩子目标:nth-child(odd)，所有的3倍数孩子为:nth-child(3n)。

在Twitter上Follow Stephanie 或者 看看她的web培训程序。

//zxx: 关于CSS3以及渐进增强，我之前写过进行过详细的叙述与探讨，您有兴趣可以查看“CSS “渐进增强”在web制作中常见应用举例”一文。

七、David McFarland – CSS3 Animations

研究员Portlander Dave McFarland发表了CSS3 transitions和transforms的精彩演讲。虽然我之前就使用:hover和:focus伪类，当Dave透出了CSS3 transitions可以被JavaScript调用这个信息时，我的脑袋又被洗礼了番。

既然transition属性可被任意属性触发，所以，你可用JavaScript创建的新样式触发CSS3 transition属性，同样的，你可能需要使用:hover伪类。

为使用此技术，首先要应用CSS3 transition属性到任意的元素上，沿用你过渡之前的想使用的基本样式。

.foo {
    -webkit-transition-property: padding;
    -webkit-transition-duration: 250ms;
    -moz-transition-property: padding;
    -moz-transition-duration: 250ms;
    -o-transition-property: padding;
    -o-transition-duration: 250ms;
    transition-property: padding;
    transition-duration: 250ms;
    padding: 5px;
}

下面就是使用Javascript给你的元素应用新样式：

<div class="foo" onclick="this.style.padding='20px'">

这只是个简单的例子，你可以使用jQuery或是给元素添加class应用更加动态的样式。

而且，此Javascript方法可以任何时候使用——例如，你可以使用onload让页面在加载后自动触发动画效果。

你可以在twitter上follow Dave 或是 看看他的web开发的书。

//zxx:关于CSS3的animate以及transition动画效果，可以参见我的“CSS3 animate实现图片墙3D翻转效果”一文，或者是查看“CSS3 transition实现超酷图片墙动画效果”一文，里面对这两个CSS3的动画属性做了比较详细的效果展示。

八、Nicole Sullivan – CSS肿胀!

Nicole的讲演主要是针对减小CSS文件大小的，不过让我很难从中找到特别喜欢的部分。但是她关于简化提议性的想法比较新颖突出。在指出“特异性战争”趋势导致CSS臃肿后，Nicole陈列了一些小的技巧来简化你样式脚本上的这类特异性。

首先第一步就是使用面向对象的CSS。//zxx: 本质上就是CSS的合并，可参见我之前写的“CSS的样式合并与模块化”一文。这样可以让你的样式起于同一水平上。

其次是避免使用!important，除非是绝对需要，或者是strong或是em这类不可能再有子节点的元素。//zxx: 这里我的观点与之有差异，确实是该避免使用!important，但是哪来这些破特殊情况，直接卡掉。

最后，避免使用hack，例如：.foo {} 和 .ie .foo {}。

在twitter上follow Nicole 或者 阅读其博客。

//zxx:如今CSS肿胀现象比较严重，但是，作者的观点以及列举措施实在是太无力了~~

___________________以上为翻译全文____________________

小编结语

这是国外的一次CSS高峰会议的部分内容精选。至于这个会议的级别有多高，不得而知。虽然个人觉得演讲者还不是大师级的，但是从中也学到了不少东西，所谓三人行，必有我师焉。从演讲的内容来看，大部分都是围绕CSS3这一新技术。国内少有专门的CSS会议，确实比较遗憾，不过D2前端会议是很不错的，可以学到不少东西。

翻译是件耗时耗精力的事情，一人能力有限，难免会有翻译不准确，或是表述不恰当的地方，欢迎指正。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1133

（本篇完）