Add definition for `not` and `only` keywords in @media reference

[xavierfoucrier]

Write a short definition for the not and only keywords that can be used in a media query, for example to explain how a media query can be reversed:

// set the paragraph color only between 0-399 and 601-*
@media not screen and (min-width: 400px) and (max-width: 600px) {
  p {
    color: blue;
  }
}

Here is the link to the specified page:
https://tympanus.net/codrops/css_reference/media.

Thanks again for the work on this site, I am using it all days 😉

[crnacura]

Thanks @xavierfoucrier! We'll do that!

[xavierfoucrier]

Thanks @crnacura 😎 !

[xavierfoucrier]

Hi @crnacura,

Any update about this issue?
Thanks a lot! 😉

[crnacura]

Sorry @xavierfoucrier, we didn't have any time yet! If you'd like to jump in with the definitions, I'd be very grateful! :)

[xavierfoucrier]

Hi @crnacura,

Thanks for the feedback, it was just to know if this is something that you have planned.
Same on my side: too busy 😄

I will add this to my todo list and work on a PR to bring all the definitions.

Again thanks for your time and the awesome work you are doing all days 😉

[xavierfoucrier]

Hello @crnacura,

Just a question, as there is no source code here in this repository, how do I send definitions about those keywords?

Thanks a lot! 😉

[crnacura]

Hi @xavierfoucrier,
you can post them here and I can then add them to the respective entry on Codrops.
Thank you!

[xavierfoucrier]

Hello @crnacura!

Here they are, I just retrieve a part of the MDN documentation and adjust to fit the context.
I imagine that there could be a section called "Logical operators", before "Values" section.

Logical operators

The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

and

The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.

not

The not operator is 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.

only

The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. When not using only, older browsers would interpret the query screen and (max-width: 500px) as screen, ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.

, (comma)

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

And then, we can add more additional @media examples, like:

@media only print and (min-width: 800px) {
  /* styles applied when the page width is larger than 800 pixels, only in print mode */
}

@media not screen and (min-width: 400px) and (max-width: 600px) {
  /* styles applied when the page width is between 0-399 and 601-* */
}

Please let me know if you want to add further examples or explanations.
Feel free to close the issue when it's done 😉

Thanks a lot!

[crnacura]

You rock, thank you! Just updated the entry: https://tympanus.net/codrops/css_reference/media/
Thank you for your help and let me know if it looks good :)

[xavierfoucrier]

Thanks a lot @crnacura!
You rock too! 🚀

May be adding @media examples with only / not syntax should be good too.
Anyway, everything looks fine to me on the website 😉

Closing the issue right now!
Have a nice day 🌞

[xavierfoucrier]

Hello @crnacura,

I come into the documentation again recently and didn't found the examples with only / not keywords.
May be you could add them on the website too?

/* ... other examples */

@media screen and (device-aspect-ratio: 16/9) {
  /* styles applied to screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as "16:9") */
}

/* missing examples with only/not */

@media only print and (min-width: 800px) {
  /* styles applied when the page width is larger than 800 pixels, only in print mode */
}

@media not screen and (min-width: 400px) and (max-width: 600px) {
  /* styles applied when the page width is between 0-399 and 601-* */
}

Thanks!
Have a nice weekend 🌞