While writing my first CSS Sprite article, I created a simple, in no way efficient, sprite generator. Last week I needed to show some numbers to the project manager to convince him the sprite technique is worth using, so I modified a bit the program to arrange the icons in different layouts and show the size savings.
Want to know with which layout I improved the file size by 78.6%?
Ever wanted a website that looks the same in all browsers? Tired of fighting slimy monsters while searching for excellance? Do these differences in UL padding make your head explode? So it's time for you to apply some CSS Reset Magic.
When it relates to CSS reset, there's a bunch of literature, do's and don't's, faqs and howtos, so this one won't take us too long.
It's easy to get lost in the Internet while looking for information. It's one of its greatest points: There are thousands of millions of websites out there. Information is the key purpose of the net and nobody can deny it.
But, as in many other cases, quantity does not equal quality. Poor designed websites, too bloated, with many inlined styles or little semantics (if none), are begging for trouble: Their information have lost accessibility.
While developing a web application, I often need to reload a whole site for every change I do in its CSS file, only to test it. Under Firefox I used to change manually the href in links (well, in fact, with Firebug) to add some query string, in order to by-pass the cache and request the brand-new version of the file. This job was often harder than that, since I'm still maintaining some old school applications using frames (Eek!).
While writing my jQuerify Bookmarklet I thought this CSS refresher is the perfect job for a bookmarklet, so I ended writting the CSS Refresh Bookmarklet.
If there's something I've learned during my developer life, is to make a list of basic rules and to be faithful to them. These rules are the skeleton on which all my own applications shall be built. Of course, these rules also evolved as time goes by, growing stronger or falling into obsolescence, often unpredictably.
Web development is not different from C++ coding, so it also has its own ruleset in order to avoid "bad habits". These are my rules, tell me yours.
Maybe it's my fault, maybe not. The truth is that I had some problems optimizing my webserver load with CSS Sprites, a nice, clean technique to max the efficiency of every image. Let's go into details:
I used a set of flag icons (taken from Fam fam fam) in a site admin zone. There are 247 flags, sweet and small (16x11) and that's all I needed. In this admin you can browse through tables with tons of data, to the point that all of the flags may be shown at once. More than once, in fact. So in a clean-cached browser you probably end requesting 247 images from the server. Even if the only answer were a 304 Not modified (in another scenario) they're too many requests. No way, being the "optimizer" I am, I need to change that.
Oh, floats. Every web designer have worked with them. Floats let you rearrange the flow of elements. They're powerful, they're useful, they're... painly buggy on old browsers, I know. But they're one of the CSS2 most used properties, so they deserve some respect.
Let's make some fun with floats. We will design a simple menu from nothing more than pure HTML tags and some CSS magic.
Currently I'm developing some web applications for internal use, porting from some old ones.
I'd love jQuery, the jQuery way to do asynchronous requests is brilliant. Then I developed a plugin for my apps. Basically, it "automagically" catches all clicks on links, sends an AJAH request and loads the response inside a container.
The problem came when the response contains <STYLE> or <LINK> tags. While using Firefox and Opera all was great. But, oh $h*t, no style was applied with IE6, IE7, Chrome or Safari. I was thinking that was my plugin's fault, but when I test the use case without it, the problem remains. No style applied.
Posts
All Comments
