Post on 27-Jan-2015
description
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
What’s 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?
HTML CSS Web Apps SVG
Geo
loca
tio
n
EC
MA
Last update: June 13, 2011
7
What is CSS3?
Defines visual appearance
of webpages
Divided into over 50
modules
Vendor prefixes used to
specify browser
extensions -ms-
-moz-
-webkit- HTML CSS Web Apps SVG
Geo
loca
tio
n
EC
MA
PAGE 8
What’s New in CSS3? 2D Transforms
Backgrounds & Borders
Color
Values and Units
Selectors
Web Fonts
Media Queries
Namespaces
3D Transforms
Animations
Gradient
CSS Exclusions (Floats)
Flexible Box (“Flexbox”)
Layout
Grid Layout
Multi-column Layout
Region
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
min/max-height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
PAGE 14
View States
Blog http://blogs.msdn.com/dorischen
device-portrait
/* Re-arrange and hide/show content */
full-screen
snapped
fill
Full screen
Snap
Fill
Portrait
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
ordering of flexible
box items
• Define how to
distribute and share
free space to flexibly
space and size
elements
• Align items
horizontally or
vertically
• display: flexbox
• -ms-box-direction
• -ms-box-orient
• -ms-box-ordinal-
group
• -ms-box-line-
progression
• -ms-box-lines
• -ms-box-pack
• -ms-box-flex
• -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
define grid rows and
columns
Place grid items within
the grid rows and
columns
Define flexible row,
column sizing
Align grid children
display: grid
-ms-grid-columns
-ms-grid-rows
-ms-grid-column
-ms-grid-row
-ms-grid-column-span
-ms-grid-row-span
-ms-grid-column-align
-ms-grid-row-align
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 multiple columns
• Specify column gaps
• Enable and style column rules
• column-count
• column-width
• column-gap
• column-rule-color
• column-rule-style
• 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!
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.
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
Blog http://blogs.msdn.com/dorischen
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 • http://blogs.msdn.com/b/ie/
PAGE 43
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