Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove mention that not must be used with media type #34509

Merged
merged 1 commit into from
Jul 9, 2024
Merged

Remove mention that not must be used with media type #34509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion files/en-us/learn/css/css_layout/media_queries/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ If you have a set of queries, any of which could match, then you can comma separ
You can negate an entire media query by using the `not` operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.

```css
@media not all and (orientation: landscape) {
@media not (orientation: landscape) {
body {
color: blue;
}
Expand All @@ -211,6 +211,18 @@ You can negate an entire media query by using the `not` operator. This reverses

[Open this example](https://mdn.github.io/css-examples/learn/media-queries/not.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/main/learn/media-queries/not.html).

You can also use `not` to negate specific expressions.

```css
@media (not (width < 600px)) and (not (width > 1000px)) {
body {
color: blue;
}
}
```

This will apply the styles if the viewport width is between 600 and 1000 pixels. This is equivalent to `(600px <= width <= 1000px)`.

## How to choose breakpoints

In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.
Expand Down
3 changes: 1 addition & 2 deletions files/en-us/web/css/@media/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ For a discussion of media query syntax, please see [Using media queries](/en-US/
### Media types

_Media types_ describe the general category of a device.
Except when using the `not` or `only` logical operators, the media type is optional and the `all` type is implied.
Except when using the `only` logical operator, the media type is optional and the `all` type is implied.

- `all`
- : Suitable for all devices.
Expand Down Expand Up @@ -148,7 +148,6 @@ You can also combine multiple media queries into a single rule by separating the

- : Used to negate a media query, returning `true` if the query would otherwise return `false`.
If present in a comma-separated list of queries, it will only negate the specific query to which it is applied.
If you use the `not` operator, you _must also_ specify a media type.

> **Note:** In Level 3, the `not` keyword can't be used to negate an individual media feature expression, only an entire media query.

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/css/css_media_queries/using_media_queries/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Media queries are case-insensitive.

- [Media types](/en-US/docs/Web/CSS/@media#media_types) define the broad category of device for which the media query applies: `all`, `print`, `screen`.

The type is optional (assumed to be `all`) except when using the `not` or `only` logical operators.
The type is optional (assumed to be `all`) except when using the `only` logical operator.

- [Media features](/en-US/docs/Web/CSS/@media#media_features) describe a specific characteristic of the {{glossary("user agent")}}, output device, or environment:

Expand Down Expand Up @@ -180,7 +180,7 @@ The `and` operator can also combine multiple media features into a single media
The `only` operator prevents older browsers from applying the styles.

> **Note:** In most cases, the `all` media type is used by default when no other type is specified.
> However, if you use the `not` or `only` operators, you must explicitly specify a media type.
> However, if you use the `only` operator, you must explicitly specify a media type. You can see `only screen` or `only print` as a whole.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand what "as a whole" means here. Line 180 likely needs to be updated and congruent with this intended content.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant: you can see only screen and only print as if it's a media type as a whole. This is because only (screen) or only (screen and (width < 100px)) don't work either.

### Combining multiple types or features

Expand Down