A few links, some updates, and a thought
It’s been a while. I haven’t sent a newsletter since November. I could list the reasons, but we can’t go back in time. What matters is that I’m back now, and I’m excited to share what I’ve been up to.
In this issue, I’ve got a few great links from around the web, some work updates, and a thought I got this week.
Links from around the web
CSS if() functions & reading-flow by Una Kravets (Video)
Una Kravets shared a great overview of the new if() and reading-flow in CSS. I'm especially excited about if() as it will allow us to do things like this:
.header {
justify-content: if(
style(--actions: true): space-between;
else: center);
}
Even though we can do the above with CSS :has() or style queries today, the new if() look more cleaner.
I really liked how Una used if() to shift the positioning of the grid items. Great showcase of the feature!
Flipping Layouts by Chris Coyier
When a web page is translated to Arabic via Google Translate, a CSS class is added to the root element.
<html lang="ar" class="translated-rtl">
We can use that class to our advantage and flip the layout.
.translated-rtl {
direction: rtl;
}
If you're using logical properties, the layout is 99% RTL-ready.
Wonder why 99%? Well, because we still don't have the ability to flip things like background-position in CSS (yet).
I like how Chris approached this. It feels like a story where you go through his way of thinking and writing. I'm always inspired by his writings.
I'm glad he's writing again on Frontend Masters now. They're lucky.
CSS Tips: Flexible Wrapping CSS Grid by CSS Weekly (Video)
A great video that shows how combining CSS grid, minmax(), and min() can help in create a wrapping grid layout. Cool one.
Work updates
The Layout Maestro: a new interactive course in the making
After five years since publishing my Debugging CSS book, I’m now working on my second paid educational product. This time, it's focused on CSS layouts.
I called it the Layout Maestro. If you're interested, you can subscribe here.
Speaking at CSS Day in Amsterdam
I will speak at CSS Day next week (5-6th June). My talk is about Smart Layouts, a term I like to use when building layouts that are smart enough to adapt to various conditions.
If you're coming, say hi! I'd love to discuss all things CSS (and coffee ☕️).
Not attending? The conference will be live streamed via Conffab.
Thought in mind
While working on my smart layouts talk, I used Anchor Positioning heavily as I needed to try an idea. In doing so, I noticed a strange difference between the Chrome and Safari TP implementations and reported it.
When using @position-try, Chrome doesn't update the position if you resize the screen, while Safari does.
I wouldn’t have caught this if I hadn’t tried the feature myself. I might even be the first one to experience it.
When a new CSS feature drops, please don’t wait for full browser support to give it a try. You don’t need to use it in production. Just play with it in side projects, demos, or small experiments.
By doing that, we help move the web forward, instead of discovering long-standing issues years later.
Thank you for reading.