Tales from the Internet Explorer Trenches

Tales from the Internet Explorer Trenches

Who is this guy?

Lead Designer

@esamek
2

Tales from the Internet Explorer Trenches

So about that IE6...

It sucks Its old But two things to remember...

Tales from the Internet Explorer Trenches

It was innovative at its time

Makes great developer conversation

Tales from the Internet Explorer Trenches

has to support it

Fortune 500 companies Large companies Older demographic of users

Tales from the Internet Explorer Trenches

Other companies have to support it too...

The government Older demographics Dated IT departments Bureaucracies

6

Tales from the Internet Explorer Trenches

Two parts to this presentation

Pro-actively NOT support IE6 - FUN! Pro-actively support IE6 - NOT FUN!

Tales from the Internet Explorer Trenches

Boss says - We dont have to support IE6!

A few things we can do....

Tales from the Internet Explorer Trenches

1. Disable ALL styles

Conditionally EXCLUDE CSS Important to code HTML

correctly

Could make user think

something is wrong with their browser
9

Tales from the Internet Explorer Trenches

10

Tales from the Internet Explorer Trenches

11

Tales from the Internet Explorer Trenches

Disable ALL styles - Code

<!--[if !IE 6 ]> <link href="style.css" rel="stylesheet" type="text/css"> <![endif]-->

12

Tales from the Internet Explorer Trenches

2. Display warning banner

Leave errors alone At least we inform the user

that we dont support IE6

13

Tales from the Internet Explorer Trenches

Display warning banner

14

Tales from the Internet Explorer Trenches

3. Display restrictive Popup

Doesnt even allow users to get in Can recommend other browsers or

other methods to access the service

Quite frustrating

15

Tales from the Internet Explorer Trenches

Display restrictive Popup

16

Tales from the Internet Explorer Trenches

4. Google Chrome Frame

Amazing Makes IE6+ = Chrome (Webkit) Replaces entire rendering engine, JS

& CSS

17

Tales from the Internet Explorer Trenches

4. Google Chrome Frame Problems

Typically requires Admin access IT departments frown on it User has to install, could harm
conversion rate

18

Tales from the Internet Explorer Trenches

Google Chrome Frame Non - Admin

Got around admin access First tries to install Admin req.

version, then falls back to non-admin

19

Tales from the Internet Explorer Trenches

Google Chrome Frame Usage

Need meta tag

<meta http-equiv="X-UA-Compatible" content="chrome=1">

20

Tales from the Internet Explorer Trenches

Google Chrome Frame Usage

Add JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <style> /* CSS rules to use for styling the overlay: .chromeFrameOverlayContent .chromeFrameOverlayContent iframe .chromeFrameOverlayCloseBar .chromeFrameOverlayUnderlay */ </style> <script> // You may want to place these lines inside an onload handler CFInstall.check({ mode: "overlay", destination: "http://www.waikiki.com" }); </script>

21

Tales from the Internet Explorer Trenches

Google Chrome Frame Default Popup

22

Tales from the Internet Explorer Trenches

Google Chrome Frame Example

23

Tales from the Internet Explorer Trenches

5. Kill/Crash IE6

We can, for fun, crash IE6 with the

following code:
<style>*{position:relative}</style><table><input></table>

http://www.catswhocode.com/blog/6-html-and-javascript-codes-to-crash-ie6

24

Tales from the Internet Explorer Trenches

Boss says - We DO have to support IE6!

Well...crap.

But we can do it.

25

Tales from the Internet Explorer Trenches

Strategies/Things to keep in mind

Always code for modern browsers, but

keep Graceful Degradation in mind

Always ask yourself if this will work in IE6 There is always a way to fix IE6 display
issues

It may just take time

26

Tales from the Internet Explorer Trenches

Strategies/Things to keep in mind

Graceful Degradation and Progressive Enhancement

27

Tales from the Internet Explorer Trenches

Graceful Degradation

<script type="text/javascript" src="/menu.js"></script> <noscript> <ul id="menu"> <li><a href="/">Home</a></li> <li><a href="/products/">Products</a></li> <li><a href="/services/">Services</a></li> </ul> </noscript>

first build for the latest and greatest,

then add handlers for less capable devices.

.box {box-shadow:0 0 3px #444;} .ie6 .box {border:1px solid #444;}

28

Tales from the Internet Explorer Trenches

Progressive Enhancement

.box {border:1px solid #444;} .chrome .box {box-shadow:0 0 3px #444;border:none;}

begin with the basic version, then

add enhancements for those who can handle them.

29

Tales from the Internet Explorer Trenches

The setup - HTML

Use conditional comments to

include relevant CSS

<!--[if IE]> According to the conditional <![endif]--> <!--[if IE 6]> According to the conditional <![endif]--> <!--[if IE 7]> According to the conditional <![endif]--> <!--[if IE 8]> According to the conditional <![endif]--> <!--[if IE 9]> According to the conditional <![endif]--> <!--[if gte IE 8]> According to the conditional higher<br /> <![endif]--> <!--[if lt IE 9]> According to the conditional 9<br /> <![endif]--> <!--[if lte IE 7]> According to the conditional equal to 7<br /> <![endif]--> <!--[if gt IE 6]> According to the conditional than 6<br /> <![endif]--> <!--[if !IE]> --> According to the conditional <!-- <![endif]-->

comment this is IE<br />

comment this is IE 6<br />

comment this is IE 7<br />

comment this is IE 8<br />

comment this is IE 9<br />

comment this is IE 8 or

comment this is IE lower than

comment this is IE lower or

comment this is IE greater

comment this is not IE<br />

30

Tales from the Internet Explorer Trenches

The setup - HTML

Use conditional comments to

include relevant CSS

Ordering is important for

Cascading

<link rel="stylesheet" type="text/css" href="css/style.css" />! ! <!--[if IE]> ! <link rel="stylesheet" type="text/css" href="css/ie.css" media="all" /> ! <![endif]--> ! <!--[if IE 7]> ! <link rel="stylesheet" type="text/css" href="css/ie7.css" media="all" /> ! <![endif]--> ! <!--[if IE 6]> ! <link rel="stylesheet" type="text/css" href="css/ie6.css" media="all" /> ! <![endif]-->

31

Tales from the Internet Explorer Trenches

A quick note about Browser Sniffers

OK, but has some drawbacks Mixed CSS Performance loss

.msie6 .something {color:#fff} .firefox4 .something {color:#f3f3f3;}

32

Tales from the Internet Explorer Trenches

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { ! margin: 0; ! padding: 0; ! border: 0; ! font-size: 100%; ! font: inherit; ! vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { ! display: block; } body { ! line-height: 1; } ol, ul { ! list-style: none; } blockquote, q { ! quotes: none; } blockquote:before, blockquote:after, q:before, q:after { ! content: ''; ! content: none; } table { ! border-collapse: collapse; ! border-spacing: 0; }
33

The setup - CSS

Browsers have default styles Always start with CSS Reset

Tales from the Internet Explorer Trenches

The setup - No need for CSS hacks

Cascade styles, dont use hacks Cleaner code Its called CSS for a reason!

34

Tales from the Internet Explorer Trenches

How to implement a fix

Find affected element Copy element selector Paste into IE CSS Change relevant styles

IN STYLE.CSS (Base Style) #content .sidebar .nav {box-shadow: 0 0 3px #444;border:none;} IN IE6.CSS (IE Fix Style) #content .sidebar .nav {border:2px solid #444;}

35

Tales from the Internet Explorer Trenches

How to figure out whats wrong

Need IE6 Need a firebug equivalent

36

Tales from the Internet Explorer Trenches

How to figure out whats wrong

In order to get IE6, you need

Windows XP.

There are ways to get it still...

37

Tales from the Internet Explorer Trenches

How to get IE6

Windows 7 -> WinXP Mode

38

Tales from the Internet Explorer Trenches

How to get IE6

Windows Vista -> IETester

39

Tales from the Internet Explorer Trenches

How to get IE6

Virtual Machines I have found display

differences

Slow
40

Tales from the Internet Explorer Trenches

Best Way to get IE6:

Install Windows XP Standalone Machine

41

Tales from the Internet Explorer Trenches

How to get a Firebug for IE6

MSFT Developer Toolbar

42

Tales from the Internet Explorer Trenches

MSFT Developer Toolbar

43

Tales from the Internet Explorer Trenches

Most common (weird) problem

hasLayout

44

Tales from the Internet Explorer Trenches

hasLayout Bug

Layout is an IE/Win proprietary concept that determines how

elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.

Often a lack of dimensions applied You can see whether an element hasLayout in the IE Developer
Toolbar

-1 actually equals TRUE?!?!

45

Tales from the Internet Explorer Trenches

Elements that have layout by default

<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee>

not <div>!
46

Tales from the Internet Explorer Trenches

How to fix hasLayout

position: absolute

apply dimension setting

properties to affected element and its parents

float: left|right display: inline-block width: any value other than 'auto' height: any value other than 'auto' zoom: any value other than 'normal' (MSDN) writing-mode: tb-rl (MSDN)

use debug bar to see effect

47

Tales from the Internet Explorer Trenches

What IE6 doesnt support

CSS3 properties Some CSS2 properties CSS3 Advanced Selectors Some advanced CSS2 properties Transparency :hover on anything besides <a>s Web Fonts
48

box-shadow border-radius min-height, min-width opacity rgba

.content.main-content

.link[src=*.jpg] div:hover

Web Fonts

Tales from the Internet Explorer Trenches

jQuery!! - Graceful Degradation (kinda)

Use JavaScript to select and apply class
names to elements dynamically

jQuery is by far and away the best way

get around IE6 advanced selector limitations.

STILL WORKS IN IE6!!! $(".content.main-content").css("border","9px solid red"); $(".link[src=*.jpg]").css("border","9px solid red");

49

Tales from the Internet Explorer Trenches

What jQuery can help with

$("li").hover( function () { $(this).addClass(hover-on); }, function () { $(this).removeClass(hover-on); } );
STILL WORKS IN IE6!!! $(".item:nth-child(odd)").css("border","9px solid red"); $(".link[src=*.jpg]").css("border","9px solid red");

Hovering on elements that arent <a>s Advanced selectors

50

Tales from the Internet Explorer Trenches

CSS Expressions
Javascript within CSS Evaluates JS available properties to return a value to apply via CSS Only in IEs

height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */

51

Tales from the Internet Explorer Trenches

CSS Expressions Issues

TRY TO AVOID! Performance loss Not only are they evaluated when the page is rendered and resized, but
also when the page is scrolled and even when the user moves the mouse over the page.
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */

52

Tales from the Internet Explorer Trenches

Transparency

IE6 doesnt support PNG24s, no support

for alpha channel

PNG8 & GIF - pixel by pixel

transparency

53

Tales from the Internet Explorer Trenches

Transparency Fixes

Just use GIF or PNG8 with proper matte Use AlphaImageLoader - performance loss,
messes with DOM, no repeats or positioning of background IMGs - invalid CSS

img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); }

Lots of other proprietary PNG fixers out there Best solution (best looking) is PNG8s with careful
graphic creation practices

54

Tales from the Internet Explorer Trenches

Transparency Fix with PNG8

55

Tales from the Internet Explorer Trenches

Web Fonts
Just disable with conditional comments Windows does not have a good track
record of font smoothing/anti-aliasing

Even TypeKit looks bad. Cufon and Sifr

are flash solutions which look better but make elements invisible to CSS.

56

Tales from the Internet Explorer Trenches

IE Filter Property = Crappy CSS3

Most people overlook the IE Filter
property, its pretty powerful for what it is.
Box Shadow Transparency Blur Glow Wave Flip Chroma Gradients

Not valid CSS, so watch out.

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#000000);

57

Tales from the Internet Explorer Trenches

IE Drop Shadow / Shadow

filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000); filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0), progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180), progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);

58

Tales from the Internet Explorer Trenches

IE Transparency
filter: Alpha(Opacity=80);

59

Tales from the Internet Explorer Trenches

IE Blur
progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2)

60

Tales from the Internet Explorer Trenches

IE Glow
FILTER: Glow(Color=#ff0000, Strength=8);

61

Tales from the Internet Explorer Trenches

IE Flip
FILTER: FlipV; FILTER: FlipH;

62

Tales from the Internet Explorer Trenches

IE Gradients
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#000000);

63