Google I/O 2025 Web Updates: AI-Powered Development and New CSS Capabilities

Published on 5/21/2025

Google I/O 2025: Web Platform Updates

TLDR: Google I/O 2025 showcased major web platform advances including AI-powered Chrome DevTools, CSS carousel primitives that eliminate JavaScript dependencies, and multimodal AI APIs for on-device processing.

Summary:

Google's annual developer conference delivered significant updates across the web platform, with artificial intelligence taking center stage in developer tooling. The company introduced Gemini integration directly into Chrome, allowing developers to interact with AI assistance while browsing and coding. This represents a fundamental shift in how we might interact with web content and development workflows.

The most practically impactful announcement involves CSS carousel primitives in Chrome 135. These new features—styleable fragmentation, scroll marker elements, and scroll buttons—enable developers to create interactive carousels using pure CSS and HTML. Pinterest, an early adopter, reported a dramatic 90% code reduction, dropping from 2,000 lines of JavaScript to just 200 lines of CSS. This demonstrates how well-designed CSS primitives can eliminate complex JavaScript patterns entirely.

Chrome DevTools received substantial AI enhancements, including automated CSS modification suggestions, performance insights analysis, and the ability to save changes directly to workspace files. The integration allows developers to ask Gemini to analyze performance traces, suggest optimizations, and even generate code fixes. However, this raises questions about developer skill atrophy—when AI handles increasingly complex tasks, how do we maintain deep technical understanding?

The built-in AI APIs expanded significantly, with the Prompt API gaining multimodal capabilities in Chrome Canary. The Summarizer, Language Detector, and Translator APIs moved to stable in Chrome 138. These on-device APIs promise reduced latency and improved privacy, but they also fragment the web platform further—creating Chrome-specific capabilities that other browsers may struggle to match.

Key takeaways:

  • CSS carousels eliminate JavaScript dependencies with 90% code reduction potential
  • AI integration in DevTools automates performance analysis and code generation
  • Built-in AI APIs provide on-device processing for privacy and speed benefits

Tradeoffs:

  • CSS carousel primitives reduce JavaScript complexity but increase browser-specific dependencies
  • AI-powered development tools boost productivity but may reduce developers' deep technical understanding
  • Chrome-exclusive AI APIs improve user experience but fragment cross-browser compatibility

Link: Google I/O 2025: Developer keynote

Baseline Support Comes to Visual Studio Code

TLDR: Visual Studio Code now displays browser compatibility information using Baseline status instead of version numbers, making it easier for developers to understand feature support at a glance.

Summary:

Visual Studio Code version 1.100 introduces Baseline integration, fundamentally changing how developers receive browser compatibility feedback. Instead of showing cryptic version numbers like "Edge 88, Firefox 89, Safari 15," VS Code now displays human-readable Baseline status such as "Widely available in major browsers (Baseline since 2021)."

This change addresses a real developer pain point. Previously, determining whether a CSS property or JavaScript feature met your browser support requirements meant mentally calculating whether specific browser versions aligned with your target audience. The cognitive overhead was significant—developers had to maintain mental maps of browser version timelines and market share data.

Baseline simplifies this decision-making process by providing clear categories: features are either widely available, newly available, or limited in support. The year indicator gives developers temporal context about how long a feature has been stable, which correlates with real-world adoption patterns.

The integration works automatically without requiring extensions or configuration changes. This seamless experience reflects good platform design—the most impactful developer tools are often those that improve workflows without requiring conscious adoption decisions.

However, Baseline isn't perfect. It represents a simplified view of a complex compatibility landscape, potentially masking nuanced browser differences that matter for specific use cases. Some developers might find the abstraction too coarse for precise compatibility planning, particularly when dealing with progressive enhancement strategies or polyfill decisions.

Key takeaways:

  • VS Code 1.100+ displays Baseline status instead of browser version numbers
  • Integration works automatically without configuration or extensions
  • Provides temporal context showing how long features have been stable

Link: Visual Studio Code est désormais compatible avec la référence

Model Context Protocol: The New Web 2.0 Standard

TLDR: Model Context Protocol (MCP) enables AI applications to connect with external systems through a simple, open standard that's rapidly gaining adoption across the industry, echoing the collaborative spirit of early Web 2.0.

Summary:

Model Context Protocol represents something fascinating in the current AI landscape—a genuinely open standard that major players are adopting without the usual platform wars. Originally designed by Anthropic for Claude, MCP gained momentum when OpenAI decided to support it in ChatGPT, creating a de facto industry standard almost overnight.

The protocol itself is intentionally lightweight, perhaps even "under-specified" compared to the rigorous standards of earlier web protocols. This isn't necessarily a weakness—in fact, it mirrors how successful web standards actually emerge. The most enduring protocols often start as simple, practical solutions that get adopted widely before being formalized extensively.

MCP's value proposition is compelling: it provides a standardized way for AI applications to interact with external systems, from databases to calendars to development tools. Think of it as a universal adapter that lets any MCP-compatible AI assistant connect to any MCP-compatible service. This interoperability potential is reminiscent of the early Web 2.0 era, when platforms competed on features while maintaining open APIs.

The comparison to Web 2.0 is apt but requires nuance. True Web 2.0 platforms like Flickr and Del.icio.us built their entire value proposition around open data and interoperability. They succeeded because users could easily move their data and developers could build innovative integrations. Facebook and similar platforms killed this openness by creating walled gardens that trapped users and data.

MCP faces similar crossroads. Will it remain truly open, enabling a rich ecosystem of interoperable AI tools? Or will major players eventually create proprietary extensions that fragment the standard? The early signs are encouraging—the protocol's adoption by competing AI companies suggests genuine commitment to interoperability.

For developers and organizations, MCP offers practical benefits today. Instead of building custom integrations for each AI platform, you can implement MCP once and connect to multiple AI applications. This reduces integration complexity and future-proofs your investment in AI tooling.

Key takeaways:

  • MCP provides standardized connections between AI applications and external systems
  • Rapid cross-platform adoption suggests genuine industry commitment to interoperability
  • Echoes Web 2.0's collaborative approach to platform development

Link: What is the Model Context Protocol (MCP)?

Mozilla's Browser Competition Concerns

TLDR: Mozilla warns that proposed Google Search remedies could inadvertently harm browser competition by eliminating revenue-sharing agreements that fund independent browsers like Firefox.

Summary:

Mozilla's amicus brief in the Google Search antitrust case highlights a critical unintended consequence of well-intentioned competition remedies. While the goal of reducing Google's search dominance is laudable, prohibiting search revenue payments to independent browsers could paradoxically reduce competition in the browser market.

The economics are stark: Mozilla depends on Google's revenue-sharing payments to fund Firefox development and maintain Gecko, the only major browser engine not controlled by Apple, Google, or Microsoft. Without this funding, Firefox faces potential extinction, which would further consolidate browser market power among big tech companies.

This creates a fascinating policy dilemma. Google's search payments to Mozilla could be viewed as anticompetitive—they ensure Google remains the default search engine and potentially reduce search competition. But these same payments enable browser competition by funding the development of independent alternatives to Chrome and Safari.

Mozilla argues that Firefox actually increases search competition by offering users genuine choice. Unlike other browsers that lock users into specific search engines, Firefox provides multiple dynamic options for changing search providers. The company's brief notes their experience with Yahoo as default search from 2014-2017 demonstrated user preference for Google Search, suggesting the payments reflect genuine user choice rather than artificial lock-in.

The broader issue reveals how complex modern tech ecosystems have become. Competition in one market (search) interacts with competition in adjacent markets (browsers, operating systems) in ways that simple remedies can't address. Banning revenue-sharing might improve search competition while simultaneously harming browser competition.

This case illustrates why antitrust enforcement in tech requires nuanced understanding of ecosystem dynamics. Well-intentioned remedies that focus on one market segment can have devastating effects on competition in related markets. The challenge for regulators is crafting solutions that improve competition holistically rather than optimizing for single metrics.

Key takeaways:

  • Proposed Google Search remedies could eliminate funding for independent browsers
  • Firefox depends on Google revenue-sharing to compete with Big Tech browsers
  • Antitrust remedies must consider ecosystem-wide competition effects

Tradeoffs:

  • Improved search competition but reduced browser engine diversity
  • Short-term remedy success but long-term browser market consolidation

Link: The future of the web depends on getting this right

CSS Blob Shapes with clip-path: shape()

TLDR: The new CSS shape() function enables developers to create complex blob shapes using Bézier curves, eliminating the need for external tools or JavaScript-based solutions.

Summary:

Creating organic, blob-like shapes has traditionally required external tools, SVG manipulation, or complex JavaScript libraries. The new CSS shape() function changes this by providing native support for Bézier curves within CSS clipping paths, enabling developers to create sophisticated organic shapes directly in stylesheets.

The technique relies on understanding Bézier curve mathematics, specifically how control points influence curve behavior. The curve command allows developers to define quadratic or cubic curves between points, with control points determining the curve's shape and direction. The key insight is that curves are tangent to lines connecting start/end points with their control points.

For blob creation, the process involves several geometric steps: placing points around a circle, randomly moving them within a defined distance to create irregularity, doubling the point count by adding midpoints, and finally connecting everything with Bézier curves. The mathematical precision required might seem daunting, but the author provides a blob generator tool to handle the calculations.

What makes this approach particularly elegant is how it leverages CSS's native capabilities rather than requiring external dependencies. Blobs created with shape() are resolution-independent, performant, and integrate seamlessly with other CSS features like animations and transforms. This represents the kind of CSS evolution we should celebrate—adding sophisticated capabilities while maintaining the language's declarative nature.

However, browser support remains limited to Chrome, Edge, and Safari, which constrains practical adoption. The mathematical complexity also means most developers will rely on generators rather than hand-coding blob shapes, which somewhat limits the technique's accessibility.

The broader implication is how CSS continues evolving toward more sophisticated graphics capabilities. We're seeing CSS absorb functionality that previously required external tools or libraries, which simplifies development workflows but also increases the language's complexity. The challenge is maintaining CSS's approachable nature while adding powerful features.

Key takeaways:

  • CSS shape() function enables native blob creation using Bézier curves
  • Technique requires understanding of curve mathematics and control points
  • Browser support limited to Chrome, Edge, and Safari currently

Tradeoffs:

  • Native CSS implementation but limited browser support
  • Sophisticated visual capabilities but increased mathematical complexity

Link: Creating Blob Shapes using clip-path: shape()

Email Accessibility Crisis Continues

TLDR: Analysis of 443,585 HTML emails reveals that 99.89% contain serious accessibility issues, with only 21 emails from two brands passing automated checks, highlighting systemic failures across the email ecosystem.

Summary:

The Email Markup Consortium's 2025 accessibility report delivers sobering news: despite years of awareness campaigns and tooling improvements, HTML email accessibility remains catastrophically poor. The scale of failure is staggering—nearly every email analyzed contained serious or critical accessibility issues that would prevent screen reader users and others with disabilities from accessing content effectively.

The root causes are systemic rather than individual. Developers experienced with web accessibility often lack email-specific knowledge about the constraints and quirks of email client rendering. Drag-and-drop email builders, used by countless marketers and small businesses, generate inaccessible markup by default. Email clients themselves fail to support HTML and CSS features that would enable accessible authoring practices.

What's particularly frustrating is that most issues aren't edge cases requiring specialized expertise. These are basic, machine-checkable failures—missing alt text, poor color contrast, inadequate heading structures, and missing semantic markup. The problems are entirely preventable with proper tooling and processes.

The report identifies a few bright spots, notably brands like Parcel and NaomiWest.ca whose emails passed all automated tests. Their success demonstrates that accessible email is absolutely achievable when organizations prioritize it and implement proper quality assurance processes.

The email client analysis adds another layer of concern. Only one email client supports all HTML and CSS accessibility features tested. This creates a vicious cycle—developers can't rely on accessibility features being supported, so they don't implement them, which reduces pressure on email clients to improve support.

The report calls for shared responsibility across the ecosystem. Senders need to audit their emails using tools like Parcel. Template and ESP providers must improve their generated markup and add accessibility checks. Email clients need to support the HTML and CSS features necessary for accessible authoring.

This situation reflects broader patterns in digital accessibility—awareness exists, tools are available, but systemic implementation remains poor. The email ecosystem's fragmentation and complexity exacerbate these challenges, but they don't excuse the widespread neglect of accessibility requirements.

Key takeaways:

  • 99.89% of HTML emails contain serious accessibility issues
  • Problems are systemic across developers, tools, and email clients
  • Only one email client supports all tested accessibility features

Link: Accessibility Report 2025


Disclaimer: This article was generated using newsletter-ai powered by claude-sonnet-4-20250514 LLM. While we strive for accuracy, please verify critical information independently.