What’s !important #13: @function, alpha(), CSS Wordle, and More

CSS functions, the alpha() function, Grid Lanes, some things about <dialog> that you might not know, CSS Wordle, and more — this is What’s !important right now.

CSS functions, expertly explained

Jane Ori expertly explained how CSS functions work. @function will probably be the biggest CSS feature to probably become Baseline this year, so I definitely found it a bit intimidating at first. That is, until I read Jane’s baby-step-by-baby-step walkthrough, which eases you into it really well.

In addition, Declan Chidlow wrote our @function documentation, which you might want to bookmark for quick reference in the future.

The alpha() function

Speaking of functions, the alpha() function caught me by surprise. Firstly, because I hadn’t heard of it, and secondly, because…why? We can already change the alpha channel:

/* This */
color: alpha(from var(--color) / 0.5);

/* Instead of this */
color: oklch(from var(--color) l c h / 0.5);

Well, this comment from Jason Leo sums it up. Firstly, it means that we won’t need to hard-code color values when we already have CSS variables. For years I’ve circumvented this by only storing the actual values in CSS variables, but having to wrap them in the color function every single time is really monotonous:

/* Just the values */
--color: 0.65 0.23 230;

/* Then use them flexibly */
color: oklch(var(--color));
color: oklch(var(--color) / 0.5);

But it’s better than this (in my opinion):

/* Function and values */
--color: oklch(0.65 0.23 230);

/* Delightful */
color: var(--color);

/* Delightless */
color: oklch(from var(--color) l c h / 0.5);

alpha() offers the best of both worlds:

/* Less delightless */
color: alpha(from var(--color) / 0.5);

Secondly, the color format is actually irrelevant in this context, so alpha(from var(--color) / 0.5) communicates the intention more clearly than oklch(from var(--color) l c h / 0.5) does. It also makes the declaration inherently shorter.

Credit to Adam Argyle for bringing alpha() up.

The Field Guide to Grid Lanes

WebKit launched the Field Guide to Grid Lanes (formerly known as CSS masonry layout). If you’ve ever read one of our CSS-Tricks Guides, it’s similar to that (their words — just sayin’). It’s a smooth introduction with a variety of barebones and real-world demos.

Source: WebKit.

Quality-of-life upgrades for <dialog>

Una Kravets talked about two quality-of-life upgrades for <dialog> — the new closedby attribute, which isn’t supported by Safari yet, and overscroll-behavior: contain. There are some nuggets in the comments too, including a tip about scrollbar-gutter: stable.

✅ Nice lil btn scale-down 🙈 Layout change bc the scroll bar disappears 🙈 No light dismiss These UX problems can easily be solved with: – closedby="any" – overscroll-behavior: contain

[image or embed]

— Una Kravets (@una.im) 13:28 · Jun 3, 2026

Also, Chris Coyier showed us how to animate <dialog>s, which I think many of us know how to do already, but it’s so easy to mess up. I have to Google it every time (it’s those bleeping @starting-styles).

What happened at CSS Day 2026?

CSS Day, the annual CSS community conference, was held in Amsterdam on the 11th and 12th of this month (so two days, technically). While there wasn’t a livestream this year, recordings will become available in late June. Until then, check out CSS Day on Bluesky as well as the #CSSDay Bluesky feed to see what happened on stage, what happened behind the scenes, and even the slides from some of the talks.

Source: CSS Day.

And no, there weren’t any flamethrowers this year, but it wasn’t DOOM-free either (if you know, you know).

CSS Wordle

What a week it’s been, especially with everything that transpired at CSS Day, but if you have any energy left I highly recommend a round (or several rounds) of Sunkanmi Fafowora’s CSS Wordle, which I’ve literally been obsessed with for the last week.

Source: CSS-Questions (don’t worry, this was yesterday’s answer).

New web platform features and updates

• Chrome 149
  • Gap decorations (now Baseline)
  • image-rendering: crisp-edges (now Baseline)
  • rect() and xywh() for shape-outside (now Baseline)
  • path() and shape() for shape-outside (no Safari or Firefox support)

Until next time!

---

What’s !important #13: @function, alpha(), CSS Wordle, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

from CSS-Tricks https://ift.tt/Y4tC6Bk
via IFTTT

Mostly Cloudy today!

With a high of F and a low of 50F. Currently, it's 58F and Partly Cloudy outside.

Current wind speeds: 10 from the East

Pollen: 3

Sunrise: June 14, 2026 at 05:24PM

Sunset: June 15, 2026 at 08:19AM

UV index: 0

Humidity: 49%

via https://ift.tt/h4q1tgS

June 15, 2026 at 10:02AM

Partly Cloudy/Wind today!

With a high of F and a low of 49F. Currently, it's 62F and Clear outside.

Current wind speeds: 14 from the Northeast

Pollen: 3

Sunrise: June 13, 2026 at 05:24PM

Sunset: June 14, 2026 at 08:18AM

UV index: 0

Humidity: 49%

via https://ift.tt/sbiIX6v

June 14, 2026 at 10:02AM

Clear today!

With a high of F and a low of 56F. Currently, it's 73F and Clear outside.

Current wind speeds: 10 from the Southeast

Pollen: 3

Sunrise: June 12, 2026 at 05:24PM

Sunset: June 13, 2026 at 08:18AM

UV index: 0

Humidity: 48%

via https://ift.tt/t76VLCx

June 13, 2026 at 10:02AM

There’s no need to include ‘navigation’ in your navigation labels

Mark Underhill:

And now to the reason I wrote this post: including the word “navigation” in your <nav> labels. There’s no need. If we did, we’d hear something like “Navigation, Primary navigation”. Not the end of the world, but unnecessarily repetitive for screen reader users.

One of those nuances to keep in your back pocket when writing for screen readers. Reminds me, too, that there’s no need to say something like “image” when describing one in the alt text. That’s sorta implied. While I’m no screen reading native, I imagine these sorts of things are minor pet peeves that, given a little love and consideration, make navigating that much more enjoyable.

While we’re on the UX of accessible text, another consideration: keep it succinct. It doesn’t have to be a novel.

---

There’s no need to include ‘navigation’ in your navigation labels originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

from CSS-Tricks https://ift.tt/G92Dz5v
via IFTTT

Why Isn’t My 3D View Transition Working?

If you have played around with view transition a bunch, you may have noticed that 3D transitions between two pages (i.e., cross-document view transitions) don’t seem to work. That is, at least not without the browsers flattening things first.

Image elements are the best example to demonstrate this because, like the snapshots a browser takes of the before-after states in a view transition, images are replaced elements so, in theory, we should be able to use them as a sort of reduced test case for 3D animations. For example, flipping one image to reveal another on click looks like this:

It’s important to note that, for the animation to work properly, we need to set the perspective property on the image’s parent container (in our case, it’s the .scene element). Otherwise, the 3D transformation is merely flat. It sort of angles the element’s appearance:

In CSS, the parent’s persepective is applied to all its children, excluding itself:

.scene {
  perspective: 1200px;

  .card { /* gets perspective */ }
}

What’s important here is the HTML structure. Specifically how the .scene container sits on top of the child .card elements, making the 3D effect come to life so the flip looks how it should:

<div class="scene">
  <div class="card">
    <!-- Card Content Here -->
  </div>
</div>

Perhaps our keyframe animation to flip the .cards is something like this:

@keyframes flipOut {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-90deg);
  }
}

Which we apply to the .cards like this:

.card.flip-out {
  animation: flipOut 5.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.card.flip-in {
  animation: flipOut 5.2s cubic-bezier(0.4, 0, 0.2, 1) forwards reverse;
}

…where the animates runs forwards when the .flip-out class is appended to the .card (courtesy of JavaScript watching for a click) and runs in reverse when the .flip-in class is appended.

That’s the setup for how a cross-document view transition ought to work, too, right? If an image supports a 3D animation, then a view transitions snapshot should do the same. Let’s poke at that.

Setting up the view transition

First things first, we have to opt into view transitions on both pages with the @view-transition at-rule by setting the navigation descriptor to auto:

@view-transition {
  navigation: auto;
}

If we were to do nothing else, then one page fades into another when navigating between the two. It’s the most basic of all cross-document view transitions.

How do we customize things? We use the ::view-transition-old() and ::view-transition-new() pseudo-classes, where the former is the “old” snapshot and the latter is the “new” one. Like the .card elements we used in the last example, that’s where we set the keyframe animation:

::view-transition-old(root) {
  /* animation goes here */
}

::view-transition-new(root) {
  /* animation goes here */
}

The root parameter tells the view transition to target the whole page and all the elements created (and not created) by the view transition’s default snapshot group.

Here’s the problem

Let’s say we want to apply that same 3D flip to the entire webpage, where the snapshot of the “old” page flips into the “new” page. Again, a 3D animation asks us for two things:

1. The perspective property on the parent element so its children get that 3D effect
2. An animation on the page for when the view transition happens

But: What exactly do we set the perspective on, as in, what is the parent element here?

Since view transitions take snapshots of the entire webpage, we might assume (logically) it would be the <html> element (or the :root), right? I mean, the DOM tree looks like this when a view transition is present:

html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  └─ ::view-transition-image-pair(card)
  │  │     ├─ ::view-transition-old(card)
  │  │     └─ ::view-transition-new(card)
  │  └─ ::view-transition-group(name)
  │     └─ ::view-transition-image-pair(name)
  │        ├─ ::view-transition-old(name)
  │        └─ ::view-transition-new(name)
  ├─ head
  └─ body
        └─ …

So, the entire snapshot should be where we put the perspective. Right? Turns out, no.

In fact, does nothing at all! You’re left with this instead of the beautiful 3D flip we were able to use on the cards earlier:

GitHub Source and Live Demo

Here’s the code I was working with:

/* Cross-document View Transition opt-in */
@view-transition {
  navigation: auto;
}

/* 3D flip: Old page flips away, new page flips in */
@keyframes flip-out {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
}

@keyframes flip-in {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

::view-transition-old(root) {
  animation: flip-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  transform-origin: center center;
}

::view-transition-new(root) {
  animation: flip-in 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s backwards;
  transform-origin: center center;
}

Note: I didn’t reverse the animation here since we flip to -90deg and then from 90deg. Not exactly the same!

And it doesn’t work, no matter if perspective is on html or :root:

/* 👎 */
html {
  perspective: 1100px;
}

/* 👎 */
:root {
  perspective: 1100px;
}

I did some digging and discovered that perspective (and 3D transformations in general) is one of several CSS properties that would produce an unusual effect. (Leave it to Bramus to have the answer!)

So… What do we do? Some ideas came to mind, but sadly failed:

• I tried setting the perspective property on the body.
• I tried setting perspective inside ::view-transition-group(root).
• I tried setting perspective inside the ::view-transition pseudo.

There’s actually a super simple workaround to this, and I can’t believe it took me this long to figure it out — don’t use perspective at all!

The solution

Short story: we have to use the perspective() function instead of the perspective property. And not inside any of the ::view-transition-* pseudos as you might expect, but inside the @keyframes animation:

@keyframes flip-out {
  0% {
    transform: perspective(1100px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(1100px) rotateY(-90deg);
    opacity: 0;
  }
}
@keyframes flip-in {
  0% {
    transform: perspective(1100px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1100px) rotateY(0deg);
    opacity: 1;
  }
}

This simple, but big change moves the scene from a flat meh to a beautiful ah yeah:

GitHub Source and Live Demo

Here’s why, apparently. The view transition pseudo-element tree is rendered outside the normal HTML flow. More specifically, the entire view transition tree is rendered above the DOM in its own layer. However, particularly for ::view-transition, I’m not too sure why this is the case, but my best guess would be that each view transition group automatically has its position and transform values overridden by the browser; hence, interfering with the perspective.

The difference between perspective and perspective()? The perspective property is applied to the parent element, while perspective() is a transform property function applied directly to the element itself. And since the view transition pseudo tree does not have a true parent, we’ve gotta use perspective() since it doesn’t require a parent. Phew.

To recap…

Setting perspective on the html, :root, or any of the view transition pseudo-class won’t work. And if you have been struggling to find the solution, like I was, I think this little, but big perspective() change will solve that issue if you ever come across it. Take it from me, I battled with this for weeks till I came back today to rant about it and discovered a solution to it. A perk of writing!

---

Why Isn’t My 3D View Transition Working? originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

from CSS-Tricks https://ift.tt/ld8ragP
via IFTTT

Clear today!

With a high of F and a low of 50F. Currently, it's 60F and Clear outside.

Current wind speeds: 7 from the East

Pollen: 3

Sunrise: June 11, 2026 at 05:24PM

Sunset: June 12, 2026 at 08:18AM

UV index: 0

Humidity: 34%

via https://ift.tt/uHjDpGo

June 12, 2026 at 10:02AM