Il grande errore di CSS Media Query

Ti senti mai strano quando tutti intorno a te fanno qualcosa che normalmente riterresti sbagliato [o non del tutto ideale almeno], ma in qualche modo nessuno sembra voler dire qualcosa per un motivo o per l'altro? È una sensazione molto strana vedere tutti fare la migliore impressione di uno sfortunato osservatore. In un certo senso mi ricorda quella vecchia favola, "I vestiti nuovi dell'imperatore".

Mi sono sempre sentito così riguardo alle media query CSS. Perché tutti accettano così tanto una tecnologia che sembra non portare a termine il lavoro? Perché noi come comunità non ci siamo uniti e non l'abbiamo migliorata in modo reale e significativo? Perché non abbiamo pensato a qualcosa di meglio?

Oggi, le query multimediali CSS sembrano essere la pietra angolare funzionale del design web reattivo. Ma non è mai stato progettato per quello per cui tutti lo usano oggi, e la prova è nella pratica. Ancora spesso mi imbatto in siti Web quando utilizzo un dispositivo tablet che all'inizio sembra ben progettato, ma sembra che sembri decisamente traballante quando li metti alla prova.

C'è qualcosa di fondamentalmente sbagliato in questo approccio al responsive web design che non abbiamo ancora affrontato adeguatamente, e vorrei essere una delle poche voci a chiamare l'imperatore per la sua nudità su questo. Per fortuna, però, al giorno d'oggi, sono contento che ci siano quasi zero possibilità di essere bruciati sul rogo per avere questo punto di vista alternativo.

Cosa c'è che non va nelle query multimediali CSS

Le query multimediali CSS sono state progettate per qualcosa, ma quella cosa non è un web design reattivo. Sulla base della mia esperienza, ecco sette (7) grandi problemi che ho riscontrato quando ho provato a usarli per lavorare con i siti Web:

1. Non intuitivo:

"Le query sui media CSS sono intuitive", ha detto nessun web designer mai. Il modo in cui definisci una query multimediale è piuttosto semplice, ma non è sempre esattamente chiaro come andranno le cose su browser reali, dispositivi reali e in una miriade di scenari.

 @schermo solo media e (larghezza minima: 320 px) e (larghezza massima: 480 px) {
    /** Le regole CSS vanno qui **/
}

Il codice sopra si applica al viewport quando è compreso tra 320 e 480 pixel. Tuttavia, non è esattamente definitivo [o intuitivo] quando vuoi fare qualcosa di più specifico, come applicare una regola di stile quando il dispositivo è un tablet in modalità orizzontale. Non è impossibile [più o meno] impostare una query multimediale per farlo, ma sicuramente non è intuitivo o definitivo.

2. Condizionalità limitata:

Le media query CSS sono dinamiche e ti consentono di definire istruzioni condizionali nel tuo CSS. Ad esempio, se la finestra si trova tra questo e quello, fai l'altro. Tuttavia, sei principalmente limitato alle considerazioni sul viewport e ci sono molti altri scenari condizionali che avrebbero senso nel web design moderno.

Supponiamo che tu stia costruendo un'app web progressiva. Ci sono momenti in cui sarebbe utile dare uno stile a determinati elementi dell'interfaccia utente in modo diverso in base al sistema operativo. Ad esempio, è consuetudine avere la tab-bar in basso per i dispositivi iOS, mentre per Android avviene il contrario. Quindi, come lo faresti funzionare esattamente con le query multimediali CSS?

Non puoi, perché le query multimediali CSS non sono costruite con alcuna funzione che ti consenta. Oltre a questo, ci sono numerose altre personalizzazioni che potrebbe essere necessario apportare tramite CSS, ma le query multimediali non sono un'opzione quando sono necessari vari gradi di condizionalità da semplice a avanzata.

3. Non nativamente estensibile:

Le media query CSS sono funzionalità integrate nel browser. Ciò significa che non è nativamente estensibile. In altre parole, non è possibile aggiungere funzionalità aggiuntive e migliorate alle query multimediali CSS in modo nativo tramite l'interfaccia CSS.

Anche se le nuove funzionalità di query multimediale CSS sono approvate dal processo degli standard web [longanime], ci vuole ancora del tempo prima che queste funzionalità diventino utilizzabili a causa dell'ubiquità. Inoltre, non tutte le funzionalità aggiunte potrebbero esserti utili, quindi devi trovare un altro modo per risolvere la tua sfida specifica se non ottieni ciò che desideri.

Certo, c'è un modo per estendere CSS, ma devi conoscere JavaScript davvero, davvero bene, e non è un processo pratico per la maggior parte dei web designer.

4. Non adatto per il retrofit:

Alcuni potrebbero trovarlo difficile da credere, ma prima che i dispositivi mobili si presentassero, in realtà c'erano molti siti Web là fuori e nessuno di essi era ottimizzato per i dispositivi mobili. Di conseguenza, questi siti Web dell'era desktop dovevano essere aggiornati.

Sfortunatamente, le media query CSS non sono un'ottima opzione per questa attività. Poiché questi siti Web sono stati creati prima che i dispositivi mobili fossero rilevanti, molti di essi hanno elementi di design che non si prestano a un web design reattivo, ad esempio barre laterali, layout basati su tabelle, contenuti a schede, ecc. Inoltre, una parte considerevole di questi siti Web sono costruito su un sistema di gestione dei contenuti (CMS) come WordPress, Drupal, Magento, ecc., e l'integrazione efficace delle query multimediali CSS [front-end] dal back-end è estremamente difficile da coordinare quasi impossibile.

Ho dovuto adattare siti Web basati su Magento Enterprise, WordPress e uno che utilizzava un CMS personalizzato basato su Coldfusion, e tutti i progetti sarebbero stati assolutamente impossibili utilizzando le query multimediali CSS [che è ciò che tutti i miei clienti hanno provato prima di utilizzare la nostra alternativa approccio].

5. Codice non efficiente:

L'utilizzo di query multimediali CSS per rendere reattiva una pagina Web richiede la moltiplicazione del codice su scala significativa. A causa del modo in cui queste direttive funzionano [con i punti di interruzione], è necessario definire regole di stile individuali in ogni blocco di query multimediali.

 sezione {larghezza: 960px;}

/* Ritratto */
@schermo solo multimediale e (larghezza minima del dispositivo: 320 px) e (larghezza massima del dispositivo: 480 px) e (-webkit-rapporto-pixel minimo del dispositivo: 2) e (orientamento: verticale) {
    sezione {larghezza: 100%}
}
/* Paesaggio */
@media only screen and (larghezza minima del dispositivo: 320 px) e (larghezza massima del dispositivo: 480 px) e (-webkit-min-device-pixel-ratio: 2) e (orientamento: orizzontale) {
    sezione {larghezza: 100%;}
}

Quando scrivevo il codice sopra, la mia intenzione originale era di rendere gli elementi <section> sulla mia pagina fluidi [larghezza del 100%] in tutti i dispositivi mobili. Tuttavia, poiché non dispongo di funzionalità di rilevamento del dispositivo nativo, devo compromettere e definire una regola di stile in ogni blocco di query multimediali CSS orientato ai dispositivi mobili per assicurarmi che la nuova proprietà venga applicata in tutti gli scenari pertinenti.

Ciò significa che l'efficienza funzionale della cascata di fogli di stile e i buoni principi di sviluppo di Do-not-Repeat-Yourself devono passare in secondo piano.

6. Aumenta la complessità del flusso di lavoro:

Le query multimediali CSS gestiscono solo un aspetto molto specifico del design web reattivo che è quasi interamente incentrato sul ridimensionamento del layout. Ergo, per fare qualcosa di più, devi fare affidamento su JavaScript per fare la differenza. Ciò introduce ulteriori requisiti di apprendimento per codice e strumenti.

Inoltre, il modo non definitivo in cui [quelle multimediali] gestisce i punti di interruzione significa che devi dedicare più tempo [e denaro] a testare le tue pagine Web in numerosi dispositivi virtuali e/o fisici per assicurarti che le cose funzionino nel modo previsto originariamente . Inoltre, devi testare nuovamente tutto di nuovo quando apporti modifiche significative al tuo layout.

Con l'azione semplice e mirata dell'utilizzo delle query multimediali CSS, aumenti notevolmente il numero di passaggi necessari per creare una pagina Web moderna.

7. Peggiora prestazioni:

A causa del modo in cui funzionano le query multimediali CSS, finirai per aver bisogno di molto più codice CSS che altrimenti per rendere il tuo sito web reattivo/mobile-friendly. Secondo i dati di HTTPArchive.org, le dimensioni dei file CSS sono aumentate del 114% negli ultimi cinque anni. L'aumento delle dimensioni dei file HTML ha raggiunto il picco di circa il 53% nello stesso periodo.

Questa situazione particolare ha implicazioni sulle prestazioni per il tuo sito Web, poiché è destinato a essere più lento dopo l'implementazione di query multimediali CSS [in un contesto di progettazione Web reattiva] di quanto non lo fosse mai stato prima, specialmente per i dispositivi mobili che utilizzano reti a banda larga mobili non ideali.

E, a parte il problema dell'aumento delle dimensioni dei file, non esiste alcun meccanismo interno all'interno delle query multimediali CSS per migliorare effettivamente le prestazioni della tua pagina web. Per questo, dovrai sfruttare tecniche JavaScript avanzate per abilitare questi miglioramenti.

Perché lo stiamo ancora usando?

Se ti chiedessi quale percentuale di siti Web utilizza le query multimediali CSS, quale sarebbe la tua risposta? Con tutto lo stress che i web designer hanno dovuto sopportare nel corso degli anni, penseresti che probabilmente a quest'ora avremmo superato il problema dell'adozione, ma ti sbagli di grosso.

La percentuale di siti Web che utilizzano query multimediali CSS sull'intero Web è di circa lo 0,2%. Confrontalo con la percentuale di siti Web che utilizzano jQuery al 18%. Ciò significa che hai 90 volte più probabilità di imbatterti in un sito Web alimentato da jQuery rispetto a un sito Web reattivo [esclusi quelli che sono entrambi].

Perché un toolkit basato su una tecnologia di base [JavaScript] che alcune persone sembrano ritenere complicato e superfluo dovrebbe essere così avanti rispetto a uno apparentemente meno complesso [CSS] e destinato ad affrontare un problema probabilmente più importante [facilità per dispositivi mobili] ? Ovviamente, c'è qualcosa di gravemente sbagliato qui che sta ostacolando l'adozione e deve essere affrontato.

Le query multimediali CSS hanno trovato la sua strada nei browser Web per gestire una sfida specifica, ma è stato poi redatto per portare sulle spalle tutto il peso del design web reattivo. È un po' come esercitarsi per un recital di flauto dolce di terza elementare, solo per essere magicamente trasportati alla Royal Albert Hall per eseguire un assolo di trombone del Messiah di Händel; Non è giusto!

Con tutte le sfide del moderno web design, è estremamente sorprendente che siamo ancora in questa attività di media query. Non va abbastanza lontano per affrontare alcuni importanti problemi legati all'eredità, oltre ad alcuni nuovi in ​​nuovi campi come il design progressivo delle app web. In quanto tale, penso che sia ora di trovare un'alternativa. Ma cosa sarebbe esattamente?

Qual'è la soluzione?

La soluzione a tutto questo è davvero molto semplice: JavaScript. Ora, prima di prendere quel forcone, dammi la possibilità di spiegare.

JavaScript è l'unico componente della trinità HTML5 in cui estensibilità non è una parolaccia. Non puoi estendere il markup HTML usando più HTML e sei sicuro che non puoi estendere CSS in modo nativo con CSS. Tuttavia, puoi estendere JavaScript in modo nativo utilizzando JavaScript e puoi anche fare lo stesso per CSS.

La manipolazione dei CSS con JavaScript è ampiamente discussa nel Web Standards Curriculum del W3C. L'interfaccia DOM document.stylesheets ci consente di accedere ai fogli di stile applicati a una pagina web, inclusi tutti i fogli di stile esterni a cui si fa riferimento utilizzando il tag <link> dell'HTML. Non è una cosa facile da fare, ma è possibile.

Quindi dovrei espandere la risposta iniziale: non è semplicemente JavaScript, è CSS assistito da JavaScript . JavaScript è una piattaforma fantastica con funzionalità incredibili, ma CSS è il luogo in cui lavora la maggior parte dei web designer. Se potessimo in qualche modo creare una sorta di ponte funzionale tra questi due in cui un web designer potrebbe scrivere un set di regole CSS per sfruttare la funzionalità JavaScript, sarebbe in qualche modo una svolta per il web design.

Mostrami del codice

Negli ultimi due anni circa, ho lavorato su un nuovo toolkit CSS assistito da JavaScript chiamato rKit. L'idea era quella di creare uno strumento intuitivo per i progettisti non solo per sostituire le query multimediali CSS per un web design reattivo, ma per affrontare alcune delle sfide note [e sconosciute] che i web designer/sviluppatori devono affrontare quando creano siti Web e app Web moderni.

C'è molto nel concetto, ma ecco un breve frammento di codice di CSS da spiegare:

 #my-element[rk="if @viewport.width tra 320 e 480"]{background-color: #0000ff;}

Con rKit, le regole CSS sembrano selettori di valori di attributo modificati. È quindi possibile definire un'espressione all'interno della sezione del valore. La sintassi di questa espressione è progettata per essere semplice e intuitiva.

Nota : rk è un identificatore di attributo costante.

Il codice sopra è funzionalmente equivalente alla media query CSS di seguito:

 @schermo solo multimediale e (larghezza minima del dispositivo: 320 px) e (larghezza massima del dispositivo: 480 px) {
    #mio-elemento {colore-sfondo:#0000ff;}
}

Tuttavia, c'è molto di più che puoi fare con rKit. Ecco un altro veloce esempio:

 #my-element[rk="if @self.width tra 320 e 480"]{background-color: #00ff00;}

Modificando semplicemente il riferimento all'entità da @viewport a @self , abbiamo essenzialmente impostato quella che viene comunemente definita query di elemento. Quindi quello che succede ora è che quando la larghezza di #my-element è compresa tra 320 e 480 pixel, verrà applicata la dichiarazione data [ background-color: #00ff00 ].

Puoi anche usare classi invece di pure dichiarazioni:

 #my-element[rk="if @self.width tra 320 e 480 quindi addClass(c_mobile_320)"]{}
.c_mobile_320 {colore-sfondo: #00ff00;}

Questa è solo la punta dell'iceberg però. Con rKit, puoi fare cose davvero fantastiche come la gestione degli eventi, l'osservazione delle mutazioni, le query di quantità, il routing, l'associazione di dati [fino a 7 vie] e una miriade di altre cose interessanti, il tutto utilizzando puro codice CSS e senza scrivere una singola riga di JavaScript.

rKit sarà gratuito e open source quando verrà lanciato. Inoltre, sfoggerà anche uno speciale pacchetto di prestazioni che puoi installare in un modo che garantisce zero blocchi di rendering, quindi la pagina Web si carica come un razzo su binari.

Ci è voluto un bel po' per metterlo insieme, ma sarà qui presto [sicuramente prima di Godot], e sono davvero interessato a vedere cosa sono in grado di fare i web designer [e gli sviluppatori].

Conclusione

Spero che tu non esca da questo post pensando che sto danneggiando le query multimediali CSS solo perché. Non sono. Sarebbe come schiacciare un pomodoro per finire in una macedonia. Come ho detto prima, le query multimediali CSS non sono mai state progettate per il web design reattivo. È stato cooptato per convenienza, e tutti abbiamo fatto il passo falso di cercare di usarlo per risolvere tutti i problemi.

Purtroppo, come comunità web, non siamo mai riusciti a correggere l'errore iniziale migliorandolo in modo significativo o proponendo un'alternativa migliore. Ma ahimè, gli spettacoli devono andare avanti, i siti web devono essere costruiti e il progresso deve prevalere. È tempo di cambiare.

rKit è solo un'opzione e una risposta. Non è il primo, e sicuramente non sarà l'ultimo. Ma almeno è un passo giusto nella giusta direzione. Un'opportunità per risolvere alcuni problemi del passato, e poi ripetere per risolverli nel presente e nel futuro. Sarebbe interessante vedere come si confronta con lo status quo.

Tutto sommato, commettere un errore non è fine a se stesso; dovrebbe essere un'esperienza di apprendimento. Con un po' di fortuna, impareremo come utilizzare lo strumento giusto per il lavoro giusto la prossima volta. Voglio dire, solo perché puoi andare in bicicletta su una strada asfaltata non significa che dovresti portarne una al Nurburgring. Porta una Porsche!