HTML5

WebP圖檔格式(based on VP8 codec)最初是由Google在2010年9月底所發表的：WebP, a new image format for the Web，它是一種支援無損(lossless)壓縮和有損(lossy)壓縮的圖檔格式，根據Google的官方測試說明.. WebP無損壓縮的圖檔格式和PNG檔相較之下，它能比PNG檔還少26%的檔案大小；若是採用有損壓縮的話也能比JPEG圖檔再少25~34%的檔案大小，話雖如此~ 但是這畢竟是較新的圖檔格式，所以現階段有支援WebP的瀏覽器也比較少~ 除了Google本身的Chrome之外，就只有Opera有支援(CSS gradients, WebP, and Declarative UI)，不過如果現在想試用看看的話，除了可以到WebP官網下載安裝之外，還可以透過IMG2WebP.net這個線上轉檔工具，直接拖張圖片進去就可自動轉成WebP圖檔，所以筆者的年假就弄了這個東西來練練功...Orz 希望有朝一日WebP圖檔的涵蓋率能佔有一席之地。

IMG2WebP線上轉檔工具

．IMG2WebP.net

相關資源

．A Comprehensive Guide to WebP

．2013/01/22 新增CSS Animation + steps()

Sprite是一種經常被用於遊戲開發的技巧，如：Super Mario、Rockman，另一方面也常被用於網頁優化(Web Optimization)之中，將許多小圖檔組合成一張大圖，以減少這些小圖HTTP的請求次數，不過本文並非針對該議題，而是要探討如何透過CSS Animations結合Sprite來達成動畫效果，藉由Browser原生支援的方式，以減少JavaScript的程式運算來提升效率，下述例子將利用Google衣夾人(Google Street View 心得)來示範：

P.S. 目前W3C CSS Animations規格仍在Working Draft狀態。

JavaScript

var offsetX = [0, 49, 98, 147, 196, 245, 294, 343, 392, 441, 490, 539, 588, 637, 686, 735];
var olen = offsetX.length;
s.style.width = "49px";
s.style.height = "51px";
s.style.backgroundImage = "url(img/panda_001.png)";
s.style.backgroundSize = "1029px 51px";
s.style.backgroundPosition = "0px 0px";
s._ox = 0;
_main.appendChild(s);
(function animate(){
	s.style.backgroundPosition = '-'+offsetX[s._ox++%olen]+"px 0px";
	setTimeout(animate,33);
})();

Demo

這是一般透過JavaScript的方式，若從效率上的觀點來看它並不是最佳的解法。

CSS Animation

CSS

@-webkit-keyframes panda 
{
	0% { background-position: 0px 0px; }
	6.25% { background-position: 0px 0px; }
	6.26% { background-position: -49px 0px; }
	12.5% { background-position: -49px 0px; }
	12.51% { background-position: -98px 0px; }
	18.75% { background-position: -98px 0px; }
	18.76% { background-position: -147px 0px; }
	25% { background-position: -147px 0px; }
	25.01% { background-position: -196px 0px; }
	31.25% { background-position: -196px 0px; }
	31.26% { background-position: -245px 0px; }
	37.5% { background-position: -245px 0px; }
	37.51% { background-position: -294px 0px; }
	43.75% { background-position: -294px 0px; }
	43.76% { background-position: -343px 0px; }
	50% { background-position: -343px 0px; }
	50.01% { background-position: -392px 0px; }
	56.25% { background-position: -392px 0px; }
	56.26% { background-position: -441px 0px; }
	62.5% { background-position: -441px 0px; }
	62.51% { background-position: -490px 0px; }
	68.75% { background-position: -490px 0px; }
	68.76% { background-position: -539px 0px; }
	75% { background-position: -539px 0px; }
	75.01% { background-position: -588px 0px; }
	81.25% { background-position: -588px 0px; }
	81.26% { background-position: -637px 0px; }
	87.5% { background-position: -637px 0px; }
	87.51% { background-position: -686px 0px; }
	93.75% { background-position: -686px 0px; }
	93.76% { background-position: -735px 0px; }
	99.99% { background-position: -735px 0px; }
	100% { background-position: 0px 0px; }
} 

JavaScript

s.style.width = "49px";
s.style.height = "51px";
s.style.backgroundImage = "url(img/panda_001.png)";
s.style.backgroundSize = "1029px 51px";
s.style.backgroundPosition = "0px 0px";
s.style.webkitAnimation = 'panda 500ms linear infinite';

純粹透過CSS Animation的方式看起來有點冗長，不過這並不是啥大問題，因為上述的CSS Animation可以寫個function來產生，但這也不是最好的解決方式，因為上述這種方式會有spurt的問題(Demo)，尤其在效率較差的Mobile平台上更顯而易見。

CSS Animation + Transform

CSS

@-webkit-keyframes panda 
{
	0% { background-position: -0px 0px; }
	100% { background-position: -15px 0px; }
} 

JavaScript

s.style.width = "1px";
s.style.height = "1px";
s.style.webkitTransform = "scaleX(49) scaleY(51)";		
s.style.backgroundImage = "url(img/panda_001.png)";
s.style.backgroundSize = "21px 1px";
s.style.webkitAnimation = 'panda 500ms linear infinite';

Demo

透過CSS Animation + Transform似乎是個不錯的方式，但若從Mobile平台來看~ 目前iOS 6.0 Safari、Android Chrome Browser支援度都還不好，僅有最近才剛上架的Chrome beta for Android(2013/01/10)有支援。

CSS Animation + steps()

CSS

@-webkit-keyframes panda 
{
	from { background-position: 0px; }
	to { background-position: -784px; }
} 

JavaScript

s.style.width = "49px";
s.style.height = "51px";
s.style.backgroundImage = "url(img/panda_001.png)";
s.style.webkitAnimation = 'panda 500ms steps(16,end) infinite';

Demo

最後「CSS Animation + steps()」此方式才是目前針對Sprite Animation最佳的解法，尤其是iOS/Android平台均支援此方法。

參考資料

．Sprite animation in CSS3

．Taking steps() with CSS animations

上圖是Path App for iPhone的選單特效，但其實我並不常用Path... 只是某次同事介紹我使用時，我一直覺得它的選單特效很好玩!

心想應該也可以試著用CSS Transitions模擬出來，那何謂CSS Transitions？從規格書上的解釋：

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

也就是說~ 一般我們在設定CSS屬性值之後會立即呈現出效果，而透過CSS Transitions可以讓我們控制該效果要在多久的時間內如何來呈現，所以本文就是用CSS Transitions和一些JavaScript來模擬這個特效，有興趣可以參考下述的程式碼或直接觀看範例：

．Demo

Path Menu in CSS3 Transitions

function on(n,angle,delay)
{
	n.style.webkitTransition = "all 150ms linear";
	n.style.webkitTransitionDelay = delay+"ms";
	n.style.webkitTransform = "rotate(-540deg)";
	var sx = radius * Math.cos(angle*(Math.PI/180));
	var sy = radius * Math.sin(angle*(Math.PI/180));
	n.style.left = sx+"px";
	n.style.top = sy+"px";
	var sx2 = sx *0.91;
	var sy2 = sy *0.91;
	sx *= 0.9;
	sy *= 0.9;
	function round2(e)
	{
		e.stopPropagation();
		n.removeEventListener("webkitTransitionEnd",round2,false);	
		n.style.webkitTransition = "all 100ms ease-out";
		n.style.webkitTransform = "rotate(-360deg)";
		n.style.left = sx+"px";
		n.style.top = sy+"px";
		function round3(e)
		{
			e.stopPropagation();
			n.removeEventListener("webkitTransitionEnd",round3,false);	
			n.style.left = sx2+"px";
			n.style.top = sy2+"px";
		}
		setTimeout(function(){
			n.addEventListener("webkitTransitionEnd",round3,false);
		},1);
	}
	n.addEventListener("webkitTransitionEnd",round2,false);
}
function off(n,angle,delay)
{
	n.style.webkitTransition = "all 150ms ease-out";
	n.style.webkitTransform = "rotate(-630deg)";
	var sx = radius * Math.cos(angle*(Math.PI/180));
	var sy = radius * Math.sin(angle*(Math.PI/180));
	n.style.left = sx+"px";
	n.style.top = sy+"px";
	function round2(e)
	{
		e.stopPropagation();
		n.removeEventListener("webkitTransitionEnd",round2,false);	
		n.style.webkitTransition = "all 150ms linear";
		n.style.webkitTransitionDelay = delay+"ms";
		n.style.webkitTransform = "rotate(-900deg)";
		n.style.left = "0px";
		n.style.top = "0px";
	}
	n.addEventListener("webkitTransitionEnd",round2,false);
}

上圖是HTML的Parsing Model，從圖中來看較值得注意的即為「Tree Construction」至「Script Execution」這一段，這段的意思是當HTML Parser在剖析HTML syntax並建構DOM (Document Object Model)的時候，若遇到「<script>」時會先暫停手邊的工作，等待執行完該Script之後再繼續Parsing，但是若遇到「<script src="external.js"></script>」時，它則需要等待下載該Script檔案完成後並執行該Script。

根據上述的HTML Parsing Model，我們就不難知道為何有些網頁總是會出現部份內容(或空白)，然後可能需要等待一些時間後才會完整呈現，這時候除了調整Script的位置之外，我們還有更好的方式，那就是藉由Script element的「async」或「defer」屬性來加以改善。

Normal execution

<script src="external.js"></script>

這是一般常見的用法，但大多數的時候其實我們並不需要採用此同步的方式來執行

P.S. 一般的內嵌外部廣告仍需要採用此方式，因為它需要同步對DOM進行一些操作，如：document.write()。

Deffered execution

<script defer src="external.js"></script>

採用「defer」的作法，HTML Parser仍會持續進行剖析並建構DOM，但會在背景同時下載external.js，待檔案下載完成且DOM也建構完成之後，按照Script的先後順序依序執行，並發生在DOMContentLoaded事件執行之前，。

Asynchronous execution

<script async src="external.js"></script>

採用「async」的作法和「defer」有點類似，兩者皆不會影響到HTML Parser的進行，但兩者最大的差別在於「async」並不保證Script的執行順序，而是採用先下載完成就先執行的模式，並發生在window's load event執行之前。

參考資源

‧Running scripts in WebKit

‧Asynchronous and deferred JavaScript execution explained

Smart App Banner是iOS6的新特色之一，它的功能主要是應用在當使用者瀏覽到某網頁時，在該網頁的上方會出現一個App介紹的橫幅版面，透過這樣的方式可以讓使用者方便快速的連結下載此App，而它的用法也相當簡單：

Smart App Banner

下述語法即呈現Angry Birds的Smart App Banner在某網頁中，主要的用法在於「app-id=343200656」，後面的數字換成你的App ID即可。

<meta name="apple-itunes-app" content="app-id=343200656">

P.S. 上述測試裝置使用iPad3/iOS6 beta1, 奇怪的是iPod Touch4/iOS6 beta1尚未支援。

Web Application Title

另外在iOS6也新增了此meta tag，它的作用在於當我們想要將某網頁「加入主畫面」時，基本上預設會採用網頁上的<title>文字內容，然而透過下述的簡單設定即可以區隔一般網頁的<title>和「加入主畫面」的title：

<meta name="apple-mobile-web-app-title" content="My App">