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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Drawing the Line with Browser Compatibility

Similaire à Drawing the Line with Browser Compatibility (20)

Dernier

Dernier (20)

Drawing the Line with Browser Compatibility