Useful CSS snippets

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

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.

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

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

Border radius

Both Safari 5 and the latest Chrome support border-radius, given the fast update curves for these browsers, I have stopped using -webkit-border-radius, and almost always default to the useful shorthand (older versions of iOS are a known caveat).

border-radius can now be used without a vendor prefix. 
border-radius: 10px 0 0 10px;

Tweaked clearfix

I still see a lot of sites using the old clearfix, including IE for Mac hacks. I’ve cleaned this up a bit and moved the IE specific parts into conditional IE stylesheets. For lists, I found I often need to clear each li, to save littering 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 containers to have the same height. If you are unfamiliar with this technique, I recommend reading Ed Eliot’s article.

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

Ligatures and kerning pairs

Where fonts support it, text rendering can be improved by enabling kerning pairs and ligature support. Add the following to your body to enable it on all text:

text-rendering: optimizeLegibility;

Firefox’s default state (text-rendering: auto) partially enables this, optimising 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 available at MDC, as pointed out in the comments by rdela.

Gradients

An invaluable tool for avoiding images and extra HTTP requests. For the most part I avoid providing fallback images, instead seeing gradients as a progressive enhancement. This usually means Opera and FF3.5 or less will see a solid colour, I’m fine with that.

Webkit’s gradient syntax has been updated to match the emerging standard. 
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 conditional stylesheets:

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