Super-hacky, fragile list of icons with no-script search

This is one of those things that Ian Malcolm warned us about:

You should absolutely not create a text filter without using an <input> and JavaScript, but you can — kind of.

I had wanted to do something like this for a couple weeks, but I didn’t know how to get text input into CSS without JS. Then I read Terence Eden’s post on encrypting a static page with no JS, where I was horrified to learn that you can set a <style> element to display: block. Yikes.

<style contenteditable="true" spellcheck="false" autocapitalize="none">li:not([data-icon-name*=
    /* <-- QUERY GOES HERE */
])
{
    display: none;
}
</style>

The trick, then, was to visually hide all but the blank query-goes-here line.

body style {
    display: block;
    width: 18rem;
    height: 2.8rem;
    white-space: pre;
    font-size: 2rem;
    line-height: 1;
    border: 4px solid white;
    padding: 4px;
    overflow: hidden; /* the rest of the CSS should be hidden */
}

/* hide the first line as best as possible */
body style:first-line {
    font-size: 0;
}

This is kind of quite fragile and finicky.

• The cursor insertion point has to be at the right place. Even when clicking to give it focus, it’s not always right. (This seems to be worst in Firefox. If you don’t see a cursor, press the down arrow to move from the invisible first line to the correct blank/query line.)
• If someone selects too much, deletes too much, or arrows down, the CSS both becomes invalid and you’ll see software gore.
• The [attr*=] selector doesn’t have quotes around the query string, which means searches starting with numbers aren’t tokenized as strings. But it does mean that an “empty” search is deliberately an invalid selector, so it shows all results.
• Accessibility? No 😬

So, uh, do not use it in production. But it’s still kinda neat I guess?