Using CSS Frameworks to Remove X-Browser Variations

There is a lot of hype on the web right now around CSS Frameworks; a lot like there used to be around JavaScript Frameworks, before they became so popular. It is important to understand what they are and why they will (or will not) be helpful to you.

What is a CSS Framework

“[A CSS Framework is] a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.” from [Framework For Designers, by Jeff Croft]

That is a lofty goal and I believe that most CSS Frameworks endeavor to simplify your life. However, I do not think they usually do. Where CSS Frameworks excel is normalizing styles, especially x-browser variations and typography. Where they fail (or become cumbersome) is when they try to do too much such as: every layout under the sun, rigid design, large code-bases (bloating), etc. If a Framework does too much, then you end up needing to learn what it is doing and why, and without prolific commenting CSS can quickly become confusing and you wonder why a particular property might be necessary.

Despite the downsides, I recommend using a Framework, or at least part of a Framework. The most important effect from using a Framework is reseting browser specific styles, so that 1 stylesheet can be used for all browsers, instead of 1 stylesheet for each browser (or worse, a bunch of browser specific hacks). Most commonly, the browser variations are the default ways they apply padding, margins, and/or fonts to elements.

I personally, never use a complete Framework, because I prefer to have control over my layout and typography, but I always use a CSS Framework to reset browser styles. If you are not a designer and need a quick solution, or find CSS Frameworks helpful, then you should leverage them. Here are the few that I modeled my "reset.css" stylesheet from, which I use as a foundation for all my projects (and hopefully, on this blog as soon as I get some free-time):

  • Tripoli: tries to remain simple by mostly just resetting styles, but also applies some optimal changes to typography and layout
  • YAML: very well documented, multi-column layout builder with all the bells and whistles
  • YUI : lots of layout variety and optimized for integration with the YUI JavaScript Library

Smashing Magazine also wrote a great article about this topic where they cover more details about each CSS Framework listed here, and several others.

Normally, I would probably taut how much I like what YUI has done, but not this time. Although, I do really like their "reset.css", I find the rest of the Framework to be heavy-handed, with too many options and not enough documentation. Also, the Framework includes styles for some parts of the JS Framework that I do not use. YAML, does a great job, but has a lot of options and extra features that you probably wont leverage. Tripoli, has the simplest and most unobtrusive styles, and if I was to just to throw a Framework onto a site without modifying it, I would use this one.

In the end I just wanted a set of styles to reset browser specific formatting, and I modeled this by looking at the afore mentioned Frameworks:

 * Copyright (c) 2007, Matt Snider, LLC. All rights reserved.
 * version: 1.0.0

/* remove default element padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;

/* default color scheme */
html body {
	background: #fff;
	color: #000;

/* remove borders and possible underlining */
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet {
	border: none;
	font-variant: normal;

/* remove stylized font-variations */
address, caption, cite, code, dfn, em, strong, th, var, i, b {
	font-style: normal;
	font-weight: normal;

/* table and center elements should always be top left aligned */
caption, th, td, center {
	text-align: left;
	vertical-align: top;

q:before, q:after {
	content: &rsquot;;

/* remove cellpadding and cellspacing */
table {
	border-collapse: collapse;
	border-spacing: 0;

/* clear possible list-styles; should override in design */
ul, ol, dir, menu, li {
	list-style: none;

/* clear possible heading styles; should override in design */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;

/* prevent default browser coloring of links */
a { color: inherit; }

/* reset position of sup and sub */
sup, sub {
	vertical-align: text-top;

/* clear form field font settings */
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;

This is available for download at

What does this have to do with JavaScript

JavaScript and CSS are closely linked, especially when you consider animation and all the times you have to apply a style on the fly. It is important for JavaScript developers to understand CSS and it is also important that when they apply a style to an element, that element behaves as expected in all browsers. This blog will continue to focus on JavaScript, but every couple weeks, I will write a something important about CSS so we address more complex issues and widgets involving CSS and JavaScript.