Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

CSS: Making the Web a Less Blocky Place

Jared Wyles at South 2013
Sign up for a free membership to watch this and hundreds of other videos
  • Details
  • Keypoints

The web used to be for squares (and rectangles). The future of CSS is going to change all that. Instead of having to change your content for the web. See how CSS will make the web work for your content in any size or shape, using CSS Regions and Shapes.

“I don’t do CSS, I hate it…”

Text on the web – it’s always been there, it’s always been pretty bad. It’s embarrassing that printing presses were outperforming the web for so very long.

While typefaces are now in a good state thanks to font face, it’s hard to make good looking content because layouts are quite blunt. Print from 1950 still outperforms us.

Adobe have brought in a new idea: CSS Regions. This lets text flow into or out of an element. What’s exciting is the JS API that lets you detect the existence of overflowing elements.

document.getNamedFlows()['beer']

You set up regions, so when the content no longer fits in the first region, it overflows into the next specified region, etc. You can control when and how this happens. You can get content from elements entirely outside your layout elements.

Browser support is still pretty short…

Not only but also, you can draw non-rectangle polygons with -webkit-shape-inside: polygon() – you pass in coordinates for the points. You end up doing oldschool polygon tricks like using lots of triangles to make circles.

(Very cool demo of text flowing through a detailed Alice In Wonderland background image.)

You may also be interested in

    Thumbnail for beyond-stringly-typed

    beyond-stringly-typed

    Thumbnail for Removing the Gag From Your Browser

    Removing the Gag From Your Browser

    Thumbnail for On Readable Code

    On Readable Code

    Thumbnail for See the Tries for the Trees

    See the Tries for the Trees

    Thumbnail for What’s the Point?

    What’s the Point?

    Thumbnail for What Comes Next for the Web Platform?

    What Comes Next for the Web Platform?

    Thumbnail for The Things You Can’t Do

    The Things You Can’t Do

    Thumbnail for What’s Happening in TLS?

    What’s Happening in TLS?

More presentations from South 2013

    Thumbnail for Future Perfect Tense

    Future Perfect Tense

    Thumbnail for Designing With Animation

    Designing With Animation

    Thumbnail for Functional Javascript

    Functional Javascript

    Thumbnail for Animating Web Experiences

    Animating Web Experiences

    Thumbnail for The Future of TV in the Browser

    The Future of TV in the Browser

    Thumbnail for Hack Yourself First

    Hack Yourself First

    Thumbnail for Deep Interaction

    Deep Interaction

    Thumbnail for People Not Users

    People Not Users

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2023