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.

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.
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?
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?
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?
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?
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: