时光博客 - WEB开发中的可用性和用户体验
分类: HTML/CSS/JS

以用户为中心的产品设计理念

Posted by Kevin | Filed under HTML/CSS/JS | 2009-02-23

对于"以用户为中心的产品设计"，也就是"User Centered design"，以前都是按照自己的一些理解去做设计，没有详细的去体会和理解ucd，前些天在北京有一个面试网页设计师的机会，填完考卷后，面试官问我 有没有带个人作品，于是把个人作品给他看了下，面试官于是针对时光博客的 一些作品问了一些问题，都是关于设计理念和设计思路的。自己答得很不理想，因为自己做得多反思的少。很少去理解一些学术上的概念，只零散的知道一些模糊的 概念。谈话的过程持续了将近2个小时，中间面试官的话，很多让我受益匪浅，这次的面试让我学到了不少的设计思维和概念。感谢这次的面试官，同时在网上搜到 一些相关的技术文章，在这里分享一下

阅读全文  |   4495 次阅读，已有 3 人留下评论   |  Tags: ucd, design

JS中CSS Style标签对照表

Posted by Kevin | Filed under HTML/CSS/JS | 2009-02-12

写js时会用到，如果发现自己想要的效果没有实现，而程序没问题的话，就参照下此表对应看下标签是否正确。

 

 

阅读全文  |   7463 次阅读，已有 1 人留下评论   |  Tags: js, css, style, web

[译]Quirks mode in IE 6 and IE ...

Posted by Kevin | Filed under HTML/CSS/JS | 2009-02-01

由于近段时间在研究“Quriks mode”，找到的都是国外的文章，于是翻译了一篇。如翻译不准确，请参看原文.

将ie7运行在“怪异模式”下，对那些已经能熟练操作旧版IE中渲染和控制但是依然喜欢运行其他的浏览器在“标准兼容模式”，是一个不错的选择。这大概很少人会选择使用，但是它记录完整。

据IE 7开发团队（IE博客） ，IE7运行在“怪异模式”将采取类似的IE 6中的“怪异模式”，为了向下兼容的原因。我们还没有广泛测试此渲染模式。

如何触发怪异模式

一些doctypes （ Sivonen ; Gutfeldt ; Bergevin ）或列入一个<xml>声明，在IE6中，触发“怪异模式”或向后兼容模式 。在这种情况下， ie6就像IE5.5，并共享相同的bugs，问题和行为作为其高级版本。

在IE7中，一个<xml>声明不会再变化渲染模式（Campbell） 。谁想要保留所有版本的IE直到IE 7在怪异模式中（在不影响其他浏览器）已经不能依靠这个了。但是，在doctype前面，在<xml>声明后面插入一个行注释，在IE 7中仍会触发怪异模式 ，如在下面的例子。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.    <!-- ... and keep IE7 in quirks mode --> 
  3.    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/D
阅读全文  |   6694 次阅读，已有 2 人留下评论   |  Tags: quirks mode, ie6, ie7

[转]浏览器的两种模式quirks mode 和strict...

Posted by Kevin | Filed under HTML/CSS/JS | 2009-02-01

在看js代码时，有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西，一直也没深究怎么回事，只是零零碎碎的有些概念，最近终于受不了这种似懂非懂的感觉，决定好好学习总结一下。

1、quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).

3、后来的浏览器虽然支持strict mode，但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。注：Explorer 5仍然只支持quirks mode 

阅读全文  |   5740 次阅读，已有 1 人留下评论   |  Tags: web, quirks mode, strict mode, doctype

IE6中的min-width一般解决方法

Posted by Kevin | Filed under HTML/CSS/JS | 2009-01-31

上次翻译的一篇文章How to Use CSS to Solve min-width Problems in Internet Explorer中已经找到了非JavaScript和css expression 实现ie中的min-width。

这次我们看看CSS expression的实现方法：

  1. #content{   
  2. _width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');   
  3. }  

这里的 

  1. ((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700  

只是个判定条件，判定页面body的宽度，如果页面body的宽度小于700（这个要根据具体的页面来指定），就把content的宽度指定为600，否则就让它自适应宽度。这里的content宽度，可以根据自己的情况来设定。

5785 次阅读，已有 1 人留下评论   |  Tags: css, ie, expression, min-width

[译]min-width的跨浏览器兼容解决方法

Posted by Kevin | Filed under HTML/CSS/JS | 2009-01-30

项目中用到min-width，找了很多解决方案，都不管用，上蓝色经典问了些高人。版主推荐了一篇国外技术文章，觉得价值比较大，就翻译一下，收藏起来。英文比较差，如果翻译有错，还请指正。

介绍
min-width这个属性除了IE6，以及IE5.X以外的浏览器一般都支持.所以本文主要是针对IE的css hack!
对网页设计人员来说，缺乏支持的最小宽度min-width在Internet Explorer中造成了许多问题.到现在为止，唯一模拟min-width的方法是使用JavaScript或Internet Explorer的expressions语法（间接的JavaScript）.经过几个小时的尝试，我发现了一个纯CSS的方法.我的方法需要额外的一些div控制宽度和最小宽度，但我相信这是一个很小的代价，一个非 JavaScript方法工程跨浏览器（甚至在Mac IE5）

方法
基本思想是为那些理解min-width的浏览器提供如下正常的方法，对IE提供他独特的风格（我会解释一下教程）

The Css

  1. body {  
  2.  background:#fff url(rule.gif) 20px 0;  
  3.  color:#000;  
  4.  font-family:"trebuchet ms", "times new roman", times, serif;  
  5.  margin:20px;  
  6.  padding:0;  
  7. }  
  8. .width {  
  9.  width:50%;  
  10.  min-width:300px;  
  11.  background:#fff;  
  12. }  
  13.  
  14. .content {  
  15.  border:1px solid #c00;  
  16.  padding:5px;  
  17. }  
  18.  
  19. .rule {  
  20.  width:300px;  
  21.  background:#c00;  
  22.  color:#fff;  
  23.  margin:1em 0;  
  24. } 
阅读全文  |   5949 次阅读，已有 3 人留下评论   |  Tags: min-width, hack, css, cross, browers

Browers Meta Tag X-UA-Compatib...

Posted by Kevin | Filed under HTML/CSS/JS | 2009-01-29

打开浏览器查看liupeng.us的页面源代码，细心的朋友会发现meta信息里面多了个tag标签

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <meta http-equiv="Content-Language" content="utf-8" /> 
  6. <meta http-equiv="x-ua-compatible" content="IE=7" /> 
  7. <meta http-equiv="Pragma" content="no-cache" /> 
  8. <meta content="关注WEB标准,用户体验,关注前端技术,网页设计师,前端开发工程师,liupeng,Beijing China" name="keywords" /> 
  9. <meta content="关注WEB标准,用户体验,关注前端技术,网页设计师,前端开发工程师,liupeng,Beijing China" name="description" /> 
  10. <meta content="SaBlog" name="copyright" /> 

里面多了一句

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />  

X-UA-Compatible 是什么？

看看MSDN上的资料说明：

In IE8 Beta 1, that option is the “IE=7” X-UA-Compatible tag, which instructs IE8 to display content in IE7 Standards mode. However, the scenario this doesn’t address is when IE=7 is applied as an HTTP header to a site that contains Quirks mode pages. The IE=7 HTTP header will force all pages – both Quirks and Standards – to display in IE7 Standards mode. Developers using this header while updating their sites would then have to add the “IE=5” <META> tag to each page they want to keep in Quirks mode. This logic is fine for many websites. However, if a site has lots of Quirks mode pages, or for the case where pages with frames host a mix of Strict and Quirks mode content – as brought to light by IE8 Beta 1 user feedback – the compatibility opt-out adds a bit more work than we intended.

主要意思我总结一下：

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。

目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" /> 

这样我们才能使得页面在IE8里面表现正常！

 

参考资料：Introducing IE=EmulateIE7

6005 次阅读，已有 4 人留下评论   |  Tags: browers, meta, tag, x-ua-compatible
Total:30‹ Prev12345Next ›