Email or username:

Password:

Forgot your password?
3 posts total
Nicolas Chevobbe

I must say that CSS nesting, `light-dark()`, relative color format and `@property` are really changing how I'm writing CSS, and how much more maintainable and elegant such code looks like now!

#CSSRenaissance

Sören Hentzschel

@nicolaschevobbe I agree that there is some good stuff. I'm not a big fan of light-dark(), though. I prefer to have CSS variables named by purpose and then override them for dark mode.

Nicolas Chevobbe

In latest @FirefoxNightly, the variable tooltip in @FirefoxDevTools now shows the computed value of the variable!

I'm super excited about this, it should make working with custom properties much easier. Combined with the registered property info and @starting-style value, this feels like super power 🦹

We're also planning other changes that would make the tooltip even better :)

cc @kizu @anatudor @shadeed9

#CSS

Firefox DevTools Inspector showing a CSS value using a CSS variable.
A popup is displayed, pointing to the variable name. In the popup, we can see the variable declaration (`--button-border-radius = var(--border-radius-small)`), as well as a "computed value" section, under which we can see the value: "4px"
Firefox DevTools Inspector showing a CSS declaration value using a CSS variable.
The tooltip displays the variable declaration value, the computed value, the @startin-style value, and the @property information
Nicolas Chevobbe

CSS nesting is enabled in Firefox 117 (currently Beta/DevEdition) 🎉

This was a bit stressful as the impact on @FirefoxDevTools was quite important and we had to change a lot of things in a lot of different places to ensure everything works with nesting.

We took this opportunity to rework how we display grouped rules, so it looks more like the CSS you authored 🙂

Firefox DevTools Inspector rules view, displaying the following nested rule:

```css
body {
  & main, & x-does-not-exist {
    #sidebar, #this-id-does-not-exist {
      @container root (10px < width) {
        & span, .this-class-does-not-exist {
          font-weight: bold;
        }
      }
    }
  }
}
```
Go Up