CSS Wrapped 2024

# Backdrop Inheritance

Historically the ::backdrop pseudo-element didn’t inherit from anywhere. From Chrome 122, this ::backdrop pseudo-element has been converted into a tree abiding element, meaning that it inherits any inheritable properties from its originating element.

Thanks to this change it is possible to override custom property values on specific elements and ::backdrop will have access to them. For example, the ::backdrop associated with an open <dialog> element can now access the custom properties available in that <dialog>.

Bramus

# light-dark()

System colors in CSS have the ability to react to the current used color-scheme value. For example, if you declare color: CanvasText in a CSS rule, the color of the matched elements will be either light or dark depending on the color-scheme value.

In the following demo, use the dropdown to control the color-scheme of the div. Because the div is styled with system colors, it supports both light and dark styles.

The light-dark() function exposes the same capability to developers. This function accepts two arguments, both of which must be a <color>.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

By changing the value of color-scheme, either the first or the second value of light-dark() is used.

• If the used color scheme is light or unknown then the computed value of the first value gets returned.
• If the used color scheme is dark then the computed value of the second color is returned.

Bramus

# @property

2024 marked the year that @property finally became Baseline Newly available. Having cross-browser support for @property is a very exciting milestone as with @property and its CSS.registerProperty counterpart you can register custom properties to be of a certain type, control their inheritance behavior, and give them an initial value.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

By registering a custom property to be of a certain type, the browser knows how to interpolate its values when used in transitions and animations.

By animating a custom property, your CSS becomes more concise and also easier to read, as shown in the following snippet that animates the --angle property from 0deg to 360deg.

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes adjust-angle {
  to {
    --angle: 360deg;
  }
}

div {
  --angle: 0deg;
  animation: 10s adjust-angle linear infinite;
  rotate: var(--angle);
}

Bramus

# The Popover API

The Popover API provides ways to build layered interfaces like tooltips, menus, teaching UIs, and more.

To create a popover with default values, all you need is a button to trigger the popover, and an element that is the popover.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Popovers come with built-in support for top layer promotion, light-dismiss functionality, default focus management, and accessibility features.

Bramus

# Entry effects with @starting-style@starting-style

The @starting-style at-rule is used to define styles for an element before it has received the first style update. When setting those targeted properties to transition with CSS transitions, you can use these starting-styles to create entry effects.

In the following example, newly added <div> elements fade from yellow to their initial background-color which is transparent.

div {
  transition: background-color 0.5s;
  background-color: transparent;

  @starting-style {
    background-color: yellow;
  }
}

Another use case is to animate-in dialogs when opened.

dialog[open] {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

Don’t forget to set transition-behavior to allow-discrete when animating discretely animatable properties such as display.

Bramus

# Line-breakable <ruby> + CSS ruby-alignruby-align

From Chrome 128, ruby annotations are line-breakable and you can style ruby text with the ruby-align CSS property. This gives you finer control on how phonetic annotations or other supplemental information above or beside base text with <ruby> should be presented.

With line-breakable ruby, wrapped ruby annotation text gets placed over wrapped base text, achieving ideal text rendering. Compare this before and after:

The new CSS property ruby-align controls the alignment of ruby base text and ruby annotation text. The property accepts one of the keyword values space-around, space-between, start, and center.

To automatically add pinyin to Chinese text and tweak its appearance, use this tool created by yisi(一丝)

Bramus

# paint-order

When using text-stroke, the paint-order property can control the order that the text fill and desired stroke are stacked or rendered together. This can be useful when you want to ensure that the stroke is rendered on top of the fill.

The default paint order is: fill, stroke, then markers.

The following video shows how the result of the text stroke is undesirable if the text is filled white and then given a black stroke. Switch those around, so the stroke is drawn first and then filled, and the result is quite nice!

The CSS to control this is one line. Set the paint-order to draw the stroke before the fill by specifying those keywords in that order.

h1 {
  paint-order: stroke fill;

  color: white;
  -webkit-text-stroke: 5px black;
}

Try it for yourself in this CodePen:

Some folks say that the ability to control paint-order has finally made text-stroke usable in production. What do you think?

Adam Argyle

# CSSOM Nested Declarations

To fix some weird quirks with CSS nesting, the CSSNestedDeclarations interface was added to the CSS Nesting spec. With it, declarations that come after style rules no longer shift up.

This means that the following CSS snippet gives the .foo element a green background color instead of a red one, as would happen without CSSNestedDeclarations.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }
    
    background-color: green;
}

With CSSNestedDeclarations the CSS rule serializes to the following, keeping the background-color: green declaration at its original location:

↳ CSSStyleRule
  .type = STYLE_RULE
  .selectorText = ".foo"
  .resolvedSelectorText = ".foo"
  .specificity = (0,1,0)
  .style (CSSStyleDeclaration, 1) =
    - width: fit-content
  .cssRules (CSSRuleList, 2) =
    ↳ CSSMediaRule
    .type = MEDIA_RULE
    .cssRules (CSSRuleList, 1) =
      ↳ CSSNestedDeclarations
        .style (CSSStyleDeclaration, 1) =
          - background-color: red
    ↳ CSSNestedDeclarations
    .style (CSSStyleDeclaration, 1) =
      - background-color: green

This addition landed in Chrome 130 and complements earlier changes that relaxed the parsing of nested styles.

Bramus