Transcript SESSION CODE: WEB102 Thomas Lewis Principal Technical Evangelist Microsoft @tommylee | asimplepixel.tumblr.com WELCOME TO THE NEXT GENERATION OF WEB DESIGN (c) 2011 Microsoft.

SESSION CODE: WEB102
Thomas Lewis
Principal Technical Evangelist
Microsoft
@tommylee | asimplepixel.tumblr.com
WELCOME TO THE NEXT
GENERATION OF WEB DESIGN
(c) 2011 Microsoft. All rights reserved.
Agenda
► HTML5, Microsoft & Internet Explorer (10)
► CSS3
–
–
–
–
–
Media Queries & Listeners
Grid Alignment
Flexible-Box Layout (“Flexbox”)
Multi-column Layout
Positioned Floats
► An Approach for Adaptability
► Web Fonts
► But first, some demos…
What is HTML5?
Microsoft Approach with HTML5
beautyoftheweb.co
m
ietestdrive.com
html5labs.com
HTML
CSS
Web Apps
SVG
Geolocation
ECMA
Last Update: 13th June 2011
Vendor Prefixes…are they ok?
► -moz- /* Firefox and other
browsers using Mozilla's
browser engine */
► -webkit- /* Safari, Chrome
and browsers using the
Webkit engine */
► -o- /* Opera */
► -ms- /* Internet Explorer */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
SAY NO TO IE6!
Internet Explorer 10
Internet Explorer 10
► A Platform Preview
► Limited Browser Chrome
► On a Cadence
► A Host of New Features…
New In IE10…
► CSS3 Flexible Box Layout
► CSS3 Grid Alignment
► CSS Multi-Column Layout
► CSS3 Gradients (on all
image types)
► EcmaScript 5 Strict Mode
► CSS3 Positioned Floats
► CSS Stylesheet Limit Lifted
► CSSOM Floating Point
Value Support
► Improved Hit Testing APIs
► CSS3 Media Query
Listeners
► HTML5 Async
► HTML5 Drag and Drop
► HTML5 File API
► HTML5 Sandbox
► HTML5 Web Workers
► Web Performance APIs
CSS3
CSS3…Why should I care?
Facebook & Performance
706 CSS Files
Declared Facebook blue color 261x!
548 unique hex colors
6,498 declarations of color
Able to reduce response time in half due to CSS refactoring
How we viewed the web.
► The Desktop Browser
How we view the web today?
► The Desktop Browser
► Mobile Browsers
► Tablet form-factors
► Televisions
► Game Consoles
► More…
In CSS 2.1…
► We could define media types: screen and print.
► But not easily respond to the user’s display.
► Lots of grunt work.
► Didn’t spend much time thinking about mobile
devices.
CSS3 Media Queries
► The CSS3 Media Queries Module specifies
methods to enable web developers to scope a
style sheet to a set of precise device capabilities.
Simple Example
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
Other Queries
@media screen and (min-width:320px) and
(max-width:480px)
@media not print and (max-width:600px)
@media screen (x) and (y), print (a) and (b)
Can Be Declared…
► In the Stylesheet
► Import Rule
– @import url(mq.css) only screen and (maxwidth:600px)
► link Element
– <link rel=“stylesheet” media=“only screen and (maxwidth:800px)” href=“mq.css”>
Supported Media Properties
► min/max-width
► min/max-height
► device-width
► device-height
► orientation
► aspect-ratio
► device-aspect-ratio
► color
► color-index
► monochrome
► resolution
Let’s take a look…
What about devices?
► viewport meta tag
– <meta name=“viewport” content=“width=devicewidth”>
► device-width vs. width
► maximum-zoom
What about non-supportive browsers?
► css3-mediaqueries-js by Wouter van der Graaf
► Just include the script in your pages.
► Parses the CSS and applies style for positive media
tests.
What else could I use it for?
► Adjust elements to make them more touchfriendly.
► Adjusting text for more readability.
► Show jump links to eliminate lengthy scrolling.
► Image swapping.
► Customized print styling.
The Enthusiast Site
http://mediaqueri.es
The Spec
http://w3.org/TR/css3-mediaqueries/
Media Query Listeners
mql.addListener(sizeChange);
use script to react to changes
in the media or environment in {
which your page is running
if (mql.matches)
evaluating a media query at
{
runtime using JavaScript
subscribing listeners to changes
in the media query’s evaluation
// The window is big enough for
content.
}
else
{
// The window has gotten too small
for content.
}
}
CSS3 Grid Alignment
CSS3 Grid Alignment
1
2
3
CSS3 Grid Alignment ecsstender
http://ecsstender.org/extensions/css3-grid-alignment/
CSS3 Flexible Box Layout
CSS3 Flexible Box Layout
1
2
3
CSS3 Multi-Column Layout
CSS3 Multi-Column Layout
CSS3 Positioned Floats
CSS3 Positioned Floats
#PositionedFloat {
padding: 5px;
height: 200px;
width: 200px;
border-style: solid;
border-color: LightGray;
left: 422px;
top: 106px;
background: rgb(30, 191, 255);
float: -ms-positioned;
position: absolute;
flow-wrap: wrap;
}
An Approach for Adaptability
► Manage Device Families
– CSS3 Media Queries
► Manage Real Estate
– CSS3 Grid Layout
► Adaptive Components
– CSS3 FlexBox
– CSS3 Multi-Column
– CSS3 Positioned Floats
Gridddle
CSS3 Fonts
Web Fonts
► WOFF
– Web Open Font Format
– Ensured backward compatibility with continued
support for Embedded OpenType (EOT)
– Added support for the Web Open Font Format
(WOFF), which repackages sfnt-based font files
(TrueType, OpenType, and Open Font Format fonts) by
compressing each table individually using a ZIP
compression format
– Added support for installable (no embedding
permission bits set) raw TrueType fonts
@font-face {
font-family: MyFont;
src: url(http://mysite/fonts/MyFont.ttf)
format("embedded-opentype");
unicode-range: U+0-7F;
}
p{
font-family: MyFont, serif;
}
Font Services
Things to think about:
CDN-based (if hosted)
Font file Size
Hinting
Web vs. Desktop License
@font-face Declaration at
Top
CSSLINT.NET
The Book – Stunning CSS3
http://stunningcss3.com
Thank You!
► Responsive Design - The View of the World
Depends on the Glasses I Wear
– Not a product, but a concept
– Meeting Room 5, today at 5pm
► Deck, demos, links are at:
asimplepixel.tumblr.com
► Also, follow @tommylee if you like the HTML5,
CSS3, Design, Brutality and Pets
(c) 2011 Microsoft. All rights reserved.
Enrol in Microsoft Virtual Academy Today
Why Enroll, other than it being free?
The MVA helps improve your IT skill set and advance your career with a free, easy to access
training portal that allows you to learn at your own pace, focusing on Microsoft
technologies.
What Do I get for enrolment?
► Free training to make you become the Cloud-Hero in my Organization
► Help mastering your Training Path and get the recognition
► Connect with other IT Pros and discuss The Cloud
Where do I Enrol?
www.microsoftvirtualacademy.com
Then tell us what you think. [email protected]
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other
countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing
market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this
presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
(c) 2011 Microsoft. All rights reserved.