SlideShare a Scribd company logo
1 of 108
Download to read offline
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
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'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
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
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

                                                    <a>     .(period)
                             that
contains
an






                                             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
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
<ul>

                                                     </li>
                                    <li>    Green

                                                     </li>
                                    <li>    Purple

                                                     </li>
                                    <li>     Red

                                                     </li>
                                    <li>    Blue

                                                     </li>
                                    <li>    Black

                </ul>



Transcendent Design with CSS & JavaScript
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
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
Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
<h1>                                             <li
id="p89">

        <p>

       <h2>


       <ul>

       <li>

       <h3>             <a>           <img>

        <p>                                   <li
id="p65">

Transcendent Design with CSS & JavaScript
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.”




Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
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');




Transcendent Design with CSS & JavaScript
Attribute
selectors
                              “Style
an
element
either
based
on

                                 whether
an
element
has
an

                               attribute
name
such
as
href
or

                                based
on
the
attribute
value.”




Transcendent Design with CSS & JavaScript
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'
);




Transcendent Design with CSS & JavaScript
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
);




Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
CSS3
Multi‐column
Module




Transcendent Design with CSS & JavaScript
CSS3
Multi‐column
Module
              column‐count
              column‐width
              column‐gap
              column‐rule

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


Transcendent Design with CSS & JavaScript
CSS3
Multi‐column
Module
              #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;
}



Transcendent Design with CSS & JavaScript
CSS3
Multi‐column
Module
                “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




Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
CSS3
Multi‐column

                                      Module
demo



Transcendent Design with CSS & JavaScript
Zebra
striping




Transcendent Design with CSS & JavaScript
Zebra
striping
             <tbody>
             <tr>
             <td>bicarbonate
of
soda</td>
             </tr>
             <tr>
             <td>cream
of
tartar</td>
             </tr>
             </tbody>


Transcendent Design with CSS & JavaScript
Zebra
striping
             <tbody>
             <tr
class="odd">
             <td>bicarbonate
of
soda</td>
             </tr>
             <tr
class="even">
             <td>cream
of
tartar</td>
             </tr>
             </tbody>


Transcendent Design with CSS & JavaScript
Zebra
striping
            tr:nth‐child(odd)
{

            background‐color
:
#fff;
}


            tr:nth‐child(even)
{

            background‐color
:
#ebebeb;
}




Transcendent Design with CSS & JavaScript
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;
}




Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
CSS3
Advanced
Layout
Module




Transcendent Design with CSS & JavaScript
Transcendent Design with CSS & JavaScript
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.



Transcendent Design with CSS & JavaScript
CSS3
Advanced
Layout
Module
              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
<div
id="biscotti">          <div
id="waffles">   <div
id="muffins">




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




Transcendent Design with CSS & JavaScript
<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;




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
CSS3
Advanced
Layout

                                 Module
demo



Transcendent Design with CSS & JavaScript
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)




Transcendent Design with CSS & JavaScript
Working
with
libraries
           Some
give
JS
the
feel
of
another
language

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




Transcendent Design with CSS & JavaScript
Working
with
libraries
           Why
do
we
use
them?
They
make
our
lives
easier.

           The
key
there
is
easier.

           Which
one
is
best?

           How
do
I
get
started?



Transcendent Design with CSS & JavaScript
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.


                                            “
Transcendent Design with CSS & JavaScript
Dean
Edwards’
IE7
Scripts
            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





Transcendent Design with CSS & JavaScript
Dean
Edwards’
IE7
Scripts
            <!‐‐[if
lte
IE
6]>
            <script
src="ie7‐standard‐p.js"

            type="text/javascript">
            </script>
            <![endif]‐‐>





Transcendent Design with CSS & JavaScript
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
One
more
thing




Transcendent Design with CSS & JavaScript
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
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)

More Related Content

What's hot

Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Senthil Kumar
 

What's hot (20)

Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
CSS
CSSCSS
CSS
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
CSS and Layout
CSS and LayoutCSS and Layout
CSS and Layout
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
Css 3
Css 3Css 3
Css 3
 
Css 3
Css 3Css 3
Css 3
 
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersHTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSS
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Design and CSS
Design and CSSDesign and CSS
Design and CSS
 
Yuicss R7
Yuicss R7Yuicss R7
Yuicss R7
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
SASS Lecture
SASS Lecture SASS Lecture
SASS Lecture
 

Viewers also liked (7)

HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
Html
HtmlHtml
Html
 
HTML - Primi Passi
HTML - Primi PassiHTML - Primi Passi
HTML - Primi Passi
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 

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

Div Tag Tutorial
Div Tag TutorialDiv Tag Tutorial
Div Tag Tutorial
bav123
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Even Wu
 
Visualizing The Code
Visualizing The CodeVisualizing The Code
Visualizing The Code
sdireland
 
High Performance Front-End Development
High Performance Front-End DevelopmentHigh Performance Front-End Development
High Performance Front-End Development
drywallbmb
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
Christopher Schmitt
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
tsengsite
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
Arush Sehgal
 
Shaping Up With CSS
Shaping Up With CSSShaping Up With CSS
Shaping Up With CSS
sdireland
 

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

Div Tag Tutorial
Div Tag TutorialDiv Tag Tutorial
Div Tag Tutorial
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Visualizing The Code
Visualizing The CodeVisualizing The Code
Visualizing The Code
 
Web
WebWeb
Web
 
Training Html5 -CSS3 New things
Training Html5 -CSS3 New thingsTraining Html5 -CSS3 New things
Training Html5 -CSS3 New things
 
High Performance Front-End Development
High Performance Front-End DevelopmentHigh Performance Front-End Development
High Performance Front-End Development
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
RSS: the duct tape of web2.0
RSS: the duct tape of web2.0RSS: the duct tape of web2.0
RSS: the duct tape of web2.0
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
 
Juggling
JugglingJuggling
Juggling
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo Workshop
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
 
Shaping Up With CSS
Shaping Up With CSSShaping Up With CSS
Shaping Up With CSS
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSS
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
 

More from Aaron Gustafson

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

Recently uploaded (20)

AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 

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

  • 1. 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
  • 2. CSS + DOM = Magic Photo
by
Patrick
Lauke Photo
by
Cindy
Li Clarke Gustafson Transcendent Design with CSS & JavaScript
  • 3. CSS + DOM = Magic Transcendent Design with CSS & JavaScript
  • 4. Art
is
design
 without
 compromise “ Jeffrey
Veen Transcendent Design with CSS & JavaScript
  • 5. 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
  • 6. Transcendent Design with CSS & JavaScript
  • 7. Transcendent Design with CSS & JavaScript
  • 8. Transcendent Design with CSS & JavaScript
  • 9. Transcendent Design with CSS & JavaScript
  • 10. Transcendent Design with CSS & JavaScript
  • 11. Transcendent Design with CSS & JavaScript
  • 12. Transcendent Design with CSS & JavaScript
  • 13. Transcendent Design with CSS & JavaScript
  • 14. 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
  • 15. Transcendent Design with CSS & JavaScript
  • 16. Transcendent Design with CSS & JavaScript
  • 17. Transcendent Design with CSS & JavaScript
  • 18. Transcendent Design with CSS & JavaScript
  • 19. Transcendent Design with CSS & JavaScript
  • 20. Transcendent Design with CSS & JavaScript
  • 21. Transcendent Design with CSS & JavaScript
  • 22. Transcendent Design with CSS & JavaScript
  • 23. Transcendent Design with CSS & JavaScript
  • 24. Transcendent Design with CSS & JavaScript
  • 25. Transcendent Design with CSS & JavaScript
  • 26. Transcendent Design with CSS & JavaScript
  • 27. Transcendent Design with CSS & JavaScript
  • 28. Transcendent Design with CSS & JavaScript
  • 29. Transcendent Design with CSS & JavaScript
  • 30. Transcendent Design with CSS & JavaScript
  • 31. Transcendent Design with CSS & JavaScript
  • 32. Transcendent Design with CSS & JavaScript
  • 33. 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
  • 34. DOM
visualision <html> <body> <div> <ul> <dl> <p> <h1> <dt> <dd> <li> <q> <img> <p> <em> <h4> <p> Transcendent Design with CSS & JavaScript
  • 35. 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
  • 36. 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 Transcendent Design with CSS & JavaScript
  • 37. 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
  • 38. Transcendent Design with CSS & JavaScript
  • 39. Transcendent Design with CSS & JavaScript
  • 40. Transcendent Design with CSS & JavaScript
  • 41. Transcendent Design with CSS & JavaScript
  • 42. Transcendent Design with CSS & JavaScript
  • 43. Transcendent Design with CSS & JavaScript
  • 44. <ul> </li> <li> Green </li> <li> Purple </li> <li> Red </li> <li> Blue </li> <li> Black </ul> Transcendent Design with CSS & JavaScript
  • 45. Transcendent Design with CSS & JavaScript
  • 46. <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
  • 47. Transcendent Design with CSS & JavaScript
  • 48. <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
  • 49. Transcendent Design with CSS & JavaScript
  • 50. Transcendent Design with CSS & JavaScript
  • 51. <h1> <li
id="p89"> <p> <h2> <ul> <li> <h3> <a> <img> <p> <li
id="p65"> Transcendent Design with CSS & JavaScript
  • 52. 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.” Transcendent Design with CSS & JavaScript
  • 53. Transcendent Design with CSS & JavaScript
  • 54. 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'); Transcendent Design with CSS & JavaScript
  • 55. Attribute
selectors “Style
an
element
either
based
on
 whether
an
element
has
an
 attribute
name
such
as
href
or
 based
on
the
attribute
value.” Transcendent Design with CSS & JavaScript
  • 56. 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'
); Transcendent Design with CSS & JavaScript
  • 57. 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
); Transcendent Design with CSS & JavaScript
  • 58. Transcendent Design with CSS & JavaScript
  • 60. CSS3
Multi‐column
Module column‐count column‐width column‐gap column‐rule ‐moz‐column‐count ‐moz‐column‐width ‐moz‐column‐gap ‐moz‐column‐rule Transcendent Design with CSS & JavaScript
  • 61. CSS3
Multi‐column
Module #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;
} Transcendent Design with CSS & JavaScript
  • 62. CSS3
Multi‐column
Module “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 Transcendent Design with CSS & JavaScript
  • 63. Transcendent Design with CSS & JavaScript
  • 64. CSS3
Multi‐column
 Module
demo Transcendent Design with CSS & JavaScript
  • 66. Zebra
striping <tbody> <tr> <td>bicarbonate
of
soda</td> </tr> <tr> <td>cream
of
tartar</td> </tr> </tbody> Transcendent Design with CSS & JavaScript
  • 67. Zebra
striping <tbody> <tr
class="odd"> <td>bicarbonate
of
soda</td> </tr> <tr
class="even"> <td>cream
of
tartar</td> </tr> </tbody> Transcendent Design with CSS & JavaScript
  • 68. Zebra
striping tr:nth‐child(odd)
{
 background‐color
:
#fff;
} tr:nth‐child(even)
{
 background‐color
:
#ebebeb;
} Transcendent Design with CSS & JavaScript
  • 69. 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;
} Transcendent Design with CSS & JavaScript
  • 70. Transcendent Design with CSS & JavaScript
  • 72. Transcendent Design with CSS & JavaScript
  • 73. 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. Transcendent Design with CSS & JavaScript
  • 74. CSS3
Advanced
Layout
Module 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
  • 75. Transcendent Design with CSS & JavaScript
  • 76. <div
id="biscotti"> <div
id="waffles"> <div
id="muffins"> <div
id="jelly"> <div
id="bread"> <div
id="icecream"> Transcendent Design with CSS & JavaScript
  • 77. <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; Transcendent Design with CSS & JavaScript
  • 78. Transcendent Design with CSS & JavaScript
  • 79. 1 2 3 4 1 1 2 1 2 3 1 2 3 Transcendent Design with CSS & JavaScript
  • 80. Transcendent Design with CSS & JavaScript
  • 81. CSS3
Advanced
Layout
 Module
demo Transcendent Design with CSS & JavaScript
  • 82. 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) Transcendent Design with CSS & JavaScript
  • 83. Working
with
libraries Some
give
JS
the
feel
of
another
language Prototype,
Scriptaculous
&
Lowpro
‐
Ruby Mochikit
–
Python YUI
–
Java Transcendent Design with CSS & JavaScript
  • 84. Working
with
libraries Why
do
we
use
them?
They
make
our
lives
easier. The
key
there
is
easier. Which
one
is
best? How
do
I
get
started? Transcendent Design with CSS & JavaScript
  • 85. 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.
 “ Transcendent Design with CSS & JavaScript
  • 86. Dean
Edwards’
IE7
Scripts 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
 Transcendent Design with CSS & JavaScript
  • 87. Dean
Edwards’
IE7
Scripts <!‐‐[if
lte
IE
6]> <script
src="ie7‐standard‐p.js"
 type="text/javascript"> </script> <![endif]‐‐>
 Transcendent Design with CSS & JavaScript
  • 88. 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
  • 90. 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