Learning Modernizr by Watson, Adam -- Read -- Imperial Library of Trantor

Index

Learning Modernizr

Table of Contents Learning Modernizr Credits About the Author About the Reviewers www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe? Free Access for Packt account holders

Preface

What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support

Downloading the example code Errata Piracy Questions

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

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

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

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

← Prev
Back
Next →

← Prev
Back
Next →