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

HTML5, part II – designŠtěpán Bechynský, @stepanb

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)

http://www.w3.org/TR/WOFF/

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

http://www.w3.org/TR/SVG11/

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 – www.w3.org/TR/html5 HTML5 Test Suite – test.w3.org/html/tests/reporting/report.htm Validator – validator.w3.org/

Microsoft Internet Explorer 9 and 10 Engineering Blog – blogs.msdn.com/ie/ Beauty Of The Web – www.beautyoftheweb.com/experience/ IE Test Drive – www.ietestdrive.com HTML5 Labs – html5labs.interoperabilitybridges.com/