Handling “class” attribute in Beautifulsoup

Using the docs it can be difficult to spot the syntax to find an element with a class. Here is how you refine your search to the elements with my-image class.

img = soup.findAll("img", { "class" : "my-image" })

Further reading:

Posted in Blogs | Leave a comment

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");
}

Posted in Blogs | 4 Comments