网页设计中的CSS Sprites技术介绍及其优化方法

2020-05-02 08:33:08易采站长站整理

  我们最终的目的
  其实CSS Sprites经过了那么多年的演变,前端开发者不断的优化,都是为了提升页面效率,提升团队开发效率,减少开发维护成本而努力。配合最近非常流行的将 CSS动态语言化(如SASS LESS等),增加入变量, 继承, 运算, 函数等。CSS Sprites会变的更好玩,会减少更多的开发维护成本。甚至我们在“面向对象”的模块开发方式中,还可以使用一个类的的同一个backgroud- position:(x y)值,在不同的页面通过引用不同的图片(background属性)实现将一个页面内图片请求量进一步减少的目的。随着高级浏览器的普及我们还可以多使用CSS3属性,减少渐变背景图的使用,将纯色ICON制作成字体取代拼图等我们能更大程度上减少图片的使用量。这篇文章只是抛砖引玉。实际上还有很多关于CSS Sprites的方法,还有众多的拼图生成工具。
  说了那么多,我们如果在日常的开发中,只要我们多注意总结,敢于创新,敢于制定规范,那么再小的事也能干的很漂亮,对于CSS Sprites的优化就是这么一个例子,你说不是么?
  作者:青春的猴小野
  文章来源:微博UDC