翻译 – CSS高峰会议内容精选

//zxx:以下为翻译内容全文,有编辑(如画外音之类)

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

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

Denise Jacobs  张鑫旭-鑫空间-鑫生活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创作样式

Chris Eppstein 张鑫旭-鑫空间-鑫生活关于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 Cranford Teague 张鑫旭-鑫空间-鑫生活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 Gillenwater 张鑫旭-鑫空间-鑫生活当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 Weyl 张鑫旭-鑫空间-鑫生活Estelle演说的亮点在于在iphone上使用标签调用各种各样自带方法功能的技术讨论。

我对跨平台的HTML5 input类型兴趣由来已久,不过现在看来,对于iphone而言,他们甚至更重要。在iPhone上,如telephoneemail(电话和电子邮件)的特殊输入类型不仅会引发特定类型的验证,另外还会影响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 Rewis 张鑫旭-鑫空间-鑫生活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 张鑫旭-鑫空间-鑫生活研究员Portlander Dave McFarland发表了CSS3 transitionstransforms的精彩演讲。虽然我之前就使用: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 Sullivan 张鑫旭-鑫空间-鑫生活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前端会议是很不错的,可以学到不少东西。

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

(本篇完)

分享到:

标签: , , , , , , , , , , , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想高薪入职阿里? ×


发表评论(目前7 条评论)

  1. qbaty说道:

    总结的很不错奥

  2. 女人心说道:

    国外就是强啊,还有专们的CSS峰会,赞

  3. tunpishuang说道:

    相当之牛逼。那些链接太有用了。谢谢。

  4. 网站优化说道:

    css3 html5 哇““`期待的很

  5. 黑幕困兽说道:

    很赞,前端攻城师需要多关注这些前沿的技术。css3在iphone和android网站开发,作用不可忽视。

  6. Ben说道:

    我做了一个无需ruby即可运行sass的网站

    http://trysass.zfben.com

    目前还很不完善,如果你感兴趣的话可以联系我