Learning Modernizr

Learning Modernizr
eBook: $14.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $39.98    Print cover: $24.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • 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

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, Web Development, Open Source, Web Development

Table of Contents

Chapter 1: Getting Started with Modernizr
Chapter 2: Installing Modernizr
Chapter 3: Using Modernizr the Right Way
Chapter 4: Customizing to Your Unique Needs
  • 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

          Adam Watson

          Adam Watson began life as a guitar maker but quickly transitioned into tech after landing a firmware-testing gig at Hewlett Packard. After getting a taste of the tech life, he began designing and coding websites in early 2000. Now, he works for BUZZMEDIA, a leading pop-culture company developing a mobile face for the company network of more than 40 music and pop-culture websites. He has also helped in writing the official Facebook plugin for WordPress, re-factoring portions of it a week before its official launch. BUZZMEDIA is the leader in pop-culture and has millennial audience reach. It's the world's fastest-growing digital media company, with more than 100 million monthly unique visitors. Over 35 BUZZMEDIA brands including SPIN, Celebuzz, Stereogum, Buzznet, The Superficial, Idolator, Just Jared, Just Jared Jr., PureVolume, The Hype Machine, AbsolutePunk, What Would Tyler Durden Do?, SocialiteLife, Go Fug Yourself, Pink is the New Blog, Gorilla vs. Bear, RCRD LBL, Videogum, TheFrisky, Egotastic!, Concrete Loop, Brooklyn Vegan, Crunktastical, Punknews.org, and others are category-leading, authentic, influential voices.
          Sorry, we don't have any reviews for this title yet.

          Code Downloads

          Download the code and support files for this book.

          Submit Errata

          Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


          - 2 submitted: last submission 12 Dec 2013

          Errata type: Typo | Page No: 16

          It is: We'll need it do do some light lifting before the DOM tree renders load feature detection and shimming

          It should be: We'll need it to do some light lifting before the DOM tree renders load feature detection and shimming


          Errata type: Technical | Page No: 13

          It is: As of April 2012, no single browser had more than 25 percent of the market share, as seen in the following screenshot:

          It should be: As of April 2012, no single browser had more than 30 percent of the market share, as seen in the following screenshot:

          Sorry, there are currently no downloads available for this title.

          Frequently bought together

          Learning Modernizr +    Mastering Sublime Text =
          50% Off
          the second eBook
          Price for both: $22.80

          Buy both these recommended eBooks together and get 50% off the cheapest eBook.

          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.


          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.

          Code Download and Errata
          Packt Anytime, Anywhere
          Register Books
          Print Upgrades
          eBook Downloads
          Video Support
          Contact Us
          Awards Voting Nominations Previous Winners
          Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
          Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software