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";
}
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");
}
background-image: url("icon-social.svg");
background-size: 32px;
}
html.opera-mini .icon,
html.no-svg .icon {
background-image: url("icon-social.png");
}
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.
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?
Pingback: Canonical Design Team: Making ubuntu.com responsive: dealing with responsive images (10) | Hi-tech news
Pingback: Canonical Design Team: Making ubuntu.com responsive: dealing with responsive images (10) | itux.info