20
Deep Dive: The New Rendering Engine in Microsoft Internet Explorer 8 Alex Mogilevsky Architect Microsoft Corporation Saloni Mira Rai Program Manager Microsoft Corporation PC12
| Date post: | 26-Dec-2015 |
| Category: |
Documents |
| Upload: | jacob-allen |
| View: | 231 times |
| Download: | 0 times |
Deep Dive: The New Rendering Engine in Microsoft Internet Explorer 8
Alex MogilevskyArchitectMicrosoft Corporation
Saloni Mira RaiProgram ManagerMicrosoft Corporation
PC12
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?
IE8 Layout Engine
Why did IE build a new Layout engine
Alex MogilevskyArchitectInternet Explorer
demo
IE6
IE7
Standards
MARKUP TREE (DOM)
DISPLAY (Draw on screen)
HTML + CSS + script
Quirks Mode IE7 Standards Mode
IE8 Standards Mode
IE7 Layout – brief overview
Markup Tree
Display TreeLayout object
Position, dimension,
etc.
DOCUMENT<html><style>
•Direct element-layout pairing•Great for simple incremental update. •Not great for complex layout•Sometimes bottom-up, sometimes top-down
IE8 Layout Model
Markup Tree Display Tree
DOCUMENT<html><style>
LAYO
UT
CON
TEN
T M
OD
ELPage Layout Component
Page Object
•Holistic approach to page layout
Example web page
<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
DIV“Example 9”
DIV“Table cell can…”
LAYOUT CONTENT MODEL
HTML
BODY
DIV1
“Example 9”
Anon. Block
Anon. Table Container
TABLE
TBODY
TROW
TCELL
Anon. Box“Table can…”
DIV2
Page
<div id=div1 style=“float: left; border: medium solid green;><div id=div2 style="display:table-cell; background: lightgreen;">
LAYO
UT
CON
TEN
T M
OD
EL
Page Layout Component
Sub page
object
Sub page
object
DIV1
“Example 9”
Anon Box TABLE
Page
<div id=div1 style=“float: left; border: medium solid green;><div id=div2 style="display:table-cell; background: lightgreen;">
LAYO
UT
CON
TEN
T M
OD
EL
Page Layout Component
Sub page
object
Sub page
object
DIV1
“Example 9”
Anon Box TABLE
Text
Page
<div id=div1 style=“float: left; border: medium solid green;><div id=div2 style="display:table-cell; background: lightgreen;">
LAYO
UT
CON
TEN
T M
OD
EL
Page Layout Component
Sub page
object
Sub page
object
DIV1
“Example 9”
Anon Box TABLE
Text
Page
<div id=div1 style=“float: left; border: medium solid green;><div id=div2 style="display:table-cell; background: lightgreen;">
LAYO
UT
CON
TEN
T M
OD
EL
Page Layout Component
Sub page
object
Sub page
object
Text
DIV1
“Example 9”
Anon Box TABLE
Text
Layout process
Alex MogilevskyArchitect Internet Explorer
demo
New features
Alex MogilevskyArchitect Internet Explorer
demo
How To Use What You Know About IE8
Download Beta 2 and test your pages Any issues?
Check for standard compliance. Validate. Use version META tag as needed
Use prefixes as appropriate
Use conditional comments properly
Take advantage of the new features!
<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]>
Evals & Recordings
Please fill
out your
evaluation for
this session at:
This session will be available as a recording at:
www.microsoftpdc.com
© 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.
Q&Ahttp://blogs.msdn.com/[email protected]@microsoft.com
