Simple Solutions: UI choices without JS

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

My text!

Code

css style.css
    .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;
    }
html simple.html
<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.

Latest Posts

Video - Livebook, trying it out

Last friday I did my second live stream. A lot of nice people stopped by and I spent the time showing and getting more familiar with the newly released Livebook....

Read More

Lumen - Statically compiled Erlang for x86

The Lumen Project is an ambitious compiler development effort to create a complimentary set of compilers and tools that allow developers to get the power of the Erlang VM, The BEAM, in places it does not traditionally fit. Such as the browser. Currently the project is at an early released stage as covered in Luke's ElixirConf talk. It does not yet implement all of Erlang OTP and as such won't handle most Erlang/Elixir you could throw at it. I want to show something that it does do. And while the project is a complicated compiler project you do not need to know that stuff to try it out. This should be achievable for most developers and to ensure that I wasn't talking out of my rear I had my assistant developer follow the instructions without my input and it worked out well....

Read More

A Telegram Bot in Elixir feat. LiveView

I asked my network about noting ideas quickly and got a lot of good responses. One mentioned saving them in Telegram. I don't think I want to do specifically that but I do want a minimum friction way of noting ideas for later review and refinement. And sending them to a Telegram chat would be quite nice. So I started on the path of something like a note-taking system using Telegram for ingesting quick notes. And I want to share the satisfaction I felt with seeing the near real-time way that it works....

Read More
Read All Posts →