designing for today’s browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… ·...

Designing for Today’s BrowsersThree ways to improve managing cross browser concerns

Molly E. Holzschlag | Voices That Matter

1.Understand that browsers are softwareSoftware evolves, changes - that’s the natural state of things


Browsers are Software


Software is, at its best,

always evolving,

provided its developers

are also evolving.



always evolving,


are also evolving.

Just as Adobe Photoshop

is a very different tool

than Adobe Fireworks, so

can browsers differ

despite common goals

and even, origins.



always evolving,


are also evolving.

Just as Adobe Photoshop

is a very different tool

than Adobe Fireworks, so

can browsers differ

despite common goals

and even, origins.

Browser development is a

complex blend of

variables including

science and art,

philosophy and method,

human passions, and

personal agendas.

Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008

Some Things We Know About Software

The history of software development is

a long one.

Multiple philosophies and approaches

to development (RAD, Agile, Extreme).

No matter the method, the design and

programming of software is

fundamentally human: Passionate,

complex, even controversial.

“Design and programming are human activities; forget that and all is lost.”

Bjarne Stroustrup


Some Things We Know About Browsers

The history of browser development is

a short one.

Multiple philosophies and approaches

to development and implementation,

all in continual evolution and change.

No matter the method, building

software to standards and best

practices requires having standards

and best practices to begin with.

“When one has no character one has to apply a method.”

- Albert Camus


Browser Development Challenges

Despite common roots, browsers have

evolved in different, uncoordinated,

and isolated environments.

Implementation decisions are left to

implementers, there’s little to no

discussion about how to implement it.

It is a grave assumption to believe

anything about developing a Web

browser is easy, cheap, or fast.

Have you ever had to bake a cake? Typically, you need very exact amounts of each ingredient, each combined in order and watched over carefully ‘til the end result. Imagine having to do this with a flawed recipe - or even worse - no recipe at all!

“IT professionals have a responsibility to understand the use of standards and the importance of making Web applications that work with any kind of device.”

- Sir Tim Berners-LeeInventor of the World Wide Web

2.Get to know your browsersLearn the history and unique quirks in those browsers with which you work


Browsers are Evolving


As we evolve, so can the

tools we build. Learning

lessons from our

colleagues and

competitors can lead to

solutions.




lessons from our

colleagues and


solutions.

Examining browser

influences and features

allows broader

understanding for those

of us developing and

designing for the Web.




lessons from our

colleagues and


solutions.

Examining browser

influences and features

allows broader

understanding for those

of us developing and

designing for the Web.

Community feedback and

open business models

continue to prove

desirable for innovative,

economic and human

morale.


Remember when?


Mozilla / Firefox

Software Model: Open Source

Licenses: MPL, MPL/GPL/LGPL tri-license

Origin: Netscape > Mozilla

Rendering Engine: Gecko


Mozilla: Interesting Facts

Mozilla has extensive W3C standards support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath.

A number of alternative browsers such

as Flock and Camino have been built

using core Mozilla technology to

unique results.

Mozilla’s open source nature has let it

evolve in tandem with the community.

“Firefox couldn't have happened without Mozilla 1.0, a release milestone about which I wrote a requirements manifesto in early 2001.

Mozilla 1.0 came out in June of 2002, and finally won back reputation lost due to Netscape 6 and the big rewrite.

It set the stage for Firefox, Thunderbird, and other XUL applications.” - Brendan Eich

Gecko Engine Timeline

Mozilla: Trunks and branches leading up to the planned FF 3.0

“For Mozilla 1.0, the architectural die was cast in late 1998 and 1999, so the process to reach 1.0, with its stable set of APIs on which most of a browser could be built, consisted mainly of the hard work of finishing.

Since then, much of the code base has been revised in some way, but always incrementally. No ‘big bangs.’”

- Brendan EichChief Technology Officer, Mozilla &

Creator of JavaScript


What We Learn From Mozilla

Open source models can be very

productive in the advancement of

browser software.

Abundant tools and extensions make

for an attractive developer platform.

No Big Bangs!

“For Mozilla to be successful, it doesn't need to be used by 80 percent of users.”

- Marc Andreessen


Opera

Software Model: Proprietary

Origin: Self

Licensing: Proprietary

Rendering Engine: Presto (since

version 7); Elektra (versions 4-6)


Opera: Interesting Facts

Browser with the longest defined

commitment to the implementation of

W3C specifications.

Opera has made historic

implementation advances with CSS and

has simultaneously had notorious

problems with DOM implementation.

Opera’s commitment to

user agent development

in mobile and other

devices is a strong asset

to the advancement of

the mobile and

alternative device

accessible web.


What We Learn From Opera

Focus and identity within a company

can foster strong products and

branding.

All the branding in the world can’t

make a browser popular, for whatever

the reasons.

Have a backup plan! (Can you say

Wii?)

Opera on the desktop has

a rich history of

innovative feature

development: Tabbed

browsing, sidebars,

zoom, OperaShow, small

screen view, etc.


Safari / WebKit

Model: WebCore and WebKit source

code are open, specific software is

licensed differently

Licensing: Proprietary EULA, LGPL

Origin: WebCore (Based on Konqueror’s

KHTML engine)

Rendering engine: WebCore (based on

KHTML)


Safari / Web Kit: Interesting Facts

One of the latest browsers to enter the

market.

Known to be faster than the Gecko

engine.

Unless the UA reports itself as Firefox

(not default) certain sites and features

work improperly such as Gmail,

Facebook and even aspects of

WordPress.

Safari was the first browser to publicly work to comply with the Acid2 test. Each fix made was blogged about by Dave Hyatt, and Safari holds the record of having “passed” the Acid2 test (in WebKit).

Graphical class hierarchy - WebKit DOM


What We Learn from Safari / Web Kit

Building a browser based on known,

serviceable components makes for a

solid start.

However, notice that Safari has still

struggled with implementation and

bug issues despite a strong base.

Safari is now available for Windows platform


Microsoft

Model: Proprietary

Licensing: Proprietary EULA

Origin: Mosaic > Spyglass Mosaic

Rendering Engine: Trident (IE Win

through IE7, new engine being refined

for IE8); Tasman (IE Mac)

Originally was standalone, later

integrated into the OS (IE 4.O,

September 1997)


Microsoft: Interesting Facts

Internet Explorer 3.0 beta for Windows

introduced the first widely usable CSS

implementation (July, 1996).

Internet Explorer 4.0 introduced the

most advanced application of the DOM

XMLHttpRequest is a Microsoft

Technology

Who thought browser development wasn’t complicated?

Modeling of one small section of the Trident rendering engine


courtesy of christopher schmitt

specs versus usecomplexities in implementation decision-making

Case Studies

Draconian Error

Handling: RGB color

values demonstrate a

challenge with how to

gain cross-browser

consistency when dealing

with error handling.

Case Studies

Draconian Error

Handling: RGB color



gain cross-browser



Evolving implementation:

A look at CSS print issues

across browsers, and how

use cases can modify

decision making in

browser building.

Case Studies

Draconian Error

Handling: RGB color



gain cross-browser



Future implementation

and differences between

spec versions: Floats in

Generated Content show

how different browsers

implement specs, and

challenge implementers

looking for consistent

examples.

Evolving implementation:

A look at CSS print issues

across browsers, and how

use cases can modify

decision making in

browser building.

Case Studies

“The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'.

The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. “

- CSS 2.1 SpecificationW3C

Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008SafariSafariSafariSafariSafari

IE (5 - present day)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>RGB Implementation Tests</title> <style type="text/css"> h1 {color: rgb(0,255,0);} p.rgb {color: rgb(0%,100%,0%);} p.mixed {color: rgb(255,100%,200);} </style></head>

<body><h1>RGB Implementation Test</h1>

<p class="rgb">This is an implementation test of RGB values in CSS 2.1.</p><p class="mixed">This is a mixed implementation test of RGB values in CSS 2.1.</p>

</body></html>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd


http://www.w3.org/1999/xhtml



Safari


SafariSafariSafariSafariSafari

Firefox


Opera

13.3.6 "Best" page breaks:

* Break as few times as possible.

* Make all pages that don't end with a forced break appear to have about the same height.

* Avoid breaking inside a block that has a border.

* Avoid breaking inside a table.

* Avoid breaking inside a floated element


“User agents must ignore the following properties with :before and :after pseudo-elements: 'position', 'float', list properties, and table properties.”


“ ”




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Float Tests: Generated Content</title> <style type="text/css"> h1 { font-size: 12px; color: #999; } h1:after { content: "hello world, I'm trying to float myself right"; float: right; } </style> </head><body>

<h1>Main Heading</h1>

</body></html>





3.Managing hacks, workarounds and IEBest practices for making sites somewhat interoperable



Get The Goods

Awesome tools:

Firebug

Web Developer Extension (FF)

IE Web Developer Toolbar (IE6 & 7)

IE 8 Web Developer Tools (upcoming) joe hewitt, firebug


Consider CSS Reset

CSS reset, or “normalization” may be

of help.

Reset is CSS that removes browser

defaults for specific properties such as

margins, borders, fonts and so on,

allowing you to build across browsers

from a more stable baseline

You can customize your own reset, or

use Eric Meyer’s or YUI’s versions as a

starting point

developer.yahoo.com

meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com

http://developer.yahoo.com

http://meyerweb.com/eric/tools/css/reset/

http://meyerweb.com/eric/tools/css/reset/


Choose and Manage Hacks Wisely

Never use a hack that is based on a

browser bug (* html anyone?)

Always use hacks that validate

If you choose to hack, then use Tantek

Çelik’s “Surgical Correction” technique

for managing hacks

Although controversial, consider using

conditional comments to deal with IE-

related issues

<!‐‐[ifie6]>

<linkrel="stylesheet"type="text/css"href="ie6fixes.css"media="all"/>

<![endif]‐‐>


hack1.css

validCSS

valid(X)HTML

hack2.css

hack3.css

@import

@import@import

<link />

Surgical Correction Technique

Hack Alternative: Dean Edwards’ IE7 Scripts

/* IE7,version0.9(alpha)(2005‐08‐19) Copyright:2004‐2005,DeanEdwards(http://dean.edwards.name/) License:http://creativecommons.org/licenses/LGPL/2.1/*/

IE7.addModule("ie7‐css‐strict",function(){if(!modules["ie7‐css2‐selectors"])return;StyleSheet.prototype.specialize({parse:function(){this.inherit();varr=[].concat(this.rules);r.sort(ie7CSS.Rule.compare);this.cssText=r.join("\n")},createRule:function(s,c){varm;if(m=s.match(ie7CSS.PseudoElement.MATCH))returnnewie7CSS.PseudoElement(m[1],m[2],c);elseif(m=s.match(ie7CSS.DynamicRule.MATCH))returnnewie7CSS.DynamicRule(s,m[1],m[2],m[3],c);elsereturnnewie7CSS.Rule

dean.edwards.name

http://dean.edwards.name

http://dean.edwards.name

http://creativecommons.org/licenses/LGPL/2.1/





IE8 beta tests reveal:

Poorly marked up sites will FAIL, CSS Cascade, Inheritance and specificity issues cause FAIL,

nearly complete and bug-free CSS 2.1 support, some software bugs still, passes Acid2!

Opting out of standards mode:

- Via <meta />

- Via http header

www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/

chris wilson - the ie guy

http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/

http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/

“We come to find at the end of it all, Web “standards” are a myth. What actually matters to those of us working in the wild are which features get implemented into the browser, and those which are put to use, no matter their origin.”

- Molly E. Holzschlagformer group lead of the web standards project

Special Thanks

Brian Goldfarb, Dean Hachamovich, Pete LePage, Markus Mielke, Saloni Mira Rai, Cyra Richardson, Chris WilsonMicrosoft

Anne Van Kesteren, David Storey, Hakon Wium Lie, Charles McathieNevilleOpera Software

Dean Edwards, Anne Van Kesteren, Lachlan Hunt, Henri SivonenWHAT WG

Brendan Eich, Dave Baron, Tristan NitotMozilla Corporation

Bert Bos, Tantek Çelik, Tim Berners-Lee Steven Pemberton, Mike Smith, Chris Wilson W3C

designing for today’s browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… ·...

Documents