Skip to content

Commit

Permalink
lint
Browse files Browse the repository at this point in the history
  • Loading branch information
ramiy authored Sep 5, 2024
1 parent e2abd7e commit 45636d7
Showing 1 changed file with 3 additions and 9 deletions.
12 changes: 3 additions & 9 deletions files/en-us/web/css/@custom-media/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ The **`@custom-media`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) defines alias

### Values

- _<extension-name>_
- `<extension-name>`
- : A name identifying the custom media.
- _<media-query-list>_
- `<media-query-list>`
- : A comma-separated list of of _<media-query>_ values.

## Description
Expand All @@ -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 */
}
```

Expand Down Expand Up @@ -83,28 +80,25 @@ 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; }
}
```

Is equivalent to:

```css
@media ( (color) or (hover) ) and (width > 1024px) {
.a { color: green; }
}
```

The following would be incorrect:

```css
@media (color), (hover) and (width > 1024px) {
.a { color: green; }
}
```

Expand Down

0 comments on commit 45636d7

Please sign in to comment.