joycss独特之处

目录导航

joycss是一个基于node和php的css自动拼图工具,本文主要说明joycss的不同于其他拼图 工具的一些特点与使用方式,使用文档,请移步文档

世界上已经很多sprite拼图工具了,比如我以前经常使用的smartsprite,或者cssgaga,或 者在线拼图工具等等。他们各自有其强大之处,使用起来,也总是会有很多不如意的地方, smartsprite 必须看着文档写注释,cssgaga使用拖拽,还不支持mac,linux,不支持自动 化发布集成。

作为自动拼图工具,如果只支持水平垂直方向布局,那么会浪费很多空间,图片面积过大, 占浏览器内存。如果只支持紧凑拼图,那么对开发者有限制,必须一个背景图,一个相同大 小的图片,这样固然也没用问题,但是如果在团队中推广,还是有一定难道的,不是所有人 都愿意那么做。在极端情况下,dom节点数增加更加消耗性能。joycss使用两者结合的方式 ,自动分析什么布局方式合适,把背景图分成两组,一组使用紧凑拼图,一组追加在紧凑拼 图的图片后面。这样,可以适应任何css书写方式,所有开发者都可以很简单的使用上joycss。

工作方式

joycss的工作方式是,首先开发者写好一个css文件,图片使用一个一个碎图。然后运行 joycss xx.css,看一下效果,尝试使用其他的命名参数,选择最满意的拼图方式。然后 ,修改一些可能无法完成拼图的情况,比如,去掉某个图片等,这样的操作一般都很少。大 多少css不需要修改,就可以直接完成sprite过程。

如果有拼图出现一些问题,请看下文的,joycss所无法处理的情况。

默认假设

joycss为了做到尽可能使用简单,假设以下情况是最普通,最常用的情况:一个css文件需 要处理的css文件,里面所有图片(除了http请求的图片)都是需要做sprite拼图的,并且图 片的定位可以通过背景图所在的css规则中确定。

对背景图定位的假设,如果背景图所占的空间由图片本身大小和left、top、right、bottom 的间距构成,left和top间距可以通过background-position获得,right通过计算背景图所 在 box的宽度获得,如果取得宽度,那么图片使用紧凑拼图,如果没有宽度,那么图片占一 行,如果是紧凑拼图,right预留10px宽度。对于bottom,通过 height, line-height, padding来计算,如果这些信息都没有,无法确定height,bottom预留 10px高度。

安照这样的默认情况,一个css文件是不需要做任何处理,可以通过joycss生成sprite合成 后的样式和图片。当然,也许会说,需要有一些自定义的情况,比如一个图片不需要做拼图 ,这时候就需要使用url参数来通知joycss了,过滤一个图片在图片url后面假设一个esc 的参数,就像这样background: url(a.png?esc) no-repeat,遇到这样的情况,这个图片 就不会被合并了。其他情况,同样如此,需要通过url参数来告知joycss应该如何处理。url 参数的使用会尽可能简单,因为大多数情况下,都和默认假设相符,只在某些情况才需要开 发者加url参数。

joycss所无法处理的情况

支持的特性

根据现有的需求,主要实现以下特性:

计划中需要实现的功能

joycss主要有以下几个特殊之处:

  1. 支持对手工sprite拼图过的样式修改操作。包括在已经拼好的图片后面追加图片和背景图 覆盖两种操作。demo: sprite修改
  2. 同时兼容垂直拼图和紧凑拼图两种方案,支持repeat-x,repeat-y图片处理。 使用自动 判断是否可以使用紧凑方式拼图,如果css定义了高度和宽度,那么使用紧凑拼图,其他 图片单独做一行处理,使用smartsprite方式拼图。一张sprite图,既有紧凑方式,又有 单行留白拼图。demo: 基本使用
  3. 对css文件意义的深度分析,知道css的意义,可以很方便的:
    1. 对背景图定位,通过分析css样式本身来获取信息,包括读取图片所在css规则中的,width, height, line-height, padding, background-position,通过计算来处理图片的位置
    2. 使用背景图的url参数来弥补一些css无法获取的信息,或者开发者的特殊处理
    3. 很好的处理css规则嵌套,和css hack,比如@media print{ body {}}
  4. 使用命令行执行,可以方便集成在自动发布过程中。
  5. 对于淘宝内容开发者,支持图片拼好以后,调用tps图片上传接口,上传图片,并且替换 图片url链接。

主要就是这些了,不知道读者觉得如何,还有什么功能你觉得应该有呢。

对sprite过的css修改

这种情况是,比如一个已经手动拼图好的css文件,样式是做个sprite处理的了,以前是手 动拼图,那么,此时如果需要增加一个背景图,或者,需要修改某个背景图,这样就属于对 sprite 的样式修改了。最简单的方式是追加,追加只会在原有的sprite图片最后追加一个 图片,并且写入追加背景图css定位信息。第二种属于覆盖原有图片,会把新的图片放在原 来sprite图片的相同位置,css样式不做修改。

修改sprite有时候可能会产生问题,比如某个图片使用的定位方式不是基于图片左上点,而 是使用0 -100% 这样的情况需要使用者自己判断了。不过,还是会有一些情况有用的。

css意义的分析,主要通过src/cssReader.js完成的,cssReader使用一个对象的三个属性 分别贮存一组css规则的selector, property, value,三者都是数组贮存,这样避免了使 用一个对象{property: value}这种情况下,遇到css hack时可能被覆盖了,比如 color: red; color: blue\9; color: #111\8,属性对应3个值。

comments powered by Disqus