CSS In The Real World
Ben Callahan
Web Strategist and Founding Partner at FORGE http://forgeideas.com
Blogging at Manic Mouse
http://manicmouse.com
But Wait, There's More!
http://bencallahan.com
Mind Drool
http://twitter.com/bencallahan
The State of Things
for you and I...
In the beginning
was the content
Content
Presentation
Behavior
Yep, that's why we make websites...
HTML
<FONT>
<B>  <I>
<CENTER>
<TABLE>
<A HREF="...">

onClick="alert('Hello World!');"
Content is the top priority
Presentation & Behavior are
purely utilitarian
Then came
Web Standards
Presentation
Behavior
Content
External CSS
<FONT>
<B>  <I>
<CENTER>
<TABLE>
font-family: sans-serif;
font-weight: bold;
text-align: center;
float: left;
Anchor tags are obviously fine
but
Inline JavaScript is a no-no...
External JavaScript
Clean
Lightweight
Semantic
Separation of Content from Presentation and Behavior
Conquered the challenge of browser inconsistency
But, in all of our zeal, we lost the emphasis on Content
This is upside-down
Content should be on top
Hardcore
Web Standards
Why is Content on the bottom?
This is not the fault of the
Web Standards community...
But it is our job to fix it
What we achieved
An examination of how we are
working today shows that we are
addressing this issue
Web Standards
without the zeal
Content
Presentation
Behavior
Clean
Lightweight
Semantic
External CSS
External JavaScript
The DOM
as a Data Model
CSS Generated Content
DOM Manipulation
:hover
:before & :after pseudo-elements
content property
CSS Frameworks
Object Oriented CSS
960 Grid System
Blueprint CSS
So, why the heck are we talking about this stuff?
What does this have to do with CSS?
Everything cool in today's web standards
requires a foundational knowledge of CSS
This
presentation
is not...
an intro to CSS
If that's what you want,
check out Andy Budd's book:
full of CSS tips and tricks
If that's what you want,
check out Christopher Schmitt's book:
about the cool new features of CSS3
If that's what you want,
check out Dan Cedarholm's book:
a lot of things
This
presentation
is...
a quick look at where we've been
an overview of where we are now
a discussion about how critical
CSS is as we move forward
about to get started
this new model allow for overlap

overlap requires you to learn (at least) some
of all of these disciplines

let's look at a few examples and relate them to
this model
CSS3 Pagination (clean distinction)

Iris Map :hover (getting Behavior from CSS)

Schedule App hover (JS Behavior, DOM as DM)

Schedule/Unschedule (DOM Manipulation)
1
CSS3 Pagination
without the images
For Details:
     http://www.manicmouse.com/?p=16
Demo
2
Complex CSS :hover
Demo
3
JavaScript Hover
Demo
4
DOM Manipulation
Demo
Where does this leave us?
Web Standards
(without the zeal) means:
Everyone needs to know
a little about everything
We must occasionally compromise on semantics
Jason Santa Maria
in his 2008 article for 24ways.org on modular layout systems
(http://24ways.org/2008/making-modular-layout-systems)
Trevor Morris
in his 2009 article for 24ways.org on JS and CSS code re-use
(http://24ways.org/2009/front-end-code-reusability-with-css-and-javascript)
Without a solid understanding of CSS
you will have a very difficult time
building really cool stuff.
Questions?