Creating Forward, Backward, and, Present Compatible Sites with CSS - PowerPoint PPT Presentation

1 / 58
About This Presentation
Title:

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

Description:

Creating Forward, Backward, and, Present Compatible Sites with CSS. HighEdWebDev 2004 ... tr td img src='a.gif' /td td img src='a.gif' /td /tr ... – PowerPoint PPT presentation

Number of Views:128
Avg rating:3.0/5.0
Slides: 59
Provided by: Andr840
Category:

less

Transcript and Presenter's Notes

Title: 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/stand
    ards/

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 link
  • 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 wou
    ld be interpreted as
    tion2"
  • Correct HTML tation2"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. , , , and

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
  • mg src"a.gif"src"a.gif"
  • 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 , 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 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
    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).

36
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

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/ht
    ml/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
_at_import Trick
  • Reference style sheets with _at_import
  • _at_import
    advanced.css"
  • 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/

42
_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

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/boxmo
    delhack.html

44
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

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 /
  • htmlbody, htmlbody div, htmlbody p, htmlbody
    th, htmlbody td, htmlbody li, htmlbody dd
    font-size small
  • / be nice to Opera /
  • Example from http//www.alistapart.com/stories/si
    zematters/

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

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

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.

51
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
  • URL http//msdn.microsoft.com/workshop/author/dht
    ml/overview/ccomment_ovw.asp

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

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

54
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

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

56
Cool Things
  • List-o-matic http//www.accessify.com/tools-and-wi
    zards/list-o-matic/list-o-matic.asp
  • Listamatic http//css.maxdesign.com.au/listamatic/

57
Cool Things
  • CSS Page Layout reservoirs
  • http//glish.com/css/
  • http//www.bluerobot.com/web/layouts/
  • http//www.saila.com/usage/layouts/
  • http//www.webreference.com/authoring/style/sheets
    /layout/advanced/
  • http//css-discuss.incutio.com/?pageCssLayouts

58
Cool Things
  • CSS tabs
  • http//www.simplebits.com/bits/css_tabs.html
  • http//complexspiral.com/publications/rounding-tab
    s/
  • http//www.alistapart.com/articles/slidingdoors2
  • http//www.kalsey.com/tools/csstabs/
  • http//www.456bereastreet.com/lab/inverted_tabs/
Write a Comment
User Comments (0)
About PowerShow.com