Useful CSS snippets

A quick round-up of some CSS tricks I use on my sites.

Reset input type search

Safari ren­ders search inputs with curved cor­ners and a spy glass. If this doesn’t fit into your design, but you want to retain cor­rect seman­tics, this reset is help­ful. The first line removes the curved cor­ners, but leaves a white space where the spy glass was, this is removed using the sec­ond line.

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

Bor­der radius

Both Safari 5 and the lat­est Chrome sup­port border-radius, given the fast update curves for these browsers, I have stopped using -webkit-border-radius, and almost always default to the use­ful short­hand (older ver­sions of iOS are a known caveat).

border-radius: 10px 0 0 10px;

Tweaked clearfix

I still see a lot of sites using the old clearfix, includ­ing IE for Mac hacks. I’ve cleaned this up a bit and moved the IE spe­cific parts into con­di­tional IE stylesheets. For lists, I found I often need to clear each li, to save lit­ter­ing the HTML with class names, I added clearfixItems li, now I only need one class on the ul or ol.

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

Then in IE6 and IE7:

.clearfix, .clearfixItems li {
zoom: 1;
}

Equal height columns

For when you want your con­tain­ers to have the same height. If you are unfa­mil­iar with this tech­nique, I rec­om­mend read­ing Ed Eliot’s arti­cle.

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

Lig­a­tures and kern­ing pairs

Where fonts sup­port it, text ren­der­ing can be improved by enabling kern­ing pairs and lig­a­ture sup­port. Add the fol­low­ing to your body to enable it on all text:

text-rendering: optimizeLegibility;

Firefox’s default state (text-rendering: auto) par­tially enables this, opti­miz­ing leg­i­bil­ity on font sizes above 20px (surely leg­i­bil­ity is most impor­tant on the small­est text?). Using the above code will opti­mize all font sizes, more details are avail­able at MDC, as pointed out in the com­ments by rdela.

Gra­di­ents

An invalu­able tool for avoid­ing images and extra HTTP requests. For the most part I avoid pro­vid­ing fall­back images, instead see­ing gra­di­ents as a pro­gres­sive enhance­ment. This usu­ally means Opera and FF3.5 or less will see a solid colour, I’m fine with that.

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

And in IE con­di­tional stylesheets:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc0000, endColorstr=#990000);