Follow me on GitHub

HTML

用Navigation Timing API测试前端性能

Navigation Timing 接口为我们提供了监控网站性能所需的数据。相比于以往基于JS的监测机制,此接口提供的数据更为准确和全面。

JS中通过 window.performance 调用数据,该特性在IE9、最新的Firefox和Chrome中都已实现(http://caniuse.com/nav-timing)

具体的介绍已经有人做了详尽总结 http://www.cnblogs.com/mrsunny/archive/2012/09/04/2670727.html

为了方便理解和测试,对图片稍稍加工为网页,把各时间节点和区间(差值)计算结果标注在旁边,有兴趣的可以访问:http://github.kainy.cn/NavigationTiming/

More >

用HTML5无罪,挺CSS3有理

新特性无法很好地在现有浏览器中展现,是阻碍网页设计者采用最新技术的最大因素。除非你能够接受自己设计的网页在不同浏览器中有不同的外观,才有可能在现有环境下开始使用HTML5和CSS3。

虽然HTML5还 停留在草案阶段;然而换一种思路,如果你在等待CSS3的“完成”,也许将无法在有生之年看到那天的到来——要知道CSS2至今都未能为所有浏览器所支持!

本文作者的观点是:应该让每个用户获得效益最大化。对于那些使用前沿浏览器的用户,我们有什么理由不充分发挥哪些浏览器所提供的新特性?(呵呵,貌似和我《比较拉风的特效尝试》中的观点相似,渐进增强平稳退化).

说是这样说,但要推进新技术普及,比较务实的做法还是提供平滑过渡的方法,故文章大部分内容是关于HTML5和css3跨浏览器降级兼容方案,有兴趣者可继续往下看: More >

为什么我们应该开始用CSS3和HTML5

前几天看了XJP兄的趣文怎样在中国彻底消灭IE6,其中提出的几个方法确有其可行性,不过懂得推倒,更要思考重建;再结合从国内 IE 6 的市场份额说开去,看来当下对IE6等旧技术的声讨已蔚然成风,即将取得阶“段性进展”。

停止对IE6的兼容和抛弃IE6 孰先孰后,这本身就是鸡蛋相生的悖论,打破这一僵局的最好方法就是任一方先付诸行动,而作为开发者,我们所能做的就是:停止IE6兼容页面的生产。

能保持IE6兼容的前端和敢于对IE6说NO的前端,哪个牛逼?看完本文也许能对你做出判断有所影响。

本文首先描述了IE6等过时的技术长期存在而阻碍新技术发展的现状;

然后分别从客户、访客、开发者的角度分析不同角色早CSS3和HTML5新技术普及中的作用;

进而分别从恐惧心理(Fear Factor)、满足现状(Comfortable Factor)、质疑心理(Doubt Factor)、信念不坚定(Faith More >

是时候使用< !DOCTYPE HTML >了吗?

<!DOCTYPE html>是HTML5中唯一的doctype,也被视作将网页“升级”到HTML5的第一步。

相比原来又臭又长的doctype,这种精简的doctype声明深受开发者们喜爱,其好处显而易见:一方面便于记忆,一方面节省流量,最重要的是能够保持良好的浏览器兼容性;三大好处,何乐而不为呢。但是马克思主义哲学教导我们 要用辩证思维看待事物,<!DOCTYPE html>华丽丽的外表下究竟存在哪些不足之处呢?俗话说“初生牛犊不怕虎”而半桶水又叮当响,我也来说说自己的疑问,一来希望得到高手们的指点,二来菜鸟的视角若能引发你的思考那也善莫大焉。

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范,即应该用什么规则集来解释文档中的标记。换句话说,使用“<!DOCTYPE HTML>”声明的网页,浏览器在“阅读”的时候就是以HTML5的规则集来解释文档中的标记,那我们就来看看HTML5的几个新特性对网页文档解释过程所产生的影响: More >

比较拉风的特效尝试

正如你所看到的,小博的主题有了些变化,写篇文章记录之。

这个修改灵感来自于Android自2.1版本开始引入的动态壁纸效果,前景仍然是静态的图标、时钟、播放器微件之类,但背景一动起来,立体效果就多少有了一些。

兼容性:ie就没办法啦,就用原本主题的样式;Opera, FireFox, Chrome, Safari几个浏览器都支持canvas,Chrome下浏览体验最佳,在偶的机子上用Firefox打开博客略卡。

好处,增加网页的动态效果,打破传统网页背景不变前景变的惯势,当然,这还要归功于HTML5这类新技术的支持,动态背景的思路会否引发一场新的设计潮流,天知道;另一方面由于去掉了背景图片,修改后页面加载速度明显加快。

缺陷,新访客开始可能不能适应,注意力容易从内容分散到背景的变化。好在鼠标在内容部分时,背景色较鼠标移到外围区域时来得缓和,貌似鲜艳的颜色容易使人不淡定 不利于阅读, More >

调用Google Maps API实现HTML5 Geo定位

HTML5进入人们视线的时间并不长,但我们已经能看到浏览器变得更强大,应用也变得越具智能。充分利用HTML5的新特性能使我们的生活更加便利。这儿就有一个例子——我们结合HTML5技术和地图应用接口来实现定位。

该应用可兼容的浏览器包括:Opera,Chrome, FireFox,Safari。以及……偶滴U8110自带浏览器(Safari Mobile)上测试通过。

允许 More >