@kizu@front-end.social
@kizu@front-end.social avatar

kizu

@kizu@front-end.social

Inventing weird CSS things.

Frontend engineer working on Datadog's design system.

An invited expert to CSSWG.

Ask me about: #CSS, #Frontend, #DesignSystems

Located in France. He/him.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

kizu, to random
@kizu@front-end.social avatar

I remember when I first saw the scrollbar-gutter property, I thought that it was a very clever thing. It was not. I wish it was.

Basically, I want a “stable-after-shown” value or something:

  • If there is no overflow: do not reserve the gutter.

  • Once the container ever overflows during the lifetime of the page, show the gutter.

  • Now, if the overflow goes away, the gutter will stay.

kizu,
@kizu@front-end.social avatar

@simevidas I don't care about the content width, I care about the circularity and the UI junk in this case. I do not want to reserve space for something that never happens, but if it happens, then ok, we just go with the stable behavior.

kizu, to random
@kizu@front-end.social avatar

I wish it was possible to insert the same element into multiple slots in web components.

Given there are other use cases for the “duplication” of something in DOM (see the selectedoption in the styleable selects as an example — https://open-ui.org/components/selectlist/#the-selectedoption-element), I wonder if we need this as a concept in DOM in general, and if this was ever proposed anywhere.

It would be awesome to be able to create a clone of an element, with an ability to automatically mirror all or some of the attributes.

kizu, to CSS
@kizu@front-end.social avatar

New post: “Recent CSS Bookmarks 16”

https://blog.kizu.dev/recent-css-bookmarks-016/

Another big batch of bookmarks: more than a month worth of them.

As usual, with that number of them (32!), I grouped them into eight sections: Colors and Themes, CSS Layouts, Typography, Future CSS, Selectors, Shapes and Effects, Everything Else and My Articles.

5t3ph, to CSS
@5t3ph@front-end.social avatar

Soooo... who is attending Day, the Accessibility Club Summit, or both?

kizu,
@kizu@front-end.social avatar

@utilitybend @5t3ph Same; I wish CSS Café and the Accessibility Club were not conflicting with their times :blobcatcry:

Like, Café usually ends quite early, I think it could've been possible to start the Club a bit later, so people would have an opportunity to go to both, but alas.

kizu, to Typography
@kizu@front-end.social avatar

We really need to gather various #typography related #CSS properties that are scattered across different browsers without full support (or with just partial support) and make it into an #interop2025 focus area.

Like ascent-override (please, Safari!)

Or font-size-adjust (come on, Chrome!)

Or… initial-letter (hey, Firefox!), though, there are also so many ::first-letter issues!

Or text-box-trim & text-box-edge (ok, these are only there in Safari TP)

And so on, and so forth.

kizu, to CSS
@kizu@front-end.social avatar

#CSS tips for understanding and memorizing alignment stuff.

  • align vs justify: think of an inline flow, where justify keyword of text-align controls the text in an inline direction. And for align think of vertical-align, which controls it over the block axis.

  • items vs content: an “item” is something that can be controlled by itself, via -self properties. content is a single entity, where you align the whole chunk of things, without a way to override it per item.

kizu, to random
@kizu@front-end.social avatar

I really don't like the JS API of the view transitions, with the necessity to wrap all the actions in the startTransition, rather than having an ability to manually mark the “before” and “after” points. Like, why don't we have an endTransition or something similar?

kizu, to random
@kizu@front-end.social avatar

Let's say I want to have a web component.

Whenever I use it, I would like to provide a custom callback to run in its context, defining it in HTML.

Is there an idiomatic way to do so? The way I'm thinking of is to use currentScript:

<my-element>
<script> document.currentScript.myCallback = () => console.log('Hey!');</script>
</my-element>

And then call this myCallback from inside the connectedCallback.

Is there anything better (apart from using a unique id for this)?

kizu,
@kizu@front-end.social avatar

@ayo Think of the JSX ability to pass any callback to a component via a prop — what I want is something like that. If such a script is static, without any server-side interpolations, then I don't see an issue?

a11yMel, to random
@a11yMel@front-end.social avatar

I always want to start conversations about WCAG/guidance changes that I would like to see in the A11y Slack, but I feel like most folks want to talk about compliance instead.

For example: I want a link element to respond to the same keyboard keys as a button element does.

Another example: I think if you have alt="" and role="none" it is an acceptable demonstration of author intent and should not fail validators.

kizu,
@kizu@front-end.social avatar

@patrick_h_lauke @a11yMel I think the important part is “low-key” — I love the forgiving parts of HTML & CSS, but browser (and any other) dev tools must be more harsh towards any mistakes and expose them to developers, rather than silently eat up anything invalid.

If developers are ok with typescript shouting at them even though the underlying JS works, they will be ok with HTML & CSS shouting at them too when they do something wrong.

kizu,
@kizu@front-end.social avatar

@siblingpastry @patrick_h_lauke @a11yMel I agree that for the user it can continue to be silent, but it should not be silent for the author.

kizu, to random
@kizu@front-end.social avatar

@argyleink @Una @bramus I know that there are plans to ship anchor positioning as it is currently implemented in Canary, but could it be possible to prioritize at least https://issues.chromium.org/issues/339041275 (I just filled the issue, as I did not find one for tracking it)?

It was a feature that was working in previous implementations of anchor positioning, that is specified, and will make it much easier to use it for many cases.

kizu, to random
@kizu@front-end.social avatar

Cursed idea: a monospace font that uses contextual alternates for straight quotation marks ("" and '') and makes them to look like curly ones (“” and ‘’).

Also, programming languages should start allowing curly quotation marks anywhere they allow regular ones.

yuanchuan, to random
@yuanchuan@vis.social avatar

📝 Time-based CSS Animations
https://yuanchuan.dev/time-based-css-animations

kizu,
@kizu@front-end.social avatar

@yuanchuan This is great!

A nice piece of a puzzle; I can see how it could potentially be used for things like syncing different animations/transitions on the page, and maybe even doing the elusive distance-based length of a transition (though, in that case, we'd probably need something to first read the distance, like scroll-driven animations).

kizu,
@kizu@front-end.social avatar

@yuanchuan Also, it appears that Safari does not like the first example with the counter():

  1. It blinks from 0 to its value; not sure what is causing this. It might be a bug worth reporting.

  2. It seems to have a built-in limit on how often the ticks happen: in Chrome and Firefox it is smooth, in Safari it ticks by 50.

kizu, to CSS
@kizu@front-end.social avatar

Spatial navigation¹ and reading-order² in when?

Especially, reading-order should be implemented by all browsers before masonry or any other additions to layout.

  1. https://drafts.csswg.org/css-nav-1/
  2. https://drafts.csswg.org/css-display-4/#reading-order-items
kizu, to random
@kizu@front-end.social avatar

Wanted to write a post about masonry, grids, and one-directional layouts, but there is too much noise around it, and I don't have enough spoons to properly integrate my thoughts into all of that.

I have an idea for a proposal that I like (different from the existing ones in some aspects, similar in others), but I don't have the resources to express it properly. Oh, well!

In short, we should be able to make any grid areas one-dimensional, regardless of masonry. That's it.

kizu,
@kizu@front-end.social avatar

Masonry, then, will be just a variation of a “dense” grid-auto-flow.

Most cases of one-dimensional grids that I always wanted to achieve were not related to masonry itself. Starting thinking about them from masonry seems wrong, but I think this ship did already sail. If we will ever want to actually have one-dimensional areas in grids, we'll need to retrofit them in whatever we will get with the masonry.

kizu, to random
@kizu@front-end.social avatar

CSS-only in-page view transitions when.

simevidas, to random
@simevidas@mastodon.social avatar

In CSS, width: fit-content does not work on multi-line text that has text-wrap: balance, and that’s a problem for elements with a visible box (background, border, etc.); it’s “incredibly hard to work around”

https://github.com/w3c/csswg-drafts/issues/191#issuecomment-2072372597

What are the workarounds?

kizu,
@kizu@front-end.social avatar

@css @simevidas yeah, a JS solution without cyclic dependencies requires multiple passes, each time restarting the calculation from scratch, and getting too complicated when you want several elements like this participating in the same layout (like multiline menu items)

bramus, to random
@bramus@front-end.social avatar

It's exciting to see Firefox start working on @ scope.

With it, you can limit the reach of your selectors to only a certain subtree or slice of the DOM: https://developer.chrome.com/docs/css-ui/at-scope

(And prelude-less scope also rocks! 🤩)

Supported as of Chrome 118 and Safari 17.4.
https://botsin.space/@intenttoship/112293813944847835

kizu,
@kizu@front-end.social avatar

@bramus There were some unexpected but fun use cases for scope that I stumbled upon, can't wait to test it in Firefox properly!

simevidas, to random
@simevidas@mastodon.social avatar

Re https://tonsky.me/blog/centering/, is it really worth fixing these things? What do you achieve by spending time and money to fix these details, other than making users slightly less annoyed by your design? Maybe these details are not fixed because they don’t really matter that much. Have you ever stopped using an app because a button or icon was slightly misaligned?

kizu,
@kizu@front-end.social avatar

@simevidas The fact is: people are spending time trying to fix these, PMs create tickets, developers do the “work”. While a lot of this is possible to fix in one way or another, thinking about these problems on a higher level allows us to see if there are ways we could attempt to fix it even better. What is missing in CSS that could fix some of these edge-cases? How awkward the existing solutions could be?

kizu, to CSS
@kizu@front-end.social avatar

New article: “Alternating Style Queries”.

https://kizu.dev/alternating-style-queries/

With the container style queries on the horizon, it is a good time to do more experiments with them.

In one of my recent experiments, I found out that style queries will allow us to do what the currently specified (but not implemented by anyone) function toggle() was supposed to.

kizu,
@kizu@front-end.social avatar

@iamdtms I am not sure if I understand your question. If it is about the use cases for style queries in general — at the beginning of my article, there are four links with the basics of them, some of them having multiple practical examples.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • JUstTest
  • kavyap
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • osvaldo12
  • khanakhh
  • Youngstown
  • mdbf
  • slotface
  • rosin
  • everett
  • ngwrru68w68
  • Durango
  • anitta
  • InstantRegret
  • GTA5RPClips
  • cubers
  • ethstaker
  • normalnudes
  • tacticalgear
  • cisconetworking
  • tester
  • Leos
  • modclub
  • megavids
  • provamag3
  • lostlight
  • All magazines
    •