Skip to main content

Feature Queries — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Feature Queries lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Test for a feature

    easy10 min

    Use grid for #grid only where grid is supported.

  2. 2

    Provide a fallback

    easy10 min

    Flex by default, upgrading to grid where it is supported.

  3. 3

    Negate a condition

    easy10 min

    Fall back to flex only where a made-up value is unsupported.

  4. 4

    Combine two conditions

    easy10 min

    Use grid only where both grid and gap are supported.

  5. 5

    Enhance a supported layout

    medium10 min

    Grid with a 10px gap and two fixed columns, all behind a feature test.

Find the bug(5)

  1. 1

    Fix the misspelled rule

    easy8 min

    The rule is @supports, with an s.

  2. 2

    Fix the missing parentheses

    easy8 min

    The tested declaration must be wrapped in parentheses.

  3. 3

    Fix the inverted test

    easy8 min

    Without `not`, this asks whether a nonsense value IS supported.

  4. 4

    Fix the missing operator

    easy8 min

    Two conditions are joined with `and`.

  5. 5

    Fix the property-only test

    easy8 min

    @supports tests a property AND a value, separated by a colon.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace