最近几件事

Posted on : 19-06-2011 | By : kim | In : 随记

0

星期5发生了两件事:一件是雅阁着火了,听说是内衣店空调爆炸,烧到了4楼,小姑娘说累了楼上的;还有一件就是40个小马小牛来汕头逛,围观的很多,可是我们几个人一点也不感兴趣。

周末两天主要花在看服务器配置上了,很纠结,如果是自己的倒不用那么纠结,意思意思砍下价然后就买了,然后剩余的时候把COCOA扫完了,没错,是扫完的,嗯嗯,很浮躁。

今天是爸爸节,和牛每人买了一个东西给了老爹,中间发生了一些有趣的故事:D。

黑客的画家很给力,看完了前面二章就觉得兴奋。

p1000当阅读器很舒服,嗯,比iphone舒服的,拿来看书的好处就是你不会感觉到书的厚重,而打击你看书的兴趣,灰常惬意。

UIYI买的包包还可以,算是喜欢的。

拍拍和小阳的两本书到了,站酷的。

星期五的时候走去残联那边搭车看到了梨子,没上去搭话。

下一个长假要背上背包一个人出去旅行。

休息了。明天继续努力打怪练级。小姑娘,晚安。

 

22周年

Posted on : 04-06-2011 | By : kim | In : 随记

0

日历。中国发现第一例艾滋病患者(1985)。22年前的那一场悲剧。

昨天几位同事从客户那里回来,探讨着内蒙古的事,他们想知道发生什么事,但是却在百度搜不到,当他们说到翻墙2个字时,我耳朵竖起来了,小阳说当她听到翻墙2个字时她就想到老金了:D。

打开网页后,知道了一些事。和新疆的暴乱一样,断网了,让他们无法与外界联络。再加上青年节的来临,最近国内的DNS很不稳定,我想是可能有些是墙的缘故吧。

22年了,那个时候我才2岁不到,现在偶尔和身边的人或长辈谈论起这事,知道的都很少了。接触互联网这几年来,从一个或许会跟着他们喊爱国、去砸日本车的无知P孩,到冷眼旁观,躲在互联网背后窥视那深不见底的黑暗,了解所谓的真相的“人”。但是,回头看看身边周围的人,有多少人关心真相呢 ;22年前那些人就有这样的意识觉悟了,在回头看看年轻人。想起了小黑的一句话:Everyone has his own life, but not everyone has his own mind. 他去上大学的时候我还犹豫要不要带他看看墙外的世界,看来那是对的。只可惜,另外一个没有我原先期待的那样。或许像小黑说的一样,世界观早已固定了。

无论如何热心细致地改写过去,现状的主线也不会发生变化。时间这东西拥有更强大的能量,足以——消除人为的变更。它一定会在强加的订正之上再订正,将流向改为原样。–愿有一天,真正的历史能让大家了解。

以后还是不要定计划了,一定计划准会出现计划外的事来干扰你。

打消买M9的念头,昨天在p1000与i9023之间犹豫很久,最后选择了p1000,早上起来有点后悔的感觉了,下午拿了手机,顺便打算去联通开户,忘记带身份证了,最终没开成,然后在附近的便利店买了一条6.5升的澄汁就往残联上面去了,电梯依旧很慢,电梯味道依旧很难闻,嗯,没金源的电梯好。3个房间来回跑后,老李要求教他翻,可是VPN连不上:D,最终没翻成,其他方法也太繁琐了,最后放弃了,见到了叶子和梨子,很开心。今天下午说的话差不多等于这个星期的份。回家的时候和阿5一起,公车上人不多,找了个座位坐下继续看电子书。回家把玩2个小时后,比想象的好多了,特别是玩了qq pad后,有种兴奋的感觉,嗯,秒杀了早上后悔的感觉:D。

LABjs

Posted on : 04-06-2011 | By : kim | In : 其它

0

随着网页越做越复杂,页面上要用到的 JavaScript 也越来越多,一次性把所有可能会用到的 js 全包含在页面中显然不是一个好主意,于是各种各样动态按需加载 js 的方法逐渐流行起来,LABjs 就是这样一个有趣的项目,目前,包括 twitter 在内的很多网站都是 LABjs 的用户。下面将对 LABjs 1.0.4 版的实现原理做一些分析。

限于篇幅,关于 LABjs 的使用说明这儿就不写了,需要的话请看它的官方文档

所谓动态加载 js ,指的是在页面上的某一些 js 执行时,由这些 js 动态加载外部的 js (有时候也包含执行页面上已经定义的一些模块函数)。

粗略整理,加载外部 js 的方法大致有这么几种:

 

方法 说明
XHR Eval 通过 Ajax 方式获取代码,并通过 eval 方式执行代码。
XHR Injection 通过 Ajax 方式获取代码,并在页面上创建一个 script 元素,将 Ajax 取得的代码注入。
Script in Iframe 通过 iframe 加载 js。
Script DOM Element 使用 JavaScript 动态创建 script DOM 元素并设置其 src 属性。
Script Defer/Async 严格来说,这一条不算是动态加载外部脚本的方法,但很多动态加载外部脚本的方法里都会用到 sctipt 的 defer 或 async 属性,所以也把它单独列在这儿。这个方法利用 script 的 defer 属性,让脚本“推迟”执行,不阻塞页面加载,或者设置 async 属性,让脚本异步执行。遗憾的是这两个属性不是所有浏览器都支持
document.write Script Tag 通过 document.write 把 HTML 标签 script 写入到页面中。
cache trick 先使用自定义的 script 的 type 属性(如 <script type=”text/cache” …),甚至使用 Image、Object 等 HTML 对象将 js “预下载”(下载到浏览器缓存里),等真正需要执行对应代码时再将它真正地插入页面中。
Web Worker 部分浏览器支持 web worker 功能,可以创建一个 worker 在后台工作,包括加载外部脚本。

 

各种方式各有优缺点,比如能否跨域、是否会阻塞其它资源的下载(能否并行下载)、能否管理控制执行顺序、耗费的资源、是否兼容各大浏览器等(部分方法的特性可参考这儿)。事实上,如果仅仅只是想把外部 js 动态加载到页面上的话还是很简单的,但如果可能要同时加载多个 js ,希望它们能尽可能快地下载(并行下载),并且有时候可能希望它们能保证执行顺序,而且要兼容各大主流浏览器,就会有一点复杂了。为了实现这样的目标,LABjs 使用了上面方法中的三种,分别是:Script DOM Element、cache trick、XHR Injection。下面我们先详细看一下这三种加载 js 方式的优缺点。

Script DOM Element

这是最常用的方式,它的优点很多:可以跨域、可以加载任何格式的外部 js(不需要对外部 js 进行重构)、不会阻塞其它资源的下载、实现简单。并且,在 Firefox/Opera 下,通过这种方式插入多个 js 脚本,浏览器会并行下载这些 js (同时下载几个取决于浏览器的并行连接数),同时还能保证它们的执行顺序与它们被插入页面的顺序相同。不过,在 IE(以及 Safari/Chrome)下,如果用这种方式同时插入多个 js,这些 js 也会并行下载,但浏览器不能保证这些 js 的执行顺序,哪个先下载完浏览器就会先执行哪个。

从上面可以看到,Script DOM Element这种方式在 Firefox/Opera 下的表现近乎完美,事实上,在这些浏览器下,Script DOM Element 也是 LABjs 默认使用的方式。

cache trick

上面我们看到,Script DOM Element方式可以满足 Firefox/Opera 下的需求了,那么 IE/Safari/Chrome 下怎么办呢?LABjs 中使用了一种 cache trick 的手段,它创建一个 script 标签,并将其 type 设为 “text/cache” ,把它插入页面。这种 trick 似乎是 LABjs 的作者 @getify 首先提出来的。这个 “text/cache” 只是为了语义上有意义,你完全可以把 type 属性设为任何不为 “text/javascript” 的值,比如 “love/oldj” 等。

根据 LABjs 作者博客上的文章,在 IE/Safari/Chrome 这三个浏览器下,如果一个 script 元素的 type 属性为一个类似 “text/cache” 这样的浏览器不认识的值,浏览器仍然会正常下载这些 js ,并且下载完成后正常触发 onload 事件,但是它们将不会执行这些脚本。于是,通过这样的方式可以先将 script 加载到浏览器缓存中,等对应的 js 需要被执行时,再创建一个新的 script 元素,设置其 type 为正确的值,src 为刚才“预下载”的脚本的值,将其插入页面,这样,这个 script 将会从缓存(而不是网络)瞬间加载对应的 js,并立即执行。通过这样的方式,LABjs 在 IE/Safari/Chrome 等浏览器下实现了脚本的预加载以及执行顺序管理。

另外,”text/cache” 这种 trick 在 Firefox/Opera 下是不能工作的,因为这两种浏览器会拒绝下载它们不认识的 type 的 script,这样也就无法“预加载”了。不过这不会造成问题,因为这两种浏览器可以直接通过上面的 Script DOM Element 的方式来加载外部脚本。(Firefox 4 曾试图更改相关特性,结果导致 getify 的强烈不满,具体事件可看这里。)同时,这种方法需要浏览器支持并且开启缓存,如果浏览器禁用或不支持缓存,也就无法“预加载”了,而且更糟糕的是,几乎没有 js 方法能检查用户浏览器是否支持并开启了缓存。

XHR Injection

cache trick 方式虽然可以实现并行下载、管理执行顺序,但毕竟是一种很依赖于特定浏览器特定版本的特性的方法,如果万一哪一天某个浏览器某个新版本改变了它的特性,这种方式可能就失效了,作者本人也觉得它很丑。所以,如果 LABjs 检测到要下载的外部 js 与当前页面是同域并且浏览器不为 Firefox/Opera(不能保证执行顺序与插入顺序一致)的话,它会优先采用 XHR Injection 的方式。

XHR Injection 的原理很简单,就不多说了。下面我们来看一看有了这三种方式后, LABjs 是如何实现的。

LABjs 的内部逻辑比较复杂,变量也比较多。不过简单来看,LABjs 的结构主要如下图所示。

LABjs

可以看到,LABjs 对外公开的 API 一共有 4 个方法,分别为 setGlobalDefaults() 方法,setOptions() 方法,script() 方法以及 wait() 方法。其中最常用的是 script() 以及 wait()。LABjs 的内部变量中,最重要的是一个叫 engine 的对象,它负责 script() 以及 wait() 方法的具体实现以及内部变量的维护。

engine 对象主要有这么几个方法:script()、wait()、loadScript() 以及 waitFunc(),另外还有两个主要的属性:queueExec 及 exec。下面简单解释一下这几个方法及属性的作用。

script() 公共 API 中的 script() 事实上是生成一个 engine 对象,再调用这个 engine 中的 sctipt() 方法。这个方法根据 queueExec 的值,调用 loadScript() 方法对传入的 js 地址进行加载或预加载操作。

wait() 公共 API 中的 wait() 事实上是生成一个 engine 对象,再调用这个 engine 中的 wait() 方法。

loadScript() 加载 js 的方法。根据具体浏览器情况,以及是否同域,这个方法会调用上面提到的三种方式之一来加载 js,或者预加载 js ,或者将预加载完成的 js 最终加载到页面中。

waitFunc() 每一个 engine 内部有一个 ready 变量,默认为 false,如果这个 engine 要加载的 js 都已加载完成了,则 ready 为 true,同时执行 waitFunc(),这个 waitFunc() 里一般包含你想要在指定 js 加载完成后执行的函数,接下来则是触发下一个 engine(如果有的话)。

queueExec 这是一个布尔值属性,用于标明当前 engine 加载 js 时是否需要预加载。默认状态下,queueExec为 false,表示直接加载指定的 js,当使用了 wait() 方法后,queueExec 在新生成的 engine 里的值为 true,表示这个 engine 中的 js 先预加载。

exec 这是一个数组,其中的元素都是待执行的函数。预加载 js 时,loadScript() 会立即执行以便预加载指定 js,同时同样的 loadScript() 也会被 push 一份到当前 engine 对象的 exec 数组中,并在当前 enginewaitFunc() 执行时被依次调用,loadScript() 这次执行时则会将刚才预加载的 js 真正加载到页面上。

整个流程大致如下:

LABjs 流程

上面这个流程图只是一个简化版(比如有关浏览器判断,以及选择哪种方式下载 js 的部分全部省略了),LABjs 内部的完整的逻辑要更加复杂。

图中的 ready 表示当前 engine 中引入的 js 是否都已加载完成(LABjs 中有一个同名的内部变量)。可以看到,一开始执行 $LAB.script 时,LABjs 会生成一个 engine 对象,在此之后的链式调用的所有的 script() 方法实际上调用的都是这个 engine 内部的 script() 方法,直到链条上出现 .wait() 为止。wait() 方法将生成一个新的 engine,之后所有通过的 script() 方法引入的 js 都将先被预加载,等上一个 engine 完成时才被触发正式加载。

关于 LABjs 的实现原理就介绍到这儿了。这篇帖子写了很久,在电脑里及脑子里反复修改了很多次,一直觉得说得不够清楚而不敢放上来,不过貌似现在这个版本依然写得很复杂,要写好技术文章果然不是一件容易的事,呵呵。

LABjs 中用到了很多技巧,比如用 setTimeout(fn, 0) 的方式把一个耗时的操作“丢”到另一个“线程”上去。如果有兴趣,不妨花一些时间阅读一下它的源代码。与其它动态加载外部 js 的解决方案相比,LABjs 是我见过的最小巧同时最强大的一个,它的最大特点是能尽可能并行地下载待加载的 js ,但需要时又能保证 js 的执行顺序。其它 js loader 也有很多,但它们默认情况下要么不支持并行下载,要么虽然支持并行下载但在部分浏览器下不能保证 js 的执行顺序,从这个角度来看,LABjs 是它们中最出色的。但其它解决方案也各有特色,比如 RequireJS 等,与 LABjs 相比,它不仅能加载外部 js ,还能动态地定义、添加 js 模块,在某些应用场景下,它可能更合适或更为强大。

另外,LABjs 也有一些不足,比如一些 trick 方法过于信赖特定浏览器特定版本的非标准(或标准中没有定义)的特性,但这些特性是无法通过 js 来检测的,只能通过判断浏览器版本信息以及以往的经验来假设它具有或不具有某种特性。这种方式比较丑陋,而且是不安全的,如果某一天某个浏览器的新版本改变了相关的特性,js 代码将完全无法知道,于是相关的功能或 trick 就失效了。最好的办法是能直接通过检测浏览器特性来完成相关的判断,但谁让有些特性真的难以取到呢?而且,更好的方式,大概是一起推动更合理的标准,让将来某一天在新的浏览器下能非常轻松自然地实现 js loader,让 LABjs 等解决方案彻底地退出前端开发的历史舞台,或许这才是前端工程师们最美好的未来。

 

转自:http://oldj.net/article/labjs-study/

Modernizr

Posted on : 04-06-2011 | By : kim | In : 计数

0

原文地址:http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

堂主译文地址:http://www.osmn00.com/translation/221.html

转载请尊重原作者及译者劳动,附带以上信息,谢谢合作~

——————– 分割线,以下是正文 ——————–

ALA308_modernizr_final.jpg

10年前,只有最尖端的网站设计师会为网页的布局和修饰使用CSS。那时的浏览器对CSS进行布局的支持即不完善又漏洞百出,所以这些人在坚持WEB标准化的同时,也不得不采用hacks来使得他们的页面在所有浏览器中都能正常显示。其中一个被使用的越来越多的hack技术是浏览器嗅探(browser sniffing),使用Javascript里的navigator.userAgent属性来判断用户使用的是什么品牌哪个版本的浏览器。浏览器嗅探技术可以快捷的将代码进行分支,以便针对不同的浏览器应用不同的指令。

今天,以CSS为基础进行的布局已经非常普遍,浏览器们对它的支持也非常的坚实。但是现在CSS3和HTML5来了,历史转了个圈又回到了原地——各个浏览器对这些新技术的支持又开始变得参差不齐了。我们早都习惯了书写整洁的符合标准的代码,也不会再使用CSS hacks或者浏览器嗅探这些不靠谱又低级的技术。我们也相信越来越多的用户会认同网站不必在所有浏览器里都看起来一样的理念。那面对当下这个熟悉的情形(浏览器支持的不同),我们该怎么做呢?简单:使用特征检测(feature detection),这意味着我们不必通过问浏览器“你是谁?”来做出不靠谱的推测。取而代之,我们问浏览器“你能做这个或那个吗”。这么来检测浏览器的能力是很简便的,但一个个的花时间去手工测试依然令人厌烦。此时Modernizr可以帮助我们。

Modernizr:专为HTML5和CSS3开发的功能检测类库

Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。

当你在网页中嵌入Modernizr的脚本时,它会检测当前浏览器是否支持CSS3的特性,比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等,同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 <input>标签的类型和属性等。在获取到这些信息的基础上,你可以在那些支持这些功能的浏览器上使用它们,来决定是否创建一个基于JS的fallback,或者对那些不支持的浏览器进行简单的优雅降级。另外,Modernizr还可以令IE支持对HTML5的元素应用CSS样式,这样开发者就可以立即使用这些更富有语义化的标签了。

Modernizr是基于渐进增强理论来开发的,所以它支持并鼓励开发者一层一层的创建他们的网站。一切从一个应用了Javascript的空闲地基开始,一个接一个的添加增强的应用层。因为使用了Modernizr,所以你容易知道浏览器都支持什么。下面我们来看一个通过应用Modernizr来创建尖端网站的实例。

从应用Modernizr开始

首先从www.modernizr.com下载Modernizr的最新的稳定版(目前国内封了Modernizr的官网,我们可以从github上下载。或者更简单点,可以从堂主这里下载最新的1.7版的脚本文件),在官网上你还可以看到它支持检测的所有特性的清单(本文末位会给出这些清单,以便翻不了墙的童鞋可以知道都支持哪些)。下载完最新版本以后(作者写这篇文章的时候用的是1.5版),把它加入页面的<head>区域:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Beautiful Sample Page</title>
<script src="modernizr-1.5.min.js"></script>
</head>
…

接下来,向<html>元素添加“no-js”的类。

<html>

当Modernizr运行的时候,它会把这个“no-js”的类变为“js”来使你知道它已经运行。Modernizr并不仅仅只做这一件事情,它还会为所有它检测过的特性添加class类,如果浏览器不支持某个特性,它就为该特性对应的类名加上“no-”的前缀。所以,你的<html>元素可能会变得看起来像下面这个样子:

<html>

Modernizr同时还会创建一个JS对象,被命名为“Modernizr”,其内容是为每一个检测完的特性给出的布尔值结果组成的列表。如果浏览器支持新的canvas元素,那么“Modernizr.canvas”的值就是true;如果浏览器不支持这个新元素,那它对应的值就是false。这个JS对象针对某些功能还会包含更为详细的信息,如“Modernizr.video.h264”会告诉你浏览器是否支持这个特殊的编解码器。“Modernizr.inputtypes.search”会告诉你当前浏览器是否支持新的search input类型,等等。

我们的未加工的简单小页面看起来有点像一个准测试系统了,但它具备更好的语义性和可访问性。让我们为它添加一点基本的样式:一点文字格式、颜色和布局以使它更好看。目前位置,没什么新东西,只是为一个语义化结构的HTML页面添加表现样式,看看添加了样式后的页面

下面,我们要增强这个页面使得它更有意思。我想为头部的h1应用一个奇特的文字效果,把关于检测特性的列表分为两栏,然后将带有一张照片的关于Modernizr的部分的一切都弄到右边去。我还要把围绕页面内容的边框变美点。现在,更给力的CSS3使你可以对一条规则添加更多的属性,如果浏览器不支持这些属性,它会忽略它们。配合使用CSS的层叠(继承),你可以不必依赖Modernizr而使用像“border-radius”这样的新属性。不过,使用Modernizr可以为你提供一些既有手段提供不了的功能:根据浏览器对新东西支持的差异动态修改的<html>的类名。我会通过对我们的页面添加2条新的规则来说明这点:

.borderradius #content {
  	border: 1px solid #141414;
  	-webkit-border-radius: 12px;
  	-moz-border-radius: 12px;
  	border-radius: 12px;
}
.boxshadow #content {
  	border: none;
  	-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
}

第一条规则为“#content ”元素添加了一个12像素的圆角。但在既有的页面里我们已经为“#content ”元素设置了一个属性值为“2px outset #666”的边框,这在box是直角的时候是蛮好看的,但在圆角情况下就不是了。感谢Modernizr,我可以在浏览器支持“border-radius”的情况下给box设置一个1px的实边。

第二条规则更进步了一点,我们为“#content ”元素添加了一个阴影,并且针对支持“box-shadow”属性的浏览器一并移除了border属性。为什么呢?因为大部分浏览器并不为“边框附带边角”的组合外加阴影这样的效果提供一个好的表现(这是一个应该被注意的浏览器的瑕疵,但我们现在却必须忍受它)。同不使用阴影只使用边框相比,我宁可只使用阴影包围元素。采用这种方式,我可以拥有全世界最好的,准确点的,最好的一种CSS表现:在支持“box-shadow”属性的浏览器里将会呈现一个美妙的阴影;只支持“border-radius”属性的浏览器将会呈现一个好看的圆角薄边框;对于那些这2者都不支持的破烂浏览器,我们会看到一个2像素的直角边框。

下面我们要为header应用一个自定义的特殊字体,下面的是我们目前针对h1的声明,没改动版的:

h1 {
  	color: #e33a89;
  	font: 27px/27px Baskerville, Palatino, "Palatino Linotype",
  	"Book Antiqua", Georgia, serif;
  	margin: 0;
  	text-shadow: #aaa 5px 5px 5px;
}

这些声明在我们的基础网页里工作良好,27像素的文字大小也很适合我们为h1设置的那些字体的展示。但对于我要用的名叫“Beautiful”的字体来说,27像素就太小了。下面我们要添加其他的规则来使用这个自定义字体:

@font-face {
  	src: url(Beautiful-ES.ttf);
  	font-family: "Beautiful";
}  

.fontface h1 {
  	font: 42px/50px Beautiful;
  	text-shadow: none;
}

首先,我们添加“@font-face”声明,并在其中为我们的自定义字体指定路径、文件名和字体名。之后我们用一条CSS语句为我们的h1选择字体样式。你会看到,我这里选择了一个很大的字号,那是因为“Beautiful”字体本身就比其他字体的文字要小很多,所以我们必须要指示浏览器在展示我们自定义字体的时候,给予h1一个很大的字号。

此外,我们漂亮的手写体文字在文字阴影方面存在一些渲染问题,所以我们要在浏览器决定使用自定义文字时取消文字的阴影。另外,关于检测特征部分的列表还需要被分为两栏。为了达到目的,我要使用牛叉的CSS columns 属性,这一属性会使浏览器把列表智能分栏而不会打乱它的顺序,而我们的列表,虽然没有数字序号,却也是按照字母顺序排列的。当然,不是所有的浏览器都支持这一属性,对于那些不支持的浏览器,我们使用浮动来达到2栏的目的——使用了浮动后列表在视觉上不会再按照字母顺序排列,但那也好过什么都没有。

.csscolumns ol.features {
  	-moz-column-count: 2;
  	-webkit-columns: 2;
  	-o-columns: 2;
  	columns: 2;
  }  

.no-csscolumns ol.features {
  	float: left;
  	margin: 0 0 20px;
  }  

.no-csscolumns ol.features li {
  	float: left;
  	width: 180px;
}

我又一次使用了Modernizr来针对不同的情况设置不同的属性。如果浏览器支持CSS columns,它就会把列表完美的分为2栏,如果不支持,通过Modernizr为<html>添加的“no-csscolumns”类我们也可以用浮动的方式使得列表变为两栏,虽然不那么完美,但也比直接来一个长串的单栏列表强。

这里您可能注意到了我为属性添加了不同的前缀(-moz-、-webkit-、-o-),这是因为不同的浏览器厂商对该功能的实现有不同的定义,所以要实现该功能需要针对不同的浏览器加上它们对应的前缀。

经过这些改变,我们新的页面看起来更好了。

我们将为我们的页面添加进更多的渐进式增强效果来结束这篇教程。基于WebKit的浏览器支持一些更牛叉的特效,如CSS变换、动画和三维转换等。并且我想在最后一个阶段的页面中应用一些这类特效。再一次的,这些属性会被添加进我们既有的CSS中并在不支持它们的浏览器中给忽视。所以,针对这种一方面是渐进增强一方面是不被支持的情况,使用Modernizr是恰当的。

首先设置的:

@-webkit-keyframes spin {
  	  0% { -webkit-transform: rotateY(0); }
  	100% { -webkit-transform: rotateY(360deg); }
}  

.csstransforms3d.cssanimations section {
  	-webkit-perspective: 1000;
}

@keyframes规则是新的CSS animations规范中的一部分,目前只有WebKit支持。它容许你针对任何属性声明一个完整的动画路径,并在你喜欢的任何阶段改变它们。想知道关于animations的更多知识,请阅读 W3C Working Draft specification

下面我们添加使得我们一个元素在三维空间里旋转的代码:

.csstransforms3d.cssanimations section h2 {
  	background-image: url(modernizr-logo.png);
  	overflow: hidden;
  	-webkit-animation: spin 2s linear infinite;
}

因为logo要转动,且又希望它转的时候和背景相处的融洽些,于是这里用了一个png格式的文件。我还采用了一个“overflow:hidden”属性来隐藏设置了缩进-9999像素的header里的文字。使元素以3D的形式旋转虽然有趣却并不太美观。最终,我们选择使用animation规则,设置它的旋转周期为2秒钟,沿着自身的中轴线旋转,永不停止。

最终的页面看起来很给力,甚至还针对WebKit浏览器设置了好玩的动画。我希望到现在你能明白使用Modernizr可以使你对网站控制的手腕变得多么牛叉,以及它可以令真正的渐进增强变得多么简单。这还不仅仅是Modernizr的全部好处,它还可以帮你建立基于JS的fallbacks以及可以帮你应用html5那些牛掰的新特性。

附,Modernizr检测清单:

1. @font-face
2. Canvas
3. Canvas Text
4. WebGL
5. HTML5 Audio
6. HTML5 Audio formats
7. HTML5 Video
8. HTML5 Video formats
9. rgba()
10. hsla()
11. border-image
12. border-radius
13. box-shadow
14. text-shadow
15. Multiple backgrounds
16. background-size
17. opacity
18. CSS Animations
19. CSS Columns
20. CSS Gradients
21. CSS Reflections
22. CSS 2D Transforms
23. CSS 3D Transforms
24. Flexible Box Model
25. CSS Transitions
26. Geolocation API
27. Input Types
28. Input Attributes
29. localStorage
30. sessionStorage
31. Web Workers
32. applicationCache
33. SVG
34. Inline SVG
35. SVG Clip paths
36. SMIL
37. Web SQL Database
38. IndexedDB
39. Web Sockets
40. hashchange Event
41. History Management
42. Drag and Drop
43. Cross-window Messaging
44. Touch Events

20110522

Posted on : 22-05-2011 | By : kim | In : 旅行, 随记

0

星期六亲戚群聚会了,又是有的没有的说话。

饭后回家休息了下,2点半的时候让老表带路想给惊喜,结果走错门了。:D

不打算用ghost系统,所以整了一个下午,安装了原版的,但是发现这系统无法识别移动硬盘的格式,于是得,但是下载很慢,整好后发现问题还是很多,算了,下次加内存换系统吧。

早上应该开车接出来的。

面包车很恶劣,今天的雨天更恶劣。

还好梨子最后没去成。

发生了不好的事后好像只剩下瞎担心、瞎紧张,然后就什么事都做不了了。

很后悔了,好像可以用水深火热来形容。

姿势也好,走路方式也漂亮。敏捷利落、动作潇洒、漂亮。  dsk :D

睡觉 睡完后明天继续努力打怪练级 晚安。















html5的localStorage与IE的userData

Posted on : 18-05-2011 | By : kim | In : 计数

0

localStorage是一个客户端的键值的数据库,这意味着它存储在用户的浏览器。这意味着用户的数据保存在自己的机器,在他们的浏览器。 这也意味着,它们的数据仅提供给他们的那台机器,当前浏览器。每台电脑每个浏览器localStorage是没有共享。chrome,firefox,opera,safari, IE8+都支持此属性,IE8也支持。

if (typeof(localStorage) == ‘undefined’ ) {
alert(‘Your browser does not support HTML5 localStorage. Try upgrading.’);
} else {
try {
localStorage.setItem(“name”, “Hello World!”);
}catch (e) {if (e == QUOTA_EXCEEDED_ERR) {
alert(‘Quota exceeded!’);
}
}
document.write(localStorage.getItem(“name”));
localStorage.removeItem(“name”);
}

 

在 IE8 以下的版本,我们可以使用其他IE 特有的userData替代。

  • 基本语法 :
    XML: <Prefix: CustomTag id=sID style=”behavior:url(‘#default#userData’)” />
    HTML: <ELEMENT style=”behavior:url(‘#default#userData’)” id=sID>
  • Script:
    object.style.behavior = “url(‘#default#userData’)”
    object.addBehavior (“#default#userData”)
  • 属性:
    expires 设置或者获取 userData behavior 保存数据的失效日期。
    XMLDocument 获取 XML 的引用。
  • 方法:
    getAttribute() 获取指定的属性值。
    load(object) 从 userData 存储区载入存储的对象数据。
    removeAttribute() 移除对象的指定属性。
    save(object) 将对象数据存储到一个 userData 存储区。
    setAttribute() 设置指定的属性值。

 

一纸废纸

Posted on : 18-05-2011 | By : kim | In : 随记

0

最近发生了一件很不高兴的事儿,然后就听到了很多关于学历问题的分析:

如果是在城市,多数工薪一族看中文凭,工薪家族的,一般觉得有文凭才有好工作,才能有好收入,这是无后台背景的人的最后一点奢望,现实社会就是这样,你没后台,没文凭,没好的家庭背景,只能靠薪水养活家,那么文凭就是一根救命草。

学历的表面不是问题,问题是学历高的,往往要比普通学历的人理论面更广,接触面更高。其实得谈个概率问题,还有相对性问题,有人介绍2个女生给你一个本科,一个普通中专一般对这2者的基本印象,已经会倾向于本科的先入为主了,而且,就我接触的人里面,学历高的,比学历低的人,逻辑性更强,处事更为稳当。我指的人比率,就是学历高的人,这方面有优势的人更多一点。当然也有一些连初中生都不如,排除一些因为经济问题不能读大学的外,其他能读到本科的,学习能力往往要比中专的强。学历是一张纸,但学历高的,出来社会,学习能力具备优势的,往往拓展能力更强,机会也相对越多。相对性,中专生也有人才,但比例少很多。相对性,中专生也有人才,但比例少很多。但是呢,学历高的,教育孩子、处事、将来再出去找工作,机会感觉会更多,更稳当一点。就我们自己买东西,也肯定挑品牌的东西多一点,因为心理暗示品质更有保障。

有人选媳妇看学历。稍微大点的公司招人还是看学历。神马的都学历,在这样一个神奇的社会里,很多读书的人不是为了学知识,而是为了文凭。知识力量远比这张纸重要一百倍了。这些人情愿花无意义的钱换一张文凭,也不愿把钱投资在自己身上,自学自我增值。知识,能力远比内张纸重要得多的呢。什么学历的人都好,一样的,只是低学历的很多基础不好,也不愿意努力学习进化,愿意努力去进化的人少而已。

以后有哪个HR敢拿学历说事一定叼死他,当面鄙视死他,放霸气直接震死得了,这么弱智,这类HR不被公司废了也没用,也许他们觉得就算能力高学历低了,那么就也可以用这点把你的待遇压低了,敢情看的就是张纸,利用的就是有无这张纸的这一点,直接吃纸去得了,这样的公司大概也就这样了。拜拜。

特码的,本来在电视上和书上看的情节居然在现实生活中听到了,搞得哥多愁善感死。见到公车上一个抱婴儿的年轻妈妈就往坏的方面想去了。fuck。

追求现在的人很多;追求未来的人很少。价值观不同,努力的方面不同……能花那么多精力和时间修鼠标就为了玩个游戏。为什么不把这份时间花在……呢?就因为无聊没目标吗。

希望我的朋友好好的。希望你们能够找到路。希望未来这个世界能够回到常识下运行。

今天晚上吃上了很多天都不能吃的炒蛋了。追求未来。拥抱未来。:D

 

希望你们你们你们能尽早渡过这个时期

Posted on : 12-05-2011 | By : kim | In : 随记

0

真的存在的担心。最初只是觉得可能会发生这种事,没想到真的听到了。希望你们好好的。

现在我能做的也就剩下加紧脚步实现自己的计划了。

足够强大能帮助很多很多人。

OC入门笔记

Posted on : 09-05-2011 | By : kim | In : 读书笔记

0

#import <Foundation/Foundation.h>//#import导入头文件

@interface Tclass : NSObject //类定义

{

NSString *str;//变量

}

- (void) setStr: (NSString *) xx;

- (void) tfnc; //-号表示一个函数开始,必须实例化才能调用;+号表示可以直接调用这个类中的这个函数,而不用创建这个类的实例。

@end

 

@implementation Tclass  //类实现

- (void) setStr: (NSString *) xx
{
str = xx;
}

- (void) tfnc
{
NSLog(@”%@”,str);
}

@end

 

int main (int argc, const char *argv[])
{
NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];//自动内存池分配和初始化

Tclass *test = [[Tclass alloc] init];//分配对象的新实例并初始化
[test setStr: @"hello cold"];//传入OC字符串@”hello cold”

[test tfnc];//调用tfnc方法,输出hello cold

[test release];//释放test对象使用的内存

[pool drain];//释放已分配的内存池

return (0);

} // main

 

11的妈妈节碎片

Posted on : 08-05-2011 | By : kim | In : 随记

0

这两天比平时需要上课起的还早

计划又偏移了

以为闪电十一人完了出新番,原来还没完

小黑在进化,肥和X还是老样子

拉光很威武,他哥和日本那次事件一样⋯⋯从一件事基本上就可以看出一个人的⋯⋯国家和民族这类名词真的真的是很狭隘的

担心原来就是那样子的,体验过担心的人我想应该就不会做让人担心的事了吧

以后还是不能乱麻烦人家了,感谢梨子和坤坤:D

100天就这样过去了,那时候还哭了,真没用啊,下午听到2个人在谈论你的事,很心酸

这两天正式学OC了

和邻居的几个人探讨了些问题,发现他们很多观念真的很落后,也无法怎么修正他们的世界观,还是算了,省点力气

下午看着书的时候又被强拉出去了

今天是妈妈节 我也跟了地球人一样形式主义了一把,回来的时候经过蛋糕店顺手买了个印有康乃馨的蛋糕

OP的新OP和数码的新OP的MP3还没有,等待中…

明天开始会很忙很忙了

叶子今天给的歌很好听 尤其是歌词 很有感触
“那一天你丢给我一个小纸团
自顾转身 远远走掉
那上面写着[希望你永远记住我]
我轻轻抚摸着你的字迹
呆立在晚霞下失声痛哭”

end