Re: CSS Regions considered harmful (was: [css-regions] issue 16858 redux)

Alan Stearns wrote:

 > > What's your list of really good use cases that cannot be solved
 > > without regions?

 > The first [1] is a version of the ‘breaking news’ use case we’ve had on
 > the use case wiki page for years. As the screen size narrows, UI elements
 > are collected into a named flow and placed in a slide-out menu.

 > [1] http://blogs.adobe.com/webplatform/2013/04/08/adaptive-web-app-ui-with-css-regions/

It seems this design can quite easily be achived without regions,
here's a version that uses abspos & media queries:

  http://www.wiumlie.no/2014/regions/uc1-abspos.html

It doesn't use JavaScript -- your version seems to rely on JS.

 > The second [2] is a relatively new case that I think of as custom
 > overflow. In this case, as the screen size narrows overflow items in a nav
 > bar move to a second region nested in a popup menu.
 > [2] http://codepen.io/oslego/details/tdHEg

I was confused by this, as menu items slides from the horizontal menu
into a vertical menu. In my mind the vertical vs. horizontal axis
seems to indicate a grouping of some kind, but in the example it's
purely a function of layout. Anyway, I think the layout can be
expressed with:

  nav a { float: right; clear: right }
  nav:first-line a { float: none; clear: none }

This requrires being able to select element inside pseudo-elements.
Which isn't part of today's specifications, but could be in the
future. It should also be possible to reproduce the layout with jquery,
by selecting elements that do not end up on the first line. 

FYI, your second example bas 18 <script> elements. You may consider
refactoring the code before encouraging people to emulate it.

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Thursday, 23 January 2014 20:48:33 UTC