Post #3733191

2026-07-10 21:31 UTC

Omigosh, I think I've just invented a completely new #HTML / #CSS technique! :O How do I explain this? HTML/CSS has popovers now -- if you add a `popover` attribute to an element, it gets hidden by default and any `` or `` (oddly, *only* those elements allowed) that points to it with `popovertarget` will make the popover appear. Nice, but now you have two elements -- the thing you click, and the popover that appears. I wanted to make the image thumbnail on the left, open an expanded version when clicked on. Two elements, right? The one in the sidebar, and a copy for the big popover. Two copies of the image, two copies of the text. I discovered how to make an element popover itself. Ah, but that tiny image in the sidebar isn't going to do when you expand it to fill the screen, no? By using a `srcset` attribute, you can have multiple images that are chosen based on the size of the element... ```html ``` In the screenshots, you are looking at the *same* `` element as in the sidebar popped out to fill the screen. All in HTML / CSS. No #javascript! This is probably a *big deal* to those who understand what it means. #webdev #programming #encarta #retrocomputing

Replies (5)

@Kroc@oldbytes.space 2026-07-10 22:26

This won't format well on most hosts, sorry: ```html The Tower of Balal Artist's drawing depicting the building of the Tower of Balal. ``` ```css figure[popover] { /* popovers are hidden by default and appear above all other content, / make it visible again and re-insert the element into the document */ display: block; position: static; /* popovers have a border by default */ border: none; button { /* strip the "buttoness" from the button, show only the image */ margin: 0; padding: 0; border: none;} button > img { /* make the image automatically fill the width / of the side-bar or whatever element its within */ display: block; max-width: 100%; } } figure[popover]:popover-open { /* reinstate the floats-above-everything effect, this allows / the background page to scroll without losing the popover */ position: fixed; /* reinstate default popover attributes, / recenter the popover, fill screen */ width: fit-content; height: fit-content; margin: auto; button > img /* change auto-sizing to limit by screen-height instead of width! / this is so that a wide or tall image doesn't cause scrolling! / "vh" units are used so that the image is 80% of the screen / height, *not* the document height */ { max-width: auto; max-height: 80vh; } } ``` #cssmimap

Open ##4249637
@Kroc@oldbytes.space 2026-07-14 18:06

Another major #HTML / #CSS discovery: You limit the height of the image so that it fits within the screen; the width of it will automatically scale, e.g. `width: auto; max-height: 75vh;` However, the text element below will stretch the container out automatically because it's technically 'wider' than the image (see img1). You want the image to set the container width, but you don't know its width! (The text is wrapped in a DIV so that it can scroll if it overflows without scrolling the entire popover) Setting the width to `min-content` so that it doesn't maximise its width unfortunately doesn't fill the space. (see img2) In Chrome this can be solved by also setting `min-width` to `stretch` (img3), however this doesn't work in Firefox / iOS / Android. Firefox will however work if you use `fit-content` instead (img4) -- but that then breaks Chrome! Including Webkit (iOS / Android), the correct solution for making the element as wide as the container without extending the container is: ```css min-width: -webkit-fill-available; min-width: fit-content; min-width: stretch; width: min-content; ``` (NB: The order of the three `min-width` properties is critical!) (aside: the site is an Encarta-like encyclopedia for my book about a world inside a sandglass the size of Earth: https://camendesign.com/nomad #worldglass) #webdev

Open ##4249640
@emersunn@beige.party 2026-07-10 22:28

@Kroc@oldbytes.space 🫡

Open ##4249643
@TambourineMan@mastodon.social 2026-07-10 23:08

@Kroc@oldbytes.space The srcset idea is brilliant. I _think_ you can achieve the same or similar with ::focus instead of the popover attribute, can’t you?

Open ##4249644
@devolute@mastodon.social 2026-07-11 07:35

@Kroc@oldbytes.space Does this mean I can make modal image popovers display using this technique? This feels like a really good way to do this.

Open ##4249649