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.

Transformacje 3D

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

 

Transitions

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

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

CSS3 Content Flow

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

    

      

• CSS3 Positioned Floats
  • Flow content around positioned elements

   

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

    

       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.

    

Dotyk

SVG filter effects

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

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

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
• …