WebDev

开始使用 html5+css3吧

kairyou 发表于 2009-12-11, 4:00 PM

 XHTML1.0、XHTML1.1的doctype不嫌长吗？虽然XHTML1.1比XHTML1.0的少了几个字母，但html5仅需：<!DOCTYPE html>，喜欢探索的同学应该注意到了淘宝、土豆的首页，都使用了html5的DTD。

html5的编码仅需：<meta charset="utf-8">，html5可以直接<style></style>、<script></script>,不需要加type="text/css"、type="text/javascript"。而且还加入了更语义化的：header、nav、menu、article、aside、details、dialog、footer等，不过为了兼容IE(IE下css里设置html5新增元素的样式无效)目前还是使用div吧。或者是把<!--[if IE]>http://html5shiv.googlecode.com/svn/trunk/html5.js<![endif]-->加入<head>，然后用到的块级元素(section, article, aside, header, footer, nav, dialog, figure)在css加上：display:block也可以。原理就是用js先创建这些元素，然后ie下面就可以应用css的样式了。具体例子可看：http://ejohn.org/blog/html5-shiv/
 
css3的圆角阴影等虽然在兼容上有问题，有些时候部分内容也可以用一下,毕竟新技术是要不断学习的。总要学点啥吧？
 
最近用html5、css3写了一个门户站，感觉优化的极好，结构和兼容性都很满意，很有成就感，哈哈

 

发表在: WebDev 0 条评论 阅读 254 次

vim使用autocomplpop插件编辑html文件错误的解决

kairyou 发表于 2009-11-19, 6:02 PM

autocomplpop插件绝对是一个出色的差价，边输入边提示，使VIM看起来像IDE了。废话不多说了，使用autocomplpop编辑html文件时，比如输入"<div " （DIV空格），这时会弹出提示来，当选择[class=" CDATA]或者[id=" ID]时，VIM会报错：

Error detected while processing function htmlcomplete#complete tags:
line 304
E121: Undefined variable :classlines

下面提供两个解决方法：

1、我的：把plugin/acp.vim 的35/36行（html/xhtml那里 ）删除掉,100-104/106-110行 删除或者注释掉。

2、我也发了邮件给作者，他说没有发现任何问题（可能他用的LINUX），经过两次交流，他发给我个地址：http://likealunatic.jp/2009/09/29_acpvim.php，这里的方法是：编辑：autoload/htmlcomplete.vim，

245-256行注释掉（246、247不注释），294-310行注释掉（295、296、307、308不注释）

推荐第二种，因为我的方法，在html下面没有autocomplpop的功能了，当然，如不需要HTML的提示也可以用第一种。

Tags: vim

发表在: WebDev 2 条评论 阅读 489 次

加入VIM阵营了

kairyou 发表于 2009-11-15, 10:38 AM

刚接触vim应该是2年前吧，到现在才去尝试把它作为自己的主要编辑器。VIM的界面实在太普通，貌似是从史前一万年座时空穿梭机来的，这点绝对是让很多人不想接触它的原因之一，不过我们使用gVim，下几个配色方案、插件或者别人的配置，感觉会舒服许多。

VIM不愧是世界第二，可制定性很强大，而且插件N多，虽然开始有些不适，需要在下面打一些命令。但是我会强制多使用它的，用熟练了是绝对可以提高效率地。
优秀的软件的发展应该就要走这个路线，自己本身提供最基本的功能，然后超强的可制定性，加上很多好用的插件等待你去发掘。比如：前端开发er必备的firefox。
但是Editplus也算是比较优秀的编辑器，缺点就是制定性有限（还有，是收费的:)）。ed自己配置后，很多功能也是可以用快捷键实现，开发效率也是比较快的。目前的状况是vim有的ed没有，ed有的vim(可能还)没有。所以一段时间内，这两个都是我不可或缺的软件。

使用vim，推荐看看这篇文章，http://blog.chinaunix.net/u/3514/showart.php?id=1974190
http://vimcdoc.sourceforge.net/ 这里的pdf手册
或者在线阅读：http://vimcdoc.sourceforge.net/doc/help.html
VIM的命令实在太多，如果一个人能熟练使用它所有的命令，那他一定是个使用VIM很多年的大牛了。不要太贪，想一下就可以驾驭它，可以慢慢去发掘，慢慢去体会。

另外再推荐一个VIM插件：autocomplpop(语法自动提示，像VS2008、DW的提示，很好很强大)http://www.vim.org/scripts/script.php?script_id=1879
还有：snipMate(tab键代码段补全（仿MAC下的TextMate的补全）)http://www.vim.org/scripts/script.php?script_id=2540，针对不同的文件类型可以自己制定，发现没有css制定的，粗略看了下它里面的注释是用的#号开头，应该会和css里面的冲突，不过用了：autocomplpop这点完全可以忽略了。
autocomplpop的确是很不错的插件，这个插件应该会让很多使用其他编辑器的人加入VIM阵营吧～
在推荐2个防TextMate的配色方案
    eclm_wombat.vim:    http://www.vim.org/scripts/script.php?script_id=2490
    blackboard.vim:        http://www.vim.org/scripts/script.php?script_id=2280
    vim72\colors\里面自带的：desert.vim、slate.vim也是不错的

google的 Closure Compiler 真的很强大，压缩js效果很好。

Tags: vim

发表在: WebDev 0 条评论 阅读 329 次

最近也尝试使用jquery写页面了

kairyou 发表于 2009-09-21, 2:07 AM

其实自己写了一个js库的，这也不能算是库吧，因为叫库的话，应该要比较强大吧。和jquery、mootools、yui那些比起来简直差好多。我这个只是把自己常用的整理在了一起，比如：addclass、hasclass、removeclass、cookies、getByClassName、event等一些最常用的，相对简单许多了，写法应该和JQ、yui的有些类似吧。因为JQ压缩版也有50多K，而我写的因为简单，做一个门户站的话，全站的js差不多也就30来k，所以还是有些好处的，因为大家都知道仅仅因为一个tab切换而去用jq的话，那算是暴发户所为吧，太浪费了。但是这个有一个缺点，因为JS代码不统一，而合作开发的人如果要用到里面的写法，那么就会需要花费时间，或者，可能他自己加入了另一个js库去实现页面，那么与其这样倒不如团队统一。自己写的那个js目前也用在了两个门户站还有几个小站上面，也算知足了吧。那么goodbye了，为了团队开始用jq吧。

发表在: WebDev 0 条评论 阅读 377 次

发现了一个IE6的2个form嵌套bug

kairyou 发表于 2009-04-08, 9:00 PM

如果网站是.net程序的话，body下面紧跟着就是一个form，因此页面出现两个form的几率很高。在做公司目前的一个项目时，发现当在网页中加进去一个form后，用ie6测试时，发现加进去的form后面的文字变成居中对齐了。比如下面的代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
  5. <style>
  6. body,div,h2,form,p{margin:0;padding:0;font-weight:400;} 
  7. body{background:#FFF;color:#444;font:12px/20px Arial;text-align:center;} 

  9. #body,#ft{clear:both;width:706px;margin:0 auto;border:1px solid #CCC;text-align:left;} 
  10. #body div{text-align:left;} 
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15. <form>第一个form 
  16.     <div id="body">  
  17.         <div>  
  18.             <form>第二个form：这是一个神奇的Form，这个form下面的内容，IE6会居中显示，继承了body的text-align:center（#body:{text-align:left}没有起到作用）。删除这个form后，会发现ie6下下面的内容都变成正常的左对齐了。 
  19.             </form>  
  20.             此现象应该是form内又嵌套了一个form所导致。 
  21.         </div>  
  22.         <div>这里的内容,要再设置一次：#bd div{text-align:left;} ie6才会左对齐</div>  
  23.         <h2>这里的内容IE6居中了</h2>  
  24.     </div>  
  25. </form>
  26. </body>  
  27. </html>  

 由于以前接触的基本都是php的程序，从来没遇到过这样的情况，.net把body间的内容用一个form给包含了，当里面再加进去一个form后，上面描述的问题就出现了。

我想到的解决办法就是：

1、 把css里body的text-align:center;修改成：text-align /*IE5.5 only*/:center; （这里没照顾ie5.0），由于IE5、IE6都识别前面加下划线“_text-align:”这个hack，所以这个hack在这里也用不上（以前还以为加下划线只有IE6能识别）。 body加text-align:center;也就是为了让IE5实现margin:0 auto的效果。

2、狠下心把body的text-align:center删掉也能解决，但是ie5就。。可惜IE5还有极少数的人在用。。

3、<!--[if IE 6]> body{text-align:left;} <![endif]--> 或者 * html body{text-align:left;}/*IE6/ie7都识别*/

4、重设#body下面的元素，#body div, #body h2{text-align:left;} 

在实践中上面的四种方法都可能用到，个人更偏向于第三、四种方案。

 另外发现我blog的字体，在chrome下不是一般的难看啊。。。越来越不喜欢这个风格了。。不知道啥时候有空做一个。还有这两天做了一个雅黑+DejaVuSansMono的等宽字体，等宽主要是方便用vim的时候选择，还有bug 所以还不能发布，等发现没什么问题了就发布出来。主要是搜索很久都没找到雅黑+DejaVuSansMono的等宽字体，所以才萌生了自己做的想法。这个合并字体搞了很久，也搞的很郁闷，制作字体的时候CUP经常100%，终于发现我的电脑年纪不小了。。英文使用DejaVu，是因为最喜欢它的等宽字体，Consolas、Monaco、Bitstream等等好多等宽字体测试后，发现DejaVu的效果是最好的，1、l和0、o、O很容易区分（dejavu也是Bitstream出的他们很接近）。

Tags: ie , css

发表在: WebDev 0 条评论 阅读 1246 次
Total: 106Page 1 of 221234567Next ›Last »