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

On 1/23/14, 12:47 PM, "Håkon Wium Lie" <howcome@opera.com> wrote:

>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


So far you’re comparing apples and oranges. Please try making your mobile
view use a slide-out menu that does not obscure or interact with the
layout of the main content.

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

The script is only for the menu interaction, which I believe is an
appropriate use of script :)

>
> > 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 }

Again, the idea is to put the second nav fragment into a menu. The menu
contains other items as well.

>
>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.

This is what’s done today - script moves elements in the DOM from the nav
bar to the menu. As I demonstrated in Shenzhen, this isn’t performant. In
general, if you have to rely on script to do your fragmentation it’s
probably not worth the bother - particularly on mobile devices.

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

I believe you’re looking at CodePen source, not the demo source. The only
script the demo source has is for menu interaction, again.

Thanks,

Alan