gravitywins

∞

Manor House / Jez (by eveningtweed)

∞

Yago Hortal /via but does it float

∞

The Lights in The Old Town by Leonid Afremov

∞

Pepper, freelensed

∞

Some seriously amazing paintings and drawings by David Kassan

∞

I’m loving The Defamation of Strickland Banks, a concept album by English artist Plan B. The music is fresh, the lyrics are sharp, and the story itself (which charts the rise and fall of a fictional soul singer wrongly convicted of a crime) is pretty entertaining albeit clichéd. The music videos for the album are fantastic as well.

∞

157/365 London eye **Explored N1!! (by fedora365)

∞

Embracing HTML5/CSS3 with Modernizr

Modernizr is a killer JS library by Paul Irish and Faruk Ates that uses feature detection to determine what next-generation web technologies are available to your visitors’ browsers. After running its tests, Modernizer stores results in both the markup (as classes on <html> like .borderradius and .no-csstransforms), and in a JavaScript object. These results allow you to write thoughtfully-targeted CSS and JS, which I think is essential to providing a rich experience for users.

Considering a real-world example, say we have a content area we want to fade in after the page loads. Using CSS transitions we can animate the opacity to provide a smooth, GPU-accelerated fade, but not every browser supports transitions yet. Instead of leaving those users out, we’ll use jQuery to plug the holes. Let’s start with this markup:

<section id=”content” class=”loading”>
<p>
<!— content goes here —>
</p>
</section>

You’ll notice we placed a .loading class on #content, which we can remove with JS after everything is ready to go. This class provides us a hook to both (1) display an animated spinner image as the page loads and (2) initiate the CSS transition. Here’s what the CSS looks like:

#content.loading { background: url(spinner.gif) no-repeat }
#content.loading p { opacity: 0 }
#content p { opacity: 1 }
.csstransitions #content p {
-webkit-transition: opacity 0.6s ease;
-moz-transition: opacity 0.6s ease;
-o-transition: opacity 0.6s ease;
}

You’ll notice the .csstransitions rule will only be applied to browsers that support it, leaving others to simply toggle opacity. Now let’s look at the JS which handles the loading class and the jQuery fade for other browsers:

$(window).load(Site.didLoad);
var Site = {
didLoad: function() {
var $content = $(‘#content’);
$content.removeClass(‘loading’);
// If the browser doesn’t support transitions use jQ to fade in
(!Modernizr.csstransitions) && $content.hide().fadeIn(‘slow’);
}
};

With that code in place, both sets of users will have #content paragraph elements faded in with either transforms or jQuery. One might argue that it’s a little redundant to target your CSS this way (browsers that do not support new features usually just ignore the rules), but I think this approach is a lot more readable and easy to maintain—plus it helps you actively consider the experience of users with older browsers, rather than just setting and forgetting. Kudos to Paul and Faruk for the great script.

One last consideration

Since both of these approaches rely on JavaScript what if a user has it disabled? If we were to leave the CSS as-is all <p> elements would be hidden from the user. To account for this, I usually place a “no-js” class on the <html> element so I can apply specific CSS rules for users without JS. As a bonus, Modernizr changes this class to “js” automatically so you don’t have to.