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

Received on Thursday, 23 January 2014 21:01:00 UTC