CSS渐变色(Gradients)也是一个类似的技术。现在火狐,谷歌浏览器,Safari,IE8+都支持这种技术,我们可以安全的在网站上使用它。下面我们来看看CSS渐变色(Gradients)技术基本的语法,浏览器支持情况和缺陷。
CSS3圆角技术能非常好的美化你的页面效果,而且避免了使用图片辅助,一则省去了制作图片的时间,二则省去了浏览器加载图片造成的延迟和带宽。如今,这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持,包括Safari,谷歌浏览器,IE,Opera和火狐浏览器。
HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征。有些新特征我们已知多年并大量的使用,而另外一些主要是用在前沿的手机移动技术上,或者桌面应用中起辅助作用。不管这些HTML5新功能有多强大,多好用,它们都是为了帮助我们更好的开发浏览器前端应用。
火狐浏览器和谷歌浏览器就实现了一些有趣的、自己独有的CSS属性,这些属性虽然都很有趣,但要融入标准的HTML5还需要不少时间。有一个你们可能从未听说的有趣的CSS功能是火狐浏览器独创的-moz-element属性,使用它,你可以用网页上任意的内容作为背景,跟背景图的效果相似。
有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch)。
CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。
有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它。我们也想有100万美元装到口袋里,我决定开发一个Instagram风格的应用,这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片格式。
Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标识的CSS属性,但由于以WebKit为引擎的移动浏览器相当流行,火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。
这是一个很酷的HTML5技术应用,用户可以在画布上用画笔写出自己想看的文字或图案,这个应该能将你写的东西用3D方式呈现,而且让它围着中心3D旋转,只要你设计的巧妙,你可以绘制出让人惊叹的效果和图案。
长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了?他们切换回来了么?现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务。
从Mozilla Aurora 11起,火狐浏览器里实现了一些新功能,其中一个就是对电池状态接口的基本实现。这个很简单的接口能提供你关于电池当前电量,是否在充电等信息,以及一些电池状态变化事件。让我们来看看效果!
当你在人群中谈论到“HTML5”,你也许会感觉到,自己像一位异域舞者或独角兽,来到屋子中间,带有明显的“我很酷,我知道它”的意味。这不能说我们虚荣,多少年来,基本的HTML API一直没有任何发展。尽管新式的浏览器中实现了很多HTML5特征,但大部分程序员仍对一些小的、非常有用的API不了解或从未听说。本文中我将介绍一些这样的API,并欢迎大家发掘出更多不为人知的HTML5 API!
这是一个生产内衣的公司使用HTML5技术制作的公益游戏。曾获得Cutting Edge技术奖。游戏的主旨是反对印度国内存在的包办婚姻现象。内衣公司的游戏非常有内衣特色。但游戏中使用的技术还是让人佩服的,纯HTML5+JS,整个游戏有很好的互动性,值得游戏设计者学习。
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的
JavaScript弹出窗口很讨厌,所有人都不喜欢弹出窗口,但很多网站认为弹出框口很有用,需要弹出窗口。对于开发这样的网站的程序员,他们有个棘手的问题,他们不知道这些弹出窗口是否被浏览器或各种浏览器插件给屏蔽了,没有弹出来。当然,浏览器会通知用户,但这些很少会引起用户的注意。下面是一个简单的方法来测试你的弹出窗口是否被阻拦了。
喜欢使用jQuery的朋友应该知道jQuery里也有相应的$.data()方法,没错,HTML5里的这个原生的dataset就是来替代它的,如果你的页面只需要简单的操作data-*自定义属性,就不需要引入这些体积越来越多的jQuery工具库了,不是吗?
在JavaScript和JavaScript工具库里征战多年,我经常有这样的遐想:什么时候现代浏览器里能提供一些辅助方法和类库,替代那些JavaScript工具库,比如jQuery,让我们用浏览器原生的方法替代它们。我知道浏览器必定会向这个方向改进,但这个进化过程不会很迅速,而且各种浏览器需要共同做这样的革新,火狐浏览器、谷歌浏览器、特别是IE,
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翻转菜单。
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript,它能够:
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属性完成。
程序员给女朋友用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变换,我就能创造出我自己的闪光效果。让我们来实现它!
Mozilla在移动世界大会上宣布它的火狐操作系统(Firefox OS)的同时,也宣布了它的合作伙伴,里面至少有3家中国公司,在无疑让人感到兴奋。Firefox OS很有可能会改变那些发展中国家的生活方式,在发达国家中也将会有相当的影响。在合作伙伴官方网页上,有一个绚丽的火狐的动画,我无法放过要对它写点什么的机会——让我来告诉你它是如何制作出来的!
我最无法忍受的一个事情就是多余的代码。不论是页面中的CSS还是JavaScript,还是浮肿的HTML代码或没有优化的图片,这是我们的懒惰和错误让成千上万的访问用户受连累。有一个非常棒的工具,叫做Helium,它能帮助程序员找出样式表中无用的或有问题的样式规则。让我们来看看是如何使用它!