operador not media queries

Hola haber si alguien me aclara esto.

Si tengo un varios media queries separador por comas (or) y utilizo el operador not al principio de la declaración, que estaría negando un solo queries, o todos. Lo pregunto por esto que dice la web de mozilla y que copio a continuación, creo que se contradicen o estoy yo equivocado.

https://developer.mozilla.org/es/docs/CSS/Media_queries

no
El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, solo para un query completo.

fijaos lo que pongo en negrita

Hola!

La traducción no está del todo bien. Lo siguiente,

El operador not no puede ser usado para negar un query individual, solo para un query completo.

Debería traducirse como:

El operador not no puede ser usado para negar una característica de una query (media feature), sino sólo para una query completa.

Lo que quiere decir que not no se puede aplicar a una media feature individualmente:

@media not all and (min-color: 4)

Que se podría interpretar como:

@media (not all) and (min-color: 4)

pero en realidad se traduce como:

@media not (all and (min-color: 4))

A eso se refiere con que se aplica a toda la query (dentro de la lista, si es que está separada por comas).

Hola, por partes:

¿Verdaderamente que puede negar el operador not, solo un query o todos los query posibles si están ubicados en una lista separada por comas?

Me explico, si tengo varios query separados por coma y quiero negarlos todos tendría que poner a cada query al comienzo el operador not o con ponerlo solo al principio ya negara todos los demás query.

En la especificación pone esto:
Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas.

Ejemplos:
media="not screen and (min-width: 769px),not print and (min-width: 6in)"
media="not screen and (min-width: 769px), print and (min-width: 6in)"

not negará cada una de las declaraciones de la lista, pero no a todas juntas, o sea, niega cada ítem de la lista y no puede negar cada feature (print, all, screen, width - min-width, max-width -, etc.), por lo que, citando lo que has dicho:

...tendría que poner a cada query al comienzo el operador not..

Aunque en realidad la especificación no dice que el not debe ir al comienzo, basta con que aparezca dentro de cada una de los ítem en la lista:

@media not query1, query2 not, all not and min-color: 4 /* deberían ser válidas si cambias queryN por una feature válida */

¿Te sirve esa explicación?

Para no seguir complicándose, not niega cada query separada de la lista, eso es todo. El resto de la explicación está demás pues es poco probable que se utilice.

media="not screen and (monochrome)"
es decir, ¿niega el tipo de medio (screen) y la media feacture?

No, sólo niega la query completa. Traducido diría algo así:

Si no es una pantalla ni monocromada

ya se que niega la querie completa por eso puse ¿niega el tipo de medio (screen) y la media feacture? es decir, las dos. Pero creo que no me comprendes.


Si tu quisieras negar estas dos media queries separadas por coma ¿que harias?

harias esto:

media="not screen and (min-width: 769px),not print and (min-width: 6in)"

o esto:

media="not screen and (min-width: 769px), print and (min-width: 6in)"

ya se que niega la querie completa por eso puse ¿niega el tipo de medio (screen) y la media feacture? es decir, las dos. Pero creo que no me comprendes.


Si tu quisieras negar estas dos media queries separadas por coma ¿que harias?

harias esto:

media="not screen and (min-width: 769px),not print and (min-width: 6in)"

o esto:

media="not screen and (min-width: 769px), print and (min-width: 6in)"

ya hice la prueba que deberia heber hecho antes.


<style type="text/css">
@media not screen and (width:1280px), screen and (width:1280px) {
div {
background-color:#0CC;
}
}
</style>

si pones esta declaracion se aplicara el color por la segunda lista de la media querie ya que no tiene el operador not, solo lo tiene el primero y solo niega ese primero.

si le aplicamos el not al segundo ahora si niega ese tambien es decir, con un not no puedo negar todos los media queries que estan separados por comas.

conclusion que dice mozilla y que corresponde con las pruebas:

Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.