HTML5, part II – design Štěpán Developer Evangelist Microsoft, Czech Republic

CSS3  2D Transforms  Backgrounds and Borders Module  Color Module  Fonts Module  Media Queries Module  Namespaces Module  Values and Units Module  Selectors  Flexible Box Layout Module  Multi-column Layout Module

2D Transforms  Elements transformed in two-dimensional space  matrix(a,b,c,d,e,f )  translate(tx,[ty])  translateX(tx)  translateY(ty)  scale(sx,[sy])  scaleX(sx)  scaleY(sy)  rotate(angle )  skew(ax,[ay])  skewX(ax)  skewY(ay)

Backgrounds and Borders Module  background-*  border-radius  box-shadow  text-shadow

Color Module  RGBA Color model  HSL Color Model  HSLA Color Model  Opacity Property  List of color keywords for CSS identical to that for SVG 1.0

Fonts Module  Generic fonts can destroy page layout  Font support  TTF  OpenType  WOFF (W3C Web Fonts Working Group)   Google web fonts gallery

Media Queries Module  Easy support for different devices  Query language for screen type  Size, orientation, …  Media Query Listeners  Javascript  windows.msMatchMedia(query)  Fires event when media changes  Check if media match

Selectors  Structural Pseudo-Classes  Example: E:last-child  UI Element States Pseudo-Classes  Example: E:checked  Forms validity

Gradients /* IE10 */ background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Opera */ background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, right bottom, color- stop(0, #FFFFFF), color-stop(1, #00A3EF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Proposed W3C Markup */ background-image: linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

Flexible Box Layout Module  Allows vertical and horizontal distribution of child elements  Switch on: display: -ms-box;  Properties  -ms-box-align (Horizontal Alignment)  -ms-box-pack (Vertical Alignment)  -ms-box-flex (Flexibility)

Grid Layout  Grid definition  grid-columns  grid-rows  Position in grid  grid-column  grid-row  grid-row-span  grid-column-span

Multi-column Layout Module  Properties  column-count  column-width  column-rule-width  column-rule-style  column-rule-color  column-gap  column-width  break-inside

Expression Web 4 SuperPreview

Scalable Vector Graphics   Separate file or part of HTML document  DOM of SVG can be changed by Javascript

HTML5.cz  Shromažďuje české zdroje  Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“

Resources  Books  Introducing HTML5 by Bruce Lawson & Remy Sharp  W3C  W3C HTML5 Specification –  HTML5 Test Suite – test.w3.org/html/tests/reporting/report.htmtest.w3.org/html/tests/reporting/report.htm  Validator – validator.w3.org/validator.w3.org/  Microsoft Internet Explorer 9 and 10  Engineering Blog – blogs.msdn.com/ie/blogs.msdn.com/ie/  Beauty Of The Web –  IE Test Drive –  HTML5 Labs – html5labs.interoperabilitybridges.com/html5labs.interoperabilitybridges.com/