Home arrow JavaScript arrow Backgrounds with Javascript Modenizr for CSS3 and HTML5
JAVASCRIPT

Backgrounds with Javascript Modenizr for CSS3 and HTML5


As a result of the constant evolution in the field of modern web design, recently some brand new tools have been released that let you take advantage of the features that CSS3 and HTML5 bring to the table, without having to worry about browser compatability. In this tutorial, we will focus on the Javascript Modenizr Library and use it to work with the CSS "background" property.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
April 11, 2011
TABLE OF CONTENTS:
  1. · Backgrounds with Javascript Modenizr for CSS3 and HTML5
  2. · Multiple Background Images
  3. · Using the “multiplebgs” and “no-multiplebgs” CSS Classes

print this article
SEARCH DEVARTICLES

Backgrounds with Javascript Modenizr for CSS3 and HTML5
(Page 1 of 3 )

Contrary to what you might think, Modernizr does not do anything “magic”. It simply tests the browser and evaluates its capability for supporting over twenty different CSS3/HTML5 features. Based on the result of this check, the library adds to the web page’s <html> element a set of CSS clases (and some JavaScript objects as well) that indicate if the browser support is or is not a given feature. 

Moreover, if you already went through the first two articles of this series, you are probably well aware of how Modernizr does its business, as in those tutorials I developed some comprehensive examples that demonstrated how to take advantage of the library’s functionality, in order to perform conditional styling using the “text-shadow” and “box-shadow” CSS3 properties respectively. If you missed either of those tutorials, you can find them here:

As stated above, in this third installment of the series I’ll be showing how to put the library to work side by side with the enhanced version of the “background” CSS3 property. As you’ll see in the lines to come, Modernizr will append a couple of CSS classes named  “multiplebgs” and “no-multiplebgs” to the DOM , in accordance to the support that the browser offers for this property.

Taking the First Step: Defining a Basic Web Page

The first thing that we need to do is create a web page that includes the Modenizr library at the beginning. Since we will use the property to decorate some containers with four different background images (when possible), the pertaining page will have the following structure:  

<!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 multiple background images</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 multiple backgrounds</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>

Not that I want to sound like I’m bragging here or anything, but as I am sure you’ll agree, the above (X)HTML document is a simple to grasp, as it only defines three divs, which have been assigned a class called “container”. With this markup already set, the next step that must be taken is to use the abilities provided by Modernizr to conditionally style these containers using the aforementioned “background” property.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

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