Introduction to CSS3

Introduction to CSS3Doris Chen Ph.D.Developer EvangelistMicrosofthttp://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  Properties5

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 ECMAHTML CSS Web Apps SVG7

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

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  TransitionsPAGE 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-ratioPAGE 14

http://mediaqueri.es15

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 After19 Space is used more efficiently after apply all css rules in Media Queries

Advanced Layout

Manage the wireframe

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 Layout12327

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 Layout31

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

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

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

Blend five ways: Visual Design ToolLayout Visual sizing & re- parenting, CSS3 grids, element managementStyling Responsive design, rich value editors for CSS3 propertiesDebug HTML Live DOM, inspect both markup and live valuesDebug 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 BlogsPAGE 43 • http://blogs.msdn.com/b/ie/ Blog 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.comPAGE 45

http://blogs.msdn.com	2496
https://twitter.com	2
http://translate.googleusercontent.com	1

Introduction to CSS3

by Doris Chen on Oct 01, 2012

Accessibility

Upload Details

Usage Rights

3 Embeds 2,499

Statistics

Introduction to CSS3 Presentation Transcript