Question

I am developing a website and want to implement svg files to help in regards to retina displays, but want a fall back png file as a back up.
This is the html/js/css;

<div id="band">
</div> <!--band--> 

<script>
        $(document).ready(function() {
                if (Modernizr.inlinesvg) {
                //SVG.
            $('#band').html('<img src="barbGradient.svg"  />');
                } else {
                //No SVG.
            $('#band').html('<img src="barbGradient.png"  />');
            }
         });
</script>

This is the css;

}

.no-inlinesvg div#band {
 position: relative;
 top: -950px;
 background-repeat: repeat-x;
 background-image: url('../_images/barbGradient.png');
 z-index: -1;

}

.inlinesvg div#band {
 position: relative;
 top: -950px;
 background-repeat: repeat-x;
 background-image: url('../_images/barbGradient.svg');
 z-index: -1;
}

All the browsers are rendering horribly! I know I can include two pngs at different resolution, but I find the js method to be smarter! Any help would be appreciated!

Answer 1

I would stick with the png solution. 99.5% of your users won’t notice. The HTML spec is not ready for this (Editors Draft) and the costs of a hacky implementation outweight the benefits IMO. If you still want this, check out this solution . But once again, this time with a quote of the polyfill developer:

“Note: Supporting this many breakpoints quickly adds size to the DOM and increases implementation and maintenance time, so use this technique sparingly.”