By Daniel Ryan

DevChatt 2011

• Selectors
• Color
• Backgrounds & Borders
• Multi-column Layouts
• Media Queries

Positional Selectors Demo

• element > element
• element + element
• element ~ element
• element:first-child
• element:last-child
• element:only-child
• element:nth-child(expression)
• element:first-of-type
• element:last-of-type
• element:nth-of-type(expression)
• element:only-of-type
• element:first-line
• element:first-letter

Multiple Classes Demo

• element.class1.class2

Attribute Selectors Demo

• element[attr]
• element[attr=value]
• element[attr^=value]
• element[attr$=value]
• element[attr*=value]

Psuedo Selectors Demo

• element:before, element:after
• element:hover, element:active
• element:active
• element:empty
• element:not(selector)
• element::selection

Form Input Selectors Demo

• element:focus
• element:enabled
• element:disabled
• element:checked
• element:required
• element:optional
• element:valid
• element:invalid
• element:in-range
• element:out-of-range
• element:read-only
• element:read-write

Properties Covered

• color (background-color, border-color, outline-color)
• opacity

New Color Values

In addition to the older keyword and hex colors, we now have:

• rgb(250, 42, 0)
• rgba(250, 42, 0, 0.75)
• hsl(10, 100%, 49%)
• hsla(10, 100%, 49%, 0.75)

• hsl(10, 100%, 49%)
• hsl(10, 80%, 49%)
• hsl(10, 60%, 49%)
• hsl(10, 40%, 49%)
• hsl(30, 100%, 49%)
• hsl(30, 80%, 49%)
• hsl(30, 60%, 49%)
• hsl(30, 40%, 49%)
• hsl(50, 100%, 49%)
• hsl(50, 80%, 49%)
• hsl(50, 60%, 49%)
• hsl(50, 40%, 49%)

New Border Properties

• border-radius
• border-image
• box-decoration-break

New Background Properties

• Multiple Backgrounds
  element { background: url('foo.gif'), url('bar.png'); }
• background-clip, background-origin
• background-size

New Properties Demo

• column-width
• column-count
• column-gap
• column-rule
• column-span
• column-fill

Problems

Only -width, -count, -gap, and -rule are properly supported at this time. Items are often balanced incorrectly.

• The key to “responsive layouts”
• Builds on older media queries like @media print { … }
• Better than browser sniffing for supporting multiple resolutions (ie, mobile devices)
• Supports larger displays while still providing a good user experience for smaller resolutions
• Experimental support for high density displays (ie, iPhone 4) @media screen and (-webkit-min-device-pixel-ratio:2) { … }

Two Ways to Implement

1. Inline: @media print { … }
2. Separate Files: <link href="print.css" rel="stylesheet" media="print">

This presentation is built solely using CSS transitions. Modernizr provides feature-detection for progressive enhancement.

.js section { display: none; }

.targetselector section, .js section { position: absolute; top: 0; right: 0; bottom: auto; left: 0; z-index: 1; min-height: 100%; min-width: 320px; }

.targetselector section { display: block; }

.opacity section { opacity: 0; }

.no-opacity section { display: none; }

.csstransitions section { transition: opacity 1s linear, z-index 1s; }

.targetselector section:target, .js section.target { opacity: 1; display: block; z-index: 2; }

section footer { position: absolute; top: auto; right: 0; bottom: 0; left: 0; padding: 1.15em; background: #333; text-align: center; }

.csstransitions.csstransforms3d.targetselector section footer { transform: translateY(4em); transform-style: preserve3d; transition: transform 1s; }

.csstransitions.csstransforms3d.targetselector section:target footer { transform: translateY(0); }

Best Practices

• Inline (style="…") transitions do not animate as smoothly as those based in a stylesheet or <style> tag
• If the transition is informative and not just decorative, provide a jQuery.animate fallback

• When simple transitions between states aren't enough
• CSS3’s attempt to be a Flash killer
• Works with keyframes, like all standard animation software

Highlighting an Element

@keyframes highlight {
    0% {
        background: transparent;
    }
    50% {
        background: #ff8;
    }
    100% {
        background: transparent;
    }
}

• Arguably the most powerful addition in CSS3
• Allows 2D and 3D manipulation

Transform Functions * denotes 3D transform

• matrix(num, num, num, num, num, num)
• matrix3d(num, num, num, num, num, num, num, num, num, num, num, num, num, num, num, num)*

• perspective(num)*

• rotate(degree)
• rotate3d(x, y, z, degree)*
• rotateX(num)*
• rotateY(num)*
• rotateZ(num)*

• scale(x[, y])
• scaleX(num)
• scaleY(num)
• scale3d(x, y, z)*
• scaleZ(num)*

• skew(x[, y])
• skewX(degree)
• skewY(degree)

• translate(x[, y])
• translateX(num)
• translateY(num)
• translate3d(x, y, z)*
• translateZ(num)*

Best Practices

• Even if you're using a 2D function, trigger 3D rendering with transform-style: preserve-3d
• Most browsers that support 3D transforms use hardware acceleration in 3D mode only

Pitfalls

• Mixing multiple transforms requires overly complex CSS
• Reading the transform value in JavaScript returns a matrix of 6 values for 2D or 16 values for 3D
• Positioning an element that has been transformed can be challenging; make use of transform-origin to tame the beast

Further Reading

• The Challenges and Freedoms of Creating a Chrome App
• CSS3 Info
• The CSS3 matrix() Transform for the Mathematically Challenged
• Quirks Mode
• Understanding CSS3 Transitions
• 24 Ways

Demos to Make Your <head> Spin

• Media Queri.es
• The Spinning Wheel of Awesome
• This Presentation on Github
• WikiHow Survival Kit

Automate the Vendor Prefixes

• CSS Prefixer
• eCSStender

Get in Touch

• dryan.com
• dryan@dryan.com
• @dryan

If you friend me on Facebook, I might say yes. If you add me on LinkedIn, I will laugh. A lot.