Watch for CSS when/else conditionals [🟥 awaiting full support]

[chrisblakley]

Allows for conditional rules to be used within native CSS.

Simple example:

.container {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1rem;
    @when element(max-width: 400px) {
        grid-template-columns: 1fr;
        padding: 2rem;
    }
}

https://caniuse.com/css-when-else