Adam Argyle Presents CSS Features for 2023 and beyond!
Sponsors
Questions
- Can you tell us more about yourself?
- Last time we talked was December 2021, how is Open Props doing?
- What will you be doing for Google I/O this year?
- Next Gen Color?
- Tell us about gradient.style
Links
- Card Stacks
- Nerdy.dev
- 6 CSS snippets every front-end developer should know in 2023
At Container Query
@container is a new css selector
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
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;
}
Grid Pile
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
Easy Circle
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
Control variants with @layer
You probably have seen this if you are using TailwindCSS
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
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;
}
