menu

博客放弃兼容IE6以及IE7

就在几天前,WordPress宣布在最近一次的更新里不在支持IE6,这一举措加速了IE6的死亡。虽然我的博客早已经在顶部挂起公告,希望IE6和IE7的用户能升级他们的浏览器,但其实仍然安分地继续做着尽可能的IE6兼容。不过这次真的打算放弃了,既然连wordpress都宣布了不支持IE6,维护者也不应该拘泥下去,尽管我的wp版本始终是2.9.3…

IE6是伟大的,2001年8月发布,到现在10年时间,寿命之长恐怕真的是要空前绝后了。虽然web开发者对IE6深恶痛绝,但同时却也不能忘记IE6给开发者带来的价值——它曾经一度提高了web开发的门槛,虽然幅度有限。所以前端对IE6的感情是复杂的,失去了眼中钉的同时,也失去了一个挑战的舞台——IE6总能给我们惊喜,不管那惊喜是不是我们想要的——当然通常不是。

国内的IE6仍然是大多数,虽然系统升迁win7导致IE8也不少,但若要国内的网站放弃IE6远远还不够——甚至我自己的系统里就是IE6。根据5月份sitepoint的浏览器市场份额报告,IE6的比例已经下降到了4.37%,不过在国内恐怕在这后面加个数字都不止。其他IE版本里,IE7占9.78%,IE8占30.20%,IE9占0.75%,可见正常情况IE8才是最为流行的IE版本。

我的网站IE占比34.57%,其中IE6占比23.22%,也就是说,我的网站IE6占比7.73%,其实比例也已经相当低。

Read more... »

CSS3 box-shadow 详解(1)

这段时间确实比较繁忙,所以博客一直都没什么产出:) 前段时间看到一篇《9个你现在可以使用的CSS3属性( 9 CSS3 Properties You Can Use Now )》,描述了当前可以渐进使用的CSS3的新的属性。但实际上由于种种原因,当前能使用的其实远达不到9个这么多。

本文讨论的就是其中之一,box-shadow,而且是从比较细节的角度。既然是详解就必然要写的详尽,于是,写到一半的时候才发觉内容太多,所以就分成了2个章节。这个章节里讨论box-shadow标准的描述,所以你能知道一些非常细节的东西,当然这些东西都没法使用,所以如果你只是想了解怎么使用box-shadow,请跳过这一章,直接阅读我写的《CSS3 box-shadow 详解(2)》,那里我会写记录些常用的或者是有趣的使用方法。

和往常一样,我先是查找了国内已经有人写过的内容避免自己写的和他们的有所冲突。和我之前写 CSS3 Media Query 时的没有多少好文的情况不同,关于box-shadow已经涌现出了很大的一批内容,所以后面的描述中我将援引他们。

Read more... »

CSS3 Media Queries 详解

说起CSS3的新特性,就不得不提到 Media Queries 。最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章。同时位列其中的也有前天我刚刚翻译的 IE9, Opacity 和 Alpha

虽然标题相同,但本文并不是列表上 CSS3 Media Queries 的译文,因为原版有Demo有例子有图片,全文不长而且不难看懂,所以我也就不翻译了。基于自己已经了解到一定程度,所以就打算自己写。

CSS2中有已经定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。

而 Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。

引用CSS3 Media Queries里的直观的 DEMO,当浏览器宽度改变时,应用的CSS发生变化。而这一切,原本需要 JavaScript 的控制才能做到。

Web移动化的趋势越加明显,各种手持设备的发展现在完全引领着整个互联网的发展。虽然国内受到很多制约,但是这种浪潮却无法阻挡。前段时间jQuery宣布mobile计划,也加速了这种变化。Media Queries 不久的将来应该就会被广泛使用,以更好的支持新兴设备比如iPad。事实上, jQuery 甚至有 Media Queries的插件

下面来看看 Media Queries 做了什么。

Read more... »

IE9,Opacity 和 Alpha

译自同名IEBlog:IE9, Opacity, and Alpha,关于IE9和透明度兼容CSS和JS代码。日期是昨晚(8/17)6:15。

以下为我的译文:

IE9引入了 CSS3 Color Module 的支持,包括其中已普遍使用的透明度( opacity )属性。如同我们已经完成的其他基于标准的特性,为了在其他浏览其中的相同的标记能工作在IE9的标准模式下,IE9实现了透明度。

IE8以及其之前的版本实现了另一种替代的机制,使用IE特定的滤镜( filter )属性中的 alpha filter 来应用透明度。这就形成了一个兼容性的挑战,因为IE9标准模式只支持 opacity,而不支持 alpha filter ( IE9的兼容即怪异模式,7和8仍然支持 alpha filter 但不支持实现opacity )。

对于使用最佳实践特性检测法的站点,兼容性不是问题。它们会检测 opacity 在IE9中是否被支持并使用 opacity 替代滤镜。问题在于那些使用了浏览器检测的站点以及那些错误的假设了IE总是使用透明度滤镜而不是opacity并在脚本中只使用滤镜的站点。那些站点里的web页面,在IE9默认的9的文档模式下,透明度效果会失效。解决方法是先检测基于标准的 opacity 特性,然后是浏览器特定滤镜,就如同我们之前文章里描述的那样

Read more... »

跨浏览器边框探索

虽然起了一个看似很牛逼的题目,但本文可以说完全是蛋疼的人的一种消遣~通常开发人员都有自己的放松方式。写文章用不了太久,倒是图材准备了老半天。谨以此文,让我们来消遣下各个浏览器对于边框的理解方式。

参与此次测试的浏览器包括windows下的几乎全部:ie6,ie7,ie8,ie9preview,chrome,firefox,safari,opera,seamonkey。各版本皆为网上下载的最新版。并且由于这次的测试里,IE678的表现一致,firefox和seamonkey又是裙带,所以合并作IE8和firefox。

Read more... »