JS-in-CSS

HTML for this deck


 <article id="optionalID">
  <header>
    <h1>Slide Title</h1>
  </header>
  <figure>
    <object data="pages/somepage.html"></object>
  </figure>
 </article>

CSS carousel features

CSS is Awesome

Reload page when done.

The actual <style>

Reload page when done.

Left and right buttons

Reload page when done.

...more... Carousel markers

Reload page when done.

This was always doable (9 years ago)

Still a work in progress

Comment this out to animate the deck

The End!

Resources

This talk: estelle.github.io/JS-in-CSS
OpenWebDocs: OpenWebDocs.org
Specificity: SpeciFISHity.com
Custom properties: Using CSS custom properties (variables)
Selectors: estelle.github.io/selectors/, specifically :has()
CSS functions: CSS value functions and the if() function
Custom properties: HTML contenteditable attribute