Tagged

Tips

A collection of 20 posts

Chrome

Chrome extension 升级到 manifest version 2 的问题

最近在折腾一个 chrome extension, 虽然之前也折腾过,但是了解很浅,这次就顺带系统地了解了下。开始的时候一切都很顺利,对一个前端工程师来说,学习的成本并不是很高。 问题 在某天 chrome 提示升级的时候,就果断升级了(当前版本为 Version 21.0.1180.57)。升级之后,发现在 extensions 页面,有个提示: There were warnings when trying to install this extension: Support for manifest version 1 is being phased out. Please upgrade to version 2. 一开始并没有想到这个版本号的升级会有多大问题,因为至少看起来并没有特别多的改动。

HTML5

HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。 div HTML Spec: “The div element has no special meaning at all.” 这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。 section HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a

css

CSS Sprites:鱼翅还是三鹿?

原文:CSS Sprites: Useful Technique, or Potential Nuisance? 译文:CSS Sprites:鱼翅还是三鹿? 无处不在的 CSS sptites - 为数不多的几个可以直接跳过”流行”这个过程,而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。虽然它真正流行是在 A List Apart 解释并认可这个技术之后,但是早在 2003 年 7 月份,Peter Stanicek 就已经开始谈论它了。 目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章。几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量。这个技术被大量网站使用,包括使用了大型 sprite 的 Amazon . 但是这些被广泛热议的好处真的是值得的吗?设计师们是否在没有全面考虑到所有情况的情况下,

css

在 Mozilla UI 中书写高效率 CSS

原文地址:Writing Efficient CSS for use in the Mozilla UI 以下文档描述了应用在 Mozilla UI 中优化 CSS 文件的规则。第一部分是对于 Mozilla 样式系统分类规则的一般性讨论。在了解这个系统的基础上,后续部分包含了一些指南,书写可以利用这个样式系统实践优点的样式的指南。 样式系统如何分类规则 样式系统把规则分为四大类。理解这些类是很重要的,因为对于规则的匹配来说他们是首先要考虑的。之后的段落中会使用“主选择符”这个说法。主选择符是指选择符最右边的部分(最终要匹配的那个元素,而不是它的祖先元素)。例如,在以下规则中: a img, div > p, h1 + [title] {} 主选择符是 “img”, “p”, 和 “[title]”。 ID 规则 ID 选择符作为主选择符的规则。

css

清除浮动新说

起源: .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ 说明: *对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的 内容为空的块来为目标元素清除浮动。 *第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。 *利用 * / 对 IE/Mac 隐藏一些规则: height:1% 用来触发

css

Firefox Bug: inline/inline-block的间隙

首先要说明的是,这个标题有点标题党的意思,这个 bug 也存在于 IE8 下,在 IE6 和 IE7 下正常。之前写过两篇关于 IE bug 的文章,这里特意用了 Firefox bug 作为标题,是为了给自己找点心里安慰,省得总是埋怨 IE :)。关于 inline-block,可以参考之前的一篇文章 跨浏览器的inline-block这个 bug 是“痛在远方”同学碰到的,确实很诡异啊,貌似对标准支持越好的浏览器才会有这个问题。如下图:在 Firefox 下,inline/inline-block 的元素直接会有莫名的几像素(貌似是6px)的空隙。这个 bug 比较难发现,因为为了美观,一般的这种设计,inline/inline-block 的元素直接都会有一定的间距,

css 框架

Emastic CSS框架发布beta3版本

这是一个轻量级的CSS框架,也是一个较新的CSS框架,不过它更新的挺快的,也有很多地方值得学习,所以在这里推荐一下。 官方简介: Emastic 是一个CSS框架,它将持续任务是:探索未知的新世界,寻找新的生活和新的网络空白,大胆发现CSS框架没有到达的地方。 emastic的优点: 轻量级 (压缩后小于4kb) 个性化宽度(em,px,%) 在网格中使用固定的或非固定的列 Elastic使用”em”布局 Beta3更新: percent-grid.css (Plugin) absolute-grid.css (Plugin) semantic.css (Plugin) Beta2更新: gadgets.css (Plugin) 垂直间距 改良排版 (基于网格) 官方网站:http://code.google.com/p/emastic/

960

960 CSS框架解析及重构

960CSS框架是一个非常流行的CSS框架,它是国外最成熟的CSS框架之一,而且结构清晰,代码简洁,容易上手。 960的基本原理是网格技术,而且960是CSS 网格技术的最完美实现。 网格技术是最近两年才出现的一种网页布局方法,它的原理是将页面平均分割成N列,然后通过组合相应数量的列来完成对页面的布局。 关于网格技术的更多信息,请查看我之前写的《美丽网格》。 960的方法是,将页面平均分成12列或16列,然后列与列之间是完全独立的,每一列的margin和padding都是相同的,这样,每列之间就不会出现那些常见的bug。 BluePrint和YUI也有网格技术,但是它们的列与列之间的空白,是通过单边的margin来实现的,这样就需要在第一列或最后一列添加额外的样式。 然而,我之前也有一个关于网格框架的想法,后来发现与960差不多,而且在某些方面,它的实现比我的设想要好些。但是它也有点儿方法我觉得不是太 好,重用度不够,比如,对于每列的公用样式,它是通过.grid_1,.grid_2,.grid_3, …… .grid_16{display:inline;float:left;margin-left:10px;margin-right:

Tips

国外知名CSS画廊大全

平时浏览过很多的CSS画廊类网站,只知道很多,但是一直没有收集。现在整理一下,这些网站,基本上都是经常更新的,他们收集了大量的界面设计的非常棒的网站。 其实我认为现在已经无所谓CSS画廊了,这样叫可能是一种习惯了。因为CSS已经普及了,任何一个成熟的网站都是CSS技术的成功应用,离开了CSS的网站,估计都是古董级的怪物了,除非是全Flash网站。 CSSDrive [![www.cssdrive.com](//www.qianduan.net/img/2008/11/wwwcssdrivecom.jpg "wwwcssdrivecom")](//www.qianduan.net/img/2008/11/wwwcssdrivecom.jpg)www.cssdrive.com非常知名的一个网站,相信很多人都知道它吧,这是我每天比上的网站之一。收集的站点虽然更新不是太快,但是很少是从别的网站“抄袭”来的。 收集的网站的分类很详细,而且,这个网站收集的还有导航设计,这里展示了很多非常棒的导航设计。Design News是设计类的资讯的收集,

Tips

CSS 中的黄金分割率

这是一位叫做  Christos Chiotis 的希腊 Web 设计师发表在 CssGlobe 的一篇文章,讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数,大约为 1.6180339887。黄金分割率用在 Web 设计中,可以为设计带来更多视觉上的和谐。 在一个简单的两栏式页面布局中,使用两个容器,第一个容器用来显示主要内容,第二个容器显示侧条。比如,页面宽度为 960 px,使用黄金分割率,主内容容器的宽度应该为 960 / 1.62 = 593 px,而侧条的宽度为 960-593=367 px。 作者建议,在 Web 排版与布局中可以使用以下基本 CSS 设置 line-height = font-size * 1.62 paragraph margin

css 框架

132 个 Web 设计工具(上)

这是 Mashable 搜集的 130 个 Web 设计工具,涵盖了从初学者到高级 Web 设计人员需要的各种工具和资源。这是第一部分。同时请参阅 Web 开发工具箱:120个 Web 开发工具的第一,第二部分。 本文在翻译原文的基础上,又添加了两个工具。初学者资源 YAML Builder 简单易用的 YAML (Yet Another Multicolumn Layout – 做栏布局)XHTML/CSS 站点布局。(事实上,YAML是一个非常著名的CSS框架) YUI Builder – Made by Yahoo,是YUI框架的一部分,类似于YAML,可以在线生成网页的CSS结构框架。 Sky CSS Tool – JavaScript CSS 工具 The

css sprites

创建简单有用的CSS Sprites

让我们从头开始吧. 什么是CSS Sprites? CSS sprites (CSS精灵,也有人翻译成CSS妖精) 是一种通过整合图片来改善我们的页面的加载时间,减少服务器请求数的方法。在这篇文章里,我将教你如何来实现它们。 看一下演示 | 下载 为了搞清楚什么是CSS sprite ,这里是一张 Google制作的CSS 精灵图片: 当你用谷歌搜索的时候,你会发现页面底部的分页,你会看到就像这样的东西: Gooooooooooooooogle. 字母 ‘o’ 是用CSS sprite平铺的,这样就替代了重复加载15次字母,它只是加载了包含所有字母的精灵,一次完成。 创建我们的CSS sprite – 步骤一: 制作图片 Ok, 首先,我们必须制作我们的精灵图片。你可以使用Fireworks,Photoshop或任何你能使用的软件。这里是我做的: 正如你看到的,精灵是由一些中间被1像素款的线划分开来的图像组成的。这种区分不是真的必须的,就像你所看到的谷歌的精灵,但当我们写CSS的时候它使我们的工作更加方便,请相信我。 步骤二: 创建我们的精灵图片显示者(显示层) 一旦我们制作了我们的精灵图片,我们必须制作一个透明的1px

javascript

十个最佳Ajax/Javascript实例与演示网站

在这篇资源收集中,你将会找到十个提供高质量Ajax和Javascript实例与教程的网站或博客. 1. Ajax Rain AjaxRain有一些有插图的漂亮的网页效果,这些可以通过组合AJAX、CSS、DHTML或JavaScript 实现。一些演示是绝对值得一看,即使你不是网页设计师/程序员。 Ajax/Javascript 实例 EXT JS Date Picker jQuery Feed Menu jGrowl FastFind Menu – Jquery Spiffy Accordion 2. Ajax Daddy 一个大型的漂亮的web 2.0工具收集。一个很灵活的特性是在你决定把例子放到你的网站上之前,你可以在线调试这些实例。 Ajax/Javascript 实例 Flickr Like edit MooTools Autocomplete SlideShow Viewer Prototype window Shoutbox

Tips

免费CSS多级下拉菜单框架

一个很棒的跨浏览器的基于CSS的下拉菜单框架,而且基于模块化和模板化,很容易上手,据作者讲,自己开发一套模板只需10几分钟就可以搞定。 这里包含了比较多的模板,有水平菜单,也有垂直菜单,当然都是多级菜单。 用到了jQuery的JS框架,但是只是少量的,而且这些框架是为了应付IE6之前版本浏览器的。 地址:http://www.lwis.net/free-css-drop-down-menu/

bug

使用CSS修正一切:20多个常见Bug及其修正方法

毫无疑问,一个合理的布局和结构是最好选择。这不仅是因为你的布局在不同浏览器见表现不同,而且还因为的CSS有很多方法来布局你的每个元素。今天,我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。 IE Bug修正 1- Bug修正:IE双倍Margin bug – 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以,你只是把例如这样的代码: #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; } 改为如下代码 : #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; display:inline; } 2- 克服盒模型hack – 如果你想给任一div指定宽度,不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以,不要这样做:

javascript

用Javascript修正12个常见的浏览器问题

我们提倡尽可能使用CSS,而且我们常常能做到这一点。现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计。但是有时候,某些网页元素在不同的浏览器会出现不同。 如果你不知道原因,不要过于担心,请研究CSS规则并查看这篇文章:使用CSS来修正一切: 20 +常见错误和修复。 如果这些也无效,您可以通过下面列出的12个javascript解决方案修复它,这样您的网页看起来就能跨越所有浏览器了! 在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。 1. 自动匹配高度 自从我们抛弃了基于Table的页面布局后,创建同等高度栏目或内容盒子的视觉效果已然是一个挑战。##### 1.1 用jQuery设置匹配高度 这个jQuery插件在同一个容器里“平衡”盒子的高度并创造一个简介的网格——几乎从可用性和性能的角度使用简单的JavaScript替代: equalHeights()函数测定一个容器里的所有同级元素同容器的高度,然后设置每个元素的最低高度为最高的元素的高度。 如何工作 equalHeights()通过循环测定指定元素的最高级别的子节点,然后设置他们的最小高度值为最高的元素的高度。 Demohere. 1.2 用jQuery匹配栏目高度 jQuery的另一个可以使盒子的高度相等的插件 $(“#col1, #col2″).equalizeCols(); 将如你所想的那样匹配高度 $(“#col1, #col2″).equalizeCols(“p,p”); 匹配这两卷,并在#

Tips

万能清除浮动样式

这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。 这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。 <style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* for IE/Mac */ </style> <!-- main stylesheet ends, CC with new stylesheet below... --> <!--[