WebDev

用css 写的一个浏览器检测

这个用css hacks 判断浏览器大概是上个月写的,其中的hacks基本涵盖了大部分浏览器,本页面经过测试的浏览器:IE5.0、IE5.5、IE6、 IE7、IE8(beta1&beta2)、Opera 9.5, Firefox 3, Safari4、K-Meleon、Google Chrome。 其实用css判断浏览器是没有什么意义的,其主要意义就在于css hack在多浏览器下的使用,及如何用更少的css代码来实现各种主流浏览器的兼容。这个页面里的css hacks基本上囊括了ie系列(ie5.0-IE8)的csshack,同时也加入了不太常用的针对Opera和Safari的css hacks。

演示可以见:http://www.fantxi.com/blog/demo/html/browser_detector.html

在css hacks方面,我觉得最好不要用!important来提升指定样式的优先权,我不喜欢这它,因为如果使用它的话,你可能会发现写出的css代码相对较多。当然也不是完全不用它,目的只是当我们加入hacks时,是否要考虑一下如何才能使css的代码更精简?顺便也应该想到,当我们写XHTML代码时,是否考虑某处用div合适,还是ul合适,或者是dl合适?当我们写javascript的时候呢,是否也可以使用最少的代码来实现某一效果?有些人只是写出了div、css代码就很自豪的说自己已经会div、css了,当我问他浏览器兼容和HTML标签语义化时,他却说不出。其实有很多地方值得我们去研究,上次帮公司做的网页,css和js代码基本都被我压缩的不能再压缩了,先手工压缩再机器压缩,很爽很爽:), 不过他们说我变态~。其实这样网站的效率才能达到最高。

我的做法就是在做网页时,应该以firefox来作为参照,然后再在ie和其他浏览器下测试,这样写出的css代码可能会是最少的。还有就是善用display:inline来解决ie下margin加倍,善用clear:both,有时也可以这样:<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->,给IE单独做一个css。因为之前做的是门户级的网站,写了很多页面,从中也学到了很多新知识,一时想不起来了,有时间再整理出来。还有只要结构写的好,不需要hack大部分也都能兼容。能不用hack就不用。

Tags: hacks , css

最近,最近,最近

以前是工作太忙了,还加了很多次班,根本没时间管理blog,导致blog都快长草了~最近,属于自己的时间多了,本来想好好玩玩,好好休息休息,但发现这几天仍然比较忙,还是有很多事情做。

前两天把fantxi的域名续费了,把fantxi.com的首页代码又重写了一遍。其实很有冲动做个sablog2.0的模板,不过这件事的优先级可能是最低的。。

最近面临一个选择,这个选择也许会对自己的人生产生重大影响,希望自己多用些心思在这方面。

最近粗略看了一些用户体验、网站运营方面的资料,受益不少,对那些作者表示感谢。

又发现了点css hack的写法

 之前在这里:http://www.fantxi.com/blog/archives/534总结了一次,这次加上点。

css代码
  1. 这个是基本大家都知道的:   
  2. test{margin:1px!important;margin:2px}   
  3. firefox/IE7 -> 1px  
  4. IE6 -> 2px  
  5.   
  6. 下面两个是新发现的(这里不考虑IE5了,最值得看的就是第三个):   
  7. test{margin:1px;+margin:2px}   
  8. firefox ->1px  
  9. IE6/IE7 ->2px 
  10.   
  11. test{margin:4px!important;>margin:3px!important;margin:2px;}   
  12. firefox -> 4px  
  13. IE7 -> 3px  
  14. IE6 -> 2px  

Tags: css

译文:开发人员经常犯的8个设计错误

计师在抱怨开发人员不尊重Web标准,后台开发人员在抱怨为什么不可以增加一个空格。PM在抱怨为什么项目总是因为那些看似简单的问题而延期……如何才能提高后台开发人员与设计师以及前端开发工程师的合作效率?相信很多网站或软件开发公司都越到类似的问题。

从UED的角度而言,我们的天职是追求用户体验。我们应该尽力坚持自己应该坚持的东西。白鸦曾经说过,用户体验不只是UED的事情,而是整个开发团队乃至整个公司需要参与的事情。

我们不能只是抱怨,我们去理解开发人员。同样,我们做出努力,让开发人员去理解我们。

我们努力去先做出改变。(小马按语)

原文地址: 8 Web Design Mistakes That Developers Make

一个优秀的网站是优秀的设计和优秀的代码的结合,你经常发现设计师不得不去理解代码,而开发人员尝试自己去设计。 开发人员花费大学生涯和与其他开发人员一起学习,我可以肯定的说程序员并不是设计师。谢天谢地,我们以前可以评判代码是否重用或者符合正确的OO方法论,但却无法评判美学。 但现在,一个开发人员最值钱的资产就是他对设计的敏锐的理解。

现在据我所知,程序员可能从不需要任何设计的知识(或者说,设计师从不需要了解程序)。但事实是,每一个拥有个人项目、少量客户或是管理角色的程序员都需要设计。甚至,我可以说,显而易见,一个自由工作者最大优势就在于,培养潜在的客户让他们渴望理解整个网站的建构过程。所以一个人正在学习做一个开发人员的同时,也需要学设计(至少尝试去做),以下就是我曾经听说或者犯过的8个错误。

“我知道什么看起来很好(我有photoshop)”

这是成为差劲的设计师的原因之一。更无可救药的是本来就很差劲了,还以为自己很好。每个好的设计师都有一个度量好设计的“设计标准”,这个经验来自于自己经常看好的设计。你需要把时间花费在看伟大的设计上,诸如TheFWA, FaveUp, Design is Kinky, 和我个人喜欢的 Behance Network 这些网站。你可能也知道如何去挑选设计杂志,比如How或者print(注意两者并不都是美国的,可能更加国际化一些)。就像好的程序员喜欢看(或评论)其他人的代码一样,好的设计师也总是环顾他人的工作成果,无论是站点、广告牌还是菜单。没有一个好的“设计标准”,即使有大量的photoshop滤镜也拯救不了你。

“一再地使用蓝色和白色”

大多数程序员嘲笑一个设计师总是花费大量的时间来为站点挑选精确的颜色。但是,颜色总要比你想象中还重要,并且你不能在站点构建的时候来更改(至少,那时候就不得不花费大的气力)。象很多事物一样,观察一个好的设计师的配色方案是很有帮助的,寻找配色方案最好的一个站点是COLOURlovers.

“我把每样东西都居中”

大多数情况下,将标题、标语和副本的一部分居中很自然。但是通常,将网页上的文字居中就很外行了。左对齐是很保险的做法,但往往最好是视情况而定。更好地是,在photoshop中利用标尺和网格精确地计算你网站的各个部分。这并不意味着你的设计像格子一样,但是眼睛可以注意到理应被排成一行的几部分却没有这样排列的情况(特别是文本)。每个像素都很重要。

“使用免费的字体…它对于我来说看起来不错”

我曾有一段时间这样想:(a)所有的衬线字看起来都一样(b)没有任何字体值得付钱。我现在把这两条都废除了,去继续学习更多的字体知识,那是一个复杂而美丽的世界。坦诚地讲,如果有一个领域我能成为专家,我希望是字体。你可以只用一点颜色和不错的字体来建立伟大的站点(这只是任何伟大设计的基础)。再次申明,在字体方面要做得更好,需要你多阅读好的站点培养你的眼睛。

“我们可以在那里放置更多的信息”

在拥有程序员和设计师的团队里工作,两者间一个普遍的争论是“空间的利用”,程序员想在页面明显的位置放置尽可能多的信息。设计师争论道,眼睛不可能承受如此多的东西,最好只是在明显的位置只放置logo和标语。尝试去找到最佳的平衡,需要知道(a)杂乱的网站可能没有效果(b)留白不是懒惰的设计师在倒退 (c)被称作“空”的部分是很必要的,以便突出其它元素。

“我可不想为照片付钱”

槽糕的图片或照片可以毁灭一个合理的网站,同时经过简单处理的伟大图片可以看起来很好。在网页上那么多的资源,没有理由使用差劲的图片。对于非营利站点而言,可以查看stock.xchng 或 Flickr。对于商业的站点,有许许多多的站点,比如iStockPhoto(但是需要了解版权的知识,因为不久后,你可能在其他站点上看到同样的照片了)。最后不要为在诸如Veer这样的站点上找到完美的照片而花费大笔的钱吓坏了。

“我无需询问意见”

更多地询问而不是闭门造车,你会成为你们设计师的最大粉丝(尽管你戴着一副玫瑰色的眼镜)。你需要询问你认识的设计师,以便得到坦诚的评价。不幸的是,我知道大多数被我问过的人,都只是赞誉而非批评。所以让你的自尊滚一边去吧,戴上“知识”这顶帽子。因为这些人是设计师而你不是。然后在你得到了他们的反馈之后,尊重他们、信任他们,并做一些改变。

“无需得到太多细节”

就像你很一般的代码需要等待提高(虽然仍能执行),你也有一些还说的过去的设计,但是离伟大差得远呢。看伟大的设计很容易这样想“这看起来没什么嘛”,但是事实上,伟大的设计花费了很多的时间(特别是对设计的新手)。但是有这些伟大的设计,你只是看到了最终的产品,并不知道设计者期间经历了多少次编辑和修改。甚至,你可能会惊讶于一条分割线会为设计带来多大的不同。当你把所有元素刚放在一起的时候,别以为设计做“完”了。

总而言之,伟大的设计(就像伟大的代码)很耗时间、耐心和技巧——因此,应该得到适当的尊重。尽管作为程序员(或者是内容编辑还是其他的web员工),你可能从不需要设计整个一个站点,但我有一种感觉,或多或少,你不得不做一点设计。如果可能的话,你尽量不要犯以上的错误……

文章来源: http://ued.taobao.com/blog/2008/02/01/8-web-design-mistakes-that-developers-make/

Tags: 设计 错误

js 解决两列、三栏div等高(自适应高度)

  1. <script type="text/javascript">    
  2. <!--    
  3. var l=document.getElementById("left").scrollHeight;   
  4. var r=document.getElementById("right").scrollHeight   
  5. if (r>l)   
  6. {   
  7. document.getElementById("left").style.height=document.getElementById("right").scrollHeight+"px";   
  8.   
  9. }   
  10. else  
  11. {   
  12. document.getElementById("right").style.height=document.getElementById("left").scrollHeight+"px";   
  13. }   
  14. -->    
  15. </script>   

网上的div等高方法大致有五种,这个算是其中一种的完善,无论left或是right高时,都可以实现自适应高度。而且就算遇到left或right里面有其他元素影响时,也可以通过在+"px"; 前面加上加减乘除来达到满意的效果,例,可写成:+5+"px"。

下面是三栏等高:

  1. <script language="javascript"
  2. var l=document.getElementById("left").scrollHeight 
  3. var m=document.getElementById("middle").scrollHeight 
  4. var r=document.getElementById("right").scrollHeight 
  5. layoutHeight=Math.max(l,m,r) 
  6. document.getElementById("left").style.height=layoutHeight+"px" 
  7. document.getElementById("right").style.height=layoutHeight+"px" 
  8. document.getElementById("middle").style.height=layoutHeight+"px" 
  9. </script> 

 

Tags: javascript

Total: 110Page 4 of 22‹ Prev1234567Next ›Last »