Adam Argyle Presents CSS Features for 2023 and beyond!

Original: https://codingcat.dev/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond

Questions

1. Can you tell us more about yourself?
2. Last time we talked was December 2021, how is Open Props doing?
3. What will you be doing for Google I/O this year?
4. Next Gen Color?
5. 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

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;
}