No.js!

Can you create useful web page interactions without Javascript? And should you?

As a web developer I have written a lot of Javascript over the years, and I certainly appreciate the power it can bring to the people. But lately I’ve been looking for ways to make interactive stuff without Javascript. I’m not on a “Javascript Is Evil” crusade or an anti-scripting holy war, but I do like pulling the rug out from under myself from time to time, just to see what happens. Sometimes the exercise of “doing without” turns up interesting things.

So here are some UI tricks that have helped me avoid Javascript. I’m documenting them here for Future JD to steal. Hi me!

Trick 1: Basic Open & Shut

Using details and summary tags for simple show/hide functionality.

No.js! Basic Open & Shut

Trick 2: Hide the Triangle

Hiding the triangle marker that browsers add to summary tags.

No.js! Hide the Triangle

Trick 3: Expand Permanently

Using details and summary tags to only expand content with no “un-expanding” functionality.

No.js! Expand Permanently

Trick 4: Remove Interaction Outline

Hiding the “you clicked this” outline that some browsers add when clicking a summary tag.

No.js! Remove Interaction Outline

Trick 5: Toggle a Style

Using the Checkbox Hack to change the style of an element.

No.js! Toggle a Style

Other People’s Tricks

Standing on the shoulders of giants …

Anika

Anike experimented with several different kinds of Pure CSS Image Lightboxes.


Art Lawry

In a great article on A List Apart Art Lawry explored several situations where the Radio Button Hack could be useful. I like the examples for tabs and a carousel.


Chris Bracco

I love these tooltips.


Chris Coyier

He wrote a nice article on CSS-Tricks about using details and summary and another covering the Checkbox Hack.


Jorge Chavez

In Jorge Chavez’s Pure CSS Modal GitHub project you’ll find a pure CSS modal with some nice, easy-to-set-and-forget animation styles as well as a good demo.


Paul Eiche

His Popup windows without Javascript article may have been the first example I ever saw of a No.js! modal window.


Paul L. Ferguson

You can play with some pure CSS dropdowns on Paul L. Ferguson’s fiddle.

Do you have a question about any of this stuff? Ask me.