HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech...
-
Upload
howard-wells -
Category
Documents
-
view
219 -
download
0
Transcript of HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech...
![Page 1: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/1.jpg)
HTML5, part II – designŠtěpán Bechynský, @stepanb
Developer Evangelist
Microsoft, Czech Republic
![Page 2: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/2.jpg)
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
![Page 3: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/3.jpg)
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)
![Page 4: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/4.jpg)
Backgrounds and Borders Module
background-*
border-radius
box-shadow
text-shadow
![Page 5: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/5.jpg)
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
![Page 6: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/6.jpg)
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
![Page 7: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/7.jpg)
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
![Page 8: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/8.jpg)
Selectors
Structural Pseudo-Classes Example: E:last-child
UI Element States Pseudo-Classes Example: E:checked
Forms validity
![Page 9: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/9.jpg)
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%);
![Page 10: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/10.jpg)
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)
![Page 11: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/11.jpg)
Grid Layout
Grid definition grid-columns grid-rows
Position in grid grid-column grid-row grid-row-span grid-column-span
![Page 12: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/12.jpg)
Multi-column Layout Module
Properties column-count column-width column-rule-width column-rule-style column-rule-color column-gap column-width break-inside
![Page 13: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/13.jpg)
Expression Web 4 SuperPreview
![Page 14: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/14.jpg)
Scalable Vector Graphics
http://www.w3.org/TR/SVG11/
Separate file or part of HTML document
DOM of SVG can be changed by Javascript
![Page 15: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/15.jpg)
HTML5.cz
Shromažďuje české zdroje
Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“
![Page 16: HTML5, part II – design Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649e2a5503460f94b17e84/html5/thumbnails/16.jpg)
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/