Workarounds and Filters

The art of selectively applying CSS to specific browsers probably began
with the exclusion of Netscape Navigator 4. It was discovered that if you
used a media value of anything except
"screen" on a style sheet link
element, Netscape 4 would ignore the style sheet. At the time, it was
considered safer to avoid attempting to apply CSS to Netscape because it
was so buggy that the CSS was likely to crash the browser.

Not long after that, it was discovered that Netscape didn’t support the
@import at-rule. Simply using @import
url(styles/main.css);
achieved the same result and had the added
benefit of excluding all other browsers that provided poor CSS support,
like Internet Explorer 4. Thus the concept of filtering out browsers
through the use of more advanced CSS features gained popularity.

Before you dive into CSS filtering, however, you should take a
considered approach to dealing with CSS rendering problems:

  1. Ensure your CSS validates. CSS validation ensures a reliable
    baseline for dealing with CSS issues. Otherwise, you could waste you
    time chasing phantoms that turn out merely to be syntax errors.
  2. Check the specifications. Make sure you’re not imagining problems
    that don’t exist. Some concepts like the box model, positioning, and
    floats are more complex than people realize, and problems may simply
    arise from incorrect assumptions about how CSS is supposed to work. This
    reference is an excellent place to start your research.
  3. Check browser behavior. All browsers have CSS problems of one
    kind or another. What you’re experiencing may be a rendering quirk or a
    bug. Researching the reason why the problem is occurring will better
    enable you to deal with it now and in the future. Web sites like Position Is Everything and the Quirksmode Bug Report are great
    resources.

Searching for a Workaround

Once you’ve been
through that process, and have confirmed that yours is indeed a
browser-related problem, your next step should be to search for a known
workaround. Many CSS problems can be solved by adjusting your HTML markup
or CSS. For example, a lot of Internet Explorer rendering quirks can be
solved by either enabling or disabling the proprietary
hasLayout property of a given element through the
setting of specific CSS properties—read more about the topic in The Internet Explorer hasLayout Property. Again, the web sites mentioned above, Position Is
Everything and the Quirksmode Bug Report, are a great place to start this
research as they often document usable workarounds for various
problems.

Applying a CSS Filter

If no usable workaround
exists for your problem, you may have to resort to applying a different
set of rules for a specific browser. You may be able to use a CSS feature
that’s not supported by all browsers in order to direct CSS rules to
particular browsers—a technique that’s often referred to as using a
CSS filter. In doing this, you’re exploiting the
feature of CSS error handling that
specifies that user agents must ignore statements and declarations they
don’t understand.

Using a child
selector
is another common example of this kind of filtering
technique. The child selector is 100% valid CSS—it’s only a filter in the
sense that it’s only supported by modern web browsers. Internet Explorer
versions prior to 7 have not implemented this feature, so it’s a useful
way to hide CSS rules from Internet Explorer 6 and earlier versions. The
child selector is commonly used like this:

#test{
  position: absolute;
}
html>body #test{
  position: fixed;
}

The filter above is designed to address the fact that Internet
Explorer 6 and earlier versions don’t support the value of
fixed for the position property.
These browsers will only set the position of the
#test element to absolute, and will
ignore the second rule. Meanwhile, virtually all other modern browsers
will set #test’s position to
fixed, because they apply the second rule and
overwrite the property.

Though filters can work, you should be wary
of rewriting CSS rules for good browsers in order to avoid problems with
bad browsers—it just doesn’t seem to be the right thing to do. It’s
preferable to target problematic browsers and keep your style sheets
uncluttered.

Original Source

Advertisements
By routhu Posted in CSS Tagged