原先IE10已經支持很多CSS特性,包括 CSS3 Grid Layout, CSS3 Flexible Box Layout, CSS3 Multi-column Layout, 和 Positioned Floats。這些標準特性合在一起,給開發者提供了強大的工具,可以編寫能適應多種屏幕分辨率的webapp和網站。
CSS3 Regions
CSS3 Regions增加了一個新的機制來管理內容溢出(overflow,內容超過容器的大小)。除了增加滾動條,剪貼板,或者讓其內容超出容器大小等幾種方式外,開發者現在可以通過一對CSS屬性讓這些溢出的內容展示到另外一個元素上面。
來個使用CSS3 Regions的插圖
<!DOCTYPE HTML>
<html>
<head>
<style>
iframe {
-ms-flow-into: contentIdentifier; /* causes the iframe to hide */
}
#div1, #div2 {
-ms-flow-from: contentIdentifier; /* causes these elements' content to come from the iframe with "-ms-flow-into: contentIdentifier" */
width: 120px;
height: 300px;
float: left;
border: solid 2px lightblue;
margin-right: 8px;
}
</style>
</head>
<body>
<iframe src="content.html"></iframe>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
CSS在傳統意義上是一門格式語言,可以將垂直滾動具有無限內容的網頁優化展示。CSS定義了很多屬性,開發者可以利用這些屬性去放置內容。屬性中還包括一些處理內容溢出的機制。特別經典的就是給溢出的模塊加個滾動條。加上滾動條後對閱讀速度和理解會有一定的影響,這方面的專家有寫blog分析過。
還有在網絡上挑戰傳統的不依賴滾動條的複雜文本設計,像報紙或是雜誌一類。
幾個月前,Adobe連同IE的Alex Mogilevsky爲W3C共同起草 CSS3 Regions工作草案。CSS3 Regions給開發者提供了一個新方法,給Web平臺擴展了一個偉大的功能。Windows開發者預覽版中的IE10給開發者第一次展示了CSS3 Regions。
還有更先進的場景,CSS3 Regions規範定義了事件,屬性和方法,允許開發者通過javascript動態創建和管理Regions。我們早先在IE10下實現了一個版本。W3C CSS3 Regions 文檔草案中對此描述的很清楚。
ietestdrive.com 的demo Hands On: CSS3 Regions 實現了一個CSS3 Regions交互的小例子(ietestdrive.com 下面有個 Hands On: Multi-column Layout,windows開發者預覽版,IE10)。
HTML5 web應用還在不斷演化,我們期望開發者可以使用CSS3 Regions 創造出複雜的文本佈局,可以在不同的屏幕下面都可以正常顯示。
CSS3的斷字
第二個要揭曉的特性是CSS3的斷字。對CSS3原生的支持意味着開發者可以在瀏覽器上得到更高的新能和更高品質的斷字。
過去的幾年裏,用戶習慣和web平臺都在慢慢的發生變化。用戶開始使用越來越多的設備登入網絡——手機,平板電腦等。在這些設備上,需要顯示更少的文字,排版也會出現問題。例如:白色河流(rivers of white),變的很流行起來。
同時,一些新特性,比如CSS3多列,CSS3 Region, Positioned Floats 也都出現了。這些特性使開發者可以創建更復雜的text-centric佈局。但是也會帶來像使平均線高變短等排版問題。
爲了使用CSS3的這些新特性打造漂亮的網站和應用程序,並能在更廣泛的設備上應用,有強有力的斷字支持,是很重要的。
在微軟這麼多年office的經驗上,IE10支持世界上最常見的18中語言的斷字。包括加泰羅尼亞語,捷克語,丹麥語,荷蘭語,英語,法語,德語,意大利語,挪威語(博克馬爾語和尼諾斯克),波蘭語,葡萄牙語,巴西葡萄牙語,俄語,西班牙語,瑞典語和土耳其語(Catalan, Czech, Danish, Dutch, English, French, German, Italian, Norwegian, Polish, Portuguese, Brazilian Portuguese, Russian, Spanish, Swedish, and Turkish) ,也包括常見語言的變體,比如英語的英式和美式。
看一下我們的demo把,ietestdrive.com 下面有個 Hands On: Multi-column Layout 體驗一下CSS3的斷字。
你能做什麼
我們急於見到您利用CSS3 Regions和斷字以及其他的IE10新特性創建的網站和應用。如果您開發出來了,把反饋提交到這裏吧http://connect.microsoft.com/ie/.
—Christian Stockwell, Program Manager, Internet Explorer
原文:http://blogs.msdn.com/b/ie/archive/2011/10/10/building-rich-text-centric-pages-in-ie10.aspx
2011.10.11