The CSS3 Experience – Dan Cederholm — An Event Apart Seattle 2010

5 Apr

#aea #aeaseattle

Things we left on the moon. Silicon disk. “From Planet Earth – July 1969.” The Golden Record with sound, images from the earth. http://css3exp.com/moon/

Creating the User Experience With The Best Technology Possible

Do web sites need to be experienced the same in every browser? Nope.
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Realize critical and non-critical areas of interaction on the web. We have a core group of CSS 3 properties that have broad browser support.

Critical areas include branding, usability, accessibility and readability. Non-critical areas (where CSS3 can shine) are experience, visual rewards, feedback and movement.

Always provide a fall back for browsers that don’t support CSS3. List critical background images first.

Enriching Forms

Use an attribute selector, browsers that don’t support it won’t support CSS3 either. Gradients for insets. Webkit is different than Gecko. WestCiv Linear Gradients is a good tool for creating gradients. http://www.westciv.com/tools/gradients/

After you’ve completed CSS3 keyframes, you can use them on any element. CSS is AWESOME!

What About Other Browsers?

Internet Explorer degrades nicely. They’ll never know all the great stuff they’re missing.

Appropriate Use

Recreate something that happens in iPhone or desktop app on the web. Adding functionality to your site, in this case be sure functionality is still available in other browsers. It’s actually easy to get carried away. As always, remember to be subtle. You might scale something five percent. Next time your boss tells you, it needs more wow. Add this code. If that isn’t pizazz, I don’t know what is. Rotate a tiny image of the moon, instead of the whole page spinning.

Caveats

One problem with CSS3 is the vendor specific prefixes and actual properties.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>