Download
1 / 108
1.09k likes | 2.47k Views
The presentation Andy Clarke and I did at Web Direction North. <br><br>Traditionally, CSS has been the domain of designers while JavaScript was for programmers, but these <br>technologies can and should work together to improve your visitors’ experiences. After all, you can do amazing things with CSS, but when you start to use CSS in concert with DOM Scripting, there’s almost no limit to what you can achieve. <br><br>MOD-ern web designer Andy Clarke and DOM/Ajax developer Aaron Gustafson will take your CSS skills and supercharge them with JavaScript magic, exploring how you can make CSS and JavaScript work together to make beautiful (and functional) results.
E N D
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 Transcendent Design with CSS & JavaScript
CSS + DOM = Magic Transcendent Design with CSS & JavaScript
“ Art is design without compromise “ Jeffrey Veen Transcendent Design with CSS & JavaScript
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 Transcendent Design with CSS & JavaScript
“ 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 Transcendent Design with CSS & JavaScript
Meaningful markup Semantics means “meaning” Markup as meaningful to content The content‐out approach Aids accessibility & SEO Valid is not always meaningful Transcendent Design with CSS & JavaScript
DOM visualision <html> <body> <div> <ul> <dl> <p> <h1> <dt> <dd> <li> <q> <img> <p> <em> <h4> <p> Transcendent Design with CSS & JavaScript
DOM visualision <html> <body> <div#branding> <div#content> <div#siteinfo> <h4> <h5#tagline> <div#content_main> <p> <ul> <p> <img> <h4> <p> <p> <li> Transcendent Design with CSS & JavaScript
DOM visualision <p>This is a paragraph that contains an <a href= "#" title="">anchor</a>.</p> <p> This is a paragraph that contains an <a> .(period) href title anchor Transcendent Design with CSS & JavaScript
“ 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. “ Transcendent Design with CSS & JavaScript
<ul> </li> <li> Green </li> <li> Purple </li> <li> Red </li> <li> Blue </li> <li> Black </ul> Transcendent Design with CSS & JavaScript
<ol> </a> </li> <li> <a> 2784 </a> </li> <li> <a> 3243 </a> </li> <li> <a> 1992 </a> </li> <li> <a> 2011 </a> </li> <li> <a> 2205 </ol> Transcendent Design with CSS & JavaScript
<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> Transcendent Design with CSS & JavaScript
