RefreshDC IE6 Presentation - Evan Samek

8/4/2019 RefreshDC IE6 Presentation - Evan Samek

1/63

Tales from the Internet Explorer Trenches


2/63


Who is this guy?

@esamek

Lead Designer


3/63


So about that IE6...

It sucks

Its old

But two things to remember...


4/63


It was innovative at its time

Makes great developer conversation


5/63


has to support it

Fortune 500 companies

Large companiesOlder demographic of users


6/63


Other companies have to support it too...

The government

Older demographicsDated IT departments

Bureaucracies


7/63


Two parts to this presentation

Pro-actively NOT support IE6 - FUN!

Pro-actively support IE6 - NOT FUN!


8/63


Boss says - We dont have to

support IE6!

A few things we can do....


9/63


1. Disable ALL styles

Conditionally EXCLUDE CSS

Important to code HTMLcorrectly

Could make user thinksomething is wrong with their

browser


10/63



11/63



12/63


Disable ALL styles - Code


13/63


2. Display warning banner

Leave errors alone

At least we inform the userthat we dont support IE6


14/63


Display warning banner


15/63


3. Display restrictive Popup

Doesnt even allow users to get in

Can recommend other browsers orother methods to access the service

Quite frustrating

T l f h I E l T h


16/63


Display restrictive Popup

T l f th I t t E l T h


17/63


4. Google Chrome Frame

Amazing

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



18/63


4. Google Chrome Frame Problems

Typically requires Admin access

IT departments frown on itUser has to install, could harmconversion rate



19/63


Google Chrome Frame Non - Admin

Got around admin access

First tries to install Admin req.version, then falls back to non-admin

Tales from the Internet E plorer Trenches


20/63


Google Chrome Frame Usage


21/63


Google Chrome Frame Usage

/*

CSS rules to use for styling the overlay:

.chromeFrameOverlayContent

.chromeFrameOverlayContent iframe

.chromeFrameOverlayCloseBar

.chromeFrameOverlayUnderlay

*/

// You may want to place these lines inside an onload handler

CFInstall.check({

mode: "overlay",

destination: "http://www.waikiki.com"

});

Add JavaScript

http://www.waikiki.com/http://www.waikiki.com/http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.jshttp://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js


22/63


Google Chrome Frame Default Popup



23/63


Google Chrome Frame Example



24/63


5. Kill/Crash IE6

We can, for fun, crash IE6 with thefollowing code:

*{position:relative}


25/63

p

Boss says - We DO have to

support IE6!Well...crap.

But we can do it.



26/63

p

Strategies/Things to keep in mind

Always code for modern browsers, butkeep Graceful Degradation in mind

Always ask yourself if this will work in IE6

There is always a way to fix IE6 displayissues

It may just take time



27/63

p

Strategies/Things to keep in mind

Graceful Degradation and Progressive Enhancement



28/63

p

Graceful Degradation

first build for the latest and greate

then add handlers for less capabledevices.

HomeProducts

Services

.box {box-shadow:0 0 3px #444;}

.ie6 .box {border:1px solid #444;}



29/63

Progressive Enhancement

begin with the basic version, th

add enhancements for those whocan handle them.

.box {border:1px solid #444;}

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



30/63

The setup - HTML

Use conditional comments toinclude relevant CSS

According to the conditional comment this is n



31/63

The setup - HTML

Use conditional comments to

include relevant CSS

Ordering is important forCascading

!! ! !



32/63

A quick note about Browser Sniffers

OK, but has some drawbacks

Mixed CSS

Performance loss

.msie6 .something {color:#fff}

.firefox4 .something {color:#f3f3

Tales from the Internet Explorer Trenches/* http://meyerweb.com/eric/tools/css/reset/

2 0 | 20110126
http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/


33/63

The setup - CSS

Browsers have default styles

Always start with CSS Reset

v2.0 | 20110126License: 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, tdarticle, 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;}



34/63

The setup - No need for CSS hacks

Cascade styles, dont use hacks

Cleaner code

Its called CSS for a reason!



35/63

How to implement a fix

Find affected element

Copy element selectorPaste into IE CSS

Change relevant styles

IN STYLE.CSS (Base Style)

#content .sidebar .nav {box-shadow: 0 0 3px #444;border

IN IE6.CSS (IE Fix Style)

#content .sidebar .nav {border:2px solid #444;}



36/63

How to figure out whats wrong

Need IE6

Need a firebug equivalent



37/63

How to figure out whats wrong

In order to get IE6, you needWindows XP.

There are ways to get it still...



38/63

How to get IE6

Windows 7 -> WinXP Mode



39/63

How to get IE6

Windows Vista -> IETester



40/63

How to get IE6

Virtual Machines

I have found displaydifferences

Slow



41/63

Best Way to get IE6:

Install Windows XPStandalone Machine



42/63

How to get a Firebug for IE6

MSFT Developer Toolbar



43/63

MSFT Developer Toolbar



44/63

Most common (weird) problem

hasLayout



45/63

hasLayout Bug

Layout is an IE/Win proprietary concept that determines howelements 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 DeveloperToolbar

-1 actually equals TRUE?!?!



46/63

Elements that have layout by default

, , , , , , , , , , , ,

not !



47/63

How to fix hasLayout

apply dimension settingproperties to affected element

and its parents

use debug bar to see effect

position: absolute

float: left|right

display: inline-block

width: any value other than 'auto

height: any value other than 'aut

zoom: any value other than'normal' (MSDN)

writing-mode: tb-rl (MSDN)

http://msdn.microsoft.com/en-us/library/ms531187.aspxhttp://msdn.microsoft.com/en-us/library/ms531187.aspxhttp://msdn.microsoft.com/en-us/library/ms531189.aspxhttp://msdn.microsoft.com/en-us/library/ms531189.aspx


48/63

What IE6 doesnt support

CSS3 properties

Some CSS2 properties

CSS3 Advanced Selectors

Some advanced CSS2 properties

Transparency

:hover on anything besides s

Web Fonts

box-shadow

border-radius

min-height, min-width rgba

opacity .content.main-content

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

Web Fonts



49/63

jQuery!! - Graceful Degradation (kinda)

Use JavaScript to select and apply classnames to elements dynamically

jQuery is by far and away the best way

get around IE6 advanced selectorlimitations.

STILL WORKS IN IE6!!!

$(".content.main-content").css("border","9px solid re

$(".link[src=*.jpg]").css("border","9px solid red");



50/63

What jQuery can help with

Hovering on elements that arent s

Advanced selectors

$("li").hover( function () { $(this).addClass(hover-on); },function () {

$(this).removeClass(hover-on); }

);

STILL WORKS IN IE6!!!

$(".item:nth-child(odd)").css("border","9px solid re

$(".link[src=*.jpg]").css("border","9px solid red");



51/63

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 *



52/63

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 mouseover the page.

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



53/63

Transparency

IE6 doesnt support PNG24s, no supportfor alpha channel

PNG8 & GIF - pixel by pixeltransparency



54/63

Transparency Fixes

Just use GIF or PNG8 with proper matte

Use AlphaImageLoader - performance loss,

messes with DOM, no repeats or positioning ofbackground IMGs - invalid CSS

Lots of other proprietary PNG fixers out there

Best solution (best looking) is PNG8s with carefulgraphic creation practices

img {

filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(..

}



55/63

Transparency Fix with PNG8



56/63

Web Fonts

Just disable with conditional comments

Windows does not have a good trackrecord of font smoothing/anti-aliasing

Even TypeKit looks bad. Cufon and Sifrare flash solutions which look better butmake elements invisible to CSS.



57/63

IE Filter Property = Crappy CSS3

Most people overlook the IE Filterproperty, its pretty powerful for what it is.

Not valid CSS, so watch out.

Box ShadowTransparencyBlurGlow

WaveFlipChromaGradients

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



58/63

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);



59/63

IE Transparency

filter: Alpha(Opacity=80);



60/63

IE Blur

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



61/63

IE Glow

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



62/63

IE Flip

FILTER: FlipV;FILTER: FlipH;



63/63

IE Gradients

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

Date post:	07-Apr-2018
Category:	Documents
Upload:	evan-samek
View:	228 times
Download:	0 times

RefreshDC IE6 Presentation - Evan Samek

Documents