6 CSS snippets each front-end developer ought to know in 2023

I consider each front-end developer ought to know learn how to use container queries, create a scroll snap expertise, keep away from place: absolute with grid, swiftly hammer out a circle, use cascade layers, and attain extra with much less by way of logical properties. This is a fast overview of every of these expectations.

1. A container question #

The highest requested CSS function for 10 years straight, is now secure throughout browsers and out there so that you can use for width queries in 2023.

.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}

@container

container

Properly orchestrated scroll experiences set your expertise aside from the remainder, and scroll snap is the proper approach to match system scroll UX whereas offering significant stopping factors.

.snaps {
overflow-x: scroll;
scroll-snap-type: x obligatory;
overscroll-behavior-x: include;
}
.snap-target {
scroll-snap-align: middle;
}
.snap-force-stop {
scroll-snap-stop: all the time;
}

Study extra concerning the potential of this CSS function on this large and provoking Codepen assortment of round 25 demos.

scroll-snap-type

scroll-snap-align

scroll-snap-stop

overscroll-behavior

3. Grid pile #

Keep away from place absolute with a single cell CSS grid. As soon as they’re piled on high of one another, use justify and align properties to place them.

.pile {
show: grid;
place-content: middle;
}
.pile > * {
grid-area: 1/1;
}

grid

4. Fast circle #

There are many methods to make circles in CSS, however that is undoubtedly probably the most minimal.

.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}

aspect-ratio

5. Management variants with @layer #

Cascade layers can assist insert variants found or created later, into the correct place within the cascade with the unique set of variants.

/* file buttons.css */
@layer elements.buttons {
.btn.major {
…
}
}

Then, in some completely totally different file, loaded at another random time, append a brand new variant to the button layer as if it was there with the remainder of them this complete time.

/* file video-player.css */
@layer elements.buttons {
.btn.player-icon {
…
}
}

@layer

6. Memorize much less and attain extra with logical properties #

Memorize this one new field mannequin and by no means have to fret about altering left and proper padding or margin for worldwide writing modes and doc instructions once more. Regulate your types from bodily properties to logical ones like padding-inline, margin-inline, inset-inline, and now the browser will do the adjusting work.

button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: begin;
margin-block: 2ch;
}
.one thing::earlier than {
inset-inline: auto 0;
}

padding-inline

margin-block

inset-inline