DRAWING THE LINE WITH BROWSER COMPATIBILITY

Jake SmithConFoo - March 10, 2010

http://joind.in/1285

Who are you and who is your audience?

http://joind.in/1285

Demographics

• Is your potential user “tech savvy”?

• Users with disabilities?

• Color blindness or other motor skill deficiencies

http://joind.in/1285

Technology Driving Browser Support

http://joind.in/1285

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

http://joind.in/1285

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

http://joind.in/1285

IE 6, Why can’t I quit you?

http://joind.in/1285

IE 6 in the wild

• School Networks

• Large Companies

• Older Demographic

• Windows XP

http://joind.in/1285

Common issues

• Double Margin

• Float Container

• Hover Buttons

http://joind.in/1285

Double Margin

• Any margin applied to floated elements

• Solution - display: inline;

http://joind.in/1285

Float Container

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

• Solution - float: left the containing element

http://joind.in/1285http://joind.in/1285

Float Container (before)

http://joind.in/1285

Float Container (HTML/CSS)

http://joind.in/1285

Float Container (After)

http://joind.in/1285

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;

http://joind.in/1285

IE 6 Techniques and Tips

http://joind.in/1285

Proper Doctype

• Proper Doctype keeps you from Quirks mode

• Quirks mode can wreak havoc on layouts

• Element width

http://joind.in/1285

Quirks Mode Diagram

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

http://joind.in/1285

CSS Framework

http://joind.in/1285

Reset

• Many available CSS Resets:

• Eric Meyer Reset (Most Popular)

• YUI CSS Reset

• Many more...

http://joind.in/1285

Helpers

http://joind.in/1285

Slice View

http://joind.in/1285

IE Conditionals vs. CSS hacks

http://joind.in/1285

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/filters/

http://joind.in/1285

IE Conditionals

• Specifically target version of Internet Explorer

• Extra HTTP Request

http://joind.in/1285

IE Conditionals (Example)

http://joind.in/1285

Browser tools

• IE7.js, by Dean Edwards

• DD_Belated

• IE Tester (IE 5.5 - IE 8)

• Developer Window (Webkit) & Firebug (Firefox)

• Expression Web SuperPreviewIE7.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/HomePageExpression Web SuperPreview: http://expression.microsoft.com/en-us/dd565874.aspx

http://joind.in/1285

Additional Browser Tool

http://joind.in/1285

Build a strategy, not an after thought

http://joind.in/1285

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)

http://joind.in/1285

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

http://joind.in/1285

Client Awareness

http://joind.in/1285

Inform early and often

• Consult the client on current browser trends

• Inform them of possible inconsistencies in antiquated browsers

• Set/Manage Expectations

http://joind.in/1285

Have Tech Specification in contracts

• Browsers Supported

• Surcharge and/or possible timeline increases

http://joind.in/1285

CSS 3 and HTML 5

http://joind.in/1285

HTML 5 Video

http://joind.in/1285

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

http://joind.in/1285

HTML 5 Video Detection

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

http://joind.in/1285

Vimeo Flash 10 (Macbook Pro in Safari)

http://joind.in/1285

Vimeo Flash 10 (Netbook in Safari)

http://joind.in/1285

Vimeo HTML 5 (Macbook Pro in Safari)

http://joind.in/1285

Vimeo HTML 5 (Netbook in Safari)

http://joind.in/1285

@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

http://joind.in/1285

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

http://joind.in/1285

Graceful Degradation/Progressive Enhancement

• RGBA

• Background vs background-color

• Border Radius

http://joind.in/1285

RGBA Example

http://joind.in/1285

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/

http://joind.in/1285

CSS Queries Example (CSS)

http://joind.in/1285

CSS Queries (HTML)

http://joind.in/1285

Mobile Browsers

http://joind.in/1285

The grass is greener in mobile land

http://joind.in/1285

Driving browsers Webkit

• iPhone, Android and soon Blackberry phones utilize Webkit browsers

http://joind.in/1285

Google Voice mobile/web application

• Google vs. Apple APP store

• HTML 5/CSS3 mobile “Google Voice”

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

http://joind.in/1285

Google Voice (HTML5/CSS3)

http://joind.in/1285

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/

http://joind.in/1285

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

http://joind.in/1285

HTML 5 Geolocation - Firefox 3.6

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

http://joind.in/1285

HTML 5 Geolocation - Firefox 3.6

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

http://joind.in/1285

HTML 5 Geolocation - iPhone (Safari)

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

http://joind.in/1285

Questions? Concerns? Confusion?

http://joind.in/1285

Thanks For Listening

Contact InformationEmail: jsmith@clickhere.comTwitter: @jakefolioIRC: #phpc & #dallasphp

Please Post Feedbackhttp://joind.in/1285

http://joind.in/1285