I was trying to figure out a way to preload CSS images, by javascript or CSS. Unfortunately all the methods I found are not effective, since even tho the images are loaded, when the CSS part that contains an image which is not accessible when the site first opens, it still requires it and downloads it. I checked the net panel in firebug and it wasnt very pretty.

However these methods do work if you try to load images into an <img> tag:

CSS 2.1 Method

Using CSS 2.1 the method is pretty simple. It takes advantage of the :before and :after pseudo classes, and the content property. Although this property is pretty limited in what it can do, it does what we need.

We load the images and then we use display: none so they dont show up, but they are cached so when you load the image within a <img> tag it will show up instantly.

The benefits of this method is that it has a fairly wide acceptance among browser vendors, IE8/Firefox 2+/Google Chrome 1+/Safari 3+. For Previous IE versions you could load up a JS preload.

CSS 3.0 Method

Using the CSS 3.0 is even simpler, it takes advantage of the modifications done to the background property by being able to load multiple images with 1 element. Regardless of what the browser can support we can always create a dummy element and load all the images and then give it a display: none; we need to use in a <img> tag.

The huge downside of this method is that currently only Google Chrome 4 and Safari 4 support these improvements to the background property. Firefox is due to support them in Firefox 3.6 which at the time of this post is in beta 5 so it will be released in 2-3 weeks. IE will probably support CSS3 properties when IE9 will be available, which according to the IEBlog will happen in a year or so.

I am still looking for a way to preload CSS images into play, so when they are requested again, they will use their cached versions instead of being downloaded again.

While i was building a webpage for a client, i came across a very peculiar issue. It seems that webkit (safari/google chrome) have troubles understanding an absolutely positioned floated element

This is the HTML for the file in question.

The CSS looked like this

This happens in Safari/Google Chrome

The image shows HOW Safari/Google Chrome behaves, IE6/IE7/FF3/Opera9.5+ work ok, but everything based on webkit breaks

After fiddling around with the CSS lines i think i found out what happens

Given that the ul element is absolute positioned, it is OUTSIDE the normal pageflow, however it breaks everything after it, because li elements are floated. so an empty clear div should be put there. In normal circumstances like these

everything after the 2 floated elements will resume it’s normal position, however in this case, since the LI elements are somehow outside the page-flow but they are floated, they break the pageflow. Now the surprising thing is that the div.clear is not doing it’s job to put the page in order in webkit. I dont know why since it’s a block type element and in all other cases it works, here however you need to have him not only as a block element but also it needs to have a height of 1px or more.

After putting the height 1px to the clear div, it started to behave properly in Safari / Chrome. Very weird bug, even more weirder than those on IE6/IE7

Questions in comments

Cheers AlexD