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/
2What 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
3Why 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"
4Why 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"
5Why 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
6Why 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.
7Why 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!
-
8The 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?
9Forward 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.
10Forward 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.
11Forward Compatibility
- So, now that standards are widely supported, do
we still need to be concerned with browser
compatibility?
12Forward Compatibility
- So, now that standards are widely supported, do
we still need to be concerned with browser
compatibility? - Well..yes
13Disagreement 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?
14Disagreement over Standards
- Internet Explorers interpretation offont-size
medium
15Disagreement 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?
16Disagreement over Standards
17Disagreement over Standards
18Disagreement over Standards
19Disagreement over Standards
- Font-Size in the CSS2 recommendation
20Disagreement over Standards
21Disagreement over Standards
- Font-size in CSS2.1 continued
22Disagreement 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.
23Disagreement over Standards
- Another example of differing interpretations of
standards concerns the layout of images in
tables. -
24Disagreement over Standards
- mg src"a.gif"src"a.gif"
-
- A table like that above produced predictable
results. - That is, until Netscape 6 came out.
25Disagreement over Standards
Previous browsers
Netscape 6
This had to be a bug, right?
26Disagreement 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/
27Standards?
28Standards?
29How "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.
30So what's the point in using standards?
31Why 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.
32Why 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.
33Why 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.
34What 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.
35Doctype 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).
36Doctype 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
37Doctype 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/
38Assessment 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.
39Hiding 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.
40Taken 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
43Box 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
44Box 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
45Box 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/
46Assessment 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.
47Assessment 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.
48Simplified Box Model Hack (SBMH)
- div width 100px div \width 140px /
For IE5 Win / w\idth 100px
49Modified SBMH
- div border 10px padding 10px solid
width 100px html div width 140px /
For IE5 Win / w\idth 100px
50Assessment 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.
51Hiding 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
52Conditional 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.
53Browser Sniffing
- Client-Side
- JavaScript
- Server-Side
- Perl, PHP
- Best used as a "last ditch" effort when other,
less complex techniques won't work.
54Summary
- 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
55Summary, 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.
56Cool 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/
57Cool 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
58Cool 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/