Anne van Kesteren

Links | Future image replacement techniques

Graphical Headings
Image replacement techniques aren't countable anymore these days; I still use the img element as much as possible.
CSS Fast Rollovers Without Preload - Updated
When are you going to upgrade your damned Internet Explorer?! (Preferably to Mozilla or Opera)
CSS Design: Creating Custom Corners & Borders
How many divs did you say? 23? And step 6 still doesn't work properly in my browser, probably cause of the images, but still...

In the future we get two 'better' methods of image replacement: 

<!-- 1 -->
<table id="visitors" type="image/svg+xml" src="visitors.svg">
 <!-- contents -->
</table>
/* 2 */
table#visitors{
 display:inline-block; /* that was just plain stupid of me */
 content:url(visitors.svg);
}

What's your favorite?

Comments

  1. Why not XLink? 

    <visitors
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xlink:type="simple"
  xlink:href="visitors.svg"
  xlink:show="embed"
  xlink:actuate="onLoad"
/>

    Posted by liorean at

  2. At the moment I've got to say I prefer the second one.

    In a perfect world I would prefer to produce a clean, tidy and cross platform xhtml code :-))

    Bye,
    m.

    OT: Nice and exemplary source code Anne :-)

    Posted by JTG Mark at

  3. It's a question of flexibility.
    If i will change the whole site or page with other colors, i've been bounded if i should use too many of those methods.

    Posted by Mario De Zutter at

  4. I tend to stay away from SVGs, due to the lack of support. If I had to, then the CSS way is the way I'd choose, with a suitable hack to hide it from unsupporting browsers.

    Posted by David House at

  5. i would go for option #2: it is syntactically supported by at least one browser already. can be more elegantly hidden by non-supporting browsers (with consequent minimal bandwith). and can be more easily maintained due to its modular concept...

    Posted by csant at