DEV Community

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

Posted on • Edited 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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay