This content originally appeared on web.dev and was authored by Adam Argyle
I believe every front-end developer should know how to use container
queries,
create a scroll snap experience, avoid
position: absolute with
grid,
swiftly hammer out a circle, use cascade
layers,
and reach more with less via logical
properties. Here's a quick
overview of each of those expectations.
1. A container query #
The top requested CSS feature for 10 years straight, is now stable across browsers and available for you to use for width queries in 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}@containercontainer2. Scroll snap #
Well orchestrated scroll experiences set your experience apart from the rest, and scroll snap is the perfect way to match system scroll UX while providing meaningful stopping points.
.snaps {
overflow-x: scroll;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.snap-target {
scroll-snap-align: center;
}
.snap-force-stop {
scroll-snap-stop: always;
}Learn more about the potential of this CSS feature in this huge and inspiring Codepen collection of around 25 demos.
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Grid pile #
Avoid position absolute with a single cell CSS grid. Once they're piled on top of each other, use justify and align properties to position them.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}grid4. Quick circle #
There are lots of ways to make circles in CSS, but this is definitely the most minimal.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}aspect-ratio5. Control variants with @layer #
Cascade layers can help insert variants discovered or created later, into the right place in the cascade with the original set of variants.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}Then, in some entirely different file, loaded at some other random time, append a new variant to the button layer as if it was there with the rest of them this whole time.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}@layer6. Memorize less and reach more with logical properties #
Memorize this one new box model
and never have to worry about
changing left and right padding or margin for international writing
modes and
document
directions again.
Adjust your styles from physical 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: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}padding-inlinemargin-blockinset-inline
This content originally appeared on web.dev and was authored by Adam Argyle
Adam Argyle | Sciencx (2023-03-15T00:00:00+00:00) 6 CSS snippets every front-end developer should know in 2023. Retrieved from https://www.scien.cx/2023/03/15/6-css-snippets-every-front-end-developer-should-know-in-2023/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.