CSS
Browse 72 articles in this topic. View all topics.
- CSS interpolate-size: Animate From 0 to auto
Animate between fixed and intrinsic sizes such as auto with CSS interpolate-size, while keeping a safe fallback.
- CSS Cascade Layers: What @layer Is Actually For
Use CSS cascade layers to decide which groups of styles win before specificity turns the stylesheet into an argument.
- Keep Component Styles Contained With CSS @scope
Use CSS @scope to contain component styles without tying every selector to a long chain of parent classes.
- Position Tooltips and Menus With CSS Anchor Positioning
Position tooltips, menus, and other floating UI next to an anchor without calculating coordinates in JavaScript.
- Kā saskaņot iekšējo un ārējo border-radius
Iemācies aprēķināt perfektu border-radius elementiem, kas ir viens otrā. Vienkārša formula, kas padarīs tavu UI dizainu tīru un profesionālu.
- Theme a Site with CSS Custom Properties
Use CSS custom properties to build light, dark, and brand themes without duplicating component styles.
- Getting border-radius right on nested elements
For nested rounded elements, subtract the gap from the outer border radius to keep the two curves aligned.
- Where I use CSS nesting and where I keep selectors flat
Use native CSS nesting for states, pseudo-elements, and media queries while keeping ordinary component selectors flat.
- Let Form Controls Size Themselves With field-sizing
CSS field-sizing lets inputs, textareas, and selects grow with their content, with no JavaScript measurement code.
- A Simpler Light and Dark Theme With CSS light-dark()
Use the CSS light-dark() function with color-scheme to keep theme colors together without repeating media queries.
- Invert an Image With One CSS Filter
Use CSS invert(), combine filters in a predictable order, and move to SVG filters only when the simple option is not enough.
- Why a Huge z-index Still Does Not Work
Understand CSS stacking contexts, positioned elements, and the reason z-index: 999999 sometimes changes nothing.
- Keeping Elements in Proportion With CSS aspect-ratio
Use the CSS aspect-ratio property to size images, videos, cards, and responsive layouts without the old padding hack.
- Better Headlines With CSS text-wrap
Use CSS text-wrap to balance headings, improve paragraph wrapping, or deliberately keep text on one line.
- How margin-inline follows the text direction
CSS margin-inline sets margins along the inline axis, making spacing work across writing modes and text directions.
- What CSS color-scheme Actually Does
Tell the browser which color schemes your page supports and let native controls match light or dark mode.
- Native CSS Nesting Without Sass
Use native CSS nesting to keep related selectors and media queries together without turning the stylesheet into a maze.
- Font sizes and spacing that scale with CSS clamp()
Use CSS clamp() to create fluid type and spacing with sensible minimum and maximum values.
- Aligning Nested Layouts With CSS Subgrid
Use CSS subgrid when items inside a nested grid need to align with tracks from the parent grid.
- Filtering Content With the CSS :has() Selector
Use CSS :has() and checkboxes to build a small content filter without JavaScript.