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. 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.
  2. 3.
  3. 6.

    #myDiv { width: } 100px; you could change the declaration

    **in** the stylesheet? and if instead of an id selector, it was a class selector,
  4. 7.

    #myDiv { width: } 500px; you could change the declaration

    **in** the stylesheet? and if instead of an id selector, it was a class selector,
  5. 10.
  6. 13.

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

    could change the existing rules directly?
  7. 14.

    #myDiv { width: font-size: margin: } 500px; 4em; 0 auto;

    } you could change the existing rules directly?
  8. 15.
  9. 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,
  10. 20.
  11. 24.
  12. 28.
  13. 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:
  14. 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:
  15. 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.
  16. 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.
  17. 35.
  18. 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.
  19. 37.

    Here is an example of what it looks like if

    you inspect this in the Chrome console.
  20. 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:
  21. 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
  22. 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
  23. 41.

    So what about this attribute, title? A little bit more

    reading and you learn about this:
  24. 42.

    title! So what about this attribute, title? A little bit

    more reading and you learn about this:
  25. 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.
  26. 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.
  27. 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:
  28. 47.
  29. 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.
  30. 49.

    which is what I did to switch between these two

    version of the same document.
  31. 50.

    which is what I did to switch between these two

    version of the same document.
  32. 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: