|
pageoneresults -> CSS Code Bloat (5/20/2003 17:34:13)
|
Okay, now that we have a forum to discuss CSS specifically, I wanted to share some information with those of you making the shift from old presentational markup to the new improved use of Cascading Style Sheets.
After hand coding style sheets for over a couple of years, I' ve learned quite a few things along the way. Katherine' s tutorials were a great start for me and many others as they helped me to understand CSS in layman' s terms.
What eventually happens is your external style sheets become bloated. If they are over 4-5k in size, then you may need to do some trimming.
One of the first places you can start is with color values. Anytime a hexidecimal color value is used, it contains six digits/characters that represent the color value. If you are like me and try to use as many colors from the web safe color palette, you have a slight advantage in trimming some fat.
All web safe colors are achieved using paired values. For example...
#ffffff (white) #000000 (black) #ff0000 (red), etc.
Notice that each one of those contains three pairs. Anytime you are working with paired color values, you can use the CSS Shorthand method to trim out some fat. The above effectively becomes...
#fff (white) #000 (black) #f00 (red)
You use the first letter of each pair i.e. #ff0000 can be reduced to #f00.
If you are not using web safe colors, you would not be able to utilize the CSS Shorthand on your color attributes. Oh, you don' t have to use web safe colors for your site. You can use whatever values you wish.
My goal is to use web safe colors as much as I can especially when it comes to keeping my css files lean and mean. Usually you can find a web safe color that is very close to the color you may have selected using an eyedropper tool. Here is an example...
#efefef is a light shade of gray that I' ve been using for years. Back in the days, Netscape 4.x would display that color exactly the same as IE would.
Now I am using #ccc to trim out the bloat. That color appears consistent across most browsers, forget about NN4.x!
|
|
|
|
