Les requêtes média sont des blocs de code CSS qui permettent aux créateurs de contenu d'appliquer des styles différents pour chaque appareil (ou groupe d'appareils) Kindle, à partir d'une seule et même feuille de style. Amazon a implémenté les requêtes média pour permettre aux créateurs de contenu d'offrir une expérience optimale aux clients sur l'ensemble des appareils.

Amazon recommande de limiter l'usage des requêtes média aux seuls cas où elles permettent de résoudre un problème ou d'améliorer l'expérience de lecture. Par exemple, vous pouvez utiliser les requêtes média pour :

• créer des lettrines personnalisées pour certains appareils ou groupes d'appareils ;
• prévoir différentes couleurs de texte en fonction des appareils utilisés : par exemple des couleurs claires (jaune, bleu clair, rose, etc.) sur les tablettes, et des couleurs plus foncées sur les liseuses pour un contraste optimal ;
• augmenter la taille de police des pop-ups textuels à mise en page fixe sur les liseuses sans modifier les paramètres des tablettes, afin de tenir compte de la différence de taille entre les écrans ;
• afficher des bordures colorées sur les liseuses et des arrière-plans colorés sur les tablettes, pour reproduire de manière plus réaliste l'aspect papier sur les tablettes, sans nuire à la lisibilité sur les liseuses.

Cette section vous explique comment utiliser des requêtes média pour offrir une expérience de lecture personnalisée sur les liseuses Kindle, les tablettes Fire et les iPad. Vous pouvez appliquer ces mêmes principes à tous les supports Kindle et à tous les formats d’image.

Remarque : Certaines requêtes média peuvent se comporter différemment dans les ebooks dotés de la composition améliorée, que dans les ebooks KF8 ou Mobi.

Les requêtes média font partie de la norme W3.

Règles relatives aux requêtes média

La prise en charge de deux nouveaux types de supports permet aux créateurs de contenu d'utiliser des styles CSS particuliers basés sur les formats de fichiers Mobi ou KF8 : amzn-mobi et amzn-kf8.

• Pour les styles CSS KF8, utilisez la requête média @media amzn-kf8. Celle-ci ne s'applique qu'au format KF8.
• Pour les styles CSS Mobi, utilisez la requête média @media amzn-mobi. Celle-ci ne s'applique qu'au format Mobi.

Les styles @media screen et @media all continuent de s'appliquer aux formats de fichiers KF8 et Mobi.

Utiliser une syntaxe CSS correcte

Les requêtes média sont composées de deux parties : (1) le sélecteur, qui spécifie les conditions de la requête média, et (2) le bloc de déclaration, dont le contenu est affiché lorsque les conditions de la requête média sont remplies.

Dans l'exemple suivant, un arrière-plan de couleur bleue est appliqué uniquement si le livre est au format KF8 et si la résolution d'écran de l'appareil est de 1 280 x 800.

Exemple :

Ajouter un commentaire CSS avant chaque requête média

Amazon recommande d'ajouter un commentaire CSS avant chaque requête média afin d'indiquer clairement l'appareil ciblé. (Un commentaire CSS est introduit par /* et se termine par */.)

Exemple :

Les commentaires CSS ne sont pas visibles par le client, mais ils vous permettent de vous repérer beaucoup plus facilement dans le code et de corriger aisément les éventuels problèmes.

Toujours réserver le code sans requêtes média aux liseuses

Votre code « par défaut », c'est-à-dire celui sans requêtes média, doit toujours être optimisé pour un affichage sur les liseuses Kindle (dont le Kindle Voyage et le Kindle Paperwhite). Le code par défaut correspond aux valeurs CSS qui apparaissent sur une liseuse lorsqu'aucune requête média ne cible ce type d'appareil.

Les requêtes média doivent apparaître à la suite du code sans requête média

Le format CSS étant appliqué selon l'ordre dans lequel il figure dans le fichier, le code ciblant plusieurs appareils (par exemple, le code device-aspect-ratio qui cible toutes les tablettes Fire) doit figurer après le code sans requête média.

Dans l'exemple suivant, le code par défaut prévoit une bordure noire sur tous les appareils dès lors que la classe blue_background est associée à un élément. Les requêtes média qui suivent ce code indiquent de remplacer la bordure par un arrière-plan bleu sur les tablettes Fire et iPad pour tout élément utilisant la classe blue_background. Sur tous les autres appareils, c'est la bordure noire qui sera affichée.

Exemple :

Dans l'exemple ci-dessus, la bordure noire définie pour la classe blue_background dans le code par défaut apparaît aussi sur les tablettes Fire si la propriété border n'est pas remplacée. Il faut donc définir la propriété border sur none dans les requêtes média des tablettes Fire et iPad pour garantir que les valeurs par défaut de cette propriété ne seront pas appliquées. Cette méthode est particulièrement utile si vous utilisez du code sans requêtes média pour les liseuses Kindle et ne souhaitez pas qu'une bordure colorée apparaisse sur les tablettes Fire.

Répétition de code

Lorsque vous ajoutez des requêtes média, n'incluez que les classes et le code CSS que vous souhaitez modifier pour l'appareil en question. En effet, tout code sans requête média est automatiquement appliqué sur l'ensemble des appareils, sauf si une requête média vient l'annuler. Il n'est donc pas nécessaire de répéter le code que vous souhaitez appliquer à tous les appareils.

Dans l'exemple suivant, nous cherchons à supprimer une bordure colorée sur les tablettes Fire afin de la remplacer par un arrière-plan coloré, tout en affichant le texte en rouge sur tous les appareils. L'exemple de gauche est incorrect car la classe .red_font répétée dans la requête média est inutile.

Exemple :

Utilisation des requêtes média

Le tableau suivant présente des exemples de requêtes média prises en charge, ainsi que le code CSS appliqué aux lecteurs KF8, MOBI et autres :

Utilisation des requêtes média pour la rétrocompatibilité avec MOBI

Les requêtes média permettent de fournir, dans un même fichier CSS, du code CSS complexe pour le format KF8 et du code CSS plus simple pour le format Mobi. Voici quelques règles à suivre :

• Un code CSS complexe peut être ignoré au format Mobi. Pour ce faire, il convient de redéfinir la même classe à l'intérieur de la requête média @media amzn-mobi.
• Selon la norme W3C, les requêtes média doivent :
  • soit être des requêtes isolées spécifiées à la suite du code CSS commun ;
    Exemple :
    

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

  • soit inclure !important dans chaque propriété pour définir la priorité.

    Exemple :

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

  
  

  CSS	Styles CSS appliqués au format MOBI	Styles CSS appliqués au format 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; }

Soumission d'une requête média

Vous pouvez soumettre des requêtes média de quatre manières :

• Via un seul fichier CSS
• Via différents fichiers CSS
• Via des balises de style
• Via la règle @import

Option 1 : Utilisation d’un seul fichier CSS

Les requêtes média permettent d'indiquer des styles CSS différents pour les formats MOBI et KF8 dans un même fichier CSS. Dans l'exemple ci-dessous, une classe class1 distincte est spécifiée pour le format MOBI, différente de celle utilisée par les autres formats figurant dans le même fichier CSS.

Exemple :

Option 2 : via différents fichiers CSS

Les requêtes média permettent d'indiquer des styles CSS différents pour les formats Mobi et KF8 dans des fichiers CSS séparés. Dans l'exemple ci-dessous, les formats Mobi et KF8 utilisent des feuilles de style CSS différentes, alors que le style CSS commun continue de s'appliquer à tous les médias.

Exemple :

Option 3 : via des balises de style

Les requêtes média permettent d'indiquer des styles CSS différents pour les formats Mobi et KF8 en utilisant directement des balises <style>.

Exemple :

Option 4 : via la règle @import

Les requêtes média permettent d'indiquer directement des styles CSS différents pour les formats Mobi et KF8 en utilisant la règle @import afin d'inclure des fichiers CSS séparés.

Exemple :

Utilisation de la propriété display:none avec les requêtes média

Pour appliquer un code CSS différent au contenu des formats MOB 7 et KF8, utilisez la propriété display:none dans les requêtes média. La propriété display:none pour le format Mobi 7 est prise en charge par KindleGen 2.4 et versions ultérieures.

Exemple :

Limites relatives à l'utilisation de la propriété display:none

Dans les livres Kindle, l'utilisation de la propriété display:none est limitée aux blocs de texte comprenant moins de 10 000 caractères. Si la propriété display:none est appliquée à un bloc de contenu dépassant 10 000 caractères, KindleGen renvoie une erreur.