v142 · css

Priority Card

A task card whose colour, border weight, padding, and visible sections are all driven by range style container queries — @container style(3 <= --priority <= 4) matches when the custom property is in a numeric band. Slide --priority (1–10) and --score (0–100) to watch the card restyle without any JavaScript class toggling.

Feature detection: checking…
Custom property values — drives all card styling
3
P1–P2
P3–P4
P5–P6
P7–P8
P9–P10
criticalhighmediumlowbacklog
55
compact (<30)normal (30–69)expanded (≥70)
P3 · High
API rate-limit headers missing in prod
HIGH
Production API responses are missing X-RateLimit-* headers. Client SDK exponential back-off logic is not triggering correctly.
Assigned to: @devteam · Est: 2h · Sprint 24
ENG-4821 Last updated: 2 min ago Score: 55
P3 · High
Update README with new env vars
HIGH
Add REDIS_URL, QUEUE_CONCURRENCY to the .env.example and README setup guide.
Assigned to: @docs · Est: 30m · Sprint 24
ENG-4822 Last updated: 1h ago Score: 55
P3 · High
Migrate staging DB to Postgres 16
HIGH
Staging environment is still running Postgres 14. Upgrade to 16 to match production; run migration scripts and verify indexes.
Assigned to: @infra · Est: 4h · Sprint 25
ENG-4823 Last updated: 3h ago Score: 55
Active @container style() range rules
@container style(--priority <= 2)
red background, thick border
@container style(3 <= --priority <= 4)
orange tint
@container style(5 <= --priority <= 6)
yellow tint
@container style(7 <= --priority <= 8)
green tint
@container style(--priority >= 9)
neutral/backlog style
@container style(--score < 30)
compact: body hidden, smaller padding
@container style(30 <= --score < 70)
normal layout
@container style(--score >= 70)
expanded: larger title, extra row, shadow
Current custom property values 
/* Range syntax in @container style() */
.pc-container {
  container-type: style;
  --priority: 3;   /* set by data model */
  --score: 55;
}

/* Two-sided range: P3–P4 band */
@container style(3 <= --priority <= 4) {
  .priority-card {
    background: #fff7ed;
    border-color: #f97316;
  }
}

/* Upper-bound range: compact layout */
@container style(--score < 30) {
  .priority-card { padding: 0.5rem; }
  .pc-body       { display: none;   }
}

/* Lower-bound range: expanded layout */
@container style(--score >= 70) {
  .priority-card { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
  .pc-extra      { display: block; }
}

/* No JavaScript class toggling needed.
   Update --priority and --score via JS
   style.setProperty() and CSS handles the rest. */

see also