Share
În acest tutorial, voi trece peste două abordări pentru a detecta dacă un browser acceptă anumite funcții CSS sau nu. Primul beneficiază de Modernizr, o bibliotecă populară JavaScript, iar cea de-a doua una de întrebări, o soluție promițătoare CSS.
Asadar, hai sa incepem!
După cum am menționat mai sus, Modernizr este o bibliotecă JavaScript ușoară care detectează în browser-ul dvs. funcțiile HTML5 și CSS3. Atâta timp cât pagina dvs. se încarcă, rulează în spatele scenei și efectuează teste de caracteristică. Apoi, stochează rezultatele ca proprietăți ale unui obiect JavaScript și ca clase ale lui html element. Mai multe despre asta mai târziu.
Pentru a instala și utiliza Modernizr, puteți vizita site-ul său și puteți descărca versiunea preferată.
Notă: la momentul redactării, versiunea curentă a lui Modernizr este 2.8.3, deși versiunea 3 este aproape gata. De fapt, echipa din spatele bibliotecii se așteaptă să o lanseze în următoarele săptămâni. O scurtă prezentare a acestei noi versiuni poate fi găsită aici. În plus, puteți să-i luați versiunea beta accesând acest link.
După descărcare, plasați fișierul JavaScript în proiectul dvs. și includeți-l în din pagina html. Nu în ultimul rând, pentru a permite funcționalitatea Modernizr, trebuie să adăugați no-js clasa la html element.
În următoarele două secțiuni, voi acoperi fundamentele Modernizr. Pentru concepte mai avansate, asigurați-vă că ați citit documentația.
După cum sa discutat mai sus, Modernizr adaugă un număr de clase la html element. Numele clasei depind de asistența browserului. Dacă browserul nu recunoaște unele dintre testele de funcții, Modernizr adaugă Nu- prefix înainte de numele claselor încorporate. De exemplu, presupunând că testează efectele de reflexie, html element din Chrome 40 arată astfel:
În timp ce pe Firefox 35:
Observați și js clasă. Când rulează Modernizr, presupunând că JavaScript este activat în browserul nostru, acesta înlocuiește vechiul no-js clasa cu cea nouă.
Pe baza rezultatelor obținute din testele Modernizr, putem personaliza foile de stil.
Pentru a începe, iată codul HTML de bază pe care îl vom folosi pentru restul tutorialului:
CSS Reflecții
Folosind clasele oferite de Modernizr, modificăm stilurile h2 element, după cum urmează:
h2 culoare: # c0ccdb; font-size: 3m; .cssreflecții h2 -webkit-box-reflect: sub -.45em -webkit-gradient (linia, stânga sus, fundul din stânga, din (transparent) 255, 255, 0,75))); .no-cssreflecții h2 text-shadow: 0 1px 0 # 136ed1, 0 2px 0 # 126ac9, 0 3px 0 # 1160b6, 0 4px 0 # 105cad, 0 5px 0 # 0f56a2, 0 6px 1px rgba (0,0, 0, .1), 0 0 5px rgba (0,0,0, .1), 0 1px 3px rgba (0,0,0, .3), 0 3px 5px rgba (0,0,0, .2) , 0 5px 10px rgba (0,0,0, .25), 0 10px 10px rgba (0,0,0, .2), 0 20px 20px rgba (0,0,0, .15);
Browserele bazate pe Webkit care suportă reflecțiile vor afișa h2 element, după cum urmează:
În timp ce ceilalți (cel puțin cei care susțin text-shadow proprietate) va aplica un efect diferit, bazat pe un efect de text 3D de Mark Otto:
Iată exemplul de pe Codepen:
Al doilea mod de a verifica rezultatele obținute de testele Modernizr este prin JavaScript. După cum am menționat deja, Modernizr creează un obiect cu nume de proprietăți ale caracteristicilor care sunt configurate pentru a testa. De cele mai multe ori, valorile lor revin fie Adevărat sau fals.
Imaginea de mai jos arată modul în care Firefox 35 afișează obiectul Modernizr (fila Consola):
După cum vedem Modernzir.cssreflections proprietatea returneaza a fals valoare. Acest lucru se întâmplă deoarece Chrome, Safari și Opera sunt singurele browsere care suportă reflecțiile (la momentul redactării).
Iată cum am putea reproduce exemplul anterior cu JavaScript, adăugând reflecţie și fără reflecție clasele noastre manual:
Accentsconagua
var element = document.getElementById ("reflecție"); dacă (Modernizr.cssreflections) element.className = 'reflecție'; altceva element.className = 'nu-reflecție'; Apoi styling cu CSS relevante:
.reflecție / * aplică proprietatea de reflecție * / .no-reflecție / * aplică proprietatea text-shadow * /
Și noul demo pe Codepen:
Fără îndoială, Modernizr este un instrument valoros în arsenalul tuturor dezvoltatorilor frontalieni. Dar nu ar fi mai bine dacă am putea replica testele lui Modernizr cu CSS pură? Din fericire, putem face acest lucru folosind interogări de caracteristică. Acestea sunt reguli condiționale care ne permit să aplicăm stiluri diferite în funcție de suportul browserului. Ele funcționează la fel ca întrebările din mass-media. Și da, în afară de ediția CSS, ei vin la JavaScript.
Gata să te uiți?
Pentru a defini interogări de caracteristică în CSS, trebuie să folosim @supports și @supports nu reguli. Sintaxa lor arată astfel:
@supports (condiție de test) / * aplică reguli * / @support nu (condiție de test) / * aplică reguli * /
Condiția include Valoarea proprietății perechi de caracteristici pe care vrem să le testăm. Browserele care acceptă caracteristicile aplică regulile țintă, pe care le specificăm în cadrul @supports regulă. În caz contrar, stilurile din cadrul @supports nu regula sunt executate.
Utilizarea ȘI și / sau SAU operatorii logici putem crea teste complexe. Cu toate acestea, rețineți că acești operatori ar trebui separați prin paranteze.
Să vedem două exemple. După cum știm deja, HTML-ul nostru este simplu simplu! E doar un lucru h2 element.
În acest prim exemplu, folosim culoare de fundal de proprietate pentru a specifica culoarea de fundal a corp element. Pentru a face lucrurile mai interesante, creăm și o variabilă CSS. Suportul pentru browser este împărțit în următoarele categorii:
În funcție de aceste circumstanțe, corp elementul va arăta diferit culoare de fundal.
Iată codul CSS bazat pe ipotezele de mai sus:
corp -bg-color: # 98FB98; fundal-culoare: khaki; @supports (culoarea fundalului: var (- bg-color)) corp background-color: var (- bg-color); @ nu susține (culoarea de fundal: var (- bg-color)) body background-color: tomato;
De exemplu, pe Safari, care aparține categoriei a treia, elementul nostru ar arăta astfel:
Apoi, Chrome, care poate interpreta funcția de interogare a funcțiilor, dar care nu acceptă variabilele CSS, aparține categoriei a doua:
În sfârșit, Firefox, care se află în prima categorie:
Și exemplul încorporat pe Codepen:
În acest caz, vom extinde condiția de test pentru a conține a al doilea regulă. Mai precis, acum vizăm browserele care acceptă nu numai reflecții, ci și efecte de tip text-stroke.
Iată codul pentru acel comportament:
@supports ((* / reflexii condiție * /) și (-webkit-text-stroke: 1px tomate)) h2 / * aplică proprietatea de reflecție * / -webkit-text-stroke: 1px tomato; @ nu suporta ((/ * reflexii condiție * /) și (/ * condiție cursa * /)) h2 / * aplică proprietatea text-shadow * /
De exemplu, browserele (în momentul în care scrieți numai Chrome 28+), care acceptă interogări, reflecții și efecte de text, vor afișa h2 element, după cum urmează:
Mai jos este exemplul încorporat pe Codepen:
Întrebările de întrebări pot fi, de asemenea, definite prin JavaScript. Pentru a face acest lucru, trebuie să folosim CSS.supports metodă. Iată parametrii posibili:
Suport CSS.supports (proprietateName, propertyValue) CSS.supports (condiție de test)
Rezultatul acestei metode este a boolean valoare care indică dacă browserul acceptă sau nu caracteristicile. În cele din urmă, ar trebui să înfășurăm parametrii în ghilimele simple sau duble.
Utilizând ediția JavaScript a interogărilor de funcții, ultimul nostru exemplu poate fi reprodus după cum urmează:
var rezultat = CSS.supports ('/ * reflexii condiție * /) și (/ * condiție accident vascular cerebral * /)'); var element = document.getElementById ("reflecție"); if (rezultat) element.className = 'reflecție'; altceva element.className = 'nu-reflecție'; Demo-ul corespunzător:
În termeni generali, suportul browserului pentru interogările de funcții este bun. La momentul scrierii Firefox (22+), Chrome (28+) și Opera (12.1+) toate suportă această funcționalitate CSS. Sperăm că viitoarele versiuni ale IE vor înțelege regulile condițiilor (lucrează și la acestea!).
Dacă doriți să utilizați interogări de caracteristică în proiectele dvs., dar sunteți puțin sceptici în ceea ce privește browserele care le înțeleg, veți găsi câteva tipuri de polifluze utile de mai jos:
În acest tutorial, am parcurs două metode utile pe care le puteți utiliza pentru a oferi experiențe încrucișate în browser încrucișat. Profitând de întrebările din Modernizr și / sau de funcții vă va ajuta să înțelegeți beneficiile proiectării pentru caracteristici și nu pentru browsere. Modernizr este soluția stabilă actuală, însă sunt disponibile interogări, deci alegerea este a ta!
