HTML5 & CSS3 For The Real World

Name: HTML5 & CSS3 For The Real World | Powerful HTML5 and CSS3 Techniques You Can Use Today!
Brand: SitePoint
Price: 29.99 EUR
Availability: OnlineOnly

Powerful HTML5 and CSS3 Techniques You Can Use Today!

Alexis Goldstein(Autor*in)

SitePoint (Verlag)

Erschienen am 10. März 2015

350 Seiten

E-Book

PDF mit Adobe-DRM

Systemvoraussetzungen

978-1-4571-9279-1 (ISBN)

29,99 €inkl. 7% MwSt.

Systemvoraussetzungen

für PDF mit Adobe-DRM

E-Book Einzellizenz

Als Download verfügbar

Beschreibung

Weitere Details

Weitere Ausgaben

Inhalt

Cover
HTML5 & CSS3 for the Real World
Table of Contents
Preface
Who Should Read This Book
Conventions Used
Code Samples
Tips, Notes, and Warnings
Supplementary Materials
Acknowledgments
Alexis Goldstein
Louis Lazaris
Estelle Weyl
Want to Take Your Learning Further?
Introducing HTML5 and CSS3
What is HTML5?
How did we get here?
Would the real HTML5 please stand up?
Why should I care about HTML5?
What is CSS3?
Why should I care about CSS3?
What do we mean by "the Real World"?
The Current Browser Market
The Growing Mobile Market
On to the Real Stuff
Markup, HTML5 Style
Introducing The HTML5 Herald
A Basic HTML5 Template
The Doctype
The html Element
The head Element
Leveling the Playing Field
The Rest Is History
HTML5 FAQ
Why do these changes still work in older browsers?
Shouldn't all tags be closed?
What about other XHTML-based syntax customs?
Defining the Page's Structure
The header Element
The section Element
The article Element
The nav Element
The aside Element
The footer Element
Structuring The HTML5 Herald
The New main Element
Continuing to Structure The Herald
Wrapping Things Up
More HTML5 Semantics
A New Perspective on Content Types
The Document Outline
No More hgroup
More New Elements
The figure and figcaption Elements
The mark Element
The progress and meter Elements
The time Element
Changes to Existing Features
The Word "Deprecated" is Deprecated
Block Elements Inside Links
Bold Text
Italicized Text
Big and Small Text
A cite for Sore Eyes
Description (not Definition) Lists
Other New Elements and Features
The details Element
Customized Ordered Lists
Scoped Styles
The async Attribute for Scripts
The picture element
Other Notables
The Future of Markup - Web Components?
Validating HTML5 Documents
Summary
HTML5 Forms
Dependable Tools in Our Toolbox
HTML5 Form Attributes
The required Attribute
Styling Required Form Fields
The placeholder Attribute
Polyfilling Support with JavaScript
The pattern Attribute
The disabled Attribute
The readonly Attribute
The multiple Attribute
The form Attribute
The autocomplete Attribute
The datalist Element and the list Attribute
The autofocus Attribute
Input Types
Search
Email Addresses
URLs
Validation of URLs
Telephone Numbers
Numbers
Ranges
Colors
Dates and Times
Additional New Form Controls in HTML5
The progress and meter Elements
The output Element
The keygen Element
The contenteditable Attribute
Changes to Existing Form Controls
The form Element
The optgroup Element
The textarea Element
In Conclusion
HTML5 Video and Audio
A Bit of History
The Current State of Play
Video Container Formats
Video Codecs
Audio Codecs
The Markup
Enabling Native Controls
The autoplay Attribute
The loop Attribute
The preload Attribute
The poster Attribute
The muted Attribute
Adding Support for Multiple Video Formats
Source Order
What about browsers without support for HTML5 video?
Setting MIME Types
Encoding Video Files for Use on the Web
Creating Custom Video Controls
Some Markup and Styling for Starters
Introducing the Media Elements API
Playing and Pausing the Video
Muting and Unmuting the Video's Audio Track
Responding When the Video Ends Playback
Updating the Time as the Video Plays
Further Features of the Media Elements API
API Events
API Properties
What about audio?
Accessible Media
It's Showtime
Introducing CSS3
Getting Older Browsers on Board
CSS3 Selectors
Relational Selectors
Attribute Selectors
Pseudo-classes
Structural Pseudo-classes
Pseudo-elements and Generated Content
Generated Content
::selection
CSS3 Colors
RGBA
HSL and HSLA
Opacity
Putting It into Practice
Rounded Corners: border-radius
Drop Shadows
Inset and Multiple Shadows
Text Shadow
More Shadows
Up Next
CSS3 Gradients and Multiple Backgrounds
Linear Gradients
The W3C Syntax
The Prefixed Syntax
The Old WebKit Syntax
Putting It All Together
Linear Gradients with SVG
Linear Gradients with IE Filters
Tools of the Trade
Radial Gradients
The W3C Syntax
The Prefixed WebKit Syntax
Making Our Own Radial Gradient
Repeating Gradients
Multiple Background Images
Background Size
In the Background
CSS3 Transforms and Transitions
Transforms
Translation
Scaling
Rotation
Skew
Changing the Origin of the Transform
Support for Internet Explorer 8 and Earlier
Transitions
transition-property
The transition-duration Property
The transition-timing-function Property
The transition-delay Property
The transition Shorthand Property
Multiple Transitions
Animations
Keyframes
Animation Properties
animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-delay
animation-fill-mode
animation-play-state
The Shorthand animation Property
Moving On
Embedded Fonts and Multicolumn Layouts
Web Fonts with @font-face
@font-face rule
Implementing @font-face
Declaring Font Sources
Font Property Descriptors
The Unicode Range Descriptor
Applying the Font
Legal Considerations
Creating Various Font File Types: Font Squirrel
Other Font Considerations
CSS3 Multicolumn Layouts
The column-count Property
The column-gap Property
The column-width Property
The columns Shorthand Property
Columns and the height Property
Other Column Features
The column-rule Property
Column Breaks
Spanning Columns
Other Considerations
Progressive Enhancement
Up Next
Flexbox and Media Queries
Flexbox
Flex Container and Flex Item
Container Properties
Applying Flexbox to The HTML5 Herald
Media Queries
What are media queries?
Syntax
The Flexibility of Media Queries
Browser Support
Further Reading
Living in Style
Geolocation, Offline Web Apps, and Web Storage
Geolocation
Privacy Concerns
Geolocation Methods
Checking for Support with Modernizr
Retrieving the Current Position
Geolocation's Position Object
Grabbing the Latitude and Longitude
Using Google Maps API
Loading a Map
Displaying Our Location in Google Maps
A Final Word on Older Mobile Devices
Offline Web Applications
How It Works: the HTML5 Application Cache
Setting Up Your Site to Work Offline
The cache.appcache File
Setting the Content Type on Your Server
Pointing Your HTML to the Manifest File
Seeking Permission to Store the Site Offline
Going Offline to Test
Testing if the Application Cache Is Storing Your Site
Making The HTML5 Herald Available Offline
Limits to Offline Web Application Storage
The Fallback Section
Refreshing the Cache
Caching the Cache
Are we online?
Further Reading
Web Storage
Two Kinds of Storage
Session Storage
Local Storage
What Web Storage Data Looks Like
Getting and Setting Our Data
Converting Stored Data
The Shortcut Way
Removing Items and Clearing Data
Storage Limits
Security Considerations
Adding Web Storage to The HTML5 Herald
Viewing Our Web Storage Values with Web Inspector
Additional HTML5 APIs
Web Workers
Web Sockets
IndexedDB
Back to the Future
Canvas, SVG, and Drag and Drop
Canvas
A Bit of Canvas History
Creating a canvas Element
Drawing on the Canvas
Getting the Context
Filling Our Brush with Color
Drawing a Rectangle to the Canvas
Variations on fillStyle
Drawing Other Shapes by Creating Paths
Saving Canvas Drawings
Drawing an Image to the Canvas
Manipulating Images
Security Errors with getImageData
Converting an Image from Color to Black and White
Manipulating Video with Canvas
Displaying Text on the Canvas
Accessibility Concerns
Further Reading
SVG
Drawing in SVG
SVG Filters
Using the Raphaël Library
Drawing an Image to Raphaël's Container
Rotating a Spinner with Raphaël
Canvas versus SVG
Drag and Drop
Feeding the WAI-ARIA Cat
Making Elements Draggable
The DataTransfer Object
Accepting Dropped Elements
Further Reading
That's All, Folks!
Appendix A: Modernizr
Using Modernizr with CSS
Using Modernizr with JavaScript
Further Reading
Appendix B: WAI-ARIA
How WAI-ARIA Complements Semantics
The Current State of WAI-ARIA
Further Reading
Appendix C: Microdata
Aren't HTML5's semantics enough?
The Microdata Syntax
Understanding Name-Value Pairs
Microdata Namespaces
Further Reading

Systemvoraussetzungen

Als PDF speichern Als Link merken