CSS: Making the Web a Less Blocky Place
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.)
