OReilly HTML5 Hacks (2013).pdf

HTML5 Hacks

Jesse Cravens and Jeff Burtoft

HTML5 Hacks

by Jesse Cravens and Jeff Burtoft

Printed in the United States of America.

Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

O’Reilly books may be purchased for educational, business, or sales promotional use. Online

editions are also available for most titles ( http://my.safaribooksonline.com ). For more informa-

tion, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreil

ly.com .

Editors: Simon St. Laurent and Meghan

Blanchette

Production Editor: Holly Bauer

Copyeditor: Audrey Doyle

Proofreader: Rachel Leach

Indexer: Judith McConville

Cover Designer: Mark Paglietti

Interior Designer: David Futato

Illustrator: Rebecca Demarest

November 2012:

First Edition

Revision History for the First Edition:

2012-11-09

First release

See http://oreilly.com/catalog/errata.csp?isbn=9781449334994 for release details.

Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks

of O’Reilly Media, Inc. HTML5 Hacks and related trade dress are trademarks of O’Reilly Media,

Inc.

Many of the designations used by manufacturers and sellers to distinguish their products are

claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc.,

was aware of a trademark claim, the designations have been printed in caps or initial caps.

While every precaution has been taken in the preparation of this book, the publisher and authors

assume no responsibility for errors or omissions, or for damages resulting from the use of the

information contained herein.

ISBN: 978-1-449-33499-4

[LSI]

Table of Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

1. Hacking the Semantic Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Hack 01. Simplify Your Doc with the Right <doctype> 1

Hack 02. Adopt Common Structures 2

Hack 03. Make Your New HTML5 Tags Render Properly in Older Browsers 5

Hack 04. Bring Back the <input> Tag 11

Hack 05. Easily Implement Form Validation Without JavaScript 16

Hack 06. Improve the Usability of Your Forms with New Controls 24

Hack 07. Know What’s Going On in Your App with New DOM Events 37

Hack 08. Add Rich Context to Your Markup with Custom Data 40

Hack 09. Track User Events with Custom Data 44

Hack 10. Make Your Page Consumable by Robots and Humans Alike with

Microdata 47

2. Hacking with Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Hack 11. Use Experimental CSS Features with Browser Prefixes 54

Hack 12. Design with Custom Fonts Using Web Fonts 56

Hack 13. Use Google Web Fonts for Simple @font-face Implementation 61

Hack 14. Use CSS3 Text Effects to Make Your Text Not Suck 70

Hack 15. Make Elements Appear Transparent Without Altering the Opacity 73

Hack 16. Use Media Queries to Build Responsive Design 77

Hack 17. Make Your Web App Respond to Device Orientation Changes 81

Hack 18. Take Full Control of Your DOM with Pseudoclasses 85

Hack 19. Hack Up Your Sprite and Put Your Images Inline with Image Data

URIs 87

Hack 20. Build Gradients the Easy Way 92

Hack 21. Make Borders Interesting Again, with Border Treatments 98

Hack 22. Set Multiple Background Images to the Same Element 103

Hack 23. Free Your Page Elements from Their Traditional Space with CSS3

Transforms 106

iii

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: