Share
Nu este distractiv să jucăm cu cele mai recente tehnici CSS, cum ar fi umbrele și tranzițiile? Există o singură problemă: cum putem compensa sau, mai important, detecta browserele care nu le suportă? Ei bine, sunt câteva soluții. Totuși, în acest tutorial și screencast, vom crea o funcție JavaScript care va accepta un nume de proprietate CSS ca parametru și va returna boolean, indicând dacă browserul acceptă sau nu proprietatea trecută.
Abonați-vă la pagina noastră YouTube pentru a viziona toate tutorialele video!
Să începem prin a determina Cum Vrem să sunăm pe noi funcţie. Vom păstra lucrurile simple aici; ceva de genul următor ar trebui să facă truc:
Accentsconagua
dacă (suportă ('textShadow')) document.documentElement.className + = 'textShadow'; Ar trebui să fie ultimul funcţie apel. Când trecem un nume de proprietate CSS la suporturi () funcția, va reveni a boolean. Dacă Adevărat, vom atașa o numele clasei la documentElement, sau . Acest lucru ne va oferi apoi un nou nume de clasă pe care să-l cuprind, din foaia de stil.
Apoi, vom construi suportă () funcția.
var susține = (funcția () ) ();
De ce nu facem suporturi egal cu o funcție standard? Răspunsul este pentru că avem un pic de Prep să lucrezi mai întâi și nu e absolut nici un motiv să repeți din nou aceste sarcini fiecare o singură dată când este apelată funcția. În astfel de cazuri, este mai bine să faci suporturi egală cu ceea ce este returnat din funcția de auto-execuție.
Pentru a testa dacă browserul acceptă sau nu anumite proprietăți, trebuie să creați un element * * inactiv pentru testare. Acest element generat nu va fi niciodată introdus în DOM; gândiți-vă la aceasta ca la un test fals!
var div = document.createElement ("div"); După cum probabil știți, există o mână de prefixe de furnizori pe care le putem folosi, atunci când lucrăm cu proprietăți CSS3:
JavaScript-ul nostru va trebui să filtreze prin acele prefixe și să le testeze. Deci, hai să le punem într-un mulțime; o să-i spunem, vânzătorii.
var div = document.createElement ('div'), vendors = 'Khtml Ms O Moz Webkit'.split ("); Utilizarea
Despică()funcția de a crea unmulțimede laşireste adesea leneș, dar salvează o mână de secunde!
Așa cum vom filtrează prin asta mulțime, Să fim băieți și fete bune și să ascundem cache-ul lungime din mulțime de asemenea.
var div = document.createElement ('div'), vendors = 'Khtml D-na Mozk Webkit'.split ("), len = vendors.length; Prep munca de mai sus este statică, în natură și nu trebuie repetată de fiecare dată când sunăm suporturi (). Din acest motiv, o rulați o singură dată, când pagina se încarcă. Acum hai să întoarcere funcţie care vor fi atribuite efectiv suporturi variabil.
funcția return (prop) ;
Frumusețea lui
închiderileeste că, chiar dacăsuporturi ()este egal cu cel returnatfuncţie, are încă acces ladiv,vânzătorii, șiLenvariabile.
Testul imediat: dacă proprietatea trecută este disponibilă pentru div„s stil atributul, știm că browserul acceptă proprietatea; asa de retur adevărat.
funcția return (prop) if (prop în div.style) return true; ;
Gândiți-vă, să zicem, text-shadow Proprietatea CSS3. Cele mai multe browsere moderne îl acceptă, fără a fi nevoie de un prefix de furnizor. Având în vedere acest lucru, de ce să filtruți prin toate prefixele dacă nu este necesar? De asta punem asta Verifica în vârf.
Probabil ați folosit pentru a scrie nume de proprietăți CSS3, cum ar fi: -Moz-box-shadow. Cu toate acestea, dacă în Firebug revizuiți stil obiect, veți găsi că este scris, MozBoxShadow. Ca atare, dacă vom testa:
'mozboxShadow' în div.style // false
Fals va fi returnat. Această valoare este sensibilă la litere mari și mici.
Aceasta înseamnă că, în cazul în care utilizatorul trece boxShadow la suporturi () funcționează, va eșua. Să ne gândim înainte și să verificăm dacă prima literă a argumentului este mică. Dacă este, vom remedia eroarea pentru ei.
funcția return (prop) if (prop în div.style) return true; prop = prop.replace (/ ^ [a-z] /, funcția (val) retur val.toUpperCase ();); ;
Expresii regulate la salvare! Mai sus, verificăm dacă există o singură literă mică la începutul șirului (^). Numai cu condiția că se găsește, folosim toUpperCase () pentru a capitaliza litera.
Apoi trebuie să filtrați prin vânzătorii și verificați dacă există un meci. De exemplu, dacă box-shadow este trecut, ar trebui să testați dacă stil atributul div conține oricare dintre următoarele:
Dacă se găsește un meci, putem retur adevărat, deoarece browserul oferă, într-adevăr, suport pentru umbrele din cutie!
funcția return (prop) if (prop în div.style) return true; prop = prop.replace (/ ^ [a-z] /, funcția (val) retur val.toUpperCase ();); în timp ce (len--) dacă (furnizori [len] + prop în div.style) return true; ;
Deși am putea folosi a pentru declarație pentru a filtra prin mulțime, nu este nevoie reală în acest caz.
in timp ce instrucțiunile sunt mai rapide de tip și necesită mai puține caractere Nu te confunda cu furnizori [len] + prop; pur și simplu înlocuiți aceste nume cu valorile lor din viața reală: MozBoxShadow.
Dar dacă nu se potrivește nici una dintre aceste valori? În acest caz, browserul nu pare să susțină proprietatea, caz în care ar trebui return false.
în timp ce (len--) dacă (furnizori [len] + prop în div.style) return true; return false;
Ar trebui să o facem pentru funcția noastră! Să încercăm asta, aplicând a numele clasei la html element, în cazul în care browserul acceptă, să zicem, text-accident vascular cerebral proprietate (pe care numai webkit-ul o are).
dacă (suportă ('textStroke')) document.documentElement.className + = 'textStroke'; Cu clasă nume pe care îl putem acum cârlig pe, să-l încercăm în foaia de stil.
/ * backback * / h1 culoare: negru; / * suport text-stroke * / .textStroke h1 culoare: alb; -webkit-text-stroke: 2px negru;
var suport = (functie () var div = document.createElement ('div'), vendors = 'Khtml Ms O Mozk Webkit'.split ("), len = vendors.length; in () ()) if (vendors [len]] + (return) prop în div.style) // browser-ul acceptă box-shadow.Faceți ceea ce aveți nevoie./ Sau folosiți un bang (!) pentru a testa dacă browserul nu întoarce adevărul; return false;) () (dacă este acceptat ('textShadow')) document.documentElement.className + = 'textShadow'; Pentru o soluție mai cuprinzătoare, consultați biblioteca Modernizr.
