Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 9 de 9

Tema: operador not media queries

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    159
    Poder de Reputación
    8

    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

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    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:

    Código:
    @media not all and (min-color: 4)
    Que se podría interpretar como:

    Código:
    @media (not all) and (min-color: 4)
    pero en realidad se traduce como:

    Código:
    @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).

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    159
    Poder de Reputación
    8
    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)"

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    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:

    Código:
    @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?

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    159
    Poder de Reputación
    8
    No me entero mucho. A ver si yo estoy entendiendo bien o mal algunas cosas.

    ¿Esto es una lista de media queries separadas por comas?

    media="not screen and (min-width: 769px), not print and (min-width: 6in)"
    Yo entiendo que sí, esta es una “not screen and (min-width: 769px)” y esta es otra “not print and (min-width: 6in)"

    Entonces qué es lo que not puede o no puede negar.
    Si quiero negar las dos media queries haría esto:

    media="not screen and (min-width: 769px),not print and (min-width: 6in)"
    pero no esto, ya que lo haría solo a la primera:
    media="not screen and (min-width: 769px), print and (min-width: 6in)"

    Es que no entiendo esto que me pusiste:
    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.)
    ¿not en verdad niega todo esto?

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

    si puedes aclararme todo
    Última edición por isaacaaron; 25/02/2017 a las 20:59

  6. #6
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    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

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    159
    Poder de Reputación
    8
    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)"
    Última edición por isaacaaron; 25/02/2017 a las 22:07

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    159
    Poder de Reputación
    8
    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)"

  9. #9
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    159
    Poder de Reputación
    8
    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.

Temas Similares

  1. Media queries para un Responsive Design
    Por Doodleo en el foro Adaptar o Crear una web para móviles
    Respuestas: 4
    Último Mensaje: 07/09/2017, 12:02
  2. media queries y palabra clave only
    Por isaacaaron en el foro Foro General
    Respuestas: 12
    Último Mensaje: 17/08/2016, 12:41
  3. dudas con media queries
    Por isaacaaron en el foro Foro General
    Respuestas: 0
    Último Mensaje: 24/07/2016, 17:58
  4. Problemas con tamaño dentro de Media Queries
    Por alex222en en el foro Foro General
    Respuestas: 7
    Último Mensaje: 31/05/2015, 16:16
  5. Media Queries CSS3
    Por alex222en en el foro Foro General
    Respuestas: 5
    Último Mensaje: 14/05/2015, 16:26

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •