Sign in

Maikel Krause

@maikelkrause.bsky.social
511 followers 1.4K following 346 posts

Doing web stuff github.com/fortanix/baklava

PostsRepliesMedia
Maikel Krause @maikelkrause.bsky.social · 13/10/2026
dev.to/janeori/css-... You can now just divide units. Like what Jane mentioned at the start of the article.
dev.to
CSS Type Casting to Numeric: tan(atan2()) Scalars
In current browser implementations of CSS, you cannot divide by length types; calc(100vw / 5px) does...
110
Maikel Krause @maikelkrause.bsky.social · 13/10/2026
We have top layer at home
020
Maikel Krause @maikelkrause.bsky.social · 13/10/2026
#CSS typed arithmetic is now baseline in all browsers thanks to the release of #Firefox 158 today: developer.mozilla.org/en-US/docs/M... No more `tan2(atan2())` hacks 🙂
developer.mozilla.org
Firefox 158 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 158 that affect developers. Firefox 158 was released on October 13, 2026.
3132
Maikel Krause @maikelkrause.bsky.social · 11/10/2026
I switched away from Word pre-ribbon, but every time I'm forced to use it I end up frustrated and brute forcing my way through the various menus to try to find the thing I'm looking for.
100
Maikel Krause @maikelkrause.bsky.social · 11/10/2026
Well foc all of us I guess
050
Maikel Krause @maikelkrause.bsky.social · 11/10/2026
Thanks! > For the polyfill [...] Gotcha. I think I didn't hit this before because I unmount the element when it's not visible. > Also a since fixed bug [...] Didn't hit this either, but only because I'm still applying redundant `role` everywhere (since the polyfill doesn't support that well).
010
Maikel Krause @maikelkrause.bsky.social · 11/10/2026
> despite some hiccups with focusgroup + popover I'm using the polyfill and make heavy use of popover. Haven't hit any hiccups yet, but if you have some pointers maybe it will save me some headache in the future?
100
Maikel Krause @maikelkrause.bsky.social · 11/10/2026
I agree with pretty much all of these 🙂 Also you're the first (out of the ones you linked) that includes HTML focusgroup in their picks. This is my top ask also. I worry that the fact that the spec PR is still open will preclude this from being considered for Interop 2027... but fingers crossed.
150
Maikel Krause @maikelkrause.bsky.social · 09/10/2026
I wouldn't want it to be "no styling", I think it's more in line with `appearance: base` if there is at least a visual border. But the legend should be something simple and easy to reset, so no fancy border overlay (I'd be fine if it's just rendered inline in the box, maybe give it a bold font.)
000
Maikel Krause @maikelkrause.bsky.social · 09/10/2026
The UI improved a lot from what I remember last year. Appreciate the little ordering assist.
120
Maikel Krause @maikelkrause.bsky.social · 09/10/2026
I wonder if this would look nicer using something like what Apple Notes does. So that the calculation is always shown but the result is rendered after. Downside would be that the form `value` wouldn't work (could use a separate hidden input)? And maybe OpaqueRange to highlight the result?
Screenshot of Apple Notes with auto-calculation of the expression 2 + 2.
100
Maikel Krause @maikelkrause.bsky.social · 09/10/2026
Awesome! This is one my top wishlist items. Being able to calculate with sizing keywords opens up a lot of doors.
000
Maikel Krause @maikelkrause.bsky.social · 06/10/2026
I still use CSS Modules including name mangling, @scope doesn't really do away with that need. But @scope has lots of uses that are not just about preventing name conflicts.
010
Maikel Krause @maikelkrause.bsky.social · 06/10/2026
Here's my list: bsky.app/profile/maik...
110
Maikel Krause @maikelkrause.bsky.social · 06/10/2026
...also also, this bug in Firefox is kind of blocking a full roll out: bugzilla.mozilla.org/show_bug.cgi...
bugzilla.mozilla.org
2063991 - Element-backed pseudo-elements fail to match within @scope
NEW (nobody) in Core - CSS Parsing and Computation. Last updated 2026-09-24.
000
Maikel Krause @maikelkrause.bsky.social · 06/10/2026
For one, the codebases I've worked in are large enough that component/module names will sometimes conflict, so having a unique name per module is still important. But also, proximity is a bit of a weak condition in the specificity hierarchy, it can still result in conflicts.
100
Maikel Krause @maikelkrause.bsky.social · 06/10/2026
> I think (though have no empirical practice/data) that css `@scope` would solve the use case. I'm a huge fan of `@scope` and have lots of use cases for it (as seen here: bsky.app/profile/maik...). But it doesn't solve the need for name mangling for me.
100
Maikel Krause @maikelkrause.bsky.social · 06/10/2026
> I also don't like non-standard extensions to CSS. I don't like them either, and don't use them apart from `:global()` which is sometimes needed to opt out of name mangling. I'm also not a fan of some of the more esoteric CSS Modules syntax like `composes` or `@value`, I avoid those altogether.
010
Maikel Krause @maikelkrause.bsky.social · 06/10/2026
The name mangling is build-time, but I guess you're talking about changes to CSS/JS between builds? In the case of LightningCSS the hash is based on the file name so it's fairly stable. lightningcss.dev/css-modules....
010
Maikel Krause @maikelkrause.bsky.social · 06/10/2026
Just curious, what are your issues with CSS Modules? I have some gripes with it, but curious to hear your takes. I've settled on CSS Modules through LightningCSS (which supports a minimal version) just for the name mangling, minimizing, and bundling.
320
Maikel Krause @maikelkrause.bsky.social · 05/10/2026
Ooh. And finally a way to see and debug the IMCB?
110
Maikel Krause @maikelkrause.bsky.social · 03/10/2026
1000 is a bit much maybe but I've found big version numbers tend to help avoid the "v2 problem" of people being afraid to bump to a new major unless "it's worthy enough"
101
Maikel Krause @maikelkrause.bsky.social · 03/10/2026
#FronteersDarkMode was a blast, great talks and wonderful people, felt like old times. And I got to meet half my Bluesky feed 🙂
000
Maikel Krause @maikelkrause.bsky.social · 02/10/2026
Data point: I had bug reports from people using Bitwarden on Firefox because their password input popover logic breaks as soon as the web page has a popover of its own... (They're trying to force their popover to render over the website popover and failing.)
130
Maikel Krause @maikelkrause.bsky.social · 02/10/2026
I'll be there 🙂
020
Maikel Krause @maikelkrause.bsky.social · 01/10/2026
I've been thinking whether we could add additional styling for `::highlight()`. Currently it's limited to color, bg-color, text decoration, shadow, stroke. A common use case is a "pill" shape with border/radius. That could still be done without layout shifts perhaps? Though padding may be an issue
100
Maikel Krause @maikelkrause.bsky.social · 27/09/2026
Feels kinda validating since I had to fight to skip the whole CSS-in-JS thing entirely. CSS Modules are still the way to go.
000
Maikel Krause @maikelkrause.bsky.social · 26/09/2026
I think you'll be fine without the inert then.
011
Maikel Krause @maikelkrause.bsky.social · 26/09/2026
It would have an implicit role, e.g. <div> has an implicit role of "generic". What's the element type?
100
Maikel Krause @maikelkrause.bsky.social · 26/09/2026
What's the element's role? Is it focusable? If it's a presentational element I don't think you need to do anything.
110
Maikel Krause @maikelkrause.bsky.social · 25/09/2026
I'd love to be able to style it! (Hint hint customizable <select> in listbox mode? :) )
120
Maikel Krause @maikelkrause.bsky.social · 23/09/2026
And break my `border-image: fill 0 // var(--h) conic-gradient(rebeccapurple 0 0);`? How dare you
030
Maikel Krause @maikelkrause.bsky.social · 22/09/2026
No more hacky workarounds for #CSS unit division 🥳
010
Maikel Krause @maikelkrause.bsky.social · 20/09/2026
Taking a look at this list (which maybe isn't exhaustive, or at least is missing some newer ones like `popover`), the only exceptions seem to be aria-*, data-*, http-equiv, and accept-charset. That doesn't seem too bad. Maybe generalize it as http-*, accept-*. developer.mozilla.org/en-US/docs/W...
developer.mozilla.org
HTML attribute reference - HTML | MDN
Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
110
Maikel Krause @maikelkrause.bsky.social · 18/09/2026
Super excited to see customizable select roll out!
000
Maikel Krause @maikelkrause.bsky.social · 18/09/2026
The future of the web is squircles
000
Maikel Krause @maikelkrause.bsky.social · 17/09/2026
> Q1: The popover to show above the button or the ⓘ? Above the ⓘ. > Q2: The button to match `button:hover` when hovering the ⓘ? No.
000
Maikel Krause @maikelkrause.bsky.social · 17/09/2026
Gotcha. I didn't look at the new UA rules yet but I noticed some things in the screenshot like borders, box shadows, and optgroup label colors that I think weren't there before.
010
Maikel Krause @maikelkrause.bsky.social · 16/09/2026
I do something similar. I have a hard CSS reset and it messes up Storybook's UI. So donut selector that sh*t and then `all: revert-layer` from `@layer reset`. I've found so many little use cases like this for `@scope` it might be my favorite new feature in CSS.
020
Maikel Krause @maikelkrause.bsky.social · 16/09/2026
It undeniably looks better, but also the "before" version here wasn't actually meant to look good, right? It was meant to have as little CSS as possible so authors can easily style it themselves. I don't mind the new look, but it does mean I now need to manually opt out of these CSS rules myself.
120
Reposted by Maikel Krause
Geoff Graham @geoffgraham.me · 14/09/2026
📝 Why CSS-Tricks Has Been Quiet Lately (cc: @digitalocean.com @css-tricks.bsky.social ) geoffgraham.me/why-css-tric...
geoffgraham.me
Why CSS-Tricks Has Been Quiet Lately - Geoff Graham
Because I haven't published anything to it since August 31. And no one else has either. That's not a super long time to go silent but it is for a site that
811330
Maikel Krause @maikelkrause.bsky.social · 15/09/2026
Safari is the last browser to ship. And it's already in TP so hopefully won't be too long until it's in a release. I'm not sure about the test coverage though, I don't think there are tests on WPT. But if the test coverage is high for all browsers then this probably won't need an Interop effort.
000
Maikel Krause @maikelkrause.bsky.social · 15/09/2026
There's a lot of competition in the Interop 2027 proposals, but I hope we can make `OpaqueRange` a thing next year: github.com/web-platform...
github.com
OpaqueRange · Issue #1401 · web-platform-tests/interop
Description Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md The current Range interface methods do not support retrieving or creating ranges that rep...
141
Maikel Krause @maikelkrause.bsky.social · 15/09/2026
Done! github.com/web-platform...
github.com
OpaqueRange · Issue #1401 · web-platform-tests/interop
Description Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md The current Range interface methods do not support retrieving or creating ranges that rep...
010
Maikel Krause @maikelkrause.bsky.social · 14/09/2026
I noticed OpaqueRange isn't on the Interop 2027 proposals list yet. Do you think it's worth submitting? (As in, ready in terms of spec, WPT tests, etc.)
100
Maikel Krause @maikelkrause.bsky.social · 14/09/2026
I love it! This is exactly what I was imagining when I learned about OpaqueRange. The component seems to be working really well based on my quick testing. (There's a styling issue on the docs btw with the main text color.)
100
Maikel Krause @maikelkrause.bsky.social · 13/09/2026
I'm hoping with OpaqueRange support we can start calling these just "inputs". 🤞
120
Maikel Krause @maikelkrause.bsky.social · 03/09/2026
> customized built-ins *monkey paw curls* github.com/web-platform...
github.com
Customizable Built-ins, deprecate · Issue #1342 · web-platform-tests/interop
Description This might not be the "normal" way to use Interop, but I think this is something that should be actively discussed as we talk about the 2027 focus areas... https://html.spec.whatwg.org/...
100
Maikel Krause @maikelkrause.bsky.social · 03/09/2026
`border-image` is the worst offender in all of CSS I would wager. But it's so niche that it wouldn't make this list.
000
Maikel Krause @maikelkrause.bsky.social · 01/09/2026
Oh hey it's the man himself. Thanks for all your good work! 🙂
010