CSS Tips and Tricks

I’ve collected a few of my favorite CSS tricks for use on my own site, yet seem to always be on the look out for other implementations. Seems like you can’t just lay out a page anymore… you have to lay it out, then add some conditional formatting for the large amount of people still using IE6, then hope that the spacing difference between IE7 and Firefox isn’t anything hugely substantial. Just thinking about reading that statement out loud makes me out of breath!

Either way, here are a few tips and tricks to style sheet development.

:::

1) Have a plan
How many pages will your site have? Will many of the elements be the same from page to page? Will you have a few pages with their own elements that won’t repeat on other pages?

If you break down your plan for the site and assign each area some sort of identifier before you even insert a <div> tag, you’ll be much more successful in keeping everything straight. It may make sense to break your page into a few smaller pieces. This can be done with classes:

.class1 #UniqueIdForEachElement
{
....
}

2) Don’t discriminate

Internet Explorer, Firefox, Opera, Safari, Palm, Smartphones…. the list goes on. Should a website be designed to render the same across all platforms? Absolutely not! That beautiful image of your work that you have your logo floating above in all of it’s Photoshop CS3 glory just completely loses its appeal when viewed on a 2.3″ diagonal screen. The navbar that you have tucked away on the right side of the screen doesn’t even show up until you’ve scrolled allllllll the way past the header, content, and copyright information on somebody’s Samsung cell phone.

<link href="default.css" rel="stylesheet" type="text/css" media="screen,projection" />

<link href="print.css" rel="stylesheet" type="text/css" media="print" />

<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

If your style sheet declarations look something like that… you’re in good shape. Go ahead and skip the rest of this bullet point.

I did a quick browse of the WWW, and the second page I looked at has it all wrong. I’m a fifteen year old, trying to convince my parents to get me a car as soon as I turn 16. Allstate Auto Insurance information is provided on this page. I read some of it… but decide I want to print it because its easier to show them. Lo and behold… Allstate didn’t provide a separate style sheet for printing purposes… and now I have so much junk on this page that I printed that it doesn’t even look legitimate. A really good basic walkthrough of how to do this can be found on Adobe’s Video Workshop. Many of the same rules that apply to styling a page for print can be used for styling a page for mobile use.

Also, if somebody is using a non-english browser, make sure that

@charset "utf-8";

is inserted at the top of your stylesheet. This will ensure proper rendering for those few (growing) individuals.

3) Know your capabilities

I know many a “CSS purist” that will scoff at any designer who inserts the <table> tag into a document. These same people don’t make any money doing web design, and have spent more hours cursing IE6 than they have developing a website. Sometimes you just can’t do what you want to do, and get it working cross-browser with pure CSS… at least not without spending 5 hours on something you could get done in 30 minutes.

Also, are you really optimizing something by creating a new class and ID for a div that you are going to use once?

#thRandomDiv34

{

width:500px;

}

<div id = "thRandomDiv34">

ends up the same as

<table width = "500px">

but… which one loads faster? Could you imagine if all short little tags like that were bloated to the four lines you see above? The internet would crumble and break at the quadrupled amount of data being sent and received. Don’t destroy the internet, please. This brings me to my next point:

4) Optimize

But don’t waste your time optimizing.

Wait… what?

Every time your stylesheet is loaded, it takes time. If you’ve split your stylesheet up into 25 components, more than likely you are loading an extra 10K everytime somebody accesses your page. That might not seem like much…. but thats still 2-3 full seconds to somebody using dial-up, or browsing on a mobile phone. My partner stumbled across this site which takes your CSS file, and combines whatever it can, saving you space. My style.css file went from 4.9K to 1.7K. Now that’s a difference. (and it only took .81 seconds!). Word to the wise on this though: Hold on to your old stylesheet for easy changes in the future. You can always optimize it again!

Also, make sure you don’t have classes defined that aren’t being used on a page! Why are you loading those 9 classes that make up that neat little rounded table you created, if the rounded table doesn’t even make a guest appearance on this page?

So why did I tell you not to waste your time optimizing if I’m just going to give you tips on how to optimize? Everything in moderation. If you spend 3 hours saving half a kilobyte on your page because you shortened the names of all your tags from “thumbnailImage” to “tI”, and calcuated that using tables on two out of five pages saves 34 bytes each time the page loads…. then you’re missing the point.

5) Think CSS First

Yes, I’m almost contradicting myself here (almost!) with what I said before about tables. I am, in fact, not. I’m also offended that you would think that of me.

The reality is, if it has anything to do with layout, style, appearance, color, look, feel, weight, or size, CSS is probably the answer. Such as:

• The hover subcomponent can give you some flashy menus without using (cumbersome) javascript.
• Thumbnails of a link can be provided by hiding (and preloading) the images off-screen such as on http://www.whathuhstudios.com
• The overall layout of a page can be formatted into columns and rows without having <td> and <tr> tags all over your page (in THIS case, it should save you a few bytes of load time, also)

Check back in the future for some more tips. The next two items I want to write about are “psuedo-ajax” (show/hide/update) and some php time savers… I’m not sure which will come first.

Stumble it!

Post Info

This entry was posted on Monday, September 24th, 2007 and is filed under css, development. It has 118 views

Tags:css, design, development, div, optimization, tips

Comments Feed. | Leave Comment | Leave Trackback.

Previous Post: A pox on thee… »
Next Post: Easy CSS/php default image »

Most viewed posts