What is CSI - Replacement?
Client-side image replacement is a technique to dynamically "render" text elements as images without CPU intensive server-side processing using some C64 inspired goodness. Viewing a page without style sheets or javascript will degrade gracefully to display the original tag text.
It's so dodgy it's almost beautiful.
Head over to the demo page to read this post in all its CSIR glory!
2 Comments
Hey I like where it’s going – and that typeface is fragalicious…
A couple of issues I’m going to be an anus about, that have been tackled in a few other similar techniques (like sIFR, et al) after lengthy iteration:
It seems to take a while to load. When I checked the demo page, each character replacement caused my browser to download the character map separately. Some preloading wizardry should fix it…
You also get the FOUC effect… the Flash Of Unstyled Content in the replaced headings. I think the way around this is first up setting those headings to be visibility:hidden or somesuch
Like a lot of CSS image replacement techniques, with images off and JS on, you don’t see anything. I think there might be a way to position the text images over the top of the headings, rather than replacing them… but I’m not sure, and most people don’t care anyway.
Keep the good stuff comin’
That pre-loady thing is weird… if you refresh the page once it starts doing that slow plot-one-character-at-a-time thing then it loads instantly. Otherwise it reloads the background image for every single character. I’ll fix it on the weekend. Though I’m not sure how you preload when the image is set in css… hmmm…
The FOUC is mainly because I do the image replacing in js as it gets to each element. If you put the image replacement in the style sheet then you don’t the flash, but if someone has js turned off then the headings will be replaced with nothing.
Also, if you replace a tag that has other tags nested – like a p tag, then it looks tres cool but smashes the nested tags. Pfft. who needs hyperlinks.