Css baseline 2022

Jurgen 2025-02-10 One minute to read

Overview of 2022 baseline css features

::backdrop

The ::backdrop pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer, like a dialog or popover.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<button popovertarget="example-pop" popovertargetaction="show">
  Show popover
</button>
<div class="popover" id="example-pop" popover>
  <h2>Popover heading</h2>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<style>
button {
    width: fit-content;
    border: 1px solid;
    border-radius: 3px;
    padding: 0.5em;
}
.popover {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    padding: 1rem;
    border-radius: 4px;
}
.popover::backdrop {
  backdrop-filter: blur(3px);
}
</style>

Grid Animation

This allows the animation of rows and columns in a grid layout.

Use grid-template-rows to animate from 0 to auto and in combination with a details summary it is possible to show and hide content without javascript.

Click to see...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="example-wrapper">
    <details>
        <summary>Click to see...</summary>
    </details>
    <div class="detail-content">
        <div class="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

<style>
    .example-wrapper {
        border: 1px solid;
        border-radius: 4px;
        padding: 1rem;
        margin-block: 1rem;
        max-width: 60ch;

        details {
            cursor: pointer;
        }

        .detail-content {
            display: grid;
            grid-template-rows: 0fr; /* yes, it has to be 0fr */
            transition: grid-template-rows 0.5s ease-out;
        }

        .inner {
            overflow: hidden; /* no parts will be sticking out */
        }

        details[open] + .detail-content {
            grid-template-rows: 1fr;
        }
    }
</style>

Cascade Layers

By using @layer to define the order of stylesheet groups and adding style declarations to these named groups.

1
2
3
4
5
@layer base, utils, components;

@layer base {
    ... declarations
}

Appearance

Appearance is mostly used to remove vendor styling from form controls, like:

1
2
3
select {
    appearance: none;
}

Make a choice

Individual transform properties

The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.

What does that mean?

In supporting browsers you can use translate, scale and rotate without transform: they’re their own properties now.

1
2
3
4
5
6
7
8
9
.old-transform {
    transform: translate(100px, 10px) rotate(35deg) scale(1.5);
}

.new-properties {
    translate: 100px 10px;
    rotate: 35deg;
    scale: 1.5;
}

Viewport Unit Variants

These units are relative to the smallest, largest, and current (dynamic) viewport size.

dvh is dynamic viewport height

dvw is dynamic viewport width

svh is smallest viewport height

svw is smallest viewport width

lvh is largest viewport height

lvw is largest viewport width

A good use case for dvh is fullscreen sheets on mobile for menu’s or shopping carts

1
2
3
4
.sheet {
    height: 100dvh;
    ...
}