CSS Modern Features Skill

Master cutting-edge CSS features: custom properties, container queries, :has(), @layer, and native CSS nesting.

Overview

This skill provides atomic, focused guidance on modern CSS features (2022-2025) with browser compatibility information and fallback strategies.

Skill Metadata

Usage

Skill("css-modern")

Parameter Schema

parameters:
  feature:
    type: string
    required: true
    enum: [custom-properties, container-queries, has-selector, layers, nesting, logical-properties]
    description: Modern CSS feature to explore

  include_fallback:
    type: boolean
    required: false
    default: true
    description: Include browser fallback patterns

  browser_support:
    type: boolean
    required: false
    default: true
    description: Include compatibility information

validation:
  - rule: feature_required
    message: "feature parameter is required"
  - rule: valid_feature
    message: "feature must be one of: custom-properties, container-queries..."

Topics Covered

Custom Properties (CSS Variables)

• Declaration and inheritance
• Computed values with calc()
• Theming systems
• JavaScript integration

Container Queries

• container-type and container-name
• @container syntax
• Container query units (cqi, cqw)
• Style queries

:has() Selector

• Parent selection patterns
• Form state styling
• Previous sibling selection
• Performance considerations

@layer (Cascade Layers)

• Layer definition and ordering
• Third-party CSS management
• Specificity without !important

CSS Nesting

• Native nesting syntax
• & selector usage
• Media queries in nesting

Retry Logic

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000

Logging & Observability

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  metrics:
    - invocation_count
    - feature_usage
    - fallback_requests

Quick Reference

Custom Properties

/* Definition */
:root {
  --color-primary: #3b82f6;
  --spacing-md: 1rem;
}

/* Usage */
.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

/* With fallback */
color: var(--text-color, black);

/* With calc() */
margin: calc(var(--spacing-md) * 2);

Container Queries

/* Define container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Query container */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

/* Container units */
.card-title {
  font-size: clamp(1rem, 5cqi, 2rem);
}

:has() Selector

/* Style parent based on child */
.card:has(.card-image) {
  padding-top: 0;
}

/* Form validation styling */
.form:has(:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* Style previous sibling */
.item:has(+ .item:hover) {
  transform: translateX(-5px);
}

/* Check for empty state */
.list:not(:has(li)) {
  display: none;
}

@layer

/* Define layer order */
@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after {
    margin: 0;
    box-sizing: border-box;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
  }
}

@layer utilities {
  .hidden { display: none !important; }
}

CSS Nesting

.card {
  background: white;
  border-radius: 8px;

  & .card-header {
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Browser Support (2025)

Fallback Patterns

@supports Usage

/* Feature detection */
@supports (container-type: inline-size) {
  .wrapper {
    container-type: inline-size;
  }
}

/* Fallback for :has() */
@supports not selector(:has(*)) {
  /* JavaScript-based alternative styles */
  .card.has-image {
    padding-top: 0;
  }
}

Progressive Enhancement

/* Base experience */
.card {
  padding: 1rem;
}

/* Enhanced for modern browsers */
@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
  }

  @container (min-width: 400px) {
    .card {
      display: grid;
    }
  }
}

Test Template

describe('CSS Modern Skill', () => {
  test('validates feature parameter', () => {
    expect(() => skill({ feature: 'invalid' }))
      .toThrow('feature must be one of: custom-properties...');
  });

  test('includes fallback when flag is true', () => {
    const result = skill({ feature: 'container-queries', include_fallback: true });
    expect(result).toContain('@supports');
  });

  test('includes browser support when flag is true', () => {
    const result = skill({ feature: 'has-selector', browser_support: true });
    expect(result).toContain('Chrome');
    expect(result).toContain('Safari');
  });
});

Error Handling

Related Skills

• css-fundamentals (selector knowledge)
• css-flexbox-grid (container query layouts)
• css-performance (feature impact on performance)