1. HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic

2. 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

3. 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)

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

5. 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

6. Fonts Module  Generic fonts can destroy page layout  Font support  TTF  OpenType  WOFF (W3C Web Fonts Working Group)  http://www.w3.org/TR/WOFF/ http://www.w3.org/TR/WOFF/  Google web fonts gallery

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

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

9. 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%);

10. 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)

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

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

13. Expression Web 4 SuperPreview

14. Scalable Vector Graphics  http://www.w3.org/TR/SVG11/ http://www.w3.org/TR/SVG11/  Separate file or part of HTML document  DOM of SVG can be changed by Javascript

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

16. Resources  Books  Introducing HTML5 by Bruce Lawson & Remy Sharp  W3C  W3C HTML5 Specification – www.w3.org/TR/html5www.w3.org/TR/html5  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 – www.beautyoftheweb.com/experience/www.beautyoftheweb.com/experience/  IE Test Drive – www.ietestdrive.comwww.ietestdrive.com  HTML5 Labs – html5labs.interoperabilitybridges.com/html5labs.interoperabilitybridges.com/