Sign in

Maikel Krause

@maikelkrause.bsky.social
504 followers 1.4K following 325 posts

Doing web stuff github.com/fortanix/baklava

PostsRepliesMedia
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 · 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 · 22/09/2026
No more hacky workarounds for #CSS unit division 🥳
010
Maikel Krause @maikelkrause.bsky.social · 18/09/2026
The future of the web is squircles
000
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
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 · 01/09/2026
#CSS `progress()` is now baseline! 🥳 I was trying to see if this could be used as a workaround for the lack of typed arithmetic (unit division) in Firefox, and it does work, sort of. codepen.io/editor/maike... (And yes I know there's already the `tan2(atan())` trick, but that has its own bugs.)
codepen.io
CSS typed arithmetic using progress()
A code demo by Maikel Krause created on CodePen
1124
Maikel Krause @maikelkrause.bsky.social · 22/08/2026
#caturday
A cat lying on his blanket
050
Reposted by Maikel Krause
Bramus @bram.us · 18/08/2026
Syntax aside, would you want layers that can win from unlayered styles as Dave describes here? Favorite this post to cast your vote. RT to reach more people.
3135
Maikel Krause @maikelkrause.bsky.social · 15/08/2026
comicss.art/comics/254/
comicss.art
comiCSS #254: Border Collie
Four crops of the same photo: border collie (the image occupies the whole square), padding collie (the image has a narrow blank space around it, less of the dog is seen), content collie (the blank spa...
000
Maikel Krause @maikelkrause.bsky.social · 07/08/2026
So satisfying. 😎 #HTML focusgroup-based menu component, fully keyboard accessible with minimal #JS. JS manages the selection state, and implements type-ahead search (e.g. hitting "A" cycles through items starting with that letter).
130
Maikel Krause @maikelkrause.bsky.social · 22/07/2026
👀
000
Reposted by Maikel Krause
IntentToShip @intenttoship.dev · 16/07/2026
Blink: Intent to Prototype: CSS mixins
groups.google.com
Blink: Intent to Prototype: CSS mixins
Blink: Intent to Prototype: CSS mixins
03510
Reposted by Maikel Krause
IntentToShip @intenttoship.dev · 09/07/2026
Gecko: Intent to prototype: margin-trim
groups.google.com
Gecko: Intent to prototype: margin-trim
Gecko: Intent to prototype: margin-trim
1204
Reposted by Maikel Krause
Jake Archibald @jakearchibald.com · 29/06/2026
There's an ideal set of sizing constraints for custom <select>, but the CSS is a bit tricky. Here's how to make it work, and a tour of new CSS features along the way. jakearchibald.com/2026/goldilo...
jakearchibald.com
The Goldilocks customizable select height
The 'ideal' sizing is more complicated than you think…
1331055
Maikel Krause @maikelkrause.bsky.social · 19/06/2026
Does #HTML need a `<vr>` element? To complement `<hr>`. Writing `<hr aria-orientation="vertical">` feels odd, and using a `<div role="separator" aria-orientation="vertical">` even worse.
000
Reposted by Maikel Krause
Project Wallace @projectwallace.com · 14/06/2026
Okay, so I learned a thing about Grids today. Many of my components have these declarations to make spacing nice: `display: grid; gap: 2rem`. Apparently, `grid-template-columns` is now implicitly set to `auto`. Yada yada, 2018 @chriscoyier.net has my back! css-tricks.com/preventing-a...
css-tricks.com
Preventing a Grid Blowout | CSS-Tricks
Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr.
131
Maikel Krause @maikelkrause.bsky.social · 10/06/2026
master.dev/blog/demysti...
master.dev
Demystifying the View Transition Pseudo Tree
Each pseudo element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting though, which makes it a little hard to see what’s actually happening under th...
000
Maikel Krause @maikelkrause.bsky.social · 08/06/2026
- Customizable select(!) - Unprefixed `stretch` keyword - #CSS `:heading()` - Transform-aware anchor pos - Anchor pos sibling chaining fix (got bit by this) - Top-level await fixes developer.apple.com/documentatio...
developer.apple.com
Safari 27 Beta Release Notes | Apple Developer Documentation
Released June 8, 2026 — 27.0 beta (20625.1.18)
000
Maikel Krause @maikelkrause.bsky.social · 08/06/2026
Oooh, #CSS customizable <select> in Safari 27! Best news out of WWDC webkit.org/blog/17974/w...
webkit.org
Web Technology Sessions at WWDC26
Welcome to WWDC26.
030
Reposted by Maikel Krause
dan @danabra.mov · 05/06/2026
100% agree. if i see “chore” in commit log, im judging you
sumnerevans.com
Stop Using Conventional Commits
You’ve almost certainly encountered Conventional Commits before. It may have reared its ugly head in the changelog of an open source project you’ve used. It may have been the enforced commit format fo...
1815221
Reposted by Maikel Krause
Firefox for Web Developers @webdevs.firefox.com · 19/05/2026
Firefox 151 is out now, and brings with it some tasty new web platform features: 🎉 Container style() queries 🎉 Web Serial API 🎉 Document Picture-in-Picture API 🎉 keyboardLock on requestFullscreen …and more! developer.mozilla.org/en-US/docs/M...
developer.mozilla.org
Firefox 151 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 151 that affect developers. Firefox 151 was released on May 19, 2026.
610921
Maikel Krause @maikelkrause.bsky.social · 17/05/2026
@lukewarlow.dev would you happen to know if Chrome still has some restrictions when it comes to appearance-base `<select>` as list box styling? It seems my flex styling here isn't applying and I can't find a good reason why it wouldn't. codepen.io/maikelkrause...
codepen.io
Customizable select: listbox
...
100
Maikel Krause @maikelkrause.bsky.social · 29/04/2026
Wonder if you could use this make an IDE with just a single <textarea> (no contenteditable, no more inserting a huge amount of <span>s)
000
Maikel Krause @maikelkrause.bsky.social · 28/04/2026
Great article showcasing what happens when you try to play whack-a-mole to "sanitize" something like an SVG document. muffin.ink/blog/scratch...
muffin.ink
The woes of sanitizing SVGs
000
Reposted by Maikel Krause
James @43081j.com · 27/04/2026
we launched a new @e18e.dev mini-site today! replacements.fyi acts as a super simple frontend to the module replacements data. we noticed the data wasn't very discoverable, so this is a focused tool for when you want to quicky look up if something has alternatives (esp. native ones!)
e18e.dev
replacements.fyi - A new module replacements website
A look at the new module replacements website and the collaboration that went into it
412230
Maikel Krause @maikelkrause.bsky.social · 27/04/2026
www.smashingmagazine.com/2026/04/bug-...
smashingmagazine.com
The “Bug-Free” Workforce: How AI Efficiency Is Subtly Disrupting The Interactions That Build Strong Teams — Smashing Magazine
AI tools are eliminating the need to “bug” colleagues for help, but the informal interactions they replace are the very scaffolding that builds team trust, belonging, and innovation. Casey Hudetz and ...
000
Reposted by Maikel Krause
IntentToShip @intenttoship.dev · 25/04/2026
Blink: Intent to Ship: Focusgroup
groups.google.com
Blink: Intent to Ship: Focusgroup
Blink: Intent to Ship: Focusgroup
34621
Maikel Krause @maikelkrause.bsky.social · 23/04/2026
WebKit support for #CSS advanced attr(), and <dialog closedby>
010
Maikel Krause @maikelkrause.bsky.social · 13/04/2026
Yesss
010
Maikel Krause @maikelkrause.bsky.social · 13/04/2026
It's pretty common to get UX requests for "clickable elements" that'd cause nested interactive elements. Lately I've been big on this "faux-nested" pattern: piccalil.li/blog/accessi... Created a quick demo of the same idea but spanning table columns using #CSS anchor-pos: codepen.io/maikelkrause...
codepen.io
Table hit area expand using anchor positioning
...
020
Reposted by Maikel Krause
Frontend Dogma @frontenddogma.com · 07/04/2026
The Great CSS Expansion, by @pavellaptev.bsky.social (@gitbutler.com): blog.gitbutler.com/the-great-css-ex… #css #anchorpositioning #popovers #modals #animations
blog.gitbutler.com
The Great CSS Expansion
CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.
032
Reposted by Maikel Krause
IntentToShip @intenttoship.dev · 06/04/2026
Blink: Intent to Prototype: CSS URL request modifiers
groups.google.com
Blink: Intent to Prototype: CSS URL request modifiers
Blink: Intent to Prototype: CSS URL request modifiers
082
Reposted by Maikel Krause
Chrome for Developers @developer.chrome.com · 03/04/2026
Stop writing boilerplate JS for accessible menus. We’re proposing a new HTML primitive: focusgroup. It brings native keyboard arrow-key navigation directly to the platform. Tell us what you think → goo.gle/4uvFIkz 🧵(1/3)
Request for developer feedback
36713
Maikel Krause @maikelkrause.bsky.social · 28/03/2026
@rachelandrew.bsky.social Noticed a quick typo under "Grid lanes" here where it mentions "Safari 16.4" instead of 26.4. web.dev/blog/web-pla...
100
Maikel Krause @maikelkrause.bsky.social · 21/03/2026
I almost forgot it's #caturday
040
Maikel Krause @maikelkrause.bsky.social · 21/03/2026
I found a neat little way to gauge our app for #a11y issues: completely disable all #CSS and see how well the app still works. When everything uses proper links/buttons, dialog, details, popover, etc. everything degrades pretty well in UA styles nowadays! The parts that don't immediately stand out.
010
Reposted by Maikel Krause
Kevin Babbitt @kevinbcmu.bsky.social · 18/03/2026
POLLS: The CSS Working Group is looking for author feedback on two topics related to CSS Gap Decorations. Questions below. For background information on Gap Decorations, see the explainer: github.com/w3c/csswg-dr...
github.com
11918
Maikel Krause @maikelkrause.bsky.social · 18/03/2026
I actually never realized you couldn't do this already
001
Reposted by Maikel Krause
Arpit Agrawal @arpit.codes · 14/03/2026
Today I learned that when using the new CSS `@scope` rule, inherited properties leak through the donut scope. I wrote more about it on my blog. arpit.blog/articles/202...
arpit.blog
Inherited properties leak through the donut scope - Articles | Arpit's Blog
The online home of Arpit Agrawal, a web designer-developer from India.
221
Maikel Krause @maikelkrause.bsky.social · 13/03/2026
Why does @voidzero.dev get their own special YouTube channel URL, it's clearly unfair
A screenshot of a YouTube video page showing how hovering over the "VoidZero" channel name links to a "javascript:void(0);" URL.
0191
Reposted by Maikel Krause
Vite @vite.dev · 12/03/2026
⚡️ Vite 8.0 is here! The most significant architectural change since Vite 2. ⏬ Powered by @rolldown.rs bringing faster production builds and more consistency 🛤️ New features such as tsconfig paths and emitDecoratorMetadata support vite.dev/blog/announc...
vite.dev
Vite 8.0 is out!
Vite 8 Release Announcement
639993
Reposted by Maikel Krause
Una Kravets @una.im · 05/03/2026
Open UI has been working on speccing out the focusgroup attribute: a declarative way to support roving focus & add keyboard nav to composite widgets like toolbars/menus We'd love your feedback! Learn more & see open questions: developer.chrome.com/blog/focusgr... H/t to Edge folks for prototyping
developer.chrome.com
Request for developer feedback: focusgroup  |  Blog  |  Chrome for Developers
Try out focusgroup and comment on the proposal.
87423
Reposted by Maikel Krause
CSS by T. Afif @css-only.dev · 02/03/2026
It seems we can now customize the select element, right? right?! Demo: codepen.io/t_afif/pen/P... via @codepen.io
1238685
Reposted by Maikel Krause
kaiserkiwi @kaiser.kiwi · 02/03/2026
»It’s almost like we need to develop tools to debug the tools we’re using to abstract what the web already provides — all for the sake of running away from the “pain” of writing standard CSS.« That's exactly how I feel about all this CSS-in-JS non-sense. www.smashingmagazine.com/2026/02/css-...
smashingmagazine.com
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions — Smashing Magazine
Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new `@scope` rule finally give developers the confidence to wri...
052
Maikel Krause @maikelkrause.bsky.social · 02/03/2026
I wonder if there's already a production grade code syntax highlighting library (either read-only or editor) that uses #CSS Custom Highlights. Like described here: pavi2410.com/blog/high-pe...
pavi2410.com
High-Performance Syntax Highlighting with CSS Highlights API
Learn how to implement blazing-fast code syntax highlighting using the CSS Custom Highlight API without creating DOM nodes for each token.
000
Maikel Krause @maikelkrause.bsky.social · 01/03/2026
Created a #CSS-only stepper component using anchor positioning to draw the connecting lines between the steps: codepen.io/maikelkrause... (Unfortunately, it's broken in Safari at the moment in a quite interesting way. More details in the reply.)
Screenshot of a codepen showing a demo of a stepper component
100
Maikel Krause @maikelkrause.bsky.social · 28/02/2026
This is a few years old by now, but I just discovered this Bad Apple demo by Delan Azabani using only some text and #CSS Custom Highlights: bucket.daz.cat/work/igalia/... Works in all browsers now! Though the performance on Firefox/Safari is a bit laggier than Chrome for me.
bucket.daz.cat
010
Maikel Krause @maikelkrause.bsky.social · 26/02/2026
#CSS shape() has become baseline thanks to the release of #Firefox v148 🥳 This tooltip experiment I created a year ago now works cross-browser: codepen.io/maikelkrause...
codepen.io
CSS-only tooltip using shape()
...
020
Maikel Krause @maikelkrause.bsky.social · 22/02/2026
#CSS reference combinators (`label /for/ input`) look hype
120