Le media queries sono blocchi di codice CSS che consentono ai creatori di contenuti di applicare diversi stili a dispositivi (o gruppi di dispositivi) Kindle specifici utilizzando un unico foglio di stile. Amazon ha implementato le media queries per aiutare i creatori di contenuti a migliorare l'utilizzo dei dispositivi da parte degli utenti.

Amazon consiglia ai creatori di contenuti di usare le media queries solo se necessarie per risolvere un problema o migliorare l'esperienza di lettura degli utenti. Ad esempio, puoi usare le media queries per:

• Creare capilettera personalizzati per dispositivi o gruppi di dispositivi specifici.
• Modificare il testo di colore chiaro (giallo, azzurro, rosa e così via) in tonalità più scure per migliorare il contrasto sui lettori di eBook, senza modificare il colore originale sui tablet.
• Aumentare la dimensione del carattere dei pop-up con testo a impaginazione fissa sui lettori di eBook in modo indipendente rispetto ai tablet, affinché si adatti a schermi di dimensioni diverse.
• Visualizzare i bordi colorati sui lettori di eBook e gli sfondi colorati sui tablet in modo indipendente, consentendo una riproduzione migliore dell'effetto di stampa sui tablet, senza compromettere l'esperienza di lettura sui lettori di eBook.

Questa sezione descrive le modalità di utilizzo delle media queries per personalizzare l'esperienza di lettura su lettori di eBook Kindle, tablet Fire e iPad. Puoi applicare gli stessi principi a tutte le piattaforme Kindle per dispositivi di tutte le proporzioni.

Nota: alcune media queries possono funzionare in modo diverso negli eBook con composizione migliorata e in quelli con formato KF8 o Mobi.

Le media queries fanno parte dello standard W3.

Linee guida per le media queries

Il supporto di due nuovi tipi di contenuti multimediali permette ai creatori di contenuti di usare CSS specifici basati sul formato file Mobi o KF8: amzn-mobi e amzn-kf8.

• Per gli stili CSS per il formato KF8, usa la media query @media amzn-kf8. Questo elemento si applica solo al formato KF8.
• Per gli stili CSS per il formato Mobi, usa la media query @media amzn-mobi. Questo elemento si applica solo al formato Mobi.

Gli stili @media screen e @media all continuano a essere applicabili a entrambi i formati, KF8 e Mobi.

Usa la sintassi CSS corretta

Le media queries sono composte da due parti: (1) il selector, che specifica le condizioni della media query; (2) il declaration block, che viene visualizzato quando le condizioni della media query vengono soddisfatte.

Nell'esempio seguente, il colore blu viene applicato allo sfondo solo se il formato del libro corrisponde a KF8 e le proporzioni del dispositivo sono 1280 x 800.

Esempio:

Aggiungi un commento CSS prima di ogni media query

Amazon consiglia di aggiungere un commento CSS prima di ogni media query per specificare il dispositivo di interesse (un commento CSS inizia con /* e finisce con */).

Esempio:

I commenti CSS sono invisibili agli utenti, ma rendono più semplice la navigazione nel codice e la risoluzione dei problemi per chiunque lavori sul file.

Usa sempre un codice query di tipo non media per i lettori di eBook

Ottimizza sempre il tuo codice query di tipo non media ("di default") per i lettori di eBook Kindle (inclusi Kindle Voyage e Kindle Paperwhite). Il codice di default contiene i valori CSS che appariranno su un lettore di eBook quando nessuna delle media queries corrisponde a quel dispositivo specifico.

Le media queries devono essere visualizzate dopo il codice query di tipo non media

Poiché la sintassi CSS è applicata nell'ordine in cui è visualizzata, il codice che si riferisce a più dispositivi (come device-aspect-ratio che si riferisce a tutti i tablet Fire) deve essere visualizzato dopo eventuali codici query di tipo non media.

Nell'esempio seguente, il codice di default crea un bordo nero su ogni dispositivo per qualsiasi elemento che utilizza la classe blue_background. Le media queries che lo seguono rimuovono il bordo e mostrano uno sfondo blu sui tablet Fire e sugli iPad per ogni elemento che utilizza la classe blue_background. Su tutti gli altri dispositivi verrà visualizzato solo il bordo nero.

Esempio:

Nell'esempio precedente, il bordo nero definito nel codice di default per la classe blue_background continua a essere visualizzato sui tablet Fire se la proprietà border non viene annullata. L'impostazione di border su none nelle media queries per i tablet Fire e gli iPad consente di annullare i valori di default di queste proprietà. Questo è utile se utilizzi un codice query di tipo non media per i lettori di eBook Kindle e non desideri trasferire un bordo colorato su un tablet Fire.

Codici doppi

Durante la scrittura delle media queries, includi solo le classi e i codici CSS da modificare su un dispositivo specifico. Ogni codice di tipo non media query utilizzato verrà visualizzato automaticamente su tutti i dispositivi, a meno che non sia sovrascritto con una media query; non è perciò necessario ripetere un codice da applicare a tutti i dispositivi.

Nell'esempio seguente, l'obiettivo è quello di annullare un bordo colorato sui tablet Fire e sostituirlo con uno sfondo colorato, mantenendo il colore rosso del testo su tutti i dispositivi. L'esempio sulla sinistra non è corretto poiché la ripetizione della classe .red_font nel codice della media query non è necessaria.

Esempio:

Uso delle media queries

La seguente tabella riporta alcuni esempi di media queries supportate e di CSS applicati ai formati KF8, MOBI e ad altri lettori:

Uso delle media queries per la retrocompatibilità con il formato MOBI

Le media queries consentono a un file CSS di fornire CSS complessi per il formato KF8 e CSS di base per il formato Mobi. Alcune linee guida:

• Un CSS complesso può essere ignorato per il formato Mobi ridefinendo la stessa classe all'interno della media query @media amzn-mobi.
• Secondo lo standard W3C, le media queries dovrebbero essere:
  • Singole query specificate dopo il CSS comune, oppure
    Esempio:
    

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

  • Includi !important in ogni proprietà per applicare la precedenza.

    Esempio:

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

  
  

  CSS	Stili CSS applicati a MOBI	Stili CSS applicati al formato 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; }

Invio di una media query

Esistono quattro opzioni per inviare le media queries:

• Un file CSS
• Più file CSS
• Tag di stile
• @import

Opzione 1. Uso di un file CSS

Le media queries possono specificare diversi CSS per i formati MOBI e KF8 nello stesso file CSS. Nell'esempio seguente è specificata una classe .class1 diversa per il formato MOBI rispetto agli altri formati all'interno dello stesso file CSS.

Esempio:

Opzione 2. Uso di più file CSS

Le media queries possono specificare CSS diversi per i formati Mobi e KF8 in più file CSS. Nell'esempio di seguito i formati Mobi e KF8 utilizzano diversi fogli di stile CSS e gli stili CSS comuni si applicano a tutti i contenuti multimediali.

Esempio:

Opzione 3. Uso di tag di stile

Le media queries possono specificare CSS diversi per i formati Mobi e KF8 utilizzando direttamente i tag <style>.

Esempio:

Opzione 4. Uso di @import

Le media queries possono specificare CSS diversi per i formati Mobi e KF8 utilizzando direttamente @import per includere diversi file CSS.

Esempio:

Uso della proprietà display:none con le media queries

Per specificare CSS diversi per il contenuto in formato MOBI 7 e KF8, usa la proprietà display:none con le media queries. Il supporto della proprietà display:none nel formato Mobi 7 è disponibile in KindleGen 2.4 e versioni successive.

Esempio:

Limitazioni nell'uso della proprietà display:none

Kindle limita l'uso della proprietà display:none ai blocchi di contenuto con più di 10.000 caratteri. Se la proprietà display:none è applicata a un blocco di contenuto con più di 10.000 caratteri, KindleGen restituisce un errore.