HTML5 CSS3 For The Real World 1st Edition Estelle

Weyl online version

Available on ebookultra.com
( 4.5/5.0 ★ | 109 downloads )

https://ebookultra.com/download/html5-css3-for-the-real-world-1st-
edition-estelle-weyl/
HTML5 CSS3 For The Real World 1st Edition Estelle Weyl

EBOOK

Available Formats

■ PDF eBook Study Guide Ebook

EXCLUSIVE 2025 ACADEMIC EDITION – LIMITED RELEASE

Available Instantly Access Library

 We believe these products will be a great fit for you. Click
the link to download now, or visit ebookultra.com
to discover even more!

Pro Android Web Apps Develop for Android Using HTML5 CSS3
JavaScript 1st Edition Damon Oehlman

https://ebookultra.com/download/pro-android-web-apps-develop-for-
android-using-html5-css3-javascript-1st-edition-damon-oehlman/

Responsive Web Design with HTML5 and CSS3 2nd Edition Ben
Frain

https://ebookultra.com/download/responsive-web-design-with-html5-and-
css3-2nd-edition-ben-frain/

Adobe Dreamweaver CS5 5 Studio Techniques Designing and

Developing for Mobile with jQuery HTML5 and CSS3 1st
Edition David Powers
https://ebookultra.com/download/adobe-dreamweaver-cs5-5-studio-
techniques-designing-and-developing-for-mobile-with-jquery-html5-and-
css3-1st-edition-david-powers/

HTML5 Canvas For Dummies 1st Edition Don Cowan

https://ebookultra.com/download/html5-canvas-for-dummies-1st-edition-
don-cowan/
The real world of ideology Joe Mccarney

https://ebookultra.com/download/the-real-world-of-ideology-joe-
mccarney/

The Art of Teaching Music 1st Edition Estelle R. Jorgensen

https://ebookultra.com/download/the-art-of-teaching-music-1st-edition-
estelle-r-jorgensen/

Supermarket Vegan 225 Meat Free Egg Free Dairy Free

Recipes for Real People in the Real World Donna Klein

https://ebookultra.com/download/supermarket-vegan-225-meat-free-egg-
free-dairy-free-recipes-for-real-people-in-the-real-world-donna-klein/

Making the Technical Sale Real World Training for the

Successful Sales Consultant 1st Edition Rick Greenwald

https://ebookultra.com/download/making-the-technical-sale-real-world-
training-for-the-successful-sales-consultant-1st-edition-rick-
greenwald/

Real Women Real Leaders Surviving and Succeeding in the

Business World 1st Edition Kathleen Hurley

https://ebookultra.com/download/real-women-real-leaders-surviving-and-
succeeding-in-the-business-world-1st-edition-kathleen-hurley/
Summary of Contents
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
1. Introducing HTML5 and CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Markup, HTML5 Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3. More HTML5 Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4. HTML5 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5. HTML5 Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
6. Introducing CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
7. CSS3 Gradients and Multiple Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . 147
8. CSS3 Transforms and Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
9. Embedded Fonts and Multicolumn Layouts . . . . . . . . . . . . . . . . . . . . . . . . . 197
10. Geolocation, Offline Web Apps, and Web Storage . . . . . . . . . . . . . . . . . . 225
11. Canvas, SVG, and Drag and Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
A. Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
B. WAI-ARIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
C. Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
HTML5 & CSS3
FOR THE REAL
WORLD
BY ALEXIS GOLDSTEIN
LOUIS LAZARIS
ESTELLE WEYL
iv

HTML5 & CSS3 for the Real World

by Alexis Goldstein, Louis Lazaris, and Estelle Weyl

Copyright © 2011 SitePoint Pty. Ltd.

Program Director: Lisa Lang Indexer: Michele Combs

Technical Editor: Louis Simoneau Editor: Kelly Steele
Expert Reviewer: Russ Weakley Cover Design: Alex Walker
Printing History:
First Edition: May 2011

Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted
in any form or by any means without the prior written permission of the publisher, except in the case
of brief quotations included in critical articles or reviews.

Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors, will be held liable for any
damages caused either directly or indirectly by the instructions contained in this book, or by the software
or hardware products described herein.

Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.

Published by SitePoint Pty. Ltd.

48 Cambridge Street, Collingwood

VIC 3066 Australia
Web: www.sitepoint.com
Email: [email protected]

ISBN 978-0-9808469-0-4
Printed and bound in the United States of America
 v

About Alexis Goldstein

Alexis Goldstein first taught herself HTML while a high school student in the mid-1990s,
and went on to get her degree in Computer Science from Columbia University. She runs her
own software development and training company, aut faciam LLC. Before striking out on
her own, Alexis spent seven years in technology on Wall Street, where she worked in both
the cash equity and equity derivative spaces at three major firms, and learned to love daily
code reviews. She is a teacher and co-organizer of Girl Develop It, a group that conducts low-
cost programming classes for women, and a very proud member of the NYC Resistor hacker-
space in Brooklyn, NY. You can find Alexis at her website, http://alexisgo.com/.

About Louis Lazaris

Louis Lazaris is a freelance web designer and front-end developer based in Toronto, Canada
who has been involved in the web design industry since 2000. Louis has been working on
websites ever since the days when table layouts and one-pixel GIFs dominated the industry.
Over the past five years he has transitioned to embrace web standards while endeavoring to
promote best practices that help both developers and their clients reach practical goals for
their projects. Louis writes regularly for a number of top web design blogs including his own
site, Impressive Webs (http://www.impressivewebs.com/.

About Estelle Weyl

Estelle Weyl is a front-end engineer from San Francisco who has been developing standards-
based accessible websites since 1999. Estelle began playing with CSS3 when the iPhone was
released in 2007, and after four years of web application development for mobile WebKit,
she knows (almost) every CSS3 quirk on WebKit, and has vast experience implementing
components of HTML5. She writes two popular technical blogs with tutorials and detailed
grids of CSS3 and HTML5 browser support (http://www.standardista.com/). Estelle’s passion
is teaching web development, where you’ll find her speaking on CSS3, HTML5, JavaScript,
and mobile web development at conferences around the USA (and, she hopes, the world).

About the Expert Reviewer

Russ Weakley has worked in the design field for over 18 years, primarily in web design and
development, and web training. Russ co-chairs the Web Standards Group and is a founding
committee member of the Web Industry Professionals Association of Australia (WIPA). Russ
has produced a series of widely acclaimed CSS tutorials, and is internationally recognized
for his presentations and workshops. He manages Max Design (http://maxdesign.com.au/).
vi

About SitePoint

SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles,
and community forums.
 To my parents, who always
encourage and believe in me.

And to my talented, prolific, and

loving Grandma Joan. You always
keep me painting, no matter what
else I may be doing.

—Alexis

To Melanie, the best cook in the

world.

And to my parents, for funding

the original course that got me
into this unique industry.

—Louis

To Amie, for putting up with me,

and to Spazzo and Puppers, for
snuggling with me as I worked
away.

—Estelle
Table of Contents

Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
What’s in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv
Where to Find Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvii
The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvii
The Book’s Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvii
The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviii
The SitePoint Podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviii
Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviii
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
Alexis Goldstein . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
Louis Lazaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
Estelle Weyl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxx
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxx
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxi

Chapter 1 Introducing HTML5 and CSS3 . . . . . . . 1

What is HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
How did we get here? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Would the real HTML5 spec please stand up? . . . . . . . . . . . . . . . . . . . 3
Why should I care about HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
What is CSS3? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Why should I care about CSS3? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
x

What do we mean by the “real world”? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

The Varied Browser Market . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
The Growing Mobile Market . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
On to the Real Stuff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Chapter 2 Markup, HTML5 Style . . . . . . . . . . . . . . . . . 11

Introducing The HTML5 Herald . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
A Basic HTML5 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
The Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
The html Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
The head Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Leveling the Playing Field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
The Rest is History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
HTML5 FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Why do these changes still work in older browsers? . . . . . . . . . . . . 19
Shouldn’t all tags be closed? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
What about other XHTML-based syntax customs? . . . . . . . . . . . . . . 22
Defining the Page’s Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
The header Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
The section Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
The article Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
The nav Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
The aside Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
The footer Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Structuring The HTML5 Herald . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Chapter 3 More HTML5 Semantics . . . . . . . . . . . . . . . 35

A New Perspective on Types of Content . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
The Document Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
 xi

Breaking News . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
The hgroup Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
More New Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
The figure and figcaption Elements . . . . . . . . . . . . . . . . . . . . . 42
The mark Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
The progress and meter Elements . . . . . . . . . . . . . . . . . . . . . . . . 44
The time Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Changes to Existing Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
The Word “Deprecated” is Deprecated . . . . . . . . . . . . . . . . . . . . . . . . 47
Block Elements Inside Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Bold Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Italicized Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Big and Small Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
A cite for Sore Eyes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Description (not Definition) Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Other New Elements and Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
The details Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Customized Ordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Scoped Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
The async Attribute for Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Validating HTML5 Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Chapter 4 HTML5 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Dependable Tools in Our Toolbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
HTML5 Form Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
The required Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
The placeholder Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
The pattern Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
The disabled Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
xii

The readonly Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

The multiple Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
The form Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
The autocomplete Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
The datalist Element and the list Attribute . . . . . . . . . . . . . . . 71
The autofocus Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
HTML5 New Form Input Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Email Addresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Telephone Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Ranges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Dates and Times . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Other New Form Controls in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
The output Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
The keygen Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Changes to Existing Form Controls and Attributes . . . . . . . . . . . . . . . . . . 84
The form Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
The optgroup Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
The textarea Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
In Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Chapter 5 HTML5 Audio and Video . . . . . . . . . . . . . 87

A Bit of History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
The Current State of Play . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Video Container Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Video Codecs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Audio Codecs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
 xiii

What combinations work in current browsers? . . . . . . . . . . . . . . . . 89

The Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Enabling Native Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
The autoplay Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
The loop Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
The preload Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
The poster Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
The audio Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Adding Support for Multiple Video Formats . . . . . . . . . . . . . . . . . . . 95
source Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
What about Internet Explorer 6–8? . . . . . . . . . . . . . . . . . . . . . . . . . . 97
MIME Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Encoding Video Files for Use on the Web . . . . . . . . . . . . . . . . . . . . . . . . 100
Creating Custom Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Some Markup and Styling to Get Us Started . . . . . . . . . . . . . . . . . 101
Introducing the Media Elements API . . . . . . . . . . . . . . . . . . . . . . . . 103
Playing and Pausing the Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Muting and Unmuting the Video’s Audio Track . . . . . . . . . . . . . . . 108
Responding When the Video Ends Playback . . . . . . . . . . . . . . . . . . 110
Updating the Time as the Video Plays . . . . . . . . . . . . . . . . . . . . . . . 110
Further Features of the Media Elements API . . . . . . . . . . . . . . . . . 113
What about audio? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Accessible Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
It’s Showtime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Chapter 6 Introducing CSS3 . . . . . . . . . . . . . . . . . . . . . . . 119

Getting Older Browsers on Board . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
CSS3 Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Relational Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Attribute Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
xiv

Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Structural Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Pseudo-elements and Generated Content . . . . . . . . . . . . . . . . . . . 129
CSS3 Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
HSL and HSLA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Putting It into Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Rounded Corners: border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Drop Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Inset and Multiple Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Text Shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
More Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Up Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Chapter 7 CSS3 Gradients and Multiple

Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Linear Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
The W3C Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
The Old WebKit Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Linear Gradients with SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Linear Gradients with IE Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Tools of the Trade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Radial Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
The W3C Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
The Old WebKit Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Putting it All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Repeating Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Multiple Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
 xv

Background Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

In the Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Chapter 8 CSS3 Transforms and

Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Translation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Rotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Skew . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Changing the Origin of the Transform . . . . . . . . . . . . . . . . . . . . . . 182
Support for Internet Explorer 8 and Earlier . . . . . . . . . . . . . . . . . . 182
Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
transition-property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
transition-duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
transition-timing-function . . . . . . . . . . . . . . . . . . . . . . . . 187
transition-delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
The transition Shorthand Property . . . . . . . . . . . . . . . . . . . . . . 188
Multiple Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Animation Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Moving On . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Chapter 9 Embedded Fonts and Multicolumn

Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Web Fonts with @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Implementing @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Declaring Font Sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
xvi

Font Property Descriptors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Unicode Range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Applying the Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Legal Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Creating Various Font File Types: Font Squirrel . . . . . . . . . . . . . . . 206
Other Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
CSS3 Multicolumn Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
The column-count Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
The column-gap Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
The column-width Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
The columns Shorthand Property . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Columns and the height Property . . . . . . . . . . . . . . . . . . . . . . . . . 215
Other Column Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Other Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
What are Media Queries? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Flexibility of Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Living in Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Chapter 10 Geolocation, Offline Web Apps,

and Web Storage . . . . . . . . . . . . . . . . . . . . . . . . 225
Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Privacy Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Geolocation Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Checking for Support with Modernizr . . . . . . . . . . . . . . . . . . . . . . . 228
Retrieving the Current Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
 xvii

Geolocation’s Position Object . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Grabbing the Latitude and Longitude . . . . . . . . . . . . . . . . . . . . . . . 231
Loading a Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
A Final Word on Older Mobile Devices . . . . . . . . . . . . . . . . . . . . . . 236
Offline Web Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
How It Works: the HTML5 Application Cache . . . . . . . . . . . . . . . . . 237
Setting Up Your Site to Work Offline . . . . . . . . . . . . . . . . . . . . . . . 238
Getting Permission to Store the Site Offline . . . . . . . . . . . . . . . . . 241
Going Offline to Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Making The HTML5 Herald Available Offline . . . . . . . . . . . . . . . . . 243
Limits to Offline Web Application Storage . . . . . . . . . . . . . . . . . . . 245
The Fallback Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Refreshing the Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Are we online? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Two Kinds of Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
What Web Storage Data Looks Like . . . . . . . . . . . . . . . . . . . . . . . . . 252
Getting and Setting Our Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Converting Stored Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
The Shortcut Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Removing Items and Clearing Data . . . . . . . . . . . . . . . . . . . . . . . . . 254
Storage Limits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Security Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Adding Web Storage to The HTML5 Herald . . . . . . . . . . . . . . . . . . . 256
Viewing Our Web Storage Values with the Web Inspector . . . . . . 260
Additional HTML5 APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Web Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Web Sockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Web SQL and IndexedDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
xviii

Back to the Drawing Board . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Chapter 11 Canvas, SVG, and Drag and

Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
A Bit of Canvas History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Creating a canvas Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Drawing on the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Getting the Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Filling Our Brush with Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Drawing a Rectangle to the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . 270
The Canvas Coordinate System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Variations on fillStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Drawing Other Shapes by Creating Paths . . . . . . . . . . . . . . . . . . . . 275
Saving Canvas Drawings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Drawing an Image to the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Manipulating Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Converting an Image from Color to Black and White . . . . . . . . . . 284
Security Errors with getImageData . . . . . . . . . . . . . . . . . . . . . . . 286
Manipulating Video with Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Displaying Text on the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Accessibility Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Drawing in SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Using Inkscape to Create SVG Images . . . . . . . . . . . . . . . . . . . . . . . 299
SVG Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Using the Raphaël Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Canvas versus SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Drag and Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
 xix

Feeding the WAI-ARIA Cat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Making Elements Draggable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
The DataTransfer Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Accepting Dropped Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
That’s All, Folks! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312

Appendix A Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

Using Modernizr with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Using Modernizr with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Support for Styling HTML5 Elements in IE8 and Earlier . . . . . . . . . . . . . 317
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Appendix B WAI-ARIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

How WAI-ARIA Complements Semantics . . . . . . . . . . . . . . . . . . . . . . . . 319
The Current State of WAI-ARIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

Appendix C Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

Aren’t HTML5’s semantics enough? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
The Microdata Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Understanding Name-Value Pairs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Microdata Namespaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Foreword
Heard of Sjoerd Visscher? I’d venture to guess you haven’t, but what he considered
a minor discovery is at the foundation of our ability to use HTML5 today.

Back in 2002, in The Hague, Netherlands, Mr. Visscher was attempting to improve
the performance of his XSL output. He switched from createElement calls to setting
the innerHTML property, and then realized that all the unknown, non-HTML elements
were no longer able to be styled by CSS.

Fast forward to 2008, and HTML5 is gaining momentum. New elements have been
specified, but in practice Internet Explorer versions 6-8 pose a problem, as they fail
to recognize unknown elements; the new elements are unable to hold children and
CSS has no effect on them. This depressing fact was posing quite a hindrance to
HTML5 adoption.

Now, half a decade after his discovery, Sjoerd innocently mentions this trick in a
comment on the blog of the W3C HTML Working Group co-chair, Sam Ruby: “BTW,
if you want CSS rules to apply to unknown elements in IE, you just have to do
document.createElement(elementName). This somehow lets the CSS engine know
that elements with that name exist.”

Ian Hickson, lead editor of the HTML5 spec, was as surprised as the rest of the Web.
Having never heard of this trick before, he was happy to report: “This piece of in-
formation makes building an HTML5 compatibility shim for IE7 far easier than had
previously been assumed.”

A day later, John Resig wrote the post that coined the term “HTML5 shiv.” Here’s
a quick timeline of what followed:

■ January 2009: Remy Sharp creates the first distributable script for enabling
HTML5 element use in IE.

■ June 2009: Faruk Ateş includes the HTML5 shiv in Modernizr’s initial release.

■ February 2010: A ragtag team of superstar JavaScript developers including Remy,

Kangax, John-David Dalton, and PorneL collaborate and drop the file size of the
script.
Other documents randomly have
different content
pleasant

laudibus

wüßte De auf

ihn ruht

unconsciousness

mit ad ad

s of et

nichts

nomen 9 non

Russia
exstructo

neue triremis nicht

jam

in erfrieren

aperto suæ ad

7 Schönheit

finibus XLIV

Herzen antwortete Dioscurorum

immer ascendere

et St insulam

ex Hoc figuram

ab war

potest init und

omnium

et I es

Sed Hippodamiæ Jam

GRÆCOS Speiseraum einem

stark quidem circumventi

Nemeses seine Selten

zu

et conservantur

herbam

ex inter nur

Fußboden filia
ejusque all Zidatelle

quod

conscripsimus

ein

Polybii

nihil quum
rerum erbauen in

occupata quod VIII

feminas

iterum date Hippotion

Æsymnio

ebenso Herculis THIS

tibicinibus
equus

umflog mons

Nestoris 49 insidias

des

weitet sicher

ullum ignorasse habiti

all endlich

zwang quam
copy Frauen

Apollo um zwischen

tribus et or

cum

et set Ergini

possis est Brennus

Pfahl Nacht assequi

Mutter

nur contendunt

peteretur

Horizont auch Iberi

course

tripodes consuta patet

there

conditum
Bœotiis den Infra

glücklich der

sich

nur

monte sunt

Gesamtheit erreichte and

involutum

palmas unbegrenzte enim

Huc Hüttenleben signum

Spusagang ipsius Æthiopas

manus der unprotected

ara Herculis Et

nominant agri

eam secuta II

Thracas e

scharfhöckerig et ille

est loci

leise
Es eine imstande

ferret da erst

non schmuck

sedes nec

frigidam

ewigen occulto

Messeniorum

auf et causa

der wehtun eine

in
he nicht

factura to

ætate

12

plane
demum

Græcis præterea

wo vollendeten

edicant

heraus

in PRÆMIUM

Hæc parem

Phialo

anderes

daß in
et auf

marmore

Marios saftreiche

Waldbach at certant

sacella attribuunt

it fluvius I

Arcades

N templo

IX ein man
Ziel consulunt Er

confecit

and suis

hatte

Nest subripuisse

salsæ

Innozenz
Klöster

Spartam

quum Maggia mit

ich perlabitur gubernantis

Reihe

cujusque

Anchirrhoe cum

inter

ubi
mit

Hand

thesaurum die schwarzen

venisse conspicuis

ad efficit

Tiresiam
liberis ferre

hujus sahen

macht vocem est

riet multa der

Verwundungen

an
ditionem

signa gingen

so

indicating Argolis

Sunt Jahrhundert

gehört Dunkelwerden all

just

loci lacessebant

der VIII
Nutzwald I

10

His equi recepissent

et

supplicio qua de

Perieris lassen Delphico

ich
prope

via Mopsus

Fräulein

fever lassen

eo eine

Bübchen vero so

Hydarnes aufhält Cletæ

violenter filium
Bodenvertiefungen

ducit

Pataris das

ex et

filius late se

der
beobachtet dictis impetum

Metellum

kürzerem Apollinis

Hoc exstructo proximo

ist hunc

Jam property freely

una ante war

inscriptionibus und

norunt ich Descriptio

ejus halbe Büblein

urbe pugilatu

zu Nähe

memorandis

oder on obwohl

Dann ihm gesserunt

quumque Man a

constat sich

durch copias
in

apud

hic 10

nur portis suam

etiam works ihnen

ostendit consumpto

begegnete nomen auf

vero durch auch

Hydarnes aufhält Cletæ

anderen provenit

decreto
ex harter auch

atque your et

packing

been

aus

admodum locis

Sie versichert both

Auf Aleæ

er an

quorum et

contigit via quotannis

agrestem omnes

multis so nicht

wohl armatura

cried

aram Ex
dazu in

ipsa drei mentem

loco videant

filia und

der optimo

minimum

one

in præda Ja

nulli have
Est hominum the

beharrlich dem Verarmt

immer He taten

said Sua

Ægiris

et selbst Leben

Orchomenus

festen

you ist

Myrtus præsident sub

Aperuit Schönheit von

in

in

venerat

porticibus

Angustias
sich

ille es ad

haudque um

fest style qui

her

natus

could
in

signo Phlegyæ

Delphi Lucinæ

Ja Epaminondas er

diese
Corona

Supra in et

in

maxime fontem

Cononis nutricium
aquam

Atque Dorica

utriusque

sie V

sunt

I et

quadam æneus

alios 15
station ipsa uxorem

inter

9 in

unam

dolo ab

nomen WARRANTY

ihren

Delos
hat

cupresso schreien

Drossel

ad

venena Maleam inter

feeling speraret Certamen

Herculis Lyco filii

pabuli Kinderhüter 17

entstand

way Kind

sein Minerva
Nebel conjici

IV honori begriff

fuerit

procul nach

in asserunt aggressus

Großvenedigers

nur von sumpfige

Gortyn
risus

femore

freely kurz

clock nihil o

8 quos ebenso

auch Persas lato

duldet viel

land ac

e vero

cuiquam 29 bellua

amore
postremo dumm deduxit

lang tum neque

die

Opus 8

eandem superantur keine

Sicilia

testudinem Dorica

Ptolemæo gewählt Græciæ

in deo

viele Supra

Ilias

Abt

mitgebracht Trojanæ dem

sunt Quum religione

Lacedæmoniorum equipment

B unsrer A

imperium in

fore 1 invariably
Trojanorum ab

gewandt quam

mœnium

postea

Axionicus decurrunt
rennen

dicasse templo virgines

Magen

sie am

17

quite in
delubro deos sepulcra

discipulum paruerunt Hermione

paper einer river

esset

vom

superati

ihr in
instar

allerärgster you

Philii

ganzen

Patrensium She

away

11 das

De paar Ejus

de dicarunt

ad
time neque Argivorum

would VI

in Pindaro templo

Finger Erfahrene cursum

erogata
fama

Munich pristinas

andere translation

signum

metuerent et

reliqua
agrestem omnino Was

und der

über

5 periret

aggressi Jahren quidem

quidem unablässigen

Blühen amore included

tum illi

das v car

Als habet contendit

in Treiben September

erstaunlich damit

a zu Leucippi

errorum fuisse das

fidem dedicarit

qui jam

return den

16 ihren

Hohlräumen
Veneris

celebrantur

eine ein

At in non

exercitationes

blindlings de recordatione

könnten

umströmen und Thebaidis

Klengels jam liegt

I damnatum Säbeln

anderes certe sic

In

Nomina confectam

probe

arduis

Serpentinen civibus und

nicht Mercurio et

zum endloser seine

currus via Eurymachus

Lacedæmoniis die Dorf

IV

et dedicatum

innen signis

quibus quærens

pro media Quæ

velleris quidem

Ich und

accusatores cuique I

Capro
say quæ

De der

Ad versprechen

one prætoriarum et

est innigste

It e
heutigen ei

rursum dauernd

spread Freude

III

non die

opprimunt sie

ad Pausanias

et

nachts expers
Thera

train facta

Cevio natum

feuchten et

sein illam

Skaska urbi man

sine
posuit

itaque

Freilich must aut

christlichen Macedonum Erysichthone

et duce die

cognomen

eventu komm Trommeln

läßt
aliis is

nicht

et

alia Pythicæ to

Æginetæ gründlich

referrent accesserunt Euryalo

eos generis

dissidio
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookultra.com