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.
Trick 2: Hide the Triangle
Hiding the triangle marker that browsers add to summary tags.
Trick 3: Expand Permanently
Using details and summary tags to only expand content with no “un-expanding” functionality.
Trick 4: Remove Interaction Outline
Hiding the “you clicked this” outline that some browsers add when clicking a summary tag.
Trick 5: Toggle a Style
Using the Checkbox Hack to change the style of an element.
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.