1.
Introduction to CSS3
Doris Chen Ph.D.
Developer Evangelist
Microsoft
http://blogs.msdn.com/dorischen/

2.
Agenda
 What is CSS3?
 Media Queries
 Advanced Layout
 Tools
 Summary and Resources

3.
What’s is CSS3?

4.
What is CSS used for now?
 Layout
 Colors
 Fonts and text
 Backgrounds
 Borders
 Floats

5.
The Fundamentals
 Elements
 Attributes
 Selectors
 Properties
5

6.
Why Should I Care?
 Key technology in the HTML5 family
 Benefits
 Improve response times
 Less reliance on JavaScript and plug-ins
 Less site maintenance
 Good Patterns
 Progressive enhancement
 Adaptive design
 A new audience for us

7.
What is CSS3?
Last update: June 13, 2011
Geolocation
ECMA
HTML CSS Web Apps SVG
7

8.
What is CSS3?
 Defines visual appearance
of webpages
 Divided into over 50
modules
 Vendor prefixes used to
specify browser
extensions
 -ms-
 -moz-
Geolocation
ECMA
 -webkit-
HTML CSS Web Apps SVG
PAGE 8

9.
What’s New in CSS3?
 2D Transforms  3D Transforms
 Backgrounds & Borders  Animations
 Gradient
 Color
 CSS Exclusions (Floats)
 Values and Units  Flexible Box (“Flexbox”)
 Selectors Layout
 Web Fonts  Grid Layout
 Media Queries  Multi-column Layout
 Region
 Namespaces  SVG Filter Effects
 Text Shadow
 Transitions
PAGE 9

10.
Media Queries

11.
A look…
11

12.
Media Queries
 Examine device properties to determine optimal delivery
and placement of content
 The CSS3 Media Queries Module specifies methods to
enable web developers to scope a style sheet to a set of
precise device capabilities.
 Adapt output based on media type
 The Desktop Browser, Screen, Print
 Mobile Browsers
 Tablet form-factors
 Televisions
 Game Consoles

13.
Media Queries Samples
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
@media screen and (min-width:320px) and
(max-width:480px)
@media not print and (max-width:600px)

14.
Supported Media Properties
 min/max-width  color
 min/max-height  color-index
 device-width  monochrome
 device-height  resolution
 orientation
 aspect-ratio
 device-aspect-ratio
PAGE 14

15.
http://mediaqueri.es
15

16.
View States

17.
device-
portrait
/* Re-arrange and hide/show content */
Full screen Portrait
full-screen
snapped
fill
Snap
Fill
Blog http://blogs.msdn.com/dorischen

18.
Media Queries: Portrait View
Before After
19
Space is used more efficiently after apply all css rules in Media Queries

19.
Advanced Layout

20.
Manage the wireframe

21.
22

22.
CSS 3 flexible box layout
• Define direction and • display: flexbox
ordering of flexible • -ms-box-direction
box items • -ms-box-orient
• Define how to • -ms-box-ordinal-
distribute and share group
free space to flexibly • -ms-box-line-
space and size progression
elements • -ms-box-lines
• Align items • -ms-box-pack
horizontally or • -ms-box-flex
vertically • -ms-box-align

23.
CSS 3 flexible box layout uses
 Build simple designs that partition
space vertically or horizontally
 Align related elements and distribute
available space
 Perfect for menus, lightweight
collections, or simple designs

24.
Grid Layout
 Organizes a webpage by dividing space into major
regions
 Allows elements to align into columns and rows without
the use of tables
 Enables a variety of layouts
 Span columns or rows
 Overlap
 Layer
 Adapts to changes due to
 Media
 Orientation
 Available space

25.
CSS3 grid layout
 Create a grid and  display: grid
define grid rows and  -ms-grid-columns
columns  -ms-grid-rows
 Place grid items within  -ms-grid-column
the grid rows and  -ms-grid-row
columns  -ms-grid-column-span
 Define flexible row,  -ms-grid-row-span
column sizing
 Align grid children  -ms-grid-column-align
 -ms-grid-row-align

26.
Grid Layout
1
2
3
27

27.
28

28.
CSS3 grid layout uses
 Enables you to easily design grid-aligned apps
that partition space vertically and horizontally
 Uses declarative styles to create clean designs
that can be easily adapted to multiple resolutions
 Allows you to specify positions independent of
content order
 Perfect for more complex Metro style apps

29.
Multi-Column Layout
 Layout content in multiple columns without the use of
tables
 Content can flow from one column to another
 Columns are separated by a gap and rule

30.
Multi-Column Layout
31

31.
CSS3 multiple column layout
• Break text across • column-count
multiple columns • column-width
• Specify column • column-gap
gaps
• column-rule-color
• Enable and style • column-rule-style
column rules • column-rule-width

32.
33

33.
Thinking About Adaptability
 Manage Device Families
 CSS3 Media Queries
 Manage Real Estate
 CSS3 Grid Layout
 Adaptive Components
 CSS3 FlexBox
 CSS3 Multi-Column

34.
CSS3

35.
Tools

36.
The development tools are FREE!
If you use a higher SKU, it just works!

37.
Blend five ways: Visual Design Tool
Layout
Visual sizing & re-
parenting, CSS3 grids,
element management
Styling
Responsive design, rich
value editors for CSS3
properties
Debug HTML
Live DOM, inspect both
markup and live values
Debug CSS
Cascade, computed values,
“Winning Properties”
JavaScript
Runs on the design
surface – you are styling
the live application.
39

38.
Summary

39.
Summary
 Leverage CSS3 to design Windows 8 apps more
easily
 Think about Responsive Web Design
 Manage Device Families
 Media Queries
 CSS3 Grid and CSS3 flexible box to design
elegant and flexible apps
 Adaptive Components
 Positioned floats, CSS3 multiple columns,
for beautiful text-centric designs

40.
Resources

41.
RESOURCES
• Internet Explorer 10 Developer Guide for CSS
• http://msdn.microsoft.com/en-
us/library/ie/hh673536(v=vs.85).aspx
• CSS3 For Windows 8 Demo
• http://ie.microsoft.com/testdrive/Graphics/hands-
on-css3/
• Feature-specific demos
• http://ie.microsoft.com/testdrive/
• Real-world demos
• http://www.beautyoftheweb.com/
• IE Team Blogs
PAGE 43
• http://blogs.msdn.com/b/ie/
Blog http://blogs.msdn.com/dorischen

42.
Windows 8 RTM Resources
 Windows 8 and Tools Download
 http://bit.ly/Wins8Download
 Windows 8 Cheat Sheet
 http://bit.ly/wins8cheatsheet
 Develop Windows 8 in 30 Days with Consulting&
Support
 http://bit.ly/Win8GenApp
 Free Windows 8 training & Hackathon Events
 http://bit.ly/wins8Hackathon
 Windows 8 Dev Center
 http://dev.windows.com

43.
IE Test Drive
ietestdrive.com
PAGE 45