DEV Community

Cover image for Adam Argyle Presents CSS Features for 2023 and beyond!
Alex Patterson for CodingCatDev

Posted on • Updated on • Originally published at codingcat.dev

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

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Grid Pile

Grid Pile

.pile {
    display: grid;
    place-content: center;
}

.pile > * {
    grid-area: 1/1;
}

Enter fullscreen mode Exit fullscreen mode

Easy Circle

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

Enter fullscreen mode Exit fullscreen mode

Control variants with @layer

You probably have seen this if you are using TailwindCSS

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    
  }
}

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Top comments (0)