Topic
84 posts tagged “CSS”.
Takina · · 4 min read The HTML details and summary elements build native disclosure widgets and accordions with no JavaScript. How they work, how to style them, and pitfalls.
Takina · · 4 min read CSS pointer-events: none makes an element ignore mouse, touch, and pen input so clicks pass through. How it works, good uses, and why it doesn't disable.
Takina · · 4 min read CSS @starting-style defines an element's before-state on first render, so transitions can animate elements as they appear, even from display: none.
Takina · · 4 min read Container query units like cqw and cqi size elements relative to their containing element, not the viewport — here's how and when to use them.
Takina · · 4 min read Relative color syntax lets CSS derive a new color from an existing one by adjusting its channels directly, no preprocessor or JS required.
Takina · · 4 min read CSS subgrid lets a nested grid item inherit its parent's track sizing, so children can align to the same columns or rows across unrelated containers.
Takina · · 4 min read The :focus-within pseudo-class styles a parent element when any descendant has focus — perfect for highlighting a form field's container.
Takina · · 4 min read The CSS field-sizing property lets form controls like textareas grow to fit their content automatically, without JavaScript resize listeners.
Takina · · 3 min read CSS now styles scrollbars natively with scrollbar-color and scrollbar-width, replacing years of vendor-prefixed hacks. Here's how they work.
Takina · · 4 min read CSS color-scheme tells the browser which themes a page supports so native form controls, scrollbars, and UI render in dark mode without extra CSS.
Takina · · 4 min read The CSS accent-color property recolors native checkboxes, radios, and range inputs without replacing them with custom-built controls.
Takina · · 4 min read A variable font packs every weight, width, and style into a single file, controlled with CSS — cutting requests and enabling fluid typography.
Takina · · 4 min read BEM and utility-first CSS (Tailwind's model) solve the same styling problem in opposite ways. How each works, and when to reach for one over the other.
Takina · · 5 min read shape-outside lets text wrap around circles, polygons, and image silhouettes instead of a floated element's rectangular box. How it works, with examples.
Takina · · 4 min read CSS trig functions like sin(), cos(), and atan2() let you compute angles and coordinates directly in stylesheets, no JavaScript required. How they work.
Takina · · 3 min read overscroll-behavior stops scroll chaining and pull-to-refresh bounce at a container's edge. How the property works and when to use it.
Takina · · 4 min read CSS pseudo-classes like :valid, :invalid, :required, and :user-invalid style form feedback natively, without JavaScript watching every keystroke.
Takina · · 5 min read The CSS contain property tells the browser an element's layout, paint, or size won't affect the rest of the page — unlocking safe, targeted rendering shortcuts.
Takina · · 4 min read The overflow property controls what happens when content doesn't fit its box. A rundown of visible, hidden, scroll, auto, and clip — and when to use each.
Takina · · 3 min read The CSS filter property applies blur, brightness, contrast, grayscale, and other graphical effects directly to an element, no image editor required.
Takina · · 4 min read CSS @supports lets a stylesheet test whether a browser supports a property or selector before using it. How feature queries work and when to reach for them.
Takina · · 4 min read Outline and border both draw lines around an element, but only one affects layout. Here's when to use each, including for accessible focus states.
Takina · · 4 min read position: sticky toggles between relative and fixed based on scroll position within its containing block — no JavaScript scroll listener required.
Takina · · 4 min read A design token is a named, platform-agnostic value — a color, spacing unit, font size — that keeps design and code in sync across a product.
Takina · · 3 min read grid-auto-flow: dense reorders grid items to fill leftover gaps automatically — how it works, when to use it, and the accessibility tradeoff it hides.
Takina · · 4 min read The line-clamp property truncates text to a fixed number of lines and adds an ellipsis, without JavaScript or a fixed-height container.
Takina · · 4 min read Media queries respond to the viewport size; container queries respond to a component's own container. When to reach for each in a responsive layout.
Takina · · 3 min read CSS @scope limits selectors to a subtree of the DOM, giving native scoped styling without the specificity wars of global stylesheets.
Takina · · 4 min read oklch(), hsl(), and rgb() define color differently in CSS. How each works, why oklch is perceptually uniform, and when to reach for which.
Takina · · 4 min read CSS blend modes combine an element's colors with what's behind it, using mix-blend-mode and background-blend-mode instead of extra markup or canvas tricks.
Takina · · 5 min read The CSS writing-mode property switches text flow between horizontal and vertical, and it's the foundation logical properties like margin-inline build on.
Takina · · 3 min read CSS color-mix() blends two colors in a chosen color space right in a stylesheet, replacing the color math Sass and JavaScript used to handle.
Takina · · 4 min read CSS :target styles the element whose ID matches the URL fragment, enabling tabs, modals, and highlights with zero JavaScript. How it works, with examples.
Takina · · 4 min read CSS transforms move, resize, and rotate elements without triggering layout. How translate, scale, rotate, and skew work, and why they're fast.
Takina · · 4 min read How flex-grow, flex-shrink, and flex-basis actually distribute space in a flex container, with the flex shorthand values worth memorizing.
Takina · · 3 min read The CSS gap property adds space between flex and grid items without margin hacks, and it works identically across both layout modes.
Takina · · 4 min read CSS media queries apply styles conditionally based on viewport size, device features, and user preferences like color scheme or reduced motion.
Takina · · 4 min read The CSS :not() selector excludes elements matching an argument list from a rule, letting you style everything except specific cases without extra classes.
Takina · · 4 min read The prefers-reduced-motion media query detects a user's OS-level motion setting so CSS animations can be toned down or removed for people who need it.
Takina · · 4 min read object-fit controls how an image or video is cropped inside its box, and object-position controls which part of it stays visible. How they work together.
Takina · · 5 min read CSS's four global keywords control where a property's value comes from. How inherit, initial, unset, and revert differ, with a comparison table.
Takina · · 4 min read dvh, svh, and lvh fix the classic mobile vh bug where browser toolbars cut off full-height layouts. Here's what each unit measures and when to use it.
Takina · · 4 min read repeat() and minmax() let CSS Grid build responsive layouts without media queries. How the two functions combine, and common patterns.
Takina · · 4 min read Z-index only compares elements within the same stacking context. What creates a new context, how they nest, and why z-index: 9999 sometimes fails.
Takina · · 5 min read How ::before and ::after generate content without extra markup, which properties they need, and common patterns like icons and counters.
Takina · · 4 min read The Popover API gives HTML a built-in popover element with the popover attribute — top-layer rendering, light-dismiss, and no JavaScript required.
Takina · · 5 min read The CSS will-change property hints the browser to prepare an element for an upcoming change, moving it to its own compositor layer. When to use it and when not to.
Takina · · 4 min read CSS Houdini is a set of low-level browser APIs that let JavaScript hook into the CSS rendering pipeline itself, instead of working around it.
Takina · · 3 min read The :nth-child() family selects elements by position among siblings, using a simple an+b formula. How it works and where it beats manually added classes.
Takina · · 4 min read The CSS font-display property controls whether text waits for a web font or renders in a fallback first. Here's how swap, block, and optional differ.
Takina · · 4 min read grid-template-areas lets you name grid regions and place items by name instead of row and column numbers, turning your CSS into a visual map of the layout.
Takina · · 4 min read CSS gradients render smooth color transitions directly in the browser — no image files. How linear, radial, and conic gradients work, with practical examples.
Takina · · 4 min read content-visibility lets the browser skip layout, style, and paint for off-screen content, cutting rendering cost on long pages without JavaScript.
Takina · · 4 min read backdrop-filter blurs, darkens, or otherwise adjusts whatever sits behind an element, powering frosted-glass UI without extra markup or JavaScript.
Takina · · 4 min read CSS counters auto-number elements with counter-reset, counter-increment, and the counter() function — no JavaScript or manual list numbers required.
Takina · · 4 min read CSS env() reads values from the browser or device itself, like safe-area insets on notched phones, instead of from your own custom properties.
Takina · · 4 min read :focus-visible only shows a focus ring for keyboard and other non-pointer input, while :focus matches every focus event, including mouse clicks.
Takina · · 4 min read CSS transitions animate a single state change; animations run independent, repeatable keyframe sequences. How to pick the right one for the job.
Takina · · 4 min read clip-path and mask-image clip or fade elements into custom shapes in pure CSS, replacing image editors and SVG sprites for cropping.
Takina · · 4 min read How to build dark mode in CSS with the prefers-color-scheme media query and the light-dark() color function, without duplicating your palette.
Takina · · 3 min read CSS scroll snap locks scrolling to fixed positions using scroll-snap-type and scroll-snap-align, no JavaScript required. Here's how it works.
Takina · · 4 min read CSS anchor positioning lets an element attach to another element's edges without JavaScript. How anchor(), position-anchor, and fallbacks work.
Takina · · 4 min read text-wrap: balance evens out line lengths in headlines using the browser's own layout engine, no JavaScript required. How it works and when to use it.
Takina · · 4 min read @property registers a CSS custom property with a type, initial value, and inheritance rule — unlocking smooth animation and real error checking.
Takina · · 4 min read The CSS aspect-ratio property locks a box's width-to-height ratio in one line, replacing the old padding-top percentage trick. Syntax, gotchas, and use cases.
Takina · · 4 min read Shadow DOM attaches an isolated DOM tree to an element so a component's styles and markup can't leak in or out. Here's how it actually works.
Takina · · 4 min read CSS clamp() scales a value smoothly between a minimum and maximum, letting font sizes and spacing flex with the viewport without media queries.
Takina · · 4 min read oklch(), lch(), and color-mix() let CSS describe color perceptually and blend it directly in the browser. How each works and when to reach for them.
Takina · · 4 min read CSS scroll-driven animations tie keyframes to scroll position instead of a clock, running smoothly off the main thread. Here's how the timeline model works.
Takina · · 3 min read CSS subgrid lets a nested grid item inherit its parent's row and column tracks, so child elements line up across unrelated components.
Takina · · 4 min read px is a fixed unit, em scales to a parent's font size, and rem scales to the root. How to choose between them for sizing and typography in CSS.
Takina · · 4 min read :is() and :where() group selector lists into one rule. Same matching logic, different specificity — here's when to reach for each.
Takina · · 4 min read CSS cascade layers let you group styles into named layers with explicit priority order, so specificity fights between resets, components, and overrides disappear.
Takina · · 4 min read :has() is CSS's relational pseudo-class — it lets a selector match an element based on what's inside or after it, finally enabling a parent selector.
Takina · · 5 min read Native CSS nesting lets you nest selectors inside a parent rule without a preprocessor. How the syntax works, the & selector, and specificity gotchas.
Takina · · 4 min read CSS custom properties are native variables that cascade, inherit, and update live at runtime. How they work, why they beat preprocessor variables.
Takina · · 3 min read CSS logical properties like margin-inline and padding-block size and space elements relative to writing direction, not fixed physical sides.
Takina · · 5 min read CSS specificity is the scoring system that decides which rule wins when several target the same element. How the weights work and how to keep them low.
Takina · · 4 min read The CSS box model defines how every element is sized — content, padding, border, and margin. Here's how the layers stack and why box-sizing matters.
Takina · · 4 min read Container queries let components respond to the space they're given, not the viewport. Here's how they work and when to reach for them.
Takina · · 4 min read Grid and Flexbox aren't rivals — they solve different problems. A simple rule of thumb, with examples, for choosing the right layout tool every time.
Takina · · 4 min read CSS is the language that styles every web page. Learn how selectors, the cascade, the box model, and modern layout tools like flexbox and grid work.
Takina · · 4 min read Tailwind v4 rewrites the engine from scratch for dramatically faster builds and moves configuration into CSS itself. Here's what changed and how to work with it.
Takina · · 4 min read The View Transitions API brings smooth, app-like transitions to the web without a heavy SPA framework. Here's how it works and how to use it today.
