Transcendent Design with CSS & JavaScript (Web Directions North '07)
-
Upload
aaron-gustafson -
Category
Technology
-
view
6.517 -
download
4
description
Transcript of Transcendent Design with CSS & JavaScript (Web Directions North '07)
![Page 1: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/1.jpg)
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
![Page 2: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/2.jpg)
Transcendent Design with CSS & JavaScript
CSS + DOM = Magic
Clarke Gustafson
PhotobyPatrickLauke PhotobyCindyLi
![Page 3: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/3.jpg)
Transcendent Design with CSS & JavaScript
CSS + DOM = Magic
![Page 4: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/4.jpg)
Transcendent Design with CSS & JavaScript
Artisdesignwithout
compromise
JeffreyVeen
““
![Page 5: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/5.jpg)
Transcendent Design with CSS & JavaScript
Environment;Theinflexibilityofthe2dscreen,
Materials;ThelimitationsofmarkupandCSS,
Medium;PoorerCSSsupportinolderbrowsers
Ourselves;Unlearningthatwehavelearnedfrompastexperience
![Page 6: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/6.jpg)
Transcendent Design with CSS & JavaScript
![Page 7: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/7.jpg)
Transcendent Design with CSS & JavaScript
![Page 8: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/8.jpg)
Transcendent Design with CSS & JavaScript
![Page 9: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/9.jpg)
Transcendent Design with CSS & JavaScript
![Page 10: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/10.jpg)
Transcendent Design with CSS & JavaScript
![Page 11: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/11.jpg)
Transcendent Design with CSS & JavaScript
![Page 12: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/12.jpg)
Transcendent Design with CSS & JavaScript
![Page 13: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/13.jpg)
Transcendent Design with CSS & JavaScript
![Page 14: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/14.jpg)
Transcendent Design with CSS & JavaScript
We'vearrivedatasituationwherebeautifulsiteswithbeautifulcodearebeingproducedbythehundreds;everymonth,everyweek,everyday.It'snolongeramyththatyoucanproduceastunningsitewithWebStandards.
CameronAdams
“
“
![Page 15: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/15.jpg)
Transcendent Design with CSS & JavaScript
![Page 16: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/16.jpg)
Transcendent Design with CSS & JavaScript
![Page 17: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/17.jpg)
Transcendent Design with CSS & JavaScript
![Page 18: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/18.jpg)
Transcendent Design with CSS & JavaScript
![Page 19: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/19.jpg)
Transcendent Design with CSS & JavaScript
![Page 20: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/20.jpg)
Transcendent Design with CSS & JavaScript
![Page 21: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/21.jpg)
Transcendent Design with CSS & JavaScript
![Page 22: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/22.jpg)
Transcendent Design with CSS & JavaScript
![Page 23: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/23.jpg)
Transcendent Design with CSS & JavaScript
![Page 24: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/24.jpg)
Transcendent Design with CSS & JavaScript
![Page 25: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/25.jpg)
Transcendent Design with CSS & JavaScript
![Page 26: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/26.jpg)
Transcendent Design with CSS & JavaScript
![Page 27: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/27.jpg)
Transcendent Design with CSS & JavaScript
![Page 28: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/28.jpg)
Transcendent Design with CSS & JavaScript
![Page 29: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/29.jpg)
Transcendent Design with CSS & JavaScript
![Page 30: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/30.jpg)
Transcendent Design with CSS & JavaScript
![Page 31: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/31.jpg)
Transcendent Design with CSS & JavaScript
![Page 32: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/32.jpg)
Transcendent Design with CSS & JavaScript
![Page 33: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/33.jpg)
Transcendent Design with CSS & JavaScript
Semanticsmeans“meaning”MarkupasmeaningfultocontentThecontent‐outapproachAidsaccessibility&SEOValidisnotalwaysmeaningful
Meaningfulmarkup
![Page 34: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/34.jpg)
Transcendent Design with CSS & JavaScript
<div>
<h1> <p>
<q>
<em>
<dl>
<dt> <dd>
<img> <p>
<body>
<html>
<ul>
<li>
<h4> <p>
DOMvisualision
![Page 35: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/35.jpg)
Transcendent Design with CSS & JavaScript
DOMvisualision
<div#branding>
<h4>
<img>
<body>
<html>
<div#content> <div#siteinfo>
<div#content_main>
<h4>
<h5#tagline>
<p> <p>
<p> <ul> <p>
<li>
![Page 36: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/36.jpg)
Transcendent Design with CSS & JavaScript
<a>
href title
DOMvisualision
anchor
<p>
<p>Thisisaparagraphthatcontainsan<ahref="#"title="">anchor</a>.</p>
Thisisaparagraphthatcontainsan .(period)
![Page 37: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/37.jpg)
Transcendent Design with CSS & JavaScript
SimplyreplacingtablecellswithdivelementswillnothelpyougainthefullbenefitsofusingwebstandardsorCSS.Unlessyouhavecarefullyconsideredthemeaningofeachdivision,divelements
arelittlebetterthanusingtables.
“
“
![Page 38: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/38.jpg)
Transcendent Design with CSS & JavaScript
![Page 39: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/39.jpg)
Transcendent Design with CSS & JavaScript
![Page 40: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/40.jpg)
Transcendent Design with CSS & JavaScript
![Page 41: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/41.jpg)
Transcendent Design with CSS & JavaScript
![Page 42: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/42.jpg)
Transcendent Design with CSS & JavaScript
![Page 43: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/43.jpg)
Transcendent Design with CSS & JavaScript
![Page 44: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/44.jpg)
Transcendent Design with CSS & JavaScript
</li>Green<li>
<li>
<li>
<li>
<li>
<ul>
</ul>
</li>Purple
</li>Red
</li>Blue
</li>Black
![Page 45: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/45.jpg)
Transcendent Design with CSS & JavaScript
![Page 46: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/46.jpg)
Transcendent Design with CSS & JavaScript
</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>
![Page 47: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/47.jpg)
Transcendent Design with CSS & JavaScript
![Page 48: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/48.jpg)
Transcendent Design with CSS & JavaScript
<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>
![Page 49: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/49.jpg)
Transcendent Design with CSS & JavaScript
![Page 50: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/50.jpg)
Transcendent Design with CSS & JavaScript
![Page 51: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/51.jpg)
Transcendent Design with CSS & JavaScript
<h1>
<p>
<h2>
<ul>
<li>
<h3>
<p>
<a> <img>
<liid="p89">
<liid="p65">
![Page 52: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/52.jpg)
Transcendent Design with CSS & JavaScript
“Masteringpositioningwithitsenormouspotentialforlayoutflexibilityandrobust
behaviorwillbeoneofthemostrewardingchallengesyoucantakeonwhenlearningCSS.”
CSSpositioning
![Page 53: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/53.jpg)
Transcendent Design with CSS & JavaScript
![Page 54: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/54.jpg)
Transcendent Design with CSS & JavaScript
CSSandJavaScript
CSS JavaScript
a vara=document.getElementsByTagName('a');
#content varcontainer=document.getElementById
('content');
#extrasp varparas=document.getElementById
('extras').getElementsByTagName('p');
![Page 55: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/55.jpg)
Transcendent Design with CSS & JavaScript
“Styleanelementeitherbasedonwhetheranelementhasan
attributenamesuchashreforbasedontheattributevalue.”
Attributeselectors
![Page 56: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/56.jpg)
Transcendent Design with CSS & JavaScript
vara=document.getElementById('content').getElementsByTagName('a')[0]varhref=a.getAttribute('href');
orsetthem
a.setAttribute('title','IaddedthiswiththeDOM');
AccessingattributesYoucangetattributevalues
![Page 57: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/57.jpg)
Transcendent Design with CSS & JavaScript
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
![Page 58: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/58.jpg)
Transcendent Design with CSS & JavaScript
![Page 59: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/59.jpg)
Transcendent Design with CSS & JavaScript
CSS3Multi‐columnModule
![Page 60: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/60.jpg)
Transcendent Design with CSS & JavaScript
CSS3Multi‐columnModule
column‐countcolumn‐widthcolumn‐gapcolumn‐rule
‐moz‐column‐count‐moz‐column‐width‐moz‐column‐gap‐moz‐column‐rule
![Page 61: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/61.jpg)
Transcendent Design with CSS & JavaScript
CSS3Multi‐columnModule
#content_mainul{column‐width:18em;column‐gap:25px;column‐rule:thinsolidblack;
‐moz‐column‐width:18em;‐moz‐column‐gap:25px;‐moz‐column‐rule:thinsolidblack;}
![Page 62: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/62.jpg)
Transcendent Design with CSS & JavaScript
“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‐columnModule
![Page 63: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/63.jpg)
Transcendent Design with CSS & JavaScript
![Page 64: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/64.jpg)
Transcendent Design with CSS & JavaScript
CSS3Multi‐columnModuledemo
![Page 65: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/65.jpg)
Transcendent Design with CSS & JavaScript
Zebrastriping
![Page 66: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/66.jpg)
Transcendent Design with CSS & JavaScript
<tbody>
<tr>
<td>bicarbonateofsoda</td>
</tr>
<tr>
<td>creamoftartar</td>
</tr>
</tbody>
Zebrastriping
![Page 67: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/67.jpg)
Transcendent Design with CSS & JavaScript
<tbody>
<trclass="odd">
<td>bicarbonateofsoda</td>
</tr>
<trclass="even">
<td>creamoftartar</td>
</tr>
</tbody>
Zebrastriping
![Page 68: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/68.jpg)
Transcendent Design with CSS & JavaScript
tr:nth‐child(odd){
background‐color:#fff;}
tr:nth‐child(even){
background‐color:#ebebeb;}
Zebrastriping
![Page 69: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/69.jpg)
Transcendent Design with CSS & JavaScript
tr:nth‐child(10n‐1){
background‐color:#ebebeb;}
Countupthenumberofrowsinincrementsof10(10,20,30etc.)andtargettherowsthatcomeimmediatelybefore(‐1),soenablingyoutostylethe9th,19th,29th,etc.rows.
Zebrastriping
![Page 70: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/70.jpg)
Transcendent Design with CSS & JavaScript
![Page 71: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/71.jpg)
Transcendent Design with CSS & JavaScript
CSS3AdvancedLayoutModule
![Page 72: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/72.jpg)
Transcendent Design with CSS & JavaScript
![Page 73: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/73.jpg)
Transcendent Design with CSS & JavaScript
CSS3AdvancedLayoutModule
Slotletter identifiestheslotwithinthegridforanycontentthatwillbepositionedwithinit
@(atsymbol) Adefaultslotintowhichcontentthathasnotbeensituatedcanflow.
.(period) Awhite‐spaceslotthatcanhavenocontentinsertedintoit.
![Page 74: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/74.jpg)
Transcendent Design with CSS & JavaScript
CSS3AdvancedLayoutModule
div#biscotti{position:a;}
div#wafles{position:b;}
div#muffins{position:c;}
div#jelly{position:d;}
div#bread{position:e;}
div#icecream{position:f;}
![Page 75: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/75.jpg)
Transcendent Design with CSS & JavaScript
![Page 76: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/76.jpg)
Transcendent Design with CSS & JavaScript
<divid="waffles"><divid="biscotti"> <divid="muffins">
<divid="bread"><divid="jelly"> <divid="icecream">
![Page 77: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/77.jpg)
Transcendent Design with CSS & JavaScript
<divid="waffles"><divid="biscotti"> <divid="muffins">
<divid="bread"><divid="jelly"> <divid="icecream">
position:a; position:b; position:c;
position:d; position:e; position:f;
![Page 78: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/78.jpg)
Transcendent Design with CSS & JavaScript
![Page 79: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/79.jpg)
Transcendent Design with CSS & JavaScript
1 2 3 4
1 1 2
1 2 3
1 2 3
![Page 80: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/80.jpg)
Transcendent Design with CSS & JavaScript
![Page 81: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/81.jpg)
Transcendent Design with CSS & JavaScript
CSS3AdvancedLayoutModuledemo
![Page 82: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/82.jpg)
Transcendent Design with CSS & JavaScript
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)
![Page 83: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/83.jpg)
Transcendent Design with CSS & JavaScript
Workingwithlibraries
SomegiveJSthefeelofanotherlanguage
Prototype,Scriptaculous&Lowpro‐RubyMochikit–PythonYUI–Java
![Page 84: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/84.jpg)
Transcendent Design with CSS & JavaScript
Workingwithlibraries
Whydoweusethem?Theymakeourliveseasier.
Thekeythereiseasier.
Whichoneisbest?
HowdoIgetstarted?
![Page 85: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/85.jpg)
Transcendent Design with CSS & JavaScript
DeanEdwards’IE7ScriptsallowyoutouseCSS2andevensomeCSS3selectorsinyourstylesheetsandtransformslegacyversionsofInternetExplorerintoashiny
newbrowser.
““
DeanEdwards’IE7Scripts
![Page 86: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/86.jpg)
Transcendent Design with CSS & JavaScript
ChildselectorsAdjacentsiblingselectorsAttributevalueselectors:first‐child:last‐child:only‐child
DeanEdwards’IE7Scripts
:nth‐childpseudo‐classes:before:after:hover,:active,:focusallelementsPNGalpha‐transparency
![Page 87: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/87.jpg)
Transcendent Design with CSS & JavaScript
DeanEdwards’IE7Scripts
<!‐‐[iflteIE6]><scriptsrc="ie7‐standard‐p.js"type="text/javascript"></script><![endif]‐‐>
![Page 88: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/88.jpg)
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
![Page 89: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/89.jpg)
Transcendent Design with CSS & JavaScript
Onemorething
![Page 90: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/90.jpg)
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
![Page 91: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/91.jpg)
![Page 92: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/92.jpg)
![Page 93: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/93.jpg)
![Page 94: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/94.jpg)
![Page 95: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/95.jpg)
![Page 96: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/96.jpg)
![Page 97: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/97.jpg)
![Page 98: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/98.jpg)
![Page 99: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/99.jpg)
![Page 100: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/100.jpg)
![Page 101: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/101.jpg)
![Page 102: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/102.jpg)
![Page 103: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/103.jpg)
![Page 104: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/104.jpg)
![Page 105: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/105.jpg)
![Page 106: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/106.jpg)
![Page 107: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/107.jpg)
![Page 108: Transcendent Design with CSS & JavaScript (Web Directions North '07)](https://reader031.fdocuments.in/reader031/viewer/2022020207/554f555bb4c905423f8b54fc/html5/thumbnails/108.jpg)