CSS Regions - Past, Present and Future

Andrei Bucur - abucur@adobe.com

Safari

  • core CSS properties:  flow-into and flow-from
  • flow fragmentation in variable width regions
  • auto-size regions
  • most of the CSS Regions object model
  • the regionlayoutupdate event
  • basic region styling (paint properties)

Regions Overview


Example

Hover me!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, mauris sed pretium consequat, felis lacus fringilla ipsum, in tempus sapien sapien et nunc. Nam rhoncus elit libero, in dapibus nunc cursus at. Phasellus ornare tristique lorem. Pellentesque lorem dolor, vehicula a mi convallis, convallis pharetra sem. Donec nec mi bibendum, laoreet elit et, fermentum dui. Donec at neque in neque aliquet suscipit sed quis justo. Proin et consectetur velit, sed ultricies magna. Maecenas vel dignissim dolor. Aenean eu urna sed tortor hendrerit dignissim. Donec semper blandit neque at placerat. Nam ut ultricies lectus. Nullam consectetur ligula a mollis porttitor. Praesent at lobortis augue, ut vestibulum mi. Duis vitae est in quam hendrerit venenatis. Etiam pellentesque molestie dapibus. Maecenas eget gravida neque. Integer id ante vitae erat dignissim facilisis sit amet et dolor. Integer laoreet ullamcorper justo, et tristique neque venenatis sed. Fusce porttitor purus et sem tincidunt sollicitudin. Donec nec ante ut enim tempus auctor. Etiam ultricies hendrerit sapien, non pharetra turpis blandit at. Morbi ac tristique ante. Donec hendrerit non mauris eget tristique. In orci mi, aliquam nec venenatis id, pharetra sit amet nisl. Integer pretium a nisl tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque congue vitae metus sit amet fermentum. Pellentesque ultrices consectetur facilisis. Nam fringilla justo lobortis enim pellentesque lobortis.

nightly

  • correct painting of fragments and overflow
  • scrollable regions
  • accelerated content inside regions
  • position: fixed elements
  • the regionoversetchange event
  • better selection
  • better WebInspector integration
  • and more...

Visual Overflow

Hover me!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, mauris sed pretium consequat, felis lacus fringilla ipsum, in tempus sapien sapien et nunc. Nam rhoncus elit libero, in dapibus nunc cursus at. Phasellus ornare tristique lorem. Pellentesque lorem dolor, vehicula a mi convallis, convallis pharetra sem. Donec nec mi bibendum, laoreet elit et, fermentum dui. Donec at neque in neque aliquet suscipit sed quis justo. Proin et consectetur velit, sed ultricies magna. Maecenas vel dignissim dolor. Aenean eu urna sed tortor hendrerit dignissim. Donec semper blandit neque at placerat. Nam ut ultricies lectus. Nullam consectetur ligula a mollis porttitor. Praesent at lobortis augue, ut vestibulum mi. Duis vitae est in quam hendrerit venenatis. Etiam pellentesque molestie dapibus. Maecenas eget gravida neque. Integer id ante vitae erat dignissim facilisis sit amet et dolor. Integer laoreet ullamcorper justo, et tristique neque venenatis sed. Fusce porttitor purus et sem tincidunt sollicitudin. Donec nec ante ut enim tempus auctor. Etiam ultricies hendrerit sapien, non pharetra turpis blandit at. Morbi ac tristique ante. Donec hendrerit non mauris eget tristique. In orci mi, aliquam nec venenatis id, pharetra sit amet nisl. Integer pretium a nisl tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque congue vitae metus sit amet fermentum. Pellentesque ultrices consectetur facilisis. Nam fringilla justo lobortis enim pellentesque lobortis.

Scrolling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, mauris sed pretium consequat, felis lacus fringilla ipsum, in tempus sapien sapien et nunc. Nam rhoncus elit libero, in dapibus nunc cursus at. Phasellus ornare tristique lorem. Pellentesque lorem dolor, vehicula a mi convallis, convallis pharetra sem. Donec nec mi bibendum, laoreet elit et, fermentum dui. Donec at neque in neque aliquet suscipit sed quis justo. Proin et consectetur velit, sed ultricies magna. Maecenas vel dignissim dolor. Aenean eu urna sed tortor hendrerit dignissim. Donec semper blandit neque at placerat. Nam ut ultricies lectus. Nullam consectetur ligula a mollis porttitor. Praesent at lobortis augue, ut vestibulum mi. Duis vitae est in quam hendrerit venenatis. Etiam pellentesque molestie dapibus. Maecenas eget gravida neque. Integer id ante vitae erat dignissim facilisis sit amet et dolor. Integer laoreet ullamcorper justo, et tristique neque venenatis sed. Fusce porttitor purus et sem tincidunt sollicitudin. Donec nec ante ut enim tempus auctor. Etiam ultricies hendrerit sapien, non pharetra turpis blandit at. Morbi ac tristique ante. Donec hendrerit non mauris eget tristique. In orci mi, aliquam nec venenatis id, pharetra sit amet nisl. Integer pretium a nisl tempor pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque congue vitae metus sit amet fermentum. Pellentesque ultrices consectetur facilisis. Nam fringilla justo lobortis enim pellentesque lobortis.

Accelerated Compositing

Moving forward

  • performance
  • selection
  • fragmentation
  • the content keyword
  • the rest of the object model
  • getClientRects() and getBoundingClientRect()
  • better integration with other layout modules
  • deprecate APIs
  • and others...

Thank you!

Questions?
What do you think?
Let's discuss!

CSS Regions in Webkit

By Andrei Bucur

Private

CSS Regions in Webkit