IEBlog:在IE10下创建丰富的Text-Centric网页

Windows开发者预览版下面的IE10提供了两种css特性,可以使开发者很容易的创建rich text-centric Web pages和应用。 CSS3 Regions提供了一个轻量级的机制,可以使相邻的不同区域(area)显示更流畅。IE10对 CSS3 Hyphenation的支持给开发者提供了一个简单的机制,使得在多种语言下有效的断句。


原先IE10已经支持很多CSS特性,包括  CSS3 Grid LayoutCSS3 Flexible Box LayoutCSS3 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 Layoutwindows开发者预览版,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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值