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
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)
18. device-
portrait
/* Re-arrange and hide/show content */
Full screen Portrait
full-screen
snapped
fill
Snap
Fill
Blog http://blogs.msdn.com/dorischen
19. Media Queries: Portrait View
Before After
19
Space is used more efficiently after apply all css rules in Media Queries
23. 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
24. 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
25. 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
26. 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
29. 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
30. 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
39. 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
43. 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
44. 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