Marea greșeală de interogare media CSS

Te-ai simțit vreodată ciudat când toți cei din jurul tău fac ceva despre care, în mod obișnuit, l-ai crede greșit [sau cel puțin nu tocmai ideal], dar cumva nimeni nu pare să vrea să spună ceva dintr-un motiv sau altul? Este un sentiment foarte ciudat să-i vezi pe toți făcând cea mai bună impresie despre un observator nefericit. Îmi cam amintește de acea fabulă veche, „Hainele noi ale împăratului”.

M-am simțit așa întotdeauna în privința interogărilor media CSS. De ce toată lumea acceptă atât de mult o tehnologie care pur și simplu nu pare să-și facă treaba? De ce noi, ca comunitate, nu ne-am adunat și am îmbunătățit-o într-un mod real și semnificativ? De ce nu am venit cu ceva mai bun?

Astăzi, interogările media CSS se întâmplă să fie piatra de temelie funcțională a designului web responsive. Dar, nu a fost niciodată conceput pentru ceea ce toată lumea îl folosește astăzi, iar dovada este în practică. Încă de multe ori dau de site-uri web atunci când folosesc o tabletă care la început pare bine concepută, dar se întâmplă să arate și să se simtă de-a dreptul neplăcut când le treci la iveală.

Este ceva fundamental în neregulă cu această abordare a designului web responsive pe care pur și simplu nu l-am abordat încă în mod corespunzător și aș dori să fiu una dintre puținele voci care să-l cheme pe împărat pentru goliciunea sa. Din fericire, totuși, în zilele noastre, mă bucur că există aproape zero șanse să fiu ars pe rug pentru că am acest punct de vedere alternativ.

Ce este în neregulă cu interogările media CSS

Interogările media CSS au fost concepute pentru ceva, dar acel lucru nu este un design web receptiv. Pe baza experienței mele, iată șapte (7) probleme mari pe care le-am întâlnit când am încercat să le folosesc pentru a lucra cu site-uri web:

1. Nu este intuitiv:

„Interogările media CSS sunt intuitive”, a spus niciun designer web. Modul în care definiți o interogare media este destul de simplu, dar nu este întotdeauna clar cum se vor desfășura lucrurile pe browsere reale, pe dispozitive reale și într-o multitudine de scenarii.

 Ecran numai @media și (lățime minimă: 320 px) și (lățime maximă: 480 px) {
    /** Regulile CSS merg aici **/
}

Codul de mai sus se aplică ferestrei de vizualizare când este între 320 și 480 de pixeli. Cu toate acestea, nu este chiar definitiv [sau intuitiv] atunci când doriți să faceți ceva mai specific, cum ar fi să aplicați o regulă de stil atunci când dispozitivul este o tabletă în funcționare peisaj. Nu este imposibil să setați [un fel de] o interogare media pentru a face acest lucru, dar cu siguranță nu este intuitiv – sau definitiv.

2. Condiționalitate limitată:

Interogările media CSS sunt dinamice și vă permit să definiți declarații condiționate în CSS. De exemplu, dacă fereastra este între aceasta și aceea, atunci faceți cealaltă. Cu toate acestea, sunteți limitat în mare parte la considerente de vizualizare și există multe mai multe scenarii condiționate care ar avea sens în designul web modern.

Să presupunem că construiți o aplicație web progresivă. Există momente când ar fi util să stilați anumite elemente ale interfeței de utilizare în mod diferit în funcție de sistemul de operare. De exemplu, este obișnuit să existe bara de file în partea de jos pentru dispozitivele iOS, în timp ce pentru Android este cazul invers. Deci, cum ați face ca acest lucru să funcționeze cu interogări media CSS?

Nu poți, deoarece interogările media CSS nu sunt create cu nicio caracteristică care ți-ar permite. Pe lângă aceasta, se întâmplă să existe numeroase alte personalizări pe care este posibil să trebuiască să le faceți prin CSS, dar interogările media nu sunt o opțiune atunci când aveți nevoie de diferite grade de condiționalitate simplă până la avansată.

3. Nu este extensibil nativ:

Interogările media CSS sunt funcționalități care sunt incluse în browser. Aceasta înseamnă că nu este extensibil în mod nativ. Cu alte cuvinte, nu puteți adăuga capacități suplimentare și îmbunătățite la interogările media CSS în mod nativ prin interfața CSS.

Chiar dacă noile funcții de interogare media CSS sunt aprobate de procesul standardelor web [de multă suferință], este nevoie de timp înainte ca aceste caracteristici să devină utilizabile din cauza omniprezenței. În plus, nu toate caracteristicile adăugate vă pot fi utile, așa că vă rămâne să găsiți o altă modalitate de a vă rezolva provocarea specifică dacă nu obțineți ceea ce doriți.

Desigur, există o modalitate de a extinde CSS, dar trebuie să cunoașteți JavaScript foarte, foarte bine și nu este un proces practic pentru majoritatea designerilor web.

4. Nu este potrivit pentru modernizare:

Unii le-ar putea fi greu de crezut, dar înainte de apariția dispozitivelor mobile, existau de fapt o mulțime de site-uri web și niciunul dintre ele nu era compatibil cu dispozitivele mobile. Ca rezultat, aceste site-uri web din era desktop au trebuit să fie actualizate.

Din păcate, interogările media CSS nu sunt o opțiune foarte bună pentru această sarcină. Deoarece aceste site-uri web au fost construite înainte ca dispozitivele mobile să fie relevante, multe dintre ele au elemente de design care nu se pretează pentru un design web receptiv, de exemplu, bare laterale, machete bazate pe tabele, conținut cu file etc. De asemenea, o proporție considerabilă dintre aceste site-uri web sunt construit pe un sistem de management al conținutului (CMS) precum WordPress, Drupal, Magento etc., și integrarea eficientă a interogărilor media CSS [front-end] din back-end este extrem de dificil până aproape imposibil de coordonat.

A trebuit să modernizez site-uri web alimentate de Magento Enterprise, WordPress și unul care folosea un CMS personalizat bazat pe Coldfusion, iar toate proiectele ar fi fost de-a dreptul imposibile folosind interogări media CSS [care este ceea ce au încercat toți clienții mei înainte de a folosi alternativa noastră. abordare].

5. Nu este eficient de cod:

Utilizarea interogărilor media CSS pentru a face o pagină web receptivă necesită multiplicarea codului la o scară semnificativă. Datorită modului în care funcționează aceste directive [cu punctele de întrerupere], trebuie să definiți reguli de stil individuale în fiecare bloc de interogare media.

 secțiune {lățime: 960px;}

/* Portret */
Ecran numai @media și (lățime-min-dispozitiv: 320 px) și (lățime-max-dispozitiv: 480 px) și (-webkit-min-device-pixel-ratio: 2) și (orientare: portret) {
    secțiune {lățime: 100%}
}
/* Peisaj */
Ecran numai @media și (lățime-min-dispozitiv: 320 px) și (lățime-dispozitiv-max: 480 px) și (-webkit-min-device-pixel-ratio: 2) și (orientare: peisaj) {
    secțiune {lățime: 100%;}
}

Când scriam codul de mai sus, intenția mea inițială a fost să fac elementele <section> de pe pagina mea fluide [lățime de 100%] pe toate dispozitivele mobile. Cu toate acestea, deoarece nu am capacitatea nativă de detectare a dispozitivului, trebuie să compromit și să definesc o regulă de stil în fiecare bloc de interogare media CSS orientat spre mobil pentru a mă asigura că noua proprietate se va aplica în toate scenariile relevante.

Aceasta înseamnă că eficiența funcțională a cascadei foilor de stil și principiile bune de dezvoltare ale lui Do-not-Repeat-Yourself , trebuie să treacă pe spate.

6. Crește complexitatea fluxului de lucru:

Interogările media CSS tratează doar un aspect foarte specific al designului web receptiv, care se concentrează aproape în întregime pe redimensionarea aspectului. Ergo, pentru a face ceva mai mult decât atât, trebuie să te bazezi pe JavaScript pentru a face diferența. Aceasta introduce cerințe suplimentare de învățare pentru cod și instrumente.

În plus, modul nedefinitiv în care [interogările media] gestionează punctele de întrerupere înseamnă că trebuie să cheltuiți mai mult timp [și bani] testând paginile dvs. web pe numeroase dispozitive virtuale și/sau fizice pentru a vă asigura că lucrurile funcționează așa cum ați vrut inițial. . Și trebuie să retestați totul din nou atunci când faceți modificări semnificative aspectului.

Prin acțiunea simplă și intenționată a utilizării interogărilor media CSS, creșteți semnificativ numărul de pași necesari pentru a construi o pagină web modernă.

7. Deteriorează performanța:

Din cauza modului în care funcționează interogările media CSS, veți ajunge să aveți nevoie de mult mai mult cod CSS decât altfel pentru a face site-ul dvs. responsiv/compatibil cu dispozitivele mobile. Conform datelor de la HTTPArchive.org, dimensiunile fișierelor CSS au crescut cu 114% în ultimii cinci ani. Creșterea dimensiunilor fișierelor HTML a atins un vârf la aproximativ 53% în aceeași perioadă.

Această situație particulară are implicații de performanță pentru site-ul dvs., deoarece este sigur că va fi mai lentă după implementarea interogărilor media CSS [într-un context de design web receptiv] decât a fost vreodată, în special pentru dispozitivele mobile care folosesc rețele mobile de bandă largă mai puțin decât ideale.

Și, în afară de problema creșterii dimensiunilor fișierelor, nu există niciun mecanism intern în interogările media CSS pentru a îmbunătăți efectiv performanța paginii dvs. web. Pentru aceasta, va trebui să folosiți tehnici JavaScript avansate pentru a activa aceste îmbunătățiri.

De ce mai folosim asta?

Dacă v-aș întreba ce procent de site-uri web folosesc interogări media CSS, care ar fi răspunsul dvs.? Cu tot stresul pe care designerii web au trebuit să-l îndure de-a lungul anilor, ai crede că probabil că am fi trecut peste cocoașa adopției până acum, dar ai greși foarte mult.

Procentul de site-uri web care utilizează interogări media CSS pe întregul web este de aproximativ 0,2%. Comparați cu procentul de site-uri web care folosesc jQuery de 18%. Ceea ce înseamnă că aveți de 90 de ori mai multe șanse să întâlniți un site web care este alimentat de jQuery decât sunteți un site web receptiv [fără a include cele care se întâmplă să fie ambele].

De ce un set de instrumente bazat pe o tehnologie de bază [JavaScript] pe care anumiți oameni par să o considere complicată și de prisos ar fi atât de mult înaintea uneia care este aparent mai puțin complexă [CSS] și menită să abordeze o problemă mai importantă [compatibilitatea cu dispozitivele mobile] ? Evident, există ceva grav în neregulă aici care împiedică adoptarea și trebuie abordat.

Interogările media CSS au găsit calea în browserele web pentru a face față unei anumite provocări, dar apoi a fost conceput pentru a suporta întreaga greutate a designului web receptiv pe umerii săi. Este un fel de exersat pentru un recital de flotf de clasa a 3-a, doar pentru a fi transportat magic la Royal Albert Hall pentru a reda un solo la trombon din Mesia lui Handel; Nu e corect!

Cu toate provocările designului web modern, este extrem de surprinzător că suntem încă în această afacere de interogare media. Nu merge suficient de departe pentru a face față unor probleme importante legate de moștenire, în plus față de unele noi în domenii noi, cum ar fi designul progresiv de aplicații web. Ca atare, cred că este timpul să venim cu o alternativă. Dar, care ar fi asta mai exact?

Care este solutia?

Soluția la toate acestea este într-adevăr foarte simplă: JavaScript. Acum, înainte să ridici furca, dă-mi șansa să-ți explic.

JavaScript este singura componentă a trinității HTML5 în care extensibilitatea nu este un cuvânt murdar. Nu puteți extinde marcajul HTML folosind mai mult HTML și, cu siguranță, nu puteți extinde CSS nativ cu CSS. Cu toate acestea, puteți extinde JavaScript în mod nativ folosind JavaScript și puteți chiar să faceți același lucru pentru CSS.

Manipularea CSS cu JavaScript este discutată pe larg în Curriculumul Web Standards al W3C. Interfața DOM document.stylesheets ne permite să accesăm foile de stil aplicate unei pagini web, inclusiv toate foile de stil externe la care se face referire folosind eticheta HTML <link> . Nu este un lucru ușor de făcut, dar este posibil.

Așa că ar trebui să extind răspunsul inițial: nu este doar JavaScript, este CSS asistat de JavaScript . JavaScript este o platformă minunată cu funcționalități cum nu ați crede, dar CSS este locul în care lucrează majoritatea designerilor web. Dacă am putea crea cumva un fel de punte funcțională între acestea două, în care un designer web ar putea scrie un set de reguli CSS pentru a valorifica funcționalitatea JavaScript, ar fi oarecum un schimbător de joc pentru design web.

Arată-mi un cod

În ultimii doi ani, am lucrat la un nou set de instrumente CSS asistat de JavaScript numit rKit. Întreaga idee a fost să construim un instrument prietenos cu designerul, nu doar să înlocuiască interogările media CSS pentru design web receptiv, ci să abordeze unele dintre provocările cunoscute [și necunoscute] cu care se confruntă designerii/dezvoltatorii web atunci când construiesc site-uri web și aplicații web moderne.

Există multe în concept, dar iată un fragment de cod rapid de CSS pentru a explica:

 #meu-element[rk="dacă @viewport.width între 320 și 480"]{background-color: #0000ff;}

Cu rKit, regulile CSS arată ca niște selectori de atribut-valoare modificați. Puteți defini apoi o expresie în secțiunea de valori. Sintaxa acestei expresii este concepută pentru a fi simplă și intuitivă.

Notă : rk este un identificator de atribut constant.

Codul de mai sus este echivalent funcțional cu interogarea media CSS de mai jos:

 Ecran numai @media și (lățime minimă a dispozitivului: 320 px) și (lățime maximă a dispozitivului: 480 px) {
    #elementul-meu {culoarea-fond:#0000ff;}
}

Cu toate acestea, puteți face mult mai multe cu rKit. Iată un alt exemplu rapid:

 #meu-element[rk="dacă @self.width între 320 și 480"]{background-color: #00ff00;}

Prin simpla schimbare a referinței la entitate de la @viewport la @self , în esență am configurat ceea ce se numește în mod obișnuit o interogare de element. Deci, ceea ce se întâmplă acum este că atunci când lățimea #my-element este între 320 și 480 de pixeli, se va aplica declarația dată [ background-color: #00ff00 ].

De asemenea, puteți utiliza clase în loc de declarații pure:

 #my-element[rk="dacă @self.width între 320 și 480, atunci addClass(c_mobile_320)"]{}
.c_mobile_320 {background-color: #00ff00;}

Totuși, acesta este doar vârful aisbergului. Cu rKit, puteți face niște lucruri destul de grozave, cum ar fi gestionarea evenimentelor, observarea mutațiilor, interogări de cantitate, rutare, legare de date [până la 7 căi] și o mulțime de alte lucruri interesante, toate folosind cod CSS pur și fără a scrie o singură linie de JavaScript.

rKit va fi gratuit și open-source atunci când va fi lansat. Și, de asemenea, va avea un pachet special de performanță pe care îl puteți instala într-un mod care garantează zero blocare a randării, astfel încât pagina web se încarcă ca o rachetă pe șine.

A durat destul de mult pentru a pune totul împreună, dar va fi aici în curând [cu siguranță înainte de Godot] și sunt cu adevărat interesat să văd ce pot face designerii web [și dezvoltatorii] cu el.

Concluzie

Sper că nu ieși din această postare crezând că bat interogări media CSS doar pentru că. Nu sunt. Ar fi ca și cum ar fi lovit o roșie pentru a ajunge într-o salată de fructe. După cum am spus mai devreme, interogările media CSS nu au fost niciodată concepute pentru design web receptiv. A fost cooptat din cauza oportunității și toți am făcut pasul greșit de a încerca să îl folosim pentru a rezolva toate problemele.

Din păcate, noi, ca comunitate web, nu am reușit niciodată să corectăm acea greșeală inițială îmbunătățind-o într-un mod semnificativ sau găsind o alternativă mai bună. Dar, din păcate, spectacolele trebuie să continue, site-urile web trebuie construite și progresul trebuie să prevaleze. E timpul pentru o schimbare.

rKit este doar o opțiune și un răspuns. Nu este primul și cu siguranță nu va fi ultimul. Dar, cel puțin, este un pas corect în direcția corectă. O oportunitate de a rezolva unele probleme din trecut și apoi de a repeta pentru a le remedia în prezent și în viitor. Ar fi interesant de văzut cum se potrivește cu status quo-ul.

Cu toate acestea, a face o greșeală nu este un scop în sine; ar trebui să fie o experiență de învățare. Cu ceva noroc, vom învăța cum să folosim instrumentul potrivit pentru munca potrivită data viitoare. Adică, doar pentru că poți merge cu bicicleta pe un drum asfaltat nu înseamnă că ar trebui să aduci una pe Nurburgring. Aduceți un Porsche!