Keith Cirkel
LightNews LightNews
banner
keithamus.social
Keith Cirkel
@keithamus.social
1.8K followers 1.1K following 310 posts
Software Cyber Shepherd.

Web platform engineer. Participant: WHATWG, CSSWG, ARIAWG, OpenUICG, WebComponents CG

Website: https://keithcirkel.co.uk/
GitHub: https://github.com/keithamus
Mastodon: https://indieweb.social/@keithamus
Posts Replies Media Videos
keithamus.social
It's impossible to get to inbox zero on GitHub because I got @ mentioned in a couple of spammy repos which are deleted, but the notifications are hanging around in my inbox and I cannot remove them.

GitHub knows this is an issue but don't seem to want to fix it so... 🤷
September 30, 2025 at 8:10 AM
keithamus.social
Ahhh. Always nice when you can add ~180LOC to your ~100kLOC codebase and make it go twice as fast.

github.com/csskit/csski...
September 23, 2025 at 9:13 PM
keithamus.social
Arrested Development's Lucille Bluth with the caption "It's one CSS Parser. How hard could it be?"
August 19, 2025 at 8:09 AM
keithamus.social
I apologise in advance.
A set of grotesque chairs (one white, one grey, one black) which would otherwise be fine but some plonker thought it would be sensible to strap a door knocker to the back of it.
August 1, 2025 at 6:55 PM
keithamus.social
It's likely not in that release.

When you go to `about:config` and search for the pref, if it's not already in the list as `false` then it is not available in that release. You might instead get a UI to create the new pref which won't do anything

Consider the following screenshots; subtle I know.
A screenshot of Firefox in the `about:config` page. The search bar has the text `layout.does.not.exist` and below is a form to add a new preference with that name. One can determine this is a form to add a new pref because it has a set of radios for the type (Boolean, Number, String) and a `+` button with the tooltip `Add`. A screenshot of Firefox in the `about:config` page. The search bar has the text `layout.css.anchor-positioning.enabled` and below is a result for an existing preference with that name. One can determine this is an existing pref because it does _not_ include the form to set this prefs type (Boolean, Number, String), nor does it have the `+` button, and instead it has the default value of `false`, and a button to reset to the default value.
July 18, 2025 at 10:45 AM
keithamus.social
I did a thing.

These are all the steps (with citations) each of the browsers take to determine if a element is really a
element or if it's just sparking layout.

deploy-preview-2576--wai-aria.netlify.app/html-aam/#el...
An absolutely gargantuan screenshot of the spec prose available on https://deploy-preview-2576--wai-aria.netlify.app/html-aam/#el-table
July 16, 2025 at 5:28 PM
element is really a
element or if it's just sparking layout.

deploy-preview-2576--wai-aria.netlify.app/html-aam/#el...
keithamus.social
Hot off the presses! Firefox Nightly (www.mozilla.org/en-GB/firefo...) adds the new :heading pseudo! Easily style all headings, or use nth-child-like AnB syntax to select a range of headings! Needs `layout.css.heading-selector.enabled` flag enabled. Try it out and let me know your thoughts.
A screenshot of Firefox Nightly, with the Codepen https://codepen.io/keithamus/pen/wBaZVaX open. The page showing 6 heading levels, showing the CSS, HTML and the rendered page. Each heading is styled differently using the provided CSS selectors, `:heading` (which styles all headers), `:heading(-2n+3)` (styles h1 and h3 elements), `:heading(5, 6)` (styles the h5 and h6 elements). Another Firefox Nightly window is open, showing the `layout.css.heading-selector.enabled` flag is set to `true`, making the rendered page styled using the new selectors.
July 1, 2025 at 3:13 PM
keithamus.social
Nice! Mines in a half-way state because I recently decommissioned some machines when I upgraded from a synology+pis to a bigger NAS, so here is the current state:
June 7, 2025 at 12:12 PM
keithamus.social
Lots of sites have this "hovercard" style pattern on links which shows you a cut-down preview of the page behind the link - often times with additional interactions.

I wonder if anyone has any more examples? Especially sites which do this (display a rich tooltip) on non-links.
A screenshot of a "Hovercard" on GitHub, showing the "W3C" org avatar hovered over, which has popped open a rich tooltip showing more information about the org - including their location, member count, the number of repositories, and their verified status. A screenshot of the Wikipedia "popover" article. The link "Yorkshire Pudding" has been hovered, which has displayed a preview-card with a small except from the Yorkshire pudding page, including the image on that article. Hovering over a username on mastodon renders a "hover card" - in this case hovering over the avatar of user "keithamus" shows the username, handle, description, as well as links and follower count - and an "edit profile" button.
April 28, 2025 at 2:12 PM
keithamus.social
Browsers used to have a feature where you could add new context menu items. Is this worth reviving? Yes or No? Would you use it as a developer? What use cases do you have? Would you want this as a user?
A screenshot of a website's context menu, with additional custom menu items that the website has provided - a "Follow" option and a "Chat" option.
April 28, 2025 at 2:03 PM
keithamus.social
Like the element? Annoyed it doesn't fire `beforetoggle` and `toggle` events? It's coming! Firefox & Chrome support, but coming very soon in Opera & Safari.

I wrote a polyfill for it github.com/keithamus/di...! You can use it in all browsers today!
A screenshot of the browser compatibility table for `beforetoggle` event. On dialog elements this is supported in Chrome 132, Edge 132, Firefox 133, but flagged in Opera 117 and not yet supported in Safari.
February 16, 2025 at 10:40 PM
keithamus.social
Yikes. Not even 650 women responding to this survey?

State of JS or State of White Mans opinions amirite?
December 12, 2024 at 2:53 PM