Modern Css

Modern CSS

This skill provides a reference for writing modern, robust, and efficient CSS.

---

Layout & Responsive Design

Container Queries

.card {
  container: --my-card / inline-size;
}

@container --my-card (width < 40ch) {
  /* Component-based responsive design */
}

@container (20ch < width < 50ch) {
  /* Range syntax */
}

Container units: cqi, cqb, cqw, cqh - size relative to container dimensions

Anchored container queries: Style positioned elements based on anchor fallback state

.tooltip {
  container-type: anchored;
}

@container anchored(top) {
  /* Styles when positioned at top */
}

Media Query Range Syntax

@media (width <= 1024px) { }
@media (360px < width < 1024px) { }

Grid Enhancements

• Subgrid: Inherit parent grid lines for nested layouts
• Masonry: display: grid-lanes for Pinterest-style layouts with logical tab order. (Previously proposed as grid-template-rows: masonry).

---

Color & Theming

Color Scheme & Light-Dark Function

:root {
  color-scheme: light dark;
  --surface-1: light-dark(white, #222);
  --text-1: light-dark(#222, #fff);
}