Introduction to CSS3

Doris Chen Ph.D.

Developer Evangelist
Microsoft
http://blogs.msdn.com/dorischen/
Agenda
What is CSS3?
Media Queries
Advanced Layout
Tools
Summary and Resources
Whats is CSS3?
What is CSS used for now?
Layout
Colors
Fonts and text
Backgrounds
Borders
Floats
The Fundamentals

Elements
Attributes
Selectors
Properties

5
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
What is CSS3?
Last update: June 13, 2011

Geolocation
ECMA
HTML CSS Web Apps SVG

7
 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
 Whats 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
Media Queries
A look

11
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
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)

 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
 http://mediaqueri.es

15
View States
 device-
portrait

/* Re-arrange and hide/show content */

Full screen Portrait

full-screen
snapped
fill

Snap
Fill

Blog http://blogs.msdn.com/dorischen
 Media Queries: Portrait View
Before After

19
Space is used more efficiently after apply all css rules in Media Queries
Advanced Layout
Manage the wireframe
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
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
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
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
Grid Layout

27
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

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
Multi-Column Layout

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
33
Thinking About Adaptability
Manage Device Families
CSS3 Media Queries
Manage Real Estate
CSS3 Grid Layout
Adaptive Components
CSS3 FlexBox
CSS3 Multi-Column
CSS3
Tools
 The development tools are FREE!
If you use a higher SKU, it just works!
 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
Summary
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
Resources
 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
Bloghttp://blogs.msdn.com/b/ie/
http://blogs.msdn.com/dorischen
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
IE Test Drive
ietestdrive.com

PAGE 45