Transcendent Design with CSS & JavaScript (Web Directions North '07)

CSS + DOM
= Magic
Transcendent Design
with CSS & JavaScript
ANDY CLARKE AARON GUSTAFSON
WEB DIRECTIONS NORTH 2007, VANCOUVER, CANADA

Copyright. All Rights Reserved. All works are copyright of their original owners and all copyrights,
trademarks and ownerships recognized. This presentation is for educational purposes only

Transcendent Design with CSS & JavaScript

CSS + DOM
= Magic
Photo by Patrick Lauke Photo by Cindy Li

Clarke Gustafson


CSS + DOM
= Magic


“ Art is design 
without 
compromise
“
Jeffrey Veen


Environment; 
The inflexibility of the 2d screen,

Materials; 
The limitations of markup and CSS,

Medium;
Poorer CSS support in older browsers

Ourselves; 
Unlearning that we have learned from past experience


“ We've arrived at a situation where 
beautiful sites with beautiful code are 
being produced by the hundreds; every 
month, every week, every day. It's no 
longer a myth that you can produce a 
stunning site with Web Standards.

“
Cameron Adams


Meaningful markup
Semantics means “meaning”
Markup as meaningful to content
The content‐out approach
Aids accessibility & SEO
Valid is not always meaningful


DOM visualision
<html>

<body>
<div>

<ul>
<dl> <p>
<h1>

<dt> <dd> <li>
<q>

<img> <p> <em> <h4> <p>


DOM visualision
<html>

<body>

<div#branding> <div#content> <div#siteinfo>

<h4> <h5#tagline> <div#content_main> <p> <ul> <p>

<img> <h4> <p> <p> <li>


DOM visualision
<p>This is a paragraph that contains an <a href= "#" title="">anchor</a>.</p>

<p>

This is a paragraph 
<a> .(period)
that contains an  

href title anchor


“ Simply replacing table cells with div 
elements will not help you gain the full 
benefits of using web standards or CSS. 
Unless you have carefully considered the 
meaning of each division, div elements 
are little better than using tables.

“

<ul>

</li>
<li> Green

</li>
<li> Purple

</li>
<li> Red

</li>
<li> Blue

</li>
<li> Black

</ul>


<table>

</th>
<tr> <th> Taxi number

</th>
<th> Driver name

</th>
<th> License plate

</th>
<th> </tr>
Rank order

</td>
<tr> <td> 8K33

</td>
<td> Aaron

</td>
<td> 666 DOM

</td>
<td> </tr>
1

</table>


CSS positioning
“Mastering positioning with its enormous 
potential for layout flexibility and robust 
behavior will be one of the most rewarding 
challenges you can take on when learning CSS.”


CSS and JavaScript

CSS JavaScript
a var a = document.getElementsByTagName('a');

#content var container = document.getElementById
('content');
#extras p var paras = document.getElementById
('extras').getElementsByTagName('p');


Attribute selectors
“Style an element either based on 
whether an element has an 
attribute name such as href or 
based on the attribute value.”


Accessing attributes
You can get attribute values
var a = document.getElementById
( 'content' ).getElementsByTagName( 'a' )[0]
var href = a.getAttribute( 'href' );

or set them
a.setAttribute( 'title', 'I added this with the DOM' );


Creating content
var ul = document.createElement( 'ul' );
var li = document.createElement( 'li' );
var i = 1;
while( i < 4 ){
  var temp = li.cloneNode( true );
  temp.appendChild( document.createTextNode( 
'this is LI number '+i ) );
  ul.appendChild( temp );
  i++;
}
document.getElementsByTagName( 'body' )[0].appendChild( ul );


CSS3 Multi‐column Module


column‐count
column‐width
column‐gap
column‐rule

‐moz‐column‐count
‐moz‐column‐width
‐moz‐column‐gap
‐moz‐column‐rule


#content_main ul {
column‐width : 18em;
column‐gap : 25px; 
column‐rule : thin solid black;

‐moz‐column‐width : 18em;
‐moz‐column‐gap : 25px; 
‐moz‐column‐rule : thin solid black; }


“As proposed by Andy Clarke in his blog [1], the 'column‐
rule‐image' property has been added to the spec. In the 
blog, the examples are:

body { column‐rule‐image : url(rule.png); }
body { column‐rule‐image : url(rule.png) repeat‐x 0 0; }”

Håkon Wium Lie. CTO Opera Software


CSS3 Multi‐column 
Module demo


Zebra striping


Zebra striping
<tbody>
<tr>
<td>bicarbonate of soda</td>
</tr>
<tr>
<td>cream of tartar</td>
</tr>
</tbody>


Zebra striping
<tbody>
<tr class="odd">
<td>bicarbonate of soda</td>
</tr>
<tr class="even">
<td>cream of tartar</td>
</tr>
</tbody>


Zebra striping
tr:nth‐child(odd) { 
background‐color : #fff; }

tr:nth‐child(even) { 
background‐color : #ebebeb; }


Zebra striping
Count up the number of rows in increments of 10 
(10, 20, 30 etc.) and target the rows that come 
immediately before (‐1), so enabling you to style the 
9th, 19th, 29th, etc. rows. 

tr:nth‐child(10n‐1)  { 
background‐color : #ebebeb; }


CSS3 Advanced Layout Module



Slot letter identifies the slot within the grid for any 
content that will be positioned within it

@ (at symbol) A default slot into which content that 
has not been situated can flow.
. (period) A white‐space slot that can have no 
content inserted into it.


div#biscotti { position : a; }
div#wafles { position : b; }
div#muffins { position : c; }
div#jelly { position : d; }
div#bread { position : e; }
div#icecream { position : f; }


<div id="biscotti"> <div id="waffles"> <div id="muffins">

<div id="jelly"> <div id="bread"> <div id="icecream">


<div id="biscotti"> <div id="waffles"> <div id="muffins">

position : a; position : b; position : c;

<div id="jelly"> <div id="bread"> <div id="icecream">

position : d; position : e; position : f;


1 2 3 4

1 1 2

1 2 3

1 2 3


CSS3 Advanced Layout 
Module demo


Working with libraries
Prototype (prototypejs.org) YUI (developer.yahoo.com/yui )
Moo.fx (moofx.mad4milk.net) Mochikit (mochikit.com)
Dojo (dojotoolkit.org) Scriptaculous (script.aculo.us)
jQuery (jquery.com) Rico (openrico.org)
Lowpro (ujs4rails.com)


Some give JS the feel of another language

Prototype, Scriptaculous & Lowpro ‐ Ruby
Mochikit – Python
YUI – Java


Why do we use them? They make our lives easier.

The key there is easier.

Which one is best?

How do I get started?


Dean Edwards’ IE7 Scripts

“ Dean Edwards’ IE7 Scripts allow you to 
use CSS2 and even some CSS3 selectors 
in your stylesheets and transforms legacy 
versions of Internet Explorer into a shiny 
new browser. 

“

Child selectors :nth‐child pseudo‐classes
Adjacent sibling selectors :before :after 
Attribute value selectors :hover, :active, :focus all elements
:first‐child PNG alpha‐transparency 
:last‐child
:only‐child 


<!‐‐[if lte IE 6]>
<script src="ie7‐standard‐p.js" 
type="text/javascript">
</script>
<![endif]‐‐> 


One more thing


Transcendent Design with CSS & JavaScript (Web Directions North '07)

Transcendent Design with CSS & JavaScript (Web Directions North '07)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a Transcendent Design with CSS & JavaScript (Web Directions North '07)

Semelhante a Transcendent Design with CSS & JavaScript (Web Directions North '07) (20)

Mais de Aaron Gustafson

Mais de Aaron Gustafson (20)

Último

Último (20)

Transcendent Design with CSS & JavaScript (Web Directions North '07)