CSS filters allow hiding or showing CSS based on browser capabilities. Conditional comments and browser prefixes are techniques used to target specific browsers. Examples target Internet Explorer, Firefox, Chrome/Safari, and Opera using conditional comments, proprietary extensions like -moz, and media queries with the -webkit prefix or negation.

2. A CSS filter is a coding technique used to hide or
show CSS markup depending on the browser, version
number, or capabilities. Browsers have different
interpretations of CSS behavior and different levels of
support for the W3C standards. CSS filters are
sometimes used to achieve consistent layout
CSS appearance in multiple browsers that do not have
Hacks?
compatible rendering.

3. The easiest way to target IE is with conditional comments. There is a
robust syntax that Microsoft has created to allow authors to do this. Here
are two alternatives to parser CSS hacks only for IE:
<!--[if IE 7]>
<style type="text/css">
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
</style>
<![endif]-->

4. The first hack targets only Firefox 1 and 2 by using the body:empty hack. The
second hack, which is quite clever target all versions of Firefox by using the
proprietary extension -moz. -moz combined with the -document url-prefix()
which by the way is used by Firefox Addon creators targets Firefox and
Firefox alone. By using proprietary extensions to CSS, as hacks, usually
means the most surefire way to target individual browsers without having to
worry about another browser possibly parsing the CSS.
/* Firefox 1 - 2 */
body:empty #firefox12
{
color:blue;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { color:blue; }
}

5. The Chrome CSS hack works similar to the Safari hack. By using the -webkit
prefix we can target Chrome and Safari both as the both browsers have
similar features.
/* Chrome and safari */
body:nth-of-type(1) .chrome{
color:#ff0000;
}
OR
/* Chrome and safari */
@media screen and (-webkit-
min-device-pixel-ratio:0)
{
#safari { color:blue; }
}

6. The Safari CSS hack works similar to the Firefox hack because it uses a
Safari proprietary extension to CSS. By using the -webkit prefix we can
target Safari and only Safari.
/* Safari */
@media screen and (-webkit-
min-device-pixel-ratio:0)
{
#safari { color:blue; }
}
OR
body:first-of-type(1) .safari{
color:#ff0000;
}

7. The Opera CSS hack works because of negation in CSS. This targets
ALL browsers that support -min-device-pixel-ratio that aren't -webkit. It
will only be a matter of time before Firefox supports this and this hack
will then most likely apply to Firefox as well.
/* Opera */
@media all and (-webkit-min-
device-pixel-ratio:10000), not
all and (-webkit-min-device-
pixel-ratio:0)
{
head~body #opera {
color:blue; }
}

8. CSS Hacks: different kinds
Conditional comments are conditional statements interpreted by
Microsoft Internet Explorer in HTML source code. Conditional
comments can be used as a CSS hack by including links to
Conditional stylesheets based on the layout engine.
comments
CSS browser prefixes are a way for browser makers to add
support for new CSS features in a sort of testing and
experimentation period. Browser prefixes are used to add new
Browser features that may not be part of a formal specification and to
implement features in a specification that hasn’t been finalized.
Prefixes

9. http://www.dynamicsitesolutions.com/css/filters/first-child-plus-html/
http://bgsserver.com/css-hacks/
Examples

10. Any questions?

11. Thank you