RSS
people
Jul 14 2010

解决IE6背景图片不缓存的问题

By rain | Filled under: Web标准

IE6在背景图片缓存上有一个bug：它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片，在IE6下会出现每次鼠标滑过则重新向服务器请求图片，如果服务器反应较慢，那么hover效果就会出现短暂的空白，令人极度不爽。虽然可以通过CSS sprites的方式解决问题的，但效果差强人意。 示例： a{ background:url(normal.gif); } a:hover { background:url(hover.gif); } 如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片. 解决方法 具体的解决方法就是在页面中加入一段简单的javascript脚本，告诉IE6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand(“BackgroundImageCache”,false,true); 关于这段脚本的放置方式有两种：

1.使用CSS，在CSS中加入如下代码 html {}{ filter: expression(document.execCommand(“BackgroundImageCache”, false, true)); }

2.使用JS： document.execCommand(“BackgroundImageCache”,false,true);

2 Comments | Tags: ,
Jun 10 2010

让页面变得更快一点

By rain | Filled under: Web标准, dom&js

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验。非常不幸的是，效率最低的IE浏览器仍然占领者绝大多数市场份额，这已经严重制约了互联网的发展（感叹一下：“马赛克和IE——阻碍人类文明发展的绊脚石!”）。

简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：

  1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
  2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
  3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
  4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
  5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
  6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
  7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
  8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div>（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
  9. 终于等到了</html>的到来，浏览器泪流满面……
  10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
  11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。  read more »

1 Comment | Tags: ,
Nov 08 2009

css布局小结

By rain | Filled under: Web标准

css布局一般来说有两张方法，一种是浮动（float），一种是定位(position);根据填充的内容又可以分为固定宽度和自适应宽度，自适应宽度又被称作为“液态布局”。如果考虑到页面元素的加载的先后顺序的话（因为考虑到用户体验和带宽的问题，我们会把页面的主要内容先加载出来），那可能就会稍微复杂一点。

一、一列布局比较简单相信大家都会操作，我就在这里不做论述了

二、两列布局这个是重点，也是我们日常工作最容易遇到的情况；两列布局大致可以分为以下几种

1）两列都固定宽度；采用浮动和定位的方法均可以实现，不过浮动应该会更灵活一下；

Html代码：<div id=”container”>

<div id=”left”></div>

<div id=”right”></div>

</div>

Css代码：#left{float:left; width:300px;}

#right{float:left; width:300px;} read more »

No Comments | Tags:
Nov 04 2009

【转】网站可用性设计 – 6个最普遍的可用性设计错误

By rain | Filled under: Web标准

我厌恶Web站点的理由

人们使用web来与其他人进行交互，查找信息，在线购物，以及下载软件程序等。要容易的实现这些事情，当他们浏览一个新的网页的时候，他们要么熟悉 这些网站，要么是以直觉判断来确定正确的行动。一个良好的网站可用性设计，能够有效的帮助你的新访客找到他们真正需要的信息，作为一名访客而言，每到一个 新的网站总得上下翻转整个页面去寻找下载链接，那实在是一件让人烦心的事情（对于国内的部分下载站点，甚至以广告链接来冒充下载资源，那更是让人深恶痛 绝！）。

在下面的内容中，我将向大家展示一些我在去年的工作中总结出来的6个最普遍的网站可用性错误，大多数的网站站长和网页设计师都倾向于犯类似的错误。如果你对站点可用性工具感兴趣，可以参考：10个免费的web分析工具 – 网站访客分析及可用性研究

1. 让人困惑的网站结构和内容

对用户而言，没有什么东西比一个让人困惑的站点更让人气愤了，它们没有任何方位说明，混乱的站点导航，甚至没有站点导航，你根本没有办法在该站找到 下一个对你有用的信息，除了当前你正在浏览的页面，你最想做的事情就是立刻离开这个网站，并且永远不再回来！研究人员指出，网络用户应该能够在不超过3次 点击的情况下，在一个网站上的每一个页面去到任何一个他们想去的精确页面。

当然，我们说的3次点击肯定应该理解为同一个站点的任何两个不同网页之间。如果不能通过3次点击到达他们所需要的目标页面，你很可能会失去他们。检 查你的web站点，如果超过3次点击，web设计师会告诉你，如果你想重新设计或者定义网站结构，那将是一个非常耗费时间的活计！ read more »

No Comments | Tags: ,
Jun 14 2009

跨浏览器的inline-block

By rain | Filled under: Web标准

啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样的 PSD 文件：

就哭了。

一般说来，这种类型的布局是小菜一桩。固定宽度，固定高度，向左浮动就解决了。但是，这个设计中内容的多少是可变的，这就意味着如果这些块中的一些内容比其他的多，就会破坏这个布局。 read more »

No Comments | Tags: , ,
Mar 31 2009

转『小技巧为Firefox提速』

By rain | Filled under: Web标准

想提高你的Firefox的速度？这里教你一招。

越来越多的人已经熟悉了通过修改config文件来使你的Firefox更加强大。不管你是高手还是菜鸟，Gnoted教大家体验更完美的Firefox。即使那些忠实簇拥也不得不承认，Firefox有时会变得很慢——特别是当你尝试在4个窗口中打开35个标签栏时，它会让你感受到什么是绝望。不过，通过改善Firefox的缓存设置，你可以有效加快页面加载速度并减少它对系统资源的消耗。

如果你不了解如何修改config文件，也不要担心。按这里的指导做就万事大吉啦。当然如果你不放心，完全可以记下每一步所做的改动，必要时可以还原所做的修改。好了，不再废话了，现在就开始加速你的Firefox吧。 read more »

No Comments | Tags: ,
Mar 10 2009

Xenocode Browser Sandbox 浏览器兼容程序

By rain | Filled under: Web标准

今天xenocode 推出浏览器沙盘程序 （Xenocode Browser Sandbox），该程序可以让你直接在Windows 同时运行各种主流浏览器而无需安装它们。 由于Xenocode Browser Sandbox的工作原理是基于虚拟机技术，程序运行过程不会对本机进行不良操作，是一个很好的测试平台。

目前Xenocode Browser Sandbox支持的浏览器类型有 IE6，IE7，IE8，Firefox，Apple Safari， Opera 和 Google Chrome。

这个是一个很好的测试工具，你也就不用再考虑怎么在本机同时存在ie6,ie7,还有ff2，ff3共存的问题，都不存在了！

Xenocode Browser Sandbox主页： http://www.xenocode.com/browsers/

No Comments | Tags: ,
Feb 11 2009

关于可访问性(Accessibility)的WAI、WCAG 和 Section 508

By rain | Filled under: Web标准

前天和别人聊天聊到了一些Web可访问性的问题，当时还真有点懵了，只知道这些说法，可是具体怎么操作哦，好像还真的说不太完整，这两题就私下的看了一些文章给大家分享。

一、简介 — 为什么要考虑Web的易访问性

虽然大多数在线用户可以使用带有典型浏览器设置的 Web 浏览器来浏览 Web 站点，但是有残疾的用户通常使用其他方法来访问在线信息。举例来说，盲人用户可能使用一种纯文本浏览器，该浏览器可以将文本转换为盲文，或者使用屏幕阅读器大声朗读文本。一个有视觉障碍的人可能仍使用如 Internet Explorer 这样的浏览器，但要借助于屏幕放大镜或借助于配置为使用特大字体大小的浏览器。行动障碍可能阻碍了用户用鼠标或键盘作为输入设备。 read more »

No Comments | Tags: , ,
Jan 15 2009

用 CSS3 实现未来的 Web

By rain | Filled under: Web标准

CSS 3 + HTML 5 是未来的 Web，它们都还没有正式到来，虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧，可以帮你实现未来的 Web，不过，这些技术不应该用在正式的客户项目，它们更适合你的个人博客站点，Web 设计社区，或者不会有客户向你投诉的场合。
1. 圆角效果
read more »

No Comments |
Dec 12 2008

就 CSS3 向 Eric Meyer 请教的 6 个问题

By rain | Filled under: Web标准

CSS3早就听说要来了，但是现在也只能够看到W3c的草案，或者说是web标准的畅想，下面是Eric谈到的css3的文章分享给大家

Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解，他是这个领域杰出的专家，曾写过不少 CSS 方面的书，是 An Event Apart 的合伙创始人，A List Apart 团队成员，还是 Complex Spiral Consulting 的创始人。另外， Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家，他们负责维护和开发 CSS。

read more »

No Comments | Tags: ,
Older Entries