Recent content on UI Brainstorms & Design
Baseline coverage skews heavily toward one half of the model. A feature lands in all three engines, gets written up as Newly Available, and the posts appear within days. The second milestone — Widely Available, roughly 30 months later — arrives without announcement, and it is the one that actually changes what you can ship without a fallback. The first half of 2026 was unusually significant on…
Large stylesheets eventually fight the cascade. A card component needs green image borders; a gallery elsewhere needs red ones. Without boundaries, you write .card img vs .gallery img , then .sidebar .card img when marketing drops a card inside the sidebar, then someone adds !important because a utility class won. CSS @scope — now Baseline Newly Available as of December 2025 with Firefox 146…
For years, positioning a tooltip next to its trigger required JavaScript. You needed a library — Floating UI, Popper.js, Tippy.js — to calculate coordinates, detect viewport edges, flip directions on overflow, and reposition on scroll. The need was real and the tooling was competent, but the dependency was always a workaround for a gap in CSS itself. It’s part of a broader pattern of CSS…
Large CSS codebases develop a particular kind of technical debt: specificity inflation. A developer needs to override a component style, so they add an extra class. Another override needs an ID selector. A third resorts to !important . The cascade becomes an arms race rather than a system, and each escalation makes the next override harder to write — the same problem our guide to the CSS cascade…
In June 2005, Steve Jobs stood at a Stanford graduation podium and told a story about dropping out of college. Not the triumphant version of the story — not the version about destiny and success. He told it as a story about fear, guilt, and wandering. He had enrolled at Reed College in Portland, Oregon in September 1972. His parents, working-class adoptive parents who had saved for years, had…
CSS is a large specification written across dozens of modules. Each module has its own editors, its own development timeline, and its own learning curve. This index maps the major modules and concepts — organized by topic — so you can find what you need without starting from a search query. Each section summarizes what the area covers and links to deeper treatment where it exists on this site.…
Flexbox is the dominant tool for component-level responsive layout — the layer between a macro grid system and individual element styling. Its wrapping behavior, directional switching, and order control map cleanly to the problems that come up repeatedly in mobile layout: stacked navigation, reordered content, flexible card rows, and sticky footers. This article covers the patterns that work and…
The three flex sizing properties — flex-grow , flex-shrink , and flex-basis — are almost always written together as the flex shorthand. They’re also almost always misunderstood individually. When a flex item behaves unexpectedly, the cause is usually a misread of how these three properties interact. This article explains each one precisely, then shows how they work together. What Free Space…
WCAG 2.1 is the current stable version of the Web Content Accessibility Guidelines that most legal and regulatory frameworks reference. It extended WCAG 2.0 with 17 new success criteria — primarily addressing mobile interaction, low vision users, and cognitive accessibility — while keeping the original 2.0 criteria unchanged. This article covers what changed, what the new criteria require…
grid-template-areas is one of the most readable things in CSS. Instead of describing a layout through numeric column and row coordinates, you draw it — using a string of names that mirrors the visual arrangement you want. A two-column dashboard with a header and footer looks, in the CSS, like a two-column dashboard with a header and footer. This article covers the syntax in full, explains how…
Heading elements are among the oldest navigational affordances on the web. Long before nav landmarks, skip links, or ARIA roles, h1 through h6 gave screen reader users a way to scan a page — jumping between headings the way a sighted reader skims bold section titles in a magazine. That model still works. The story of how the HTML5 specification tried to improve on it, failed quietly, and was…
Caching is one of those subjects where a little knowledge is genuinely dangerous. Setting max-age=3600 feels responsible — your server is no longer hammered by repeat requests — but users still report seeing stale content an hour later, or much longer, depending on where those responses landed. The problem is rarely the directive itself. It is usually a misunderstanding of the cache hierarchy, a…
DevTools shipped with the browser. Most developers use maybe 20% of what’s there. The remaining 80% includes tools that can cut hours from a debugging session, expose layout bugs that would otherwise take days to isolate, and surface accessibility problems before a screen reader user reports them. What follows is a tour of the features that reward closer attention — with an emphasis on…
Forms are where users do the work that matters — signing up, checking out, submitting a report, booking an appointment. They are also where accessible HTML most frequently breaks down. The gap between a form that looks fine and one that works for everyone using keyboard navigation, a screen reader, or voice input is almost always a gap in markup, not design. This piece covers the patterns that…
Typography on the web is not a design problem — it is a rendering problem. The decisions that matter most are made in CSS, not in a type specimen or a Figma mockup. Getting them right means understanding what each property actually does at the browser level, not just what it looks like on your 27-inch monitor at 1x. This covers the CSS rendering side of web typography: sizing units, line height…
Motion in an interface is a claim on attention. Every transition, every animated state change tells the user: look here, something changed . The question every animation decision should answer is whether that claim is warranted — and whether the mechanism you chose to make it is the right one. CSS gives you two distinct tools for motion: transitions and animations. They overlap in output but…
The double-dash prefix is easy to recognize, but the mechanics behind it are frequently misunderstood. CSS custom properties — defined in the CSS Custom Properties for Cascading Variables Module Level 1 — are not just a native substitute for Sass variables. They behave differently at a fundamental level, and those differences are what make patterns like dynamic theming, design token architectures,…
Google’s Core Web Vitals program emerged from a straightforward problem: lab benchmarks and synthetic audits measure what engineers care about, not what users experience. The Chrome team wanted a small set of metrics grounded in real-world field data — measurements collected from actual Chrome sessions across millions of URLs — that could serve as a proxy for perceived quality. The result is…
WCAG 2.2 was published by the W3C as an official recommendation in October 2023 . It extends 2.1 with nine new or modified success criteria, removes one that was already redundant in practice, and quietly subsumes another into a stronger version. For developers working toward compliance — whether for legal reasons, procurement requirements, or genuine inclusion — the changes are meaningful and, in…
The WAI-ARIA specification opens with what it calls the “first rule of ARIA use”: if you can use a native HTML element or attribute with the semantics and behavior you require already built in, do that instead. ARIA does not fix broken HTML — it supplements what the browser’s accessibility tree exposes to assistive technology. Misapplied, it actively degrades the experience for…
Serving a single image file to every device — a 2400px wide JPEG compressed for desktop monitors — has a measurable cost. A phone on a slow mobile connection downloads far more data than it can render, burning bandwidth and battery. At the other end, a high-density display receiving a 1x image renders it blurry, because the browser stretches it to meet pixel density. The srcset attribute and the…
Date and time are among the most information-dense elements in any UI. A publication timestamp, a calendar grid, an event badge — each carries structural meaning that CSS alone cannot supply. Getting the CSS right starts with getting the HTML right, and the HTML starts with <time> . The <time> Element: Semantic Foundation Before a single line of CSS is written, the <time> element deserves…
Progressive enhancement in web development is one of those ideas that gets filed away as historical best practice — useful once, superseded now. The argument runs something like this: modern browsers are reliable, JavaScript is everywhere, and the days of building sites that work in Lynx or on a Nokia 3310 are gone. This argument is wrong, and the mistake is in the premise. Progressive enhancement…
The shift from XHTML to HTML5 was not simply a version bump. It was the resolution of a genuine philosophical dispute about what the web should be — a document markup language with loose, forgiving rules, or a rigorous application of XML discipline that would make the web more machine-readable and consistent. That dispute played out across nearly a decade, involved standards bodies, browser…
CSS Grid is a two-dimensional layout system — it handles rows and columns simultaneously, in a single coordinated model. That distinction separates it from Flexbox, which operates along a single axis at a time. Understanding where that line falls is the foundation for choosing the right tool, and for using Grid without fighting it. The Grid Container Model Declaring display: grid on an element…
The <abbr> element occupies a small but specific corner of HTML semantics . It marks up abbreviations and acronyms — shortened forms of longer terms — and optionally carries a title attribute that exposes the full expansion. Used well, it improves clarity for screen reader users and gives browsers and search tools a structured signal about terminology. Used carelessly, it adds noise without…
The contrast ratio between a foreground and background color is one of the most concrete, testable accessibility requirements in WCAG 2.1 . Unlike some success criteria that require judgment calls, contrast can be computed. A ratio is either sufficient or it is not. Yet the math behind it trips up developers and designers regularly — partly because the formula is counterintuitive, and partly…
Flexbox has been production-ready since around 2015, yet it remains a frequent source of confusion — not because the spec is poorly designed, but because most introductions lead with property lists rather than the underlying model. Once you internalize the axis system that governs every flexbox decision, the properties stop feeling arbitrary and start reading like a coherent vocabulary. That model…
Apache’s .htaccess file sits at the intersection of web server configuration and everyday development work. For developers who lack root access to the main server configuration — shared hosting environments, managed WordPress hosts, agency handoffs — it is often the only lever available for controlling how URLs behave. Used carefully, it is a capable tool. Used carelessly, it can silently…
Every time a browser renders a page, it resolves thousands of potential conflicts: multiple rules targeting the same element, declarations scattered across author stylesheets and browser defaults, inline styles competing with external files. The mechanism that settles all of these disputes is the CSS cascade — and understanding it precisely is the difference between CSS that you control and CSS…
A URL is a contract. When you publish a resource at a given address, anyone who links to it, bookmarks it, or indexes it is trusting that address to remain valid. Tim Berners-Lee made this case plainly in Cool URIs don’t change — a document from 1998 that reads as freshly relevant today as it did when the web was young. His central argument: the only good reason for a URI to stop working is…
What Lynx Is — and Why It’s Still Worth Your Time Lynx is a fully featured text-based web browser that has been in continuous development since 1992. It renders no images, applies no CSS, executes no JavaScript. What it renders is your HTML — and nothing else. In a modern workflow dominated by DevTools, Lighthouse scores, and automated accessibility checkers, Lynx sounds like an antique. It…
Typography is infrastructure. Before a user reads a headline, a CTA, or a body paragraph, the browser has already made a series of decisions about how to render text — decisions shaped almost entirely by how you wrote your font declarations. Those decisions determine whether the page feels immediate or janky, polished or broken. A poorly loaded font produces a worse first impression than no custom…
The Case for Meaning Over Appearance Every HTML element you write is a decision about what a piece of content is — not just what it looks like. That distinction, easy to overlook when you’re shipping features and meeting deadlines, is precisely where interfaces start to diverge: those that work for everyone versus those that work only for a narrow slice of users navigating under ideal…
A sighted visitor scans a page visually and jumps straight to the content they want — skipping past the header, ignoring the sidebar, landing on the main article. A screen reader user, navigating linearly through the page’s structure, doesn’t get that shortcut unless the page explicitly provides one. ARIA landmark roles are that shortcut: a small, standardized vocabulary of region…
“It works on my machine” has a specific, unglamorous fix: testing on machines that aren’t yours. Cross-browser compatibility testing is the practice of verifying a site’s layout, functionality, and performance across the actual mix of browsers and devices real visitors use — not just the one browser installed on the developer’s laptop. Done well, it’s a…
Long before a form submission reaches a server, the browser itself can catch a meaningful share of invalid input — a missing required field, a malformed email address, a number outside an allowed range — using nothing but native HTML attributes. This built-in layer is called constraint validation, and it’s frequently under-used because developers reach for custom JavaScript validation…
CSS offers more than a dozen length units, but in practice most projects rely on four: px , em , rem , and the viewport units ( vw / vh and their relatives). Each resolves differently, and choosing the wrong one for a given property is a common source of layouts that look correct in isolation and break the moment a user changes their browser’s font-size setting or resizes the window. px: The…
A media query is a conditional block of CSS that applies only when a stated condition about the viewport, device, or user preference is true. They are the mechanism underneath every “responsive” layout — the thing that makes a three-column grid collapse to one column on a phone, or a navigation bar swap for a hamburger menu below a certain width. The syntax is simple. Choosing where to…
CSS was never designed with large-scale application development in mind. It has no native concept of variables that work consistently across all browsers still in wide use, no functions, no way to nest a selector inside its parent’s declaration block, and no mechanism for splitting a stylesheet into reusable, importable partials without a separate HTTP request per file. Preprocessors — most…
For most of the 2000s, embedding video or audio in a web page meant embedding a plugin. Flash was the dominant choice, with QuickTime, Windows Media, and RealPlayer as alternatives — each requiring the visitor to have the right plugin installed, each with its own accessibility problems, and none of it addressable by CSS or scriptable through a standard DOM API. The HTML5 specification’s…
Every element rendered in a browser is a rectangular box, and the CSS box model is the set of rules that determines how big that box actually is. It sounds simple until a developer sets width: 300px on an element, adds padding: 20px and a border: 2px solid , and discovers the element now renders at 344px wide instead of 300px. That gap between the declared width and the rendered width is the box…