無標題文檔

被「遗忘」的特殊字符

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

https://friable.rocks/_/2009_11_05/183385f09cbb.jpg

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

https://friable.rocks/_/2009_11_05/111115f09c86.jpg

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

<small>&#9660;</small>

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

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

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

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

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

再次考虑 Explorer6 的 PNG Alpha 支持

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

https://friable.rocks/_/2009_11_05/339925d94b8e.jpg

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

https://friable.rocks/_/2009_11_05/531065d94b8d.jpg

虽然出现此现象的原因未知,个人认为 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 的问题,所以使用了条件注释,避免其他浏览器加入无谓的结构。

https://friable.rocks/_/2009_11_05/015845a70e80.jpg

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

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

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

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

--EOF--

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

CSS 字体小贴士

今天收到份临时需求,就是将中文和英文控制在同一宽度以内(两个英文/数字的宽度为一个中文字符),我的解决方案是

font-family: Simsun,sans-serif;

看起来的效果就是这样的

https://friable.rocks/_/2008_05_28/1211940877.png

这里有点的担忧就是使用 Simsun 字体(也就是 Windows 下的「宋体」),在别的系统(比如 Mac 和 Unix 系列)是否能显示保持一致的效果。

有更好的解决办法的朋友,欢迎提出。另外,还有其他一些有用的资源,在这里列出下。

Windows 系统下默认的英文字体 Cheat Sheet (已打包,推荐下载)

有关 font-family 属性的介绍 ,比较基础

CSS Font Family 视频教程 (老外慢条斯理的声音让我受不了)

A List Apart 上的篇文章 ,同样不错

Safari 为何显示宋体的原因

Top 10 常用的英文 Blog 字体 (这个站点还有很多的 Top 系列,值得一看)

手机 Wap 下的 CSS 字体控制 (有待验证)

创建具有可访问性的 Slider

英文原文在此 ,对于 accessible 这个单词的理解,我个人认为是「可访问性」(原谅本人蹩脚的「国式英语」)。Slider 是 GUI 的基本控件之一, YUI 库中也有相应的组件 ,而我将其称之为「拉动条」。

废话不多说,下面我主要总结下原文作者的思路(翻译太麻烦,见谅)。在一般的情况下(二般的下面说),Slider 的值是唯一的。原作者认为从语义上理解,是个 select 元素集合,本人很是同意他的观点。

https://friable.rocks/_/2008_05_24/1211639806.png

但由于 CSS 对于 select 元素控制有限,原作者的方法是先使用 CSS 渲染某个 Javascript 动态生成的 div 容器(div 好控制得多,请再次原谅本人的 CSS 水准),然后使用 Javascript 将其动态的从视觉上替换这个 select,再将用户操作 div 的值传回给 select( 范例 )。

之所以这样的做法本人认为是具有「可访问性」的,是因为在没有 CSS 以及 Javascript 支持的情况下(因为上述的 div 根本就不会出现),用户仍然可以得知这个玩意是干什么的。

「二般」的情况,可能需要拉动条需要多个值(比如存储范围等)。则可以根据上述的思路,将两个指针到 div 中(这对于上述已经写好的 样式而言,并不复杂),然后分别代表两个 select 的值( 范例 )。

上述的原理和思路,本人认为并不复杂,但文章中作者的观点非常值得深究。尤其当用户使用「瘦的不能再瘦的浏览器」时,我们应当如何去处理。

自从传说中的 Web2.0 风起,很多「传统」的 「桌面 GUI 控件」都出现在 Web 中;同时很多现代的浏览器都提供了强大的「技术支持」(Javascript、CSS、Flash、etc...)。作为名 Web 开发人员,应当很清醒的意识到,离开上述「先进的技术」,我们的 HTML(结构)代码,是否还是值得阅读的?

在此做个反省,此前 本人做的一个进度条 ,目前看来毫无复用价值。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 其实无所谓叫什么名字,作为码农知道取名是件很难的事情。最后想到的这个名字,其实都没啥特别的含义,系统默认的文件名而已。

作为八零后,自认为还仅存点傲娇式的幽默感,以及对平淡生活的追求和向往。 为了免得对号入座和不必要的麻烦,声明本站点所持观点仅代表个人意见,不代表自己所服务公司的立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQGdyYWNlY29kZS5jb20K | base64 -d`

文章

项目