DEV Community

Cover image for 4 CSS advancements from Google I/O 2023 with examples
jeetvora331
jeetvora331

Posted on • Edited on

1

4 CSS advancements from Google I/O 2023 with examples

Google I/O 2023 featured several advancements in CSS development that showcased new techniques and tools to enhance web design and user experience. Below are some of the best CSS highlights from the event, along with examples and real-life use cases.

1. Container Queries:
Container queries allow developers to create responsive components that adapt to the size of their container, rather than the viewport. This feature enables more modular and scalable design systems.

Example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
  contain: size layout;
}

.card::container(min-width: 300px) {
  background-color: lightblue;
}

.card::container(min-width: 500px) {
  background-color: coral;
}
Enter fullscreen mode Exit fullscreen mode

Real-life use case: Designing responsive cards for a product grid that change their styles based on the container's width, rather than the viewport size.


2. CSS Subgrid:
CSS Subgrid enables nested grids to align with their parent grid, making it easier to create complex and consistent layouts.

Example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.subgrid {
  display: grid;
  grid-row: 1;
  grid-column: 1 / 3;
  grid-template-columns: subgrid;
  gap: 10px;
}

.item {
  border: 1px solid black;
  padding: 10px;
}

Enter fullscreen mode Exit fullscreen mode

Real-life use case: Creating a nested grid within a news website's layout to align images and text within an article while maintaining consistency with the parent grid.


3. CSS Scroll Snap:
CSS Scroll Snap provides a smooth, controlled scrolling experience by snapping elements into place as the user scrolls.

Example:

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

Enter fullscreen mode Exit fullscreen mode

Real-life use case: Building a horizontal image carousel that snaps to each image as the user scrolls, providing a seamless browsing experience.


4. Layered CSS:
Layered CSS allows developers to define styles in multiple layers, making it easier to manage large CSS codebases and improve performance.

Example:

@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}

@layer theme {
  body {
    background-color: #f0f0f0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Real-life use case: Managing styles for a large web application, where separating resets, themes, and component styles into different layers can improve readability and maintainability.

These advancements in CSS development from Google I/O 2023 provide developers with powerful tools to create more responsive, efficient, and visually appealing web experiences.

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 full post →

Top comments (2)

Collapse
 
yaireo profile image
Yair Even Or

This article lack links to sources. You say things without proof of their existence...

I don't know what ::container is. Did you mean @container ?

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up