smartsprites 中文指南 (中)

薛华奥

2023-12-01

举个例子 , 例如 : 生成的 css 看起来像下面这样 :

#web

{

width: 17px;

height: 17px;

background-repeat: no-repeat;

background-position: left -0px;

}

#logo {

width: 50px; height: 50px;

background-repeat: no-repeat;

background-position: top right;

background-position: right -17px; }

#main-box {

background-repeat: repeat-x;

background-position: 5px left;

background-position: left -64px;

}

注意在生成的 css 文件中 , 所有的 SmartSprites 指令都被忽略了 ., 如果不幸你发现有的没有被删除掉 , 意味着这些个别的指令有语法错误 , 而被忽视掉了 , Warning messages 可以帮助你准确定位到这些问题 .

同样 , 如果发现 SmartSprites 没有去掉原始的 background-position 属性 , 但是将自己添加到了下边 . 你的 background-position 或者 background-image 属性下面出现了 SmartSprite 的 sprite reference 指令的话 , 你的设计可能被破坏 , .

原话为 :( Also notice that SmartSprites currently doesn't remove the original background-position properties, but appends its own ones below to shadow them. Your design may break if you have background-position or background-image properties appearing below the line with SmartSprite's sprite reference directive.)

5. 检查如果你的设计依然和以前一样 , 有可能 , 他不会马上生效 , 详见常见问题提示 . FAQ

( 原文为 : Check if your design still looks the same . Chances are, it won't right away. See FAQ for some tips)

6. 调节全局选项 . SmartSprites 有一些选项可以在命令行调用 , 可以更进一步的调节你的设计

a. --root-dir-path :: 指定 - SmartSprites 处理的路径 , 如果没有指定 css-files 或者指定了 output-dir-path , 则这个属性是必须的 , 默认值 , 不指定 .

SmartSprites 将会处理指定目录和其子目录下所有以 *.css 为扩展名的文件 , 对于处理 css 文件时更多细粒度的控制 , 请查看 css-files 项 .

如果提供的根目录是相对路径,则会解析为当前工作目录的路径.

b. --css-files : 要处理的 css 文件路径 , 如果没指定 root-dir-path , 则此选项是必须的 , 默认值 , 不指定 .

使用这个选项 , SmartSprites 将会处理所有的列出来的 css 文件 , 如果 css-files 和 output-dir-path 同时使用 , root-dir-path 也要指定 , 以便 SmartSprites 可以保持目录结构供给 output-dir-path 中的 root-dir-path .( 原文为 : root-dir-path must also be specified so that SmartSprites can preserve the directory structure found in root-dir-path in output-dir-path .) , 如果 root-dir-path 和 output-dir-path 使用了 , 在 root-dir-path 范围外的 css-files 将被忽略 .

相对路径的 css 文件将会被解释成当前工作目录 , 请注意 , SmartSprites 没有扩展任何通配符 ( 类似 : style/*.css ), it assumes the expansion is performed at the command line shell level.( 没译的原文 )

如果是指定一个 Ant 任务处理 css 文件列表 , 使用一个或者多个嵌套的 fileset 元素 , Please see the build.xml file in the distribution archive for an example.( 原文 , 应该是请查看示例中的部署文件 )

C. --output-dir-path : 处理的 css 文件和 css-relative sprite images 的输出路径 , 可选项 , 默认值 , 不指定 , 如果指定了一个非空的 output-dir-path . 也必须指定一个非空的 root-dir-path . root-dir-path 的目录结构将会保持原样输出到输出路径中 . 例如 : 如果 root-dir-path 中的 css 文件在目录 css/base 下 , 处理结果将会输出到 output-dir-path/css/base 路径下 . 并且 CSS-relative sprite images 也会输出到这个路径中 . Sprite images 相对于 document-root-relative 的 urls 会被改写为相对于 document-root-dir-path 的 . 如果 output-dir-path 路径不存在 , 将会被创建 , 如果提供的路径为相对的 , 则会被认为是相对于当前工作路径的 .

你可以设置 output-dir-path 为空值 , 这样生成的 css 文件将和原始文件在同一目录下 , 扩展名由 css-file-suffix 指定 . sprite images 也和原始文件在同一目录下 ..

如果你使用了一个非空的 output-dir-path , 你也可以使用一个非空的 css-file-suffix .

D. --document-root-dir-path : Document root path for document-root-relative (starting with / ) image urls in CSS,( 原文 , 意思应该是提供一个上下文路径, 以便css 中的img 相对路径作为参考 )

可选项 . 默认值 , 不指定 .

所有 document-root-relative 图片和 sprite 的 urls 都是相对于 document-root-dir-path 的 , 并且 document-root-relativesprites 的 urls 会被重写为相对于 document-root-dir-path . 如果你的 css 图片都是相对路径的 , 这个属性可以置空 , 如果提供的是相对路径 , 则会认为相对于当前工作目录 .

E ． --log-level : 消息级别 , 可选项 , 默认值为 :INFO

重要性低于 log-level 级别的日志信息将被输出 , SmartSprites 有 3 级别的日志信息 ( 重要程度递增 )

1, INFO : information messages, 可忽略 .

2, IE6NOTICE: 注意 : 可能与创建 IE6-friendly sprite images 时的质量损耗有关系 ., 参见 : IE6-friendly PNG 项

3, WARN: warnings 相关的语法 , 此日志的原因是转换的时候发生 IO 和 sprite 渲染质量损耗问题 , 原来的设计将被破坏 .

( 原文 :warnings related to syntax, IO and sprite rendering quality loss problems that may cause the converted sprite-based designs look broken)

F: --sprite-png-depth : PNG 格式的颜色深度 , 可选项 , 默认值 :AUTO.

1. AUTO : Png 颜色深度将会自动选择 . 如果 sprite 图片没有包含部分透明 (alpha 通道 ) 并且少于 256 色 , 将会采用 PNG8 , 否则 , 将会采用 PNG24.

2. DIRECT: PNG24.

3. INDEXED : 采用 png8 , 如果有半透明 (alpha channel) 或者色值大于 256 色 , 则会发生损耗 , 这时候会给出 warnings 信息 , 参见 sprite-matte-color 属性 .

G: --sprite-png-ie6 : 如果指定 sprite-png-ie6 :, 则遍历 png sprite image, 寻找有半透明 (alpha channel) 或者大于 255 色并且透明的 png, SmartSprites 将会为 IE6 生成一个对应的颜色减少的 PNG8 文件 , 一条额外的 IE6 支持的 css 会被添加入生成的 css 文件 , 确保 IE6( 并且只有 IE6) 使用色值缩水的版本 :

#web {

width: 17px; height: 17px;

background-repeat: no-repeat;

-background-image: url('../img/mysprite-ie6.png');

background-position: left -0px;

}

参见 : IE6-friendly PNG 项 .

H: --css-file-encoding : 假定输入和输出的 css 文件的编码 , 默认值 : UTF-8, 允许的值列表 , 请参见 list of encodings supported in Java ..

I. --css-file-suffix : 追加到处理过的 css 的文件名后面的后缀 , 可选项 , 默认为 : -sprite .

7. 用 build 脚本来整合 SmartSprites, SmartSprites comes with an Ant that performs sprite processing and has exactly the same options as the command line invocation.( 原文 , 大意是 ,Ant 生成sprite 和命令行调用完全一样 ), 对于一个任务调用的示例 , 请看一下 build.xml 脚本 , 它执行任务时会从 smartsprites.properties 属性文件中读取参数生成 sprites. 请注意 , 不同于命令行接口 ,Ant 任务解释相对路径为 build.xml 文件的位置 .

Frequently Asked Questions( 常见问题 )

1. 转换成 sprites 后 , 和我原来的设计完全不一样 . 咋回事 ?

这种情况可能发生 :-), 首先 , 检查 SmartSprites warning 信息 , 他们会指出一些因为语法错误而被忽略的指令 . 在进一步的调查前 , 确保没有警告信息 .

第二步,确保每个SmartSprites指令都在单独的一行内.包含 */ 序列结束注释,否则,你可能得到不可预知的结果.

第三步 , 就像前面章节所示的那样 , SmartSprites 暂时没有去掉原始的 background-position 属性 , 只是把自己像影子一样附加在了下面 . 你的设计可能被破坏 , 如果你有 background-position 或者 background-image 属性出现在 SmartSprite's sprite reference 指令的下面 . 这种情况下 , SmartSprites 会输出一个警告信息 (warning), 如果这种情况发生了 , 要移动被重写的属性到 sprite reference 指令的前面 , 重新运行 SmartSprites.

2. 其他图片从 sprite 中露出来了 , 这种情况发生的原因是盒子 (div) 的大小大于 sprited image 了 , 在这种情况下 , 其它的靠下的或者靠右的图片将显示出来.

修正这个问题的方法: 你可以设置盒子(div) 的尺寸与图片大小相同, 如果是不可能的, 使用sprite 外边距( 例如: sprite-margin-bottom ) 里创建一些空白区域, 这样, 左边和右边的图片就不会显示出来了.

3. 在 sprites 中 , 重复的图片不重复了 , 是否是一个 bug? 图片水平平铺 ( background-repeat: repeat-x ) 需要增加一个垂直布局的 sprite( sprite-layout: vertical ), 图片垂直平铺 ( background-repeat: repeat-x ) 需要在一个水平布局的 sprite( sprite-layout: horizontal ) 中 , 没有其他的方式解决这个问题 , 因此在 SmartSprites 中,sprite image 有两种布局方式.

4. 是否有一些使用 SmartsSprites 的大的示例我可以看一看? 是的, 看一下 test/ real-world-example 路径下分布的目录, 这是我工作中的一份原始设计, 然后产生了 SmartSprites 这个点子.