On Github oslego / kingsofcode-dec12
CSS Regions, CSS Exclusions and Shapes
article { /* collect content into a named flow */ flow-into: myFlow; } .region { /* render the content from the named flow */ flow-from: myFlow; }
article h1, article img, article p:nth-child(1) { /* collect content into a named flow */ flow-into: preview; } .region { /* render the content from the named flow */ flow-from: preview; }
<!-- content: semantic markup --> <article> <h1>Title</h1> <p>...</p> </article> <!-- layout: helper markup --> <div class="region"></div> <div class="region"></div> <div class="region"></div>
var flows = document.getNamedFlows() var flow = flows['myFlow'] // Get the nodes collected in the named flow flow.getContent() // Get the regions that render the content flow.getRegions()
var flows = document.getNamedFlows() var flow = flows['myFlow'] // {Boolean} is there more content than regions? flow.overset // Add more regions if necesary flow.addEventListener('regionlayoutupdate', function(){ if (flow.overset){ // add more regions } })
W3C Working Draft - Adobe, Microsoft
/* wrap the text inside a circle */ #content { shape-inside: circle(50px, 50px 50px) }
#content { /*...*/ } #exclusion { shape-outside: circle(50px, 50px 50px) /* text content goes around both my sides */ wrap-flow: both; }
/* non-rectangular shapes */ #content { shape-inside: polygon(x1, y1 x2, y2 ... ) }
<svg ...> <circle id="circle_shape" cx="50%" cy="50%" r="50%" /> </svg> #content { shape-inside: url(#circle_shape) }
W3C Working Draft - Adobe, Microsoft
<!-- content: semantic markup --> <article> <h1>Title</h1> <p>...</p> </article> <!-- layout: helper markup --> <div class="region"></div> <div class="region"></div> <div class="region"></div>
The <video> element
Encapsulation, poratability, event re-parenting<head> <link rel="components" href="magazine-component.html"> </head>
<article is="magazine"> <h1>Title</h1> <p>...</p> </artice>
Shadow DOM W3C Working Draft - Google
Intro to Web Components W3C Working Draft - Google
+
Web Components
CSS Regions
CSS Exclusions and Shapes
Web Components