處理不同瀏覽器間的CSS3差異


尖端技術從來都不是沒有代價的。有時這意味著新興標準只能得到有限的瀏覽器支持,而當那些標準的草案改變的時候,也意味著你必須回去把你的代碼重寫 一次。當這些同樣的問題遇上仍在進行中的CSS 3規範的時候,就不僅是瀏覽器支持 非常少的問題了,而是大部分瀏覽器都有實現他們特定的前置。這些前置是非常複雜的事情,如果你需要把這些東西用在你的代碼裡的等方面,你通過需要更多的工 作,而且——他們通常都是有目的的。


打個比方,如果你想用到CSS3中的圓角新特性,你應該使用border-radius 義他們。但是因為這個特性仍然還沒有最終定稿,所以瀏覽器們只支持他們對應的自己實現的版本。所以-moz-border-radius 就對應於Mozilla Firefox, 而-webkit-border-radius 則相對應於Safari和Chrome了。對於Opera呢?也有自己的版本:-o-border-radius。



 








特有的前置都不會驗證,這不太理想。對於CSS驗證器來說,對浮動環繞的效果而使用了特定的前置的時候,則應該提出一個建議而不是一個錯誤。無論如 何,如果你想在你的CSS代碼中使用絕對的標準的話,你都應該遠離這些特定的前置。


不過,如果你想玩玩CSS3這個新玩具的話,你就會了解為什麼這些特定前置有很好的理由存在,而為什麼你在現階段也會使用到這些來體驗到目前的 CSS3規範的。


讓我們繼續停留在這個圓角效果的例子上,設想一下假如你只想應用到一個對象的一個角上會產生什麼情況。 CSS3規範還在繼續變化時,Webkit項目決定使用–webkit-border-top-right-radius時,Mozilla卻使用了 –moz-border-radius-topright。沒有這些前置的話,你將要處理兩條不同的CSS規則,而且其中一條是絕對會被永遠廢棄掉的,但是仍然有可能會有舊版本的瀏覽器會使用到。



從純粹的技術上來說,這兩個前置都是"錯誤的",這是好事。將來,最終的規範一定會發布,而只有一種規則會被標準化,那時候所有的瀏覽器都會實現這 一標準。在這一點上,你可以簡單地在你的代碼中將特定的前置刪除掉就行了。這些特定的前置好處就體現出來了,它使得這些代碼很容易被找到和刪除。


有一件你絕對就應該做的事情就是只針對一個瀏覽器的前置。蘋果的HTML5展示最近被大家關注,只支 持Safari,而不支持其它實現了HTML5的瀏覽器[雖然,你可以不 使用Safari 5查看蘋果的HTML5演示],而同時Google也 發布了HTML5展示站點:HTML5Rocks[HTML5在同為使用Webkit內核的Safari和Chrome上支持不同],這些都證 明了只為一種瀏覽器做優化不是一個好主意,甚至有人認為HTML5是應用程序 設計中的新冒險


如果你必須要使用特定的前置這個非標準化的行為讓你感到不安的話,你還有一個辦法。那就是使用Javascript來自動完成它。


開發人員阿龍.古斯塔夫森寫了一篇"列表的關鍵文章",他在文章裡嘲笑了這些特定的前置並且提供了一段 Javascript的替代方案給和他感覺一樣的人們。


古斯塔夫森把這些特定的前置叫做CSS的分支。雖然我們基本上同意他的觀點,但是這個"分支"這個詞是有問題的,因為分支代碼沒有任何錯誤,事實上 這是開源世界中的規範(你在使用Git或者是Mercurial嗎?)。而且這些特定前置並不是分支,它們是在標準化還沒有完成的時候推動網絡進步的臨時 的解決辦法。


拋開那些術語之後,古斯塔夫森的觀點是有效的——忽略標準和使你的CSS代碼只工作在特定的瀏覽器中的做法兩個都是糟糕的主意。


古斯塔夫森的這個小小的Javascript庫可以幫助你避免將特定的前置寫進你的CSS中。但是令人印象深刻的是,這個腳本確實做到了與將前置寫 進CSS文件中的一樣的效果。這個方法有些缺點——會延長加載時間,而且對於那些禁用了Javascrpt腳本的用戶來說,也是無效的。


如果你現在就開始使用CSS3的特性,你將無法避免使用特定的前置,但是至少,你可以選擇如何處理他們。例如:直接在樣式表中使用這些前置、將這些 特定前置的樣式寫到單獨的分離的文件中或者是使用古斯塔夫森提供的這種類似的腳本來解決它。


供稿:SafariX — Safari中文博客,分享Safari資訊、技巧和擴展。
中文出處:http://safarix.net/dealing-with-browser-differences-in-css-3
英文出處:http://www.webmonkey.com/

相比Google和蘋果,微軟到底有多厲害?



昨天微軟負責溝通的主管Frank Shaw在微軟官方博客上發表了一組和微軟產品相關的數據。目的顯然是為了駁斥最近一些對微軟不利的負面報導。

你不得不佩服微軟,這些數字真厲害。


其實微軟不必這麼低調,而不是讓數字說話。你看人家蘋果喬布斯就敢於站出來對Flash指手劃腳。以下我們就解讀以下這些數字後面的潛台詞:
 

1.5億

Windows 7許可證銷量,這讓Windows 7成為有史以來增長最快的操作系統。

微軟潛台詞:我們的對手炒作得很厲害,人們都說微軟"大勢已去",但我們每秒賣出7套操作系統。記住這組數字, 下面會用到。

710萬

2010年iPad預計銷量

5800萬

2010年上網本預計銷量

3.55億

2010年PC預計銷量

微軟潛台詞:還記得1.5億這個數字嗎? iPad遜色了吧。 iPad和上網本會吃掉PC?我有3.55億個理由告訴你這樣的事情短期內不會發生。還有我們已經售出了1.5套PC操作系統。

<10

2008年美國裝有Windows的上網本所佔百分比。

96

2009年美國裝有Windows的上網本所佔百分比。

微軟潛台詞:即便上網本會幹掉PC,上網本的市場也是我們說了算。 Chrome OS?目前還是個傳說吧。等他們趕上我們的十分之一的時候再來叫板兒吧。或者至少上市以後再來。

0

2009年11月Windows Azure付費用戶數量。

10000

2010年6月Windows Azure付費用戶數量。

700000

肯塔基州公立學校中使用微軟雲計算效率工具的學生、老師和教員數量。肯塔基州是美國部署雲計算規模最大的州。

微軟潛台詞:Google和Salesforce在雲計算方面炒作得很厲害,但是看看微軟在很短的時間內做了什 麼。在肯塔基州我們才是贏家。

1600萬

美國排行前25的日報所有訂戶數。

1400萬

Netflix訂戶數。

2300萬

Xbox Live訂戶數

微軟潛台詞:Netflix很棒,但我們比它更大。所有人都在談論報紙的死亡,但我們比所有報紙加起來的規模都 大。

900萬

測試版Office 2010下載數,微軟歷史上規模最大的測試產品。

微軟潛台詞:Office不行了?笑話。

2140萬

一年中Bing新增用戶數。

微軟潛台詞:我們冒險進入了一個被壟斷的行業,並且獲得了很多用戶。以前我們做的不好,但我們的轉機出現了。 214萬,一年。

24%

2005年Linux服務器市場份額。

33%

2007年Linux服務器預計市場份額(2005年預測)。

21.2%

2009年第四季度Linux服務器實際市場份額。

微軟潛台詞:人們都說Linux將佔領市場,但他們錯了。

880萬

2010年第一季度全球iPhone銷量。

2150萬

2010年第一季度諾基亞智能手機銷量。

5500萬

2010年第一季度全球智能手機銷量。

4.39億

2014年全球智能手機預計銷量。

微軟潛台詞:這也iPhone,那也iPhone,閉嘴吧。 iPhone市場份額微乎其微。你怎麼不說諾基亞呢至少人家市場份額很高。

9

Salesforce.com獲得100萬付費用戶所需年數。

6

微軟Dynamics CRM獲得100萬付費用戶所需年數。

100%

Salesforce.com CEO在演講、小組會議、採訪、以及博客中提到微軟的機率。

微軟潛台詞:Salesforce最關注我們了。你認為他們比我們強?不一定。實現同樣的目標我們所用時間更 短。他們的CEO對我們如痴如醉,而我們可不會因為他們而失眠。

1.73億

Gmail全球用戶數。

2.84億

Yahoo!郵箱全球用戶數。

3.60億

Windows Live郵箱全球用戶數。

2.99億

Windows Live Messenger全球活躍用戶數。

1

Windows Live Messenger在全球即時通訊服務中的排名。

微軟潛台詞:用戶數還不到我們一半的Gmail?我們的Live Messenger用戶都比他們多。

57億美元

蘋果2009財年淨收入。

65億美元

Google 2009財年淨收入。

145億美元

微軟2009財年淨收入。

230億美元

微軟2000財年總收入。

584億美元

微軟2009財年總收入。

微軟潛台詞:是的,蘋果在市值方面超過了我們。但這沒意義。重要的是賺錢。更總要的是你能得到的錢。收入。蘋果 和Google都很了不起,但他們加在一起也沒我們收入多。不是五年前,也不是十年前,而是現在。

所有人都損我們的CEO,讓他走人。但你看看上面這些數字變化,他讓我們的收入翻了一番還多。其它公司做夢都想做到這一點。

English version by MG Siegler 編譯/techcrunchchina

微軟SQL Azure SU3已經在全球6個數據中心上線惠及中國


SQL Azure團隊在TechED上展示的SQL Azure Service Update 3已經上線,並且完成了一些重要的特性: 50GB數據庫的支持- 當數據庫容量增加到50GB,用戶可以在單個SQL Azure數據庫中存儲更多的數據。這將給你的應用提供這持續的擴展性。


關於SQL Azure的價格,以及如何創建和修改(在不同尺寸的SQL Azure數據庫間切換)你的數據庫,利用新的尺寸帶來的優勢,請參看這篇博客空間數據(Spatial Data)的支持– SQL Azure支持地形(Geography)和幾何(Geometry)數據類型,可以通過T-SQL進行空間數據查詢。


這是一個重大的特性,使得 Windows Azure平台能夠支持空間和位置感知的應用程序。層次ID(HierarchyID)數據類型- HierarchyID是一個長度變化的系統數據類型,能夠在數據庫中存儲樹形結構的數據。在新的特性之外,SQL Azure在2個新的數據中心上線了,提供給用戶更靈活性並惠及全球。


兩個新的數據中心一個在東亞、一個在西歐。

查看:SQL Azure SU3 is Now Live and Available in 6 Datacenters Worldwide

HTML5 動畫效果


新聞來源:queness.com


HTML5 的Canvas 對象將改變JavaScript 的使命,使之成為HTML5 下強大的動畫腳本編寫工具。本文介紹了8 個你從未見過的,基於HTML5 Canvas 和JavaScript 的動畫,這些令人難以置信的效果將使你對HTML5 徹底折服。需要指出的是,這些都是瀏覽器的原生動畫,無需任何插件。


Tunnelers



純JavaScript + HTML5 Canvas 生成的交互動畫,難以置信。


The Mesmerizer



在格子中移動鼠標,顏色隨著改變並擴散到周圍的格子,很迷幻。用鼠標點四角的格子,或按鍵盤,可以看到更奇妙的效果。

Burn



在頁面上移動鼠標,或按下鼠標,這樣的效果,很難相信是瀏覽器原生的。

Cheloniidae Live



也是基於純粹的JavaScript,不過使用了一個JavaScript 庫。很有趣,你可以通過修改其JavaScript 代碼實現自己的效果(可惜被牆了)。


Canvas 3D engine



一個基於 Canvas 的 3D 引擎。目前只支持預設的圖形,紋理及基本交互功能。


Bomomo



很值得一試。


DDD



這個交互動畫也很有趣。


Plasma Tree



非常阿凡達。

本文國際來源:queness.com 8 Simply Amazing HTML5 Canvas and Javascript Animations (原文作者 kevin

.NET平台發布已十年


10年前,微軟承諾創建"下一代Internet"。 2000年,微軟比爾·蓋茨(Bill Gates)和史蒂夫·鮑爾默(Steve Ballmer)共同宣布了".NET",如今它已經成為軟件開發人員最青睞的平台之一。 

2000年6月22日,鮑爾默在專業開發人員 大會(PDC)宣布了.NET,發表演講時,".NET"在他口中出現了62次。鮑爾默說:"什麼是.NET呢?.NET代表了一個環境,一種編程架構, 它將構架下一代Internet。"




隨著.NET平台的不斷發展,一種全新的適應.NET平台的高級語言C#也隨之誕生。 C#由Delphi之父Anders Hejlsberg開發,是.NET平台的主角。根據Tiobe的編程語言排行榜,C#今年已經上升到編程語言榜的第六位,僅次於Java、C、C++、 PHP、VB,從這裡也能看出.NET平台的受歡迎。



[轉載][譯]IE6終極備忘:修復IE6下 25+ Bugs


去年就想將IEbug系統地整理下,但一直都忙於工作、學習沒有完成,看到這篇E文後,我毫不猶豫的放下了手中的工作將之翻譯出來。

由於是第一次譯文,所以錯誤在所難免,歡迎大家批評指正。





原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs


翻譯:http://www.vfresh.org/w3c/727(文對原文進行了補充)




IE6最好的策略就是不去兼容它。



好吧,我知道你的難處,你不得不去兼容IE6這個狗血的瀏覽器,因此不得不在兼容IE6上花費很多時間。對此,我頗有同感,來讓我來幫助你吧。



我不會像許多文章那樣讓你去抵制IE6,這並不會幫助到你(迫不得已時)去兼容IE6;因為IE6依舊佔有一定的市場份額,你無法放棄IE6


本文將幫助你來解決這個難題。



我查閱過很多資料來摘錄這些解決方案(有些是我自己提供的),現在我做成手冊提供給大家搞定IE6這個傢伙。我儘可能的提供了最優解決方案而不是一hacks,並且提供了一些相關的資料。如果你發現有更好的方法或者本文有錯誤,請聯繫我。


【目錄】



【策略】



在討論IE6BUG及如何修復之前,有必要先講一些策略去避免這些惱人的問題——正所謂防患於未然



  1. (那個未浮動的)內容之後添加一個<span style="clear:both;"></span>

  2. 觸發包含了這些鏈接的容器的hasLayout,一個簡單的方法就是給其定義height:1%;

    擴展閱讀:



  1. 把一張圖片命名為favicon.ico並放置在網站的根目錄,IE及其他瀏覽區都會
    自動設置該文件為收藏夾圖標;

  2. <head>區域聲明:
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    需要注意的是收藏夾圖標會被一直緩存,除非你清除瀏覽器的緩存,才會更新新的圖標;如果你想要瀏覽者自動更新收藏夾圖標,請給 favicon.ico設置expires

    擴展閱讀: