Creating Forward, Backward, and Present Compatible Sites with CSS

1
Creating Forward, Backward, and Present
Compatible Sites with CSS

• WebDevShare 2003
• Monday, October 6, 2003
• Andrew Stevens
• andrew_at_4serendipity.com

2
What we will cover

• Why use Standards?
• Browsers' move to standards
• Forward compatibility
• What is it and why use it?
• Disagreement over Standards
• Why you should use standards
• Techniques for implementing a forward compatible
  site

3
Why Standards?

• Netscape versions prior to 2 would recover from
  missing attribute value quotations
• i.e. lta href"page.htmlgtA linklt/Agt
• After the release of Netscape 2 these pages
  broke, leaving large parts of pages' content
  invisible.
• Examples from "4 Reasons to Validate your HTML"

4
Why Standards?

• Netscape 3 began being too liberal in looking for
  entities in attribute values.
• Thus lta href"quote.cgi?author1quotation2"gtwou
  ld be interpreted aslta href"quote.cgi?author1"a
  tion2"gt
• Correct HTML lta href"quote.cgi?author1ampquo
  tation2"gtperformed just fine in Netscape 3
• Example from "4 Reasons to Validate you HTML"

5
Why Standards?

• HTML wasn't originally created as a presentation
  language
• However, web designers wanted control over
  presentation
• Browser manufacturers met this desire by
  introducing proprietary extensions to HTML
• i.e. ltfontgt, ltspacergt, ltmarqueegt, and ltblinkgt

6
Why Standards?

• With the introduction of the 4.0 browsers, DHTML
  promised new levels of beauty, interaction, and
  coolness for the web.
• However, Netscape and Microsoft's browsers
  employed proprietary, separate, and non-standard
  implementations of DHTML.

7
Why Standards?

• Web development during the "4.0" era was
  frequently very laborious.
• Often requiring the development of two or more
  versions of each site
• Sites built during this time also frequently had
  the added code bloat that results from developing
  for multiple, proprietary platforms.
• This was no fun!

8
The Move to Standards

• The 5.0 browsers began to introduce much greater
  levels of standards support.
• Many started to praise the "forward
  compatibility" that was becoming possible.
• What does "forward compatible" mean?

9
Forward Compatibility

• Forward compatible sites use standards instead of
  proprietary markup
• Forward compatibility promises "Write once,
  publish everywhere", now and in the future
• That is, that a site produced with FC in mind
  will continue to be usable in tomorrow's browsing
  devices.

10
Forward Compatibility

• Doesn't forward compatibility ruin backward
  compatibility?
• No. Standards promote backward compatibility by
  nature.
• And "backward compatible" sites are rarely more
  backward compatible than "forward compatible"
  ones.
• "Backward compatible" invariably means
  device-dependant.

11
Forward Compatibility

• So, now that standards are widely supported, do
  we still need to be concerned with browser
  compatibility?

12
Forward Compatibility

• So, now that standards are widely supported, do
  we still need to be concerned with browser
  compatibility?
• Well..yes

13
Disagreement over Standards

• Standards aren't always straightforward and
  unambiguous.
• For Example
• The W3C CSS Recommendation specifies 7 font-size
  keywordsxx-small x-small small medium
  large x-large xx-large
• Now we all know what size "medium" will be, right?

14
Disagreement over Standards

• Internet Explorers interpretation offont-size
  medium

15
Disagreement over Standards

• When Opera 6 was introduced, developers found
  that it sized text like IE
• Whats up with this?
• Now Operas got it all wrong too!
• Or do they?

16
Disagreement over Standards
17
Disagreement over Standards
18
Disagreement over Standards

• Font-size in CSS1

19
Disagreement over Standards

• Font-Size in the CSS2 recommendation

20
Disagreement over Standards

• Font-size in CSS2.1

21
Disagreement over Standards

• Font-size in CSS2.1 continued

22
Disagreement over Standards

• Microsoft and Opera, instead of implementing a
  clearly ineffective W3C recommendation, chose to
  map the seven font-size keywords to the old font
  element size values (i.e. font size"4", etc.)
• The W3C followed by modifying the CSS Spec.

23
Disagreement over Standards

• Another example of differing interpretations of
  standards concerns the layout of images in
  tables.

24
Disagreement over Standards

• lttable cellspacing"0" cellpadding"0"gtlttrgtlttdgtlti
  mg src"a.gif"gtlt/tdgtlttdgtltimg src"a.gif"gtlt/tdgtlt/tr
  gtlttrgtlttdgtltimg src"a.gif"gtlt/tdgtlttdgtltimg
  src"a.gif"gtlt/tdgtlt/trgt
• lt/tablegt
• A table like that above produced predictable
  results.
• That is, until Netscape 6 came out.

25
Disagreement over Standards
Previous browsers
Netscape 6
This had to be a bug, right?
26
Disagreement over Standards
Previous browsers
Netscape 6
This had to be a bug, right?
In fact, this behavior was designed on purpose.
Netscape viewed this as the correct
interpretation of current web standards, since
inline elements, like ltimggt, require space for
font descenders. More about this at
http//devedge.netscape.com/viewsource/2002/img-ta
ble/
27
Standards?
28
Standards?
29
How "standard" are standards?

• Standards are sometimes ambiguous and open to
  interpretation.
• Sometimes the standards dont get it right the
  first or even the second time.
• Sometimes Standards change.

30
So what's the point in using standards?
31
Why to Use Standards

• Standards bodies value stability and
  compatibility and strive for it
• The use of current web standards promote the
  separation of presentation from content
• Separating presentation from content helps make
  dealing with changes easier
• Most of the serious incompatibilities have
  resulted from browsers' different treatments of
  presentation.

32
Why to Use Standards

• Use of standards also promotes sites that are
  more "present compatible."
• Separation of presentation and content moves much
  of a site's presentational complexity and subtly
  to a relatively small number of files (style
  sheets).
• Also, by reducing the complexity of page markup,
  you allow for sites that are more easily authored
  by non-technical people.

33
What are we to do?

• The need for workarounds are unavoidable
• However, standards-compliant sites enable more
  elegant and reliable workarounds than old, hacked
  sites did.
• Make efforts to use techniques that will be least
  likely to cause future problems.
• Fortunately we can use older browsers' incomplete
  standards support to our advantage.

34
Doctype Switch

• Different Doctypes trigger different layout modes
• First implemented in IE 5 Mac
• Assumed that creators of non-standard pages
  didnt and wouldnt use a Doctype
• The browser can render older pages in a "quirky"
  way, while correctly interpreting standards for
  newer pages.
• Since implemented in IE 6 (Win), Opera 7, and
  Mozilla-based browsers (i.e. Netscape 6).

35
Doctype Switch

• A good Summary table of Doctypes and the layout
  modes they invoke can be seen athttp//www.hut.f
  i/u/hsivonen/doctype.html

36
Doctype Switch

• Information on browser rendering modes
• The Opera 7 DOCTYPE Switcheshttp//www.opera.com/
  docs/specs/doctype/
• CSS Enhancements in Internet Explorer 6Details
  which Doctype triggers which rendering mode in IE
  6 and lists some of the differences between the
  "standards" and "quirks" mode in this browser.
  http//msdn.microsoft.com/library/en-us/dnie60/ht
  ml/cssenhancements.asp
• Mozilla's Quirks Modehttp//www.mozilla.org/docs/
  web-developer/quirks/

37
Assessment of Doctype Switch

• Pro
• Allows you to design to standards, without
  breaking older "quirky" pages.
• Rendering modes and the Doctypes that trigger
  them are well documented.
• Con
• Introduces a layer of complexity.

38
Hiding CSS from browsers

• Older browsers implement CSS only partially
• We can take advantage of these partial
  implementations to help hide modern CSS from
  these older browsers
• This is often the only way to create a
  forward-compatible site while maintaining support
  and layout consistency in older browsers.
• The techniques are fairly well documented.

39
Taken from http//centricle.com/ref/css/filters/
40
_at_import Trick

• Reference style sheets with _at_import
• ltstyle type"text/css"gt _at_import
  advanced.css"lt/stylegt
• The example above will hide the style sheet from
  Netscape 4.x, Win IE 3-4, Mac IE 4.
• _at_import hack reference http//w3development.de/cs
  s/hide_css_from_browsers/import/

41
_at_import Trick

• Pro
• Easy to implement
• Well documented
• Con
• Possibility of style collisions when the same
  property is defined in multiple style sheets
• Make sure that your imported style sheets play
  well with your baseline style sheets

42
Box Model Hack

• Initially developed to send IE box dimensions
  compatible with its non-standard box model
  implementation.
• Hides CSS from Netscape 4.x, Mac IE 4.5 and
  lower, and Win IE 4-5.5
• Developed by Tantek Çelik
• Hack web page http//tantek.com/CSS/Examples/boxmo
  delhack.html

43
Box Model Hack

• Comparison of the IE and W3C Box Model
• From http//msdn.microsoft.com/library/default.as
  p?url/library/en-us/dnie60/html/cssenhancements.a
  sp

44
Box Model Hack Example

• font-size x-small
• / false value for WinIE4/5 /
• voice-family "\"\""
• / trick WinIE4/5 into thinking the rule is over
  /
• voice-family inherit
• / recover from trick /
• font-size small
• / intended value for better browsers /
• htmlgtbody, htmlgtbody div, htmlgtbody p, htmlgtbody
  th, htmlgtbody td, htmlgtbody li, htmlgtbody dd
  font-size small
• / be nice to Opera /
• Example from http//www.alistapart.com/stories/si
  zematters/

45
Assessment of the Box Model Hack

• Pro
• Well documented
• An effective method to send IE 45 specific CSS
  without relying on more complex techniques, such
  as browser detection.

46
Assessment of the Box Model Hack

• Con
• Its a hack
• Relies on a browser parse bug, not on a browser's
  unsupported CSS feature (like _at_import)
• It could break in the future
• IE 6 implemented the W3C box model for pages
  rendered in "Standards Mode" and fixed the parse
  bug.
• However, they also continued support for the
  proprietary box model in "quirks" mode, but also
  fixed the parse bug for this mode as well.

47
Hiding CSS from Internet Explorer using
conditional comments

• A proprietary Microsoft technology for
  conditionally displaying markup based on browser
  version.
• Introduced with IE 5
• Example
• lt!--if lt IE 5.5gtltlink rel"stylesheet"
  href"quirks.css" type"text/css"gtlt!endif--gt
• URL http//msdn.microsoft.com/workshop/author/dht
  ml/overview/ccomment_ovw.asp

48
Conditional Comments

• Assessment
• Pro
• Is proprietary and, thus, is a good way of
  controlling CSS for IE without interfering with
  other browsers.
• Con
• Is proprietary and could be removed from future
  releases of IE.

49
Browser Sniffing

• Client-Side
• JavaScript
• Server-Side
• Perl, PHP
• Best used as a "last ditch" effort when other,
  less complex techniques won't work.

50
Summary

• The gradual move towards standards support on the
  web should be embraced
• Standards support doesn't necessarily create
  consistent browser interpretations of standards
• However, consistency is much greater than it was
  before

51
Summary, cont'd

• Sites employing current standards are easier to
  build and maintain.
• Well-documented workarounds are available for
  common browser discrepancies.
• Dealing with quirks in standards support beats
  creating new site versions for each new viewing
  device.