PC12  Alex Mogilevsky Architect Microsoft Corporation  Saloni Mira Rai Program Manager Microsoft Corporation      Why did IE build a new layout engine? What exactly is this.

Download Report

Transcript PC12  Alex Mogilevsky Architect Microsoft Corporation  Saloni Mira Rai Program Manager Microsoft Corporation      Why did IE build a new layout engine? What exactly is this. 

PC12
 Alex Mogilevsky
Architect
Microsoft Corporation
 Saloni Mira Rai
Program Manager
Microsoft Corporation





Why did IE build a new layout engine?
What exactly is this “new engine”?
How does it work?
What is new for web developers?
Can I apply anything I’ve learned here?
 Alex Mogilevsky
Architect
Internet Explorer
IE6
Standards
IE7
HTML + CSS + script
MARKUP TREE (DOM)
Quirks Mode
IE7 Standards
Mode
IE8 Standards
Mode
DISPLAY (Draw on screen)
DOCUMENT
<html>
<style>
Markup Tree
Position,
dimension,
etc.
Layout object
•Direct element-layout pairing
•Great for simple incremental update.
•Not great for complex layout
•Sometimes bottom-up, sometimes top-down
Display Tree
DOCUMENT
Markup Tree
LAYOUT CONTENT MODEL
<html>
<style>
•Holistic approach to page layout
Page Layout
Component
Display Tree
Page Object
<html>
<body>
<div id=div1 style=“float:left; border:solid green;">
Example 9
<div id=div2 style="display:table-cell; min-height:100px;
background:lightblue;
vertical-align:middle;">
Table cell can center vertically
</div>
</div>
</body>
</html>
Markup Tree
HTML
BODY
“Example 9”
DIV
“Table cell can…”
DIV
LAYOUT CONTENT MODEL
Anon. Table
Container
HTML
BODY
TABLE
DIV1
TBODY
DIV2
TROW
Anon. Block
“Example 9”
TCELL
“Table can…”
Anon. Box
<div id=div1 style=“float: left; border: medium solid green;>
<div id=div2 style="display:table-cell; background: lightgreen;">
LAYOUT CONTENT MODEL
Page
DIV1
Anon Box
“Example 9”
Page Layout
Component
Sub
page
object
TABLE
Sub
page
object
<div id=div1 style=“float: left; border: medium solid green;>
<div id=div2 style="display:table-cell; background: lightgreen;">
LAYOUT CONTENT MODEL
Page
DIV1
Anon Box
“Example 9”
Page Layout
Component
Sub
page
object
TABLE
Sub
page
object
Text
<div id=div1 style=“float: left; border: medium solid green;>
<div id=div2 style="display:table-cell; background: lightgreen;">
LAYOUT CONTENT MODEL
Page
DIV1
Anon Box
“Example 9”
Page Layout
Component
Sub
page
object
TABLE
Sub
page
object
Text
<div id=div1 style=“float: left; border: medium solid green;>
<div id=div2 style="display:table-cell; background: lightgreen;">
LAYOUT CONTENT MODEL
Page
DIV1
Anon Box
“Example 9”
Page Layout
Component
Sub
page
object
TABLE
Sub
page
object
Text
Text
 Alex Mogilevsky
Architect
Internet Explorer
 Alex Mogilevsky
Architect
Internet Explorer




<meta http-equiv="X-UA-Compatible" content="IE=8" />

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

<!--[if gte IE 7]> -- not <!--[if IE 7]>

www.microsoftpdc.com
Q&A
http://blogs.msdn.com/ie
[email protected]
[email protected]
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.