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

http://mediaqueri.es

15

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

Grid Layout

1

2

3

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