El Noguer

HTML5 i CSS encara està en desenvolupament de noves funcionalitats. En un article de flippinawesome.org: CSS Regions Matters, es comenta la nova funcionalitat de definir regions en l’HTML i poder moure les coses d’un lloc en un altre.

Per exemple per reorganitzar el menú quan es mostra en una pantalla petita:

/* flow the menu from the header into the sidebar on small screens */
@media screen and (max-width:32em){
  header nav {
    flow-into: navigation;
  }
  #my-region {
    flow-from: navigation;
  }
}

<header>
  <a href="">Logo</a>
  <nav role='navigation'>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>  
</header>
<aside id="my-region">
</aside>

Tweet