Add note about parens in matchMedia

[chriskirknielsen]

Description

Provides a note about explicit requirements for a matchMedia condition to be wrapped in parentheses.

Motivation

I was bitten by this and didn't find an explicit callout to help developers who might have been in my situation and could not understand why their code wouldn't work.

[github-actions]

Preview URLs

• /en-US/docs/Web/API/Window/matchMedia

(comment last updated: 2025-01-23 16:30:40)

[Josh-Cena]

This is misleading though. Anything that needs parentheses in <media-query-list> needs parentheses here; anything that doesn't, doesn't. For example print is just print not (print).

[chriskirknielsen]

@Josh-Cena That's a good point! Do you know what would be a better verbiage to communicate this?

[chriskirknielsen]

Taking some notes from the CSS media page:

Note

Just like in CSS, any media feature must be wrapped in parentheses inside the expression. For example: matchMedia('(max-width: 600px)') will work, whereas matchMedia('max-width: 600px') will not. Keywords for media types (all, print, screen) and logical operators (and, or, not, only) do not need to be wrapped in parentheses.

[wbamberg]

Thanks for the update @chriskirknielsen ! I think the wording here is fine but it doesn't need to be a note.

[chriskirknielsen]

Thank you @wbamberg, much appreciated!

[Josh-Cena]

This LGTM. Thanks!