css – Dan Q

Recreating a 1990 Book Cover (in HTML + CSS)

At the weekend, I became briefly obsessed with the cover of the manual for GoScript Plus, a 1990 software tool for converting PostScript output into a format that’s compatible with a wider array of IBM-compatible printers.

I’ve never used this piece of software. I can’t even remember how I found my way to archive.org’s copy of its documentation. Just one of those mysteries.

Anyway: here’s what it looks like:

Computer manual cover printed in blue, black, and white. The title 'GoScript Plus' is askew at one angle, and everything else is askew at a right angle to that. — I can see why, if you were making software like this, you’d want to show off the number of typefaces your tool could support. And look: we can print text at wonky angles! Buy this and you can too!

The design is very much a product of its era. That two-colour print, the strange angles, those smallcaps, the excessive use of title case, and the use of “ink jet” as two words rather than one.

Anyway: I decided I’d attempt to re-create the cover in pure HTML + CSS. No SVGs; no images. Here’s what I came up with:

Somehow mine looks slightly less-dated? But still very “90s”.

I’m not entirely happy with the fonts: in the short while I was working on this, I couldn’t find anything that was quite “right” for the main title, with its stencil-style Rs and Ps, super-rounded Os and Cs, and narrow Ss. In the end I just used Ubuntu Sans almost everywhere.

The white “stripe” with font samples is all just system fonts from your computer! So that’s not accurate either. But my aim was to capture the feel of the manual rather than necessarily make a 100% faithful recreation of it, so I guess it’s okay.

I was quite pleased with the LaserGo logo in the top left. The main “striped circle with one corner a different color” was implemented like this:

/* The <address> element contains the text "LaserGo, Inc" */
address {
  /* Before AND after it are two virtual elements: */
  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    /* Both are offset to where I want the "circle" to be. */
    /* (note use of container query units for responsive sizing!) */
    top: -8cqw;
    left: 3cqw;
    width: 8cqw;
    height: 8cqw;
    /* Make it circular: */
    border-radius: 50%;
    /* The background is striped, with a color specified in --logo-color: */
    background: repeating-linear-gradient(var(--logo-color) 0cqw, transparent 0.2cqw, transparent 0.3cqw);
    /* Then that gets masked; two variables control which part is shown: */
    mask-image: conic-gradient(var(--logo-corner-mask) 0deg, var(--logo-corner-mask) 90deg, var(--logo-remainder-mask) 90deg, var(--logo-remainder-mask) 360deg);
  }

  &:before {
    /* The "before" circle uses white stripes: */
    --logo-color: var(--white);
    /* And masks so that three-quarters of the circle is shown: */
    --logo-corner-mask: transparent;
    --logo-remainder-mask: black;
  }

  &:after {
    /* The "after" circle uses black stripes: */
    --logo-color: var(--black);
    /* And masks so that one-quarter of the circle is shown: */
    --logo-corner-mask: black;
    --logo-remainder-mask: transparent;
  }
}

I was pleased to be able to share 90% of the CSS code between the white-striped three-quarters-circle and the black-striped one-quarter-circle. All that remained after this was to “bite” a corner out of it with a background-coloured overlay.

Anyway; there’s probably nothing more to say about this, apart from a reminder than HTML + CSS is absolutely a an art medium. Take a look at the source code of my fake book cover, if you like (or inspect its DOM, if you prefer): it’s all self-contained and should be reasonably readable.

Setting the width of selects to the width of the selected option

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

The field-sizing property is coming to Firefox 152, making it available across all major engines. It allows you to control the sizing behavior of elements with a default preferred size, such as form elements.

…

Manuel, in Setting the width of selects to the width of the selected option

Sometimes a new CSS feature comes along and I immediately “get it”. Like: that’s a cool new feature, I can already see how it’ll save me time, or make things simpler, or improve accessibility, or allow me to do something new.

Other times, like this one, I initially shrug. What’s the point?, I think…

…and then later in the very same day find occasion to wish it was already mainstream. Hah!

Thanks for sharing, Manuel.

A Selfhosted Static Site Editor

My 12-year-old was interested in learning some HTML and CSS and making her own website. If she were anybody else I’d point her at something like Nekoweb as a starter host because their web-based (VSCode-based) “Nekode” text editor makes writing your first static site simple.

But I’ve got a NAS sitting at home on a fibre connection, so I figured: I might as well just host something similar here.

Here’s how I did it:

1. DNS

I pointed her domain at my static IP, plus a subdomain for the “backend” interface. Suppose her site would be at example.net (and www.example.net) with the admin interface at admin.example.net: my DNS configuration might look like this:

@     10800 IN     A 172.66.147.243
www   10800 IN CNAME example.net.
admin 10800 IN CNAME example.net.

2. Caddy

I’ve got a Caddy webserver acting as a static server and a reverse proxy already, so I just added a new static site with a configuration like this:

example.net, www.example.net {
  root /volumes/example.net/public
  encode gzip
  templates
  file_server
}

The templates directive means that, if/when she wants to, she could use Caddy’s built-in SSI-like features. Or if she decides someday she’d prefer a static site generator then I can sort her out with shell access or something.

It probably wouldn’t be much harder to set up something like this from scratch on e.g. a Raspberry Pi: Caddy’s fast and easy to get set up.

3. Editor

I used the OpenVSCode Server Docker image to provide a browser-based VSCode interface in which she could edit HTML, CSS and JavaScript and drag-drop files from her local machine. I’m using Unraid on my NAS so I didn’t have to think much about running a new Docker container, but I guess that if I did then I’d have typed something like:

docker run -d \
  # 7890 is the port on my NAS that I'll proxy Caddy to:
  -p 7890:3000
  # /mnt/user/example.net is the path on my NAS;
  # /example.net is where it'll appear within VSCode:
  -v "/mnt/user/example.net:/example.net" \
  # this tells OpenVSCode-Server to mount the directory to begin with:
  -e OPENVSCODE_SERVER_ROOT=/example.net \
  gitpod/openvscode-server

Now all I needed to do was point Caddy at it. For the time being I simply restricted access to only “computers on my local LAN”, but it’d be easy enough to add authentication using basic auth and/or client certificates if she wanted to be able to work on her site from elsewhere:

admin.example.net {
  # Restrict access to 192.168.* LAN:
  @allowed {
    remote_ip 192.168.0.0/16
  }
  # Proxy permitted folks to the container:
  handle @allowed {
    reverse_proxy http://nas:7890
  }
  # Block everybody else:
  handle {
    abort
  }
}

That’s literally all it took to put together a web-based editing environment that publishes directly to a static website. And because it’s on my own infrastructure, it’d be trivially easy to modify it in the future if she decided to go in a different direction, e.g. a PHP site, or continuous deployment from a repo, or static site generation from a shell.

That’s all!

Here’s a test site I threw together using exactly this stack, demonstrating the entirely browser-based editing workflow (not shown is drag-and-drop to upload, but I promise that works too!):

CSS or BS

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Keith Cirkel, in CSS or BS

Well this is a fun (and frustrating!) game. You’ll be presented with 20 (alleged) CSS properties, but some of them… are convincing-looking fakes! You’ve got 10 seconds to identify whether each is real or not. Every few you get right increases the difficulty level, but also the score potential. How high can you score?

Me? Oh, I kept getting up into the “forbidden” level and then my brain would melt and I’d crash out. Quite proud of my last run, though:

Reply to: let’s write a blog post about CSS

This is a reply to a post published elsewhere. Its content might be duplicated as a traditional comment at the original source.

Dave Rupert said:

Me: Alright, let’s write a blog post about CSS.
🧠: Okay, but we need to make an entire design system first.
Me: That seems very complicated.
🧠: How long could it possibly take? 10 minutes?

Tell me about it.

I started a blog post about pedestrian crossings months ago and somewhere along the way I got bogged down with implementing a web component that uses 16-bit pixel art people and cars to simulate and compare the relative throughput efficiencies of different timing systems and HELP I WENT TOO DEEP THIS WAS SUPPOSED TO BE A SIMPLE BLOG POST.

Reducing Phantom Obligation in FreshRSS

A week or so ago, Terry Godier – who’s been thinking a lot about UX assumptions lately – argued that the design of most feed readers produces an effect called “phantom obligation”.

He observes that the design of feed readers – which still lean on the design of the earliest feed readers, which adopted the design of email software to minimise the learning curve – makes us feel obligated to stay on top of all our incoming content with its “unread counts”.

Phantom obligation

Email’s unread count means something specific: these are messages from real people who wrote to you and are, in some cases, actively waiting for your response. The number isn’t neutral information. It’s a measure of social debt.

But when we applied that same visual language to RSS (the unread counts, the bold text for new items, the sense of a backlog accumulating) we imported the anxiety without the cause.

…

RSS isn’t people writing to you. It’s people writing, period. You opted to be notified of their existence. The interface implied debt where none existed. The obligation became phantom.

For a while now I’ve been encouraging people to see their feed reader as something distinct from email, and Terry’s expertly summarised exactly why. When people think of RSS as being like email, they’re encouraged to idolise “inbox zero” for both. But that’s not the right metaphor for RSS at all.

Screenshot of Terry's animation showing different kinds of media and the relative match or mismatch between (a) how guilty their notification interface makes you feel and (b) the actual amount of obligation that exists. — Seriously, if you haven’t read Terry’s article yet, you should read it now!¹

From where I’m sitting

I use FreshRSS as my feed reader, and I love it. But here’s the thing: I use the same application for two different kinds of feeds. I call them slow content and fast content.²

Slow content

Blogs, news, podcasts, webcomics, vlogs, etc. I want to know that there is unread content, but I don’t need to know how much.

In some cases, I configure my reader to throw away stuff that’s gotten old and stale; in other cases, I want it to retain it indefinitely so that I can dip in when I want to. There are some categories in which I’ll achieve “inbox zero” most days³… but many more categories where the purpose of my feed reader is to gather and retain a library of things I’m likely to be interested in, so that I can enjoy them at my leisure.

I also use my RSS reader to subscribe to a few mailing lists (where an RSS feed isn’t available for some reason). These – like blogs – are often “people writing, period” content and shouldn’t have been sent by email in the first place!⁴

Fast content

Some of the things I subscribe to, though, I do want to know about. Not necessarily immediately, but “same day” for sure! This includes things like when it’s a friend’s birthday (via the Abnib Birthdays feed) or when there’s an important update to some software I selfhost.

This is… things I want to know about promptly, but that I don’t want to be interrupted for! I appreciate that this kind of subscription isn’t an ideal use for a feed reader… but I use my feed reader with an appropriate frequency that it’s the best way for me to put these notifications in front of my eyeballs.

I agree with Terry that unread counts and notification badges are generally a UX antipattern in feed readers… but I’d like to keep them for some purposes. So that’s exactly what I do.

How I use FreshRSS (to differentiate slow and fast content)

FreshRSS already provides categories. But what I do is simply… not show unread counts except for designated feeds and categories. To do that, I use the CustomCSS extension for FreshRSS (which nowadays comes as-standard!), giving it the following code (note that I want to retain unread count badges only for feed #1 and categories #6 and #8 and their feeds):

.aside.aside_feed {
  /* Hide all 'unread counts' */
  .category, .feed {
    .title:not([data-unread="0"])::after,
    .item-title:not([data-unread="0"])::after {
      display: none;
    }
  }
  
  /* Re-show unread counts only within:
   * - certain numbered feeds (#f_*) and
   * - categories (#c_*)
   */
  #f_1, #c_6, #c_8 {
    &, .feed {
    .title:not([data-unread="0"])::after,
    .item-title:not([data-unread="0"])::after {
      display: block;
    }
  }
}

That’s how I, personally, make my feed reader feel less like an inbox and more like a… I don’t know… a little like a library, a little like a newsstand, a little like a calendar… and a lot like a tool that serves me, instead of another oppressive “unread” count.

Maybe it’ll help you too.

Footnotes

¹ Or whenever you like. It’s ‘slow content’. I’m not the boss of you.

² A third category, immediate content, is stuff where I might need to take action as soon as I see it, usually because there’s another human involved – things like this come to me by email, Slack, WhatsApp, or similar. It doesn’t belong in a feed reader.

³ It’s still slow content even if I inbox-zero it most days… because I don’t inbox-zero it every day! I don’t feel bad ignoring or skipping it if I’m, for example, not feeling the politics news right now (and can you blame me?). This is fundamentally different than ignoring an incoming phone call or a knock at the door (although you’re absolutely within your rights to do that too, if you don’t have the spoons for it).

⁴ I’m yet to see a mailing list that wouldn’t be better as either a blog (for few-to-many communication) or a forum (for many-to-many communication), frankly. But some people are very wedded to their email accounts as “the way” to communicate!

Death to the shadow DOM!

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

…

A common rebuttal I get to this…

What about when you want to keep global styles out of your component, like with a third-party widget that gets loaded on lots of different pages?

I kind-of sort-of see the logic in that. But I also think wanting your component to not look like a cohesive part of the page its loaded into is weird and unexpected.

…

Chris Ferdinandi (Go Make Things), in Death to the shadow DOM!

I so-rarely disagree with Chris on JavaScript issues, but I think I kinda do on this one. I fully agree that the Shadow DOM is usually a bad idea and its encapsulation concept encourages exactly the kind of over-narrow componentised design thinking that React also suffers from. But I think that the rebuttal Chris picks up on is valid… just sometimes.

When I created the Beige Buttons component earlier this year, I used the shadow DOM. It was the first time I’ve done so: I’ve always rejected it in my previous (HTML) Web Components for exactly the reasons Chris describes. But I maintain that it was, in this case, the right tool for the job. The Beige Buttons aren’t intended to integrate into the design of the site on which they’re placed, and allowing the site’s CSS to interact with some parts of it – such as the “reset” button – could fundamentally undermine the experience it intends to create!

I appreciate that this is an edge case, for sure, and most Web Component libraries almost certainly shouldn’t use the shadow DOM. But I don’t think it’s valid to declare it totally worthless.

That said, I’ve not yet had the opportunity to play with Cascade Layers, which – combined with directives like all: reset;, might provide a way to strongly override the style of components without making it impossibly hard for a site owner to provide their own customised experience. I’m still open to persuasion!

For anyone who :has :not yet seen the magic of modern CSS

Modern CSS is freakin’ amazing. Widespread support for nesting, variables, :has, and :not has unlocked so much potential. But I don’t yet see it used widely enough.

Suppose I have a form where I’m expecting, but not requiring, a user to choose an option from each of several drop-downs. I want to make it more visually-obvious which drop-downs haven’t yet had an option selected. Something like this:

<select name="guess[69427976b65e3]">
  <option></option>
  <option value="1">First answer</option>
  <option value="2">Second answer</option>
  <option value="3">Third answer</option>
</select>

This is close to an actual example generated as part of a Christmas quiz game I made the other year, and dusted off recently.

Suppose I want to style that <select> when the first, default, “empty” option is selected.

That could be as simple as this:

select:has(option:not([value]):checked) {
  outline: 6px dotted red;
}

It’s a slightly gnarly selector, but thanks to nesting you could choose to break it into multiple blocks if you preferred.

What that’s saying is:

a <select>
- that contains an <option>
  - where that <option> does not have a value="..."
  - and that <option> is currently selected
gains a dotted red outline around it

Or in short: if the default option is selected, highlight it so the user knows they haven’t chosen a value yet. Sweet!

Animation showing a select box which receives a dotted red border each time its 'blank' first value is selected. — Obviously you could expand this to have different effects for *every* value, if you wanted.

I can’t understate how valuable it is that we can do this in CSS, nowadays. Compared to doing it in JavaScript… CSS gives better performance and reliability and is much easier to implement in a progressively-enhanced manner.

Here’s another example, this time using a fun “dress-up Dan” feature I from a redesign of my blog theme that I’m hoping to launch in the New Year:

If you’ve ever wanted to know what I’d look like if I were an elderly Tom Scott, my new design will answer that question!

Every single bit of interactivity shown in the video above… from the “waving” Dan to the popup menu to the emoji-styled checkboxes to the changes to t-shirt and hair colours… is implemented in CSS.

The underlying HTML is all semantic, e.g. the drop-down menu is a <details>/<summary> pair (with thanks to Eevee for the inspiration); its contents are checkbox and radiobutton <input>es; the images are SVGs that use CSS variables (another killer feature these years!) to specify colours (among other things), and virtually everything else… is CSS.

Consider this:

:root {
  /* Default values for Dan's t-shirt, hair, and beard colours used throughout the site: */
  --dan-tshirt: #c3d4d7;
  --dan-hair: #3b6f8f;
  --dan-beard: #896a51;

  /* ...more variables... */
}

/* When the page contains a "checked" checkbox, update some variables: */
:root:has(#dan-tshirt-color-white:checked)  { --dan-tshirt: #c3d4d7; }
:root:has(#dan-tshirt-color-purple:checked) { --dan-tshirt: #7429a8; }
/* ... */
:root:has(#dan-hair-color-natural:checked)  {   --dan-hair: #896a51; }
:root:has(#dan-hair-color-blue:checked)     {   --dan-hair: #3b6f8f; }

/* When "dye beard" is checked, copy the hair colour: */
:root:has(#dan-dye-beard-toggle:checked)    {  --dan-beard: var(--dan-hair); }

The ability to set :root CSS variables, based on the status of user-controlled elements like checkboxes within the document, unlocks amazing options for interactivity. It also works in smaller scopes like HTML Web Components, of course, for encapsulated functionality.

If you’re still using JavaScript for things like this, perhaps it’s time you looked at how much CSS has grown up this last decade or so. CSS gives you performance benefits, less fragility, and makes it easier for you to meet your accessibility and usability goals.

You can still enrich what you create with JavaScript if you like (I’ve got a few lines of JS that save those checkbox states to localStorage so they persist through page loads, for example).

But a CSS-based approach moves more of your functionality from the “nice to have” to “core” column. And that’s something we can all get behind, right?

CSS Lightbox with Alt Text Viewer

Rather I show you than tell you? Here’s a demo page.

Right now, my blog uses a CSS-based approach using anchors and the <dialog> element to make “lightbox” images work, but I plan to replace this soon with a similar approach that uses the <details> and <summary> elements to provide a more semantically-sound and accessible approach¹.

An additional thing I wanted to implement – again, for the next version of my blog’s theme – was an “alt text viewer”. Mastodon has one, and it’s excellent². Mastodon’s viewer requires JavaScript, but I was inspired when I saw James come up with a CSS-based version that used a re-styled checkbox.

But I wanted to do one better. Displaying alt text, too, seems like an example of what would semantically be best-represented by a <details>/<summary> pair.

Clicking on the image shows a larger version in a lightbox; clicking on the ‘alt’ button shows the alt text… all in semantic HTML and vanilla CSS.³

My first attempt tried to put the alt-text widget inside the <summary> of the original image, but that’s an accessibility no-no, so instead I wrap both <details> blocks (the lightbox, and the alt-text revealer) inside a container and then reposition the latter over the former. The rest is all the same kinds of tricks I demonstrated previously, to ensure that you can click in-and-out of both in an intuitive way and that keyboard navigation works as you’d expect.

I can’t use it on my blog yet (because if I do, it’ll probably break horribly when I add the functionality to my entire theme, later!), but I’ve put together a demonstration page that showcases the technique, plus a GitHub repo with all of the code (which is all public domain/unlicensed). Go have a play and tell me what you think!

Footnotes

¹ As a secondary goal, using <details>/<summary> means that it’ll behave better when CSS is disabled or unavailable, which’ll make it easier to celebrate Naked CSS Day!

² Why would I, a sighted person, need an alt text viewer, you ask? All kinds of reasons. Good alt text is for everybody, and can help by providing context, e.g. “explaining” the joke or identifying the probably-well-known-but-I-didn’t-recognise-them subject of a photo. Here’s some more reasons.

³ If you love owls and you love accessibility, this is the kind of example you should give a hoot about.

DOCTYPE

This weekend, I received my copy of DOCTYPE, and man: it feels like a step back to yesteryear to type in a computer program from a magazine: I can’t have done that in at least thirty years.

So yeah, DOCTYPE is a dead-tree (only) medium magazine containing the source code to 10 Web pages which, when typed-in to your computer, each provide you with some kind of fun and interactive plaything. Each of the programs is contributed by a different author, including several I follow and one or two whom I’m corresponded with at some point or another, and each brings their own personality and imagination to their contribution.

I opted to start with Stuart Langridge‘s The Nine Pyramids, a puzzle game about trying to connect all nodes in a 3×3 grid in a continuous line bridging adjacent (orthogonal or diagonal) nodes without visiting the same node twice nor moving in the same direction twice in a row (that last provision is described as “not visiting three in a straight line”, but I think my interpretation would have resulted in simpler code: I might demonstrate this, down the line!).

Open magazine showing program code in front of a screen showing a text editor and the running program. — The puzzle actually made me stop to think about it for a bit, which was unexpected and pleasing!

Per tradition with this kind of programming, I made a couple of typos, the worst of which was missing an entire parameter in a CSS conic-gradient() which resulted in the majority of the user interface being invisible: whoops! I found myself reminded of typing-in the code for Werewolves and Wanderer from The Amazing Amstrad Omnibus, whose data section – the part most-liable to be affected by a typographic bug without introducing a syntax error – had a helpful “checksum” to identify if a problem had occurred, and wishing that such a thing had been possible here!

But thankfully a tiny bit of poking in my browser’s inspector revealed the troublesome CSS and I was able to complete the code, and then the puzzle.

I’ve really been enjoying DOCTYPE, and you can still buy a copy if you’d like one of your own. It manages to simultaneously feel both fresh and nostalgic, and that’s really cool.

Repost #27484

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Layoutit Terra is a CSS terrain generator that leverages stacked grids and 3D transforms.

Inspectable spikes, wedges, ramps and flats are stitched together into a voxel landscape.

Inspired by Transport Tycoon and all ’90s isometric classics.

Built from the southern hemisphere with Vue, Nuxt, and lots of love ♥
  +------+      +------+     
 /|     /|      |\     |\    
+-+----+ |      | +----+-+   
| |    | |      | |    | |   
| +----+-+      +-+----+ |  
|/     |/        \|     \| 
+------+          +------+     
…
Layoutit, in Layoutit! CSS Terrain Generator

It’s not often these days that I have the experience of “I didn’t know the Web could do that‽”

Once was when I saw DHTML Lemmings, for example, at a time when adding JavaScript to a page usually meant you were doing nothing more-sophisticated than adding a tooltip/popover or switching the images in your mystery meat navigation menu. Another was when I saw Google Earth’s browser-based implementation for the first time, performing 3D manipulations of a quality that I’d previously only seen in dedicated applications.

But I got that today when I played with Layoutit! Terra (from the folks behind one of the better CSS grid layout generators). It’d be pretty cool if it were “just” a Transport Tycoon-like landscape generator and editor, but the thing that blew my mind was discovered that it’s implemented entirely in HTML and CSS… not a line of JavaScript to be seen. Even speaking as somebody who played… and then reverse-engineered… things like Blackle Mori’s CSS Puzzle Box, I can’t even begin to fathom how I’d begin to conceive of such a thing, let alone implement it.

Well done, Layitout! team.

Lowriders & websites

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

…

I think of ElonStan420 standing in that exhibit hall, eyeing those cars with disdain because all that time, energy, care, and expression “doesn’t really matter”. Those hand-painted pinstripes don’t make the car faster or cheaper. Chrome-plated everything doesn’t make it more efficient. No one is going to look under the hood anyway.

…

Adam Stoddard, in Lowriders & websites

Don’t read the comments on HackerNews, Adam! (I say this, but I’ve yet to learn not to do so myself, when occasionally my writing escapes from my site and finds its way over there.)

But anyway, this is a fantastic piece about functionalism. Does it matter whether your website has redundant classes defined in the HTML? It renders the same anyway, and odds are good that nobody will ever notice! I’m with Adam: yes, of course it can matter. It doesn’t have to, but coding is both a science and an art, and art matters.

…

Should every website be the subject of maximal craft? No, of course not. But in a industry rife with KPI-obsessed, cookie-cutter, vibe-coded, careless slop, we could use more lowriders.

Well said, Adam.

Details/summary lightboxes in pure HTML + CSS

💤 Tired: `<dialog>`-based HTML+CSS lightboxes

A few years ago I implemented a pure HTML + CSS solution for lightbox images, which I’ve been using on my blog ever since. It works by pre-rendering an invisible <dialog> for each lightboxable image on the page, linking to the anchor of those dialogs, and exploiting the :target selector to decide when to make the dialogs visible. No Javascript is required, which means low brittleness and high performance!

It works, but it’s got room for improvement.

One thing I don’t like about it is that it that it breaks completely if the CSS fails for any reason. Depending upon CSS is safer than depending upon JS (which breaks all the time), but it’s still not great: if CSS is disabled in your browser or just “goes wrong” somehow then you’ll see a hyperlink… that doesn’t seem to go anywhere (it’s an anchor to a hidden element).

A further thing I don’t like about it is it’s semantically unsound. Linking to a dialog with the expectation that the CSS parser will then make that dialog visible isn’t really representative of what the content of the page means. Maybe we can do better.

🚀 Wired: `<details>`-based HTML+CSS lightboxes?

Here’s a thought I had, inspired by Patrick Chia’s <details> overlay trick and by the categories menu in Eevee’s blog: what if we used a <details> HTML element for a lightbox? The thumbnail image would go in the <summary> and the full image (with loading="lazy" so it doesn’t download until the details are expanded) beneath, which means it “just works” with or without CSS… and then some CSS enhances it to make it appear like a modal overlay and allow clicking-anywhere to close it again.

Let me show you what I mean. Click on one of the thumbnails below:

Each appears to pop up in a modal overlay, but in reality they’re just unfolding a <details> panel, and some CSS is making the contents display as if if were an overlay, complete click-to-close, scroll-blocking, and a blur filter over the background content. Without CSS, it functions as a traditional <details> block. Accessibility is probably improved over my previous approach, too (though if you know better, please tell me!).

The code’s pretty tidy, too. Here’s the HTML:

<details class="details-lightbox" aria-label="larger image">
  <summary>
    <img src="thumb.webp" alt="Alt text for the thumbnail image.">
  </summary>
  <div>
    <img src="full.webp" alt="Larger image: alt text for the full image." loading="lazy">
  </div>
</details>

The CSS is more-involved, but not excessive (and can probably be optimised a little further):

.details-lightbox {
  summary {
    display: block;
    cursor: zoom-in;

    &::before {
      content: '';
      backdrop-filter: none;
      transition: backdrop-filter 0.5s, background 0.2s;
      background: transparent;
    }
  }

  & > div img {
    max-width: 95vw;
    max-height: 95vh;
    box-shadow: 0 0 12px #fff6;
    opacity: 0;
    transition: filter 0.3s, opacity 0.6s;
    filter: blur(6px);
  }

  &[open] > div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    pointer-events: none;

    img {
      opacity: 1;
      filter: none;
    }
  }

  &[open] > summary {
    cursor: auto;

    &::before {
      content: '';
      background: #000a;
      backdrop-filter: blur(6px);
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vw;
      z-index: 109;
    }
  }
}

body:has(.details-lightbox[open]) {
  overflow: hidden;
}

Native CSS nesting is super nice for this kind of thing. Being able to use :has on the body to detect whether there exists an open lightbox and prevent scrolling, if so, is another CSS feature I’m appreciating today.

I’m not going to roll this out anywhere rightaway, but I’ll keep it in my back pocket for the next time I feel a blog redesign coming on. It feels tidier and more-universal than my current approach, and I don’t think it’s an enormous sacrifice to lose the ability to hotlink directly to an open image in a post.

What do you think?

Please Fix This Site? Okay!

This week, digital agency Humidity Studios launched PleaseFixThisSite.com, a website with a deliberately awful design aesthetic.

Screenshot of PleaseFixThisSite.com, featuring all of the design sins described below. — Honestly, I’ve seen worse.

Inspired by XKCD 3113 “Fix This Sign”, the site features marquee animations, poor font choices, wonky rotation and alignment, and more.

Like the comic, it aims to “extort” people offended by the design choices by allowing them to pay to fix them. Once fixed, a change is fixed for everybody… at least, until somebody pays to “reset” the site back to its catastrophic mode.

XKCD comic. Transcript: [A single panel containing a large, elevated sign with Ponytail standing in front of it.] [Title, slightly off horizontal, more to the right than central and the character spacing is not entirely consistent/aesthetic:] Doanate[sic] to fix this sign! [To the left of the lower part of the sign there is an 'QR code', tilted slightly with a plaintext link beneath it:] https://[illegible].com [To the right are several dollar values, in one column, and 'fixes', in a second, some of which have their own self-demonstrating quirks.] [The letters "R" and "N" may be too close together:] $10 fix kerning [Both dollar value and fix text are shifted left of their respective columns:] $20 align columns [This line is in a smaller font:] $20 fix text size $50 fix typo $50 fix centering $100 fix rotation [Ponytail stands looking at the sign, apparently in the process of using a smartphone:] Grrr... [Caption below panel:] My new company's business model is based on extorting graphic designers. — I can’t criticise Humidity Studios for taking a stupid idea from XKCD and taking it way too far, because, well, there’s *this* site that I run…

That’s cute and all, but the difference between a billboard and a web page is, of course, that a web page is under the viewer’s control. Once it’s left the server and reached your computer, there’s nothing the designer can to do stop you editing a page in any way you like. That’s just how the Web works!

A great way to do this is with userscripts: Javascript content that is injected into pages by your browser when you visit particular pages. Mostly by way of demonstration, I gave it a go. And now you can, too! All you need is a userscript manager plugin in your browser (my favourite is Violentmonkey!) and to install my (open source) script.

I enjoyed the art of the joke that is PleaseFixThisSite.com. But probably more than that, I enjoyed the excuse to remind you that by the time you’re viewing a Web page, it’s running on your computer, and you can change it any way you damn well please.

Don’t like the latest design of your favourite social network? Want to reinstate a feature of a popular video playing site? Need a dark mode to spare your eyes on a particular news publication? Annoyed by artificial wait times before you’re “allowed” to click a download button? There’s probably a userscript for all of those. And if there isn’t, you can have a go at writing one. Userscripts are great, and you should be using them.

Dynamic Filters in Pure CSS

While working on something else entirely¹, I had a random thought:

Could the :checked and and :has pseudo-classes and the subsequent-sibling (~) selector be combined to perform interactive filtering without JavaScript?

Turns out, yes. Have a play with the filters on the side of this. You can either use:

“OR” mode, so you can show e.g. “all mammals and carnivores”, or
“AND” mode, so you can show e.g. “all mammals that are carnivores”.

Filter the animals!

(if it doesn’t work right where you are, e.g. in a feed reader, you can view it “standalone”)

The source code is available to download under the Unlicense, but the animal images are CC-BY licensed (with thanks to Aslan Almukhambetov).

How does it work?

There’s nothing particularly complicated here, although a few of the selectors are a little verbose.

First, we set the initial state of each animal. In “OR” mode, they’re hidden, because each selected checkbox is additive. In “AND” mode, they’re shown, because checking a checkbox can only ever remove an animal from the result set:

#filters:has(#filter-or:checked) ~ #animals .animal {
  display: none;
}

#filters:has(#filter-and:checked) ~ #animals .animal {
  display: flex;
}

The magic of the :has pseudo-class is that it doesn’t change the scope, which means that after checking whether “AND” or “OR” is checked within the #filters, the #animals container is still an adjacent element.

Touchscreen interactive restaurant menu with filter categories on the left and dishes for selection in the centre. — Next time you’re implementing a filter interface, like this restaurant menu, perhaps ask whether you actually *need* JavaScript.

Then all we need to do is to use daisy-chain :has to show animals with a particular class if that class is checked in “OR” mode, or to hide animals that don’t have a particular class in “AND” mode. Here’s what that looks like:

#filters:has(#filter-or:checked):has(#aquatic:checked)  ~ #animals .aquatic,
#filters:has(#filter-or:checked):has(#bird:checked)     ~ #animals .bird,
...
#filters:has(#filter-or:checked):has(#reptile:checked)  ~ #animals .reptile {
  display: flex;
}

#filters:has(#filter-and:checked):has(#aquatic:checked) ~ #animals .animal:not(.aquatic),
#filters:has(#filter-and:checked):has(#bird:checked)    ~ #animals .animal:not(.bird),
...
#filters:has(#filter-and:checked):has(#reptile:checked) ~ #animals .animal:not(.reptile) {
  display: none;
}

It could probably enjoy an animation effect to make it clearer when items are added and removed², but that’s a consideration for another day.

Many developers would be tempted to use JavaScript to implement the client-side version of a filter like this. And in some cases, that might be the right option.

But it’s always worth remembering that:

A CSS solution is almost-always more-performant than a JS one.
A JS solution is usually less-resilient than a CSS one: a CDN failure, unsupported API, troublesome content-blocker or syntax error will typically have a much larger impact on JavaScript.
For the absolutely maximum compatibility, consider what you can do in plain HTML, or on the server-side, and treat anything on the client-side as progressive enhancement.

Footnotes

¹ The thing I was actually working on when I got distracted was an OAuth provider implementation for Three Rings, connected with work that took place at this weekend’s hackathon to (eventually) bring single-sign-on “across” Three Rings CIC’s products. Eventually being the operative word.

² Such an animation should, of course, be wrapped in a @media (prefers-reduced-motion: no-preference) media query!

1. DNS

2. Caddy

3. Editor

That’s all!

Phantom obligation

From where I’m sitting

Slow content

Fast content

How I use FreshRSS (to differentiate slow and fast content)

Footnotes

Footnotes

💤 Tired: <dialog>-based HTML+CSS lightboxes

🚀 Wired: <details>-based HTML+CSS lightboxes?

Filter the animals!

How does it work?

Footnotes

💤 Tired: `<dialog>`-based HTML+CSS lightboxes

🚀 Wired: `<details>`-based HTML+CSS lightboxes?