Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What about the CSSOM?

What about the CSSOM?

Have you read the CSSOM spec? There is some crazy stuff in there!

Watch the recording here: http://youtu.be/HrRBOQn5VcM

NOTE: The preview version of the slides is wonky and I can’t fix them due to a Speaker Deck bug. Download the PDF for readable slides INCLUDING SPEAKER NOTES.

7b1746f5ae99453e6a67f022ec0d73bd?s=128

Tiffany Conroy

September 10, 2013
Tweet

Transcript

  1. DOM? What about the CSSOM?

  2. @theophani TIFFANY CONROY All content licensed under http://creativecommons.org/licenses/by-nc-sa/3.0/ My name

    is Tiffany, and I work as an interaction designer and front-end developer at SoundCloud.
  3. None
  4. What if …

  5. myDiv.style.width = '500px' instead of changing a style property on

    an element,
  6. #myDiv { width: } 100px; you could change the declaration

    **in** the stylesheet? and if instead of an id selector, it was a class selector,
  7. #myDiv { width: } 500px; you could change the declaration

    **in** the stylesheet? and if instead of an id selector, it was a class selector,
  8. .box { width: } 100px; … your change would effect

    multiple elements at once?
  9. .box { width: } 500px; … your change would effect

    multiple elements at once?
  10. None
  11. What if …

  12. myDiv.className = 'enlarged' instead of adding and removing classnames on

    elements,
  13. #myDiv { width: font-size: margin: } 100px; 1em; 0; you

    could change the existing rules directly?
  14. #myDiv { width: font-size: margin: } 500px; 4em; 0 auto;

    } you could change the existing rules directly?
  15. None
  16. What if …

  17. var d = document; var s =d.createElement('style'); s.innerHTML = 'body

    { font-size: inherit }'; document.head.appendChild(s); instead of trying to override styles, by adding a new style element to a document,
  18. body { font-size: 20px; } you could just remove them?

  19. you could just remove them?

  20. None
  21. What if …

  22. document. body.className = 'dark-theme' instead of using class names to

    define a changeable theme,
  23. document. enableStyleSheetsForSet('dark-theme') you could enable and disable whole sets of

    stylesheets?
  24. None
  25. What if …

  26. you could offer a print preview with a toggle button?

  27. you could offer a print preview with a toggle button?

  28. You can do all this and m!e You can do

    all this – and more
  29. CSSOM using the methods in the CSSOM!

  30. Disclaimer Some of the techniques I will show are kind

    of a bad idea, maybe but this talk is about playing around and understanding what choices you have, so let’s have some fun :) Disclaimer Some of the techniques I will show are kind of a bad idea, maybe but this talk is about playing around and understanding what choices you have, so let’s have some fun :) BUT FIRST, a quick aside:
  31. What is the CSSOM? What is the CSSOM? CSSOM is

    the name for a whole collection of methods and properties, i.e. programming interfaces, that you can already use in most browsers, plus a few extra ideas that are not fully implemented everywhere. A few of things in the so-called CSSOM that have around for a while, and you already know very well:
  32. element.style such as the StyleDeclaration Interface, which you can access

    on every HTML element via the style attribute. With this interface you can see what style properties have been set on the element level, or you can set them on the element level.
  33. window.getComputedStyle You might know the getComputedStyle method, which is an

    extension of the Window Interface.
  34. getComputedStyle(element) You use it by passing in an element, and

    you get back the computed style, which includes not only the style properties defined on the element, but all the inherited styles.
  35. StyleSheetList Interface But here is one you might not have

    seen: The StyleSheetList Interface,
  36. document.styleSheets which is defined as an extension of the Document

    Interface as the attribute “styleSheets”. This attribute gives back a LIST of all the style sheets on the document, whether they were links or style elements.
  37. Here is an example of what it looks like if

    you inspect this in the Chrome console.
  38. var sheet = document.styleSheets[0] A single one of these these

    items implements the so-called CSSStyleSheet Interface. So what does that mean? Let’s take a peek into what the CSSOM spec says:
  39. Let’s walk through this. … disabled? Whoa! When I saw

    that, I thought: if you can disable and enable stylesheets, than you could toggle between themes. So if could somehow tell two stylesheets apart, then you could set some to enabled and others to disabled
  40. WHOA! Let’s walk through this. … disabled? Whoa! When I

    saw that, I thought: if you can disable and enable stylesheets, than you could toggle between themes. So if could somehow tell two stylesheets apart, then you could set some to enabled and others to disabled
  41. So what about this attribute, title? A little bit more

    reading and you learn about this:
  42. title! So what about this attribute, title? A little bit

    more reading and you learn about this:
  43. document. enableStyleSheetsForSet('dark-theme') and it accepts the title of a stylesheet,

    and ables it and disabled others! Hurray!
  44. document. enableStyleSheetsForSet('dark-theme') WARNING BUT: a warning. The simple act of

    adding titles to your style elements will cause very odd behaviour, partly because support for titles is not correctly nor fully implemented everywhere and partly because the way the so-called selectedStyleSheet gets set is a complete mindfuck. We can talk about it after if you like.
  45. sheet.disabled = true Note that you can avoid titles and

    just set enabled and disabled directly, but then you have to figure out which stylesheet is which using load order and stupid tricks like that.
  46. sheet.media One of the other attributes on a stylesheet is

    a list all of the media is applies to: So, things like “screen”, “print”, or “all”. This list of media has methods too, such as:
  47. sheet.media. appendMedium('screen') appendMedium, which allows you to force the sheet

    to be applied if the medium is screen, for example.
  48. sheet.media. deleteMedium('screen') and deleteMedium, which allows you to remove a

    medium. Using the media list attributes and these methods, you could build a toggle for previewing print styles.
  49. which is what I did to switch between these two

    version of the same document.
  50. which is what I did to switch between these two

    version of the same document.
  51. So back to the StyleSheet Interface definition. A StyleSheet is

    a general concept, but we usually deal with the more specific CSSStyleSheet Interface. Here is the definition for that: