poniedziałek, 4 czerwca 2012

CSS3 odc.4 (i coś ponadto)

Kolejne uzupełnienia na temat potężnych możliwości współczesnego CSS3 (niektóre rzeczy się już powtarzają, ale w niektórych przypadkach chciałem je ponownie uwiecznić czasami z uwagi na pewne szczegóły konkretnych przypadków), a także SVG i ogólnie HTML5. Notatki sporządziłem w oparciu o prezentacje What's new with HTML5, Javascript, and CSS3 i Building beautiful and interactive apps with HTML5 & CSS3, które już oglądałem raz jesienią zeszłego roku, ale teraz z innej perspektywy postanowiłem do nich powrócić. Demonstrowane możliwości robią z pewnością ciągle duże wrażenie.

image

Transformacje 3D

  • translate, scale, rotate, skew in X, Y & Z
  • perspective

 

image

image

Transitions

  • smooth animation of CSS properties from old to new value
  • can be used with CSS pseudo-classes such as :hover

image

image

image

Animations

  • keyframe-based definition of a set of CSS property changes
  • allows richer animations than CSS Transitions
  • event model allows complex use in combination with script

image

image

image

image

image

image

image

image

image

image

image

image

image

CSS3 Content Flow

image

  • CSS3 Multi-column and Hyphenation
    • Split text into columns and hyphenate to improve readability

     image

       image

  • CSS3 Positioned Floats
    • Flow content around positioned elements

    image

  • CSS3 Regions
    • Dynamically overflow content from one element into another

     image

       Pobieranie zawartości z iframe i wstawianie do elementów z -ms-flow-from.

       Jeśli zawartość nie mieści się w jednym <div> to zastaje umieszczona także w drugim.

     image

Dotyk

image

image

image

image

image

image

SVG filter effects

  • Collection of pre-defined image filters
  • Apply to any SVG content
  • Hardware-accelerated implementation

image

image

image

image

image

IndexedDB

  • Store, index, and query data on the client
  • Full key-value pair object stores
  • Index using object attributes

File API

  • Read data from files chosen by the user
  • New objects to represent data
    • Blob, File, FileReader
  • New methods to access data
    • readAsArrayBuffer
    • readAsBinaryString
    • readAsText
    • readAsDataURL

image

HTML5 Drag/drop

  • Make any element draggable
  • Drag files from the desktop to the browser

HTML5 History

  • Expected back/forward behavior
  • URLs for sharing and deep linking
  • Accurate “referrer” data in HTTP requests

Inne

  • HTML5 Sandbox (dla iframe)
  • HTML5 Parsing
  • Spellchecking
  • Progress Events and Binary Data with XHR Level 2
  • Multi-file upload
  • New hit-testing APIs

Brak komentarzy: