Css baseline 2023

Jurgen One minute to read

Overview of 2023 baseline css features

Cap

cap is a relative unit based on the length of a capital in latin text. This can come in handy when sizing inline svg icons

Css :has()

The long awaited ‘parent’ selector :has() finally landed in 2023 in all major browsers.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet,

consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
    <strong>Lorem ipsum dolor sit amet,</strong>
    <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<style>
.box {
    aspect-ratio: 1;
    background-color: oklch(from rebeccapurple calc(l + 0.5) c h / 70%);
    max-width: 240px;
    width: 48%;
    padding: 0.5em;
    &:has(strong) {
        background-color: oklch(from rebeccapurple calc(l - 0.25) c h / 70%); 
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }
}
</style>

Size Container Queries