您的位置:首页 > 其它

IE8面向Web开发人员的功能改进

2009-11-10 09:54 288 查看
2009年3月20日,微软向全球发布了WindowsInternetExplorer8(IE8)正式版,成为人们关注的焦点。IE8迄今最符合标准的版本,它完全支持级联样式表(CSS)级别2.1,并加强了对CSS3、HTML4.01的支持,也能很好地支持HTML5。由于改进了对这些HTML元素的支持,Web开发人员现在可以构建更具表现力和可访问的HTML标记。本文将探讨对IE8中关于HTML和CSS支持行为的更改,以及这些更改如何影响Web开发人员。


HTML改进
为了帮助开发人员充分利用HTML4.01提供的元素和更好地解释Web开发人员期望表达的语意含义,WindowsInternetExplorer升级了对下列表示性元素的支持:
P元素:表示逻辑段落。
OBJECT元素:可以表示任何对象,包括图像。
button元素提交其value属性,而非innerHTML,这意味着现在可以使用跨浏览器FORM方案的button元素。
getElementByIdNAME方法现在区分大小写,不再使用属性进行不适当的搜索。
setAttribute方法现在不区分大小写,这意味着指定属性时不必再使用“驼峰式”大小写格式(如“camelCaseWord”)。它也可以正确标识HTML属性,如CLASS和FOR。



P自动添加元素结束标记
当后面跟随TABLE、FORM、NOFRAMES或NOSCRIPT元素时,缺少结束标记的P元素会立即自动添加结束标记。



viewplaincopytoclipboardprint?


<html>
<head>
<title>简单的P元素结束示例</title>
<metahttp-equiv="X-UA-Compatible"content="IE8"/>
</head>
<body>

<p>这是第一段</p>

<pstyle="margin-left:30px">这是第二段。<!--Pnotclosed-->

<tableborder="1px"cellpadding="2px"><tr><td>这是一个表格单元格。</td></tr></table>

<p>这是第三段。</p>

</body>
</html>

<html>
<head>
<title>简单的P元素结束示例</title>
<metahttp-equiv="X-UA-Compatible"content="IE8"/>
</head>
<body>
<p>这是第一段</p>

<pstyle="margin-left:30px">这是第二段。<!--Pnotclosed-->

<tableborder="1px"cellpadding="2px"><tr><td>这是一个表格单元格。</td></tr></table>

<p>这是第三段。</p>

</body>
</html>
在本示例中,第二个P元素缺少结束标记。当使用WindowsInternetExplorer7查看时,TABLE元素作为第二个P元素的子元素显示。第二个P元素从窗口的左边距缩进30像素。由于TABLE是该P元素的子元素,它也从该窗口的左边距缩进。但是,当使用WindowsInternetExplorer8的默认模式查看时,TABLE元素与左边距对齐。由于WindowsInternetExplorer8在显示TABLE元素前自动添加了该P元素所缺少的结束标记,因此在IE8里TABLE元素不是第二个P元素的子元素。

使用OBJECT元素显示图像
WindowsInternetExplorer8可以使用OBJECT元素显示图像。在旧版本的浏览器中使用此元素显示图像时,它常常自动将滚动条和边框添加到图像中,从而往往导致图像显示不正确。
在WindowsInternetExplorer8中,OBJECT元素显示图像时就像这些图像是使用IMG元素嵌入的一样。要在网页中使用此行为,请将OBJECT元素的DATA属性设置为图像的URL。您也可以在DATA属性中嵌入dataURL。
要使WindowsInternetExplorer将图像加载到使用旧版本行为的OBJECT元素中,请对网页选择旧兼容性模式或将OBJECT元素的TYPE属性设置为text/html。

改进的回退对象
当OBJECT元素加载资源失败时,将改为呈现OBJECT元素内部的内容。这称为对象回退,因为它允许您定义WindowsInternetExplorer在遇到问题进行“回退”时所用的策略。
WindowsInternetExplorer7引入了此功能以嵌套OBJECT元素;即使用多个OBJECT元素创建更丰富的回退策略,如以下示例中所示:



viewplaincopytoclipboardprint?


<objectdata="..."type="silverlight">
<objectdata="..."type="windowsmediafile">
<objectdata="..."type="image/png">

-_-!!!

</object>
</object>
<object>

<objectdata="..."type="silverlight">
<objectdata="..."type="windowsmediafile">
<objectdata="..."type="image/png">

-_-!!!

</object>
</object>
<object>

此示例使用三个OBJECT元素定义一个对象回退策略。它首先尝试加载Silverlight应用程序。如果此操作失败,则要求使用MicrosoftWindowsMedia文件。如果无法加载WindowsMedia文件,则此示例加载一个图像。
如果您使用WindowsInternetExplorer7查看此示例,将会看到此图像,但是页面的文档对象模型(DOM)中只有一个OBJECT元素,因为WindowsInternetExplorer7不会为加载失败的对象创建OBJECT元素。
如果您使用WindowsInternetExplorer8查看此示例,将会看到页面的DOM中有包含三个OBJECT元素的图像。由于加载失败,前两个OBJECT元素处于非活动状态。不过,您可以使用JavaScript搜索这些元素。
注意:如果不刷新页面或使用JavaScript加载新对象,则无法重新激活处于非活动状态的对象。
WindowsInternetExplorer8仅将这一新的回退行为用于与通信相关的错误,即只在加载请求生成客户端HTTP错误响应(4xx)或服务器HTTP错误响应(5xx)时发生。如果由于其他原因(如内容格式不正确或ActiveX控件损坏)导致请求失败,将发生原始回退行为。

HTML5/AJAX增强功能
WindowsInternetExplorer8的HTML5增强功能包括AJAX导航、DOM存储、跨文档消息传送(XDM)和连接事件。它们是严格按照W3CHTML5.0草案开发的。




AJAX导航
使用AJAX的显著好处之一是无需使用传统的页面导航即可更新页面内容。在某些情况下,使用AJAX无法保存页面状态,亦无法通知其组件,对此可能会令人疑惑,这是因为地址栏、“后退”和“前进”按钮等组件只能在页面导航后进行更新。因此,浏览器无法在旅行日志上保存AJAX内容更改或更新地址栏等组件。这可能使最终用户产生迷惑,不知道为什么浏览器总是显示旧内容。在IE8模式中,WindowsInternetExplorer像处理导航一样处理window.location.hash更新,并保存早期文档URL。
DOM存储
现在,网页使用document.cookie属性将数据存储在本地计算机上。Cookie能力有限,因为站点对每个域只能存储50个键/值对。此外,Cookie编程模型很繁琐,需要分析数据的整个Cookie字符串。W3C的HTML5DOM存储对象为键/值对字符串数据提供了一个更简单的全局和会话存储模型。站点可以在选项卡生命周期内存储数据或直到网站或用户清除数据。
每个域,包括其子域,有10MB的本地存储空间。这有助于降低跨域攻击的可能性。同样,每个浏览器选项卡也有自己的会话存储。DOM存储只是Web应用程序简化存储数据的一种机制—不使用后台数据库。例如,无法执行复杂的查询,如根据值搜索。
跨文档消息传送(XDM)
浏览器的站点源策略阻止网页从其他域获得数据。这意味着单个网页上的不同域不能相互通信,从而无法提供更加丰富的体验。网站通过创建嵌套的IFrame并检索通过URL传送的数据绕过此策略。网站绕过此策略的另一种方法是直接托管脚本和其他域中的其他资源文件。第二种解决方法只允许单向通信。由于嵌入的脚本和资源使用与托管网站相同的权限运行,还可以访问用户的数据(如用户存储在Cookie中的数据),因此这种方法也存在安全风险。
XDM提供的postMessage方法不显示在窗口对象中,这就允许不同的域根据给定的相互许可相互通信。XDM为双向跨域通信提供了一种机制,比上述解决方法更简单、更能体现性能驱动。
连接事件
WindowsInternetExplorer8允许网页通过window.navigator.onLine属性和联机/脱机事件检测浏览器何时联机或脱机。利用这些信息,您就可以使用DOM存储对象启用大量的脱机方案。例如,如果用户在登录到自己的Livemail页后失去了连接,页面会一直提示用户将草稿保存在DOM存储中并允许用户继续编辑电子邮件。恢复连接时,脚本会检索电子邮件并将其发送到服务器。

CSS改进
WindowsInternetExplorer8是迄今为止CSS符合性最高的版本,它完全支持级联样式表(CSS)级别2.1,并加强了对CSS3支持。下面是最为突出的几个亮点:
数据统一资源标识符(URI)(最长32768个字符)
此机制允许网页作者直接在URI中嵌入小型实体,而不是使用URI标识检索实体的位置。此操作主要适用于在CSS或布局中使用的小图像(如项目符号)。


新伪类
以下是WindowsInternetExplorer8新增的内容:
:before和:after伪元素允许作者指定与元素的文档树内容有关的动态内容的位置。
:focus指的是用户何时激活元素以使它可以执行任务。此伪类适用于元素具有输入焦点的情况。
Outline可以突出显示元素,但不会影响其大小。它是outline-color、outline-style和outline-width的简化属性。
打印
为了简化打印,已添加了下列属性:
page-break-inside
widows
orphans
表格布局
多年来,表格始终是Internet上的首选布局机制。在WindowsInternetExplorer8中,现在可以使用display属性将表格类型格式应用于非表格元素。实际上,CSS表格比HTML标记更灵活;使用CSS规则创建的表格嵌套元素后即有效,而使用HTML创建的表格会关闭容器以避免意外嵌套。

下表收集了WindowsInternetExplorer8中支持的各种改进的CSS属性,并与WindowsInternetExplorer7进行了比较,内容一目了然。这些表未详尽列出WindowsInternetExplorer8支持的所有CSS属性;只显示了WindowsInternetExplorer7不支持或部分支持,而现在WindowsInternetExplorer8支持的CSS属性。
单元格中的“部分”值表示只能在该版本的WindowsInternetExplorer中部分实现此功能。

伪类




CSS2.1





IE7.0


IE8.0




active{sRules}:


:active


部分







after{sRules}:


:after










before{sRules}:


:before










focus{sRules}:


:focus










lang(C){sRules}:


lang():











列表




CSS2.1





IE7.0


IE8.0




{list-style-type:sStyle}


list-style-type


部分








颜色和背景




CSS2.1





IE7.0


IE8.0




{background-position:sPosition}


background-position


部分








字体和文本




CSS2.1





IE7.0


IE8.0




{font-weight:sWeight}


font-weight


部分







{white-space:sWrap}


white-space


部分







{word-spacing:sSpacing}


word-spacing


部分








生成的内容




CSS2.1





IE7.0


IE8.0




{content:sContent}


content










{counter-increment:sCounter}


counter-increment










{counter-reset:sCounter}


counter-reset










{quotes:sQuotes}


quotes











边框和布局




CSS2.1





IE7.0


IE8.0




{border-collapse:sCollapse}


border-collapse


部分







{border-spacing:sSpacing}


border-spacing










{border-style:sStyle}


border-style


部分







{caption-side:sLocation}


caption-side










{empty-cells:sEmptyCells}


empty-cells


部分








定位




CSS2.1





IE7.0


IE8.0




{bottom:sBottom}


bottom


部分







{display:sDisplay}


display


部分







{left:sPosition}


left


部分







{right:sPosition}


right


部分







{top:sTop}


top


部分







{z-index:vOrder}


z-index


部分








打印




CSS2.1





IE7.0


IE8.0




{orphans:nLines}


orphans










{page-break-inside:sBreak}


page-break-inside










{widows:nLines}


widows











用户界面




CSS2.1





IE7.0


IE8.0




{outline:sOutline}


outline










{outline-color:sColor}


outline-color










{outline-style:sStyle}


outline-style










{outline-width:sWidth}


outline-width










CSS3





IE7.0


IE8.0




{box-sizing:sSizing}


box-sizing











函数




CSS2.1


IE7.0


IE8.0




counter()










attr()











关键字




CSS2.1


IE7.0


IE8.0




Inherit












文本兼容性模式
  WindowsInternetExplorer8精心构建了一种新的布局引擎,该引擎提供全面的CSS2.1支持和强大的HTML5支持以及文档对象模型(DOM)的互操作性修补程序。默认情况下,将启用标准支持的最高级别。网站作者可以使用以下META标记在WindowsInternetExplorer8中选择EmulationIE7模式呈现:
<metahttp-equiv=”X-UA-Compatible”content=”IE=EmulateIE7″/>

开发工具
WindowsInternetExplorer8中增强的开发工具可提供网页的内部元素,有助于研究和解决HTML、CSS和脚本方面的问题。包含下列工具:
CSS工具,用于显示您的网页加载的样式表所定义的各种规则。
脚本调试,一种内置轻型调试器,让您无需退出WindowsInternetExplorer即可设置断点并查看客户端脚本。
版本模式切换,允许您切换到其他浏览器模式以测试内容是否符合标准符合性。
探查器,一种内置工具,用于显示浏览器在哪个执行阶段花费了大量时间,以便网页作者重点进行优化。
IE8开发工具的界面如图所示,有关开发工具详细信息,请参阅下列网站:
http://www.cnblogs.com/JustinYoung/

参考文档
IE8WhitePaper(白皮书)
下载页面:
http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=567
IE8博客:
http://blogs.msdn.com/ie/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐