Weekly Bookmarks 2

Published on:

October 22, 2023

Categories:

CSS⁴⁰, bookmarks¹⁵

Current music:

Haisuinonasa — Dynamics of the Subway

Current drink:

Yunnan tea

Hey hey! Oh wow, I did not forget to publish this weekly post. Though, I wish I had prepared some of the links in advance as a way to speed up the process.

CSS Techniques and News

• “When to use CSS text-wrap: balance; vs text-wrap: pretty;” by Stephanie Stimac — a comparison of two different values of text-wrap currently available in Chrome, alongside their use cases.

• “CSS Text Level 4 Draft Updated” by Florian Rivoal — an important thing to mention in addition to the previous article, as the text-wrap naming would change to text-wrap-style eventually. Unfortunate that it did ship with the current name, with people already adopting it, but the new naming is a bit more clear.

• Gecko’s “Intent to ship: CSS text-wrap: balance” — related to the previous two articles: it seems that Firefox wants to ship the text-wrap: balance anyway, and then later adjust to the new naming, making the situation slightly more weird, but also more interop?

• “A Couple of New CSS Functions I’d Never Heard Of” by Chris Coyier — a nice little round-up of new CSS functions. I actually never heard about xywh(), and I already like how its name describes its API. Maybe we could rename border-image property accordingly, eh?

• “@supports @property” by Jane Ori — a CodePen showing how we can detect the support of @property. A bit hacky, as we don’t actually have a native way to detect this, it relies on detecting unrelated features that shipped in the exact same browser versions that @property did.

  The ability to test for this natively was resolved by CSSWG in the “Feature detection for descriptors” issue, though there are still unresolved issues like testing for preludes. Browsers are yet to implement this, though, and hopefully when they do, we will be able to test for things like @property natively.

• Chromiums’s “Intent to Ship: CSS Scrollbars: scrollbar-color, scrollbar-width” — I’m not sure yet what I think about these — I understand that it is unlikely we’d get the much more powerful WebKit’s pseudo-elements, so having at least some standard way to control the scrollbars would be nice, but I’d really want to see the scrollbar-width accepting <length> instead of its current auto | thin | none.

  I think one of the reasons not to have it was to prevent the scrollbars being too thin… But what if we’d just say “Treat any length value as something like max(thin, my-value)”? Basically, have the value that the scrollbar can get via thin be the lower bound, so we could still control the scrollbar width in a way that it would be consistent with other design elements.

• Gecko’s “Intent to prototype & ship: CSS text-indent keywords hanging & each-line” — can be very useful for wrapping <code> elements (not to be confused with hanging punctuation).

• Chromiums’s “Intent to Ship: CSS Exponential Functions” — I always welcome more maths into CSS, even though I don’t use it very often. But I know a lot of others do, and sometimes maths can unlock some interesting effects!

• “Scroll-Driven State Transfer” — My fourth article about scroll-driven animations, where I explore how we can transfer the state of one element to a completely different place on a page by connecting them with a unique identifier in CSS via a timeline-scope.

Non-CSS Web Platform Stuff

• “The History of editing and publishing in web browsers” by Alexandre Poirot — a bit of web browser history that I did not really know of or remembered.

Not Exactly New, but Noteworthy

• Some links from a short Mastodon Thread about multicol by me:

  • “CSS Multi-Column Layout block element breaking” by Scott Kellum — a “focus area proposal” for Interop 2024. I recommend voting for this issue — any improvements to multicol would be really awesome, it is a highly overlooked area in CSS.
  • “Things We Can’t (Yet) Do In CSS” by Rachel Andrew — a 5 years old, but still actual article about various missing CSS multicol features. Curiously, some of them might be possible with the help of some of the newer CSS specs, though in a rather hacky way. I might write about this relatively soon.
  • “Overflow in the block direction for continuous media” also by Rachel Andrew — a CSSWG issue about one of these issues which is almost impossible to do without a native support for it. From what I can remember, there are a lot of issues with fragmentation in CSS, and I think there was some work going on to improve it in general? Hopefully, one day, this would be sorted.

• “CSS 2” — if you can’t find something obvious in the specs, try looking in CSS2.

  A lot of things did not move to the new levels of specs, so a lot of basics and their nuances are still only there in CSS2.

• “CSS Indexes” shared by Amelia Bellamy-Royds as a response to me sharing the previous tip on mastodon — a listing of every term defined by CSS specs.

My Bug Reports

• “Tests for round(), mod(), and rem() that has a percentage only for one value” — my first PR to Web-Platform Tests. I wanted to try doing this for a while — write WPT tests as an alternative to just filling up the bugs in the browser bug trackers. I was told these, when merged, could automatically create these bug reports for the browsers that fail them? I’m very curious to see how the workflow would be with them.

• “Regression: size value for box-shadows did stop working” — a rather weird issue in Chrome Canary which I can see on my work MacBook (and at least one of my colleague can as well), but I cannot reproduce it on my home MacBook. Maybe some weird environment issue? Hmm.

Upcoming Events

Usually, I’m staying at home, slowly working on my CSS articles and experiments, but this time I’ve decided to travel a bit. I did plan to attend Fronteers Conference this year, but it was cancelled — so I decided to visit the border: none instead.

• October 26–27, 2023, “border: none 2023” — a non-profit conference in Nuremberg, Germany. I’m planning to attend it in-person, so if you’d be there — say hi! Otherwise, they’re planning to stream the talks, with the ticket starting from €30.

• October 28–29, 2023 “IndieWebCamp Nuremberg 2023” — will be my first IndieWebCamp. Right after the border: none, hopefully I won’t be too exhausted after the conference itself.

• October 30, 2023, “Weird Things You Missed About CSS” by Stephanie Eckles — a free online CSS Café event. I’ll be in a train back from border: none during it, but would try to attend if the Wi-Fi in the train will allow me!

And that’s it! I’ll be rather busy in the second half of the next week, so I hope I won’t miss posting the third post with the bookmarks. We’ll see, I guess!