Simple Solutions: UI choices without JS

Underjord is a tiny, wholesome team doing Elixir consulting and contract work. If you like the writing you should really try the code. See our services for more information.

I've been looking at creating some progressively enhanced UI which shouldn't require JS for any basic operations. The idea being that I can accelerate and simplify any operation with interactivity provided by Javascript but I won't implement things in a way that requires JS.

The demonstration below is one such example which can be used to give a very common type of interactivity without using Javascript. You can select an option or even expand a selection (similar method, but with a checkbox) without a line of Javascript. It uses fairly simple methods but can be a bit confusing if you haven't seen this kind of thing before. I recall the first big :hover-based menus we could do in Firefox. Which wasn't supported in IE6 and oh the frustrations.

So we have the :checked pseudo-class which allows us to style an element because it has been checked. And then we have ~, the General sibling combinator. These two combine to allow us to target a sibling element of our checked element. This means that our radio button and our target that we want to show or hide have to be inside the same element. With + they would need to be exactly next to each other which makes label placement more annoying. Tilde is a bit more relaxed and we can just put the label in-between.

There are a number of interesting pseudo-classes that we can do fun stuff with. Typically :hover, :active and :focus. They are all to some extent interactive. Additionally I would experiment with :lang, :valid and :invalid. I think they could be useful. You might think that :visited could be one of these. But it won't work as it has been set to lie for sibling selection. Why? Privacy reasons. It would be trivial to track information about your visited sites if they didn't restrict the kinds of styling you could apply. Why? Because CSS can send calls to servers. Anyway, lets look at this UI stuff.

Demonstration

Code

    .sample-editor {
        /* just some prettifying measures */
        border-radius: 4px;
        background-color: #555555;
        color: #eaeaea;
        padding: 8px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .sample-editor textarea {
        /* just some prettifying measures */
        min-height: 128px;
        background: none;
        border: none;
        color: #eaeaea;
    }

    div.sample-editor {
        /* hide unselected editors */
        display: none;
    }

    .sample-editor-select:checked ~ div.sample-editor {
        /* show selected editor */
        display: block;
    }

<div>
    
    <input id="sample-markdown"
           class="sample-editor-select"
           type="radio"
           name="sample-editor-select"
           checked="checked"
           value="markdown" />
    <label for="sample-markdown">Markdown</label>
    <div class="sample-editor">
        <textarea>My text!</textarea>
    </div>
</div>

<div>
    
    <input id="sample-richtext"
           class="sample-editor-select"
           type="radio"
           name="sample-editor-select"
           value="richtext" />
    <label for="sample-richtext">Rich text</label>
    <div class="sample-editor">
        <div class="richtext" contenteditable="true">
            My text!
        </div>
    </div>
</div>

Note: The contenteditable in the example is a bit of a red herring because you can't submit those as form data and to the best of my knowledge using it for editing in a meaningful way will require JS in the end. In my project the editor would actually just show you raw HTML in a textarea if you need to edit without JS.

I think this is pretty neat and I don't think everyone knows about it. If you have questions or thoughts about this, feel free to get in touch via lars@underjord.io or just find me on Twitter as @lawik.

Underjord is a 4 people team doing Elixir consulting and contract work. If you like the writing you should really try the code. See our services for more information.

Note: Or try the videos on the YouTube channel.