Learning Modernizr

Create forward-compatible websites using feature detection features of Modernizr with this book and ebook.

Learning Modernizr

Adam Watson

Create forward-compatible websites using feature detection features of Modernizr with this book and ebook.
Mapt Subscription
FREE
$29.99/m after trial
eBook
$10.00
RRP $14.99
Save 33%
Print + eBook
$24.99
RRP $24.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$10.00
$24.99
$29.99p/m after trial
RRP $14.99
RRP $24.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781782160229
Paperback118 pages

Book Description

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.

Table of Contents

Chapter 1: Getting Started with Modernizr
Detect and design with features, not User Agents (browsers)
Focusing on features, not browsers
Summary
Chapter 2: Installing Modernizr
Creating the foundation
Downloading the Modernizr library
Blocking versus non blocking
Styling the page
Determining the base experience
The core HTML
Google fonts API
The CSS
Summary
Chapter 3: Using Modernizr the Right Way
Frame 1 – swapping images for CSS
Frame 2 – multiple backgrounds, text shadow, and RGBA color
Frame 3 – box reflect, HSLA color, and generated content
Frame 4 – animations
Frame 5 – putting it all together and making it rain
Summary
Chapter 4: Customizing to Your Unique Needs
Customizing Modernizr
Media queries with Modernizr.mq
Respond
Further reading and resources
Summary

What You Will Learn

  • 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

Authors

Table of Contents

Chapter 1: Getting Started with Modernizr
Detect and design with features, not User Agents (browsers)
Focusing on features, not browsers
Summary
Chapter 2: Installing Modernizr
Creating the foundation
Downloading the Modernizr library
Blocking versus non blocking
Styling the page
Determining the base experience
The core HTML
Google fonts API
The CSS
Summary
Chapter 3: Using Modernizr the Right Way
Frame 1 – swapping images for CSS
Frame 2 – multiple backgrounds, text shadow, and RGBA color
Frame 3 – box reflect, HSLA color, and generated content
Frame 4 – animations
Frame 5 – putting it all together and making it rain
Summary
Chapter 4: Customizing to Your Unique Needs
Customizing Modernizr
Media queries with Modernizr.mq
Respond
Further reading and resources
Summary

Book Details

ISBN 139781782160229
Paperback118 pages
Read More

Read More Reviews

Recommended for You

Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
Twitter Bootstrap Web Development How-To Book Cover
Twitter Bootstrap Web Development How-To
$ 12.99
$ 9.10
Responsive Web Design by Example : Beginner's Guide Book Cover
Responsive Web Design by Example : Beginner's Guide
$ 26.99
$ 10.00
Learning jQuery, Third Edition Book Cover
Learning jQuery, Third Edition
$ 23.99
$ 10.00
Learning Underscore.js Book Cover
Learning Underscore.js
$ 31.99
$ 10.00