Briconsejo: Sprites en SVG con alternativa en PNG

Hoy he descubierto esta interesante manera de usar sprites en SVG junto con su correspondiente fallback en PNG para IE6/IE7 sin necesidad de usar una hoja de estilos alternativa.

.sprite {
    background: url(sprite.png) no-repeat 0px 0px;
    background: rgba(0,0,0,0) url(sprite.svg) no-repeat 0px 0px;
}

El truco está en usar la propiedad rgba, que no está soportada en IE < 8, por lo que la declaración background que usa svg se descartará, aplicándose la regla que usa la imagen en png. El resto de navegadores modernos usarán la versión de la imagen en svg.

Lee ahora: Behind the scenes: El rediseño de The Next Web »