3 killer HTML5 and CSS features

In this post I’m going to touch on three very important new HTML5 and CSS features:

  • Grid
  • Regions
  • Media Queries

Some of these features are not supported in current browsers, I had to download the Internet Explorer 10 preview to really play with these and ran them on top of the Windows developer preview.

CSS Grid Layout

The following is an example of a CSS grid.

an image of a css grid with colored elements

The following markup shows how CSS Grid Layout works.

<html>
<head>
<style type="text/css">
#grid {
    display: -ms-grid;
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: auto 1fr auto;
}

#logo { -ms-grid-column: 1; -ms-grid-row: 1; width:50; height:50; color:red; background:#CACACA}
#page { -ms-grid-column: 1; -ms-grid-row: 3; width:250; height:50; color:black; background:#CCCCCC}
#bookmarks { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start; background:yellow; }
#content { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-column-align: right; -ms-grid-row-span: 2 ; width:75; background:blue; }
#bottom { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center; width:150; background:magenta; }

</style>
</head>
<body>
<p>
<div id="grid">
    <div id="logo">Some Logo</div>
    <div id="page">Page</div>
    <div id="bookmarks">Bookmarks</div>
    <div id="content">Reader Content</div>
    <div id="bottom">magenta section</div>
</div>
</p>
</body>
</html>

If you look at the layout it would be easy to scoff that having a grid doesn’t really get you much more than a table or positioned div elements.  However, CSS grid layouts allow you to create great layouts built on divs that have specific items individually addressible.  This is really useful if you are moving items around.  For example, consider the previous grid, if you wanted to move the reader content to a new part of the grid, you would just need to update the grid layout and then change the grid cells.

Regions

CSS Regions allow you to have content flow from one section into another while preserving unique styles in each section.  This is handy if you want to relayout content as a response to a media query where the screen resolution changes.  The following code shows how a region could be specified:

[content.html]
<html>
<body>
<p>The quick fox jumped over the brown dog.<p>
<p>Abba is a fine band</p>
<p>Punk <i>is</i> dead.</p>
</body>
</html>

 

[region.html]

<!DOCTYPEHTML>

<html>

<head>
  <style>
    iframe {
        -ms-flow-into: contentIdentifier; /* causes the iframe to hide */
    }

    #div1{
        -ms-flow-from: contentIdentifier; /* causes these elements' content to come from the iframe with "-ms-flow-into: contentIdentifier" */
        width: 120px;
        height: 300px;
        float: left;
        border: solid 2px lightblue;
        margin-right: 8px;
    }
    #div2 {
        -ms-flow-from: contentIdentifier; /* causes these elements' content to come from the iframe with "-ms-flow-into: contentIdentifier" */
        width: 120px;
        height: 300px;
        float: left;
        border: solid 2px red;
        margin-right: 8px;
    }
  </style>
</head>

<body>
  Content content content
  <iframe src="content.html"></iframe>

  <div>
    <input text="hide" type="button" onclick='document.getElementById("div1").style.height="100px";'>Shrink blue</input>
    <input text="hide" type="button" onclick='document.getElementById("div1").style.display="none";'>Hide blue</input>
    <input text="show" type="button" onclick='document.getElementById("div1").style.display="block";'>Show blue</input>
  </div>

  <div id="div1" class="div1">content</div>
  <div id="div2" class="div2">tnetnoc</div>
</body>

</html>

The following image shows the code running in IE 10 when it is in various states:

What’s nice about regions is that they let you flow text around content without having to do any of the heavy lifting of balancing content around the areas that you want text to flow to. Text will flow from non-visible elements to the ones that are visible and will also balance content into the target areas where the content flows into. The article Building rich text-centric paegs in IE10 gives a great overview of regions.

Media Queries

Media queries allow you to make changes based on the client state.  For example, if you want to have your site change based on the browser resolution, you can!  This is going to be extremely handy when you have clients that are switching from portait to landscape or if you want fluid layouts that change based on client resolutions.  The following CSS/HTML shows an example of media queries:

<!DOCTYPEHTML>
<html>

<head>
  <style>

@media (max-width: 800px){

    #div1{
        width: 60px;
        height: 900px;
        float: left;
        border: solid 2px lightblue;
        margin-right: 8px;
    }
    #div2{

        width: 60px;
        height: 900px;
        float: left;
        border: solid 2px lightblue;;
        margin-right: 8px;
    }
    #div3{

        width: 60px;
        height: 900px;
        float: left;
        border: solid 2px lightblue;
        margin-right: 8px;
    }
}

@media (min-width: 801px) and (max-width: 1200px) {

    #div1{
        width: 240px;
        height: 300px;
        column-fill: balance;
	column-count: 2;
        float: left;
        border: solid 2px #FF00CC;
        margin-right: 8px;
    }
    #div2{

        width: 240px;
        height: 300px;
        column-fill: auto;
	column-count: 2;
        float: left;
        border: solid 2px #FF00CC;
        margin-right: 8px;
    }
    #div3{

        width: 240px;
        height: 300px;
        column-fill: balance;
	column-count: 2;
        float: left;
        border: solid 2px #FF00CC;
        margin-right: 8px;
    }
}

@media (min-width: 1201px) {

    #div1{
        width:400px;
        height: 200px;
        column-fill: balance;
	column-count: 2;
        float: left;
        border: solid 2px red;
        margin-right: 8px;
    }
    #div2{

        width: 400px;
        height: 200px;
        column-fill: auto;
	column-count: 2;
        float: left;
        border: solid 2px red;
        margin-right: 8px;
    }
    #div3{

        width: 400px;
        height: 200px;
        column-fill: balance;
	column-count: 3;
        float: left;
        border: solid 2px red;
        margin-right: 8px;
    }
}

  </style>
</head>

<body>
<div id="div1">
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
</div>
<div id="div2">
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
</div>
<div id="div3">
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
    Hi friend! Hi friend! Hi friend! Hi friend!
</div>
</body>

</html>

All that code does is change the color and columns for divs as the resolution changes.  Really simple but illustrates the concept for media queries. There are all sorts of additional things that can be queried other than the screen resolution and you can do awesome stuff like have separate style sheets for various client types.

More information

The IE team has done a great job producing guidance for these features and more. Learn more about advanced CSS features in IE 10 and Windows Metro style apps on MSDN.