Post on 10-May-2015
description
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
Transcendent Design with CSS & JavaScript
CSS + DOM = Magic
Clarke Gustafson
PhotobyPatrickLauke PhotobyCindyLi
Transcendent Design with CSS & JavaScript
CSS + DOM = Magic
Transcendent Design with CSS & JavaScript
Artisdesignwithout
compromise
JeffreyVeen
““
Transcendent Design with CSS & JavaScript
Environment;Theinflexibilityofthe2dscreen,
Materials;ThelimitationsofmarkupandCSS,
Medium;PoorerCSSsupportinolderbrowsers
Ourselves;Unlearningthatwehavelearnedfrompastexperience
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
We'vearrivedatasituationwherebeautifulsiteswithbeautifulcodearebeingproducedbythehundreds;everymonth,everyweek,everyday.It'snolongeramyththatyoucanproduceastunningsitewithWebStandards.
CameronAdams
“
“
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Semanticsmeans“meaning”MarkupasmeaningfultocontentThecontent‐outapproachAidsaccessibility&SEOValidisnotalwaysmeaningful
Meaningfulmarkup
Transcendent Design with CSS & JavaScript
<div>
<h1> <p>
<q>
<em>
<dl>
<dt> <dd>
<img> <p>
<body>
<html>
<ul>
<li>
<h4> <p>
DOMvisualision
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>
Transcendent Design with CSS & JavaScript
<a>
href title
DOMvisualision
anchor
<p>
<p>Thisisaparagraphthatcontainsan<ahref="#"title="">anchor</a>.</p>
Thisisaparagraphthatcontainsan .(period)
Transcendent Design with CSS & JavaScript
SimplyreplacingtablecellswithdivelementswillnothelpyougainthefullbenefitsofusingwebstandardsorCSS.Unlessyouhavecarefullyconsideredthemeaningofeachdivision,divelements
arelittlebetterthanusingtables.
“
“
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
</li>Green<li>
<li>
<li>
<li>
<li>
<ul>
</ul>
</li>Purple
</li>Red
</li>Blue
</li>Black
Transcendent Design with CSS & JavaScript
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>
Transcendent Design with CSS & JavaScript
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>
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
<h1>
<p>
<h2>
<ul>
<li>
<h3>
<p>
<a> <img>
<liid="p89">
<liid="p65">
Transcendent Design with CSS & JavaScript
“Masteringpositioningwithitsenormouspotentialforlayoutflexibilityandrobust
behaviorwillbeoneofthemostrewardingchallengesyoucantakeonwhenlearningCSS.”
CSSpositioning
Transcendent Design with CSS & JavaScript
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');
Transcendent Design with CSS & JavaScript
“Styleanelementeitherbasedonwhetheranelementhasan
attributenamesuchashreforbasedontheattributevalue.”
Attributeselectors
Transcendent Design with CSS & JavaScript
vara=document.getElementById('content').getElementsByTagName('a')[0]varhref=a.getAttribute('href');
orsetthem
a.setAttribute('title','IaddedthiswiththeDOM');
AccessingattributesYoucangetattributevalues
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
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
CSS3Multi‐columnModule
Transcendent Design with CSS & JavaScript
CSS3Multi‐columnModule
column‐countcolumn‐widthcolumn‐gapcolumn‐rule
‐moz‐column‐count‐moz‐column‐width‐moz‐column‐gap‐moz‐column‐rule
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;}
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
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
CSS3Multi‐columnModuledemo
Transcendent Design with CSS & JavaScript
Zebrastriping
Transcendent Design with CSS & JavaScript
<tbody>
<tr>
<td>bicarbonateofsoda</td>
</tr>
<tr>
<td>creamoftartar</td>
</tr>
</tbody>
Zebrastriping
Transcendent Design with CSS & JavaScript
<tbody>
<trclass="odd">
<td>bicarbonateofsoda</td>
</tr>
<trclass="even">
<td>creamoftartar</td>
</tr>
</tbody>
Zebrastriping
Transcendent Design with CSS & JavaScript
tr:nth‐child(odd){
background‐color:#fff;}
tr:nth‐child(even){
background‐color:#ebebeb;}
Zebrastriping
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
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
CSS3AdvancedLayoutModule
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
CSS3AdvancedLayoutModule
Slotletter identifiestheslotwithinthegridforanycontentthatwillbepositionedwithinit
@(atsymbol) Adefaultslotintowhichcontentthathasnotbeensituatedcanflow.
.(period) Awhite‐spaceslotthatcanhavenocontentinsertedintoit.
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;}
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
<divid="waffles"><divid="biscotti"> <divid="muffins">
<divid="bread"><divid="jelly"> <divid="icecream">
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;
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
1 2 3 4
1 1 2
1 2 3
1 2 3
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
CSS3AdvancedLayoutModuledemo
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)
Transcendent Design with CSS & JavaScript
Workingwithlibraries
SomegiveJSthefeelofanotherlanguage
Prototype,Scriptaculous&Lowpro‐RubyMochikit–PythonYUI–Java
Transcendent Design with CSS & JavaScript
Workingwithlibraries
Whydoweusethem?Theymakeourliveseasier.
Thekeythereiseasier.
Whichoneisbest?
HowdoIgetstarted?
Transcendent Design with CSS & JavaScript
DeanEdwards’IE7ScriptsallowyoutouseCSS2andevensomeCSS3selectorsinyourstylesheetsandtransformslegacyversionsofInternetExplorerintoashiny
newbrowser.
““
DeanEdwards’IE7Scripts
Transcendent Design with CSS & JavaScript
ChildselectorsAdjacentsiblingselectorsAttributevalueselectors:first‐child:last‐child:only‐child
DeanEdwards’IE7Scripts
:nth‐childpseudo‐classes:before:after:hover,:active,:focusallelementsPNGalpha‐transparency
Transcendent Design with CSS & JavaScript
DeanEdwards’IE7Scripts
<!‐‐[iflteIE6]><scriptsrc="ie7‐standard‐p.js"type="text/javascript"></script><![endif]‐‐>
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
Transcendent Design with CSS & JavaScript
Onemorething
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