Las media queries son bloques de código CSS que permiten a los creadores de contenido aplicar diferentes estilos en determinados dispositivos Kindle (o en un grupo de dispositivos) utilizando solamente una hoja de estilos. Amazon ha implementado las media queries como forma para ayudar a los creadores de contenido a ofrecer una mejor calidad de lectura y navegación en todos los dispositivos.

Amazon recomienda a los creadores de contenido que solo utilicen las media queries si de ese modo se soluciona un problema o se ofrece una mejor experiencia de lectura al usuario. Por ejemplo, puede utilizar las media queries para:

• Crear soluciones personalizadas para mayúsculas iniciales para determinados dispositivos o grupos de ellos
• Cambiar texto que tenga colores claros (amarillo, azul celeste, rosa, etc.) a colores más oscuros que ofrezcan un mayor contraste en dispositivos e-reader manteniendo el color original en los tablets.
• Aumentar el tamaño de la fuente para texto emergente de formato fijo en los dispositivos e-reader en contraposición al de los tablets, para adaptarse a la diferencia en los tamaños de pantalla.
• Mostrar los bordes con colores en los dispositivos e-reader y los fondos con colores en tablets de manera independiente el uno del otro, permitiendo que el lector pueda disfrutar de la lectura de un libro en un tablet del mismo modo que si estuviera impreso, sin que esto afecte a la experiencia de lectura en los dispositivos e-reader.

Esta sección describe varias maneras en las que puede utilizar las media queries para personalizar la lectura en los dispositivos e-reader Kindle, tablets Fire y iPad. Esto mismo se aplica en todo Kindle para dispositivos de cualquier relación de aspecto.

Nota: Algunas media queries pueden comportarse de forma distinta en la tipografía mejorada de los eBooks que en KF8 o eBooks Mobi.

Las media queries forman parte del estándar W3.

Pautas sobre media queries

Al admitir dos nuevos tipos de contenido multimedia, los creadores de contenido podrán usar CSS específico para formatos de archivo Mobi o KF8: amzn-mobi y amzn-kf8.

• Para los estilos CSS de KF8, utilice la media query @media amzn-kf8. Esto solo se aplica al formato KF8.
• Para los estilos de CSS Mobi, utilice la media query @media amzn-mobi. Esto solo se aplica al formato Mobi.

Los estilos de @media screen y @media all siguen siendo válidos tanto para KF8 como para Mobi.

Sintaxis CSS adecuada

Las media queries tienen dos partes: (1) el selector, que especifica las condiciones de la media query; y (2) el bloque de declaración, que se suministra cuando se cumplen las condiciones de la consulta.

En el siguiente ejemplo, el color de fondo azul solo se aplica si el formato del libro es KF8 y la relación de aspecto del dispositivo es de 1280 x 800.

Ejemplo:

Incluya un comentario CSS antes de cada media query

Amazon le recomienda añadir un comentario CSS antes de cada media query para aclarar a qué tipo de dispositivo va destinada. (Los comentarios empiezan por /* y terminan por */).

Ejemplo:

Los clientes no pueden ver los comentarios CSS, pero estos facilitan mucho la tarea de aquellas personas que deban explorar el código de los archivos y solucionar los problemas que se produzcan en ellos.

Utilice siempre un código de consulta que no sea de medios para dirigirse a los dispositivos E-Reader

Optimice siempre que sea posible su código predeterminado (diferente al de media query) para los dispositivos e-reader de Kindle como Kindle Voyage y Kindle Paperwhite. El código predeterminado incluye valores CSS que aparecerán en un lector Kindle en caso de que ninguna de las media queries coincida en un dispositivo en particular.

Las media queries deben aparecer después del código diferente

Dado que el CSS se aplica en el orden en el que aparece, el código dirigido a varios dispositivos (como el código device-aspect-ratio para todos los tablets Fire) debe aparecer después de cualquier otro código diferente al de media query.

En el siguiente ejemplo, el código predeterminado crea un borde negro en todos los dispositivos para cualquier elemento que utilice la clase blue_background. Las media queries que lo sigan eliminarán el borde y harán que aparezca un fondo azul en los tablets Fire y los iPad para cualquier elemento que use la clase blue_background. El resto de los dispositivos solo mostrarán el borde negro.

Ejemplo:

En el ejemplo que aparece más arriba, el borde negro definido en el código predeterminado para la clase blue_background seguirá apareciendo en los tablets Fire si la propiedad border no se ha anulado. Si se configura border como none en las media queries para los tablets Fire y iPad se anularán los valores predeterminados para estas propiedades. Esto es útil si se utiliza un código que no sea media query dirigido a dispositivos e-reader Kindle pero no se desea transferir un borde con color a un tablet Fire.

Duplicar código

Al escribir media queries, incluya solo las clases y el código CSS que necesita cambiar para un dispositivo en concreto. Si utiliza un código que no sea media query aparecerá automáticamente en todos los dispositivos salvo si lo anula una media query. Por ese motivo, no es necesario que repita el código que desea aplicar a todos los dispositivos.

En el siguiente ejemplo, el objetivo es anular el borde con color en los tablets Fire y sustituirlo con un fondo con color, manteniendo el texto rojo en todos los dispositivos. El ejemplo que aparece en la izquierda es incorrecto porque no es necesario repetir la clase ".red_font class" en el código de las media queries.

Ejemplo:

Cómo utilizar media queries

En la siguiente tabla aparecen ejemplos de media queries compatibles y el CSS aplicado a KF8 y MOBI, entre otros:

Utilizar media queries para retrocompatibilidad con Mobi

Las media queries permiten que un archivo de CSS proporcione un CSS complejo para KF8 y un CSS más básico para Mobi. Algunas pautas:

• Las CSS complejas pueden ignorarse para el formato Mobi redefiniendo la misma clase dentro de la media query @media amzn-mobi.
• Según el estándar W3C, las media queries deberían ser:
  • Consultas individuales especificadas después del CSS común; o
    Ejemplo:
    

    class1 {font-size: 2em;} @media amzn-mobi {.class1 {font-size: 3em;}}

  • Incluya !important en cada propiedad para forzar la precedencia.

    Ejemplo:

    @media amzn-mobi {.class1 {font-size: 3em !important;}} .class1 {font-size: 2em;}

  
  

  CSS	Estilos CSS aplicados a Mobi	Estilos CSS aplicados a KF8
  p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px } ul { margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em; } @media amzn-mobi { .firstletter { float: left; font-size: 3em; line-height: 0; font-weight: bold; padding-right: 0; } }	p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px } ul { margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 0; font-weight: bold; padding-right: 0; )	p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px } ul { margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em; }

Enviar una media query

Existen cuatro opciones para enviar media queries:

• Un archivo CSS
• Diferentes archivos CSS
• Etiquetas de estilo
• @import

Opción 1: Utilizar un archivo CSS

Las media queries pueden especificar diferentes CSS para los formatos MOBI y KF8 en el mismo archivo CSS. En el ejemplo que figura a continuación, se especifica una clase .class1 para el formato Mobi diferente a la de otros formatos en el mismo archivo CSS.

Ejemplo:

Opción 2: Utilizar diferentes archivos CSS

Las media queries pueden especificar diferentes CSS para los formatos Mobi y KF8 en distintos archivos CSS. En este ejemplo, los formatos Mobi y KF8 utilizan distintas hojas de estilo CSS y los estilos comunes de CSS se aplican a todos los elementos multimedia.

Ejemplo:

Opción 3: Utilizar etiquetas de estilo

Las media queries pueden especificar directamente distintas CSS para los formatos Mobi y KF8 mediante etiquetas <style>.

Ejemplo:

Opción 4: Utilizar @import

Las media queries pueden especificar directamente distintas CSS para los formatos Mobi y KF8 utilizando @import para incluir distintos archivos CSS.

Ejemplo:

Utilizar la propiedad display:none con media queries

Para especificar las CSS para el contenido en el formato para Mobi 7 y KF8, use la propiedad display:none para las media queries. La propiedad display:none es compatible con el formato Mobi 7 a partir del KindleGen 2.4 y versiones posteriores.

Ejemplo:

Limitaciones de la propiedad display:none

Kindle limita el uso de la propiedad display:none para bloques de contenido de más de 10 000 caracteres. Si la propiedad display:none se aplica a un bloque de contenido superior a 10 000 caracteres, KindleGen generará un error.