在JavaScript和JavaScript工具库里征战多年,我经常有这样的遐想:什么时候现代浏览器里能提供一些辅助方法和类库,替代那些JavaScript工具库,比如jQuery,让我们用浏览器原生的方法替代它们。我知道浏览器必定会向这个方向改进,但这个进化过程不会很迅速,而且各种浏览器需要共同做这样的革新,火狐浏览器、谷歌浏览器、特别是IE,
下面是嵌入的一个iframe,这个页面将要和这个iframe使用window.postMessage API进 […]
HTML5规范里有一个被大家忽略里的好东西,那就是右键菜单。HTML5里的右键菜单规范显示,程序员可以通过创建简单的HTML5menu和menuitem标记来生成右键菜单。菜单只在指定区域的右键菜单内显示。所以,你不需要再通过创建浏览器插件来实现这种效果。
我相信很少人知道JavaScript里还有这样一个很有用的东西:DocumentFragment。程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点。程序员可以不依赖可见的DOM来构造一个DOM结构,而效率高是它真正的优势,试验表明,它比直接操作DOM快70%。
请使用火狐浏览器,在下面灰色的区域用鼠标右键点击,在弹出的右键菜单的顶部,你会看到我们自定义的菜单!多实用的功 […]
CSS就像迷一样让人想不透;我们喜欢CSS,是因为它很简单,但我们又不停的要求它提供更多的功能。CSS里已经新增的特征有placeholders, 动画技术和click events等。但有一个问题是,CSS是静态的;完全没有逻辑操作。可CSS里的calc函数却打破了这种趋势,它提供了程序员使用CSS编程计算的能力。
:target是CSS里一个非常有趣的伪选择器。它在CSS里发生效力的过程是这样的:当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。让我们看一看这个:target伪选择器是如何起作用的:
随着浏览器技术的进步,CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果,它们能做很多更强大的事情。我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单。
用鼠标悬停在菜单上,你就能看到很酷的3D翻转效果! 首页首页首页 关于关于关于 联系联系联系 全部文章全部文章 […]
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript,它能够:
点击下面的链接,你会看到浏览器地址是hash值的变化,以及相应链接的CSS样式变化!这是:target伪选择器 […]
下面的元素的width,padding,margin都使用了CSS calc进行计算。 简单计算: 100% […]
下面的这个链接上的 pointer-events属性值是none。点击它们,什么都不会发生。我还在“测试”链接 […]
HTML5的变革给我们带来了大量非常有用的新属性,比如placeholder, download, hidden,等等。每一种新属性都给我们带来了对页面元素新的控制方法和控制效力。特别的,有一个新的属性,它能让我们控制多个元素的属性,就是:scoped。style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效
HTML5给我们带来了很多非常简单但却非常强大的HTML属性:placeholder, download, and autofocus,等等。另外一个新出现的属性就是hidden属性。当一个网页元素有了hidden属性后,它的表现跟CSS的display: none;作用非常相似,元素将会消失,而且不占用任何页面空间。
HTML5给我们带来了一大堆神奇的东西。以前需要用JavaScript和Flash完成的任务,例如表单校验,INPUT placeholders , 客户端重命名下载文件和音频/视频,这些都可以使用基本的HTML完成。这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上;这个动作用autofocus属性完成。
下面的演示中方框具有绿色的边线,这说明scoped样式已经生效。而且这个样式只对特点DIV内部有效。 代码 & […]
[cleanarchivesreloaded usejs=”0″] — [ […]
程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。
HTML5给我们带来了很多“重型”的特征,例如WebSockets,Web Workers,History, Storage 和一些像 classList 这样的工具类。然而,也有很多小的非常好的特征;其中一个就是新添加的download属性。download属性能让我们指定浏览器下载时采用新的文件名称。而不是链接上原始的文件名称。
HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。
随着CSS技术的不断革新升级,我们获得了更多的控制样式的能力。一个不是那么众所周知的技术就是我们可以在浏览器里美化被选择的文字的样式。Windows自身提供的是一种很难看的墨绿色的颜色,而苹果电脑上提供的是浅绿色。火狐浏览器,IE9,Opera和谷歌浏览器允许我们自定义被选择文字的颜色
最近我学到了一种很酷的技术,使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。我的朋友都知道,年轻时候我非常痴迷《街头霸王》游戏,而当我看到了这个素材….你知道我的脑子里想到了什么吗?
在下面文本框里输入信息,看有什么变化
用鼠标选中下面的文字,看看它们选中后是什么颜色! 绿色 此开卷第一回也.作者自云:因曾历过一番梦幻之后,故将真 […]
我曾在Addy Osmani的博客里看到过这种效果。这种当鼠标悬停时光泽一闪而过。十分的简单,但非常的漂亮。在重新设计网站版面时,我很想在我的logo上使用这种效果。只需要两个HTML元素和一个CSS变换,我就能创造出我自己的闪光效果。让我们来实现它!
动作控制 直拳: a 踢腿: z 反身踢腿: e 跃起360度踢腿: q 光电球拳: s 冲天拳: d 跳跃: […]
Mozilla在移动世界大会上宣布它的火狐操作系统(Firefox OS)的同时,也宣布了它的合作伙伴,里面至少有3家中国公司,在无疑让人感到兴奋。Firefox OS很有可能会改变那些发展中国家的生活方式,在发达国家中也将会有相当的影响。在合作伙伴官方网页上,有一个绚丽的火狐的动画,我无法放过要对它写点什么的机会——让我来告诉你它是如何制作出来的!
我最无法忍受的一个事情就是多余的代码。不论是页面中的CSS还是JavaScript,还是浮肿的HTML代码或没有优化的图片,这是我们的懒惰和错误让成千上万的访问用户受连累。有一个非常棒的工具,叫做Helium,它能帮助程序员找出样式表中无用的或有问题的样式规则。让我们来看看是如何使用它!
用鼠标在图片上划过,看看光泽一闪而现的效果! 效果 效果区域
如果当你翻开一本书的时候,里面飞出来一只蝙蝠,或是一条会喷火的龙,你会有什么感觉?惊奇!赞叹!目瞪口呆!我想到了电影《哈利波特》里的那份会动的报纸。这里将会给你带来一种类似的奇观——一本书里的大千世界。随着浏览器技术的不断革新,越来越多的可能成为了现实。这里就是现代网页技术的典型代表。
计数器(counter),“老一辈”程序员估计对这个东西印象深刻,早期的网站页面上经常会有这个东西,如今这种特征都变成了笑话。CSS里自己实现了一种计数器,很简单,很直接。使用CSS计数器,你可以实现简单的纯CSS的计数功能,并能将其显示到页面上。下面我们简单的看一下CSS计数器是如何使用的!
如今的这个年代,流行在Web页面上使用了大量的JavaScript,我们需要寻找各种方式来优化它们,使它们更快。我们使用事件委托来让事件监听器更有效率,使用降频技术来限定某些方法的使用次数,使用各种JavaScript加载器来动态加载我们需要的资源,等等。