Wii, Opera e le Media Queries CSS3

Negli ultimi giorni sto facendo qualche prova su pagine ottimizzate per il Wii Opera Browser. Inizialmente ho verificato cosa si potesse fare facendo ricorso ai soli CSS e al meccanismo previsto nelle specifiche, quello dei tipi di media. Ho preparato una paginetta semplicissima con queste regole:


<style type="text/css">
@media screen {body {background: blue}}
@media tv {body {background: green}}
@media handheld {body {background: red}}
</style>


Risultato. Nei browser desktop lo sfondo è blue, su Opera Mini (che supporta il media type handheld) è rosso, su Opera Wii è... blue. Nonostante sia fatto appositamente per essere usato su schermi TV, il media type è comunque screen.

Mi sono ricordato, a questo punto, di un vecchio hack per servire CSS specifici per Opera (se ne parla da Francesco Terenzani e in questa discussione sul forum di Diodati.org). àˆ basato sul fatto che Opera supporta già  le Media Queries dei CSS3. Si tratta di un meccanismo che estende le funzionalità  dei tipi di media consentendo una maggiore precisione nel servire fogli di stile ad hoc per diversi device. Il termine query fa riferimento al fatto che è possibile costruire vere e proprie espressioni paragonabili, concettualmente, a quelle usate nelle query sui database (con la limitazione che non è possibile usare operatori come < o >).

Il supporto alle Media Query in Opera è solo parziale. Dalle prove che ho fatto con Opera 9.10, le uniche media features supportate delle undici previste sono width e height (se sbaglio, correggetemi). width ed height fanno riferimento, rispettivamente, alla larghezza e all'altezza del viewport (l'area visibile del browser). Sul mio Wii, ho pensato, ho un vantaggio. So che il viewport è di 800x500px, e soprattutto non è ridimensionabile, la misura è fissa. Dopo un po' di test sono arrivato a fare un'altra pagina con queste regole:


@media screen and (min-width: 1px) and (max-width: 1800px)
and (min-height: 1px) {body {background: green}}
@media screen and (width: 800px) and (height: 500px)
{body {background: blue}}


Con la prima dico al browser: se il media type è screen, la larghezza è compresa tra 1px e 1800px e l'altezza è maggiore di 1px, mostra lo sfondo verde. Si applica idealmente alle versioni di Opera per desktop (e agli altri browser desktop quando supporteranno le media query, se aprite la pagina ora vedrete lo sfondo bianco). Ma anche al Wii, perché 800x500px rientrano in questa casistica! Aggiungendo la seconda regola restringo il campo: se la larghezza è esattamente di 800px e l'altezza esattamente di 500px, mostra lo sfondo blue. E dato che la dichiarazione segue la prima, prevale e sul Wii infatti vedo lo sfondo blue. Sembrerebbe tutto a posto. Purtroppo non lo è del tutto. C'è infatti una possibilità  (verificata): se le dimensioni del viewport di Opera desktop sono esattamente di 800x500px, lo sfondo è blue. Basta 1 solo pixel in più o in meno per tornare allo sfondo verde.

Oltre a cià bisogna tener presente un altro scenario, quello delle TV con schermo del tipo Widescreen, su cui le dimensioni di Opera Wii sono di 1024x500px. La conclusione parrebbe essere naturale: nemmeno sfruttando le media query con l'attuale implementazione possiamo cucire un CSS ad hoc per Opera Wii, a meno di non accettare il compromesso che ho segnalato. Se poi qualcuno è così bravo da creare l'espressione giusta...;-). Spero comunque di aver fatto comprendere a quanti ne fossero all'oscuro le potenzialità  delle media query, soprattutto quando troveranno browser in grado di supportarle per intero.

Quanto a Wii, l'alternativa è usare un qualche linguaggio di scripting per servire un CSS ad hoc dopo aver effettuato il riconoscimento della user-agent string, che è questa:


Opera/9.00 (Wii; U; ; 1038-58; Wii Shop Channel/1.0; en)


Oppure tagliare la testa al toro e far ricorso a Flash, anche se pure in quel caso i problemi con le dimensioni dello schermo non mancano.