Archive for the CSS Category

HTML5的当下与未来?

HTML5技术而今已不再陌生,不管是趋之若鹜,热情拥抱,还是远远张望,保持距离,HTML5都是技术论坛热门的话题,给人的感觉就是酷、新、看上去很美

任何技术都有他的适用范围,HTML5技术是一种被夸大了的万金油,在目前浏览器支持不一,开发工具,第三方类库缺乏的情况下,HTML5无法解决一切问题,但如果限定它的使用范围,HTML5确实可以优雅的解决很多问题

HTML5是什么?

侠义的HTML5

侠义的HTML5指HTML下一个主要的修订版本,是W3C制定的标准,目前还在发展中,在HTML 4.01和XHTML1.0标准基础上,HTML5标准增加和修改了一些标签元素,其中多媒体相关的有<video>, <audio>, <canvas>,同时集成了SVG内容,数据内容的元素有<section>, <article>, <header>, <nav>, <menu>等,还提供了新的API,如2D绘图(Canvas),离线存储(Local Storage),加强版的cookie(WebStorage),拖拽,通讯(WebSockets),浏览历史管理,文件API(上传下载本地存储),位置API(Geolocation)等。

HTML5

更多HTML5的介绍,可参阅:

http://en.wikipedia.org/wiki/HTML5

http://www.html5rocks.com

http://dev.w3.org/html5/spec

广义的HTML5

广义的HTML5包括HTML, CSS和JavaScript在内的一套技术组合,其目标是减少浏览器对于插件的依赖,提供丰富的RIA(富客户端)应用。所以CSS3, SVG, WebGL, Touch事件,动画支持等都属于HTML5技术范围

广义HTML5

相关技术

Web相关组织

W3C – 万维网联盟 - http://www.w3.org/

WHATWG – 网页超文本技术工作小组 - http://www.whatwg.org/

为什么选择HTML5技术?

互联网趋势

随着网络架构的完善,宽带提升,网速满足实时交互需求时,计算机结构也将发生变化,光驱消失,硬盘消失,内存增大,GPU愈加重要,现在B/S结构的应用越来越多,而HTML5旨在富互联网应用,能够改善B/S结构应用的用户体验,是互联网应用的趋势之一

HTML5 Vs Flash

以前富客户端应用主要通过插件技术实现,比如Adobe Flash, Microsoft Silverlight, Java Applet,存在一些问题:需要安装插件,不支持移动设备,私有技术,没有国际标准等等,当然插件技术也有优势的地方,有特定的用途,下面就Flash技术和HTML5进行比较

HTML5_Vs_Flash

HTML5的缺点

HTML5目前最大的问题有三个:功能简单且分散、浏览器支持不一

功能简单且分散

HTML5是一种技术集合,包括各种标签及其相关API,HTML,CSS,SVG,JavaScript等,没有统一的开发工具,一个完整的HTML5应用涉及到多种技术,导致开发难度大,对于企业应用,HTML5的功能有限,需要借助第三方类库

浏览器支持不一

一直以来HTML5都以跨平台著称,但实际上要实现这一目标工作量巨大,HTML5绝少一个浏览器的标杆(Webkit有希望成为),尤其目前在IE6/7/8占有率居高不下的情况下,希望用HTML5跨全平台基本是不可能的

导致的结果是用户体验不佳,那么什么时候可以选择HTML5呢?

HTML5适用范围

酷的应用

曾经有人这样形容HTML5,doing anything cool (on the web),HTML5可以做很酷的应用,无需安装插件,就可以在网页中全屏观看高清视频,玩儿轻巧的在线游戏,体验流畅的动画效果,浏览精美的网络图,收听网络电台的音乐……一些小而美的应用非常适合HTML5,企业应用中的某些模块也可以选择HTML5

非得跨平台吗?

每种编程语言和技术都有特定的适用范围,如果你的目标客户是iPhone,你只需要考虑Safari for Mobile就可以了,如果还要考虑Android平台,选择支持Webkit内核,如果目标人群是高端用户,用些新技术也是可行的,如果非得所有平台都支持,在基本功能之外,使用HTML5技术增加一些亮点,也会很有吸引力

总结

目前HTML5已经可以解决很多问题,多少可以用到一部分,而面向未来互联网,基于“云+终端”的构架,终端的HTML5的兼容解决方案必然会出现,那时候你就可以全面拥抱HTML5了。

famo.us是什么?

初次访问famo.us,被他的动画和交互效果所震撼,研究过其代码后,发现用到三种技术:matrix3d变换,requestAnimationFrame实现动画,以及物理运动引擎,单从技术上看三者都不难实现,但事物表面背后往往隐藏深意,famo.us的由来和目标却是野心勃勃。

famo.us2

创始人为web apps性能低下困扰已久,后受到Twitter Bootstrap的启发,试图提供一种用于开发本地级运行效率的web app框架,什么Sencha touch, jQuery Mobile等都是低效的代名词,这些为website而生的东西不适合复杂的web apps应用,应绕开浏览器固有的一些缺陷(document 渲染机制,CSS3导致的性能问题,浏览器之间的差异等等),实现一种针对web app的渲染引擎。

对于famo.us能否真正带来一波web app开发的热潮,尚不可知,从各种资料来看,已经有了一些app示例,但我未曾亲眼所见,目前公开的只有官网的元素周期表的例子,平板上运行也算流畅,但耗电厉害,实用性有待考证。

对技术感兴趣的朋友,可以看看这篇演示文稿:http://www.slideshare.net/befamous/html5-devconf-oct-2012-tech-talk ,作者详细介绍了famo.us 技术上的由来,作为演示文稿,循序渐进,简洁明了的思路也是值得借鉴的

famo.us

下面是2012年九月,famo.us的第一封简报,原文:http://us5.campaign-archive1.com/?u=4656ba2b0a364690c8530bc1e&id=675bbf010f

为什么我们如此特别

尝试使用HTML5构建一个web应用,实现可靠的本地程序级的运行效率,通过诸如Sencha Touch,jQuery Mobile和Appcelerator Titanium这样的框架是不可能实现的,实际上,很多公司,譬如Facebook,已经宣布放弃一些在HTML5上的努力,因为浏览器的一些固有问题需要很长时间来解决。Famo.us之所以特别,是因为我们实现了一种渲染引擎,绕开了浏览器的这些固有问题,从而实现可靠的本地级别高性能的复杂web应用,兼容多种设备,简单的说,经过多年的开发,我们解决了困扰复杂web应用的性能问题,应用的布局,动画和设计这些原本只存在于本地应用的东西,现在也可以用于web开发中,我们希望能带来一波从未有过的web app开发浪潮

一旦我们有了突破,下一步我们将寻求一种方式来分享这些成果,以社区驱动,检验,接受和合理分析

famo.us是什么?

如果你喜欢Twitter Bootstrap,那么你将爱上famo.us,很多方面我们都视Bootstrap为灵感来源
Bootstrap 引导web开发者构建跨设备访问的网站,给开发者提供视图图层,网站布局,框架,UI(用户界面)和UX(用户体验)组件,主题,字体和JavaScript插件
Famo.us 引导web开发者构建跨设备访问的应用程序,给开发者提供视图图层,应用布局,框架,UI和UX组件,主题,字体和JavaScript插件

路线图

我们将参照Bootstrap类似的展示方式,当我们正式启动,我们将公开我们GitHub上的工程,这样你可以分享和连接,我们还会创建Google组,你可以提问,Mark和我会直接回复,我们还会通过简报,博客(当它发布的时候),twitter @befamous 进行更新,我们将花费大量的时间保证文档完整和示例打包,就时机而言,我们希望第一个完整版本能在今年晚些时候发布(主要取决于文档)

使用 famo.us

famo.us的开发与Bootstrap类似,使用famo.us你可以先从应用布局开始,然后混合和匹配相应的famo.us 的UI和UX组件和部件

在我们的”hello world”应用中,你将使用famo.us 的卡片布局(Spotify, Twitter, Facebook和很多其他应用都使用这样的布局)构建一个Twitter iPad 应用的复制品,并采用了famo.us的UI和UX组件,并填充了一些演示数据,一旦你掌握了famo.us的窍门,你可以选择替代的应用布局,并按你所喜欢的修改,实际上你可以创建自己的应用布局,组件和主题,并将他们分享到famo.us市场,我们的目标是所有本地应用的主流布局,另外我们希望能和社区合作创造出更多东西,每个应用布局将能用于iOS和Android,同时作为Web app或者包装进一个本地app,实现手机,平板和PC上布局的灵活转换。

通过JavaScript访问和修改CSS3动画

原文:Accessing & Modifying CSS3 Animations with Javascript By Joe
翻译:yCoder.com

昨天Chris Heilmann在Mozilla博客上写了篇关于使用javascript查找和生成CSS动画的文章,文中用了我的一个小例子,详细的说明了代码访问css动画的相关技术

Chris最后写道:

我希望用一个CSSAnimations集合类,通过json或者string存放不同的动画,并使用他们的名字作为key,这样,可以动态的创建一个新的css rule,并添加到document或者rule集合中(以保证跨浏览器),思考中

听起来是个好主意,所以我写了一段JavaScript代码来实现这样的接口

CSS Animation Store

这个主意是通过一个简单的接口来访问CSS动画,实际上之前的Morf.jsCSSA中都有这样的处理,大部分代码已经有了,只需要整整,按照Chris所建议的接口风格写下来

从GitHub下载CSS Animation Store

下面是CSS Animation Store的基本接口(关于代码如何工作的信息),将代码放在标签之前,会创建一个全局的对象 CSSAnimations,这个对象包含所有当前可以使用的CSS动画

比如,获取名称为”spin”的动画,你可以按下面的代码:

var spin = CSSAnimations.spin;

参数spin是一个KeyframeAnimation实例,有下面的属性和函数:

  • keyframes – KeyframeRule 集合
  • original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型
  • getKeyframeTexts() – 返回所有keyframe文本集合, e.g. ['0%', '50%', '100%']
  • getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(’0%’)
  • setKeyframe(text, css) – 设置新的CSS, e.g.setKeyframe(’10%’, {background: ‘red’, ‘font-size’: ’2em’})

可以看出,KeyframeRule提供了一些方法和函数,是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule (注意是frame不是frames)的封装,具有下面的属性和方法

  • css – 该keyframe的css内容, e.g. {background: ‘red’, ‘font-size’: ’2em’}
  • keyText – 该帧的名称, e.g. 10%
  • original – 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule

示例

获取动画中的所有帧

var spin = CSSAnimations.spin;

for(var i=0; i<spin.keyframes.length; i++)
    console.log(spin.keyframes[i].css);

修改动画中的某一帧

var spin = CSSAnimations.spin;
spin.setKeyframe('10%', {background: 'red', 'font-size': '2em'});

反馈

给我博客或者GitHub留言,让我知道你的想法,我还开放了修改和增加的权限

使用原生JavaScript访问和创建CSS动画

如果你不想使用CSS Animation Store,或者只是想知道它的实现原理,可以参看下面的介绍

访问CSS动画

可以通过CSSOM访问keyframe动画,下面是我CSSA中的代码,用于访问指定的CSS动画

CSSAnimation.find = function(a) {
    var ss = document.styleSheets;
    for (var i = ss.length - 1; i >= 0; i--) {
        try {
            var s = ss[i],
                rs = s.cssRules ? s.cssRules :
                     s.rules ? s.rules :
                     [];

            for (var j = rs.length - 1; j >= 0; j--) {
                if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a){
                    return rs[j];
                }
            }
        }
        catch(e) { /* Trying to interrogate a stylesheet from another domain will throw a security error */ }
    }
    return null;
};

使用如下:

var animation = CSSAnimation.find("spin"); // Get the animation named 'spin'

返回对象为 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型,取决于你的浏览器

创建CSS动画

下面是我现在找到的唯一的创建动画的方法,有点变通,通过代码生成CSS文本,然后插入到CSSOM或者通过添加一个<style>标签到当前document中

下面是在我的 Morf.js中的实现代码:

// Adds the CSS to the current page
addKeyframeRule = function(rule) {
    if (document.styleSheets && document.styleSheets.length)
        // Insert the style into the first attached stylesheet
        document.styleSheets[0].insertRule(rule, 0);
    else
    {
        // No attached stylesheets so append to the DOM
        var style = document.createElement('style');
        style.innerHTML = rule;
        document.head.appendChild(style);
    }
}

当你生成了你的CSS动画文本,你可以按下面的方式调用

var css = '@-webkit-keyframes spin { ... }';
addKeyframeRule(css);