由于“历史的问题”,我承认有时候会有意无意的避免使用 (X)HTML 特殊字符的使用。清早 无坏 兄弟就在群里吼,为什么这两个省略号会不一样?

经查,原来是左侧使用的是 … 这样的 (X)HTML 的特殊字符,而右侧的是,英文三个半角点(.)。再有个例子,我想到的就是 Google 首页的那个三角箭头,如图

按照本人第一眼的印象,我会将“更多”右侧的三角箭头做成背景。但是 Google 很“放心”地使用了
<small>▼</small>
这样的特殊字符。我不确定 Google 这样做,是否仅仅是为了减少图片的加载量。但从某个侧面说明,Google 是个很“现实”的公司。
那么回过头来,个人观点是在尽可能的情况下,使用具有意义或者是有“特殊功能”的特殊字符。
首先,很多情况下,常用的特殊字符都会有相应的缩写,比如上述的 … 、÷ 等等。这种特殊字符的本身,我认为就是具有一定的语义的。
其次,特殊字符能帮我们的忙,比如可以参考 圆心 的一篇文章。
当然,这样同时也是一种博弈的过程。正如早期有人会使用 加大间距一样,滥用特殊字符反而有害而无利。
众所周知,由于 Explorer7 以下的版本对于透明 PNG 的支持非常的不完善。这个问题甚至在一定的程度上,影响了 PNG 格式在 Web 中的使用。
所幸的是,已经有部分的解决方案,那就是“以毒攻毒”使用 Microsoft 的私有滤镜(详细)。
用到 PNG 图片通常有两种方式,分别是图片和背景。在插入 PNG 图片方面,hack 的方法就是使用脚本将原图替换成原图,然后将 img 的 src 属性指向透明的 gif 文件(撑位置)。而在使用 PNG 背景中,就会有些许的问题。
根据官方的文档,对于 AlphaImageLoader 的描述如下:
AlphaImageLoader Filter
Displays an image within the boundaries of the object and between
the object background and content, with options to clip or resize
the image. When loading a Portable Network Graphics (PNG) image,
tranparency—from zero to 100 percent—is supported.
是的,我们 hack 时候加入的图片是处于背景(background)和内容(content)之间的一层。所以滤镜代替使用背景,不能完全实现背景的功能,比如 background-position 以及 background-repeat 等(如有解决的方案,请告知)。
综合上面所述,可以查看 DEMO 。jQuery 方面已经有个名叫 ifixpng 的插件。
加入滤镜非常耗费系统资源的,尤其是处理大量图片的情况下。目前已知的情况下,可以使用两种方式载入脚本,第一种就是传统的 Javascript,第二种我也是后来才得知,就是使用 Explorer 的私有属性 behavior CSS 方法(详细)。
就个人的观点谈下这两种方法。首先使用传统的 Javascript 方法需要更改结构(加入 script 标签),而 behavior 方法则在 CSS 中指定,并不需要更改结构。同时,behavior 能更好的控制需要渲染的节点(使用 CSS 选择器)。
但 behavior 方法与 CSS expression 一样,需要注意效率问题(由于是 Explorer 属性,效率未知)。并在现有的情况下,CSS 的编写人员可能会对 behavior 方法感到迷惑。
总之,个人认为对于视觉效果方面的 Hack ,能不添加无谓的结构就不添加。正如上面的 behavior 属性可能会造成迷惑一样,在结构中加入某条 script 标签同样会使人迷惑,这是种博弈。
参考资料(部分链接已在文中提及)
-- Split --
后记,在实际测试可能性方案中,发现这两种载入方式的效率不尽相同。在使用 behavior 载入时,页面有明显的载入状态提示,如图

但是用 fidder 追踪发现并没有循环请求数据,如图

虽然出现此现象的原因未知,个人认为 Javascript 载入方式为统一循环渲染,而使用 behavior 时为使用 CSS 选择器获得,它是逐步渲染(了解明确原因的兄弟请告知,谢谢)。
而上述的测试可能有点极端 -- 我添加了 200 个节点。在日常的页面中,使用 behavior 属性情况不大(少于 10 个)、但背景要求质量很高(必须是 PNG,且还有透明)的情况下,还是可以考虑 behavior 属性的。
在 Explorer6 还未完全退出市场之前,加入条 CSS 语句就能解决透明 PNG 的问题(再加上针对 Explorer6 的 hack,其他版本的 Explorer 不受影响),也甚为方便。
两个都是不大不小的问题,在这里记录一下。
Flash 的遮盖问题
Flash 在默认没有相应参数的情况下,会遮盖 HTML 层并不受 CSS 的 z-index 属性控制。在这里有个简单的方法,就是在 object 中加入
<param value="transparent" name="wmode" />
即可。如果使用了 embed ,务必将此属性也加入
wmode="transparent"
这样,就不会遮盖绝对定位的层了。不过此时 object 还是不受 CSS 的 z-index 控制,寻求解决方案中。
参考链接,这里 还有 这里。
Explorer 6 下的 select 遮盖问题
这是个老的问题了,但是如果不小心的话还是出出现。问题是在 Explorer 6 下,某个绝对定位的层无法遮住 select 控件,而解决的办法就是使用 iframe 将其遮住,代码如下:
<!--[if lte IE 6.5]>
<div style="position:absolute;z-index:-1; top: 0; left: 0;">
<iframe
style="filter:alpha(opacity=0); width:210px; height: 110px;">
</iframe>
</div>
<![endif]-->因为这仅仅是 Explorer 6 的问题,所以使用了条件注释,避免其他浏览器加入无谓的结构。

期间和 小马 讨论过是否将其写成脚本,回答是“基于效果、或者 BugFix 类的问题,出于效率的考虑,尽量不要使用脚本”。我同意他的观点,比如上述的代码对于其他非 Explorer 浏览器而言,仅仅是注释而已。
进一步的改进,可以使用脚本判断时候否是 Explorer 6 ,并动态加入 iframe 。排除效率的问题,这样操作更通用些。
相关的参考资料:这里、这里 还有 这里。
最后,上述两个问题的 DEMO 页面在这里。
--EOF--
顺便提下,Yupoo 支持 Flash 图像输出了,正好在这里用上。不过,我更喜欢直接用原图,这样更通用些。
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »