How do I reduce the size of my CSS file? Can you teach me some "shorthand" tricks?
Posted by jerothe in 
In the quest to have the best possible CSS site without going psycho like some of the CSS purists out there, I started to take another look at my CSS sheet.
Having written this over three months ago already, I have learned a great deal during that time about how to reduce some of the CSS rule declarations. I also have doubled my site from the original idea, so the sheet is getting a little unruly at 20k. But for now, I think that I will try to reduce where I can, but am not going to spend many hours for just a couple of “k”. Remember, when your users visit your site and load the homepage, the style sheet will go in their cache and won’t need to be loaded again while they are at your site.
So, the first thing I did that had nothing to do with “shorthanding” declarations, I removed the “px” from the end of any of my measurements with a “0″.
The reason for this being that “0″ is the same value, no matter what measurement you give it. 0px is the same as 0pt and that is the same as 0in.
Now, on to shorthands declarations.
What is the definition of shorthand? To shorthand in CSS is to basically combine a similar set of CSS declarations into one. The main two that I am going to be dealing with here and use on a day to day basis with CSS are the background and font declarations.
Here are some of the possible declarations and value pairs that you can have in CSS;
background-color:#444444;
background-image:url(../images/example.gif);
background-position:0 50%;
background-repeat:no-repeat;
background-attachment:fixed;
I hope that most of these declarations are familiar, but if they aren’t, you can always look to the W3C Schools for more information. I am just going to go over the last three that are a little less explanatory.
background-position – is where the background image is placed. You can either input measurements the first one being for “vertical” and the second being for the “horizontal” with the upper left corner of the browser being the axis, coordinates of 0,0. So I can either put an exact measurement for a position from the top, a percentage, or even some of the other values such as top, center, bottom, left, right.
background-repeat – is to specific how your background repeats. The possible values can be no-repeat, repeat, repeat-y, or repeat-x.
So for this example, we don’t want the background to repeat at all with the “no-repeat” value. But we can have the background repeat on the horizontal axis with a “repeat-x” or on the vertical axis with a “repeat-y”.
background-attachment – is to specify whether a background is fixed or scrolls with the rest of the page. This only has two values, scroll or fixed. I use this in my website because I never know how long my pages will get, but I can make my background image as high as I think the maximum viewing height of any browser will be. In my case I made my background image 1300 pixels high, which may be overkill in size, but I like the look and am willing to go over that little bit for aesthetics.
Back to the original idea.
So for shorthand, you can write all of these properties in one declaration called background. Here is how they would look re-written;
background:url(../images/example.gif) #444444 0 50% no-repeat fixed;
“What is the rhyme and reason to this?” you ask. Well, for the background declaration, you can list the values in any order you want. Also, I think the bare minimum to use this property is just one value, any value, just pick one. It is a flexible declaration and that can save you up to five lines of code when you are using background properties. But the “font” shorthand is not as easy going, but just as efficient.
Here are some of the declarations for the font family;
font-size:12px;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-variant:normal;
I use the first three declarations here over an over on a daily basis. I will admit though that I have never used the “font-variant” declaration, which is basically to set the font in a “small-caps” size or “normal” sized font. There is also a way to incorporate the “line-height” declaration, but again, reference W3C schools for more information on that as it is beyond the scope of this article.
When using the shorthand for font here is what you need to know. In order to use the shorthand you must have at least the font-family and font-size declarations in place, and the size always comes first. So the bare minimum will look like this;
font: 12px Arial, Helvetica, sans-serif;
Now, you can put the other values in. I have found that there is a order to things, and that browsers react better when you put the other values first in order. So our final shorthand would look something like this;
font: normal italic bold 12px Arial, Helvetica, sans-serif;
The success!
By taking out all of my “px” on all the measurements of 0 and shorthanding all of my font and background declarations I was able to cut out 1k of code from my stylesheet. That is good enough for me!
I hope this article was helpful, and didn’t glaze over too much when it comes to CSS. It does assume some knowledge base, but I assume if you are reading this you do have at least that. Send me any questions at my hotmail address, jrothe {at} rothecreations(.)com.
How do I prevent a pause in my preloader as a result of scripted sounds from the library?
For the longest time I had problems in Flash when I was using sounds. Like I discussed in an earlier topic here on the blog, I prefer to dynamically call all sounds from the library because that gives me the most control in timing in my movies. If you don’t know how to make a sound available to be called, check out this article from August.
The problem with calling those sounds is how they are loaded. When you go into the library, right click a sound instance and choose “Linkage” > “Export for Actionscript” by default, the dialog box also checks the “Export in first frame” option. So what this means is when you are writing your preloading script that is returning all of the byte information when it gets loaded, there will a long delay and then it will show up on screen with a good portion of the movie loaded. The desired effect would be for the user to see the preloader load from the beginning, from 1% loaded as it were.
Because we are checking this “Export in first frame” option, the sound actually loads before the first frame, and loads before anything else can happen. This is true with any object, from images to other symbols, that are set up for actionscript. That can potentially be a ton of information that needs to load before you can start “loading” the rest of the movie.
Well, this is how you prevent that.
Usually the preloaders that I create are movie clips that tell the main timeline to stop playing, and this movie clip is located on frame 1 of the timeline.
When the whole movie has loaded, I then tell the preloader “gotoAndPlay(“start”)” which usually also happens to be frame “2″ where the movie starts. If we want to use linkage on sounds, but don’t want to check the “Export in first frame” option, the sound has to be on the timline somewhere. This can become confusing when it comes to movie clips if you are going to drag them off of the viewable area, but with sounds it is really easy.
Look at the image above. I actually have a layer called Sound. You will also notice there is a music note looking thing in the second frame. If I extended that empty keyframe out farther you would be able to see that this is the sound I want to use located directly on the timeline.
“But the sound will start playing when the playhead rolls over it” you say. Not if you set the “sync event” to “none”. In order to do this;
1. Click the sound on the timeline.
2. Look down in your property inspector for the sync drop down box.
3. Set the sync box to stop.
4. At any time call on your sound in the movie and it will work just like you had exported it in the first frame.
The beauty of this is that when you are using your preloader, the sound size will be included in the total movie size since it is on the stage, even though it is set to “stop” and will be loaded with the rest of the movie.
I hope this fixes any problems you may have with delays in the start of your preloaders, and the preloaders starting up half way through the process. Use my contact page if you have any additional questions.
What does the acronym XMLNS stand for, what does XMLNS mean?
I was reading an article today on the accessibility benefits of <tbody>, <tfooter>, etc. tags for definingsections of information for a visually impaired user. That is when I came across was the xmlns attribute of the html selector means.
XMLNS means “XML Name Space”. But you may ask, what is a name space? I can’t really answer that yet. My limited understanding is that it is the path to find the specs for an XML document that you have linked to an HTML page.
I you “view source” on my webpage in the top you will see when I declare my <html> selector the tag has an attribute call xmlns in it and it looks like this;
<html xmlns=”http://www.w3.org/1999/xhtml”>
I can’t totally explain, like I said what it is for, I just know that when I was developing this site, I needed it there to prevent a “bugs” mode from happening where the CSS markup didn’t act properly.
Why do I need to close certain elements in XHTML like the <img> and <meta> tags?
I also happened across a better explanation on why a closing tag is needed on certain selectors in the XHTML spec. When I say “close” I mean with a closing forward slash and bracket like this />.
HTML is a markup language and so is XML. So when you don’t “markup” some information like with an image tag like this;
<img src=”http://www.rotheblog.com/images/design/jenbio.jpg” alt=”Rotheblog Bio Image” />
Where there are no tags surrounding the image, it is a stand alone tag, you need to close it with a “/>“