CSS3 in All Browsers – Rounded Corners, Drop Shadows, Glows and Gradients

CSS3 supports a bunch of nice new CSS features, including rounded corners, drop shadows, glows, and gradients. However, different CSS vendors will use different prefixes to standard CSS3 features while still in an ‘experimental’ stage. This means you need multiple lines to accomplish the one CSS feature, to target all the different browsers. Below is a bunch of CSS that will give you these CSS features in as many browsers as possible (yes, including older versions of IE).

(more…)

Best Clearfix for All Browsers (IE6+)

Gone are the days of putting your clearfix as a separate div, this is the simplest CSS clearfix that works in all browsers (including IE6).

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

How to Use It

Say we have some HTML that looks like this:

<div id="container">
    <div class="floated">content</div>
    <div class="floated">content</div>
    <div class="floated">content</div>
</div>

clearfix-pre-group

The problem is easy to see – the #container isn’t wrapping around the floated elements. Why? Floated elements are removed from the normal flow of the document, so the #container doesn’t know they are there. To fix this, we can add in our .group clearfix to the #container.

<div class="group" id="container">
    <div class="floated">content</div>
    <div class="floated">content</div>
    <div class="floated">content</div>
</div>

clearfix-post-group

And voilà, our #container now wraps around our floated elements.

Thanks to Nicholas Gallagher for this great clearfix.