Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
How CSS Decides: The Cascade, Specificity, Inheritance and Cascade Layers (@layer)
The cascade decides which of the values written for an element wins, in this order: origin and importance, context, the style attribute, layers, specificity, order of appearance; layers come before specificity. We debug Bookstore's "why isn't this button red?" bug step by step through the protocol DevTools uses, move third-party CSS below our own styles with @layer, and measure inherit/initial/unset/revert/revert-layer in two browser engines.
Modern Selectors: :is(), :where(), :has(), :not() and State Pseudo-classes
:is() takes its specificity from its most specific argument, while :where() is always zero; :not() and :has() are calculated like :is(). On Bookstore's catalog and checkout pages we measure specificity through the DevTools protocol, style a book card without a cover with :has() and an invalid form row with :user-invalid without JavaScript, and show the real behavior of :focus-visible, :open, :nth-child(of S) and :empty in Chromium and WebKit.
The Box Model, Sizing and Logical Properties: box-sizing, Margin Collapse, Intrinsic Sizes and Units
With box-sizing: border-box, width measures the whole box; in normal flow stacked vertical margins do not add up, the larger one wins, while in flex and grid they add up. On Bookstore's book card and detail page we measure the box model, when margin collapse happens and when it doesn't, min-content/max-content/fit-content, the cover ratio with aspect-ratio, rem/em/ch and svh/lvh/dvh units, and RTL-ready logical properties in Chromium and WebKit.
Normal Flow, display and Positioning: sticky, z-index, Stacking Contexts and the Top Layer
z-index is only compared between siblings in the same stacking context; sticky sticks relative to the nearest scroll container, which is why overflow: hidden on an ancestor breaks it. On Bookstore's catalog page we keep a float inside its box with flow-root, measure the two-value syntax of display, fix the sticky toolbar with overflow-x: clip, move a badge under the header with isolation: isolate, and show in Chromium and WebKit that a modal dialog in the top layer beats every z-index.
Flexbox: One-Dimensional Layout, flex-grow/shrink/basis and Real-World Scenarios
Flexbox hands out free space by flex-grow and takes away missing space weighted by flex-shrink × flex-basis, so the larger item shrinks more. We lay out Bookstore's header, catalog cards and coupon field with Flexbox, and measure in Chromium and WebKit what the flex shorthands expand to, the min-width: auto trap that pushes a long book title out of its line, and the fact that order does not change the Tab sequence.
CSS Grid 1: Tracks, fr, repeat(auto-fill, minmax()) and Named Grid Areas
repeat(auto-fill, minmax(14rem, 1fr)) builds a responsive grid without media queries by creating as many columns as fit the container; auto-fit collapses the empty columns to zero and stretches the items. We build Bookstore's catalog grid and page skeleton with Grid, and measure in Chromium and WebKit the difference between fr and minmax(0, 1fr), the implicit grid, named lines, grid-template-areas and how dense breaks the DOM order.
CSS Grid 2: Subgrid, Alignment and the "Grid or Flexbox?" Decision
Subgrid lets a card borrow its rows from the list instead of working them out itself, so the title, author and price rows of cards with titles of different lengths line up. We move the Bookstore catalog to subgrid, measure the justify/align and place-* properties, choose between Grid and Flexbox with the content-out versus layout-in rule, and look at where grid-lanes stands for masonry in November 2026.
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.
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.
Custom Properties and Theming: var(), @property and Dark Mode with light-dark()
Custom properties live at run time inside the cascade and inheritance; for a dark theme it is enough to define the colour tokens with light-dark() and switch color-scheme. On Bookstore we measure the var() fallback, the invalid at computed-value time trap, typed and animatable variables with @property, an inline script that remembers the user's choice in localStorage without a flash of the wrong theme, and a category colour coming from the CMS.
Modern Color and CSS Math: oklch(), color-mix(), Relative Color, contrast-color() and Math Functions
oklch() measures lightness the way the human eye perceives it, so a yellow and a blue with the same L look equally bright, while in HSL the contrast of white text ranges from 1.07 to 8.59. We derive shades from Bookstore's category colour with relative colour, color-mix() and alpha(), and measure the limit of contrast-color(), round/mod/rem, progress() and typed arithmetic, and the not-yet-Baseline if(), @function and random().
Native CSS Nesting and @scope: Component Styles Without a Preprocessor
Native CSS nesting makes writing shorter but isolates nothing; @scope makes a rule apply from a scope root down to a limit and keeps user content out with a donut scope. We rewrite the Bookstore card with nesting and prove with a computed-style hash that nothing changed, and measure how & differs from Sass, the specificity coming from :is(), proximity, and a comparison with Angular, ASP.NET Core CSS isolation and Shadow DOM.