transcendent design with css & javascript (web directions north '07)

Transcendent Design with CSS & JavaScript

CSS + DOM = Magic

Transcendent Designwith 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


CSS + DOM = Magic

Clarke Gustafson

PhotobyPatrickLauke PhotobyCindyLi


CSS + DOM = Magic


Artisdesignwithout

compromise

JeffreyVeen

““


Environment;Theinflexibilityofthe2dscreen,

Materials;ThelimitationsofmarkupandCSS,

Medium;PoorerCSSsupportinolderbrowsers

Ourselves;Unlearningthatwehavelearnedfrompastexperience


We'vearrivedatasituationwherebeautifulsiteswithbeautifulcodearebeingproducedbythehundreds;everymonth,everyweek,everyday.It'snolongeramyththatyoucanproduceastunningsitewithWebStandards.

CameronAdams

“

“


Semanticsmeans“meaning”MarkupasmeaningfultocontentThecontent‐outapproachAidsaccessibility&SEOValidisnotalwaysmeaningful

Meaningfulmarkup


<div>

<h1> <p>

<q>

<em>

<dl>

<dt> <dd>

<img> <p>

<body>

<html>

<ul>

<li>

<h4> <p>

DOMvisualision


DOMvisualision

<div#branding>

<h4>

<img>

<body>

<html>

<div#content> <div#siteinfo>

<div#content_main>

<h4>

<h5#tagline>

<p> <p>

<p> <ul> <p>

<li>


<a>

href title

DOMvisualision

anchor

<p>

<p>Thisisaparagraphthatcontainsan<ahref="#"title="">anchor</a>.</p>

Thisisaparagraphthatcontainsan .(period)


SimplyreplacingtablecellswithdivelementswillnothelpyougainthefullbenefitsofusingwebstandardsorCSS.Unlessyouhavecarefullyconsideredthemeaningofeachdivision,divelements

arelittlebetterthanusingtables.

“

“


</li>Green<li>

<li>

<li>

<li>

<li>

<ul>

</ul>

</li>Purple

</li>Red

</li>Blue

</li>Black


</li>2784<li> <a> </a>

</li>3243<li> <a> </a>

</li>1992<li> <a> </a>

</li>2011<li> <a> </a>

</li>2205<li> <a> </a>

<ol>

</ol>


<table>

</table>

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

</th>Driver name<th>

</th>License plate<th>

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

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

</td>Aaron<td>

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

</td>666 DOM<td>


“Masteringpositioningwithitsenormouspotentialforlayoutflexibilityandrobust

behaviorwillbeoneofthemostrewardingchallengesyoucantakeonwhenlearningCSS.”

CSSpositioning


CSSandJavaScript

CSS JavaScript

a vara=document.getElementsByTagName('a');

#content varcontainer=document.getElementById

('content');

#extrasp varparas=document.getElementById

('extras').getElementsByTagName('p');


“Styleanelementeitherbasedonwhetheranelementhasan

attributenamesuchashreforbasedontheattributevalue.”

Attributeselectors


vara=document.getElementById('content').getElementsByTagName('a')[0]varhref=a.getAttribute('href');

orsetthem

a.setAttribute('title','IaddedthiswiththeDOM');

AccessingattributesYoucangetattributevalues


varul=document.createElement('ul');varli=document.createElement('li');vari=1;while(i<4){vartemp=li.cloneNode(true);temp.appendChild(document.createTextNode(

'thisisLInumber'+i));ul.appendChild(temp);i++;}document.getElementsByTagName('body')[0].appendChild(ul);

Creatingcontent


CSS3Multi‐columnModule



column‐countcolumn‐widthcolumn‐gapcolumn‐rule

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



#content_mainul{column‐width:18em;column‐gap:25px;column‐rule:thinsolidblack;

‐moz‐column‐width:18em;‐moz‐column‐gap:25px;‐moz‐column‐rule:thinsolidblack;}


“AsproposedbyAndyClarkeinhisblog[1],the'column‐rule‐image'propertyhasbeenaddedtothespec.Intheblog,theexamplesare:

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

HåkonWiumLie.CTOOperaSoftware



CSS3Multi‐columnModuledemo


Zebrastriping


<tbody>

<tr>

<td>bicarbonateofsoda</td>

</tr>

<tr>

<td>creamoftartar</td>

</tr>

</tbody>

Zebrastriping


<tbody>

<trclass="odd">

<td>bicarbonateofsoda</td>

</tr>

<trclass="even">

<td>creamoftartar</td>

</tr>

</tbody>

Zebrastriping


tr:nth‐child(odd){

background‐color:#fff;}

tr:nth‐child(even){

background‐color:#ebebeb;}

Zebrastriping


tr:nth‐child(10n‐1){

background‐color:#ebebeb;}

Countupthenumberofrowsinincrementsof10(10,20,30etc.)andtargettherowsthatcomeimmediatelybefore(‐1),soenablingyoutostylethe9th,19th,29th,etc.rows.

Zebrastriping


CSS3AdvancedLayoutModule



Slotletter identifiestheslotwithinthegridforanycontentthatwillbepositionedwithinit

@(atsymbol) Adefaultslotintowhichcontentthathasnotbeensituatedcanflow.

.(period) Awhite‐spaceslotthatcanhavenocontentinsertedintoit.



div#biscotti{position:a;}

div#wafles{position:b;}

div#muffins{position:c;}

div#jelly{position:d;}

div#bread{position:e;}

div#icecream{position:f;}


<divid="waffles"><divid="biscotti"> <divid="muffins">

<divid="bread"><divid="jelly"> <divid="icecream">


<divid="waffles"><divid="biscotti"> <divid="muffins">

<divid="bread"><divid="jelly"> <divid="icecream">

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

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


1 2 3 4

1 1 2

1 2 3

1 2 3


CSS3AdvancedLayoutModuledemo


Prototype(prototypejs.org)

Moo.fx(moofx.mad4milk.net)

Dojo(dojotoolkit.org)

jQuery(jquery.com)

Lowpro(ujs4rails.com)

Workingwithlibraries

YUI(developer.yahoo.com/yui)

Mochikit(mochikit.com)

Scriptaculous(script.aculo.us)

Rico(openrico.org)



SomegiveJSthefeelofanotherlanguage

Prototype,Scriptaculous&Lowpro‐RubyMochikit–PythonYUI–Java



Whydoweusethem?Theymakeourliveseasier.

Thekeythereiseasier.

Whichoneisbest?

HowdoIgetstarted?


DeanEdwards’IE7ScriptsallowyoutouseCSS2andevensomeCSS3selectorsinyourstylesheetsandtransformslegacyversionsofInternetExplorerintoashiny

newbrowser.

““

DeanEdwards’IE7Scripts


ChildselectorsAdjacentsiblingselectorsAttributevalueselectors:first‐child:last‐child:only‐child


:nth‐childpseudo‐classes:before:after:hover,:active,:focusallelementsPNGalpha‐transparency



<!‐‐[iflteIE6]><scriptsrc="ie7‐standard‐p.js"type="text/javascript"></script><![endif]‐‐>


CSS + DOM = Magic






Onemorething


CSS + DOM = Magic





transcendent design with css & javascript (web directions north '07)

Technology

magic transcendent design

getelementbyid content

content varcontainer

getelementbyid extras

createelementul varli

taxi number driver

getelementsbytagnamea0

getattributehref orsetthem