被“遗忘”的特殊字符July 28, 2008

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

http://files.gracecode.com/2009_11_05/183385f09cbb.jpg

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

http://files.gracecode.com/2009_11_05/111115f09c86.jpg

按照本人第一眼的印象,我会将“更多”右侧的三角箭头做成背景。但是 Google 很“放心”地使用了

<small>&#9660;</small>

这样的特殊字符。我不确定 Google 这样做,是否仅仅是为了减少图片的加载量。但从某个侧面说明,Google 是个很“现实”的公司。

那么回过头来,个人观点是在尽可能的情况下,使用具有意义或者是有“特殊功能”的特殊字符。

首先,很多情况下,常用的特殊字符都会有相应的缩写,比如上述的 &hellip; 、&divide; 等等。这种特殊字符的本身,我认为就是具有一定的语义的。

其次,特殊字符能帮我们的忙,比如可以参考 圆心 的一篇文章

当然,这样同时也是一种博弈的过程。正如早期有人会使用 &nbsp; 加大间距一样,滥用特殊字符反而有害而无利。

再次考虑 Explorer6 的 PNG Alpha 支持July 11, 2008

众所周知,由于 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 载入时,页面有明显的载入状态提示,如图

http://files.gracecode.com/2009_11_05/339925d94b8e.jpg

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

http://files.gracecode.com/2009_11_05/531065d94b8d.jpg

虽然出现此现象的原因未知,个人认为 Javascript 载入方式为统一循环渲染,而使用 behavior 时为使用 CSS 选择器获得,它是逐步渲染(了解明确原因的兄弟请告知,谢谢)。

而上述的测试可能有点极端 -- 我添加了 200 个节点。在日常的页面中,使用 behavior 属性情况不大(少于 10 个)、但背景要求质量很高(必须是 PNG,且还有透明)的情况下,还是可以考虑 behavior 属性的。

在 Explorer6 还未完全退出市场之前,加入条 CSS 语句就能解决透明 PNG 的问题(再加上针对 Explorer6 的 hack,其他版本的 Explorer 不受影响),也甚为方便。

有关层的两个便签June 2, 2008

两个都是不大不小的问题,在这里记录一下。

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 的问题,所以使用了条件注释,避免其他浏览器加入无谓的结构。

http://files.gracecode.com/2009_11_05/015845a70e80.jpg

期间和 小马 讨论过是否将其写成脚本,回答是“基于效果、或者 BugFix 类的问题,出于效率的考虑,尽量不要使用脚本”。我同意他的观点,比如上述的代码对于其他非 Explorer 浏览器而言,仅仅是注释而已。

进一步的改进,可以使用脚本判断时候否是 Explorer 6 ,并动态加入 iframe 。排除效率的问题,这样操作更通用些。

相关的参考资料:这里这里 还有 这里

最后,上述两个问题的 DEMO 页面在这里

--EOF--

顺便提下,Yupoo 支持 Flash 图像输出了,正好在这里用上。不过,我更喜欢直接用原图,这样更通用些。

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
Yahoo 统计