Why & How

Nate Zaugg

CSS 3

• Initially released in December 1996• Written to allow separation of document

content from document layout• Different styles can target different Media• CSS2 which was released in 1998 became

a recommendation 7 June 2011!• CSS3 is divided into separate “modules”

each with are at a different stage• CSS3 was published in June 1999

CSS3 Modules

• Many of these could be moved into the CSS2.1 specification before it is finalized– Selectors– Namespaces– Box Model– Backgrounds and Borders– Text Effects– 2D/3D Transformations– Animations– Multiple Column Layout– Color– Media Queries– … {30+ more}

Why CSS3

• Makes some things easier• Most browsers support most features• Can easily be added to existing websites• Makes sites look nicer• More compatible than “CSS Hacks”• Faster than “CSS Hacks” or images• Helps with Mobile support• Makes sites look nicer!

CSS3 Features

• Table Based Positioning• Box Enhancements

– border-radius, border-image, box-shadow, background-size, background-origin, resize, flexible box, linebox

• Media Queries• Text Enhancements

– @font-face, text-shadow, word-wrap, text-justify, text-overflow– Multiple columns

• Transforms– 2D: translate, rotate, scale, skew, matrix– 3D: rotateX/Y/Z/3D, scaleX/Y/Z/3D, perspective, backface-visibility,

translateX/Y/Z/3D, matrix3D

• Animations– Transitions – effects that let an element gradually change from one style to another

(ex. animate the change in width of a box)– @keyframe, name, duration, timing-function, iteration-count, direction

Thanks!

• Thanks to J Michael Palermo IV for demo code

• Please rate me on SpeakerRate.com• Thanks to the sponsors!