Cutting-edge CSS Features

CSS Regions & CSS Shapes

Razvan Caliman / @razvancaliman

CSS Regions

  .content {
    /* collect content into a named flow */
    flow-into: myFlow;
  }

  .region {
    /* render the content from the named flow */
    flow-from: myFlow;
  }

Markup Separation

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

Aggregate content

  /* collect content from different places */
  header nav, 
  footer a {
    flow-into: menuFlow;
  }

  #menu {
    flow-from: menuFlow;
  }

Regions are only
Visual Containers

CSS Regions Status

W3C Working Draft - Adobe, Microsoft

CSS Shapes

Shape Inside

  /* wrap the content inside a circle */
  #content { 
    shape-inside: circle(50%, 50%, 10em)
  }
  

Shape Outside

  #coffee {
    float: left;
    shape-outside: circle(50%, 50%, 10em);
  }

Complex shapes

  .content{
    /* shape defined by points of a polygon */
    shape-inside: polygon(x1, y1 x2, y2 ... );
  }
 
  .content{
    /* shape defined by the alpha levels of an image */
    shape-inside: url(image.png);
    shape-image-threshold: 0.5;
  }
  

CSS Shapes status

W3C Working Draft - Adobe, Microsoft

html.adobe.com

end

@razvancaliman

Resources

CSS Regions

• CSS Regions on html.adobe.com
• CSS Regions tutorial
• CSS Regions W3C Proposal

CSS Shapes

• CSS Shapes on html.adobe.com
• CSS Shapes W3C Proposal
• Hans Muller's blog

Credits

• Reveal.js created by Hakim el Hattab