Avoid CSS hacks for internet explorer 6 (ie6) by using selectors

Is a common practice to use CSS hacks in order to assign specif stylesheet to internet explorer 6, like:

<!--[if IE6]>
    <link rel="stylesheet" type="text/css" href="ie6fix.css" />
<![endif]-->

However we can avoid extra CSS files (for internet explorer 6) by assign first all the necessary properties for it, an then reassign them for others modern browsers (firefox, safari, opera and ie7) . For example:

div.mydiv {
    padding: 5px;
    position: absolute;
    top: 5px; /* this should be 3px except ie6 */
    right: 10px; /* this should be 7px except ie6 */
}

/*
redefine the properties for all browser that
support CSS selectors (not ie6!)
*/
div[class~="mydiv"] {
    top: 3px;
    right: 7px;
}

It’s important to notice that we should use the “contains” selector (~=), in order to work even if the div into the page as several CSS classes applied (like <div class=”mydiv customer_info”>).