Estelle Weyl · Standardista.com · @estellevw ·Press key to advance. ·Press 2 for notes.

HTML5 & CSS3:
the Good Enough Parts

Estelle Weyl HTML5 & CSS3 for the Real World

www.standardista.com
@estellevw

CSS

  • @font-face Web fonts
  • calc() in CSS
  • Generated content
  • Gradients
  • display values
  • Mulitiple backgrounds
  • background image properties
  • Border images
  • Border-radius (rounded corners)
  • Box-shadow
  • Box-sizing
  • New Colors
  • Alphatransparency
  • Media Queries
  • Multiple column layout
  • object-fit/object-position
  • Opacity
  • CSS3 selectors
  • Text-shadow
  • Transforms
  • Transitions
  • 3D Transforms
  • Animation
  • Word-wrap
  • Flexible Box Layout Module
  • Grid Layout
  • rem (root em) units
  • Masks
  • Reflections
  • text-stroke
  • Text-overflow

HTML5

  • Semantic elements
  • Audio element
  • Canvas
  • contenteditable attribute
  • dataset & data-* attributes
  • Details & Summary elements
  • Drag and Drop
  • HTML5 form features
  • Form validation
  • Datalist element
  • Progress & Meter
  • New semantic elements
  • Offline web applications
  • Ruby annotation
  • Session history management
  • Text API for Canvas
  • Toolbar/context menu
  • Video element
  • WebGL - 3D Canvas graphics

JS API

  • Cross-document messaging
  • Cross-Origin Resource Sharing
  • File API
  • Geolocation
  • Hashchange event
  • IndexedDB
  • JSON parsing
  • Server-sent DOM events
  • Web Notifications
  • Web Sockets
  • Web Storage
  • Web Workers
  • Stream API
  • Web SQL Database
  • SVG

Other

  • classList (DOMTokenList )
  • Data URLs
  • getElementsByClassName
  • MathML
  • MPEG-4/H.264/WebM/VP8/Ogg/Theora video formats
  • querySelector/querySelectorAll
  • Touch events
  • WAI-ARIA Accessibility features
  • Font Formats
  • XHTML served as application/xhtml+xml
  • XMLHttpRequest 2
  • XHTML+SMIL animation

Part 1: CSS3 Snow

Part 2: CSS3 Other features

Part 3: HTML5

Part 4: APIs

Part 1: CSS3
Making it snow
(in the summer)
without JavaScript
(or clouds)

CSS3 Features Displaying now?

  • CSS3 Selectors
  • linear gradients
  • opacity
  • RGBA colors
  • border-radius
  • transforms
  • transitions
  • animations

Opacity is from CSS2

Chapter 2:
Other CSS3 Properties

Other CSS3 Properties

  • text-shadows
  • box-shadow
  • @font-face
  • media queries
  • box-sizing
  • columns
  • flexible box model
  • grids
  • background properties (multiple, clip, size, 4-positions)
  • border-image
  • text-overflow
  • word-wrap: breakword
  • calc()
  • rem
  • Masks
  • Reflections
  • text-stroke

Act 3: HTML5

HTML5 Components

  • Doctype
  • Character Set
  • Type Attribute
  • Semantic elements
  • <figure> & <figcaption>
  • <details> & <summary>
  • Ruby annotation
  • contenteditable attribute
  • dataset & data-* attributes
  • HTML5 form features
  • Form validation
  • <datalist> element
  • <progress> & <meter>
  • <audio> element
  • <video> element
  • <canvas>
  • WebGL - 3D Canvas graphics

Section 4:
JavaScript APIs

JavaScript APIs

  • Offline web apps
  • Web Storage
  • Indexed dataBase
  • Geolocation
  • Session history
  • Drag and Drop
  • File API
  • getElementsByClassName
  • querySelector/querySelectorAll
  • Hashchange event
  • Cross-document messaging
  • Cross-Origin Resource Sharing
  • JSON parsing
  • Web Workers
  • Web Sockets
  • Server events
  • Web Notifications
  • classList (DOMTokenList )
  • Touch events

Part 5:
The End

Thank you

HTML5 & CSS3 for the Real World

Estelle Weyl

www.standardista.com

@estellevw