Some Things I Took Away From An Event Apart 2022 in Denver

Container Queries, ARIA, and the CSS Cascade: Notes from An Event Apart Denver 2022

The in-person conference circuit is back in full swing, and An Event Apart's Denver stop wrapped up with a day of talks squarely aimed at the modern front-end engineer. While the full three-day agenda covered a broad range of topics, the closing day focused heavily on CSS fundamentals, accessibility, and the infrastructure that powers fast websites. Here are the technical highlights that stood out from the sessions.

Website Performance Gets a Container Query Boost

Chris Coyier's expanded talk on the current state of the web opened the day with a deep dive into how we measure and implement responsive design. The headline topic was the growing support for container relative units. Unlike viewport-based units, these values are calculated relative to a parent container, which allows for far more precise fluid typography and layout adjustments.

To illustrate the difference from the traditional vh approach, he introduced the container query inline-size unit, cqi. In this model, 1cqi equals 1% of the container's inline size. When combined with the clamp() function, these units make it possible to scale type and spacing smoothly as the container resizes, rather than relying on approximations based on the viewport.

font-size: clamp(1rem, 1rem + 2vw, 2rem);

The conversation then shifted to the backend of performance, focusing on the evolution of edge computing. Coyier clarified a common misconception: edge hosting is not just about caching raster images or static assets on a CDN. The modern workflow extends this to the entire site by pre-building HTML, CSS, and JavaScript files and serving those compiled assets from geographically close servers—the core of the Jamstack concept.

The real breakthrough, however, is handling dynamic data at the edge. With handlers running on a single URL, developers can now fetch data in advance and inject it into the response before rendering. This "pre-build and serve on demand" model means dynamic content is computed and served from a CDN node close to the user, dramatically reducing latency for server-dependent requests.

Making Inline SVG Accessible by Default

Tolu Adegbite's session on WAI-ARIA was a comprehensive look at roles, states, and labeling, but the note most likely to change common markup patterns involves inline SVG. Because SVG is ultimately markup rather than a typical image asset, assistive technology does not always identify it as an image on its own.

<!-- Image tag is easily recognized as an image -->
<img src="cat.svg" alt="An illustrated brown and white tabby kitten looking lovingly into the camera.">

<!-- Could be an image, maybe not? -->
<svg viewBox="0 0 100 100">
  <!-- etc. -->
</svg>

To ensure screen readers treat an inline SVG correctly, it must be explicitly defined with a proper accessible role and a label. The fix is straightforward: assigning these attributes forces assistive tech to recognize the graphic as an image, making the content perceivable to users who rely on those tools.

<svg 
  role="image" 
  aria-label="An illustrated brown and white tabby kitten looking lovingly into the camera."
  viewBox="0 0 100 100"
>
  <!-- etc. -->
</svg>

Cascade Layers Rewrite Specificity Rules

Miriam Suzanne, a key contributor to the CSS Cascade Layers specification, walked attendees through a paradigm shift in how we manage style conflicts. The syntax is simple—declare @layer at the top of the stylesheet, list the layers in order of precedence, and write rules within them—but the mental model requires adjustment.

For developers accustomed to the old specificity wars, the radical change is that Cascade Layers allow a simple class selector to override an ID. This reordering of authority effectively neutralizes the need for the specificity-boosting selectors like :is(), :where(), and :has(), although those tools remain useful for other granular control.

Suzanne also provided historical context on !important, noting it was originally intended as an accessibility tool for users to override author styles. Over time, it became a crutch for developers. With Cascade Layers, she argued, we now have the ability to "prioritize layers and protect inheritance" without resorting to the !important hammer, a move that simplifies long-term stylesheet maintenance.

Reducing an Accessibility Backlog by Half

Dave Rupert's session offered a pragmatic workflow for when a site is hit with hundreds of automated accessibility tickets. Faced with an overwhelming GitHub queue, Rupert transferred the raw data into a more organized platform, hid irrelevant columns, categorized the issues, and grouped them logically. The key insight: automated tests often report the same underlying bug across multiple pages.

By deduplicating these repetitive findings, he was able to cut the active ticket load by nearly 50% with minimal code changes. The process highlighted that scanned errors are rarely one-off problems but often symptoms of a shared component or global style issue.

The broader takeaway was about the relationship between tools and humans. While automated auditors are useful, they lack context. Rupert emphasized prioritizing individuals and interactions over processes, using the data to ask better questions about root causes. Reorganizing the tickets not only clarified the technical work but also revealed a stark visual map of which impairments the product was failing, fostering more empathy for end users when prioritizing fixes.