omiga

简单就好

EditPlus使用详解

发表评论»

EditPlus（EP）帮助手册中列出了EP的主要功能：

  • 语法高亮
  • Internet功能
  • HTML工具栏
  • 文档选择器
  • 用户工具和帮助文件
  • 自动完成
  • 素材文本窗口
  • 文档模板
  • 其他功能

其中“语法高亮”，“自动完成”和“文档模板”在EP中非常灵活，用户皆可根据自己需要进行配置。EP默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript 和 VBScript的语法高亮显示，基本上无需再做过多设置。而“自动完成”和“文档模板”默认支持有限，而且可能并不符合个人日常的一些编码习惯，那么则需要我们自己根据习惯进行配置，才能得心应手。

自动完成

自定义自动完成功能可分为两步：1.编写自动完成文件；2.指定关联路径。

#TITLE=CSS
;EditPlus Auto-completion file v1.0 written by wondger(http://omiga.org).
;This file is provided as a default auto-completion file for CSS.
#CASE=n
#T=reset
/*reset*/
body,h1,h2,h3,h4,h5,h6,ul,ol,p,dl,dt,dd,th,td{margin:0; padding:0;}
table{border-collapse:collapse;}
li{list-style:none;}
em{font-style:normal;}
img{border:none;}
a img{vertical-algin:top;}
/*reset*/
#T={
{^!}
#T=m
margin:^!px;
#T=ma
margin:0 auto;^!
#T=mt
margin-top:^!px;
#T=mr
margin-right:^!px;
#T=mb
margin-bottom:^!px;
#T=ml
margin-left:^!px;

以上为一段CSS自动完成文件代码。自动完成文件每个语句必须以“#”开头。

  • #TITLE – 为自动完成文件标题
  • #CASE – 指定是否区分大小写。‘y’表示是，‘n’表示否。默认值是‘n’。
  • 每个自动完成片段以“#t=title”形式的开始。title是你要你扩展的缩写词，换行后开始匹配自动完成文本，直到遇到“#”符号。如：
#T=m
margin:^!px;
  • ^! – 指定每一次自动完成后光标的停留位置。
  • ^ – 转义字符，如果需要在自动完成文本中插入“^”或“#”则需要先进行转义：“^^”，“^#”。

自动完成文件编写完成后，保存为.acp文件在任一文件目录即可。 阅读全文»

精通CSS？

6条评论»

经常看到些招聘都要求精通CSS，然后后面也会有一大群人信心十足地回复“精通CSS”“手写代码”“通过W3C验证”“兼容IE5678,FF,opera,safari…”，姑且对你对自身认识的准确度不谈，你所罗列的这一大堆东西你真的觉得是有意义的吗？

难道CSS的最高境界就是熟知各浏览器的对HTML/XHTML，CSS解析的差异性，然后熟记一大堆hack技巧？表现上差异性，hack技巧可以说都是可以量化的，是可以通过付出时间成本来获取的。你用了两年的实际工作时间，通过你的辛勤实践总结掌握了很多不同浏览器表现上的差异性，也通过各种手段解决了这些差异性，做到了完美的兼容，你觉得你很有经验，你精通了CSS，你很牛叉了。可是事实上，你引以为傲的这些东西，一个勤奋的学生可能通过书籍、搜索引擎两个月就搞定了。然后某天，浏览器市场在经过多年的厮杀和开发者的口诛笔伐后实现了天下一统，你所有的付出、你所有的经验、你所有的精通就会在一夜之间迅速贬值！这一天是完全可以预见的！

但并不是说研究浏览器对HTML/XHTML、CSS解析的差异性毫无意义，熟知这些东西对提高工作效率还是相当有帮助的。只是它的意义远没有到要把它当着神一样膜拜的地步，也绝对不应该成为你学习CSS的终极目标。

知识技术的研究要么是基础研究要么是应用研究的。显然，对于大多数开发人员而言都属于应用层面的研究，所要做的就是如何灵活运用已有的技术成果高效率的去完成工作。而具体到web前端开发，具体到页面制作人员，重心就应该是在如何去构建简洁、强壮、易扩充和高效的代码上面！而不是成天在无数个浏览器之间来回切换地去寻找表现差异性的规律，它们在很多时候就是没有规律的，还有很多时候是你庸人自扰，本来可以很简单的页面结构你却写的更复杂，兼容性问题自然就会更多，这就是自己给自己制造麻烦。浏览器自身的缺陷留给他们自己去解决，你的没日没夜的辛勤劳动在那帮开发浏览器的家伙眼里也就是自作多情罢了。

简洁、强壮、易扩充和高效的代码不但能提高页面效率的，为JS编程提供良好的接口，同时能够大大的提高开发效率和质量。但是这个却是很难从书上看来的，只能在实践中不断的总结积累，属于经验问题。在我刚接触CSS的时候，看了很多到底是该用id还是class的文章（相信很多人都看过～囧～），现在想来价值甚少，到底是用id还是class绝不单单是id只能唯一而class可以重复多次使用的问题，你还得为JS编程提供了好接口作更多考虑～···大型项目样式文件结构的安排，命名规则，页面结构往往也并不如想像中那样随意和简单，经验问题，仁者见仁，智者见智。

兼容性的研究，适可而止，不要走火入魔！好久没更新，随便扯两句～···

中文按钮完美显示方案

发表评论»

先看这段代码在不同浏览器中的表现。

代码：

<input type="submit" value="提交" /> <input type="submit" value="按钮左右左右内边距会随文本自动增加" /> <input type="reset" value="重置" />

在各浏览器中的表现：

可以明显观察到在默认样式下IE6/7中文按钮显示主要存在两个问题：

  1. 文本无法正常垂直居中
  2. 按钮中文本与左右边框的间距会随文本长度变化，而不是一个固定值

那么一个按钮正常的默认样式是怎么样的？我们可以通过Firebug观察button的“盒模型”，如下图：

Firefox中按钮默认有2px的边框，6px的左右内边距。

注意：以上测试都是在windows经典主题下完成，而不同主题下的按钮的样式是有所差别的。比如我最初使用的MCE 2005主题下按钮的边框宽度为3px。

在上面的测试中似乎IE8 beta2已经比较完美了，其实不然。我们对按钮的高度做一些改变，你就会发现IE8还没有想象中的完美，如下图：

可以看到，事实上IE8(b2)中，按钮中的文本（包括英文文本）是固定在距按钮上边框4px的位置，看起来情况比IE6/7还要糟糕！当然IE8(b2)已经解决了左右内边距随文本变化的问题，而且IE8也还是beta版本，希望能在正式版中修复这些问题。

而对于IE6/7（更低版本没测试）中按钮文本与左右边框的间距随文本长度变化的问题就不仅限于中文文本的按钮，所以似乎早在05年就有人提出了解决办法：http://jehiah.cz/archive/button-width-in-ie

具体方法即是重置padding：

.button{
    overflow:visible; /* for ie6/7 */
    padding:0 6px;
}

该方法存在一个明显的缺点：IE6/8中按钮的高度会增加1px。

（更新说明：经过进一步测试发现IE6/7中文本与左右边框的间距并不是附加在按钮上的左右内边距，而是附加在文本上的某种边距。个人认为overflow:visible;在此正是用于清除该边距。）

而对于中文文本无法正确居中对齐的问题，在我和TZ讨论一天后似乎也没找到一个比较满意的解决方案。暂时只能通过line-height来解决，而且还得使用hack来解决重置padding后增加的1px高度问题。

line-height的具体取值就去这里看看吧：http://fedcn.org/?p=3