Did You Miss the New Google I/O Web Development CSS Improvements?

Carlos Polanco
2 min readMay 20, 2024

--

Google I/O has introduced some exciting new features and enhancements to CSS and web development. These updates are designed to make your web projects more efficient, engaging, and easier to build. Let’s dive into the key improvements and how you can use them in your projects.

1. Native Scroll-Driven Animations

Scroll-driven animations allow you to create dynamic effects linked to the scroll position, reducing the need for heavy scripting.

Example: Scroll-Driven Image Animation

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.image {
animation: fadeIn auto linear;
animation-timeline: scroll();
}

In this example, the fadeIn animation plays as you scroll the image into view. This animation-timeline: scroll(); links the animation to the scroll position of the nearest scroll container.

2. View Transitions

View Transitions enable seamless transitions between different views or pages within single-page or multi-page applications.

3. Popover API

The Popover API simplifies creating popovers (floating panels) without heavy scripting.

Example: Basic Popover

<button popover-target="myPopover">Click me</button>
<div id="myPopover" popover>
<p>This is a popover content</p>
</div>

4. Anchor Positioning

Anchor Positioning allows you to tether elements together, making it easier to create complex UI elements like tooltips and dropdowns.

Example: Tooltip with Anchor Positioning

<button id="anchorBtn">Hover over me</button>
<div id="tooltip" popover>
Tooltip content
</div>

<style>
#tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
</style>
<script>
document.getElementById('anchorBtn').addEventListener('mouseover', () => {
document.getElementById('tooltip').setAttribute('popover', '');
});
</script>

5. Customizable Selects

Currently, in an experimental phase, customizable selects allow you to create more dynamic and visually appealing dropdowns.

Example: Custom Select

<select appearance="base-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

This opt-in feature uses the appearance property to create a customizable select experience.

6. Container Queries

Container Queries allow you to apply styles based on the size of a container rather than the viewport, providing more granular control over responsive design.

Example: Container Query

@container (min-width: 400px) {
.container-element {
background-color: lightblue;
}
}

7. Quality of Life Improvements

CSS Nesting: Supports lookahead nesting, making CSS more ergonomic and similar to past practices.

New Typographic Layouts: Features like text-wrap: balance and text-wrap: pretty improve text layout, especially for CJK (Chinese, Japanese, Korean) text.

Color Theming Enhancements:

  • Relative Color Syntax: Enables dynamic theming with relative color adjustments.
  • Light-Dark Function: Simplifies writing theme styles by combining default and user preference queries in a single line of code.

Conclusion

These new features and enhancements from Google I/O aim to make web development more efficient and performant. Whether you’re building animations, transitions, or complex UI components, these tools offer powerful new capabilities that simplify the process and improve the user experience.

For more detailed guides and information, visit the Chrome Developers Blog.

--

--

No responses yet