| Although the CSS1 specification was completed in | | | | as judged by World Wide Web Consortium |
| 1996, and Microsoft's Internet Explorer 3 was | | | | standards. |
| released in that year featuring some support for | | | | Problems with browsers' patchy adoption of CSS |
| CSS, it would be more than three years before any | | | | have led the W3C to revise the CSS2 standard into |
| web browser achieved near-full implementation of | | | | CSS2.1, which may be regarded as something nearer |
| the specification. | | | | to a working snapshot of current CSS support in |
| Internet Explorer 5.0 for the Macintosh, shipped in | | | | HTML browsers. CSS2 properties which no HTML |
| March of 2000, was the first browser to have full | | | | browser had successfully implemented were dropped, |
| (better than 99 percent) CSS1 support, surpassing | | | | and in a few cases, defined behaviours were |
| Opera, which had been the leader since its | | | | changed to bring the standard into line with the |
| introduction of CSS support fifteen months earlier. | | | | predominant existing implementations. CSS2.1 became |
| Other browsers followed soon afterwards, and many | | | | a Candidate Recommendation on February 25, 2004; |
| of them additionally implemented parts of CSS2, | | | | but was pulled back to Working Draft on June 13, |
| though as of 2006, no browser has achieved full | | | | 2005 to fix various issues (in some cases, to match |
| implementation of CSS2. | | | | more closely to browser implementation). |
| Properties specific to aural and paged media remain | | | | Most problems attributed to CSS are actually results |
| the least well supported. | | | | of browser bugs or lack of support for CSS features. |
| Because early browsers such as Internet Explorer 3 | | | | The most serious offender among current browsers |
| and 4 and Netscape 4.x had support for CSS that | | | | is Microsoft Internet Explorer, whose version 6 lacks |
| was patchy and full of bugs, the presence of a | | | | support for about 30 percent of CSS2 properties, |
| decreasing but still significant number of users of | | | | and, more significantly, misinterprets a significant |
| these old browsers, even many years after they had | | | | number of important properties, such as "width", |
| become obsolete, was an important factor in | | | | "height", and "float". |
| preventing designers from adopting CSS in the early | | | | Selectors are unable to ascend CSS offers no way |
| days. | | | | to select a parent or ancestor of element that |
| When later more modern 'v5' browsers eventually | | | | satisfies certain criteria. A more advanced selector |
| began to offer a fairly full implementation of CSS, | | | | scheme (such as XPath) would enable more |
| many of their implementations of CSS were still | | | | sophisticated stylesheets. |
| incorrect in certain areas, and were fraught with | | | | One block declaration cannot explicitly inherit from |
| inconsistencies, bugs and other quirks. The | | | | another Inheritance of styles is performed by the |
| proliferation of such CSS-related browser bugs, quirks | | | | browser based on the containment hierarchy of DOM |
| and inconsistencies, and the variation in feature | | | | elements and the specificity of the rule selectors, as |
| support in CSS implementations has made it difficult | | | | suggested by the section 6.4.1 of the CSS2 |
| for designers to achieve a consistent appearance | | | | specification [2]. Only the user of the blocks can |
| across platforms. Because of these problems, authors | | | | refer to them by including class names into the class |
| have commonly had to resort to using CSS hacks | | | | attribute of a DOM element. |
| and workarounds, and CSS filters in order to obtain | | | | Vertical control limitations While horizontal placement |
| consistent results across web browsers and | | | | of elements is generally easy to control, vertical |
| platforms. | | | | placement is frequently unintuitive, convoluted, or |
| A 'CSS filter' is a coding technique that aims to | | | | impossible. Simple tasks, such as centering an element |
| effectively hide or show parts of the CSS to | | | | vertically or getting a footer to be placed no higher |
| different browsers, either by exploiting CSS-handling | | | | than bottom of viewport, require complicated and |
| quirks or bugs in the browser or by taking advantage | | | | unintuitive code. |
| of lack of support for parts of the CSS specifications. | | | | Absence of expressions There is no ability to specify |
| Using CSS filters, some designers have gone as far | | | | property values as simple expressions (such as height: |
| as delivering entirely different CSS to certain | | | | 100% - 3em + 4px;). However, that can be achieved |
| browsers in order to ensure that designs are | | | | by, height: 100%; margin: -1.5em 0; padding: 2px 0;. |
| rendered as expected. Because very early web | | | | Lack of orthogonality Multiple properties often end up |
| browsers were either completely incapable of | | | | doing the same job. For instance, position, display and |
| handling CSS, or render CSS very poorly, designers | | | | float specify the placement model, and most of the |
| today often routinely use CSS filters that completely | | | | time they can't be combined meaningfully. A display: |
| prevent these ancient browsers from 'seeing' any of | | | | table-cell element cannot be floated or given position: |
| the CSS. For example, CSS filters are very often put | | | | relative, and an element with float: left should not |
| in place to exclude Netscape 4.xx and Internet | | | | react to changes of display. |
| Explorer 4, ensuring that only more recent 'v5' | | | | Unexpected margin collapsing Margin collapsing is |
| browsers 'see' the CSS. | | | | frequently not expected by authors, and no simple |
| An example of a well-known CSS browser bug is the | | | | side-effect-free way is available to control it. |
| Internet Explorer box model bug, where box widths | | | | Float containment CSS does not explicitly offer any |
| are interpreted incorrectly in several versions of the | | | | property that would force an element to contain |
| browser, resulting in blocks which are too narrow | | | | floats. Multiple properties offer this functionality as a |
| when viewed in Internet Explorer, but correct in | | | | side effect, but none of them are completely |
| standards-compliant browsers. The bug can be | | | | appropriate in all situations. |
| avoided in Internet Explorer 6 by using the correct | | | | Lack of multiple backgrounds per element Highly |
| doctype in (X)HTML documents. CSS hacks and | | | | graphical designs require several background images |
| filters are used to compensate for bugs such as this, | | | | for every element, and CSS can support only one. |
| just one of hundreds of CSS bugs that have been | | | | Therefore, developers have to choose between |
| documented in various versions of Internet Explorer, | | | | adding redundant wrappers around document |
| Netscape, Mozilla, and Opera. | | | | elements, or dropping the visual effect. |
| Even when the availability of CSS capable browsers | | | | This is addressed in the working draft of the CSS3 |
| made CSS a viable technology, the adoption of CSS | | | | backgrounds module but widespread implementation |
| was still held back by designers' struggles with | | | | is unlikely for several years yet. |
| browsers' incorrect CSS implementation and patchy | | | | Inability of children to override some properties set |
| CSS support. Even today, these problems continue to | | | | on a parent This problem affects publishing sites |
| make the business of CSS design more complex and | | | | where portions of the same page are often written |
| costly than it should be, and cross-browser testing | | | | by different vendors. For instance, if one individual |
| remains a necessity. Other reasons for continuing | | | | sets overflow:hidden on one element, this can't be |
| non-adoption of CSS are: its complexity, inertia and | | | | overridden within a child element. Although this makes |
| authors' lack of familiarity with CSS and required | | | | sense in a single-author environment, this can |
| techniques, poor support from authoring tools, the | | | | negatively affect a multi-author environment where |
| risks posed by inconsistency between browsers and | | | | most of the content should be contained, but there's |
| the increased costs of testing, and less frequently a | | | | a menu that, by design, has to escape out of |
| requirement to deliver consistent appearance even to | | | | container. Being able to explicitly set an override in a |
| users of ancient non-CSS-capable browsers. | | | | case like this would be useful, since the only way to |
| Currently there is strong competition between | | | | do this currently is by using Javascript to manipulate |
| Mozilla's Gecko layout engine, Opera's Presto layout | | | | the DOM. Another example is not being able to |
| engine, and the KHTML engine used in both Apple's | | | | override relatively positioned parents set by a |
| Safari and KDE's Konqueror browsers - each of them | | | | different vendor on the same page, so that the |
| is leading in different aspects of CSS. As of 2006, | | | | absolutely positioned child elements are not appearing |
| Internet Explorer remains the worst at rendering CSS | | | | in the correct location. |