Css baseline 2021

Jurgen One minute to read

Overview of 2021 baseline css features

All the features are Widely available because they all passed 36 months since being newly available.

:where()

:where() takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.

:not()

:not() matches elements that do not match the selectors in its arguments

:is()

:is()

Clip Path

clip-path sets the visible area of an element using coordinates.

Flexbox Gap

The very useful gap from grid layout gap column-gap row-gap is now also available for flex containers.

File Selector Button

::file-selector-button selects the button part of a <input type="file>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<input type="file">
<input type="file" class="styled">

<style>
    .styled::file-selector-button {
        background: rebeccapurple;
        border-radius: 0.25em;
        padding: 0.5em;
    }
</style>

Font Family System

font-family: system-ui uses the operating system default font for text.

Just as this website does.

Fit Content

fit-content expands a box as needed to fit its contents until the maximum size is reached, preserving aspect ratio.

Logical Properties

Borders, padding, margin and size relative to the writing mode. border-left: becomes border-inline-start:

Aspect Ratio

Some examples


 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

<div class="fits square">
    Lorem ipsum dolor sit amet.
</div>
<div class="fits">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="fits">
    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.
</div>
<div class="fits">
    Lorem ipsum dolor sit amet.
    <em>consectetur adipiscing elit</em>
</div>

<style>
.fits { 
    max-width: fit-content;
    padding: 1em;
    border-inline-start: 1px solid red;
    border-inline-end: 1px solid blue;
    margin-block-end: 0.5rem;

    &:has(em) {
        border-width: 1px;
        background-color: #495050;
    }
}
.square {
    aspect-ratio: 1;
}
</style>

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
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.
Lorem ipsum dolor sit amet. consectetur adipiscing elit