Upload
howard-wells
View
223
Download
0
Tags:
Embed Size (px)
Citation preview
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/