注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

CSS性能: 用更少的图片实现用户界面  

2012-10-09 15:10:59|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

性能优化往往伴随着一些障碍,有时提高了性能,而导致开发过程中其它地方出了问题,或者不得不在最终的产品上减少一些特性。有的时候你必须很纠结的作出选择,就像一把钝而漂亮的斧头和另一把锋利而丑陋的斧头之间的选择一样。但其实你不必这么纠结。

这篇文章列出了一些使用尽可能少的图片在尽可能多的浏览器上实现常见的UI元素的CSS技巧。一些技巧是全新的,有些是非常,非常古老,就如IE 5.5一样的古老。它们都有的一个共同点就是“较少的甚至没有图像”。使用较少的图像有以下明显的好处:

  • 花费更少的时间在Photoshop.
  • 更轻量级的页面,减少HTTP请求,减少图片负载.
  • 需要维护的sprite元素越来越少(有时候可以减少sprites的次数),这意味着sprites以较低的更新率和cache失效率长期存在。
  • 通常更容易维护-改变颜色值远比更新和推动一个新的图片版本要容易得多。

有时,某些浏览器可能不完全支持,但没关系-只要有提高和进步的基本页面可用,人们很少注意1px发光及其他装饰。

圆角

Yep, 让我们来解决这件大事。

忘记不支持border-radius圆角的浏览器。在一段时间内,这也许非常难说服别人,但肯定要去尝试。使用border-radius以外的方式来实现圆角将非常痛苦- 给代码添加了很多冗余臃肿的标签,使用更多的图片或者sprite元素。更难更新。算了。忘记IE9以下版本的圆角(传闻IE9支持border-radius)。有人可能会挑战你,IE对你的用户来说很重要。毫无疑问,这是真的,但对于我们的用户来说,圆角也没那么重要。给您的设计师展示雅虎搜索结果页 -关于左边侧栏。IE浏览器里确实不是圆角。你认为这曾是一个简单的战争么- 在如此高权重的站点舍掉IE的圆角? 问一问赢得了这场战争的人

相当简单的border-radius属性支持Firefox,Webkit内核浏览器(Safari,Chrome,iPhone …),还有不久前发布的Opera 10.5 alpha版本 :

.module{-moz-border-radius:9px;-webkit-border-radius:9px;boder-radius:9px;}

就是这样!小菜一碟。

现在,它有点恼人的是,要给同一个东西写三个属性,但是,拜托~~它已经轻而易举的打败了图片和额外标签了。此外恼人的是,当给单独的某个角设置圆角时,各个浏览器的代码也存在差异。(-moz-border-radius-topleft 等同于 -webkit-border-top-left-radius)。在这种情况下,我们还需要给头部添加圆角(class .hd )。

.hd{-moz-border-radius:8px 8px 0 0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;border-radius:8px 8px 0 0;}

小结:

  • 全面支持:Firefox,Safari,Chrome,Opera10.5
  • 差异化降级体验:IE浏览器(直角)

阴影和发光

另一个设计师们喜爱的效果-阴影。很容易在现有的 .module 上添加阴影和发光效果而不需要添加任何图片:

  评论这张
 
阅读(53)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017