@media

Active CSS supports standard CSS media queries (@media) in the config, and you can use @media both inside and outside of event declarations.

This is also an @else media control flow statement and support for the @else statement that allows you use conditionally use media queries.

There are also two built-in conditionals that enable media queries to be run in @if statement and attached to event selectors, if-media-max-width and if-media-min-width.

@media - outside event declarations, like CSS:

(Note that @else media and @else will not work using it this way, because when we code outside of the ACSS event selectors we are getting into native CSS support which doesn't support these statements.)

@media (max-width: 1020px) {
    body:scroll {
        ... do something
    }
}

@media - inside event declarations:

body:scroll {
    @media (max-width: 1020px) {
        ... do something
    }
}

Conditional pseudo-selector use:

body:if-media-max-width(1020px):scroll {
    ... do something
}

Conditional pseudo-selector used with an @if statement:

(Along with @media and @else media this is a performant method if you have several @media queries attached to the same event doing different things and need to use an @if statement along with other conditional handling, eg. different conditional actions for mobile, tablet and desktop. See the if-media-max-width example for more info.)

body:scroll {
    @if media-max-width(1020px) && counter > 10 {
        ... do something
    }
}

@media with @else media and @else:

body:scroll {
    @media (min-width: 1025px) {
        ... do something
    } @else media (min-width: 768px) {
        ... do something
    } @else {
        ... do something
    }
}

Conditional pseudo-selectors used dedicated conditionals

You can do this if you need to have more than one pseudo-selector function attached to the event selector, or if you would rather have your condition declared in one place and give it a name:

@conditional smallDevice {
    if-media-max-width: 1020px;
}

body:smallDevice:scroll {
    ... do something
}

 

See the Conditionals section for more information on using conditionals.