Packt.Learning Modernizr.2012

Book Details

Language :  English
Paperback : 118 pages [ 235mm x 191mm ]
Release Date : December 2012
ISBN : 1782160221
ISBN 13 : 9781782160229
Author(s) : Adam Watson
Topics and Technologies :  All Books, Open Source, Web Development

Overview

• Build a progressive experience using a vast array of detected CSS3 features 
• Replace images with CSS based counterparts
• Learn the benefits of detecting features instead of checking the name and version of the browser and serving accordingly

What you will learn from this book

• Perform feature detection with the Modernizr JavaScript library
• Use HTML classes to alter the look of the page based on features found
• Check for features using JavaScript 
• Design for the future as well as the past 
• Explore how feature detection differs from User Agent Detection
• The difference between blocking versus nonblocking scripts
• Create various backgrounds using multiple backgrounds and gradients
• Draw and animate CSS3 clouds that literally rain features
• Automatically generate vendor prefixes
• Use CSS to draw and animate an assortment of shapes and shadows

In Detail

Modern web browsers support a whole range of new HTML5 and CSS3 features that make web development fun. But supporting old browsers can make a web developer's life difficult. With HTML5 Modernizr, you can check for features and deliver a design around them that is not only backward, but also forward compatible.
"Learning Modernizr" will guide you step by step through the process of converting to a feature rich CSS3 experience using the Modernizr feature detection JavaScript library. With this book, you can take an image-based design and gradually convert it to be 100 percent CSS based using Modernizr to detect feature support.
You will also learn how to implement the bulk of today’s leading CSS3 features not limited to animations, text shadow, content generation, and more. You will also learn to change the page using media queries to determine the dimensions of the page and alter the content accordingly as well as HTML5 features such as localstorage so you can save content to the browser.
You will learn everything you need to know in order to design progressively using feature detection. Prepare your design to not just handle legacy browsers, but additionally for the HTML5 standard features you know will be added into subsequent versions of the browser.

Approach

Written in an engaging, easy-to-follow style, "Learning Modernizr" is a practical guide for using the feature detection features of HTML5 Modernizr to create forward compatible sites.

Who this book is for

"Learning Modernizr" is great for developers looking for a broad range of use cases for feature detection. It is particularly meant for web developers who want to take advantage of the cool new HTML5 and CSS5 features but at the same time deliver a design that is not only backward, but forward compatible.

Table of Contents

Preface
Chapter 1: Getting Started with Modernizr
Chapter 2: Installing Modernizr
Chapter 3: Using Modernizr the Right Way
Chapter 4: Customizing to Your Unique Needs
Index
Preface
Chapter 1: Getting Started with Modernizr
Detect and design with features, not User Agents (browsers)
The Modernizr namespace
Supporting features with CSS selectors
Focusing on features, not browsers
What's wrong with browser sniffing?
User Agent sniffing – a big headache and a little payoff
Summary
Chapter 2: Installing Modernizr
Creating the foundation
Using conditional comments
The no-js class
Downloading the Modernizr library
Verifying the script connection
Blocking versus non blocking
The async attribute
Blocking to allow shimming
Adding the navigation
The section frames
Styling the page
Smoother transitions with jQuery
Determining the base experience
Images for icons
Opacity
Hex colors
HTML5 semantic elements
Custom fonts
Fixed positioning
The core HTML
Google fonts API
The CSS
Summary
Chapter 3: Using Modernizr the Right Way
Frame 1 – swapping images for CSS
Keeping it WebKit, for now
The stripes
The curves
Clouds
Frame 2 – multiple backgrounds, text shadow, and RGBA color
RGBA
Text shadow
Frame 3 – box reflect, HSLA color, and generated content
HSL color
Box shadow
Converting the clouds to CSS
Extra credit – converting the Modernizr logo to CSS
Frame 4 – animations
Animating the clouds
Frame 5 – putting it all together and making it rain
Caveats
Vendor prefixing
Prefixing with Modernizer.prefixed
Summary
Chapter 4: Customizing to Your Unique Needs
Customizing Modernizr
The Modernizr.addTest plugin API
Modernizr.load
Using polyfills
Media queries with Modernizr.mq
Respond
Further reading and resources
jQuery's Best Friends
Require JS
Backbone JS
Underscore
HTML5 Rocks
Summary
Index

Download

Depositfiles

By: Shahen Gasparyan