observers-demo.css

/* Min-width */
.minwidth::observer {
  observe-resize-width: 300 medium;
}

.minwidth:observe(resize-width medium) {
  border-color: limegreen;
  background: greenyellow;
}

/* Max-width */
.maxwidth::observer {
  observe-resize-width: 300 medium;
}

.maxwidth:not(:observe(resize-width medium)) {
  border-color: limegreen;
  background: greenyellow;
}

previously.css

/* Min-width */
.minwidth[--element='{"minWidth": 300}'] {
  border-color: limegreen;
}

@supports (--element(".minwidth", {"minWidth": 300})) {
  [--self] {
    background: greenyellow;
  }
}

/* Max-width */
.maxwidth[--element='{"maxWidth": 300}'] {
  border-color: limegreen;
}

@supports (--element(".maxwidth", {"maxWidth": 300})) {
  [--self] {
    background: greenyellow;
  }
}