iiinova — where your digital self keeps evolving

Jakob E @jakob-e.bsky.social · 30/09/2026

I use it for data mapping, tooling and all the config-git-npm-(other stuff)-hell we were too afraid not to jump on board (because feeling cool/safe). But I mostly use it for search to gather relevant sources (sorry google you lost me at 99 ads)

000

(forgot the obvious none default 🙈)

Side note I think I would have preferred an attribute implementation (I'm sure there are good reasons why not) <iframe allow-autosize="both/block/inline">

241

@bram.us Might be related to this bsky.app/profile/jake...

Oh that would explain the issue I had yesterday 👍 bsky.app/profile/jako...

Jakob E @jakob-e.bsky.social · 28/09/2026

The main issue with postMessage is it requires script on both ends. In a lot of content management systems it is (practically) very hard to do on the parent because it requires devs (IT) to be involved. So yes it is mostly an organisational obstacle but boy have I spent a lot of time on this

150

PS. I'm running Version 154.0.8037.58

100

Jakob E @jakob-e.bsky.social · 28/09/2026

I'll give it a try later. I tried to trigger the requestSize on window resize but couldn't make it work. I also tried the linked demo typing in a longer text then narrowed the window to cause the textarea to grow - on submit the text is added but the internal scroll remains 🤗

Jakob E @jakob-e.bsky.social · 28/09/2026

Works pretty well also without flags (latest chrome) 😀 Small (maybe) bug in when combined with field-sizing: content. When resizing window causes input to grow. Not sure if it is related to frame-sizing or field-sizing (maybe @bram.us knows)

Small (maybe) bug in responsive iframe sizing (chrome 154)

I guess it depends on use case. For projects that are not demos I prefer extending support in tiers e.g. progress => tan atan2 => JS polyfill That makes tree shaking easier and in this case progress comes with free documentation 😁

...by compatible I mean computed values

100

For other (and mixed) units you need to cast (@property) the offset and delta components before the tan atan2 division part. This ensures compatible lengths Silly example (chrome 85, firefox 128, safari 16.4)

PS. the --max: var(--min) is not super well documented. It allows --max to use the value of --min if not passed font-size: --fluid(2rem); would be fixed

000

...or as a one-liner (because we love that 😉)

120

@kevinpowell.co you could also consider including 'the future way' for when css functions are supported 🙂

Fluid CSS function based on viewport progress

120

Good news I think we're going to keep tan atan2 around for a few more years until we got a solid browsersupport 😉

(ment to say he deserves 🙈)

Fluid Typography with progress()

If you haven’t read @matthewmorete.com’s (yes part of this conversation 😉) article make sure to do so - it deserves a lot of credit blog.master.dev/fluid-typogr...

blog.master.dev

With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past.

331

Fluid Typography + Progress

... it also allows negative growth e.g. wider letter-spacing on smaller screens codepen.io/jakob-e/pen/...

codepen.io

...

160

I love it for typography. It makes it so much easier to calculate a numeric progress without --vp-delta, --vp-offset, tan(atan2()) @property and what have you. Clamp and vw are OK for lengths but calc and progress allows unitless, percentage etc. to be used as min max value e.g. fluid line-height

131

Didn't know about the comma separated names 😀👍 What I ment was they act as min-max queries so e.g. @media(min-width: 0) { container-name: mobile; } would only work until @media(min-width: 30rem) { container-name: tablet; } takes over unlike @media(min-width: 0) {...} that would work on everything

Changed to id (also saves a bit of <> sanitation 😉)

100

Updated - something like this?

100

I think I got something working - added a status column with a webstatus link if found - Thanks 🙂

100

Great idea 👍 - will give that a try

100

All three are great for a combined mapping (including sub-features). I made a little prototype tool to test features against browser targets css.franklyone.com/support/

css.franklyone.com

CSS Feature Support

100

...or have a bit of everything 😉

from, to and is breakpoints using css toggles

000

...In case you don't want 'min-max' breakpoints you can use css toggles - now you just need to remember order matters.

'from' breakpoints using css toggles and container style

100

Jakob E @jakob-e.bsky.social · 23/09/2026

This works - just be aware styles won't carry over the way media queries does (same for the style() version)

non overlapping breakpoints using name-only containers

240

Nice 😎 For even more scroll-feature-maxxing you could also use scroll-target-group and :target-current to set navigation highlights

CSS snippet showing scroll-target-group for highlighting links

Jakob E @jakob-e.bsky.social · 22/09/2026

Based on this groundwork it will be awesome 👏

000

Jakob E @jakob-e.bsky.social · 22/09/2026

I think I need to step up my prototyping game This is wild - fantastic job @utilitybend.com 🚀 brechtdr.github.io/enhanced-ran...

brechtdr.github.io

<rangegroup> proposal — Open UI

Jakob E @jakob-e.bsky.social · 21/09/2026

Funny how in the early days of programming it was considered a job for women. Then someone found out we should move fast and break stuff… and here we are. I love CSS is still the language too hard for ‘the dudes’

Jakob E @jakob-e.bsky.social · 20/09/2026

Hahaha, guess it becomes a question of context size when I need extreme coverage 😂

Jakob E @jakob-e.bsky.social · 20/09/2026

I thought the cos was quite clever - didn't think of that My non-joke take would be misusing typed arguments to force mod computation 🤗

/* (mis)using typed arguments to trigger computation */
@function --IsEven(--int <integer>, --mod <integer>: 0) {
--mod: mod(var(--int), 2);
result: if(style(--mod: 0): ;);
}

101

Jakob E @jakob-e.bsky.social · 20/09/2026

God I wish there was an easier way to do this

CSS version of the classic IsEven method ;)

4141

Jakob E @jakob-e.bsky.social · 19/09/2026

Looks like we got more info 😊 chromestatus.com/feature/5199...

chromestatus.com

Chrome Platform Status

Jane Ori 💚 CSS Runner 👩‍💻 @janeori.propjockey.io · 19/09/2026

Reposted by Jakob E

This is as close to a cry for help that you'd see from me. I need work. I need money for shelter and food in the meantime. I've run out.

14435

Jakob E @jakob-e.bsky.social · 14/09/2026

Such a shame @digitalocean.com - taking over one of the greatest CSS resources (and dedicated people like @geoffgraham.me) just to use it like a temporary add campaign (now for the second time) 😞

Bart Veneman @veneman.dev · 14/09/2026

Reposted by Jakob E

Go check this out! Several early testers found it pretty helpful and it gave them some good insights into some CSS features that they were using in a non-progressively enhanced way.

0134

Jakob E @jakob-e.bsky.social · 10/09/2026

I was thinking about selling my apartment to buy one - then I can call my friends and ask them to sleep on their couch

020

Jakob E @jakob-e.bsky.social · 10/09/2026

Just took a look at Baseline Overview 🚀 A minor thing that might be worth a note. Support data can look skewed because support is not confirmed - e.g. cursor shows limited support because you know fingers on mobile 😉 (limited is also shown on caniuse)

Jakob E @jakob-e.bsky.social · 09/09/2026

No stress 🤗 - haven’t looked into Doiuse but (now I will) just a couple of things I threw into a PostCSS-split-out-legacy-thingy to help out on an old spaghetti project 🍝