Tiger By The Tail

Buck Owens

I cut records for AM radio, and I was always conscious that AM used to have a great big old bottom on it. So I took most of the bass out of the records and put on more high-end — that made 'em sound cleaner than the others.

The right tool for the job

HTML

Structure

CSS

Presentation

DOM Scripting

Behaviour

Equivalence

CSS

Selectors

DOM

Methods

ID Selector

CSS

#ID { }

DOM

document.getElementById("ID")

ID Selector example

CSS

#footer { }

DOM

document.getElementById("footer")

Element Selector

CSS

tagName { }

DOM

document.getElementsByTagName("tagName")

Element Selector example

CSS

p { }

DOM

document.getElementsByTagName("p")

Combining selectors

CSS

#nav a { }

DOM

document.getElementById("nav").getElementsByTagName("a")

Universal Selector

CSS

* { }

DOM

document.getElementsByTagName("*")

Class Selector

CSS

.className { }

DOM

document.getElementsByClassName("className")

getElementsByClassName

document.getElementsByClassName = function(name) {
  var results = new Array();
  var elems = document.getElementsByTagName("*");
  for (var i=0; i<elems.length; i++) {
    if (elems[i].className.indexOf(name) != -1) {
      results[results.length] = elems[i];
    }
  }
  return results;
};

The DOM arsenal

• getElementById
• getElementsByTagName
• getElementsByClassName

Let's go...

nth child() pseudo-class

CSS 3

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n)   /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

Example

tr:nth-child(odd) {
  background-color: #9cf;
}

Example

Stripey tables

• Before
• After

The plan

• Get all the tables in the document
• Loop through each one
• Get all the table rows in this table
• Loop through every second row
• Set the style on that row

The plan broken down

• Get all the tables in the document getElementsByTagName
• Loop through each one
• Get all the table rows in this table getElementsByTagName
• Loop through every second row
• Set the style on that row

The plan in action

function stripeTables() {
  var tables = document.getElementsByTagName("table");
  for (var i=0; i<tables.length; i++) {
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j=j+2) {
      rows[j].backgroundColor = "#9cf";
    }
  }
}

The plan revised

• Get all the tables in the document
• Loop through each one
• Get all the table rows in this table
• Loop through every second row
• Set the class on that row

Adding a class

function addClass(element,name) {
  if (!element.className) {
    element.className = name;
  } else {
    element.className+= " ";
    element.className+= name;
  }
}

The revised plan in action

function stripeTables() {
  var tables = document.getElementsByTagName("table");
  for (var i=0; i<tables.length; i++) {
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j=j+2) {
      addClass(rows[j],"odd");
    }
  }
}

The CSS

tbody tr.odd th {
  background-color: #69c;
}
tbody tr.odd td {
  background-color: #9cf;
}

Result

Variation

Striping lists

• Before
• After

The plan

• Get all the ordered lists in the document
• Loop through each one
• Does it have a class of "striped"?
• Get all the items in this list
• Loop through every second item
• Set the class on that item

The plan in action

function stripeLists() {
  var lists = document.getElementsByTagName("ol");
  for (var i=0; i<lists.length; i++) {
    if (lists[i].className.match("striped")) {
      var items = lists[i].getElementsByTagName("li");
      for (var j=0; j<items.length; j=j+2) {
        addClass(items[j],"odd");
      }
    }
  }
}

The result

• HTML
• JavaScript
• CSS

Next...

Multiple background images

CSS 3

.rounded {
  background-image: url("images/northwest.gif"),
                    url("images/northeast.gif"),
                    url("images/southeast.gif"),
                    url("images/southwest.gif");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom right, bottom left;
}

Rounded corners

The Kobayashi Maru scenario

• Use CSS that isn't supported?
• Add superfluous divs in the markup?
• Use JavaScript to generate superfluous divs?

Rounded corners in action

• Before
• After

Creating markup

function insertCorners(element) {
  var corners = new Array("northwest","northeast","southeast","southwest");
  for (var i=0; i<corners.length; i++) {
    var div = document.createElement("div");
    div.className = corners[i];
    element.appendChild(div);
  }
}

Choosing elements

function roundCorners() {
  var elements = document.getElementsByClassName("rounded");
  for (var i=0; i<elements.length; i++) {
     insertCorners(elements[i]);
  }
}

The result

• HTML
• JavaScript
• CSS

Next...

Generated content

CSS 2

blockquote:after {
  content: "source: "attr(cite);
}

• Before
• After

The plan

• Get all the blockquotes in the document
• Loop through each one
• Get the cite attribute
• If there is a cite attribute:
• Create a string of text
• Insert the text after the blockquote

The plan broken down

• Get all the blockquotes in the document getElementsByTagName
• Loop through each one
• Get the cite attribute getAttribute
• If there is a cite attribute:
• Create a string of text createTextNode
• Insert the text after the blockquote appendChild

The plan in action

function blockquotes() {
  var quotes = document.getElementsByTagName("blockquote");
  for (var i=0; i<quotes.length; i++) {
    var source = quotes[i].getAttribute("cite");
    if (source) {
      var text = document.createTextNode("source: "+source);
      quotes[i].appendChild(text);
    }
  }
}

The result

• Result
• Expanded version
  • JavaScript
  • CSS

Next...

max-width

CSS2

body {
  max-width: 1600px;
}

The plan

• Get the current width of the browser
• If it's greater than 1600 pixels:
• Set a width:1600px style on the body

min-width

CSS2

body {
  min-width: 800px;
}

The plan

• Get the current width of the browser
• If it's less than 800 pixels:
• Set a width:800px style on the body

Resolution Dependent Layout

It's the BOM, not the DOM.

The Man In Blue

Example

• Rammstein

Next...

Anything you can possibly imagine

IE7 by Dean Edwards

What CSS can't do

The arrow of time

• setTimeout
• setInterval

Updating styles over time

Examples

• Animation (top, left, etc.)
• Fades (background-color)
• Much, much more...

Thank you

Questions?