0%

Book Description

Create forward compatible websites using feature detection features of HTML5 Modernizr.

  • 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

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 HTML5 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

  1. Learning Modernizr
    1. Table of Contents
    2. Learning Modernizr
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started with Modernizr
      1. Detect and design with features, not User Agents (browsers)
        1. The Modernizr namespace
        2. Supporting features with CSS selectors
      2. Focusing on features, not browsers
        1. What's wrong with browser sniffing?
        2. User Agent sniffing – a big headache and a little payoff
      3. Summary
    9. 2. Installing Modernizr
      1. Creating the foundation
        1. Using conditional comments
        2. The no-js class
      2. Downloading the Modernizr library
        1. Verifying the script connection
      3. Blocking versus non blocking
        1. The async attribute
        2. Blocking to allow shimming
        3. Adding the navigation
        4. The section frames
      4. Styling the page
        1. Smoother transitions with jQuery
      5. Determining the base experience
        1. Images for icons
        2. Opacity
        3. Hex colors
        4. HTML5 semantic elements
        5. Custom fonts
        6. Fixed positioning
      6. The core HTML
      7. Google fonts API
      8. The CSS
      9. Summary
    10. 3. Using Modernizr the Right Way
      1. Frame 1 – swapping images for CSS
        1. Keeping it WebKit, for now
          1. The stripes
          2. The curves
          3. Clouds
      2. Frame 2 – multiple backgrounds, text shadow, and RGBA color
        1. RGBA
        2. Text shadow
      3. Frame 3 – box reflect, HSLA color, and generated content
        1. HSL color
        2. Box shadow
        3. Converting the clouds to CSS
        4. Extra credit – converting the Modernizr logo to CSS
      4. Frame 4 – animations
        1. Animating the clouds
      5. Frame 5 – putting it all together and making it rain
        1. Caveats
        2. Vendor prefixing
        3. Prefixing with Modernizer.prefixed
      6. Summary
    11. 4. Customizing to Your Unique Needs
      1. Customizing Modernizr
        1. The Modernizr.addTest plugin API
        2. Modernizr.load
          1. Using polyfills
      2. Media queries with Modernizr.mq
      3. Respond
      4. Further reading and resources
        1. jQuery's Best Friends
        2. Require JS
        3. Backbone JS
        4. Underscore
        5. HTML5 Rocks
      5. Summary
    12. Index