Home arrow Style Sheets arrow Local Storage and Web Workers in HTML5 and CSS3
STYLE SHEETS

Local Storage and Web Workers in HTML5 and CSS3


Modernizr is a lightweight JavaScript library which lets you use some of the most appealing features of CSS3 and HTML5 without needing to worry about browser compatibility.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
May 17, 2011
TABLE OF CONTENTS:
  1. · Local Storage and Web Workers in HTML5 and CSS3
  2. · utilizing Modernizr with HTML5 local storage

print this article
SEARCH DEVARTICLES

Local Storage and Web Workers in HTML5 and CSS3
(Page 1 of 2 )

The real power of Modernizr relies on its simplicity, as all that it does is check if the browser supports a specific CSS3 or HTML5 property/feature. Based on the results produced by this “sniffing” process, the library adds a dynamic CSS class (or JavaScript property) to the web page’s <html> tag, which can be used by the web designer for things such as adding shadows to a bunch of HTML elements, changing their opacity, or simply saving data in the browser.

To illustrate how to use the library in a some "use" cases, in earlier installments of this series I created some basic examples which showed how easy it is to utilize (conditionally) some handy CSS3 properties, such as “text-shadow”, “background”, “border-radius” and “transform”. In each example, styling an HTML element with the mentioned properties was reduced to using the set of CSS classes that Modernizr generated on the fly. Nothing more, nothing less.

If you missed any of this series, or would like to refresh your memory, you can view the articles here:

In addition, the library also allows the conditional use of some popular HTML5 features, including local storage and web workers. Given that, in this last tutorial of the series I’ll be coding a couple more simple examples, which will demonstrate how to check for the existence of these HTML5 objects.

Using Modernizr  with the “transform” CSS3 property

If you haven’t had the chance to take a look at the previous parts of the series, below I reintroduce the source files corresponding to this example, so that you can grasp its underlying logic.

First off, here’s the web page that loads the library at the beginning, in order to conditionally assign the aforementioned property to a few trivial containers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using Modernizr with the 'transform' CSS3 property</title>
<script src="modernizr-1.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
    <h1>Using Modernizr with the 'transform' CSS3 property</h1>
    <div class="container">
        <h2>This is a sample heading element</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div class="container">
        <h2>This is a sample heading element</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div class="container">
        <h2>This is a sample heading element</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

The structure of the above web page speaks for itself. So move on and take a peek at the following CSS file, which when used with a browser that understands the “transform” property (a good example of this is Firefox) will rotate the sample containers 3 degrees clockwise.

Here’s the file in question:

(styles.css)

body {
    padding: 0;
    margin: 0;
    background: #000;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
#wrapper {
    width: 920px;
    padding: 20px;
    margin: 0 auto;
    background: #585858;
}
h1 {
    font-size: 3.2em;
    color: #fff;
}
 h2 {
    font-size: 2em;
    color: #585858;
}
/* Using default styles */
.container {
    width: 360px;
    padding: 20px;
    margin-bottom: 30px;
    background: #ccc;
    border: 5px solid #fff;
}
.csstransforms .container {
    transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
}

Considering that Modernizr has effectively created behind the scenes a CSS class called “csstransforms”, the 2D transformation applied to the sample containers will produce the following output:



Not too bad, huh? As the earlier code fragment shows, Modernizr makes it really easy to conditionally style one or more HTML elements, based on the support that the browser offers for a given CSS3 property. But, hang on a second! What would happen in the previous web page if it was rendered on a browser that doesn’t understand 2D CSS transformations?

In such a case, the library will append to the DOM a class called “no-csstransforms”, something that allows you to assign to the targeted containers some fallback styles. The following snippet shows how to use this class in a fairly helpful fashion. Take a look at it:

body {
    padding: 0;
    margin: 0;
    background: #000;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
#wrapper {
    width: 920px;
    padding: 20px;
    margin: 0 auto;
    background: #585858;
}
h1 {
    font-size: 3.2em;
    color: #fff;
}
 h2 {
    font-size: 2em;
    color: #585858;
}
/* Using default styles */
.csstransforms .container {
    width: 360px;
    padding: 20px;
    margin-bottom: 30px;
    background: #ccc;
    border: 5px solid #fff;
    transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
}
.no-csstransforms .container {
    width: 360px;
    padding: 20px;
    margin-bottom: 30px;
    background: #ccc;
    border: 5px solid #fff;
}

Mission accomplished, at least with reference to using Modernizr with some popular CSS3 properties. But, don’t get too relaxed because still we’re not done covering all that the library brings to the table. As you’ll surely recall from the introduction, asides from checking if the browser supports some CSS features, Modernizr creates on the fly a JavaScript object called… yes, Modernizr too!

The purpose of doing this is simply to add to the pertinent object specific properties that reflect if the browser understands some HTML5 features, such as local storage, web workers, web sockets and so forth (you can see the full list of HTML5 characteristics that the library checks here [http://www.modernizr.com/docs/]).

In the following section I’ll be setting up a whole new example, which will demonstrate how to determine if the browser is capable of handling the powerful “localStorage” object.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials