From 1570119ab8be798f25cbaf81b933e8258c2bbaa6 Mon Sep 17 00:00:00 2001 From: Christopher Kirk-Nielsen Date: Wed, 1 Jan 2025 13:45:12 -0500 Subject: [PATCH 01/11] Add note about parens in matchMedia 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. --- files/en-us/web/api/window/matchmedia/index.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index e68f396bb7af5e3..7cb22050e3a007e 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -24,6 +24,9 @@ matchMedia(mediaQueryString) - `mediaQueryString` - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. + +> [!NOTE] +> Each `mediaQueryString` condition must be wrapped in parentheses, for example: `matchMedia('(min-width: 600px)')` will work, whereas `matchMedia('min-width: 600px')` will not! ### Return value From 64ff0dd55c92a045ee2f05309fbf3f536e29fe25 Mon Sep 17 00:00:00 2001 From: Christopher Kirk-Nielsen Date: Wed, 22 Jan 2025 00:48:58 -0500 Subject: [PATCH 02/11] Clarify parens conditions --- files/en-us/web/api/window/matchmedia/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index 7cb22050e3a007e..df49e6744019e54 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -26,7 +26,7 @@ matchMedia(mediaQueryString) - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. > [!NOTE] -> Each `mediaQueryString` condition must be wrapped in parentheses, for example: `matchMedia('(min-width: 600px)')` will work, whereas `matchMedia('min-width: 600px')` will not! +> Just like in CSS, any [media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features) 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. ### Return value From a861ecdc0b0039a8a0079e38dbba054ead3ecf70 Mon Sep 17 00:00:00 2001 From: Christopher Kirk-Nielsen Date: Wed, 22 Jan 2025 00:51:33 -0500 Subject: [PATCH 03/11] Update files/en-us/web/api/window/matchmedia/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/window/matchmedia/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index df49e6744019e54..c3bde851e9433e4 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -26,7 +26,7 @@ matchMedia(mediaQueryString) - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. > [!NOTE] -> Just like in CSS, any [media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features) 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. +> Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. ### Return value From bd72b3930db15c0fe6c586c9b8e01725faf5cd5c Mon Sep 17 00:00:00 2001 From: wbamberg Date: Wed, 22 Jan 2025 15:41:15 -0800 Subject: [PATCH 04/11] Update files/en-us/web/api/window/matchmedia/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/window/matchmedia/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index c3bde851e9433e4..2830b8a3a4c8cd4 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -24,7 +24,6 @@ matchMedia(mediaQueryString) - `mediaQueryString` - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. - > [!NOTE] > Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. From cae99e1a2307d1e9ed4a97caa6d02b84624c888f Mon Sep 17 00:00:00 2001 From: wbamberg Date: Wed, 22 Jan 2025 15:43:37 -0800 Subject: [PATCH 05/11] Update files/en-us/web/api/window/matchmedia/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/window/matchmedia/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index 2830b8a3a4c8cd4..9b7be742801bac0 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -24,6 +24,7 @@ matchMedia(mediaQueryString) - `mediaQueryString` - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. + > [!NOTE] > Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. From a5a70fdb0db624133dae618141c9acf7a36ee9aa Mon Sep 17 00:00:00 2001 From: Christopher Kirk-Nielsen Date: Wed, 22 Jan 2025 20:52:04 -0500 Subject: [PATCH 06/11] Update files/en-us/web/api/window/matchmedia/index.md Co-authored-by: wbamberg --- files/en-us/web/api/window/matchmedia/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index 9b7be742801bac0..c9ee8da6aba27e4 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -25,9 +25,7 @@ matchMedia(mediaQueryString) - `mediaQueryString` - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. -> [!NOTE] -> Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. - +Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. ### Return value A new {{domxref("MediaQueryList")}} object for the media query. Use this object's From a677f8b1b3b9c16c962faa830a1fe06641ea2476 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Wed, 22 Jan 2025 18:02:07 -0800 Subject: [PATCH 07/11] Update files/en-us/web/api/window/matchmedia/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/window/matchmedia/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index c9ee8da6aba27e4..28a4a4c2280b157 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -26,6 +26,7 @@ matchMedia(mediaQueryString) - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. + ### Return value A new {{domxref("MediaQueryList")}} object for the media query. Use this object's From a3c56a7be55a103a48fe083c707c40eca357dc86 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 23 Jan 2025 11:24:41 -0500 Subject: [PATCH 08/11] Update files/en-us/web/api/window/matchmedia/index.md --- files/en-us/web/api/window/matchmedia/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index 28a4a4c2280b157..ae15b05acc8bba8 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -25,7 +25,7 @@ matchMedia(mediaQueryString) - `mediaQueryString` - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. -Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. + Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. ### Return value From 14bb8458326c8b498eb7a63256c3111296a89034 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 23 Jan 2025 11:24:57 -0500 Subject: [PATCH 09/11] Update files/en-us/web/api/window/matchmedia/index.md --- files/en-us/web/api/window/matchmedia/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index ae15b05acc8bba8..02bff4f960e32d0 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -25,7 +25,7 @@ matchMedia(mediaQueryString) - `mediaQueryString` - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. - Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. + Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. ### Return value From d843d729e74fc54ddc9fef687f7c868201d902be Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 23 Jan 2025 11:25:43 -0500 Subject: [PATCH 10/11] Update files/en-us/web/api/window/matchmedia/index.md --- files/en-us/web/api/window/matchmedia/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index 02bff4f960e32d0..4165fa644f6896a 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -25,7 +25,7 @@ matchMedia(mediaQueryString) - `mediaQueryString` - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. - Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) 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. + Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) must be wrapped in parentheses inside the expression. For example: `matchMedia("(max-width: 600px)")` works, whereas `matchMedia("max-width: 600px")` does not. Keywords for media types (`all`, `print`, `screen`) and logical operators (`and`, `or`, `not`, `only`) do not need to be wrapped in parentheses. ### Return value From d31bfbb605644e96a8ce2b7567661bc9fdef14fe Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 23 Jan 2025 11:29:08 -0500 Subject: [PATCH 11/11] Update index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/window/matchmedia/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index 4165fa644f6896a..fe1d37972fa74d7 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -23,6 +23,7 @@ matchMedia(mediaQueryString) ### Parameters - `mediaQueryString` + - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) must be wrapped in parentheses inside the expression. For example: `matchMedia("(max-width: 600px)")` works, whereas `matchMedia("max-width: 600px")` does not. Keywords for media types (`all`, `print`, `screen`) and logical operators (`and`, `or`, `not`, `only`) do not need to be wrapped in parentheses.