Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Fonts and @font-face: the font Shorthand, font-family Stacks, Variable Fonts and font-variation-settings
You define a self-hosted variable font with @font-face using a weight range (font-weight: 100 900), a separate italic face and unicode-range; you set the weight with font-weight and keep font-variation-settings for custom axes. With Fraunces on Bookstore's headings we measure, in Chromium and WebKit, how the font shorthand resets line-height, how a single-value descriptor breaks 700, faux italic, and which file the letters ğ, ş and İ come from.
Text Styling: the text-decoration Family, text-underline-offset, text-shadow, letter-spacing, text-indent and vertical-align
A readable link underline is written with longhands (text-decoration-thickness, text-underline-offset in em), letter-spacing is given in em or percent, and an inline icon is aligned to the digits with vertical-align. On Bookstore's catalog we measure, in Chromium and WebKit, how the text-decoration shorthand resets the thickness, how em is inherited as px, text-transform with lang="tr", the gap under an img and initial-letter support.
Line Breaking and Overflow: white-space, overflow-wrap, word-break, hyphens, text-wrap: balance/pretty and Multi-Line Truncation
Use overflow-wrap: anywhere for long URLs and ISBNs, white-space: pre-line for user text, text-wrap: balance for headings, and the -webkit-line-clamp recipe for multi-line truncation; do not rely on hyphens: auto for Turkish text. On Bookstore's book detail page we measure the min-content difference between break-word and anywhere, Turkish hyphenation failing in both engines, balance and pretty results, and WebKit not painting ::first-letter in a clamped box.
Backgrounds and Gradients: background-image, size, position, Multiple Layers, linear/radial/conic-gradient and image-set()
To keep text readable on an image, write a semi-transparent gradient layer before the image in background-image, pick the image with image-set() as 1x/2x and AVIF, and use the background shorthand with care because it also resets background-color. On Bookstore's campaign banner we measure the contrast ratio by reading pixels, fix the gray midpoint of sRGB with in oklch, and build a rating ring with conic-gradient and a skeleton that respects reduced motion.
Borders, border-radius, outline and box-shadow: Edges, Shadows and the Focus Ring
You show a selected or hover state with color, an inset box-shadow or an outline instead of a thicker border, and you draw the focus ring with :focus-visible and outline, because box-shadow disappears in forced colors mode. On Bookstore's checkout and catalog we measure a border pushing content, the border shorthand wiping border-image, 50% versus 9999px pills, border-image ignoring border-radius, and a shadow vanishing in forced colors.
Transforms: translate, rotate, scale, Individual Transform Properties, transform-origin and 3D
Transform functions apply from left to right and each one changes the coordinate system of the next, so their order changes the result; the individual translate, rotate and scale properties always apply in that fixed order, whatever order you write them in, and combine with transform. The post covers transform-origin, transform-box in SVG, why transforms do not affect layout, and a cover hover, a 3D cover flip and a cart icon in Bookstore, with measurements.
filter, backdrop-filter and Blend Modes: Processing Images and Backdrops with CSS
filter processes an element and all its children as one image, applying its functions from left to right, while backdrop-filter processes what is behind the element; blend modes combine the colors of layers, and isolation: isolate keeps that blending inside a component. The post measures drop-shadow against box-shadow, a sold-out cover, a frosted filter bar with a fallback background and a duotone banner built with background-blend-mode in Bookstore.
clip-path, mask and shape-outside: Clipping, Masking and Flowing Text Around Shapes
clip-path paints only the inside of a shape and also does hit testing against it, mask-image gives partial visibility through an image's alpha channel, and shape-outside flows the text around a floated element along a shape; none of them changes the box in the layout. The post measures shape() against path(), a masked icon in forced colors, and a round author photo, a cover strip with faded edges and text flowing around a tilted book in Bookstore.
Styling Images and SVG Icons: the img Reset, object-position, image-rendering, fill, stroke and currentColor
The gap under an image comes from img being inline; a reset of display: block, max-inline-size: 100% and block-size: auto removes it, keeps the ratio and still lets the width/height attributes reserve space. The post measures object-position for the focal point, image-rendering and image-orientation, fill, stroke and currentColor in inline SVG, Bookstore's icon set from a single sprite, and logo colors with light-dark() in dark mode.
Pseudo-elements and Generated Content: ::before/::after, content, Counters, @counter-style, ::marker and list-style
::before and ::after exist only when the content property has a value other than none; generated content reaches screen readers but is not copied or searched, so it is for decoration and numbers while information stays in the HTML. The post measures alternative text (content: "★" / ""), nested numbering with counters(), a @counter-style for the Turkish alphabet, string markers and the Safari limit of ::marker, and Bookstore's checkout steps.
Overflow and Scroll Behavior: overflow: clip, scroll-snap, scroll-padding, overscroll-behavior, touch-action and Scrollbar Styling
overflow: hidden still makes the box a scroll container, overflow: clip does not; for a scrolling strip scroll-snap-type with scroll-snap-align is enough, and scroll-padding keeps anchor targets out from under a sticky bar. The post measures Bookstore's Recommended strip, overscroll-behavior and scroll lock in the cart drawer, touch-action, and scrollbar-gutter/scrollbar-color in Chromium and WebKit.
Form Controls and Interaction Properties: accent-color, appearance, caret-color, field-sizing, cursor, pointer-events and user-select
Tie form controls to the page with font: inherit and color-scheme first and color them with accent-color; in a custom control built with appearance: none, show the state with a shape, not a color. The post measures Bookstore's checkout form (stepper, gift wrap checkbox, a note that grows with field-sizing) and pointer-events, user-select, cursor and interactivity in Chromium and WebKit.