What you need to
 know about IE8
 and Standards

    Aaron Gustafson
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                First, a little history...




                         ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                IE3 becomes the

       ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




           1997
                                                IE4 adds...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                IE5 for Windows

       ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




           1998                                 but gets the box
       ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                IE5 for Mac

           ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                and the most

          ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                IE5.5 for Windows

     ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




           2000                                 but still has the
      ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                IE6 adds more CSS

     ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




           2003                                 IE6 begins to
          ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                IE6 is rolled into a

  ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                It appears IE6

        ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                IE7 materializes

      ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




           2006                                 and breaks a
           ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                IE8B1 debuts a

        ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                                with a focus on

       ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                              So here we are




                       ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                       What’s been fixed?




                           ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    hasLayout is history!!!
!   IE8 has a completely new rendering engin...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




object fallbacks work now
<object data=quot;/img/test.tifquot; type=quot...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




object fallbacks work now
<object data=quot;/img/test.tifquot; type=quot...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




object fallbacks work now
<object data=quot;/img/test.tifquot; type=quot...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




object fallbacks work now
<object data=quot;/img/test.tifquot; type=quot...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




object fallbacks work now
<object data=quot;/img/test.tifquot; type=quot...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




:hover, :focus & :active*
 button {
   background: #ccc;
   border: 1px ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




:hover, :focus & :active*
 button {
   background: #ccc;
   border: 1px ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




:hover, :focus & :active*
 input:focus {
   background: #fcfab0;
 }
 but...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




:hover, :focus & :active*
 input:focus {
   background: #fcfab0;
 }
 but...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




:hover, :focus & :active*
 input:focus {
   background: #fcfab0;
 }
 inp...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




:hover, :focus & :active*
 input:focus {
   background: #fcfab0;
 }
 inp...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




list-style-type completed
Support for more values:
ol {
  list-style-typ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




list-style-type completed
Support for more values:
ol {
  list-style-typ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




list-style-type completed
Support for more values:
ol {
  list-style-typ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




list-style-type completed
Support for more values:
ol {
  list-style-typ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




list-style-type completed
Support for more values:
ol {
  list-style-typ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




list-style-type completed
Support for more values:
ol {
  list-style-typ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




background-position fixed
Fixed the bug where background positioning set ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




white-space completed
Support for additional values:
<p>This is the test...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




white-space completed
Support for additional values:
<p>This is the test...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




white-space completed
Support for additional values:
<p>This is the test...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




 word-spacing with ems*
 Corrected the error where if an element did not...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    Table styles
    Various border-collapse fixes
!

    Added support f...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    Table styles
    Added support for border-style: hidden:
!


    tab...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    Table styles
    Added support for caption-side:
!


    table {
   ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    Table styles
    Added support for empty-cells*
!


    table {
    ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




 Positioning oquot;sets*
 Corrected the recalculation errors when using ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




 Positioning oquot;sets*
 Corrected the recalculation errors when using ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    Complete display support*
    table, inline-table, table-row, table-...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Mended z-index
IE’s support for z-index incorrectly established a positi...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Fixed inheritance
IE wouldn’t inherit a value for a non-inheritable prop...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Get what you ask for
<form name=quot;fooquot;>First</form>
<div id=quot;...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




style is available via DOM...
<div id=quot;fooquot; style=quot;border: 1...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




 ...almost*
 <div id=quot;fooquot; style=quot;border: 1px solidquot;>Tex...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Setting style works too
Running
var el = document.getElementById( 'foo' ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Find by name now
<input type=quot;textquot; name=quot;fooquot; value=quo...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




             Alright, so what’s new?




                               ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




legend is styleable!!!
The element can now be positioned
fieldset {
  po...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




legend is styleable!!!
And it can wrap!!!
legend {
  width: 100px;
}



...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




:lang is supported
Take the following example:
<dl class=quot;conversati...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




:lang is supported
Apply a little CSS:
:lang(lol) {
  font-style: italic...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Generated content, baby!
That’s right. In fact, we just used some:
<dl c...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




 Generated content, baby!
 You can also do images*:
 #content p:first-ch...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Support for attr()
Can be fun to use with your generated content:
abbr[t...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




 CSS can count now*
 Using counters, you can do all sorts of interesting...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




 You can control quotes*
 The quotes property provides access to which q...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    Control page breaks*
    With widows and orphans:
!


    @media pri...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Control outlining
Outlines are like borders except they take up no space...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Choose your box model
A little CSS3 action lets you choose between the c...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Track page updates
IE8 introduces a proprietary new event called hashcha...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Support for data: URIs
A means of including small data items inline as t...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Support for data: URIs
Pros:
! no additional HTTP tra$c
! frees up a bro...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Support for data: URIs
Cons:
! maintenance nightmare
! page does not ben...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                     Will IE8 break sites?




                         ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                      Only if you let it ;-)




                       ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    Issue #1: DOCTYPE % contract
    The DOCTYPE switch was a great idea...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    Issue #2: IE stagnated
!   When the IE team stopped improving on IE’...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




    When IE7 came along...
!   ...it was a huge improvement in terms of ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                   Who wants a repeat?




                             ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                           (not me)




                ...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




Enter version targeting
IE team wanted to oquot;er a means of explicitly...
WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS




                                     Questions?




                    ...
What you need to
 know about IE8
 and Standards
 slideshare.net/AaronGustafson

        Aaron Gustafson
Upcoming SlideShare
Loading in …5
×

What You Need To Know About IE8 and Standards

22,160 views

Published on

Internet Explorer 8 features a completely rewritten rendering engine authored to the CSS 2.1 spec. It also features an updated scripting engine, meaning better adherence to those standards as well. In this session, Aaron Gustafson will talk about IE8's new standards mode, what the browser is capable of doing, and what it means for the future of the Web.

Published in: Business, Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
22,160
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
168
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

What You Need To Know About IE8 and Standards

  1. What you need to know about IE8 and Standards Aaron Gustafson
  2. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS First, a little history... 2 WEBVISIONS - 23 MAY 2008
  3. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS IE3 becomes the 1996 first browser to support CSS 3 WEBVISIONS - 23 MAY 2008
  4. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS 1997 IE4 adds support for DHTML (gentlemen, start your pop-ups) 4 WEBVISIONS - 23 MAY 2008
  5. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS IE5 for Windows 1998 improves CSS support 5 WEBVISIONS - 23 MAY 2008
  6. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS 1998 but gets the box model wrong 6 WEBVISIONS - 23 MAY 2008
  7. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS IE5 for Mac 2000 introduces the DOCTYPE switch 7 WEBVISIONS - 23 MAY 2008
  8. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS and the most 2000 accurate CSS engine to date 8 WEBVISIONS - 23 MAY 2008
  9. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS IE5.5 for Windows 2000 adds even yet still more CSS support 9 WEBVISIONS - 23 MAY 2008
  10. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS 2000 but still has the box model wrong 10 WEBVISIONS - 23 MAY 2008
  11. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS IE6 adds more CSS 2001 support & the DOCTYPE switch 11 WEBVISIONS - 23 MAY 2008
  12. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS 2003 IE6 begins to gather dust 12 WEBVISIONS - 23 MAY 2008
  13. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS IE6 is rolled into a 2004 corner, where it begins to smell 13 WEBVISIONS - 23 MAY 2008
  14. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS It appears IE6 2005 will never die; enter * html 14 WEBVISIONS - 23 MAY 2008
  15. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS IE7 materializes 2006 with much better standards support 15 WEBVISIONS - 23 MAY 2008
  16. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS 2006 and breaks a bunch of sites 16 WEBVISIONS - 23 MAY 2008
  17. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS IE8B1 debuts a 2008 completely new rendering engine microsoft.com/windows/products/winfamily/ie/ie8/ 17 WEBVISIONS - 23 MAY 2008
  18. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS with a focus on 2008 being standards- compliant microsoft.com/windows/products/winfamily/ie/ie8/ 18 WEBVISIONS - 23 MAY 2008
  19. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS So here we are 19 WEBVISIONS - 23 MAY 2008
  20. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS What’s been fixed? 20 WEBVISIONS - 23 MAY 2008
  21. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS hasLayout is history!!! ! IE8 has a completely new rendering engine built from the ground up with CSS2.1 as its guiding principle. ! the old layout strategy was responsible for numerous bugs: ! content disappearing (and reappearing) ! content only half-rendering ! floats or positioning causing odd stuquot; to happen ! and much more... for more on hasLayout: ! http://msdn.microsoft.com/en-us/library/bb250481.aspx 21 WEBVISIONS - 23 MAY 2008
  22. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS object fallbacks work now <object data=quot;/img/test.tifquot; type=quot;image/tiffquot;> <object data=quot;/img/test.pngquot; type=quot;image/pngquot;> <object data=quot;/img/test.jpgquot; type=quot;image/jpegquot;> <p>A photo of my cat.</p> </object> </object> </object> 22 WEBVISIONS - 23 MAY 2008
  23. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS object fallbacks work now <object data=quot;/img/test.tifquot; type=quot;image/tiffquot;> <object data=quot;/img/test.pngquot; type=quot;image/pngquot;> <object data=quot;/img/test.jpgquot; type=quot;image/jpegquot;> <p>A photo of my cat.</p> </object> </object> </object> test.tif 22 WEBVISIONS - 23 MAY 2008
  24. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS object fallbacks work now <object data=quot;/img/test.tifquot; type=quot;image/tiffquot;> <object data=quot;/img/test.pngquot; type=quot;image/pngquot;> <object data=quot;/img/test.jpgquot; type=quot;image/jpegquot;> <p>A photo of my cat.</p> </object> </object> </object> test.png 22 WEBVISIONS - 23 MAY 2008
  25. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS object fallbacks work now <object data=quot;/img/test.tifquot; type=quot;image/tiffquot;> <object data=quot;/img/test.pngquot; type=quot;image/pngquot;> <object data=quot;/img/test.jpgquot; type=quot;image/jpegquot;> <p>A photo of my cat.</p> </object> </object> </object> test.jpg 22 WEBVISIONS - 23 MAY 2008
  26. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS object fallbacks work now <object data=quot;/img/test.tifquot; type=quot;image/tiffquot;> <object data=quot;/img/test.pngquot; type=quot;image/pngquot;> <object data=quot;/img/test.jpgquot; type=quot;image/jpegquot;> <p>A photo of my cat.</p> </object> </object> </object> A photo of my cat. 22 WEBVISIONS - 23 MAY 2008
  27. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS :hover, :focus & :active* button { background: #ccc; border: 1px solid #333; color: #333; } button:hover { background: #999; } my button * IE8b1 does not support this, but it is planned for the final release 23 WEBVISIONS - 23 MAY 2008
  28. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS :hover, :focus & :active* button { background: #ccc; border: 1px solid #333; color: #333; } button:hover { background: #999; } my button * IE8b1 does not support this, but it is planned for the final release 23 WEBVISIONS - 23 MAY 2008
  29. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS :hover, :focus & :active* input:focus { background: #fcfab0; } button:focus { background: #999; } Email Password log in * IE8b1 does not support this, but it is planned for the final release 24 WEBVISIONS - 23 MAY 2008
  30. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS :hover, :focus & :active* input:focus { background: #fcfab0; } button:focus { background: #999; } Email bob@foo.com Password **************** log in * IE8b1 does not support this, but it is planned for the final release 24 WEBVISIONS - 23 MAY 2008
  31. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS :hover, :focus & :active* input:focus { background: #fcfab0; } input:active { background: #f00; } Email Password log in * IE8b1 does not support this, but it is planned for the final release 25 WEBVISIONS - 23 MAY 2008
  32. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS :hover, :focus & :active* input:focus { background: #fcfab0; } input:active { background: #f00; } Email Password log in * IE8b1 does not support this, but it is planned for the final release 25 WEBVISIONS - 23 MAY 2008
  33. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS list-style-type completed Support for more values: ol { list-style-type: decimal-leading-zero; } 26 WEBVISIONS - 23 MAY 2008
  34. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS list-style-type completed Support for more values: ol { list-style-type: lower-greek; } 26 WEBVISIONS - 23 MAY 2008
  35. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS list-style-type completed Support for more values: ol { list-style-type: lower-roman; } 26 WEBVISIONS - 23 MAY 2008
  36. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS list-style-type completed Support for more values: ol { list-style-type: upper-roman; } 26 WEBVISIONS - 23 MAY 2008
  37. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS list-style-type completed Support for more values: ol { list-style-type: armenian; } 26 WEBVISIONS - 23 MAY 2008
  38. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS list-style-type completed Support for more values: ol { list-style-type: georgian; } 26 WEBVISIONS - 23 MAY 2008
  39. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS background-position fixed Fixed the bug where background positioning set in ems failed to use the font size of the element it was applied to as the baseline against which to calculate the distance p{ background: url(img.jpg) 10em 0 repeat-y; font-size: 2em; } Spec: IE7-: 27 WEBVISIONS - 23 MAY 2008
  40. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS white-space completed Support for additional values: <p>This is the test paragraph. It has all kinds of odd tabs and spacing in the HTML source code.</p> p{ background: #999; white-space: pre; width: 100px; } 28 WEBVISIONS - 23 MAY 2008
  41. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS white-space completed Support for additional values: <p>This is the test paragraph. It has all kinds of odd tabs and spacing in the HTML source code.</p> p{ background: #999; white-space: pre-wrap; width: 100px; } 28 WEBVISIONS - 23 MAY 2008
  42. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS white-space completed Support for additional values: <p>This is the test paragraph. It has all kinds of odd tabs and spacing in the HTML source code.</p> p{ background: #999; white-space: pre-line; width: 100px; } 28 WEBVISIONS - 23 MAY 2008
  43. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS word-spacing with ems* Corrected the error where if an element did not “have layout”, font-size used to compute the value of word- spacing is not the one specified on the box itself (as it shoud be), but the one on the parent p{ word-spacing: 1em; font-size: 2em; } Spec: IE7-: * IE8b1 does not support this, but it is planned for the final release 29 WEBVISIONS - 23 MAY 2008
  44. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Table styles Various border-collapse fixes ! Added support for border-spacing: ! table { border: 1px solid #000; border-spacing: 10px; } td { border: 1px solid #000; padding: 10px; } 30 WEBVISIONS - 23 MAY 2008
  45. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Table styles Added support for border-style: hidden: ! table { border: 1px solid #000; border-collapse: collapse; } td { border: 1px solid #000; padding: 10px; } tr + tr td + td + td { border-style: hidden; } 31 WEBVISIONS - 23 MAY 2008
  46. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Table styles Added support for caption-side: ! table { border: 1px solid #000; border-collapse: collapse; caption-side: bottom; } td { border: 1px solid #000; padding: 10px; } caption { font-size: .6em; line-height: 2em; } 32 WEBVISIONS - 23 MAY 2008
  47. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Table styles Added support for empty-cells* ! table { border: 1px solid #000; border-spacing: 10px; empty-cells: show; } td { border: 1px solid #000; padding: 10px; } * IE8b1 does not support this, but it is planned for the final release 33 WEBVISIONS - 23 MAY 2008
  48. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Positioning oquot;sets* Corrected the recalculation errors when using ems to oquot;set an absolutely-positioned element: pa{ position: absolute; left: -999em; } p a:hover { left: 0; } * IE8b1 does not support this, but it is planned for the final release 34 WEBVISIONS - 23 MAY 2008
  49. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Positioning oquot;sets* Corrected the recalculation errors when using ems to oquot;set an absolutely-positioned element: pa{ position: absolute; left: -999em; } p a:hover { left: 0; } * IE8b1 does not support this, but it is planned for the final release 34 WEBVISIONS - 23 MAY 2008
  50. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Complete display support* table, inline-table, table-row, table-row-group, table- ! column, table-column-group, table-cell, table-caption run-in: ! p{ display: run-in; } p+p{ display: block; } * IE8b1 does not support this, but it is planned for the final release 35 WEBVISIONS - 23 MAY 2008
  51. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Mended z-index IE’s support for z-index incorrectly established a positioning context even in the presence of the “auto” value. div { background: #cf9; border: 1px solid #693; position: relative; } div p { background: #9cf; border: 1px solid #369; position: absolute; right: 2em; width: 10em; height: 10em; z-index: 1; Example adapted from http://aplus.co.yu/lab/z-pos/ } p + div p { right: 8em; height: 8em; z-index: auto; } 36 WEBVISIONS - 23 MAY 2008
  52. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Fixed inheritance IE wouldn’t inherit a value for a non-inheritable property, even in the presence of the “inherit” keyword div { background: #cf9; border: 1px solid #693; position: relative; } div p { border: inherit; } Spec: IE7-: 37 WEBVISIONS - 23 MAY 2008
  53. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Get what you ask for <form name=quot;fooquot;>First</form> <div id=quot;fooquot;>Second</div> Running var el = document.getElementById( 'foo' ); el.style.display = 'none'; Used to result in the form being hidden instead of the div. 38 WEBVISIONS - 23 MAY 2008
  54. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS style is available via DOM... <div id=quot;fooquot; style=quot;border: 1px solidquot;>Text here.</div> Running var el = document.getElementById( 'foo' ); alert( el.attributes['style'].value ); alert( el.getAttributeNode('style').value ); Both used to return null, now they return BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid Note 1: CSS shorthand is expanded and properties are ALL CAPS. Note 2: the attributes array doesn’t have a length in IE8b1. 39 WEBVISIONS - 23 MAY 2008
  55. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS ...almost* <div id=quot;fooquot; style=quot;border: 1px solidquot;>Text here.</div> Running var el = document.getElementById( 'foo' ); alert( el.hasAttribute('style') ); Returns false when it obviously shouldn’t. * This has been submitted as a bug. 40 WEBVISIONS - 23 MAY 2008
  56. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Setting style works too Running var el = document.getElementById( 'foo' ); el.setAttribute( 'style', 'color: #f00;' ); Just remember that it overwrites the whole attribute. Note: IE does not support setting event handlers this way: el.setAttribute( 'onclick', 'alert('hello')' ); But that’s not a huge loss as there are better ways to write event handlers. 41 WEBVISIONS - 23 MAY 2008
  57. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Find by name now <input type=quot;textquot; name=quot;fooquot; value=quot;textquot; /> Running var el = document.getElementsByName( 'foo' )[0]; el.style.border = '1px solid #f00'; Note: IE’s implementation currently ignores custom elements. 42 WEBVISIONS - 23 MAY 2008
  58. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Alright, so what’s new? 43 WEBVISIONS - 23 MAY 2008
  59. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS legend is styleable!!! The element can now be positioned fieldset { position: relative; padding: 0 0 0 120px; } legend { font-weight: bold; width: 100px; text-align: right; position: absolute; top: 0; left: 0; } 44 WEBVISIONS - 23 MAY 2008
  60. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS legend is styleable!!! And it can wrap!!! legend { width: 100px; } 45 WEBVISIONS - 23 MAY 2008
  61. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS :lang is supported Take the following example: <dl class=quot;conversationquot;> <dt>Whiny dude</dt> <dd>Here's your hamburger. Anyway, as I was saying about how bad my life is…</dd> <dt>Other dude</dt> <dd>Yum, burger. <abbr lang=quot;lolquot; title=quot;Ok, thank you, goodbyequot;>kthxbye</abbr>. *leaves*</dd> <dt>Whiny dude</dt> <dd>I have no friends.</dd> </dl> Example adapted from http://www.urbandictionary.com/define.php?term=kthxbye 46 WEBVISIONS - 23 MAY 2008
  62. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS :lang is supported Apply a little CSS: :lang(lol) { font-style: italic; } And end up with Example adapted from http://www.urbandictionary.com/define.php?term=kthxbye 46 WEBVISIONS - 23 MAY 2008
  63. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Generated content, baby! That’s right. In fact, we just used some: <dl class=quot;conversationquot;> <dt>Whiny dude</dt> <dd>Here's your hamburger. Anyway, as I was saying about how bad my life is…</dd> ... .conversation dt:after { content: ': '; } 47 WEBVISIONS - 23 MAY 2008
  64. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Generated content, baby! You can also do images*: #content p:first-child:after { content: url(fancy-break.png); display: block; margin-top: .5em; text-align: center; width: auto; } * IE8b1 does not support this, but it is planned for the final release 48 WEBVISIONS - 23 MAY 2008
  65. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Support for attr() Can be fun to use with your generated content: abbr[title]:after { content: quot; (quot; attr(title) quot;)quot;; } Could also be useful in debugging: [id]:hover:after { color: #f00; content: quot; [id=quot; attr(id) quot;]quot;; } 49 WEBVISIONS - 23 MAY 2008
  66. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS CSS can count now* Using counters, you can do all sorts of interesting stuquot;. body { counter-reset: section; } h1:before { content: counter(section) quot; quot;; counter-increment: section; } h2:before { content: counter(section) quot;.quot; counter(subsection) quot; quot;; counter-increment: subsection; } h1 + h2 { counter-reset: subsection; } h3:before { content: counter(section) quot;.quot; counter(subsection) # quot;.quot; counter(subsubsection) quot; quot;; counter-increment: subsubsection; } h2 + h3 { counter-reset: subsubsection; } * IE8b1 does not support this, but it is planned for the final release 50 WEBVISIONS - 23 MAY 2008
  67. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS You can control quotes* The quotes property provides access to which quotes are generated into the document. <p>Douglas Adams famously said <q>Flying is learning how to throw yourself at the ground and miss.</q></p> Applying some styles: :lang(en) { quotes: quot;201Cquot; quot;201Dquot; quot;2018quot; quot;2019quot;; } * IE8b1 does not support this, but it is planned for the final release 51 WEBVISIONS - 23 MAY 2008
  68. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Control page breaks* With widows and orphans: ! @media print { p{ widows: 3; /* at least 3 lines @ top of page */ orphans: 3; /* at least 3 lines @ bottom of page */ } } With page-break-inside: ! @media print { pre { page-break-inside: avoid; } } * IE8b1 does not support this, but it is planned for the final release 52 WEBVISIONS - 23 MAY 2008
  69. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Control outlining Outlines are like borders except they take up no space. input:focus { outline: 1px dotted #f00; } Could also be written as input:focus { outline-color: #f00; outline-style: dotted; outline-width: 1px; } 53 WEBVISIONS - 23 MAY 2008
  70. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Choose your box model A little CSS3 action lets you choose between the content (W3C) or border (IE) box model. div { background: #c63; border: 10px solid #f00; margin: 10px; padding: 20px; width: 300px; } div.border-box { -ms-box-sizing: border-box; } 54 WEBVISIONS - 23 MAY 2008
  71. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Track page updates IE8 introduces a proprietary new event called hashchange that can be used to key into changes to the hash portion (fragment) of a URL Could be very useful for tracking changes in Ajax widgets. window.onhashchange = function(){ alert( window.location.hash ); } (use your own event listener adding script here) 55 WEBVISIONS - 23 MAY 2008
  72. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Support for data: URIs A means of including small data items inline as though they were an external source. So, instead of writing #nav a { background: url(arrow.png) center right no-repeat; } you could write #nav a { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACN # iR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALFJREFUeNpi/P//PwM1ARMD # lQELjBEWFkay5lWrVtHehegG5gBxNRBzUstAHiBuAeKrQBxIzUhRBOJ1QHwAiA2oGcv2QHwGiKcBsRC1 # kg0zEGcC8T0gLoLyqZIO+YG4F4gvAbEHNRM2G7Vc+BGIi4FYG4h3EMwpBMBcIC4D4ndEZz0c4CAQFwDx # BUqTzSMgjgBiB1IMwbCL0BcA8R9QPydotIGCqYMuvKQcdCX2AABBgADYx7aDLgnbAAAAABJRU5ErkJgg # g==) center right no-repeat; } 56 WEBVISIONS - 23 MAY 2008
  73. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Support for data: URIs Pros: ! no additional HTTP tra$c ! frees up a browser’s limited number of download connections for other content ! page requires fewer cache entries ! can be used to embed content when it is not allowed or impractical to reference external files ! reduces the overhead of HTTPS requests ! possible to manage a multimedia page as a single file 56 WEBVISIONS - 23 MAY 2008
  74. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Support for data: URIs Cons: ! maintenance nightmare ! page does not benefit from the browser's cache when assets are re-used ! some browsers limit URI lengths ! data is included as a simple stream and many browsers may not support using containers to provide greater complexity such as metadata, data compression, or content negotiation ! encoded data could be 33-200% larger than the binary file 56 WEBVISIONS - 23 MAY 2008
  75. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Will IE8 break sites? 57 WEBVISIONS - 23 MAY 2008
  76. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Only if you let it ;-) 58 WEBVISIONS - 23 MAY 2008
  77. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Issue #1: DOCTYPE % contract The DOCTYPE switch was a great idea for the time ! ! only standardistas were validating, so it made sense ! it was an easy way to keep old content from breaking while simultaneously allowing standards-support to increase ! Content tools kinda ruined its usefulness ! in their equot;orts to support standards, Dreamweaver, et al began adding DOCTYPEs by default ! users didn’t opt into the DOCTYPE switch’s contract 59 WEBVISIONS - 23 MAY 2008
  78. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Issue #2: IE stagnated ! When the IE team stopped improving on IE’s standards support in 2001 (after the launch of IE6), many developers ! didn’t know better and began using it as the standard against which they built websites, ! assumed its rendering to be accurate, ! weren’t aware of how to best manage its “idiosyncrasies” vis a vis the browsers that conformed to the W3C standards. ! And, unfortunately, those developers who did understand IE’s inadequacies used unsustainable hacks to get IE to play nicely 60 WEBVISIONS - 23 MAY 2008
  79. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS When IE7 came along... ! ...it was a huge improvement in terms of standards support and bug fixes ! ...many sites broke because either ! they weren’t built with standards in mind and the sites’ developers weren’t aware they had been opted into wanting the most accurate standards-based layouts by their software, or ! developers had used unsustainable hacks (rather than Conditional Comments) to bend IE to their will. 61 WEBVISIONS - 23 MAY 2008
  80. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Who wants a repeat? 62 WEBVISIONS - 23 MAY 2008
  81. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS (not me) 63 WEBVISIONS - 23 MAY 2008
  82. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Enter version targeting IE team wanted to oquot;er a means of explicitly stating what version of a given browser your site is known to work on and approached WaSP’s Microsoft Task Force for help with that. Together, we came up a solution that was implementable in either of two ways: <meta http-equiv=quot;X-UA-Compatiblequot; content=quot;IE=7quot; /> or an HTTP header X-UA-Compatible: IE=7 This instruction tells IE8 to present the page as though the browser was IE7. It is optional, but can provide a means of migrating your site to supporting future IE versions on your own timetable. 64 WEBVISIONS - 23 MAY 2008
  83. WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS Questions? 65 WEBVISIONS - 23 MAY 2008
  84. What you need to know about IE8 and Standards slideshare.net/AaronGustafson Aaron Gustafson

×