1. Using DOM Scripting to Plug the Holes in CSS

    clear:left

  2. Tiger By The Tail

    Buck Owens and the Buckaroos
  3. 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.

  4. The right tool for the job

    HTML
    Structure
    CSS
    Presentation
    DOM Scripting
    Behaviour
  5. Equivalence

    CSS

    Selectors

    DOM

    Methods

  6. ID Selector

    CSS

    #ID { }

    DOM

    document.getElementById("ID")

  7. ID Selector example

    CSS

    #footer { }

    DOM

    document.getElementById("footer")

  8. Element Selector

    CSS

    tagName { }

    DOM

    document.getElementsByTagName("tagName")

  9. Element Selector example

    CSS

    p { }

    DOM

    document.getElementsByTagName("p")

  10. Combining selectors

    CSS

    #nav a { }

    DOM

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

  11. Universal Selector

    CSS

    * { }

    DOM

    document.getElementsByTagName("*")

  12. Class Selector

    CSS

    .className { }

    DOM

    document.getElementsByClassName("className")

  13. 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;
    };
    
  14. The DOM arsenal

    Let's go...

  15. 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;
    }
    
  16. Example

    Stripey tables

  17. The plan

  18. The plan broken down

  19. 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";
        }
      }
    }
    
  20. The plan revised

  21. Adding a class

    
    function addClass(element,name) {
      if (!element.className) {
        element.className = name;
      } else {
        element.className+= " ";
        element.className+= name;
      }
    }
    
  22. 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");
        }
      }
    }
    
  23. The CSS

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

    Result

  24. Variation

    Striping lists

  25. The plan

  26. 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");
          }
        }
      }
    }
    
  27. The result

  28. Next...

  29. 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;
    }
    
  30. Rounded corners

    The Kobayashi Maru scenario

  31. Rounded corners in action

  32. 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);
      }
    }
    
  33. Choosing elements

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

  35. Next...

  36. Generated content

    CSS 2

    
    blockquote:after {
      content: "source: "attr(cite);
    }
    
  37. The plan

  38. The plan broken down

  39. 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);
        }
      }
    }
    
  40. The result

  41. Next...

  42. max-width

    CSS2

    
    body {
      max-width: 1600px;
    }
    
  43. The plan

  44. min-width

    CSS2

    
    body {
      min-width: 800px;
    }
    
  45. The plan

  46. Resolution Dependent Layout

    It's the BOM, not the DOM.

    The Man In Blue

    Example

  47. Next...

  48. Anything you can possibly imagine

    IE7 by Dean Edwards

  49. What CSS can't do

    The arrow of time

  50. Updating styles over time

    Examples

  51. Thank you

    Questions?