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

1. Creating Forward, Backward, and, Present Compatible Sites with CSS HighEdWebDev 2004 Andrew Stevens Presentation web site: http://www.4serendipity.com/highedwebdev2004/standards/

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. <a href="page.html>A link</A> • 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 <a href="quote.cgi?author=1&quotation=2">would be interpreted as<a href="quote.cgi?author=1"ation=2"> • Correct HTML <a href="quote.cgi?author=1&amp;quotation=2">performed 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. <font>, <spacer>, <marquee>, and <blink>

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 keywords:xx-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 Explorer’s interpretation of:font-size: medium

15. Disagreement over Standards • When Opera 6 was introduced, developers found that it sized text like IE • What’s up with this? • Now Opera’s 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 <table cellspacing="0" cellpadding="0"><tr><td><img src="a.gif"></td><td><img src="a.gif"></td></tr><tr><td><img src="a.gif"></td><td><img src="a.gif"></td></tr> </table> • 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 <img>, require space for font descenders. More about this at: http://devedge.netscape.com/viewsource/2002/img-table/

27. Standards?

28. Standards?

29. How "standard" are standards? • Standards are sometimes ambiguous and open to interpretation. • Sometimes the standards don’t get it right the first or even the second time. • Sometimes standards change.

30. So what's the point in using standards?

31. Why choose 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 choose Standards • Compatibility • Applications developed using proprietary code can be incompatible with standards-based applications. • Future flexibility • New staff (that are aware of web standards, of course) can more easily and quickly begin work instead of having to much time deciphering the original authors hacked, non-standard code.

33. Why choose 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.

34. 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.

35. Doctype Switch • Different Doctypes trigger different layout modes • First implemented in IE 5 Mac • Assumed that creators of non-standard pages didn’t and wouldn’t 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+).

36. Doctype Switch • A good Summary table of Doctypes and the layout modes they invoke can be seen at:http://www.hut.fi/u/hsivonen/doctype.html

37. 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/html/cssenhancements.asp • Mozilla's Quirks Modehttp://www.mozilla.org/docs/web-developer/quirks/

38. 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.

39. 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.

40. Taken from: http://centricle.com/ref/css/filters/

41. @import Trick • Reference style sheets with @import • <style type="text/css"> @import “advanced.css";</style> • The example above will hide the style sheet from Netscape 4.x, Win IE 3-4, Mac IE 4. • @import hack reference: http://w3development.de/css/hide_css_from_browsers/import/

42. @import Trick • Pro: • Easy to implement • Well documented • Con: • Possibility of “style collisions” when the same propertyis defined in multiple style sheets • Make sure that your imported style sheets play well with your baseline style sheets

43. 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/boxmodelhack.html

44. Box Model Hack Comparison of the IE and W3C Box Model From: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

45. 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 */ } html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd { font-size: small} /* be nice to Opera */ Example from: http://www.alistapart.com/stories/sizematters/

46. Assessment of the Box Model Hack • Pro: • Well documented • An effective method to send IE 4&5 specific CSS without relying on more complex techniques, such as browser detection.

47. Assessment of the Box Model Hack • Con: • It’s a hack • Relies on a browser parse bug, not on a browser's unsupported CSS feature (like @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.

48. Simplified Box Model Hack (SBMH) div { width: 100px; } div { \width: 140px; /* For IE5 Win */ w\idth: 100px; }

49. Modified SBMH div { border: 10px; padding: 10px solid; width: 100px; } * html div { width: 140px; /* For IE5 Win */ w\idth: 100px; }

50. Assessment of SBMH • Simpler and more elegant than the Box Model Hack. • Less likely to mess with Aural style sheets. • But it is still a hack.