I've been doing a number of technical talks lately that involve a lot of code. It's often hard to get across a coding concept when you're only showing text on the screen. As of recently, I've come up with a good way to show my CSS example snippets update live, without the need for JavaScript. Here's what that looks like:

<style> a.link, a.link:visited, a.link:hover, a.link:active { font-size: 32px; text-align: center; display: block; padding: 20px; color: #333; font-weight: normal; } .editable-style { display: block; font-size: 18px; color: #333; padding: 20px; border: 1px solid #ccc; font-family: 'Courier New', Courier, sans-serif; } .editable-style:focus { outline: none; border: 1px solid #333; } </style> <style class="editable-style" contenteditable> a.link { background: green; } </style> Google

You can actual click on and edit the above code to see the element's style update live. This is using two specific techniques. One, I've added contenteditable to my <style> element that contains the CSS. Second, I've made that same <style> tag visible by setting it's style to display:block;.

Feel free to use this little trick in your next set of slides, or let me know if you use other nifty tricks in your HTML, CSS & JS slide decks.

This little trick is really handy, and you can even take it one step further. For some of my talks I've added the scoped property to the <style> element. This can ensure your selectors stay nice and clean. Unfortunately scoped is only available as an experimental API in Chrome right now, and you have to turn support on for it via chrome://flags