Start/Stop timer Reset timer Time report
Slide
Time
Update Toggle touch First Slide

CSS FilterLab

Alexandru Chiculita

Computer Scientist

Web Engine Team at Adobe

@achicu
YouTube Presentation Recording View Sources on GitHub

About me

CSS Filters

  • Any DOM element
    (including text, forms, video)
  • Can be chained and animated
  • Hardware accelerated
http://www.w3.org/TR/filter-effects/

CSS Filter Types

  • CSS Builtin Filters
    Safari 6, iOS6 and Chrome
  • CSS Custom Filters
    using WebGL shaders
  • CSS SVG Filter Reference

CSS Filters Demo

Filter effects are a way of processing an element's rendering before it is displayed in the document.

Images
Forms
Text

CSS FilterLab

http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

Demo

Grunt JS

  • Process
  • Compile Templates
  • Lint JS
  • Minify
  • Process CSS
  • Copy Assets
  • Output
  • Debug Mode
  • Minified Mode
  • Desktop
  • Mobile
http://gruntjs.com/

Adobe Edge Inspect

  • Develop on multiple devices
  • Remote WebInspector
  • Refresh all devices at once
http://html.adobe.com/edge/inspect/

Web Features

  • Offline
  • Application cache
  • Web Storage
  • Mobile UI
  • Touch Events
  • Gesture Recognition
  • Performance
  • requestAnimationFrame
  • Worker threads

Application Cache

  • Offline Repository
  • Automatically creates local copy
  • Snappy reloads
  • Good to know
  • User interface for updates
  • Avoid it in development builds
  • Inject the date/time as a comment
http://alistapart.com/article/application-cache-is-a-douchebag http://www.w3.org/TR/html51/browsers.html#offline

Web Storage

  • Store user settings
  • Limited in size
    ~ 2.5MB
  • Key/Value system
  • localStorage
    persistent across reloads
  • sessionStorage
    persistent per session
http://www.w3.org/TR/webstorage/

Touch Gestures

Tap & Long Hold

Drag

Pinch and zoom

Touch Gestures

Combined

Touch Scrolling

Desktop & Mobile

  • Abstraction layer
  • Mouse
  • Touch
  • Pointers
    Only in IE10
http://www.w3.org/TR/touch-events/ http://www.w3.org/TR/pointerevents/

User Interaction Framework

  • Native CSS & JS events
    But only in IE10
  • Check gestures on ancestors
  • Capture touch events
  • Visualize touch pointers

Performance

  • Smooth Animations
  • transforms
  • opacity
  • filters

Performance

  • Layout
  • Absolute positioning
  • Children count per element
  • Avoid box-shadows on dynamic content
  • Avoid layout readbacks
    (e.g. clientWidth/clientHeight)
  • Lazy CSS changes
  • Apply CSS in single step
  • Use requestAnimationFrame

Performance

  • CSS Selector
  • Use specific class names
  • Avoid deep indirect ancestors
    (e.g. body.state .my-object { })
  • Avoid generic selectors
    (e.g. .calendar-view div { })
  • Sibling selectors are expensive

Performance

  • 3D transforms
  • Paint cache
  • Use with "opacity" and "filter"
  • Avoid switching non-3D to 3D
  • Avoid changing z-index
    transform-style: preserve-3d

Animations

  • Spritesheet animations
  • Overlapped bitmaps
  • Advance with requestAnimationFrame
  • Toggle with opacity

Spritesheet

http://www.adobe.com/inspire/2012/12/ten-steps-flash-cs6.html

Animations Demo

Play
Reset

Performance

  • Removing content
  • Removing from DOM
    No memory
  • display: none
    DOM memory
  • visibility: hidden
    Layout memory
  • opacity: 0
    GPU memory

Worker Threads

  • Message passing
  • Cross-compile
    Emscripten
  • Asynchronous
http://www.w3.org/TR/workers/

Thanks!


Loading presenter ...