Chris Wallace » Tips & Tutorials

Fix Cufon Flash of Unstyled Content

Chris — Sat, 25 Jul 2009 05:35:00 +0000

Whenever I’ve used cufón, I’ve ALWAYS experienced a FOUC, otherwise known as a Flash of Unstyled Content. If you are experiencing the same issue, then this fix is definitely going to make you happy. I must give credit for the fix to Rogie King who worked it out like Jane Fonda in the 80s.

Just under the opening tag, you should add the following line of CSS, making sure to specify the items you are styling via cufón:

Then at the very bottom of the document, before the closing tag, you should call Cufón, then show the stuff you were hiding before:

Remember to replace “h1,h2,h3″ with the elements you are styling via javascript. And boomshakalaka. You’re done! No more FOUC. Tell your friends. Or don’t, they will be super-jealous.

Elsewhere on the Web: Flippin’ Pixels with Pixelflips.com

Chris — Fri, 15 May 2009 01:32:41 +0000

From time-to-time I write for other blogs on the interwebs. Most recently I’ve been writing design critiques on PleaseCritiqueMe.com, a design critique blog that helps mentor other designers by addressing flaws and offering expert advice for websites that have asked for another opinion. The most recent critique I’ve written is on PixelFlips.com, the web design shop of Phillip Lovelace, a designer from the US, now living in Germany.

Why IE6 Update is a Terrible Idea

Chris — Wed, 13 May 2009 14:49:12 +0000

By now, you’ve probably seen IE6 Update, which is a javascript file you can include on your site that provides IE6 users with a message that appears to be a system or browser toolbar that provides users with critical information and a link to a required update (really it is just a link to download the latest IE browser). Recently Paul Boag recorded a short rant on AudioBoo which was very politely disagreed with by a user named Japh who believes the tactic is perfectly acceptable.

My Official Position on IE6

As for my official position on IE6, I hate it and agree with my bud Rogie, who coined the phrase “IE6 is a bag of smashed buttholes.” I hate having to fix or disable functionality for the sake of “making it work in IE6″ and I definitely would rather spend that time playing SimCity for iPhone (which rocks, by the way).

However, for certain websites with certain audiences, it is entirely necessary to make fixes for IE6. Some have taken the approach of cursing at and verbally assaulting users of IE6 and some make use of the ever-popular “display: none” stylesheet targeted at IE6 with conditional comments.

What’s wrong with IE6Update?

For starters, using IE6 Update violates your user’s trust. By presenting what appears to be a security information box that looks just like a standard browser message, you are trying to trick your users into thinking there is a mandatory system update or immediate security risk (which truly can be said of any user running IE6, but that’s not something this post will cover).

In addition, most IE6 users are well aware their browser is completely incapable, sad, and pathetic. They don’t need you, a pretentious browser elitist, pushing a standards-compliant browser like Firefox or Safari down their throats. For the most part, they know IE6 sucks. In most cases, they literally have no other option due to being a corporate user with a locked down PC or laptop provided to them by their company.

The Right Approach

For some, developing for IE6 doesn’t make a lot sense. If your audience is mainly tech-savvy folks who own multiple computers, own an iPhone, and drink Starbucks twice a day, odds are you can ignore IE6 and focus on providing the best possible web product to the users who make up your target audience (which you should be doing anyway, even with IE6 thrown into the mix).

However, I think anyone who ignores analytics data and says “screw IE6″ without even considering the potential impact on metrics and user experience is an idiot.

That being said, I very strongly feel IE6 Update violates your users’ trust, dangles the inability to update to a newer browser in the faces of corporate users, and generally takes the focus away from the content of your website and the purpose of the user’s visit. This is a branding issue more than anything. As a consumer, my question would be this: “If your company/website is willing to deceive me for the sake of a more functional web page, what are you willing to do to make money?”

Introducing Cufón, a Font Replacement Solution

Chris — Mon, 23 Mar 2009 21:46:40 +0000

If you’re like me, you probably have been searching for a solid web font replacement technique which avoids replacing text with images or utilizing both Flash AND Javascript. In a nutshell, web font replacement aims to allow web designers to replace standard web fonts on a website with any font you can imagine while keeping your markup semantically meaningful, accessible, without ballooning page load times. There are few good alternatives out there but most require Flash and JavaScript. The problem with that is requiring an end user to have BOTH Flash and Javascript installed and turned on.

Enter Cufón, the Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there – no Flash or images required. As with any of these solutions, there are some notable advantages and disadvantages, however, it’s ease of use is what really blows me away.

Five Easy Steps to Getting Started with Cufón

Grab and upload the Cufón javascript from the Cufón website.
Generate a font on this page. You can add a bold and italicized version of your font if you plan on using them.
Add the following Javascript to your section and make sure to add the elements you plan to prettify:
```
Cufon.DOM.ready(function() {
  Cufon.replace('h1');
});
```
To take care of multiple elements with the same font, use this code, adding the elements you need with CSS selectors:
```
Cufon.DOM.ready(function() {
  Cufon.replace('h1,h2,#header-nav li');
});
```
In IE, there will be a short but noticeable delay between the old font being flashed and the new font replacing it. To fix this (optional), add the following line of code just before the closing tag.
Test everything!

If you’d like to see some test pages, Cameron Moll has written an article on Cufón and graciously built a set of pages that show a few ways to implement Cufón here.

Using Multiple Fonts

Cufón also has support for multiple fonts. Just generate the fonts you need using the link I provided earlier, modify the code below and off you go! It really is that easy! Sample shown below is from the Cufón GitHub wiki, which has more details on Cufón usage.



    
        
        
        
        
        
    
    
        This text will be shown in Frutiger LT Std.
        This text will be shown in Myriad Pro.

Issues with Cufón

As Cameron Moll points out, there are some issues with using Cufón on a live site, the most notable being the inability to highlight and copy/paste text, which is really the biggest issue for your site’s users.

Combine that with the EULA issues, which prevent you from being able to legally embed fonts in Javascript files for most fonts on the market today. I’ll come back to this issue in just a bit.

Making Progress

An issue which was recently fixed is the ability to use hover states. For performance reasons, :hover is not enable by default. To enable :hover, you need to use the following code:

Cufon.replace('h1', {
	hover: true
});

The default only turns :hover on for links. If you’d like to use it for other elements, you need to specify which elements to add support for:

Cufon.replace('h1', {
	hover: true,
	hoverables: { strong: true, em: true }
});

Pretty simple to implement and it picks up on the :hover styles you’ve added to the elements that have :hover support enabled. There are a few issues though, with the lack of text-decoration support being the big one. I haven’t tested this, but border-bottom should be a viable alternative to text-decoration.

My Thoughts

I’ve started using Cufón on a site that has not yet been released (UPDATE: I’ve implemented it on this site, as well) and I have been very pleased with it so far. It’s extremely easy to set up and use and looks very smooth. One thing I’ve noticed is there is typically a slight fuzziness around the edges of the font. I’m assuming this is due to the units per em, which should typically be set to around 360 units per em when you generate fonts for your own usage.

The other issue is knowing what fonts can be used with Cufón. For sIFR, most fonts are fair game, since the font is embedded in a Flash movie, which is typically an approved usage by most font foundries for most fonts. With Cufón, the Javascript files used for the font can be easily “stolen” and either used on another website or reverse engineered. This issue is the big stumbling block preventing Cufón from being dubbed the font replacement solution of the future (which I think it is). Once font foundries get on board with this solution, Cufón will easily be my method of choice for replacing boring, old web fonts with an assortment of beautiful, non-standard fonts.

A Crash Course in Becoming a (Successful) Web Designer

Chris — Thu, 12 Feb 2009 13:06:47 +0000

Layout, typography, and color all combine to make a great design.

You know, everyone has the moment in their life where they realize what they want to be. For me, it was a natural progression. My love for the internet and computers combined with my love for designing and building things that wowed everyone around me. Web design isn’t for everyone and there’s definitely a lot of talent required, but should you decide to make the leap into creating things for the web, I’ve put together some great advice for your journey.

Get Started!

When I first started designing websites, I didn’t know much about web design. In fact, I knew nothing at all. But besides the fact I knew nothing about HTML/XHTML, CSS. or JavaScript, I started learning bits and pieces, always eager to find the right formula for great web design.

When you begin your career as a designer, you need to have access to the appropriate tools, such as a computer, a copy of TextPad, CSSedit (if you’re on a Mac), Adobe DreamWeaver CS4 (if you’re on a PC), Adobe Photoshop CS4 (or a lesser version you bought at the pawn shop, however, I wouldn’t recommend anything lower than CS2, earlier versions are crappier and cause you to lose precious design time). If you are a student, you can obtain this software at a much lower price from the Adobe Education Store.

Once you have your tools in place, you need to start learning. A resource I still use as a reference for HTML and CSS is W3Schools, which is in no way affiliated with the W3C. Next, you need to do some reading up on designing in Photoshop, what makes a good logo, and how to write HTML and CSS from Jeffrey Zeldman and Eric Meyer. Once you’ve learned how to mark up simple layouts and design in Photoshop and Illustrator, you’re ready to start learning the process of a web designer, which is one of the most difficult parts of this career path.

The Process

Some designers end up with the following process due to a high level of frustration with establishing their own process (pardon the vulgarity but I felt this chart was a great example of people’s hatred of IE):

Alan Foreman thinks the design process can be frustrating at times.

The process of designing a website can be pretty simple and clear-cut as long as you hold yourself and your clients to a process. A neat example of the web design process can be found here. I suggest you take a proven process and adapt it to fit your personal preferences and design style. This takes years and is never perfect, but as long as you provide realistic expectations/timelines, stick to your process like glue, and deliver quality work, you should have no trouble building and launching successful web projects.

Designing your first REAL website

You should start asking friends and family if they need a simple website or even if they have an idea for one (simply for you to practice). It’s much easier to design when you have a “real” project and “real” clients, even if it’s just your mom’s pottery collection website. You’re going to want to follow the process you’ve started to compile for yourself, even with your mom. One of the hardest parts in web design is keeping your client’s requirements from ballooning or morphing after you’ve gotten pretty far along in your design process. This is really the most challenging part of becoming a designer, dealing with clients, building realistic and attractive proposals, and setting milestones and specifications.

Some general tips to remember as you create your own design process:

Always hand-code your HTML and CSS and keep a quick reference handy when you need something.
Only use the markup you need. Don’t bloat your pages with countless DIVs. This encourages meaningful, semantic code, which is easier to maintain for the poor sap that has to deal with your code later.
It’s ok to ask for help, it’s usually the quickest way to figure out a problem with your code or quickly identify design inconsistencies in your layout. If you’ve got a problem, put it up on Yahoo! Answers or even post to Twitter, see if anyone has encountered it before.
When you design in Photoshop, make sure to set Anti-Alias to None for text that is meant to look browser-generated. A lot of graphic designers designing for web seem to overlook this.
The client’s needs and the client’s users’ needs are what drive the requirements for the design and code. Make sure to take thorough notes and listen well to make sure you are taking the design in the desired direction.
Test your code in all major browsers. Major browsers currently include Internet Explorer 6 and 7, Firefox 3, Safari 3, Opera, and the newest kid in class, Google’s Chrome.
After learning a bit about HTML and CSS, while in Photoshop, make sure you are always thinking about how easy it will be to code your beautiful design. Sometimes you may see that part of the design is unnecessarily complicated and you need to simplify it in order to make life easier while coding. That’s perfectly fine.
Don’t be afraid to tell clients “No.” But do be prepared to have a good reason behind it.
Stay within your design capabilities. That doesn’t mean “don’t innovate” but merely try not to adopt a design style that you aren’t particularly good at, such as designing a grunge website.

I could go on for about sixty pages, but I don’t want to scare you off. Just make sure you are reading the necessary articles and tutorials you need to catch up. The biggest point to remember when learning anything new is to learn from everything and everyone around you. You’re never too good to learn something new and apply it to your own career.

CSS Framework Roundup: Should You Use One?

Chris — Wed, 04 Feb 2009 00:30:23 +0000

After seeing some CSS frameworks pop up over the past couple years, I thought it fitting to address the increasingly popular trend. In my opinion, I see CSS frameworks as a way to learn how other designers and developers work with layout, markup, and style to produce websites rapidly, semantically, and with great flexibility.

Without further ado, the official Wikipedia definition of a CSS framework:

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage…

Popular CSS Frameworks

Below is a roundup of the various CSS frameworks out there and a short description from the authors of each framework. I’ve included the 960 grid system from Nathan Smith simply because it’s awesome even though it is so much more than just a CSS framework.

960 Framework: Description from Nathan Smith: The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Blueprint CSS Framework: Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
Elements CSS Frameworks: Description from Project Designs: Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy.
CwS CSS Framework: Description from Content with Style: If you’ve been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I’m trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I’ve not attempted to explain the layouts included here so it may not be suitable if you’re a CSS beginner. Sorry about that… Feel free to dissect them yourself if you’re interested; I’ve kept them as simple as possible.
YAML CSS Framework: Description from YAML.de: Yet Another Multicolumn Layout (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
YUI Grids CSS: Description from Yahoo!: The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
Boilerplate CSS Framework: Description from Nathan Borror: As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.
CleverCSS: CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is. The most obvious difference to CSS is the syntax: it is indentation based and not flat. While this is obviously against the Python Zen, it’s nonetheless a good idea for structural styles.
WYMstyle: a CSS framework: Description from WYMstyle: WYMstyle is a set of CSS files, that you can easily combine to very quickly create the layout of your web sites. WYMstyle aims to suppress the tedious compatibility testing across browsers for each created website, by providing CSS modules which are reliable and well-tested.

Should you use a Framework?

For me, I prefer to use my own CSS as a base, mainly due to the fact that every project is different, I don’t want to lock myself into using someone else’s code, and I don’t want to spend time learning how to combine classes to create the right layout. I just want to write the CSS and markup I need, nothing more.

I think using someone else’s framework is great for the following types of people:

Students: learn everything you can from some of the best front-end developers out there.
Back-end developers: being a front-end developer, I say don’t touch my CSS!
Graphic designers: if you don’t really know HTML or CSS, it’s a great way to get into it and learn your constraints
Web design chop shops: there’s nothing better for rapidly designing/coding websites than the 960 grid system
Bryan Veloso: 960, it does a good.

Thoughts? Did I leave out your favorite CSS framework? Comment below.

Expanding on How to Auto Caption Images Using MooTools

Chris — Sat, 24 Jan 2009 04:31:49 +0000

One of the guys I love chatting it up with is Jacob Gube of Six Revisions. Jacob recently posted a great Mootools tutorial on automatically adding image captions using Mootools. I enjoyed the tutorial so much I thought I would expand upon it and make it a MooTools class that can be reused for various purposes as needed.

Check out the demo.

This class has a couple options you may want to use, position and alignment.

Position can be set to either ‘before’ or ‘after’ which will change whether the caption is above or below the image. Alignment can be set to ‘left’ or ‘right’ or ‘center’ and allows you to align the text within the caption.

If anyone is interested in what the code looks like, here is what you will find in the demo:

/* Let's create a new Class */
var AutoCaptioner = new Class({
	Implements: [Options, Events],

	/* Set up the default options of position: 'after' and alignment: 'center' */
	options: {
					images : [],
					position : 'after',
					alignment : 'center'
	},
	initialize: function(options){
		this.setOptions(options);
		this.addCaptions(this.options.images,this.options.alignment, this.options.position);
	},
	addCaptions : function(images, alignment, position){

		$$(images).each(function(el){			

			var captionText = el.getProperty('title') || el.getProperty('alt');
			if ( captionText ) {
				var figure = new Element('div', {
					'class' : 'figure',
						'styles' : {
							'width' : el.get('width').toInt() + 10
						}
				});
				var caption = new Element('p', {
					'class' : 'caption',
					'html' : captionText
				})
				.addClass(alignment);
				figure.wraps(el);
				caption.inject(el,position);
			} else {
				alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.');
			}
		});
	}
});

window.addEvent('domready', function() {

  /* Let's instantiate a new object */
  new AutoCaptioner({
	  /* set up the options below */
    images : $$('img.captioned'),
		position : 'after',
		alignment : 'center'
	});

});

The Last Browser Testing Advice You’ll Ever Need

Chris — Sun, 18 Jan 2009 18:54:11 +0000

Everyone knows the basics, you have to support the current version of IE, Firefox, and Safari. On top of that, you have to make sure it functions/looks ok in IE6, Opera and Google Chrome, if your browser stats warrant. In this post I discuss A-Grade browsers, my personal testing process, and graceful degradation vs. progessive enhancement. Read on, my friend, and become an expert on browser testing.

In no particular order

My Coding and Testing Process

I prefer to test in IE 7, Firefox 3 and Safari 3 while I am actually coding the HTML and CSS. I basically keep my HTML open in these browsers and test as I code. When I feel I have it working well in those browsers, that’s when I start checking it out and making fixes in other browsers like IE6 (blech), Chrome and Opera. If I’m working on a project that requires multiple templates for various pages and modules, I like to get a valid template to work from that works with all the major browsers, then branch off and build the rest of the templates for whatever project I’m working on. When I have the templates coded, I will log into a couple different machines (mac and windows), test IE7, IE6, Firefox 3, Firefox 2, Safari 3, Chrome, and Opera. If changes are needed, I go back, make the changes, and start the testing process again. Sometimes I will use BrowserShots.org to get a high-level overview of how things look, but never depend on it for a definitive picture of how it will look.

The Major, Current Browser Versions

Obviously, you need to make it look and function pretty close to the same for IE7, Firefox, and Safari. Like I said, Opera and Chrome should be optional, though they do have a fairly large set of users. I’m not going to quote percentages from sites that only gather data from their own website. Instead, you should always consider your own website (or client’s website) analytics for those numbers. Bottom line, if any minor browser is over 4% of your total visitors, you need to make sure everything at least works.

Avoid CSS Hacks Wherever Possible

IE 7, Firefox 3 and Safari 3 have gotten to the point where you can get them all to look and function very similarly without CSS hacks. The problem with hacks (aside from them not being standards-compliant), is that browser vendors are eliminating these hacks as new versions are released, leaving you (or the person that is hired after you) questioning (months/years later) which versions those hacks work for and why they were added in the first place.

It’s best to write your code as if hacks do not exist until you have exasperated all options. If you still can’t get it quite right, you need ask the following questions about the problem: “Will this issue A. cause confusion for users, B. prevent users from navigating the site properly, or C. affect the company’s brand?” If the answer is yes to any of those questions and a hack exists for the problem you are trying to solve, make sure you separate the hack out of your standard stylesheet and put it in a browser-specific stylesheet like ie6.css and if necessary, pull it into your page inside conditional comments, when applicable.

Progressive Enhancement vs. Graceful Degradation

Graceful degradation asks the question, what features should be unavailable to this set of users? Progressive Enhancement asks the question, what features should be made available to this set of users? You need to have a solid understanding of which user segment you are targeting, then decide whether to add features for more advanced users/browsers or remove features for less advanced users/browsers. These decisions heavily impact the way you code and cause you to start thinking about how to target specific browsers and certain types of users that may or may not care for additional features.

Is there a master list of A-Grade browsers?

Funny you should ask, why yes there is, from the Yahoo! User Interface development team, here. This list isn’t necessarily for browser testing, but it gives you an idea which browsers they feel should be supported for their products. I think it is a good table for our purposes as well. And here they are (updated as of the date of this post):

	Win 2000	Win XP	Win Vista	Mac 10.4	Mac 10.5
Firefox 3.†	A-grade	A-grade	A-grade	A-grade	A-grade
Firefox 2.†		A-grade			A-grade
IE 7.0		A-grade	A-grade
IE 6.0	A-grade	A-grade
Opera 9.5†		A-grade			A-grade
Safari 3.1†				A-grade	A-grade

As you can see, IE6 is still on the list, and of course it is, with the number of people still using it. It is a major browser version and will continue to be until corporate campuses begin upgrading machines to IE7 and IE8. Until then, my advice is this: Make it work for IE6. It doesn’t have to be amazing, it just has to work. Another thing to note, Chrome is not on this list. Yet.

What is your browser testing process?

If you have a frickin’ sweet process for browser testing, please feel free to comment below.

Five Easy Steps to Integrate Facebook Connect with your WordPress Blog

Chris — Wed, 07 Jan 2009 18:06:02 +0000

Wondering how to seamlessly integrate Facebook Connect into your WordPress blog? Have no fear, Facebook Connect Man is here. Uh, well, not really, but read on if you want millions of people to be able to use their Facebook login for your blog!

1. Download and install the Facebook Connect Plug-in.

2. Create a new Facebook developer API key.

You don’t have to be a developer to get an API key. It just registers the usage of Facebook Connect so they can track where the API calls are coming from.

3. Edit your theme’s comments.php file.

You will want to dig through your comments.php file and add the following code just before or after your comment form:

Then, you need to make sure your comments.php contains:

This will hide the name and email fields when a user is logged into Facebook Connect.

4. Activate the Facebook Connect plug-in and enter your API key and secret key.

Next, you need to go to your Plugins section in the WordPress admin and enable Facebook Connect. Then enter the API key and secret key that was generated in the second step.

5. Customize your CSS to make Facebook Connect look good.

Once you’ve installed Facebook Connect, it may look not so great. Customize the CSS to make it look like you and Facebook are best buds.

Here’s what I added to my CSS file to override some of the default styles that the Facebook Connect plugin adds to your page:

/* Facebook Connect Styles */

.facebook-connect{ /* I added this div wrapper myself, was not part of the plugin */
  position: relative;
  float: right;
  width: 300px;
  margin-top: -65px;
  text-align: right
}

.facebook-connect a,  /* you probably won't need this css */
.facebook-connect a:hover,
.facebook-connect a img,
.facebook-connect a:hover img{
  border: 0
}

.facebook-connect .fbc_connect_button_area { /* This is the button container for your comment form */
  border: 0;
  float:none;
  margin:0;
  padding:0
}

body .fbc_profile_header { /* I added body to override the CSS from Facebook Connect's default CSS */
  background:#000000 url("images/quote-bg-repeat5.jpg") repeat-x;
  border:1px solid #3d3e3d;
  border-right: 0;
  padding:10px 5px 5px 10px;
  position:fixed; top: 45%; right:0;
  text-align:left;
  width:220px
}

body .fbc_profile_header a.logout{ /* this is a custom class I added to the HTML in fbconnect.php */
  font-size: .9em;
  color: #999
}

That’s It, you should be up and running! However, if you are having issues with IE not displaying your button, WP SuperCache, or anything else, make sure to read the Frequently Asked Questions.

There are a number of other more detailed tutorials out there for you if you need a little more detail on the various steps.

My Thoughts on CSS Optimization

Chris — Mon, 29 Dec 2008 13:20:25 +0000

After using a CSS optimizer a couple of days ago, I realized that if you write your CSS properly, you should never need a CSS optimizer. Here’s why: when a CSS optimizer runs, it groups all the selectors together that share common styles and rules. For example, if you have

margin: 0;
padding: 0;

on 50 different selectors, it’s going to group them all together. Which means in most cases, it will repeat that pattern for all the different styles that you’ve applied throughout the stylesheet. So if you’ve got list-style: none on 16 different selectors, it’s going to relist all those selectors again just to add that one style. Below is an example of the CSS I tried to optimize for my new design, only to have the optimizer add 2kb and say “sorry ” when it was done.

Here’s what it looked like after I optimized:

 body,fieldset,#header #nav li,#bottom-header #nav,#bottom-header #nav li a,#main,#sidebar-one.column .search-form fieldset,#sidebar-one.column .search-form,#sidebar-one.column ul li,#sidebar-one.column ul,#sidebar-one.column ul#switcher li,#sidebar-one.column ul#switcher,#footer #lastfm,#footer #lastfm ol li,#footer #lastfm ol,#footer #archives ul li,#footer #archives ul,#footer #copyright ul li,#footer #copyright ul{margin:0}body,fieldset,#header #nav li,#bottom-header #nav,#bottom-header #nav,#maincontent .date small,#maincontent .date strong,#sidebar-one.column .search-form fieldset,#sidebar-one.column .search-form,#sidebar-one.column .outer,#sidebar-one.column ul li,#sidebar-one.column ul,#sidebar-one.column ul#switcher li,#sidebar-one.column ul#switcher,#comments dd,#footer #lastfm ol li,#footer #lastfm ol,#footer #archives ul li,#footer #archives ul,#footer #copyright ul li,#footer #copyright ul{padding:0}

As you can see, that’s a lot of CSS for setting two values, margin:0 and padding:0.

CSS optimization can be good, but only if you write terrible CSS or repeat the same styles over and over again throughout your stylesheet. Now that’s not to say you shouldn’t minify and/or compress your CSS. That’s something that doesn’t change the order and values of the CSS, but makes it more compact when delivered to the user’s browser.