Tweet
Tweet

Slide 1

Slide 1 text

DOM? What about the CSSOM?

Slide 2

Slide 2 text

@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.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

What if …

Slide 5

Slide 5 text

myDiv.style.width = '500px' instead of changing a style property on an element,

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

What if …

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

#myDiv { width: font-size: margin: } 100px; 1em; 0; you could change the existing rules directly?

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

What if …

Slide 17

Slide 17 text

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,

Slide 18

Slide 18 text

body { font-size: 20px; } you could just remove them?

Slide 19

Slide 19 text

you could just remove them?

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

What if …

Slide 22

Slide 22 text

document. body.className = 'dark-theme' instead of using class names to define a changeable theme,

Slide 23

Slide 23 text

document. enableStyleSheetsForSet('dark-theme') you could enable and disable whole sets of stylesheets?

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

What if …

Slide 26

Slide 26 text

you could offer a print preview with a toggle button?

Slide 27

Slide 27 text

you could offer a print preview with a toggle button?

Slide 28

Slide 28 text

You can do all this and m!e You can do all this – and more

Slide 29

Slide 29 text

CSSOM using the methods in the CSSOM!

Slide 30

Slide 30 text

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:

Slide 31

Slide 31 text

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:

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

window.getComputedStyle You might know the getComputedStyle method, which is an extension of the Window Interface.

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

StyleSheetList Interface But here is one you might not have seen: The StyleSheetList Interface,

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

Here is an example of what it looks like if you inspect this in the Chrome console.

Slide 38

Slide 38 text

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:

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

document. enableStyleSheetsForSet('dark-theme') and it accepts the title of a stylesheet, and ables it and disabled others! Hurray!

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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:

Slide 47

Slide 47 text

sheet.media. appendMedium('screen') appendMedium, which allows you to force the sheet to be applied if the medium is screen, for example.

Slide 48

Slide 48 text

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.

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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: