css3 now

CSS3 NOW!Monday 29th of November — Tech Mondays Kaho St. Lieven — Johan Ronsse

Tuesday 30 November 2010

Hi! I’m Johan.


FLANDERS WEB VALLEY!

#introductionTuesday 30 November 2010

Netlog.com


Larian Studios


Kaho!


I work at Netlash, a web agency


Who writes CSS on a regular basis?


Who uses CSS3 properties in their CSS?


Fallacy


The web developer implements

The spec writer writes feature

The browser developer implements

Visitor sees feature

Browser feature: traditional


The web developer needs feature

The browser developers implement the feature (wait a few months)

Web developer hacks feature into code (with JS)

CSS feature: now

Visitor sees feature

The spec writers write about it in the spec (wait a few years)


WEB DEV’SRESPONSIBILITY

Advance the web!


USE CSS3 NOW!How?


1. @FONT-FACE


http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html


http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

Typekit.com


By Jason Santa Maria


By Frank Chimero


Free alternatives to Typekit:

FontSquirrel Google font directory


Door populariteit Typekit:

• .woff support in Firefox, coming in other browsers

• meer beschikbare fonts voor web embedding

• fonts worden herbekeken voor betere weergave op scherm (e.g. FF META)


2. LIGHT&SHADOWS


Simulate Photoshop layer styles with CSS3: border-radius, (inset) box-shadow, opacity, rgba/hsl


Box shadow demo

#element { box-shadow: 2px 2px 6px #000;}

#element { box-shadow: inset 2px 2px 6px #000;}

(Before: try to recreate shadow with images)


IE Fallback:Simulate shadow with border-right and

border-bottom


rgba() demo

#elementRGBA { background: rgba(0,0,0,0.33); width: 200px; height: 100px; margin: 20px;}

#element { background: rgb(0,0,0); width: 200px; height: 100px; margin: 20px;}

CSS2: CSS3:


#element { background: #1E5799; /* old browsers */ background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */}

Gradients demo

http://www.colorzilla.com/gradient-editor/




IE Fallback:Gradient filter/repeating PNG background/

flat color


3. ANIMATE!(hardware accelerated)


deaxon.com


Great animation demo

http://www.nevermindthebullets.com




IE Fallback:Gradient filter/repeating PNG background/

flat color


Use modernizr.js(for feature detection)

http://www.modernizr.com/


http://www.modernizr.com

http://www.modernizr.com

Some popular websites in IE6

http://www.elated.com/articles/top-30-websites-viewed-in-ie6/

To end this presentation:




Twitter.com: very much broken.


MSN: Can’t click lightbox. Javascript error.Stuck on this page.


Wordpress: layout borked.


Flick: layout borked too.


IE: the best browser to download Firefox.(Firefox.com borked in IE6 too)


CNN: politics page crashes the browser.


Summary

1. Websites don’t have to look the same in every browser

2. Stop spending 5 hours debugging IE on a 20 hour project

3. Don’t spend your time creating crazy sprites and hacking functionality into older browsers

4. Use progressively enhanced CSS3 instead :)


Q&ATuesday 30 November 2010

[email protected]://www.netlash.com

http://www.wolfslittlestore.beTwitter: @wolfr_


http://www.netlash.com








css3 now

Technology

browser feature

px height

px margin

feature web developer

css feature

web agencytuesday

use css3

nowthe web developer