Give your dull CSS reset stylesheet a facelift

Posted by Zak under Design

If you’ve ever built a website from scratch, no doubt you’ve had to subdue the erratic browser beast with a reset stylesheet. The majority of these stylesheets in use are pre made, garden-variety templates downloaded from the YUI library or copied from other sites.

Reset stylesheets can be more than a bunch of hacks setup to fix a website layout. They can also provide a set of easily accessible classes for editing content as well as enhance the user experience without cluttering up your primary stylesheet.

Recently, we’ve been drastically cleaning up our reset CSS to add functionality and makeover elements so I thought I’d share a few ideas.

Antialiasing

* {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

Font smoothing works in Firefox, Opera, Safari and any other webkit-supported browsers. You’re given 3 options for rendering text - none, subpixel-antialiased and antialiased. Most browsers render the text subpixel-antialiased but I find antialiased makes it a bit clearer. Tiny text smaller than 6px or so will look crisper if you change font-smoothing to none.

Text Selection

Typographic refinement never goes astray in web design. Surprise visitors when they select a paragraph of text with styled text selection.

::selection {
background: #000;
color: #fff;
}

::-moz-selection {
background: #000;
color: #fff;
}

The ::selection property enables the styling for Safari and Chrome whereas ::-moz-selection targets Firefox. The downside is your IE buds still won’t see this cool effect but no doubt they’re used to missing out.

Transitions

Add a transition time to all links and hoverable items to give the site an elegant, modern look.

a, img {
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
transition: all 0.15s ease;
}

This amazing snippet of markup can be used to brighten any element without the use of JavaScript. You have heaps of transitional options as well as control of the duration. Apply this effect to your site’s main menu and users will have to right-click to make sure it wasn’t built in Flash.

Commenting

It’s surprising how many web designers leave reset stylesheets completely uncommented. Your CSS will look more well-kept if you bring over the comment tags from your main stylesheet.

Positioning

One thing I’ve learnt on the job is to use quick-reference positional classes to save time when writing markup. Here are a few examples.

.left {
float: left;
}

.right {
float: right;
}

.clear {
clear: both;
}

.center {
text-align: center;
}

Now you can quickly apply a float, a clear or align text by simply adding a class to a HTML element. I wouldn’t go overboard with this as you don’t want to clutter up your now well-structured reset stylesheet.

By adding default classes and modern browser styling, you’ll turn your dull reset CSS will into a simple style guide.