From 45636d7954c9ee4c4ba0fe9b4698a0aba2722c90 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Thu, 5 Sep 2024 02:18:09 -0700 Subject: [PATCH] lint --- files/en-us/web/css/@custom-media/index.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/@custom-media/index.md b/files/en-us/web/css/@custom-media/index.md index ff3021126d6c291..03f8272c41926d9 100644 --- a/files/en-us/web/css/@custom-media/index.md +++ b/files/en-us/web/css/@custom-media/index.md @@ -18,9 +18,9 @@ The **`@custom-media`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) defines alias ### Values -- __ +- `` - : A name identifying the custom media. -- __ +- `` - : A comma-separated list of of __ values. ## Description @@ -47,15 +47,12 @@ The `@custom-media` at-rule is used on responsive websites which use a particula @custom-media --narrow-window (max-width: 32em); @media (--narrow-window) { - /* narrow window styles */ } @media (--narrow-window) and (hover) { - /* narrow window styles when hovering over elements */ } @media (--narrow-window) and (orientation: portrait) { - /* narrow window styles for portrait orientation */ } ``` @@ -83,12 +80,11 @@ By grouping all breakpoints in a single location, it's easier to control the res ### Complex queries with a list of quereis The custom media query is evaluated logically. For instance, the following code snippet: - + ```css @custom-media --modern (color), (hover); @media (--modern) and (width > 1024px) { - .a { color: green; } } ``` @@ -96,7 +92,6 @@ Is equivalent to: ```css @media ( (color) or (hover) ) and (width > 1024px) { - .a { color: green; } } ``` @@ -104,7 +99,6 @@ The following would be incorrect: ```css @media (color), (hover) and (width > 1024px) { - .a { color: green; } } ```