Re: Region overflow proposal

• From: Florian Rivoal <florianr@opera.com>
• Date: Wed, 08 Aug 2012 15:34:21 +0200
• To: "Robert O'Callahan" <robert@ocallahan.org>
• Cc: "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
• Message-ID: <op.wip5bjve4p7avi@localhost.localdomain>

On Tue, 07 Aug 2012 12:22:28 +0200, Robert O'Callahan  
<robert@ocallahan.org> wrote:

> Can you give an example of using David's proposal with 'display' values
> varying across region boxes?

Let's say you have a long list of products, each with a name, picture,
description. Like this:

<ul class=products>
   <li><span class=name>Gizmo</span>
       <img src="gizmo.jpg">
       <span class=desc>This gizmo will change your life
   <li>...

You want to display the first few products in the list prominently,
side by side, and want to use a flexbox for that. When the flexbox
is full though, you wan to display the rest as a bullet list, below
it.

.products { overflow:region; }
.products::nth-region(1) { display:flex; ... }

.products::nth-region(1) li { display:block; ... }
.products::nth-region(1) .title { ... }
.products::nth-region(1) img { ... }
.products::nth-region(1) .desc { ... }

.products .title { ... }
.products img { ... }
.products .desc { ... }

The first region gets display:flex, the following one gets display:block.

Received on Wednesday, 8 August 2012 13:35:04 UTC