An element query is a scoped style with the addition of one or more responsive conditions. A responsive condition could look like (min-width: 500px) or (max-characters: 20), and would prevent the block of css rules from applying to the page until the responsive conditions are true.
Here is an example of an element query in the same syntax:
@element 'input' and (max-characters: 20) {}Now one thing you can notice about this right away is that max-characters is not a media feature supported by @media queries - as it turns out when writing responsive styles for elements instead of for the viewport, the ability to base responsive conditions on a wider variety of properties makes sense. The full list of possible responsive conditions element queries might looks something like this:
That’s a lot of new flexibility for creating responsive layouts!