Tobias Fedder

@tfedder.de

photography hobbyist and web dev always learning about the web blogging on https://tfedder.de/blog/

Working with CSS Grid (including Subgrid) I sometimes wish I could toggle gap-collapse for empty rows or columns. Nothing made it in here, one gap is fine, thank you. I am sure there would be horrible consequences for layout and comprehension (see margin collapse).

My plea to implementers/spec folks is if you’re gonna make non-submit buttons do something without JS add some CSS hooks so we can hide them when those features aren’t available.

I love that we have focusgroup in Chrome… but again similar to invoker commands… there’s no good way to use it as a progressive enhancement without JS for feature detection.

Would someone be kind enough to tell me what the result of this code is in Safari? ```html <style> [hidden].unhide { display: revert; } </style> <h1 hidden class="unhide">Hidden?</h1> ``` Is the myth of "Separation of Concerns" in HTML, CSS, and JS, dead yet?

Is the placement algorithm for grid lanes "wrong"? Is the auto-placement cursor helping or hurting the algorithm? drafts.csswg.org/css-grid-3/#... bsky.app/profile/matu...

CSS Grid Layout Module Level 3

drafts.csswg.org

Manuel Matuzović @matuzo.at · last mo.

I saw a great introduction to CSS Grid Lanes, aka Masonry Layouts, by @patrickbrosset.com at CSS Day 2026. I liked the versatility of its use cases, but I was also concerned that it's inaccessible by default. matuzo.at/blog/2026/gr...

Is the placement algorithm for grid lanes "wrong"? Is the auto-placement cursor helping or hurting the algorithm? drafts.csswg.org/css-grid-3/#... bsky.app/profile/matu...

CSS Grid Layout Module Level 3

drafts.csswg.org

Manuel Matuzović @matuzo.at · last mo.

I saw a great introduction to CSS Grid Lanes, aka Masonry Layouts, by @patrickbrosset.com at CSS Day 2026. I liked the versatility of its use cases, but I was also concerned that it's inaccessible by default. matuzo.at/blog/2026/gr...

Pro tip: don't enable experimental features in the browser/profile you use for surfing. Use a dedicated browser/profile for that. It will save you from a lot of confusion.

Hey you, do you have Firefox for Android and Firefox Focus installed on the same device? If so, do they use the same number of CSS pixels for the viewport? They differ on my device. So, now I am curious about that. Thanks.

ELI5: What is the benefit of pushing your site and your articles to your PDS, using the standard site lexicon? Well, except a bigger card, containing a button that does not lead to the post you wanted to share. I kinda get that.

The <template for="x"> syntax of the experimental out-of-order streaming API looked promising. But it seems that I can't misuse it to deduplicate blocks of HTML. I am coming to the conclusion that it deserves its own solution anyway. I hope the [for] on <template> won't be exclusive for streaming.

Interleaved HTML streaming
Does it work at all?
Yes. 😎
Can it be misused to reuse blocks of HTML?
Nope. 😞<!DOCTYPE html>
<html lang="en">
<title>Interleaved HTML streaming</title>
<h1>Interleaved HTML streaming</h1>
<p>Does it work at all?</p>
<?start name="placeholder">
  <p>Nope. 😭
  <p>Try enabling Experimental Web Platform features chrome://flags/#enable-experimental-web-platform-features</p>
<?end>
<p>Can it be misused to <b>re</b>use blocks of HTML?
<?start name="placeholder">
  <p>Nope. 😞</p>
<?end>
<!--<footer>
  Now it doesn't work at all — because of <em>security???</em>
  Make sure to insert your template in an element that your placeholder is a descendant of.
-->
<template for="placeholder">
  <p>Yes. 😎</p>
</template>