PREVIEW MODE

Adam Argyle Presents CSS Features for 2023 and beyond!

Posted: 5/31/2023

Sponsors

Storyblok

Storyblok

Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful content experiences on any frontend: Websites, eCommerce, mobile apps, AR/VR, or voice content!

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

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