A webmaster forum specifically catering for Australian site owners. We discuss site development, marketing and management issues.
Please welcome our newest member, discotoast!
Spice up your web site with the ultimate community message board solution!
Fake Id'sGet fake Id's made right now!
vBSEOSearch Engine Optimization for your VBulletin Forum.
AdminFusion
»
Browser Support & Workarounds: CSS
| | #1 |
| | |||||||
| Title: Guest Posts: n/a | Browser Support & Workarounds: CSS Note: -Taken from Kynn Bartlett's book: CSS in 24 hours Browser Support Unfortunately for those of us who want to reap the full benefits of using CSS, the browser manufacturers were slow in providing support for CSS in their software. This meant that people who programed authoring software didn't bother to produce CSS (after all, which browsers could display it?) and Web developers didn't bother to learn CSS, since it was a pointless exercise. Early browsers that understood Cascading Style sheets, such as IE3 (Internet Explorer 3) and Netscape 4, had only incomplete implementations, meaning that evensimple style sheets using rules defined in CSS1 might not display consistently. This meant that CSS was cononsidered unreliable for several years after the Recommendations were issued. Thankfully, the dark age of CSS didn't last forever, and current browsers have decent support for the CSS standards. The newest versions of Netscape, Mozzila, Internet Explorer, and opera all have good implementations of the Cascading Style Sheet specifications. We're on the cusp of a new age of CSS, one where you can design safely and confidently, knowing that your style sheet won't confuse some old browser with buggy CSS implementations. Workarounds For Browser Limitations However, those older browsers still exist and are used by a number of web surfers, despit the poor support for CSS (and just about aeverything else). Furthermore, not even the newest browsers adhere 100% to the specifications, although they come very close. For these reasons, it may be necessary to employ workarounds in your CSS or HTML to ensure that your style effects come through as intended. Cascading Style Sheets are files that describe how to present specific effects when displaying a web page. They're named because they follow a specific pattern, called the cascade, which determines the order in which style effects are applied. The CSS language is a Web standard, defined by the world Wide Web Consortium; the current version is CSS Level 2. A style sheet consists of CSS rules that define styles to apply to specific parts of the page. Style rules can change the color, font, and other qualities of the text of a page; they can define the layout and graphical appearance; and they can add interactivity to a site. Although Cascading Style Sheets are quite powerfull and useful, care needs to be taken to apply them in ways consistent with current browser implementations. Not all browsers have good CSS support, and using CSS without understanding the support issues can lead to problems (duh). Although CSS is powerful, it does have certain limitations. The primary limitation of CSS is that it is restricted to mainly working with only what is present in the markup file being styled. The display order can be somewhat altered, and a small amount of text content can be inserted, but to produce major changes in the source HTML (or XML), you'll need to use another method-such as XSL Transformations. Also, CSS is a younger lanuage than HTML by about five years; this means that some of the oldest browsers won't understand Styles written in CSS, or might not load a style sheet at all. Css is also of limited use on simple text browsers, such as those written for cell phones or mobile devices. The Cascading Style Sheets language was designed to be backwards compatible, which means older browsers won't refuse to show your Web page if they aren't able to display your styles. Instead, the default HTML presentation will be used, and if you've designed your CSS and HTML properly, the page content will be usable even if your CSS styles aren't shown. This allows older browsers to access even advanced CSS pages. CSS Level 1 The Cascading Style Sheets Level 1 (sometimes called CSS1 for short) was officially issued as a W3C Recommendation in Decemmber 1996. The URL for this specification is http://www.w3.org/TR/REC-CSS1 CSS Level 1 defines a number of simple text formatting properties, along with propeties for colors, fonts and boxes, principles of the Cascade, and linking mechanism between CSS and HTML. CSS 1 may be used to create some impressive results, but it doesn't deliver the full range of function found in CSS Level 2. CSS Level 2 CSS Level 2 was published in May 1998 ( at http://www.w3.org/TR/REC-CSS2) and extends the power of CSS considerably. CSS Level 2 Provides the Web developer with the ability to use CSS to lay out a page, replacing HTML tables; to create style sheets for specific output devices, such as printers or even Braille devices; to have fine control over which parts of the page receive styling; and to designate a wider range of effects, such as text shadows or downloadable fonts. CSS Level 2 includes and extends all properties and values defined in CSS1. __________________________________________________ ___________ To be able to master the full power of Cascading Style Sheets, you need to understand the biggest issue related to using CSS-browser support. No other Web-related technology has been more limited by poor browser implementation than CSS. However, the situation continues to improve, as recent browsers are getting closer and closer to full support for CSS. The Browser Problem A Web browser is the essential Internet acces tool of the early twenty-firts century. Browsers are becoming indispensable to business, education and personal communication. They create a common platform upon which Web-based applications can be built, with an HTML framework driving e-commerce, business-to-business transactions, Web-based learning, and online communities. Hundreds of thousands of pages of new information are added to the Web each day. Cascading Style Sheets play a crucial role in this adolescent communications medium not only by providing a pleasant visual layer on the surface of these Web applications, but also by potentially reshaping the entire user experience. So what's the problem? In short: Web browsers are terrible at CSS There are a variety of reasons for this. Some browsers, such as Netscape 3, were created before the CSS specification was published. Other browsers art limited in what they're meant to do: Lynx is a text-only browser and doesn't do CSS at all, whereas WebTV terminals understand only a subset of CSS. Some browsers jumped the gun; Microsoft is notorious for jumping the gun and using draft specifications of standards in their browsers. And sadly, some browsers are just plain bad. They may seem to function normally, but when it comes to consistent and standardized support for CSS, they fall apart. The good news is that the problem is being solved. Slowly but surely, each new major browser release is better than the last, and you can get pretty decent, though not perfect, CSS implementations from mozilla, Netscape 6, opera, and certain versions of Internet Explorer. How Browsers Deal With CSS When a browser encounters anything-from CSS rules to HTML, Javascript to flash multimedia-it has three choices as to what it can do. If the browser has been programmed to understands the thing it has encountered, it will attempt to display it according to the specification. If it has no clue what it has come across, it can ignore it. Both of these options can be considered "doing the right thing." Or, the browser can do the wrong thing. It can get confused; it can display in some nonstandard way; it can crash. This third option is the least desirable and is the primary root of our problem. Cascading Style Sheets were designed from the start to degrade gracefully (backwards compatibility). This means that if your CSS rules aren't recognized for some reason, your page will still be usable and the content accesiable. Because we've separated presentation from content, our content should be able to stand on its own, abeit not as beautifully, once our presentation is removed. At least thats the theory. In practice it's not nearly as easy as that. To be an effective CSS author, you'll need to know not only what works in any given-or in most -but also what happens when it doesn't work. Is it as simple as your style not being applied correctly and you losing a bit of decoration, or is it as serious as your entire layout being disrupted and content lost? To understand how browsers deal with CSS, I've divided them up into four categories: older browsers, which pre-date the CSS secifiacation and thus ignore it completely; limited browsers, which don't even attempt to support all of CSS; broken browsers, which try to provide CSS functionality but fail horribly in some manner; and compliant browsers, of which there are sadly few. Each category of browsers will treat Cascading Style Sheets diferently, and it's important to understand what those differences are. -Older Browsers- Older browsers are those that existed before Cascading Style Sheets were a glimmer in the W3C's collective eye. Netscape 3 is the classic example of an older browser, and it does exactly what it's supposed to do: it ignores CSS entirely. If you try to visit a Web page styled with CSS, Netscape 3 won't notice a single rule you've written. The style sheet won't even load. This is actually ideal behavior for older browsers; with CSS designed for backwards compatibility, most CSS-based Web sites should still work, although they may be somewhat boring in apperance. Because Netscape 3 is ignoring all CSS rules, we know exactly what it will do with them; there's no guesswork neccessary on the part of the author. You won't have to do anything speacial to support these types of browsers, except for testing your designs to see if they still function without CSS. Quote:
Limited browsers are those that are not intended to be full-fleged general-use multimedia Web browsers; instea, they serve a very specific function and thus don't have a need for all the capabilities found in CSS. A limited browser is troubing because it supports only a subset of Cascading Style Sheets-and not that's broken cleanly along the lines of the CSS1 and CSS2 Specifications. Microsoft's WebTV is an example of this type of browser; it supports only a small number of CSS properties, and not all of them. Supporting these browsers can be difficult, but they tend to be uncommon in practice, and usually the subsets of CSS they support are intelligently chosen, such as how EmacSpeak (screenreader browser) doesn't support visual proprties but5 has a good reason for not doing so (drr). Testing your design in an older browser (or one with CSS purposely disabled) is usually enough to cover limited browsers, although if you're designing specifically for audiences using these types of browsers, you may want to have a copy (of a limited browser) for your own testing purposes. -Broken Browsers- The worst kind of browser is one that is simply broken when it comes to CSS, despite whatever claims the provider makes to standards compliance. A broken browser is one that, when given perfectly legitimate CSS rules, doesn't present a Web surfer with anything he or she can use, but instead displays a mishmash of styles where information gets lost. The difference between an older browser and a broken one is that older browsers don't try to display CSS,and broken browsers try to display CSS but fail horribly. Internet Explorer 3 was the first browser to implement any CSS, but it did an overall bad job at it, based in part on the fact that they coded to a specification that was still being written at the time. When the final version of CSS Level 1 came out, it was quite different from Internet Explorer 3's first attempt to implement CSS support (meaning slightly better). Fortunately, Internet Explorer 3 has almost passed into memory, replaced by newer versions of IE that are closer to the CSS specification, meaning that the buggy CSS implementaion in IE3 really isn't a factor in current CSS usage. The current front-runner in broken browsers-causing the most headaches for CSS developers around the world-is Netscape 4. Unlike Netscape 3, Netscape4 does indeed attempt to support Cascading Style Sheets but fails miserably in many ways. For example, Netscape 4 doesn't understand many of the key CSS properties needed to lay out a page, set font styles, or align text. To account for the broken browsers out there, it's necessary to understand how they're broken and what happens when you give each browser some CSS rules that it doesn't understand. In some cases, the broken browser will just ignore your CSS, as is the case with a limited or older browser; in others, it may do something horribly wrong. Problems will be pointed later on in this post. -Compliant Browsers- Working with a completly CSS-compliant browser is a joy-or it would be, if such a browser existed. At the moment there are no browsers that completely support all of the Cascading STyle Sheets Level 2 specification, and only a handful that can be legitimately claim full CSS Level 1 support. Luckily, there's plenty of motion in the direction of full suppport, which means things are only getting better with each released browser version. Browsers that are very close to being compliant with the standard include-starting with the most compliant- Mozilla, Netscape 6-8, Opera 5 and 6, and all recent versions of IE, especially for macintosh (I'll post a more up to date list after I finish this section). Coding CSS for a compliant browser is simply a matter of following the standard and reaping the benefit of your work. Unfortunately, this idyllic vision is still not yet a reality, as near-compliant browsers, constitute only a small fraction of the browsers in use. For the foreseeable future, you'll need to keep in mind the needs of users without fully CSS compliant browsers, and that means using workarounds when necessary. Quote:
Because there are so many broken browsere out there, its often neccessary to use a workaround to effect the same functionality you would get on a compliant browser. A workaround is a hack-a nonstandard way of getting a certain result that bends and tweaks the syntax of CSS or HTML in order to produce the type of style effects you're trying to archieve. A good workaround is one that stays within the published standards-CSS and HTML primarily-so that it doesn't break on browsers that are compliant with the standards. A partial workaround is one that gives a similar effect but doesn't fully measure up to the kind of styling you could do if the browser were standards-compliant. For some browser limitations and bugs, there are simply no viable workarounds that give the same functionality; in those cases you will have to make a difficult choice-include the CSS despite the browser limitations or leave it out entirely. The basis for this decison is the cost of failure. The Cost of failure The cost of failure is simply an understanding of what will happen if you use specific CSS rules or properties that aren't understood by the browser. In some cases, you'll wan'tto use CSS properties that aren't well supported; you may figure that the cost of failure is low enough that you don't mind some users missing out on a special styling if it improves the site for those users with more advanced browsers. In other cases, you may decide you can't take that chance, and you'll have to make a choice whether to support the broken browsers with workarounds or ignore that audience. For example, consider a CSS rule that makes a user's screen name stand out, like bold, italized, colored, etc. This may just be simple decoration (difficulty wise), and if the font of the name has no effects in some browsers, so be it; it may not effect at all the way your page functions. | ||||||
| |
| | #2 |
| | |||||
| Title: Guest Posts: n/a | Taken from--Link- Accessibility features Up Visitors with visual impairments may take advantage of a magnified version or a monochrome version of these documents. In most web browsers, you can select your preferred view by going to the View menu and then Page Style or Style. This mechanism is not supported by Internet Explorer. How to interpret these tables Up Each row corresponds to a feature of the particular web technology standard. In the full pages, the browser support for that feature is indicated by a single letter: Y (yes), N (no), or I (incomplete support). A question mark (?) means that the support for that feature is currently unknown. The values have been colored for readability. Most feature names in the full tables are links to the official standards definitions. The tables on this page are in summarized form. Instead of Y, N, and I, percentages are listed, showing the estimated percent of features with support. Incomplete support for a feature is calculated as a 50% support. Features with unknown levels of support are ignored. If there is any unknown support for a feature, then following the percentage is a ratio of the number of known values to total values. This is used to give you an idea of how complete the table data is for that standard. These ratios are not given in the final Summary table, due to the size of the numbers. If all data under a particular standard is unknown, it simply lists a question mark. Feature names are links to the corresponding sections of the full tables. Some feature ratings in the full pages have explanations associated with them, particularly for those with an "I" rating. The explanations are stored in the title attribute of the table cell, which can usually be accessed by user agents with mouse support by hovering the mouse cursor over the table cell. In browsers that support CSS attribute selectors, these rating symbols are marked with an overline. There are three web browsers shown here by default: MSIE 6.0, Firefox 1.0, and Opera 8.0. MSIE 6.0 includes Microsoft Internet Explorer 6 for Windows, Maxthon, Netscape 8 in "I Trust This Site" or Internet Explorer mode, Avant Browser, AOL Browser, and other browsers that use the Trident rendering engine. (It should be noted that Internet Explorer for the Mac uses an entirely different rendering engine.) Firefox 1.0 includes Mozilla Firefox 1.0, the Mozilla suite 1.7, Netscape 8 in "I'm Not Sure" or Netscape mode, and other browsers that use the Gecko rendering engine. For features that are specific to the interface of the browser rather than simply the rendering engine, the named web browser is the browser being tested. How features are rated Up If the browser doesn't recognize a given feature or admits that the feature is not yet implemented, and the browser is supposed to do something with the feature, it receives an automatic N. If the browser appears to support a given feature completely with no significantly impairing bugs, the feature receives a Y. In other cases, the feature generally receives an I, often with an explanation attached (see above). For consistency reasons, it will receive an I even if the feature never performs a correct task or always returns an incorrect value, as long as the browser shows that it recognizes the feature and attempts to utilize it. A Y value can only be given if the feature is supported natively or by a plugin distributed as an official optional component of the web browser. If it requires a plugin not officially endorsed and distributed by the creators of the web browser, it can at best receive an I rating. If the feature requires a plugin, but there is no such plugin that is officially promoted by the creators of the browser, it receives an N. This is done because all major browsers have a variety of third party plugins available to extend the browser's standards support, and including them would defeat the purpose of judging the browser itself. All features are tested with webpages using valid HTML or XHTML markup with strict doctypes and doctype URLs. Some browsers will purposefully implement some features incorrectly when there are errors on the page, particularly when no doctype is used, or when certain types of doctypes are used. In order to see the following results, make sure that you are using valid strict markup on your webpage. You can check an HTML or XHTML document for validity by using the W3C HTML validator. Web technology standards Up HTML Up HTML is the primary language that makes up a webpage. It puts together all of the text, images, scripts, and other content. In most web browsers, you can view this page's HTML code by going to the View menu and selecting "Page Source" or "Source". This table is in summarized form. View the full tables HTML Feature MSIE 6.0 Firefox 1.0 Opera 8.0 HTML 4.01 a 85% 88% 94% abbr 0% 100% 75% acronym 100% 100% 75% address 100% 100% 100% area 92% 100% 92% b 100% 100% 100% base 100% 100% 100% bdo 100% 100% 100% big 100% 100% 100% blockquote 100% 100% 100% body 100% 100% 100% br 100% 100% 100% button 83% 100% 96% caption 100% 100% 100% cite 100% 100% 100% code 100% 100% 100% col 67% 58% 50% colgroup 67% 58% 50% dd 100% 100% 100% del 100% 100% 100% dfn 100% 100% 100% div 100% 100% 100% dl 100% 100% 100% dt 100% 100% 100% em 100% 100% 100% fieldset 100% 100% 100% form 96% 100% 100% frame 90% 80% 85% frameset 100% 83% 83% h1 100% 100% 100% h2 100% 100% 100% h3 100% 100% 100% h4 100% 100% 100% h5 100% 100% 100% h6 100% 100% 100% head 67% 67% 67% html 100% 100% 100% i 100% 100% 100% iframe 92% 92% 96% img 92% 100% 92% input 89% 91% 78% ins 100% 100% 100% kbd 100% 100% 100% label 75% 75% 100% legend 100% 80% 80% li 100% 100% 100% link 73% 73% 73% map 100% 100% 90% meta 100% 100% 100% noframes 0% 100% 88% noscript 63% 75% 50% object 53% 71% 76% ol 100% 100% 100% optgroup 42% 92% 58% option 44% 75% 56% p 100% 100% 100% param 100% 100% 100% pre 100% 100% 100% q 90% 100% 100% samp 100% 100% 100% script 100% 80% 80% select 88% 96% 83% small 100% 100% 100% span 100% 100% 100% strong 100% 100% 100% style 80% 80% 80% sub 100% 100% 100% sup 100% 100% 100% table 91% 91% 95% tbody 90% 90% 90% td 86% 95% 91% textarea 97% 100% 93% tfoot 90% 90% 90% th 86% 95% 91% thead 90% 90% 90% title 50% 50% 50% tr 90% 90% 90% tt 100% 100% 100% ul 100% 100% 100% var 100% 100% 100% Core attributes 100% 100% 100% Event attributes 100% 100% 100% Internationalization (i18n) attributes 100% 100% 100% Cell alignment attributes 25% 38% 38% XHTML 1.0 changes HTML in XML 0% 100% 100% Documents must be well-formed 100% 100% 100% Media types 33% 100% 100% name fragment identifiers are now id 100% 100% 100% XHTML 1.1 changes rb 50% 50% 25% rbc 0% 50% 25% rp 25% 50% 25% rt 100% 33% 17% rtc 0% 50% 25% ruby 100% 50% 25% CSS Up CSS is the primary language for adding presentation elements to a webpage. These presentation elements include colors, fonts, backgrounds, and layout. The voice properties, which include the Angle, Frequency, and Time units, are accessibility extensions and are not necessarily required for all conforming web browsers. View this page without CSS This table is in summarized form. View the full tables CSS Feature MSIE 6.0 Firefox 1.0 Opera 8.0 CSS 2.1 Units Angle 0% 0% 0% Color 100% 100% 100% Counter 0% 0% 50% Frequency 0% 0% 0% Integer 100% 100% 100% Length 100% 100% 100% Number 100% 100% 100% Percentage 100% 100% 100% String 0% 50% 100% Time 0% 0% 100% URI 100% 100% 100% CSS 2.1 Importance !important 50% 100% 100% CSS 2.1 At-rules @charset 100% 100% 100% @import 50% 100% 100% @media 100% 100% 100% @page 0% 0% 100% CSS 2.1 Selectors * 50% 100% 100% E 100% 100% 100% E F 100% 100% 100% E > F 0% 100% 100% E + F 0% 100% 100% [attr] 0% 100% 100% [attr="value"] 0% 100% 100% [attr~="value"] 0% 100% 100% [attr|="value"] 0% 100% 100% .class 50% 100% 100% #id 100% 100% 100% CSS 2.1 Pseudo-classes :active 50% 100% 50% :first-child 0% 100% 100% :focus 0% 100% 100% :hover 50% 100% 50% :lang(C) 0% 100% 100% :link 50% 100% 100% :visited 50% 100% 100% CSS 2.1 Pseudo-elements :after 0% 100% 100% :before 0% 100% 100% :first-letter 50% 100% 100% :first-line 50% 100% 100% CSS 2.1 Basic properties background 79% 100% 100% background-attachment 63% 100% 100% background-color 75% 100% 100% background-image 75% 100% 100% background-position 90% 100% 100% background-repeat 83% 100% 100% border 60% 100% 100% border-bottom 60% 100% 100% border-bottom-color 63% 100% 100% border-bottom-style 79% 100% 100% border-bottom-width 83% 100% 100% border-collapse 63% 100% 100% border-color 63% 100% 100% border-left 60% 100% 100% border-left-color 63% 100% 100% border-left-style 79% 100% 100% border-left-width 83% 100% 100% border-right 60% 100% 100% border-right-color 63% 100% 100% border-right-style 79% 100% 100% border-right-width 83% 100% 100% border-spacing 0% 100% 100% border-style 79% 100% 100% border-top 60% 100% 100% border-top-color 63% 100% 100% border-top-style 79% 100% 100% border-top-width 83% 100% 100% border-width 83% 100% 100% bottom 80% 100% 100% caption-side 0% 100% 100% clear 83% 100% 100% clip 0% 100% 100% color 67% 100% 100% content 0% 57% 80% counter-increment 0% 0% 90% counter-reset 0% 0% 90% cursor 95% 95% 88% direction 75% 100% 100% display 33% 86% 89% empty-cells 0% 88% 88% float 70% 100% 100% font 93% 100% 100% font-family 88% 100% 100% font-size 92% 100% 100% font-style 80% 100% 100% font-variant 75% 100% 100% font-weight 93% 100% 100% height 70% 100% 100% left 80% 100% 100% letter-spacing 75% 100% 100% line-height 83% 100% 100% list-style 80% 100% 100% list-style-image 75% 100% 100% list-style-position 75% 100% 100% list-style-type 59% 100% 100% margin 60% 100% 100% margin-bottom 60% 100% 100% margin-left 70% 100% 100% margin-right 70% 100% 100% margin-top 60% 100% 100% max-height 0% 100% 100% max-width 0% 100% 100% min-height 0% 100% 100% min-width 0% 100% 100% outline 0% 0% 100% outline-color 0% 0% 100% outline-style 0% 0% 100% outline-width 0% 0% 100% overflow 75% 100% 100% padding 63% 100% 100% padding-bottom 63% 100% 100% padding-left 75% 100% 100% padding-right 75% 100% 100% padding-top 63% 100% 100% position 67% 100% 100% quotes 0% 50% 63% right 80% 100% 100% table-layout 75% 100% 100% text-align 83% 100% 100% text-decoration 71% 100% 100% text-indent 75% 100% 100% text-transform 83% 100% 100% top 80% 100% 100% unicode-bidi 80% 100% 100% vertical-align 67% 100% 100% visibility 60% 90% 90% white-space 57% 71% 86% width 70% 100% 100% word-spacing 75% 100% 100% z-index 75% 100% 88% CSS 2.1 Print properties orphans 0% 0% 83% page-break-after 71% 71% 86% page-break-before 71% 71% 86% page-break-inside 0% 0% 100% widows 0% 0% 83% CSS 2.1 Voice properties azimuth 0% 0% 0% cue 0% 0% 100% cue-after 0% 0% 100% cue-before 0% 0% 100% elevation 0% 0% 0% pause 0% 0% 100% pause-after 0% 0% 100% pause-before 0% 0% 100% pitch 0% 0% 0% pitch-range 0% 0% 0% play-during 0% 0% 0% richness 0% 0% 0% speak 0% 0% 100% speak-header 0% 0% 0% speak-numeral 0% 0% 0% speak-punctuation 0% 0% 0% speech-rate 0% 0% 0% stress 0% 0% 0% voice-family 0% 0% 100% volume 0% 0% 0% CSS 2.1 Conformance Conformance 43% 71% 71% CSS 3 Units Appearance 5% 5% 5% Color 91% 97% 96% Counter 0% 0% 0% ID 0% 0% 0% Target name 0% 0% 0% CSS 3 At-rules @color-profile 0% 0% 0% @media 0% 0% 31% @page 0% 0% 0% CSS 3 Selectors E ~ F 0% 100% 0% [attr^="value"] 0% 100% 0% [attr$="value"] 0% 100% 0% [attr*="value"] 0% 100% 0% CSS 3 Pseudo-classes :root 0% 100% 0% :nth-child(N) 0% 0% 0% :nth-last-child(N) 0% 0% 0% :nth-of-type(N) 0% 0% 0% :nth-last-of-type(N) 0% 0% 0% :last-child 0% 100% 0% :first-of-type 0% 0% 0% :last-of-type 0% 0% 0% :only-child 0% 0% 0% :only-of-type 0% 0% 0% :empty 0% 100% 0% :target 0% 100% 0% :enabled 0% 0% 0% :disabled 0% 0% 0% :checked 0% 100% 0% :indeterminate 0% 0% 0% :contains(C) 0% 0% 0% :not(S) 0% 100% 0% :default 0% 0% 0% :valid 0% 0% 0% :invalid 0% 0% 0% :in-range 0% 0% 0% :out-of-range 0% 0% 0% :required 0% 0% 0% :optional 0% 0% 0% :read-only 0% 0% 0% :read-write 0% 0% 0% CSS 3 Pseudo-elements ::selection 0% 0% 0% ::value 0% 0% 0% ::choices 0% 0% 0% ::repeat-item 0% 0% 0% ::repeat-index 0% 0% 0% CSS 3 Basic properties appearance 0% 0% 0% box-sizing 0% 0% 100% color 0% 0% 0% color-profile 0% 0% 0% content 0% 0% 0% cursor 41% 3% 3% display 0% 0% 0% font 50% 50% 50% icon 0% 0% 0% nav-down 0% 0% 0% nav-index 0% 0% 0% nav-left 0% 0% 0% nav-right 0% 0% 0% nav-up 0% 0% 0% opacity 0% 100% 0% outline-offset 0% 0% 0% rendering-intent 0% 0% 0% resize 0% 0% 0% ruby-align 0% 0% 0% ruby-overhang 0% 0% 0% ruby-position 0% 0% 0% ruby-span 0% 0% 0% CSS 3 Print properties image-orientation 0% 0% 0% page 0% 0% 0% page-policy 0% 0% 0% size (@page) 0% 0% 0% DOM Up DOM is a model that allows scripting languages to handle browser input and output and manipulate information on webpages. This is essential for high-end web applications. This table is in summarized form. View the full tables DOM Feature MSIE 6.0 Firefox 1.0 Opera 8.0 DOM Level 3 Core Interface DOMStringList 0% 0% 100% Interface NameList 0% 0% 0% Interface DOMImplementationList 0% 0% 0% Interface DOMImplementationSource 0% 0% 0% Interface DOMImplementation 40% 80% 70% Interface DocumentFragment 100% 100% 100% Interface Document 36% 76% of 23/28 52% of 26/28 Interface Node 53% 90% of 31/35 69% of 34/35 Interface NodeList 100% 100% 100% Interface NamedNodeMap 61% 100% of 6/9 100% Interface CharacterData 100% 100% 100% Interface Attr 50% 64% 64% Interface Element 33% 71% of 17/21 74% of 17/21 Interface Text 40% 40% 40% Interface Comment 100% 100% 100% Interface TypeInfo 0% 0% 0% Interface UserDataHandler 0% 0% 0% Interface DOMError 0% 0% 0% Interface DOMErrorHandler 0% 0% 0% Interface DOMLocator 0% 0% 0% Interface DOMConfiguration 0% 0% 70% Interface CDATASection 0% 100% 100% Interface DocumentType 0% 86% 86% Interface Notation 0% 0% 0% Interface Entity 0% 0% 0% Interface EntityReference 0% 0% 0% Interface ProcessingInstruction 0% 0% 0% DOM Level 2 Events Interface EventTarget 0% 88% 100% Interface EventListener 50% 50% 50% Interface Event 18% 100% 100% Interface DocumentEvent 0% 100% 100% Interface UIEvent 0% 88% 88% Interface MouseEvent 81% 100% 100% Interface MutationEvent 0% 100% 100% HTML event types 83% 96% 92% DOM Level 2 HTML Interface HTMLCollection 100% 100% 100% Interface HTMLOptionsCollection 75% 100% 50% Interface HTMLDocument 85% 100% 97% Interface HTMLElement 100% 100% 100% Interface HTMLHtmlElement 100% 100% 100% Interface HTMLHeadElement 75% 100% 100% Interface HTMLLinkElement 90% 100% 100% Interface HTMLTitleElement 100% 100% 100% Interface HTMLMetaElement 100% 100% 100% Interface HTMLBaseElement 83% 100% 100% Interface HTMLIsIndexElement 0% 100% 100% Interface HTMLStyleElement 100% 88% 88% Interface HTMLBodyElement 93% 100% 100% Interface HTMLFormElement 95% 95% 100% Interface HTMLSelectElement 97% 100% 100% Interface HTMLOptGroupElement 100% 100% 100% Interface HTMLOptionElement 100% 100% 100% Interface HTMLInputElement 93% 96% 100% Interface HTMLTextAreaElement 100% 100% 100% Interface HTMLButtonElement 94% 100% 100% Interface HTMLLabelElement 100% 100% 100% Interface HTMLFieldSetElement 100% 100% 100% Interface HTMLLegendElement 75% 100% 100% Interface HTMLUListElement 100% 100% 83% Interface HTMLOListElement 100% 100% 100% Interface HTMLDListElement 100% 100% 100% Interface HTMLDirectoryElement 100% 100% 100% Interface HTMLMenuElement 100% 100% 100% Interface HTMLLIElement 100% 100% 100% Interface HTMLDivElement 100% 100% 100% Interface HTMLParagraphElement 100% 100% 100% Interface HTMLHeadingElement 100% 100% 100% Interface HTMLQuoteElement 75% 100% 100% Interface HTMLPreElement 100% 100% 100% Interface HTMLBRElement 100% 100% 100% Interface HTMLBaseFontElement 100% 100% 100% Interface HTMLFontElement 100% 100% 100% Interface HTMLHRElement 100% 100% 100% Interface HTMLModElement 83% 83% 100% Interface HTMLAnchorElement 97% 97% 100% Interface HTMLImageElement 92% 96% 100% Interface HTMLObjectElement 88% 98% 98% Interface HTMLParamElement 80% 100% 100% Interface HTMLAppletElement 92% 100% 100% Interface HTMLMapElement 100% 100% 100% Interface HTMLAreaElement 94% 100% 100% Interface HTMLScriptElement 94% 100% 94% Interface HTMLTableElement 100% 100% 100% Interface HTMLTableCaptionElement 100% 100% 100% Interface HTMLTableColElement 86% 100% 100% Interface HTMLTableSectionElement 88% 100% 100% Interface HTMLTableRowElement 91% 100% 100% Interface HTMLTableCellElement 91% 100% 100% Interface HTMLFrameSetElement 100% 100% 100% Interface HTMLFrameElement 80% 100% 100% Interface HTMLIFrameElement 83% 96% 96% DOM Level 3 Load and Save Interface DOMImplementationLS 0% 0% 100% Interface LSParser 0% 0% 88% of 4/9 Interface LSInput 0% 0% 100% of 1/9 Interface LSResourceResolver 0% 0% ? Interface LSParserFilter 0% 0% ? Interface LSProgressEvent 0% 0% ? Interface LSLoadEvent 0% 0% ? Interface LSSerializer 0% 0% 100% of 1/7 Interface LSOutput 0% 0% 100% of 1/4 Interface LSSerializerFilter 0% 0% ? DOM Level 2 Style Interface StyleSheet 75% 100% 0% Interface StyleSheetList 100% 100% 0% Interface MediaList 0% 100% 0% Interface LinkStyle 0% 100% 0% Interface DocumentStyle 100% 100% 0% Interface CSSStyleSheet 0% 90% 0% Interface CSSRuleList 0% 100% 0% Interface CSSRule 0% 100% 0% Interface CSSStyleRule 0% 100% 0% Interface CSSMediaRule 0% 100% 0% Interface CSSFontFaceRule 0% 0% 0% Interface CSSPageRule 0% 0% 0% Interface CSSImportRule 0% 88% 0% Interface CSSCharsetRule 0% 100% 0% Interface CSSUnknownRule 0% 0% 0% Interface CSSStyleDeclaration 20% 95% 60% Interface CSSValue 0% 0% 0% Interface CSSPrimitiveValue 0% 0% 0% Interface CSSValueList 0% 0% 0% Interface RGBColor 0% 0% 0% Interface Rect 0% 0% 0% Interface Counter 0% 0% 0% Interface ViewCSS 0% 75% 75% Interface DocumentCSS 0% 0% 0% Interface DOMImplementationCSS 0% 0% 0% Interface ElementCSSInlineStyle 100% 100% 100% Interface CSS2Properties 64% 100% 90% DOM Level 2 Traversal and Range Interface NodeIterator 0% 0% 88% Interface NodeFilter 0% 100% of 1/2 100% of 1/2 Interface TreeWalker 0% 69% 73% Interface DocumentTraversal 0% 67% 100% Interface Range 0% 100% of 7/25 100% of 7/25 Interface DocumentRange 0% 100% 100% DOM Level 3 Validation Interface DocumentEditVAL 0% 0% 0% Interface NodeEditVAL 0% 0% 0% Interface ElementEditVAL 0% 0% 0% Interface CharacterDataEditVAL 0% 0% 0% DOM Level 2 Views Interface AbstractView 100% 100% 100% Interface DocumentView 0% 100% 100% ECMAScript Up ECMAScript is a language used to access and work with the DOM. It was developed as a standardized replacement for JavaScript and JScript. This table is in summarized form. View the full tables ECMAScript Feature MSIE 6.0 Firefox 1.0 Opera 8.0 Language constructs Types 100% 100% 100% Basic expressions 100% 100% 100% Unary expressions 100% 100% 100% Math expressions 100% 100% 100% Relational expressions 100% 100% 100% Binary expressions 100% 100% 100% Assignment expressions 100% 100% 100% Statements 100% 100% 94% Objects Global 100% 100% 100% Object 100% 100% 100% Function 100% 100% 100% Array 100% 100% 97% String 100% 100% 100% Boolean 100% 100% 100% Number 100% 100% 100% Math 100% 100% 100% Date 100% 100% 100% RegExp 100% 100% 100% Error 100% 100% 100% Summary Up The following is a brief summary of all of the standards covered by this resource. All minor feature groups (each a row in the above summaries) are given equal weight. Some standards are, in practice, more important than others, although that is not reflected in this summary. Percentages only concern the features tested by this resource. Summary Feature MSIE 6.0 Firefox 1.0 Opera 8.0 HTML HTML 4.01 90% 93% 91% XHTML 1.0 changes 58% 100% 100% XHTML 1.1 changes 46% 47% 24% CSS CSS 2.1 Units 55% 59% 77% CSS 2.1 Importance 50% 100% 100% CSS 2.1 At-rules 63% 75% 100% CSS 2.1 Selectors 36% 100% 100% CSS 2.1 Pseudo-classes 29% 100% 86% CSS 2.1 Pseudo-elements 25% 100% 100% CSS 2.1 Basic properties 60% 92% 98% CSS 2.1 Print properties 29% 29% 88% CSS 2.1 Voice properties 0% 0% 40% CSS 2.1 Conformance 43% 71% 71% CSS 3 Units 19% 20% 20% CSS 3 At-rules 0% 0% 10% CSS 3 Selectors 0% 100% 0% CSS 3 Pseudo-classes 0% 22% 0% CSS 3 Pseudo-elements 0% 0% 0% CSS 3 Basic properties 4% 7% 7% CSS 3 Print properties 0% 0% 0% DOM DOM Level 3 Core 26% 40% 45% DOM Level 2 Events 29% 90% 91% DOM Level 2 HTML 92% 99% 98% DOM Level 3 Load and Save 0% 0% 97% DOM Level 2 Style 17% 57% 12% DOM Level 2 Traversal and Range 0% 66% 92% DOM Level 3 Validation 0% 0% 0% DOM Level 2 Views 50% 100% 100% ECMAScript Language constructs 100% 100% 99% Objects 100% 100% 100% Total HTML 85% 91% 87% CSS 33% 58% 62% DOM 48% 68% 66% ECMAScript 100% 100% 100% About other browsers Up I am currently in the process of testing other browsers and versions, including Konqueror 3.4 and older versions of Internet Explorer, Netscape, and Opera. Unfortunately, I currently don't have access to a Macintosh, so I cannot test browsers specific to Macintosh operating systems. Much of Safari's code is based on Konqueror's rendering engine, so results should be similar. Other web browsers may be considered for future inclusion. If you would like to suggest a web browser or help collect data for any web browser not shown here, please post the relevant information in the discussion forums. | ||||
| |
| | #3 |
| | |||||
| Title: Guest Posts: n/a | Need help learning CSS Level 2? check out this link "Click Me" W3C's index for CSSW3C's explanation Wan't your CSS syntax checked for errors? Submit your CSS files here CSS Validator | ||||
| |
| | #4 |
![]() |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
| |
Similar Threads | ||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| [phpBB News] phpBB 3.0 Beta4 released | Industry News | phpBB | 8 | 01-17-2007 04:29 AM |
| [phpBB News] phpBB 3.0 Beta3 released | Industry News | phpBB | 7 | 11-16-2006 08:07 PM |
| Reseller hosting with END USER support | James-A | Buy and Sell | 0 | 09-09-2006 01:08 PM |
| Instant Replies :: Live Support | Instant Replies | Buy and Sell | 0 | 05-30-2006 09:02 PM |
| Using a Different Browser to Webmaster? | gprime | Off Topic | 0 | 02-12-2006 06:11 AM |
