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

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

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

Yes, Håkon, some problems can be solved in multiple ways with CSS. Web
designers appreciate that.

The example is deliberately simple. It illustrates one use case solved
with CSS Regions in a way that is easy to understand.

Surely you can demonstrate foresight and imagine use cases where elements
are not positioned absolutely, and set in a much more complex DOM
structure. I'm sure you can.

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

The JS in that demo automatically triggers the animated slide-out menu. It
is a way to highlight the behaviour for learners. JS is not part of the
solution.

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

This use case is not at all uncommon.

The Guardian [1] website uses it to overflow less important topics into a
side-menu on intermediary viewport widths before switching to a new
layout. You and me both, we may not agree that Environment and Technology
are seen as less important topics, but it's not our call to make.

The recommended Android OS design patterns include an "action overflow"
[2]. It collects less frequently used actions, like log-out, into a
secondary menu. The UI for the same app adapts between tablets and phones,
both orientations.

Google Docs employs the same technique to collect less used taskbar
options on narrower viewports. See the "More" button [3].

It is a valuable use case observed in the wild. Developers are not happy
with the performance penalties involved with DOM manipulation to achieve
this. Solving it provides a tool in responsive layout scenarios where a
completely new layout does not make sense.


[1] http://www.theguardian.com/uk?view=mobile
[2] https://developer.android.com/design/patterns/actionbar.html
[3] 
https://docs.google.com/document/d/1whYPKULF5O-QyPEYT2cBUCJgVXay5M3JiaBgI97
ZBIY/edit?usp=sharing

Regards,
+Razvan

Received on Friday, 24 January 2014 10:55:56 UTC