Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Container Queries: Size Queries, Style Queries and Component-Based Responsive Design
A container query lets a component change its layout based on the width of the box it is placed in rather than the viewport; but container-type turns subgrid off, so the two cannot be used on the same element. We show the Bookstore card horizontal in a wide band and vertical in a narrow column, and measure cq units, the name-only and style queries that became Baseline in May 2026, and making an Angular host a container, in Chromium and WebKit.
Responsive Design: Mobile-First, Media Query Range Syntax, Fluid Typography with clamp() and User Preferences
A responsive page is written mobile-first, its breakpoints are chosen from the content in rem, and font sizes go inside clamp() as the sum of a rem and a vw; a heading that uses only vw does not grow at all under zoom. On Bookstore we measure, in Chromium and WebKit, the range syntax, why rem in a media query ignores the page's root font size, zoom, prefers-reduced-motion, prefers-contrast, prefers-color-scheme and hover/pointer.