DropKick 是一个下拉框美化插件，使用非常简单，直接为下拉框 select 调用方法即可，瞬间让你摆脱繁琐。DropKick 有 3 种主题，你可以选择一种与你的页面更加搭配的，当然你也可以自己定义CSS。DropKick 支持键盘上下选择；支持回调，可以轻松的获取 value 值。DropKick 不支持 IE6，但会显示下拉框默认的样式，不影响页面使用；而其他的浏览器都支持。DropKick 暂时不支持 optgroup，会被忽略。如果你不需要考虑 IE6 和不需要使用 optgroup，那 DropKick 是一个很好的选择。查看演示下载代码使用方法引入文件HTML您的职业前端开发工程师视觉设计师UI设计师交互设计师网页设计师数据库工程师JavaScript$(function() {     $('.dropkick').dropkick();   });查看演示下载代码相关日志用 selection 让“选择”五彩缤纷(10)ie img 3px bug(2)一张图片实现圆角(7)用CSS滤镜制作圆角(4)IE 8 beta 2不识滤镜alpha ？(8)Original article:jQuery下拉框美化插件DropKick©2015一起CSS. All Rights Reserved. ...继续阅读 (18)

网站的速度是不能掉以轻心的，特别是因为它对 SEO 的影响很大。为了帮你解决这个问题，今天我们收集了 8 个测试网站速度的免费工具。这些工具中，有的会提出一些提高网站速度的建议，有的会告诉你加载速度的详细信息和其他一些信息，所以，一定要试试这些工具。PageSpeed InsightsPageSpeed Insights 是 Google 出品的一款工具，它能在线分析页面内容，生成提高网站速度的建议。同时它还有一款基于 Fierbug 的插件 PageSpeed，可以下载安装。Load Impact测试网站的负载情况，并生成详细的报告。Neustar Web Performance帮助你简单快速的了解网站的性能数据，不需要编写任何测试脚本。WebPagetest在世界上各个地方用各种浏览器（IE6-IE9、Chrome、FF）测试网站速度，你可以进行一些简单和高级测试。OctaGate SiteTimer提供类似 Firebug 中“网络”功能的测试结果，但更简单一些。PingdomPingdom 能生成每一个元素加载所花费的时间列表，分析性能，分析页面，并提供非常详细的报告，比如：服务器响应、加载时间分析、大小分析、要求分析等等，让你全面的了解网站新能。Which Loads Faster对比两个网站的速度，看看哪个网站加载更快。Show SlowShow Slow 是一个开源工 ...继续阅读 (47)

W3C CSS 工作组于4月10日发布了 CSS Variables Module Level 1 首个草案。CSS Variables 是什么呢？很明显，Variables 是变量，CSS Variables 就是 CSS 变量。只要有点开发经验的人都知道定义变量是非常有用的，所以在 CSS 中如果在样式表中经常使用某个值（比如某个颜色或某种字体），可以将其定义为变量，修改样式表时只需更改该变量的值，就更新整个样式表，而无需逐个更改每个样式规则。CSS Variables 的定义必须以“var-”开头，后面直接跟变量名，然后是属性值，如“var-fontColor:#333”，“fontColor”就是变量，可以在需要的时候以“var(fontColor)”引用。如：:root { var-fontColor:#333; } body { color:var(fontColor); }由于变量名可以任意命名，所以如果您根据具体情况命名的话，那么样式表就会显得更有"语义"，就更容易阅读。如果一个变量的属性被声明多次，则会根据 CSS 选择器的权限对应应用。如：:root { var-color:blue;} div { var-color:green;} #alert { var-color:red;} * { color:var(color);}我继承根元素，是蓝色的我应用 ...继续阅读 (19)

前两天一个同事跟我说页面上有个问题：一个有滚动条的显示、隐藏 div 在 IE 8、IE 9 里每次重新显示的时候，滚动条总是跑回顶部。我查看源码，看到那东东上赫然出现了刺眼的 onmouseover 、onmouseout，我最不喜欢这里出现在这些了（作为前端开发者，你懂得！），第一印象可能是这里的问题。好吧，我改写一下。然而，当我把分离、简洁、可读性强的代码放上去后，依然是老样子。你可以用 IE 8 或 IE 9 查看这个Demo。莫非真的是我的样式引起的？经过再次检查以及在单独的页面测试下，最终得知是 IE 8、IE 9 的问题。当一个元素设置 display:none 后，scroll（scrollHeight、scrollLeft、scrollTop、scrollWidth）属性值变为 0，再设置为 display:block 后，元素的 scroll 属性值会变回设置 display:none 之前原本的值，但 IE 8、IE 9 却没有变回原有的值，依然是 0，所以就出现了滚动条跑回顶部这样的问题（即 scrollTop 值为 0）。使用 IE 9 的“开发人员工具”可以查看元素的 scroll 属性值的变化，如下图：IE 9 开发人员工具并不能实时监控，如果进行了操作，需要点选其他元素然后再切换回元素才能重新获取最新的 DOM 信息。当然也可以使用 JavaScri ...继续阅读 (15)

表单是页面中不可缺少的元素，没有表单，就没有现在如此生动，趣味的页面。不过虽然表单很重要，但在 HTML 5 之前，表单的元素不多，属性和方法也不多，很多属性和方法都是用 JavaScript 模拟的，用 JavaScript 模拟这些功能要花费不少的时间和精力。如果用户能使用到这些模拟的功能，那么花费是值得的；如果用户客户端禁用 JavaScript，那么这些功能将全部挂掉，时间和精力都白白浪费了。 HTML 5 出现之后，这一切都不同了。HTML 5 增加的表单、表单类型以及表单属性，不但节省了开发者的时间，而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。新增的 input 元素类型类型类型名称功能描述color颜色选择器输入颜色值的文本框date日期选择器输入日期的文本框datetime日期时间选择器输入 UTC 日期和时间的文本框datetime-local日期时间选择器（本地）输入本地日期和时间的文本框month月份选择器输入月份的文本框time时间文本框输入时间的文本框week周选择框输入周的文本框email邮件输入框输入 E-mail 地址的文本框number数字输入框输入数字的文本框，可以设置输入值的范围range数字滑动条通过拖动滑动条改变一定范围内的数字search搜索输入框输入搜索关键字操作的文本框tel电话号码输入框输入电话号码ur ...继续阅读 (24)

从接触网络到现在，选择的文本后的样式似乎一直都是蓝底白字，如下图（截自 Firefox 5 浏览器）：这一成不变的颜色，有没有让你的视觉感到疲劳。你有没有想过换成自己喜欢或者其他颜色呢？也许你会问这个可能吗？之前不可能，但现在，CSS 3 让这个成为可能。要改变选中文本的颜色和背景颜色，需要使用 CSS3 新增的伪 ::selection，设置颜色 color 和背景颜色 background-colcr 即可，如：::selection { color:#333; background-color:#cce8cf;} ::-moz-selection { color:#333; background-color:#cce8cf;} ::-webkit-selection { color:#333; background-color:#cce8cf;}上面的代码效果如下图（截自 Firefox 5 浏览器）：当然，你也可以结合CSS选择器，指定标签或区域文本选中后的样式状态。如：h2::selection { color:#f60; background-color:#cce8cf;} p::selection { color:#333; background-color:#cce8cf;} h2::-moz-selection { color:#f60; background- ...继续阅读 (17)

include 一个文件之后，这块代码的上面出现了很多空格，有木有！！！前段时间我就遇到这样的问题，用Firebug查看，看到代码有一个地方“断”开了，点击那块区域竟然能编辑，里面全是空格。把这些空格删掉之后页面就正常了。好吧，既然是页面上多了空格，那就删掉。然后在源文件里没有看到空格，甚至连标签的缩进都删除了，那些空格依然存在。经过排查，发现是 include 的文件问题，但是为什么这个文件会有问题呢？百度 GG 后，才知道这个问题由 utf-8 文件 Unicode 签名 (BOM) 产生的。什么是 Unicode 签名 (BOM)？BOM(Byte Order Mark)，是 utf 编码方案里用于标识编码的标准标记，在 utf-16 里本来是 FF FE，变成 utf-8 就成了 EF BB BF。这个标记是可选的，因为 utf-8 字节没有顺序，所以它可以被用来检测一个字节流是否是 utf-8 编码的。微软做这种检测，但有些软件不做这种检测，而把它当作正常字符处理。微软在自己的 utf-8 格式的文本文件之前加上了 EF BB BF 三个字节, Windows 上面的 Notepad 等程序就是根据这三个字节来确定一个文本文件是 ASCII 的还是 utf-8 的, 然而这个只是微软暗自作的标记, 其它平台上并没有对 utf-8 文本文件做个这样的标记。也就是说一个 ut ...继续阅读 (30)

据国外媒体报道，互联网流量监测机构Net Applications最新发布的统计数据显示，尽管上市时间晚于微软的IE9，但是 Mozilla 基金会的Firefox4 市场份额仍然超过了IE9。微软在今年 3 月 14 日发布了IE9 ，而 Mozilla 基金会在 3 月 22 日推出了Firefox4 。尽管Firefox4 发布时间更晚，但截至 3 月末，IE9 占据了全球浏览器市场 1.0% 的份额，而Firefox4的市场份额却达到了 1.7%。在使用战略上，Firefox4 相对于IE9 具有明显的优势。Mozilla 基金会的Firefox4 能够与 Windows XP 操作系统兼容，但IE9 却只能与 Vista SP2 或是 Windows 7 兼容。考虑到当前全球使用 Windows XP 操作系统上网的电脑占到了上网电脑总量的 54.4%，而 Windows 7 和 Vista 的份额分别为 24.2% 和 10.6%，如果微软让 Windows XP 兼容IE9，那么即便是 Windows 7 市场份额不断提升，IE9 的市场份额仍将会获得很大的提升。把各种版本的浏览器都计算在内，IE仍然是全球浏览器市场的龙头，但市场份额继续处于下滑之中。IE浏览器在 3 月份的市场份额为 55.92%，低于 2 月份的 56.77%。Firefox浏览器份额略有上升，从 ...继续阅读 (18)

今天是愚人节，不知道大家有没有被愚弄。各大网站为了在今天显得特别，也纷纷搞怪。比如团购网站美团，来了个水平 180 度的翻转，虽然看上去怪怪的，但也算为“一成不变”的日子增加了一点乐趣，谁叫今天是愚人节呢。搞怪之余，我们也可以看看他是如何实现的。查看源代码能明显的看到是通过 CSS3 的变形、变换属性 transform 实现的，可惜的是，这个属性还没有任何浏览器支持（包括 Firefox4、Chrome12、Opera11、IE9）,但他们却都有各自的私有属性能实现这个效果，所以几乎是在所有浏览器中打开今天的美团网，都能看到同样的效果。transform 可用于内联(inline)元素和块级(block)元素，它有几个属性值参数：translate 位移基于 X 和 Y 坐标重新定位元素，当使用一个参数时表示 X 轴和 Y 轴的参数相同，效果类似 position:relative 。scale 缩放可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数，当使用一个参数时表示 X 轴和 Y 轴的缩放相同。rotate 旋转通过传递一个度数值来转动一个对象。skew 倾斜参数是度数，当使用一个参数时表示 X 轴和 Y 轴的参数相同。matrix 矩阵变换基于 X 和 Y 坐标重新定位元素，它使用 6 个参数。至于 IE，虽然不支持 transform，但 IE 的 ...继续阅读 (14)

微软今天在美国德克萨斯州奥斯汀举办的"西南偏南"影视音乐互动大会（SXSW）上正式发布了IE9，IE9 包括 39 种语言版本，支持 32 位和 64 位 Windows 7 和 Vista 平台。微软表示，目前已有 250 多家全球顶级网站利用IE9 的功能为用户提供与众不同的体验，这些合作伙伴的用户覆盖了超过 10 亿的网络活跃用户。微软IE副总裁 Dean Hachamovitch 在发布会上表示："最好的网络体验是通过IE9 在 Windows 上实现的。现在，互联网上丰富的内容可通过 Windows 和IE来呈现并发挥PC硬件的最佳性能。凭借'网站固定'等一系列创新功能，用户访问互联网网站的体验越来越流畅，就像在 Windows 7 中打开本地程序一般。"全面提速，充分利用硬件加速IE9 充分利用了现代电脑硬件的潜能，全面提高网络浏览性能——包括引入新的脚本引擎 Chakra，它采用多核CPU来提高性能，使IE9 的浏览渲染速度达到IE8 的 11 倍。同时IE9 还是第一个采用全面硬件加速的浏览器，它充分利用图形处理单元（GPU）的能力，把更多的图形处理重新分配给GPU而不是CPU。简言之，IE9 释放了以前浏览器所没有充分利用的电脑硬件性能中的 90%。IE9 硬件加速的文本、视频和图形意味着网站可像安装在计算机上的程序一样执行。高清视频十分流 ...继续阅读 (17)

可靠消息显示 IE9 的各语种正式版本已经编译完成，本月即可发布，IE 从 Netscape 的垄断地位下异军突起并迅速拿下另一个垄断宝座，它的成功并非没有规律可循，从一开始的 1.0 版本到现在的 9.0，每一次改变都可以被看成是一次飞跃，现在就让我们通过画廊一起来看看 IE 的发展旅程。Internet Explorer 1.0Windows 95 原先并没有 IE，IE1.0 是通过一个名叫 Windows 95 Plus! Pack 的扩展包来到用户的电脑中的，它的到来改变了 Netscape 的完全垄断地位，并且还带来了家喻户晓的"Internet 连接向导" 。Internet Explorer 2.02.0 版发布于 1995 年，它带来了 JS、框架、SSL、Cookies 和新闻组等特性，并开始支持Mac平台。Internet Explorer 3.03.0 发布于 1996 年，它首先开始支持CSS，并且"大e"形象首次出现，本次更新带来了 Outlook Express，这是一个免费的邮件和新闻组终端。Internet Explorer 4.01998 年，微软随着 Windows 98 发布了 IE4.0，它带来了活动桌面、频道、Frontpage Express, Microsoft Chat 2.0 等诸多特性，这也许是中国早期电脑用户最熟悉的一个版本。 ...继续阅读 (17)

据国外媒体报道，市场研究公司Net Applications当地时间 2 月 1 日发布的最新统计数据显示，2011 年 1 月份，IE 全球市场份额由 2010 年 12 月份的 57.1% 下滑至 56%，减少 1.1 个百分点。Mozilla 火狐市场份额为 22.8%，与去年 12 月份持平，Chrome 由 10% 提高至 10.7%，Safari 由 5.9% 提高到 6.3%，Opera 由 2.2% 提高到 2.3%。微软 IE 产品营销主管罗格·卡普里奥蒂(Roger Capriotti)发表博客文章称，“IE6 市场份额下滑 1.77 个百分点至 12.03%。过去 3 个月，IE6 市场份额下滑了 3.9 个百分点，过去 1 年下滑了 9.31 个百分点。IE8 市场份额同比增长 9.15 个百分点。去年 11 月份，IE6 在企业用户中的市场份额为 10.3%，IE8 为 34.1%。”相关日志12月份浏览器市场排行榜(1)10月浏览器市场排行 Chrome增长快(1)3月份IE浏览器份额继续下滑 IE9不敌FF4(3)IE全球市占率重新超过60%(0)IE的市场份额下降到历史最低(3)Original article:1月份IE市场份额环比下滑1.1个百分点至56%©2015一起CSS. All Rights ...继续阅读 (16)

W3C（万维网联盟）在今天放出了HTML5 的官方新Logo，并对最近的网络开发技术做出了新的解释。HTML5 在过去一年左右的时间里成为大家争论的焦点。Google 的支持以及开发者们的热情追捧下，HTML5 似乎已经成为了解决网络开发中任何问题的良药。在新的 Logo 页面，我们读到："它真切而有力，就像你创作的模型那样具备强大的适应能力和普遍性。它就如同你这样富有前瞻性的网络开始者，光彩夺目，星光闪耀。它是标准的标准，它是创新的典范。它当然不会再去使用样式表格。"该 Logo 由 Ocupop 公司设计，这是一个专注与品牌打造和网络设计的公司。 Ocupop 的 Logo 设计师 Michael Nieling 这样说道：HTML5 这个词获得了它自己的生命。无论是在开发者还是公众社区中，这个词的指代对象早已超过了简简单单一个标准的范畴，以至于来带了诸多的不解和争论。这套标准需要一个标准。那就是说，HTML5 需要一组一致的、标准的可视化词汇来在对话、展示和解释中清楚地指代特定的对象。HTML5 标识将被网络开发者社区采取并使用，用户可根据自己使用的 8 大类别，在标识网站上使用特定的标志。W3CHTML5 Logo 主页上提供免费贴纸，以及价值 22.50 美元带有新款HTML标识的 T-shirt。HTML5 的八大技术特征：语义学作为HTML5 的前端和中心，语义学能够 ...继续阅读 (13)

2010 年已经悄然走过，回首这一年的浏览器市场可谓硝烟四起。骤降的 IE：屡次跌入历史最低值；猛进的 Chrome：连续不断的增长，一路高歌；徘徊的 Fierfox：一直升升降降，虽然目前份额有少许增长，但少的可怜；有条不稳的 Safari：随着 Ipad、Iphone 4 等产品的发布，Safari 在慢慢的占有市场；低调的 Opera：虽然份额比较少，但一直默默的在开发着，丝毫不输其他浏览器。美国互联网流量监测机构Net Applications今天发布 2010 年 12 月份最新浏览器市场占有率及排行统计数据，统计结果显示，2010 年的最后一个月，微软 IE 浏览器全球市场份额持续下跌，由有 11 月的 58.26% 下降到 57.08%，延续了 IE 市场份额连续 6 个月呈下降之势，同时也是 IE 有史以来市场份额的最低值。Net Applications统计数据还显示，今年 12 月份谷歌 Chrome 浏览器全球市场份额再次上升，由 11 月份的 9.25% 增至 9.98%，Firefox 浏览器同样也略有增长，12 月份市场占有率为 22.81%，相较 11 月份增长 0.06%。苹果 Safari 相应市场份额也由今年 11 月的 5.5% 增至 5.89%。这两款浏览器全球市场份额都创造了各自历史最高记录。下面两张图片是 2009 及 2010 年度各主 ...继续阅读 (18)

很多编辑软件都有格式化，格式化能让代码更具可读性。但是有的编辑软件的格式则可能会引起一些问题，比如样式失效。或者说不是样式失效，而是浏览器支持有问题。前两天做的一个页面，交给了其他同事，他们用的编辑器是 myeclipse，处理后，在 IE 和 FF 下表现不一样，经过排查后发现是行高 “line-height” 在 IE 下失效。CSS 代码如下：selector { font:12px/30px '宋体', Tahoma, Geneva, sans-serif; background:#f00;}经过 myeclipse 默认的格式化后变成了：selector { font:12px/ 30px '宋体', Tahoma, Geneva, sans-serif; background:#f00; }格式化之后，字号和行高中间出现了一个空格，在 FF 、Chrome 、Opera 、IE8 、IE9 下页面没有问题，而在 IE6、 IE7 下除了字号，后面的都失效了。不知这应该怪 myeclipse，还是 IE6 、IE7。为了让大家便于对比，这里制作了一个简单的实例，您可以用相应的浏览器点击这里测试。相关日志愚你一下 美团网翻转(5)CSS3圆角属性和浏览器私有圆角属性(6)网页版”Firebug”(9)hoverbox(7) ...继续阅读 (22)

又过去了一个月，Net Applications公司公布了 11 月份浏览器统计数据，据数据显示，IE 浏览器仍占有市场多一半的份额，达到 59.18%，Firefox 市场占有率为 22.83%，排名第二，Chrome 以 8.50% 占据第三位，四五位分别为 Safari(5.36%) 和 Opera(2.29)。与去年同期相比，IE 和 Firefox 的市场份额相对去年底都有所下降，IE 下降了 3.51%，Firefox 下降了 1.78%。Chrome 增长最快，从 4.63% 增长到 8.50%，增长了 3.87%。Safari 凭借苹果产品的畅销，份额也增长了 0.9%。在所有浏览器版本中 IE8 以 29.04% 的市场份额位居首位，同时 IE6 和 IE7 也分别占有 14.94% 和 9.89% 的场份额。Firefox 3.6 以 17.63% 的份额排名第二，第五名是 Chrome 6，为 5.54%。从以上数据可以看出，主要是 IE 和 Firefox 的份额流向了 Chrome，Chrome 6 仅用 6 个月从 0 增长到 5.54%，其发展势头锐不可当。而 IE 则似乎并没有因为 IE9 的发布扭转下降的趋势，至于 Firefox，下降的虽不多，但趋势也是下降的，而频繁的跳票已经让用户习以为常，Firefox 4.0 正式版预计要 2011 年发布 ...继续阅读 (14)

据市场研究公司 Net Market Share 最新发表的统计数据显示，虽然微软在 9 月 15 日发布了 IE9 浏览器的 beta 版本，但或许是受制于对 XP 系统的不支持，IE 浏览器 9 月份的全球市场份额略有下降，占据 59.65% 的市场，而八月份的市场份额则为 60.40%，但俗话说瘦死的骆驼比马大，IE 浏览器仍稳居浏览器排行榜首位。火狐浏览器排名第二位，市场份额为 22.96%，较八月份 22.91% 的市场份额略有上升，目前 Mozilla Firefox 4.0 已经到达了Beta7的版本，不知道广大网友期待的 4.0 正式版发布之后，能否给火狐的浏览器市场带来较大提升。号称版本号之王的 Chrome 浏览器市场份额由8月份的 7.52% 上升到九月份的 7.98%，增幅 0.46%，据所有浏览器增幅之首。看来 Chrome 浏览器不止版本号升得快，市场份额也增速明显。具有重大改进的 Chrome 8 着实让人期待啊！苹果 Safari 浏览器则由 8 月份的 5.16%上升到 9 月份的 5.27%。Opera 在调查的浏览器中排名垫底，市场份额只有 2.39%，但相较于 8 月份的 2.37%，市场份额任然有所上升。值得一提的是 Opera mini 有较大的增长， Opera mini 的市场份额由 8 月份的 0.88%增长到目前的 0.97%。自 ...继续阅读 (22)

美国旧金山时间 9 月 15 日上午 10 点（北京时间 9 月 16 日凌晨 2 点）微软发布了 IE 9 Beta 版，这让很多开发人员兴奋不已，相信都迫不及待的装上了。本人也不例外，一大早起来开起电脑的第一件事情是就到微软官网下载安装了 IE9。IE 9 采用了全新的 UI， 界面简洁，简洁的让你只看到地址栏和标签 Tab，不过由于地址栏和标签 Tab 在同一水平位置，所以 Tab 开的稍微多点的话感觉有点拥挤了。虽然界面简洁，但更显大气、稳重。IE 9 不支持 XP，需要 Vista 或 Win7。安装 IE 9 会覆盖 IE 8，并需要重新启动计算机。体验 IE 9 Beta 后，最大的感觉是速度快，几乎有浏览本地网页一样的感觉，图片的显示也到达了前所未有的速度。除此之外，IE 9 的性能也有很大的提升。相信很多人关心网银问题，据某些网友测试，工行网银和支付宝在 IE 9 下可以正常使用，其他网银和第三方支付目前不得而知。总提来说 IE9 Beta 版本让人比较满意，如果您也有兴趣试试，请点击这里进入下载页面。相关日志3月份IE浏览器份额继续下滑 IE9不敌FF4(3)IE9平台预览第二版发布 支持HTML5 GPU加速(13)IE9将于8月进行公试(0)尽享网络之美 微软正式发布IE9(2)九月份全球主流浏览器市场排行榜(1)Original article:IE9公测 ...继续阅读 (20)

权威市场调研机构 Net Application 公布了最新的浏览器市场统计数据，8月份，IE8（包括兼容性模式）市场份额新增了 1.17%，达到了 32.04%。IE6 则下跌了 0.87%，仅剩 16.99%。IE6 这款长达 10 年之久的浏览器在欧洲以及美国、英国、法国等发达国家的占有率都已经下跌到了 5% 左右。Net Application 指出：“IE6 最大的坚守用户群在中国，市场份额超过 46%，这对其全球市场份额产生了极大的影响。”虽然 IE8 的市场份额有了不小的增长，不过8月份 IE 整体份额下跌了 0.34%；Firefox 没有重复近三个月以来的下跌趋势，而是出现了0.02% 的小幅增长；Chrome 在本月的增长也很明显，由7月的 7.16% 增至 7.52%。文章转自：驱动之家原文地址：http://news.mydrivers.com/1/173/173782.htm相关日志IE全球市占率重新超过60%(0)3月份IE浏览器份额继续下滑 IE9不敌FF4(3)7月份全球主流浏览器市场份额(2)10月浏览器市场排行 Chrome增长快(1)1月份IE市场份额环比下滑1.1个百分点至56%(0)Original article:IE6全球份额继续下跌 中国是最大用户群©2015一起CSS. All Rights Res ...继续阅读 (20)

尽管被批评为走火入魔，CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计，如果你看到本文介绍的这些精美图标，你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Louis Harboe 设计的 iOS 图标，那么微妙的色彩与纹理，真的难以置信。奥林匹克标志作者: Doug Neiner基于纯 CSS，以 em 为单位，可动态调整尺寸，需要浏览器支持 border-radius 属性，目前支持的浏览器包括 Chrome, Safari, Firefox 和 IE9。jQuery 标志作者: Doug Neiner这是大家最钟爱的 JavaScript 框架 jQuery 的标志，使用 CSS3 的 border-radius 属性。jQuery UI 标志作者: Doug Neiner这是 jQuery UI 库的标志，同样，基于 CSS3 的 border-radius 属性。CCS 标志一宗作者: Justin Sepulveda全部基于纯 CSS3 的 border-radius, gradient, transform 属性。Opera 标志作者: David DeSandro做得非常漂亮，大量使用了 border-radius, gradient 属性，不过在不同浏览器显示不太一致，尤其在 IE 中。iOS icons作者: Louis Har ...继续阅读 (21)

Web 性能越来越被重视，其中很重要的一条是减少 HTTP 请求，减少 HTTP 请求包括很多方面，今天来介绍一下用 Minify 减少网站的 HTTP 请求。Minify 是 PHP5 应用程序，它能合并、压缩js和css文件，并且能通过 HTTP gzip/deflate 及一些相关头，优化客户端缓存。那么以本博客为例来看看 Minify 的效果如何。本博客js文件有 5 个，css文件 1 个。下图是没有使用 Minify 的截图：下面这一张是使用了 Minify 后的截图：从两张图片中的数据对比可以看出，css文件 和js文件都有大幅度的压缩，5 个js文件也合并成了 1 个（最后一个是 google analytics 生成的），所以加载速度也提高了许多。Minify 的使用简单，首先到 Google Codehttp://code.google.com/p/minify/下载该应用，解压后把 min 目录上传到网站根目录下，然后把js和css文件的路径按 Minify 的方式写，就完成了。那应该怎么写呢？css 文件按照下面的方式写：如果有多个文件，则用逗号分开，如：js 文件也是一样的：你也可以在你的域名后加上 min/ 访问 Minify URI Builder，在这个页面中，你可以输入你需要合并压缩的js或css路径，按 Update 按钮后，它会给你生成一个完成 ...继续阅读 (19)

在《jQuery插件Flip》的第二个例子中 （查看 Demo），写过滤选择器的时候，发现在IE下有问题，无法过滤。代码是这样的：$('.flipbox:not(:first)').hide();代码在非IE浏览器下没有问题，即除了第一个含有 flipbox 类的元素外，其他的隐藏，但在IE里却全部隐藏了。经过测试，除了上面的写法在IE下有问题外，下面的几种写法在IE下也有问题：$('.flipbox:not(:first)'); $('.flipbox:not(:last)'); $('.flipbox:not(:even)'); $('.flipbox:not(:odd)'); $('.flipbox:not(:eq(1))'); $('.flipbox:not(:gt(1))'); $('.flipbox:not(:lt(1))');很奇怪的是：如果把 className 换成 tagName，如上面把 .flipbox 换成对应的标签名，又不会出现问题。当然，换成标签名的话，你要确定不会选择到其他不需要选择的标签，以免产生混乱，出现其他问题。对于这个问题，我的办法有两个：与样式结合，改变写法用 .ont 代替 :not对于第一种方法，我们可以在样式里定义：.flipbox { display:none}而 jQuery 代码则写成：$('.flipbox:first').s ...继续阅读 (21)

又过去了，浏览器经过一番“斗争”后，又出现了怎样的局面呢？根据市场研究公司Net Market Share最新发表的统计数据显示，微软IE浏览器依旧以 60.74% 的市场份额位列第一，并且份额连续连两个月上升。而排名第二的Firefox则连续三个月下滑，7 月的市场份额降到了 22.91%。第三名为 Chrome，为 7.61%，比上个月下降了 0.08%。Safari 则一路上升，连续 5 个月份额上升，虽然每次上升的份量不多。7 月 Safari 的市场份额为 5.09%。第四名是 Opera，只有 2.45%，但比上个月增加了 0.18%。也就是说和上个月相比：IE+0.42%FF-0.90%CH -0.08%SA +0.24%OP +0.18%从上面的数据可以看出总体的趋势是：Firefox的份额被IE和 Safari 抢夺了。IE 9 将月 9 月公测，其他浏览器也在不停的更新，浏览器的战争还在进行中，以后局面会怎样，我们静观其变吧。相关日志12月份浏览器市场排行榜(1)10月浏览器市场排行 Chrome增长快(1)IE全球市占率重新超过60%(0)九月份全球主流浏览器市场排行榜(1)IE的市场份额下降到历史最低(3)Original article:7月份全球主流浏览器市场份额©2015一起CSS. All Rights Reserv ...继续阅读 (21)

Flip 是一个基于jQuery的插件，它模仿流行的卡片翻转的效果，可以轻易的让元素在左右上下四个方向翻转。先看看效果吧，查看 DemoFlip 同时基于jQuery UI，所以，要使用 Flip 需要引入jQuery和jQuery UI。Flip 使用很简单，只需让元素调用 flip 方法就可以了。$('.flipbox').flip({})不过，仅仅只是单纯的调用 flip 方法的话，很多属性是默认的，也许不一定符合你的要求，你可以根据自己的要求、喜好添加相应的属性，Flip 提供的全部属性有：content定义翻转后元素的新内容，可以是：文本 、 HTML 或jQuery对象direction定义元素翻转的方向，可选：tb/bt/lr/rl ，默认为 tbcolor定义元素翻转后的背景颜色，默认是 #999999 （从Firebug查看得知）speed定义翻转的速度，默认为 500 毫秒onBefore定义元素翻转之前的回调函数onAnimation定义元素翻转到一半时的回调函数onEnd定义元素翻转之后的回调函数好了，到这里已经介绍完毕，具体应用大家可以根据自己的喜好或发挥想象，这里我做了一个简单的类似幻灯片的翻页效果，查看 Demo如果你想了解关于 Flip 的原文介绍或最新动态，你可以前往该插件的官方地址：http://lab.smashup.it/flip/相关日志j ...继续阅读 (21)

2000 年底，国际W3C织组织公布发行了 XHTML 1.0 版本，到现在已经有 10 年了。这 10 年里， Web 飞速发展，XHTML 1.0 显得“力不从心”，已经跟不上时代的发展了，于是HTML 5孕育而生。W3C在 2010 年 1 月 22 日发布了最新的HTML 5工作草案。和以前的版本不同，HTML 5并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管HTML 5的实现还有很长的路要走，但HTML 5正在改变 Web。HTML 5作为新一代的超文本标记语言，增加了许多标签。这些标签不但更有语义，而且功能强大。具体有以下标签：标签描述定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。定义页面内容之外的内容，但应该与页面内容相关定义声音，比如音乐或其他音频流定义图形，比如图表和其他图像。定义命令按钮，比如单选按钮、复选框或按钮。定义数据模板的一个容器。该元素必须有定义模板的子元素：元素定义可选数据的列表。datagrid 作为树列表来显示定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表定义对话，比如交谈定义嵌入的内容，比如插件定义由 ...继续阅读 (20)

input 的 type 设为 hidden 的话，就是隐藏域（废话）。隐藏域在页面中不显示，但可以有值。既然是“隐藏”的，怎么还说会占空间呢。这是IE的bug，不过这个bug的出现需要一定的条件，换句话说就是出现的几率比较低，所以可能很多人没有遇到过。那什么样的情况下会出现呢？看下面的代码：……（省略 8 个或更多）这样的代码出现的几率是比较小吧，一般情况下，不会有这么多隐藏域，而且表单标签可能会有其他如 p、li 等标签包裹，这样的话，此bug又不会出现。我们抛开这些情况，以此bug会出现来讨论。上面代码运行后在IE6或IE7和FF中的效果如下图：在IE6或IE7中，输入框和提交按钮有很大的间隔，而在FF中则效果正常。如果隐藏域越多的话，IE6或IE7中间隔就越大，而FF中则始终没有问题。你可以查看Demo解决此bug有以下几个办法：把所有隐藏域写在同一行里优点：不要借助其他标签，不要写样式缺点：代码可读性下降隐藏域浮动优点：代码可读性好缺点：需要借助 class，如果使用属性选择器的话，IE6不支持隐藏域绝对定位优点：代码可读性好缺点：需要借助 class，如果使用属性选择器的话，IE6不支持其实并不只是隐藏域会占空间，把 type 换成其他类型，同样会有这样的问题。比如把 type 换成 button，然后 display ...继续阅读 (18)

Mozilla前两天发布了Firefox 4.0Beta 1 ，今天又发布了Firefox 4.0Beta 2 预览版，速度快的让人招架不住。那么我们来看看发布如此神速的Firefox 4.0Beta 2 预览版有什么变化。首先，名字和图标变样了，名字变成了 Minefield ，图标正和名字一样，是个地雷。如下图：而功能上Firefox 4.0Beta 2 预览版除了修复了“浏览器窗口假死”问题外，其他并没有多大变化。Firefox 4.0Beta 2 预览版所提供的各平台版本很完整，涵盖了 Windows 平台、Linux 平台，Mac OSX 平台各自的 32 位和 64 位版本，下载地址如下：Mozilla Firefox v4.0 Beta 2 Pre For Windows 32Bit下载地址Mozilla Firefox v4.0 Beta 2 Pre For Windows 64Bit下载地址Mozilla Firefox v4.0 Beta 2 Pre For Linux 32Bit下载地址Mozilla Firefox v4.0 Beta 2 Pre For Linux 64Bit下载地址Mozilla Firefox v4.0 Beta 2 Pre For Mac 32Bit下载地址Mozilla Firefox v4.0 Bet ...继续阅读 (29)

5 月份，《IE的市场份额下降到历史最低》，为 59.75% ，今天Net Applications公布了 6 月份的最新数据：IE上升了 0.57%，为 60。32%。排名第二的是Firefox，但却有所下滑，从上月的 24.3% 下降至 23.8%。而排名第三的 Chrome 和第四的 Safari 都有略微上涨：Chrome 从 5 月的 7.0% 稍微增长至 7.2%，Safari 从 4.8% 增长至 4.9%，而排名第五的 Opera 则从 2.4% 下滑至 2.3%。Net Applications将本次IE市场占有率上涨归功于微软的信心（Confidence）推广活动，但其他因素也起了一定的促进作用，比如 Windows 7 的成功以及欧洲地区对安装系统时浏览器选择窗口的规定。微软负责IE浏览器业务和营销部门的高级经理瑞恩·加文（Ryan Gavin）本周四在博客上称这条消息“令人鼓舞”。但他同时也表示了谨慎的态度，他说：“市占率提升其实只是评估IE浏览器进步程度的一个方面。我们当然不会仅仅因为最近两个月的好成绩沾沾自喜。相关日志12月份浏览器市场排行榜(1)7月份全球主流浏览器市场份额(2)10月浏览器市场排行 Chrome增长快(1)IE的市场份额下降到历史最低(3)3月份IE浏览器份额继续下滑 IE9不敌FF4 ...继续阅读 (19)

近期Firefox更新不少，发布了几个版本，但却没有引起多少发响。因为很多用户期待的Firefox 4，甚至有些用户等的发牢骚了。6 月 28 日Mozilla终于发布了Firefox 4.0的第一个测试版，不过只有英文版的。本人第一时间下载试用了，感觉不错，尤其是启动速度提高了许多。来看看期待已久的Firefox 4.0到底是什么样吧。安装好之后的界面如下图：怎么和之前《Mozilla Firefox 4.0最新用户界面》不一样呢？别急，我们需要做一些设置：把第一个选项（菜单栏）去掉就行了，我觉得这样更美观。此次跟新应该是有史以来最的更行，简直就是脱胎换骨。UI 方面，把菜单按钮集中到左上角的一个按钮上，使浏览区域更宽敞、界面更紧凑美观。不过目前好像集中的菜单按钮没有所有的功能，要使用其他功能，还是得把菜单栏调出来。你也喜欢吗？那就赶紧下载吧。点击下载相关日志Firefox 4.0 Beta 2预览版发布(1)3月份IE浏览器份额继续下滑 IE9不敌FF4(3)Mozilla Firefox 4.0最新用户界面(7)10月浏览器市场排行 Chrome增长快(1)12月份浏览器市场排行榜(1)Original article:Firefox 4.0 Beta 1发布©2015一起CSS. All Rights Reserved. ...继续阅读 (15)

微软IE9浏览器的开发计划为每八周发布一个新版本，到目前位置已经发布了 3 个平台预览版了，照这样计算，到 8 月IE9将进行公测，并且一份微软内部资料也证实：2010 年 8 月份IE9将进入 Beta 阶段。该资料的大致内容为：开发人员平台预览3 月 10 日发布（首个平台预览版）每隔 8 周发布一个新版本并非完整浏览器Beta2010 年8 月首次提供完整IE9功能Beta 版发布意味着正式准备项目开始RC 候选版本、RTM 版本日期将在 Beta 版发布后确定IE9平台预览版的官方地址是：http://ie.microsoft.com/testdrive/，你也可以到该网站了解IE9的最新消息。相关日志IE9公测版本发布：简洁 极速(8)3月份IE浏览器份额继续下滑 IE9不敌FF4(3)IE9平台预览第二版发布 支持HTML5 GPU加速(13)尽享网络之美 微软正式发布IE9(2)1月份IE市场份额环比下滑1.1个百分点至56%(0)Original article:IE9将于8月进行公试©2015一起CSS. All Rights Reserved. ...继续阅读 (19)