Check out a free preview of the full CSS In-Depth, v2 course:
The "Pointer Events & Content Editable" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

"Pointer-events: none" allows click through an element. Estelle uses contenteditable in all her slides to make the slides interactive. In fact, attendees have been updating CSS directly in the examples because the <style> blocks have been set to visible with contenteditable.

Get Unlimited Access Now

Transcript from the "Pointer Events & Content Editable" Lesson

>> Estelle Weyl: Remember when I was talking about imput masking and when you saw the snowflakes falling or when we were talking about transforms and there was the RSVP and it was on the top of the tags and I was still going right through it and was still working on stuff that was behind it?

[00:00:13] And you were wondering, how can she see anything behind there? And I couldn't because it was solid in front. But I used pointer-events: none, and that basically said, on this element when you click, it has no effect and it goes right through. So pointer-events has a lot of different values for SVG, but for HTML elements, it's really just none or the default.

[00:00:39] And that's how I pointed to stuff. That's how I was able to click through things to the stuff behind it. Another thing I used a lot in this deck, which I didn't use on that one of, when I said I couldn't go backwards, I forgot to put it on that element.

[00:00:55] Anything that I put the content editable attribute on, which is an HTML attribute. So it's HTML, it's been around since HTML5. I could put it on everything. Every time I could go like this, and it turned blue, and I could remove things, that meant it had contentEditable. I put contentEditable on an element and it made it editable.

[00:01:15] So this is HTML, there's contentEditable on just that. The slide itself is not interactive. But that text allows me to change it. contentEditable makes it editable. The thing is, when I copy and paste stuff, what happens? You can get really weird characters, so I did read-write-plaintext-only. And that made it so when we took the characters that, just the text.

[00:01:45] So when I was pasting, I didn't get the font weight bold and everything else. And so I use that a lot on almost everything. Basically allowing it to be content editable and allowing me to copy and paste text. This not standard. moz, user_modify also works, but as far as I know it's not even gonna be in the spec but I'm not sure.

[00:02:10] Here are some links. If you wanna look up some of the things, I'm gonna gonna put actually more links, I'm gonna put a link for every single topic we discussed. I didn't get finished with this one slide.