Container Examples

ContainerExamples.css

@container (max-width: 500px) {
    /* Normal css styles can go here */
}
@container (min-width: 500px) {
    /* Normal css styles can go here */
}
@container (width > 500px) {
    /* Normal css styles can go here */
}
@container (width >= 500px) {
    /* Normal css styles can go here */
}
@container (width < 500px) {
    /* Normal css styles can go here */
}
@container (width <= 500px) {
    /* Normal css styles can go here */
}
@container (width >= 500px) and (height >= 500px) {
    /* Normal css styles can go here */
}
@container (width > 760px) not (height > 670px) {
    /* Normal css styles can go here */
}
@container not (height <= 1080px) {
    /* Normal css styles can go here */
}
@container (width < 500px) or (height < 500px) {
    /* Normal css styles can go here */
}
@container (orientation: landscape) {
  /* styles applied to descendants of this size container */
}
@container (10em <= width <= 20em) {
  /* styles */
}
@container card (orientation: landscape) {
  /* styles */
}
@container wide (orientation: landscape) and (min-width: 20em) {
  /* styles applied to descendants of .sizeContainer if size features match */
}
@container narrow (orientation: portrait) or (max-width: 20em) {
  /* styles applied to descendants of .sizeContainer if size features match */
}