Media queries são blocos de código CSS que permitem que criadores de conteúdo apliquem diferentes estilos a dispositivos Kindle específicos (ou a um grupo de dispositivos) usando apenas uma style sheet. A Amazon implementou media queries como uma forma de ajudar criadores de conteúdo a criar uma experiência melhor em todos os dispositivos.

A Amazon recomenda que criadores de conteúdo só usem media queries se elas forem resolver um problema ou melhorar a experiência do cliente. Por exemplo, você pode usar media queries para:

• Criar soluções personalizadas de letras capitulares para dispositivos ou grupos de dispositivos específicos.
• Alterar texto em cores claras (amarelo, azul-claro, rosa, etc.) para cores mais escuras que oferecem contraste melhor em E-readers enquanto mantêm a cor original em tablets.
• Aumentar o tamanho da fonte para pop-ups de texto em livros de layout fixo em E-readers, separadamente de tablets, para acomodar as diferenças de tamanhos de tela.
• Exibir bordas coloridas em E-readers e fundos coloridos em tablets independentemente uns dos outros, permitindo que você replique melhor a experiência de livros impressos em tablets sem prejudicar a experiência de leitura em E-readers.

Esta seção descreve maneiras pelas quais você pode usar media queries para personalizar a experiência de leitura nos dispositivos E-reader Kindle, tablets Fire e iPads. Também é possível usar esses mesmos princípios em todos os dispositivos Kindle de todas as proporções de tela.

Observação: Algumas media queries (módulo de CSS3) podem se comportar de maneira diferente em eBooks com configuração de fonte do que os eBooks em KF8 ou Mobi.

As media queries (módulo de CSS3) fazem parte do padrão W3.

Diretrizes para media queries

O suporte para dois tipos de mídia novos permite que os criadores de conteúdo usem CSS específico com base nos formatos de arquivo Mobi ou KF8: amzn-mobi and amzn-kf8.

• Para estilos de CSS para KF8, use a media query @media amzn-kf8. Ela só se aplica ao formato KF8.
• Para estilos de CSS para Mobi, use a media query @media amzn-mobi. Ela só se aplica ao formato Mobi.

Os estilos @media screen e @media all ainda se aplicam tanto ao KF8 quanto ao Mobi.

Use a sintaxe CSS correta

Media queries consistem em duas peças: (1) o seletor, que especifica as condições da media query; e (2) o bloco de declaração, que é processado quando as condições de media query são atendidas.

No exemplo a seguir, a cor de fundo azul só se aplicará se o formato do livro for KF8 e a proporção de tela do dispositivo for 1280 x 800.

Exemplo:

Adicione um comentário CSS antes de cada media query

A Amazon recomenda que você adicione um comentário ao CSS antes de cada media query para esclarecer a qual dispositivo ela se aplica. (Um comentário CSS começa com /* e termina com */).

Exemplo:

Os comentários CSS são invisíveis para o cliente, mas facilitam muito a navegação pelo código e a resolução de problemas por qualquer pessoa que trabalhe no arquivo.

Sempre use código não de media query em dispositivos E-reader não alvo

Sempre otimize seu código não-media query ("padrão") para E-readers Kindle (incluindo o Kindle Voyage e o Kindle Paperwhite). O código padrão contém os valores de CSS que aparecerão em um e-reader quando nenhuma das media queries corresponder a esse dispositivo em particular.

As media queries devem vir depois do código de não-media query

Como o CSS é aplicado na ordem em que aparece, o código que visa vários dispositivos (como o código device-aspect-ratio, que visa todos os tablets Fire) deve aparecer depois de qualquer código que não seja de media query.

No exemplo a seguir, o código padrão cria uma borda preta em todos os dispositivos para qualquer elemento que use a classe blue_background. As media queries que vêm em seguida removem a borda e exibem um fundo azul nos tablets Fire e no iPad para qualquer elemento que use a classe blue_background. Todos os outros dispositivos só exibirão a borda preta.

Exemplo:

No exemplo acima, a borda preta definida no código padrão para a classe blue_background ainda aparecerá nos tablets Fire se a propriedade border não for substituída. Configurar a border como none nas media queries para tablets Fire e iPad assegura que os valores padrão dessas propriedades sejam substituídos. Isso é útil se você estiver usando código que não seja de media query para E-readers Kindle e se não quiser transferir uma borda colorida para um tablet Fire.

Duplicação de código

Ao escrever media queries, inclua apenas as classes e o código CSS que precisam ser alterados para esse dispositivo em particular. Qualquer código não-media query que você usar aparecerá automaticamente em todos os dispositivos, a menos que seja substituído por uma media query. Portanto, não é necessário repetir código que você queira aplicar a todos os dispositivos.

No exemplo a seguir, o objetivo é substituir uma borda colorida em tablets Fire e trocá-la por um fundo colorido, enquanto o texto deve ficar vermelho em todos os dispositivos. O exemplo à esquerda está incorreto porque não é preciso repetir a classe .red_font no código da media query.

Exemplo:

Uso de media queries (módulo de CSS3)

A tabela a seguir apresenta exemplos de media queries aceitas e o CSS aplicado a KF8, MOBI e outros leitores:

Uso de media queries para compatibilidade com versões anteriores de MOBI

As media queries permitem que um arquivo CSS forneça CSS complexo para o KF8 e CSS básico para o formato Mobi. Algumas diretrizes:

• CSS complexo pode ser sobrescrito pelo formato Mobi redefinindo-se a mesma classe dentro da media query @media amzn-mobi.
• Pelo padrão W3C, as media queries devem:
  • Ter queries individuais especificadas após o CSS comum; ou
    Exemplo:
    

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

  • Incluir !important em cada propriedade para reforçar a precedência.

    Exemplo:

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

  
  

  CSS	Estilos CSS aplicados ao MOBI	Estilos CSS aplicados ao 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: negrito; 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; }

Envio de uma media query

Há quatro opções para o envio de media queries:

• Um arquivo CSS
• Diferentes arquivos CSS
• Tags de estilo
• @import

Opção 1: Usar um arquivo CSS

Media queries podem especificar diferentes CSS para formatos MOBI e KF8 no mesmo arquivo CSS. No exemplo abaixo, uma classe diferente .class1 é especificada para uso com o formato MOBI no mesmo arquivo CSS.

Exemplo:

Opção 2: usar arquivos CSS diferentes

Media queries podem especificar CSS diferentes para formatos Mobi e KF8 em diferentes arquivos CSS. No exemplo abaixo, os formatos Mobi e KF8 utilizam diferentes style sheets de CSS, embora os estilos comuns de CSS se apliquem a todas as mídias.

Exemplo:

Opção 3: usar tags de estilo

Media queries podem especificar CSS diferentes para formatos Mobi e KF8 diretamente usando tags <style>.

Exemplo:

Opção 4: usar @import

Media queries podem especificar CSS diferentes para formatos Mobi e KF8 diretamente usando @import para incluir arquivos CSS diferentes.

Exemplo:

Uso da propriedade display:none com media queries

Para especificar diferentes CSS para o conteúdo nos formatos MOBI 7 e KF8, use a propriedade display:none com media queries. Suporte para a propriedade display:none no formato Mobi 7 está disponível no KindleGen 2.4 e versões posteriores.

Exemplo:

Limitação no uso da propriedade display:none

O Kindle limita o uso da propriedade display:none para blocos de conteúdo com mais de 10.000 caracteres. Caso a propriedade display:none seja aplicada em um bloco de conteúdo que contenha mais de 10.000 caracteres, o KindleGen exibirá um erro.