Share
Non è divertente giocare con le ultime tecniche CSS, come ombre e transizioni? C'è un solo problema: come possiamo compensare o, soprattutto, rilevare i browser che non li supportano? Bene, ci sono alcune soluzioni. In questo tutorial e screencast, tuttavia, creeremo una funzione JavaScript che accetterà un nome di proprietà CSS come parametro e restituirà un booleano, indicando se il browser supporta o meno la proprietà passata.
Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!
Iniziamo determinando Come vogliamo chiamare il nostro funzione. Manterremo le cose semplici qui; qualcosa come il seguente dovrebbe fare il trucco:
Accentsconagua
if (supports ('textShadow')) document.documentElement.className + = 'textShadow'; Questo dovrebbe essere il finale funzione chiamata. Quando passiamo un nome di proprietà CSS al supporti () funzione, restituirà a booleano. Se vero, allegheremo un nome della classe al documentElement, o . Questo ci fornirà quindi un nuovo nome di "classe" su cui collegarci, dal nostro foglio di stile.
Successivamente, costruiremo il supporta () funzione.
var supports = (function () ) ();
Perché non stiamo facendo supporti uguale a una funzione standard? La risposta è perché abbiamo un po 'di prep lavoro da fare prima, e non c'è assolutamente alcun motivo per ripetere queste attività più e più volte ogni singola volta viene chiamata la funzione. In casi come questo, è meglio fare supporti uguale a qualsiasi cosa viene restituito dalla funzione autoeseguibile.
Per verificare se il browser supporta o meno proprietà specifiche, è necessario creare un elemento * dummy *, per il test. Questo elemento generato non verrà mai inserito nel DOM; pensalo come un manichino di prova!
var div = document.createElement ('div'); Come probabilmente saprai, ci sono una manciata di prefissi dei fornitori che possiamo usare, quando si lavora con le proprietà CSS3:
Il nostro JavaScript dovrà filtrare questi prefissi e testarli. Quindi, inserirli in un schieramento; lo chiameremo, fornitori.
var div = document.createElement ('div'), vendors = 'Khtml Ms O Moz Webkit'.split ("); Usando il
Diviso()funzione per creare unschieramentoda unstringaè certamente pigro, ma risparmia una manciata di secondi!
Come filtreremo attraverso questo schieramento, siamo bravi ragazzi e ragazze, e nascondiamo il lunghezza del schieramento anche.
var div = document.createElement ('div'), venditori = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; Il prep lavorare, sopra, è statico, in natura, e non ha bisogno di essere ripetuto ogni volta che chiamiamo supporti (). Questo è il motivo per cui lo eseguiamo solo una volta, quando la pagina viene caricata. Ora facciamo ritorno il funzione che sarà effettivamente assegnato al supporti variabile.
funzione di ritorno (prop) ;
La bellezza di
chiusureè quello, anche sesupporti ()è uguale a quello restituitofunzione, ha ancora accesso adiv,fornitori, elenvariabili.
Il test immediato: se la proprietà passata è disponibile per div'S stile attributo, sappiamo che il browser supporta la proprietà; così ritorna vero.
return function (prop) if (prop in div.style) restituisce true; ;
Pensa, per esempio, al text-shadow Proprietà CSS3. La maggior parte dei browser moderni lo supporta, senza la necessità di un prefisso del venditore. Con questo in mente, perché filtrare tutti i prefissi se non ne abbiamo bisogno? Ecco perché lo posizioniamo dai un'occhiata in cima.
Probabilmente sei abituato a digitare nomi di proprietà CSS3, in questo modo: -moz-box-ombra. Tuttavia, se, in Firebug, rivedi il stile oggetto, troverai che è scritto, MozBoxShadow. In quanto tale, se testiamo:
'mozboxShadow' in div.style // false
falso sarà restituito. Questo valore è sensibile al maiuscolo / minuscolo.
Ciò significa che, se l'utente passa boxShadow al supporti () funzione, fallirà. Pensiamo in anticipo e controlliamo se la prima lettera dell'argomento è in minuscolo. Se lo è, correggeremo l'errore per loro.
return function (prop) if (prop in div.style) restituisce true; prop = prop.replace (/ ^ [a-z] /, function (val) return val.toUpperCase ();); ;
Espressioni regolari in soccorso! Sopra, stiamo controllando se c'è una singola lettera minuscola all'inizio della stringa (^). Solo a condizione che ne venga trovato uno, usiamo il toUpperCase () funzione per capitalizzare la lettera.
Abbiamo quindi bisogno di filtrare attraverso il fornitori array e verifica se c'è una corrispondenza. Ad esempio, se box-ombra è passato, dovremmo testare se il stile attributo del div contiene uno dei seguenti:
Se viene trovata una corrispondenza, possiamo ritorna vero, perché il browser, in effetti, fornisce supporto per le ombre delle caselle!
return function (prop) if (prop in div.style) restituisce true; prop = prop.replace (/ ^ [a-z] /, function (val) return val.toUpperCase ();); while (len--) if (vendors [len] + prop in div.style) return true; ;
Anche se potremmo usare a per dichiarazione per filtrare attraverso il schieramento, non è necessario in questo caso.
mentre le istruzioni sono più veloci da digitare e richiedono meno caratteri Non essere confuso da venditori [len] + prop; semplicemente sostituire quei nomi con i loro valori di vita reale: MozBoxShadow.
Ma, cosa succede se nessuno di questi valori corrisponde? In tal caso, il browser non sembra supportare la proprietà, nel qual caso dovremmo restituisce falso.
while (len--) if (vendors [len] + prop in div.style) return true; return false;
Questo dovrebbe farlo per la nostra funzione! Proviamoci, applicando un nome della classe al html elemento, se il browser supporta, ad esempio, il text-stroke proprietà (che solo il webkit fa).
if (supports ('textStroke')) document.documentElement.className + = 'textStroke'; Con un classe nome che possiamo ora gancio su, proviamolo nel nostro foglio di stile.
/ * fallback * / h1 color: black; / * supporto per il tratto di testo * /. textStroke h1 color: white; -webkit-text-stroke: 2px black;
var supports = (function () var div = document.createElement ('div'), venditori = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; funzione return (prop) if (prop in div.style) return true; prop = prop.replace (/ ^ [az] /, function (val) return val.toUpperCase ();); while (len--) if (vendors [len] + prop in div.style) // browser supporta box-shadow Fai quello che ti serve. // Oppure usa il botto (!) per verificare se il browser non lo fa. return true; return false;;) (); if (supports ('textShadow')) document.documentElement.className + = 'textShadow'; Per una soluzione più completa, fare riferimento alla libreria Modernizr.
