作为前端开发/网页设计师，电脑中总是安装着各种不同内核渲染引擎的浏览器，如IE(Internet Explorer)、FireFox、Safari、opera、Chrome等，在编写网页时要经常在不同的浏览器中进行测试，以便能在这些浏览器中有相同的显示效果。暴风彬彬曾经介绍过整合了IE5、IE6、IE7和IE8的浏览器IETester。今天暴风彬彬向大家推荐一款将FireFox、Safari和IE三大浏览器引擎整合在一起的浏览器:lunascape。

本文未完，点这儿看完整内容 » »

　　Bookmarklet(书签工具)是节省网页设计/前端开发时间的最佳工具。仅需点击一下，它就能提供很多信息或帮助。Bookmarklet是使用一段Javascript代码编辑而成的书签，当你在浏览器中点击已经预存的Bookmarklet(书签工具)时，其中的Javascript程序就会运行，从而起到书签相应的辅助功能。

　　今天暴风彬彬要向大家推荐15个有助于网页设计/前端开发的Bookmarklet，他们的功能涵盖了:

• 了解颜色的运用。
• 为网页插入标尺。
• 在未重载网页的情况下重载CSS
• 修改网页元素等功能…

Bookmarklet使用方法:您可以用鼠标将”使用”链接拖到书签栏中(适用于FF、Chrome)，在IE中可以右击”使用”链接，选择”添加到收藏夹”就可以了，记得添加以后重新命名哦。如果没有”使用”链接，那么您可以点击相应链接到该工具的作者网站寻找添加的链接。

点击这里下载适用于导入Firefox的书签文件夹。(点击FF的”书签”–>”管理书签”–>”导入&备份”–>选择导入下载的html文件即可)

提示:如果您很少或不习惯使用这种Bookmarklet工具，您也可以考虑使用Firefox的Web Developer工具栏(扩展)，它包含了部分Bookmarklet的功能，也是非常棒的网页开发辅助工具。

您还可以参考以下网页设计/前端开发相关资源:
《推荐12款可用于前端开发的免费文本编辑器》
《Web前端开发必备手册下载》 
《推荐3个网页设计在线配色网站》
《10个非常棒的Ajax及Javascript实例资源网站》
《20个免费的SEO网站分析工具》 

1.WTFramework

用于学习JavaScipt框架的Bookmarklet工具

　　当你好奇某个网站在使用哪个JavaScript框架的时候，相比查看网页源文件，点击以下书签就能查看网站使用的什么JavaScript框架要容易得多。

本文未完，点这儿看完整内容 » »

　　在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

　　当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

　　正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

　　今天暴风彬彬总结收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

　　彬Go会经常更新前端开发/网页设计等相关技术及教程文章，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

一.最简化的CSS Reset(重设) :

* {
      padding: 0;
      margin: 0;
}

　　这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

* {
       padding: 0;
       margin: 0;
       border: 0;
}

　　这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

* {
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

　　在前两个的基础上添加了outline属性的重设，防止一些冲突。

本文未完，点这儿看完整内容 » »

　　CSS代码的命名惯例一直是大家热门讨论的话题。今天暴风彬彬想通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。

您还可以参考彬Go的相关文章:
《整理及优化CSS代码的7个原则》
《10个CSS简写技巧让你永远受用》
《DIV+CSS网页布局常用的一些基础知识整理》 

CSS类命名的语义化VS结构化方式

　　一般而言，CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的”用意”，独立于它的”定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

让我们看看下面这个例子:

　　…而现在我们想把页面中的元素调换一下位置，如果你使用的是结构化方式(1)，那么你就要把所有CSS类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。

本文未完，点这儿看完整内容 » »

　　作为前端开发工程师,你有能力编写复杂的代码，但你真正需要的是你最喜爱的，可信赖的文本编辑器。你可以使用一个简单的，如微软的记事本，但往往比较有益的文字编辑器具有语法突出/高亮功能，支持多种语言，包含一个强大的查找和替换功能，和其他功能和选项，让你在编写代码的时候更加容易。

　　如果你在寻找一个优秀的，免费的文本编辑器。下面收集了20款免费的文本编辑器，包含适用于Windows ， Mac或Linux操作系统的。一句话，你能找到你想要的文本编辑器。

您还可以参考以下前端开发相关资源:
《15个前端开发/网页设计师必备的Bookmarklet》
《精选15个国外CSS框架》 
《Web前端开发必备手册下载》 
《10个非常棒的Ajax及Javascript实例资源网站》 

1.Bluefish Editor

(Mac, Linux)

　　Bluefish Editor 是一个面向程序员和网页设计师、强大开源的文本编辑器。作为一种快速，轻巧的文本编辑器，它支持500多种文件格式。它有一个内置的函数参考浏览器（ PHP，Python，CSS和HTML ） ，这样你可以快速地了解特别的语法。

本文未完，点这儿看完整内容 » »

今天暴风彬彬要向大家推荐一些前端开发时必备的参考手册，它们能够让你在开发页面的时候查询一些必要的语法。这些手册(Cheat sheet)包括目前比较流行的编程语言，比如jQuery, Mootools, Prototype, CSS,HTML,Django等…Cheat sheet这个词组如果直译成中文，意思大概是”作弊小抄”之类的词，但Cheat sheet这个词的实际意思已经并非是贬义了，虽然中文还没有实际的对应词能够很好的翻译”Cheat sheet”，但大致意思就是用于参考的简洁手册，就像是考试作弊时将必备的数学公式等写在一张纸上，以便考试时查询。

本文未完，点这儿看完整内容 » »