Pentru a rezolva problema sprijinirii celor mai noi tehnologii în browsere, se folosesc două metode principale: metoda de degradare grațioasă și îmbunătățirea progresivă. Metoda de degradare grațioasă permite utilizatorilor care utilizează browserele moderne să experimenteze toată funcționalitatea tehnologiilor avansate. Iar cei care folosesc versiuni mai vechi ale browserului vor primi o versiune a site-ului cu funcționalitate limitată.
Cu ajutorul tehnicii de îmbunătățire progresivă, dezvoltatorii stabilesc o bază pentru design, nivelul de experiență a utilizatorilor pe care majoritatea browserelor le suportă. În astfel de aplicații web există o funcție de detectare încorporată a browserului. Această funcție poate fi utilizată pentru a mări cât mai mult posibil funcționalitatea site-ului și, prin urmare, pentru a îmbunătăți experiența utilizatorului. Cel mai obișnuit instrument al tehnicii de îmbunătățire progresivă este biblioteca JIS Modernizr.
Modernizr verifică în mod programatic dacă browserul acceptă tehnologia Web de generație următoare și, în consecință, returnează true sau false. Înarmați cu aceste cunoștințe, puteți utiliza proprietăți noi în browserele lor de asistență, iar pentru browserele vechi puteți utiliza metode de încredere, dovedite.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Sună bine, dar pentru o vreme metoda este mult mai bună. Funcția de definire poate fi implementată utilizând cereri CSS prin intermediul regulii @supports.
Detectarea browserului prin @supports
regula @supports face parte din specificația CSS3 pentru reguli condiționale, care include, de asemenea, o @media regulă mai largă, pe care toți folosim la crearea de design receptiv. anchete mass-media pot detecta proprietăți, cum ar fi lățimea și înălțimea zonei ferestrei browser-ului, în timp ce @supports poate verifica suport browser-ul pentru o pereche de CSS proprietate / valoare.
Să luăm în considerare un exemplu simplu. Spuneți, pe o pagină web există o imagine la care doriți să aplicați modurile de amestecare. Modurile de amestecare nu sunt acceptate în browserele mai vechi. Cu toate acestea, în loc să arate utilizatorii al căror browser nu acceptă această funcție, imaginea implicită, este posibil, în cazul în care nu reproduce complet efectul, cel puțin pentru a arăta ceva similar. Iată cum puteți verifica suportul pentru modurile de amestecare prin @supports:
Pentru a adăuga stiluri browserelor fără suportul amestecului, trebuie să utilizați sintaxa:
Condiția trebuie să fie în interiorul parantezelor. Ie @supports mix-blend-mode: overlay <…> este nevalid. Cu toate acestea, dacă adăugați perechi suplimentare de paranteze, totul va funcționa bine. De exemplu, înregistrarea @supports ((mix-blend-mode: overlay)) este corectă.
Condiția trebuie să aibă atât proprietatea cât și valoarea sa. În exemplul de mai sus, verificăm proprietatea mode mix-mix pentru valoarea suprapusului.
Adunarea! Important la sfârșit nu afectează corectitudinea codului.
Să facem demo-ul de mai sus. Browserele care acceptă mix-mode-mode vor aplica stiluri de la @supports () <…>; Alte browsere vor lua stiluri de la @supports not () <…>.
Demonstrația CodePen:
Testați mai multe condiții simultan
În testele de proprietate prin @supports, nu suntem limitați de numărul de condiții care pot fi făcute într-un singur design. Puteți seta mai multe condiții folosind operatorii logici și, sau, și nu mai sus. Operatorul de legătură și verifică respectarea mai multor condiții:
Utilizând operatorul de disjuncție sau un set de stiluri, puteți seta diferite proprietăți. Este foarte convenabil, dacă unele proprietăți sau valori trebuie să scrie prefixele furnizorilor:
Într-o regulă @supports, puteți combina operatorii și și:
Folosind cuvântul nu, puteți verifica o condiție odată. De exemplu, codul de mai jos este incorect:
În schimb, este necesar să grupați toate condițiile într-un singur cuvânt cheie care nu utilizează paranteze. Mai jos este o intrare corectă a codului:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Rămâne să fim convinși că, după ce există un decalaj, și pe ambele părți ale și și.
Operatorii în acțiune
Dacă browserul acceptă gradienți și moduri de amestecare, puteți aplica un set de stiluri, după cum se arată mai jos (am împărțit codul de mai jos în câteva linii pentru o mai bună citire):
Deoarece unele browsere mai vechi Android necesită prefixul -webkit pentru gradientele liniare, să adăugăm o condiție suplimentară blocului @supports:
De exemplu, pe site-ul dvs. sunt valorile modurilor de suprapunere a luminozității și saturației, care la momentul acestei scrieri nu sunt acceptate în browser-ul Safari. Dar doriți să adăugați stiluri alternative pentru aceste browsere. În acest caz, vom ajuta @supports nu și și și:
Toate demo-urile pot fi găsite pe CodePen:
Nu uitați să scrieți proprietatea și valoarea acesteia în ghilimele. Specificația clar spune că funcția returnează adevărat dacă două condiții sunt adevărate:
Numele proprietății trecute "coincide literal cu numele proprietății CSS", pe care browserul trebuie să îl suporte;
Valoarea va fi "verificată dacă această valoare este susținută de proprietate".
Sub coincidență literală, specificația înțelege că noile caractere nu sunt procesate și spațiile nu sunt șterse. Deci, nu puneți spații suplimentare la sfârșitul sau începutul cuvântului, altfel se va întoarce false. Sintaxa alternativă are un singur argument în paranteze:
Această sintaxă este mai convenabilă pentru testarea mai multor condiții folosind și și. Mai jos este un exemplu mic. Să presupunem că doriți să verificați dacă browserul acceptă modul de suprapunere a luminozității. Dacă da, JS va adăuga dinamic clasa de luminozitate-amestec la elementul corespunzător. În caz contrar, se va adăuga clasa de noluminozitate. În consecință, elementul aplică stilurile necesare.
Dacă utilizați prima sintaxă, codul JS va fi:
Dacă vă place noua sintaxă cu o variabilă, înlocuiți linia corespunzătoare de cod cu linia de mai jos:
Suport în browsere
Toate browserele moderne, cu excepția IE11 și Opera Mini, suportă regula @supports. Norma @supports este gata de lansare? Cel mai bun răspuns pe care l-am găsit în Tiffany Brown:
“... cu o abordare prudentă a problemei aplicării de stiluri critice de @ acceptă ... Definiți stiluri de bază - stiluri care sunt acceptate de toate browserele. Apoi, utilizați @supports pentru a rescrie sau adăuga la stilurile care pot fi scrise în browser-ul cu noile proprietăți. CSS Master, p.303 »
concluzie
În acest articol, am cercetat o metodă CSS nativă pentru definirea suportului proprietății prin regula @supports. De asemenea, a fost examinat API-ul JS corespunzător, cu ajutorul căruia puteți verifica actualul suport de browser pentru cele mai recente proprietăți CSS folosind metoda flexibilă Css.supports ().
Sprijinul pentru interogările CSS este destul de bun, dar nu universal. Dar, totuși, dacă doriți să utilizați @supports în proiectele dvs., vă pot ajuta stilurile strategice de plasare în fișierul CSS, așa cum a fost spus Tiffany Brown, precum și polyfill-css supports.js de la Han Lin Yap.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Trimiteți-le prietenilor: