W3C home > Mailing lists > Public > www-style@w3.org > March 2011

Re: [CSS Regions] Update available

From: Arno Gourdol <agourdol@adobe.com>
Date: Tue, 29 Mar 2011 08:32:44 -0700
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <5305FBB0-C05E-438F-A7B0-A3BD3FDAF193@adobe.com>

As we've started to get feedback today, we have been think about some of the limitations of the ::slot() pseudo-element. We started to brainstorm around how would that integrate with regions and the existing specifications for layout. An alternative to the ::slot() would be a @slot syntax. Some examples of using the @slot syntax:

1. Integration with the flex box: 

@slot “region” {
  flex-box: 1;
  content: from(article);
}
@slot “container” {
  display: box;
  content: slot(region) slot(region) slot(region);
}
#div1:after {
  content: slot(container);
}
<div id=“div1”>
  <p id=“p1”>Before slots</p>
</div>

This is similar to the following HTML markup just that everything in the "container" div is not visible in DOM.

<div id=“div1”>
	<p id=“p1”>Before slots</p>
	<div id="container" style="display:box">
		<div id="region_1" style="content:from(article); flex-box:1"></div>
		<div id="region_2" style="content:from(article); flex-box:1"></div>
		<div id="region_3" style="content:from(article); flex-box:1"></div>
	</div>
</div>

2. Integration with the Grid Alignment module using 'grid-template' property. The examples are adapted from the ones in the Grid Alignment module.

#grid {
	display: grid;
	grid-template: 	”ad”
			"bd”
			"cd";
	grid-columns: 150px 1fr;
	grid-rows: 50px 1fr 50px;

	@slot "b" {
		content: from(article);
	}
}
#item2, #item3 { flow: into(article); }

3. Integration with the Grid Alignment module using 'grid-columns' and 'grid-rows' properties:

#grid {
	display: grid;
	grid-columns: 150px "cell-start" 1fr "cell-end";
	grid-rows: "cell-start" 50px 1fr 50px "cell-end”;

	@slot “cell” {
		grid-column: "cell-start" "cell-end";
		grid-row: "cell-start" "cell-end";
		content: from(article);
	}
}
#item2, #item3 { flow: into(article); }


As usual, looking forward to your fedback.

– Arno  ❉  @arnog  ❉  Director of Engineering, Runtime Foundation

Received on Tuesday, 29 March 2011 15:34:09 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:38 GMT