Check Out These Awesome New CSS Features

by Dennis — 4 minutes

CSS keeps getting better, giving us more tools and features to create cooler and more efficient websites. Whether you're a seasoned pro or just starting out, these updates are sure to make your life easier and your projects even more amazing. Let's dive into some of the latest CSS updates that are changing the game for web development.

1. CSS Grid Level 2: Subgrid

If you’re a fan of CSS Grid, you’ll love the new subgrid feature. It allows grid items to inherit the grid layout of their parent, making nested grids a breeze.

Example:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">
    <div class="subgrid-container">
      <div class="subitem1">Subitem 1</div>
      <div class="subitem2">Subitem 2</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-gap: 10px;
}

.main {
  display: grid;
  grid-template-areas:
    "subitem1"
    "subitem2";
}

.subgrid-container {
  display: subgrid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

2. CSS Custom Properties: @property

CSS variables just got an upgrade with @property. This lets you define properties with types and default values.

Example:

@property --main-color {
  syntax: "<color>";
  initial-value: #3498db;
  inherits: true;
}

body {
  --main-color: #e74c3c;
  background-color: var(--main-color);
}

3. Container Queries

Container queries let you apply styles based on the size of a container instead of the viewport, making components more flexible.

Example:

.container {
  container-type: inline-size;
}

.item {
  width: 100%;
}

@container (min-width: 500px) {
  .item {
    grid-template-columns: 1fr 1fr;
  }
}

4. :is() and :where() Pseudo-Classes

These pseudo-classes simplify writing large selectors. :is() has normal specificity, while :where() doesn’t add any specificity.

Example:

:is(h1, h2, h3) {
  margin-bottom: 0.5em;
}

:where(article, aside, nav) {
  padding: 1em;
}

5. Scroll Snap

Scroll Snap lets you create smooth, controlled scrolling by snapping elements into place as you scroll.

Example:

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.item {
  scroll-snap-align: start;
  height: 100vh;
}

6. Aspect Ratio

The aspect-ratio property keeps the aspect ratio of elements like images and videos consistent.

Example:

.image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

7. CSS Functions: clamp(), min(), max()

These functions give you more control over responsive design by setting value ranges.

Example:

.element {
  font-size: clamp(1rem, 2vw, 2rem);
  width: min(50%, 300px);
  height: max(100px, 10vh);
}

8. Backdrop Filter

The backdrop-filter property lets you apply cool effects like blurring or color shifts to the area behind an element.

Example:

.overlay {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

9. New Pseudo-Elements: ::marker and ::part

::marker targets list item markers, and ::part lets you style shadow DOM parts.

Example:

ul li::marker {
  color: red;
  font-size: 1.5em;
}

custom-element::part(button) {
  background-color: blue;
}

10. CSS Houdini

CSS Houdini opens up parts of the CSS rendering engine so you can create custom properties and behaviors.

Example:

// Registering a custom property
CSS.registerProperty({
  name: '--rotation',
  syntax: '<angle>',
  initialValue: '0deg',
  inherits: false
});

// Using the custom property in CSS
.element {
  animation: rotate 2s infinite;
}

@keyframes rotate {
  from {
    --rotation: 0deg;
  }
  to {
    --rotation: 360deg;
  }
}

Wrapping Up

CSS is always evolving, and these new features make it easier than ever to create responsive, dynamic, and visually stunning websites. Whether you’re using subgrid for complex layouts, container queries for modular design, or new functions like clamp() for better control, staying on top of these updates will help you make the most of what CSS has to offer.

References

meerdivotion

Cases

Blogs

Event