useful CSS snippets

equal height columns

.col {
margin-bottom: -1000px;
padding-bottom: 1000px;
}

For when you want your containers to have the same height. If you are unfamiliar with this technique, I recommend reading Ed Eliot’s article: http://www.ejeliot.com/blog/61

gradients

background: #990000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cc0000), to(#990000));
background: -moz-linear-gradient(#cc0000,#990000);

/* And (optionally) for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc0000, endColorstr=#990000);

ligatures and kerning pairs

text-rendering: optimizeLegibility;

Firefox’s default state (text-rendering: auto) par tially enables this, optimizing legibility on font sizes above 20px (surely legibility is most important on the smallest text?). Using the above code will optimize all font sizes, more details are avail able at MDC: https://developer.mozilla.org/en/CSS/text-rendering

reset input type search

input[type=search] {
-webkit-appearance: none;
}
input[type=search]::-webkit-search-decoration {
display: none;
}

Safari renders search inputs with curved corners and a spy glass. If this doesn’t fit into your design, but you want to retain correct semantics, this reset is helpful. The first line removes the curved corners, but leaves a white space where the spy glass was, this is removed using the second line.

tweaked clearfix

.clearfix:after,.clearfixItems li:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* And for IE6 and IE7 */
.clearfix, .clearfixItems li {
zoom: 1;
}