欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

谈谈CSS织梦DEDESprites技术及其优化

企业模板

CSSSprites技术对于广大的前端工程师来说应该是一点也很熟悉。这个被国内开发者昵称为CSS精灵CSS雪碧的家伙到底解决了那些问题,大家又如何合适采用这个技术呢?

在大伙还在拨号上网的“远古时期”,由于网速的限制,页面开发者都爱把网页里面的图片字节数控制的很小,往往在一个图片文件夹里散落着n多的小 碎图。伴随互联网技术的进步,网速的提高,大伙愈来愈看重页面的加载速度,页面效率问题,过去的那些小图便成为了前端开发者的眼中钉,由于每加载一张图片都 会产生一次浏览器请求数,发起的请求数越多那样页面加载的速度也越慢。还有当页面加载时,图片一个个的零星显示,鼠标经过时候背景闪白等也都是大家不可以忍 受的。于是乎将页面中的背景图整理到一起,借助“background- image”,“background-repeat”,“background-position”的组合进行背景定位的技术被广泛采用与了页面构建 中,这就是CSSSprites。当然CSSSprites技术也存在着维护不便,内存占用大等等的缺点。

前面那些只是对CSSSprites技术的一个普及。作为一个织梦DEDE开发者大家应该对它有一个织梦DEDE更全方位的认识,挖掘深度内容,这样才能有益于大家效率开发织梦DEDE,团队协作。

头疼的多人拼图游戏

采用CSSSprites,就仿佛玩拼图游戏一样。一张白画布,那样多图如何放到里面去才会完美?这是个让人纠结的事。而且在实质在工作场景中, 大家面临着项目开发时间紧张,UI设计图要分期提供,多人协同开发一个项目等等问题。这些问题很简单让大家在大项目中迷失,造成CSS拼图混乱,维护及 其困难的状况。

定好规则,其实拼图也挺好玩的

先期的筹备工作

应对一个项目后期维护本钱大的问题,大家最好的解决方法就是在开始前拟定一系列的规范来限制问题的商品。好的开始是成功的一半。对于 CSSSprites,在项目开始前,大家要充分认识一个商品,同UI设计师做好良好的交流,对大家将来组成大家Sprites图的各个元素有个大体的 定义,譬如自己的背景拼图可能包括什么。

一个好的Sprite画布是需要的

网站设计里面,Grid系统是必不可少的,好的Grid能解决大家大量排版问题。Grid系统同样适用于CSSSprites。大家需要创建好一个优秀的画板,剩下的工作就是将元素合适的置于画板中了。

这张是我筹备的一张CSSSprites画布,大家将在这个PSD里面组合项目中的图片。

这张画布是由20px*20px像素的格子组成。这个格子基本上由项目决定的,当大家同UI设计师交流知道这个项目最多的为16px*16px图标时。大家就可以使用这种Grid尺寸为画布了。


Sprites画布有了,紧接着就是对图标进行分组了

对于信息的总结概括、分类是一个有意思的事情。就拿图标来说,大家就可以依据图标功能,尺寸等等作为信息维度进行总结。其实无论如何总结,都是可以的,只是记得大家以一个方向作为准则就好了。

下图是依据微博站外某组件完成的CSSSprites


依据设计,大家知道在这个页面,需要将图片元素依据功能分为4个维度,即微博品牌展示元素、提交按钮、操作类小按钮、提示类ICON。于是我将画布 X轴坐标方向每5个格(其实完全可以10个格或者更多)划分为一个地区,每一个这样一个地区的Y轴方向不再划分地区,这样做的目的是为了将来增加图标的扩展 性。于是大家可以飞快速得到一个图标的坐标了。譬如不可用的灰色的共享按钮X坐标=5*20px=100pxY坐 标=7*20px=140px;那样大家就获得了这个图标的位置即background-position:-100px-140px。假如抽象成 为公式的话,大家设置一个单元格的宽度为变量n。X坐标值Gx,Y坐标值Gy。那样画布中的元素css背景即为:background- position:-Gx*npx–Gy*npx了。

目前图有了,如何取图也是重要

由于图片尽可能的被整理到一张拼图,所以大家需要在页面采用图片的位置采用空标签定位的方法将拼图所需展示的部分展示到页面中。

<spanclass=”iconA”></span>

.iconA{display:inline-block;height:16px;width:16px;background:url(icons.png)-20px-20pxno-repeat}

项目出现二期需要了,需要增加图标?

需要一直不可以控制,大家要尽可能的为将来增加图片做好打算。在刚才的例子的项目里后期商品需要增加图标,于是:


大家可以继续在对应的图区内增加对应的图标。但是这个例子同样暴露了一个缺陷,假如新增一个按钮地区大于5n(100px),自己的图区不足以承 载。这个时候候大家可以同商品,设计师交流协调,商议是不是可以取消过大的按钮设计。假如需要肯定,那大家只能沿着X轴方向继续扩展画布。不过,大家也应该注意 无限的放大一张画布,同样会造成对页面效率的影响。

准时的拟定好规范,记录好修改日志

可能在项目的初期,大家还来不及拟定合图的具体规范,在项目中大家会遇到各种各样的问题。准时的概括,维护整张CSS拼图,在拼图的PSD或者PNG(采用Fireworks)做好注释,便捷他人开发。拼合好的图片提交到svn时也写明log内容,这样便日后查看。


大家最后的目的

其实CSSSprites经过了那样多年的演变,前端开发者持续的优化,都是为了提高页面效率,提高团队开发效率,降低开发维护本钱而努力。配合 最近很时尚的将CSS动态语言化(如SASSLESS等),增加入变量,继承,运算,函数等。CSSSprites会变的更好玩,会降低更多 的开发维护本钱。甚至大家在“面向对象”的模块开发方法中,还可以采用一个类的的同一个backgroud-position:(xy)值,在不一样的页 面通过引用不一样的图片(background属性)达成将一个页面内图片请求量进一步降低的目的。伴随高级浏览器的普及大家还可以多采用CSS3属性,减 少渐变背景图的采用,将纯色ICON制作成字体取代拼图等大家能更大程度上降低图片的采用量。这篇文章只是抛砖引玉。事实上还有大量关于 CSSSprites的办法,还有海量的拼图生成工具。

说了那样多,大家假如在平时的的开发中,只须大家多注意概括,敢于革新,敢于拟定规范,那样再小的事也能干的很漂亮,对于CSSSprites的优化就是这么一个例子,你说不是么?

(责任编辑:酱油妹)


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:互联网 关注: 时间:2020-07-22 02:05
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/jiaocheng/seo/20200722/8469.html
►凡本站提供教程均已验证教程的准确性。
►为提高用户在织梦后台添加栏目的灵活性(可随意添加/删除栏目),并保持(管理后台添加/删除栏目)与前端网站栏目的一致,本站模板中栏目均未固定,用户直接搜索typeid=''并替换''中的数字为所需栏目id即可。
►本站提供各种类型织梦模板!希望在这里找到喜欢的。下载本站模板,用户直接替换相关文字和图片即可。
►本站仅提供织梦模板即(DEDE模板),(除另外说明)均不带织梦安装程序及数据,用户直接覆盖默认模板即可。
►本站所有资源(包括源码、模板、插件等)仅供学习与参考,请勿用于商业用途。
►如有其他问题,请加网站客服QQ(375750496)进行交流。
相关织梦教程
在线客服

织梦模板 整站模板 新手教程 使用技巧