designing for today’s browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… ·...
TRANSCRIPT
![Page 1: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/1.jpg)
Designing for Today’s BrowsersThree ways to improve managing cross browser concerns
Molly E. Holzschlag | Voices That Matter
![Page 2: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/2.jpg)
1.Understand that browsers are softwareSoftware evolves, changes - that’s the natural state of things
Molly E. Holzschlag | Voices That Matter
![Page 3: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/3.jpg)
Browsers are Software
![Page 4: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/4.jpg)
Browsers are Software
Software is, at its best,
always evolving,
provided its developers
are also evolving.
![Page 5: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/5.jpg)
Browsers are Software
Software is, at its best,
always evolving,
provided its developers
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.
![Page 6: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/6.jpg)
Browsers are Software
Software is, at its best,
always evolving,
provided its developers
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.
![Page 7: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/7.jpg)
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
![Page 8: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/8.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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
![Page 9: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/9.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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!
![Page 10: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/10.jpg)
“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
![Page 11: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/11.jpg)
2.Get to know your browsersLearn the history and unique quirks in those browsers with which you work
Molly E. Holzschlag | Voices That Matter
![Page 12: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/12.jpg)
Browsers are Evolving
![Page 13: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/13.jpg)
Browsers are Evolving
As we evolve, so can the
tools we build. Learning
lessons from our
colleagues and
competitors can lead to
solutions.
![Page 14: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/14.jpg)
Browsers are Evolving
As we evolve, so can the
tools we build. Learning
lessons from our
colleagues and
competitors can lead to
solutions.
Examining browser
influences and features
allows broader
understanding for those
of us developing and
designing for the Web.
![Page 15: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/15.jpg)
Browsers are Evolving
As we evolve, so can the
tools we build. Learning
lessons from our
colleagues and
competitors can lead to
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.
![Page 16: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/16.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
Remember when?
![Page 17: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/17.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
Mozilla / Firefox
Software Model: Open Source
Licenses: MPL, MPL/GPL/LGPL tri-license
Origin: Netscape > Mozilla
Rendering Engine: Gecko
![Page 18: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/18.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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
![Page 19: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/19.jpg)
Gecko Engine Timeline
![Page 20: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/20.jpg)
Mozilla: Trunks and branches leading up to the planned FF 3.0
![Page 21: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/21.jpg)
“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
![Page 22: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/22.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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
![Page 23: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/23.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
Opera
Software Model: Proprietary
Origin: Self
Licensing: Proprietary
Rendering Engine: Presto (since
version 7); Elektra (versions 4-6)
![Page 24: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/24.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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.
![Page 25: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/25.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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.
![Page 26: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/26.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
![Page 27: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/27.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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)
![Page 28: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/28.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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).
![Page 29: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/29.jpg)
Graphical class hierarchy - WebKit DOM
![Page 30: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/30.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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
![Page 31: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/31.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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)
![Page 32: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/32.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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
![Page 33: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/33.jpg)
Who thought browser development wasn’t complicated?
![Page 34: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/34.jpg)
Modeling of one small section of the Trident rendering engine
![Page 35: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/35.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
courtesy of christopher schmitt
![Page 36: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/36.jpg)
specs versus usecomplexities in implementation decision-making
![Page 37: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/37.jpg)
Case Studies
![Page 38: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/38.jpg)
Draconian Error
Handling: RGB color
values demonstrate a
challenge with how to
gain cross-browser
consistency when dealing
with error handling.
Case Studies
![Page 39: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/39.jpg)
Draconian Error
Handling: RGB color
values demonstrate a
challenge with how to
gain cross-browser
consistency when dealing
with error handling.
Evolving implementation:
A look at CSS print issues
across browsers, and how
use cases can modify
decision making in
browser building.
Case Studies
![Page 40: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/40.jpg)
Draconian Error
Handling: RGB color
values demonstrate a
challenge with how to
gain cross-browser
consistency when dealing
with error handling.
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
![Page 41: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/41.jpg)
“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
![Page 42: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/42.jpg)
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>
![Page 43: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/43.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
Safari
IE (5 - present day)
SafariSafariSafariSafariSafari
Firefox
IE (5 - present day)
Opera
![Page 44: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/44.jpg)
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
- CSS 2.0 SpecificationW3C
![Page 45: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/45.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008SafariSafariSafariSafariSafari
IE (5 - present day)
![Page 46: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/46.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008SafariSafariSafariSafariSafari
IE (5 - present day)
![Page 47: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/47.jpg)
“User agents must ignore the following properties with :before and :after pseudo-elements: 'position', 'float', list properties, and table properties.”
- CSS 2.0 SpecificationW3C
![Page 48: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/48.jpg)
“ ”
- CSS 2.1 SpecificationW3C
![Page 49: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/49.jpg)
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> <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>
![Page 50: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/50.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
![Page 51: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/51.jpg)
3.Managing hacks, workarounds and IEBest practices for making sites somewhat interoperable
Molly E. Holzschlag | Voices That Matter
![Page 52: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/52.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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
![Page 53: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/53.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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/
![Page 54: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/54.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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]‐‐>
![Page 55: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/55.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
hack1.css
validCSS
valid(X)HTML
hack2.css
hack3.css
@import
@import@import
<link />
Surgical Correction Technique
![Page 56: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/56.jpg)
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
![Page 57: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/57.jpg)
Designing for Today’s Browsers Molly E. Holzschlag: Voices That Matter 2008
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
![Page 58: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/58.jpg)
“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
![Page 59: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/59.jpg)
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
![Page 60: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/60.jpg)
![Page 61: Designing for Today’s Browsersptgmedia.pearsoncmg.com/imprint_downloads/voicesthatmatter/we… · support: HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, DTD, XSL and XPath. A](https://reader036.vdocuments.site/reader036/viewer/2022070902/5f5b2237ea290510d753f59e/html5/thumbnails/61.jpg)