css

tirtza-weinfeld's avatarfrom tirtza-weinfeld

Modern CSS features. Use for @function, style queries, range comparisons, if(), relative colors. (project)

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides comprehensive support for Modern CSS features (Chrome 139+), enabling the implementation of cutting-edge styling techniques such as @function rules, style queries, anchor positioning, and relative color syntax. It empowers developers to generate high-performance, maintainable, and native web interfaces by leveraging the latest browser capabilities without the need for heavy JavaScript dependencies.

Use Cases

  • Logic-based Styling: Creating reusable CSS logic using the new @function rule for fluid typography, responsive layouts, and complex mathematical calculations.
  • Advanced UI Positioning: Implementing high-performance tooltips, popovers, and floating menus using the native Anchor Positioning API.
  • Conditional Design: Applying styles dynamically based on container properties or custom variable ranges using Style Queries and the if() function.
  • Dynamic Theming: Utilizing Relative Color Syntax (oklch) to programmatically adjust color channels, opacities, and palettes directly within stylesheets.
  • Interactive Components: Building CSS-only carousels and fully customizable native select menus using Scroll Markers and the base-select appearance.
namecss
descriptionModern CSS features. Use for @function, style queries, range comparisons, if(), relative colors. (project)

Modern CSS (Chrome 139+)

@function Rule

Custom functions that accept arguments and return computed values.

  • Syntax: @function --name(--param) { result: value; }
  • Calling: --function-name(args) (double-dash prefix)
  • Default params: --param: default-value

Patterns

  • Negation: flip sign of numeric values → examples/function-negate.css
  • Opacity: oklch relative color → examples/function-opacity.css
  • Fluid scaling: clamp with container units → examples/function-fluid-type.css
  • Responsive layout: media query branching → examples/function-layout.css

Style Queries with Range Syntax

Compare numeric custom property values using operators.

  • Operators: >, <, >=, <=
  • Requirement: both sides must be same numeric type (length, percentage, angle, time)

Patterns

  • Container style query: @container style(--prop > value) → examples/style-query-range.css
  • if() function: inline conditionals → examples/if-conditional.css
  • Data attributes: attr(data-*, type(<type>)) with range queries → examples/style-query-attr.css

Anchor Positioning

Position elements relative to named anchors.

  • anchor-name: name an element as target
  • position-anchor: attach to named anchor
  • anchor(): reference anchor coordinates
  • position-area: logical placement (top, bottom, etc.)

Patterns

  • Follow hover: dynamic anchor switching → examples/anchor-follow.css
  • Fallback detection: style based on flip state → examples/anchor-fallback.css

Scroll State Queries

Style based on scroll direction. Requires container-type: scroll-state.

  • Values: top, bottom, left, right, block-start, inline-end, none

Patterns

  • Hide on scroll: header slides away on scroll down → examples/scroll-state.css

Tree Counting

Index-based styling without hard-coded values.

  • sibling-index(): 1-based position among siblings
  • sibling-count(): total number of siblings

Patterns

  • Staggered animation: delay based on position → examples/sibling-index.css

Customizable Select

Style native <select> with full CSS control.

  • appearance: base-select: opt into new rendering
  • ::picker(select): style dropdown container
  • : reflect selected option

Scroll Markers

CSS-only carousel navigation.

  • ::scroll-button(direction): prev/next buttons
  • ::scroll-marker: per-item indicators
  • :target-current: active marker state

type() Function

Specify CSS data types for attr() and @function parameters.

  • Types: <angle>, <color>, <integer>, <length>, <length-percentage>, <number>, <percentage>, <string>, <time>, <url>, *
  • Combinators: + (space-separated), # (comma-separated), | (either)

Patterns

  • Typed attr(): read data attributes as CSS values → examples/style-query-attr.css
  • Typed @function params: enforce parameter types → examples/type-function.css

Relative Color Syntax

Modify color channels using oklch.

oklch(from var(--color) l c h / 50%)          /* opacity */
oklch(from var(--color) l c calc(h + 30))     /* shift hue */
oklch(from var(--color) calc(l * 1.2) c h)    /* lighten */