Drawing the Line with Browser Compatibility

DRAWING THE LINE WITH BROWSER COMPATIBILITY
Jake Smith
ConFoo - March 10, 2010

http://joind.in/1285

Who are you and who
is your audience?


Demographics

• Is your potential user “tech savvy”?

• Users with disabilities?

• Color blindness or other motor skill deficiencies


Technology Driving
Browser Support


Netbook Revolution

• 2009 Year of the netbook

• Nvidia ION makes video playback amazing

• Flash Player 10.1 provides better netbook support

• Modern OS (Windows 7 and Linux) = less IE6/WIN
XP


Enter the Chrome

• Brand Recognition

• Chrome will be pre-installed on Sony PCs

• Everyone knows google, so they trust Google

• Chrome already taken more market share than
Safari


IE 6, Why can’t I quit
you?


IE 6 in the wild

• School Networks

• Large Companies

• Older Demographic

• Windows XP


Common issues

• Double Margin

• Float Container

• Hover Buttons


Double Margin

• Any margin applied to floated elements

• Solution - display: inline;


Float Container

• Element breaks containment, overflow: hidden/
auto is not enough

• Solution - float: left the containing element


Float Container (before)


Float Container (HTML/CSS)


Float Container (After)


Hover Buttons

• When an “<a>” is in the hover state, and set to
display: block; and the containing “<li>” is floated
you have to hover over the link and not the entire
block element.

• Solution: set containing <li> to position: relative; or
display: inline-block;


IE 6 Techniques and
Tips


Proper Doctype

• Proper Doctype keeps you from Quirks mode

• Quirks mode can wreak havoc on layouts

• Element width


Quirks Mode Diagram

Quirks Mode Doctype: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm


CSS Framework


Reset

• Many available CSS Resets:

• Eric Meyer Reset (Most Popular)

• YUI CSS Reset

• Many more...


Helpers


Slice View


IE Conditionals vs. CSS
hacks


CSS Hacks

• _ hack for IE 6 and below

• * hack for IE 7 and below

• !important for modern browsers

• Most common hack reset * {}

Browser Render Hacks: http://centricle.com/ref/css/ﬁlters/


IE Conditionals

• Specifically target version of Internet Explorer

• Extra HTTP Request


IE Conditionals (Example)


Browser tools

• IE7.js, by Dean Edwards

• DD_Belated

• IE Tester (IE 5.5 - IE 8)

• Developer Window (Webkit) & Firebug (Firefox)

• Expression Web SuperPreview
IE7.js: http://code.google.com/p/ie7-js/
DD_Belated: http://www.dillerdesign.com/experiment/DD_belatedPNG/
IE Tester: http://www.my-debugbar.com/wiki/IETester/HomePage
Expression Web SuperPreview: http://expression.microsoft.com/en-us/dd565874.aspx

Additional Browser Tool


Build a strategy, not an
after thought


Cost Benefit

• Analyze current view trends

• Define aspects of site that must function identical
regardless of browser

• Present/Prepare estimate on Browser Testing/
Development separate from “Development/
Production” time.

• Navigation should always be accessible NO
MATTER WHAT (Mobile, IE, etc)


Lies, Damn Lies and Statistics

• Statistics are skewed/manipulated

• IE 6 is as low as 6% and as high as 20%

• Research your product/client current stats and/or
target market

• Initial research will be paid off by further reach
to clients


Client Awareness


Inform early and often

• Consult the client on current browser trends

• Inform them of possible inconsistencies in
antiquated browsers

• Set/Manage Expectations


Have Tech Specification in contracts

• Browsers Supported

• Surcharge and/or possible timeline increases


CSS 3 and HTML 5


HTML 5 Video


HTML 5 Video vs Flash

• CPU Usage

• Who does it effect? Mobile, Netbook and Nettop

• No full screen support for HTML 5

• Zero support for Internet Explorer

• Supported in Mobile Browsers


HTML 5 Video Detection

Dive Into HTML 5 - Detect: http://diveintohtml5.org/detect.html
Modernizr: http://www.modernizr.com/

Vimeo Flash 10 (Macbook Pro in Safari)


Vimeo Flash 10 (Netbook in Safari)


Vimeo HTML 5 (Macbook Pro in Safari)


Vimeo HTML 5 (Netbook in Safari)


@font-face (CSS3)

• Renders perfect in all measurements

• EOT, OTF, SVG fonts

• Legal issues
• You may use this font for Font-Face embedding, but only if you put a link to www.exljbris.nl on
your page and/or put this notice /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ in
your CSS file as near as possible to the piece of code that declares the Font-Face embedding of
this font.

Delicious Font EULA: http://www.josbuivenga.demon.nl/eula.html


Font Stacks

• Quicker production turnaround

• Example: font-family: "Lucida Grande", "Lucida Sans
Unicode", "Lucida Sans", Verdana, Tahoma, sans-
serif;

Popular Font Stacks: http://www.awayback.com/revised-font-stack/
Installed Font Matrix: http://media.24ways.org/2007/17/fontmatrix.html

Graceful Degradation/Progressive
Enhancement

• RGBA

• Background vs background-color

• Border Radius


RGBA Example


CSS3 - Media Queries

• [max/min]-[width/height]

• Media Types: screen, print, handheld, projection,
braille, speech

• Three ways to implement: import, link and CSS

• Handheld interpreted by older mobile phones

• Current smart phones (iPhone/Android) utilize
“screen”

W3C Media Queries: http://www.w3.org/TR/css3-mediaqueries/


CSS Queries Example (CSS)


CSS Queries (HTML)


Mobile Browsers


The grass is greener in
mobile land


Driving browsers Webkit

• iPhone, Android and soon Blackberry phones
utilize Webkit browsers


Google Voice mobile/web application

• Google vs. Apple APP store

• HTML 5/CSS3 mobile “Google Voice”

Google Voice: http://m.google.com/voice


Google Voice (HTML5/CSS3)


Mobile Apps give you more control

• Less environment concerns

• Objective C (iPhone), Java (Android) and WebOS
(Pre)

• Titanium (Appcelerator), build apps with web
technology

Titanium Appcelerator: http://www.appcelerator.com/


HTML 5 Geolocation

• Not quite to a browser near you, Firefox 3.5+ only

• Not officially HTML 5, governed by “Geolocation
Working Group”

• iPhone and Android 2.0 only supported mobile
devices


HTML 5 Geolocation - Firefox 3.6

HTML 5 Geolocation Demo: http://html5demos.com/geo


HTML 5 Geolocation - iPhone (Safari)

HTML 5 Geolocation Demo: http://html5demos.com/geo


Questions? Concerns? Confusion?


Thanks For Listening
Contact Information
Email: jsmith@clickhere.com
Twitter: @jakefolio
IRC: #phpc & #dallasphp

Please Post Feedback


Drawing the Line with Browser Compatibility

More Related Content

What's hot

Similar to Drawing the Line with Browser Compatibility

Recently uploaded

Drawing the Line with Browser Compatibility