@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.

Jbasoo, to CSS
@Jbasoo@mastodon.social avatar

I was kinda hoping calc-size() could resolve intrinsic sizes inside math functions but it doesn't seem to (at least in Chrome Canary). Not sure if that's a bug or if Friday afternoon isn't the best time to try to understand draft specs 🤯

I don't think it would be a common use case, but it would be handy to be able to use it to solve things like this https://mastodon.social/@Jbasoo/110593686096922129

kizu,
@kizu@front-end.social avatar

@Jbasoo It is possible! https://codepen.io/kizu/pen/vYwxyez

calc-size(max-content, round(up, size, var(--grid-size)))

The way it works: in the first argument is the intrinsic value you want to use, and in the second is the calculation that you intend to do with it, where a special size keyword becomes available as the “variable”.

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

If I may bother @cheeaun about @phanpy again - you know I love it :)

Is there a hint as to how the post/reply language thing works?

To me it seems it's set by default by the OP for the whole thread, and if it's a German OP their posts are set to German whether they are typing German or English or other languages. This is fine - but my replies to them are automatically marked as German too.

kizu,
@kizu@front-end.social avatar

@cheeaun @sarajw idea for a setting (ideally, on by default): if a language is not in a list of the ones I speak, never use it for my replies but revert to my default one. Ideally, with some not obtrusive signifier that this did happen (a special style for the language button?)

Won't solve all the cases, but it happened enough that someone with a default language that I do not speak replied to me in English, making me go and change the language manually.

kizu,
@kizu@front-end.social avatar

@cheeaun @sarajw In the meantime, I just added this to my long list of the default mastodon client overrides, haha:

.compose-form:has(textarea:not([lang=en])) button[title*=lang] {
outline: 2px solid tomato;
}

(I use Phanpy on mobile, and use the official mutlicol client with tons of custom styles on the desktop; one day I will maybe write about them, haha)

bkardell, (edited ) to random
@bkardell@toot.cafe avatar

In the past 10 years, how many times have you switched your default/main browser?

kizu,
@kizu@front-end.social avatar

@bkardell ~4, not exactly sure, as I don't remember when I stopped using Opera 12.

Also, at some point my default/main browser became different on my work and home laptops, does this count? :)

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

Beware of dragons at the spicy edges of modern #CSS.

Familiarize yourself with "invalid at computed value time" and make use of support queries!

If using partially supported features, mix with caution and don't slip on browser testing or assume your browserslist-reliant tooling is sufficient.

kizu,
@kizu@front-end.social avatar

@5t3ph Oh yes, I think browser (and other) devtools should warn us when we use consecutive declarations thinking that there will be a fallback to the previous one, only to not notice a custom property used alongside some new syntax.

That said, hopefully in the future we will get a tool that will help with this in CSS. https://github.com/w3c/csswg-drafts/issues/5055

But, for now, we have to use intermediate custom properties, and wrap their definitions with @supports.

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

🎮 New CSS Game!

What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality!

Play "Super CSS Mario", the first ever CSS-Only game playable using your keyboard. Have fun! 🤩

✅ 0% JavaScript
✅ 100% CSS Magic

Demo: https://codepen.io/t_afif/full/OJYbVWP via :codepen: @codepen

Record yourself and show me your best attempt (No screenshots & no cheating 😈)

It's a Chrome (or Edge) only. I repeat, it's a Chrome-only experience.

Showing a demo of the CSS-only game linked in the post. A cool Mario game where you can collect gold coins using Keyboard.

kizu,
@kizu@front-end.social avatar

@css 5s. It needs to have a more precise timer :)

A video of a gameplay, where the character moves fast, especially vertically, finishing the level in 5s.

kizu,
@kizu@front-end.social avatar

@css Nope, page up + page down on the keyboard for the vertical movement :) Can do keyboard + trackpad in 4s when not using the trackpad for pre-positioning.

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

After 6000 years of written language, we’ve honed the craft so most languages can communicate effectively with only a few dozen characters.

After 60 years of digitally recorded language, we’ve thrown all discipline to the wind and added hundreds of thousands of unnecessary characters, including poop, dolphin, and an eggplant that means phallus.

kizu,
@kizu@front-end.social avatar

@keithjgrant Right,

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 #CSS 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 #CSS 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 #CSS 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
  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines
    •