Using Modernizr with Opera Mini

We used Modernizr to provide fallbacks for unsupported features such as, svg’s, background-size, etc. On the new Canonical website. During browser testing I found Opera Mini does not support background-size (Opera specs) but Modernizr was reporting it does (Github issue).

So I went about developing a small extension to add the class “opera-mini” to the html element if it detects its Opera Mini.

var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
if(isOperaMini) {
    var root = document.documentElement;
    root.className += " opera-mini";
}

This way you can target browser’s that dont support background-size and Opera Mini like this:

.icon {
    background-image: url("icon-social.svg");
    background-size: 32px;
}

html.opera-mini .icon,
html.no-svg .icon {
    background-image: url("icon-social.png");
}

This entry was posted in Blogs. Bookmark the permalink.

2 Responses to Using Modernizr with Opera Mini

  1. blake says:

    This trick doesn’t work as you’re not overriding or resetting the background-size property. You’re simply redefining the background-image in a new selector that only Opera will use.

    • Anthony Dillon says:

      The issue in my case was the svgs are generated at a generic size. For example 500×500. Therefore I needed to used background-size to scale the image. Where as the png is already saved at the correct ratio for best result. Therefore replacing the such with the fallback png solves the issue.

      Do you have a specific example of an issue you are trying to solve?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>