Share
In questo tutorial, esaminerò due approcci per scoprire se un browser supporta determinate funzionalità CSS o meno. Il primo si avvale di Modernizr, una popolare libreria JavaScript e la seconda di una query, una soluzione CSS promettente.
Quindi iniziamo!
Come accennato in precedenza, Modernizr è una libreria JavaScript leggera che rileva le funzionalità HTML5 e CSS3 nel browser. Finché la pagina viene caricata, viene eseguita dietro le quinte ed esegue test delle funzionalità. Quindi memorizza i risultati come proprietà di un oggetto JavaScript e come classi di html elemento. Maggiori informazioni in seguito.
Per installare e utilizzare Modernizr, puoi visitare il suo sito e scaricare la versione preferita.
Nota: al momento della scrittura, la versione attuale di Modernizr è 2.8.3, sebbene la versione 3 sia quasi pronta. In effetti, il team dietro la biblioteca si aspetta di avviarlo nelle prossime settimane. Una breve panoramica di questa nuova versione può essere trovata qui. Inoltre, puoi accedere alla versione beta visitando questo link.
Una volta scaricato, posiziona il file JavaScript nel tuo progetto e includilo nel file della tua pagina html. Ultimo ma non meno importante, per abilitare la funzionalità di Modernizr dovresti aggiungere il no-js classe al html elemento.
Nelle prossime due sezioni, tratterò i fondamenti di Modernizr. Per concetti più avanzati, assicurarsi di leggere la documentazione.
Come discusso sopra, Modernizr aggiunge un numero di classi al html elemento. I nomi delle classi dipendono dal supporto del browser. Se il browser non riconosce alcuni dei test delle funzionalità, Modernizr aggiunge il no- prefisso prima dei suoi nomi di classe incorporati. Ad esempio, supponendo di testare gli effetti di riflessione, il html l'elemento su Chrome 40 si presenta così:
Mentre su Firefox 35:
Notare anche il js classe. Quando si esegue Modernizr, supponendo che JavaScript sia abilitato nel nostro browser, sostituisce il vecchio no-js classe con quello nuovo.
Sulla base dei risultati ottenuti dai test di Modernizr, possiamo personalizzare i nostri fogli di stile.
Per iniziare, ecco il codice HTML di base che useremo per il resto del tutorial:
Riflessioni CSS
Usando le classi che ci hanno dato Modernizr modifichiamo gli stili di h2 elemento come segue:
h2 color: # c0ccdb; font-size: 3em; .cssreflections h2 -webkit-box-reflect: below -.45em -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, da (trasparente), color-stop (0%, trasparente), a (rgba (255, 255, 255, 0,75))); .no-cssreflections 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);
I browser basati su Webkit che supportano i riflessi mostreranno il h2 elemento come segue:
Mentre il resto di loro (almeno quelli che supportano il text-shadow proprietà) applicherà un effetto diverso, basato su un effetto testo 3D di Mark Otto:
Ecco l'esempio su Codepen:
Il secondo modo per verificare i risultati ottenuti dai test di Modernizr è tramite JavaScript. Come già accennato, Modernizr crea un oggetto con i nomi di proprietà delle funzionalità che sono configurate per testare. La maggior parte delle volte, i loro valori restituiscono entrambi vero o falso.
Lo screenshot qui sotto mostra come Firefox 35 visualizza l'oggetto Modernizr (scheda Console):
Come possiamo vedere il Modernzir.cssreflections la proprietà restituisce a falso valore. Ciò accade perché Chrome, Safari e Opera sono gli unici browser che supportano le riflessioni (al momento della scrittura).
Ecco come possiamo riprodurre l'esempio precedente con JavaScript, aggiungendo il riflessione e nessun riflesso classi al nostro manualmente:
Accentsconagua
var element = document.getElementById ('reflection'); if (Modernizr.cssreflections) element.className = 'reflection'; else element.className = 'no-reflection'; Quindi styling con il CSS pertinente:
.reflection / * applica reflection property * / .no-reflection / * applica text-shadow property * /
E la nuova demo su Codepen:
Senza dubbio, Modernizr è uno strumento prezioso nell'arsenale di ogni sviluppatore di frontend. Ma non sarebbe meglio se potessimo replicare i test di Modernizr con puro CSS? Per fortuna, possiamo farlo usando le query sulle funzionalità. Si tratta di regole condizionali che ci consentono di applicare stili diversi in base al supporto del browser. Funzionano proprio come le domande dei media. E sì, oltre all'edizione CSS arrivano anche su JavaScript.
Pronto a dare un'occhiata?
Per definire le query di caratteristiche nel nostro CSS dobbiamo usare il @supports e @supporta non regole. La loro sintassi assomiglia a questo:
@supports (condizione di test) / * applica le regole * / @supports not (condizione di test) / * applica le regole * /
La condizione include costo dell'immobile coppie di funzionalità che vogliamo testare. I browser che supportano le funzionalità applicano le regole di destinazione, che vengono specificate all'interno di @supports regola. Altrimenti, gli stili all'interno di @supporta non la regola viene eseguita.
Usando il E e / o O operatori logici possiamo creare test complessi. Tuttavia, tieni presente che questi operatori dovrebbero essere separati da parentesi.
Vediamo due esempi. Come già sappiamo, il nostro HTML è semplicemente semplice! È solo un h2 elemento.
In questo primo esempio, usiamo il colore di sfondo proprietà per specificare il colore di sfondo del corpo elemento. Per rendere le cose più interessanti, creiamo anche una variabile CSS. Il supporto del browser è suddiviso nelle seguenti categorie:
A seconda di queste circostanze, il corpo l'elemento mostrerà un diverso colore di sfondo.
Ecco il codice CSS basato sulle ipotesi di cui sopra:
body --bg-color: # 98FB98; colore di sfondo: kaki; @supports (background-color: var (- bg-color)) body background-color: var (- bg-color); @supports not (background-color: var (- bg-color)) body background-color: tomato;
Ad esempio su Safari, che appartiene alla terza categoria, il nostro elemento sarebbe simile a questo:
Quindi Chrome, che può interpretare la funzione Query, ma non supporta le variabili CSS, appartiene alla seconda categoria:
Infine, Firefox, che si trova nella prima categoria:
E l'esempio incorporato su Codepen:
In questo caso, espanderemo la condizione di test per contenere a secondo regola. Più specificamente, ora stiamo prendendo di mira i browser che supportano non solo i riflessi ma anche gli effetti del tratto di testo.
Ecco il codice per questo comportamento:
@supports ((/ * condizione riflessioni * /) e (-webkit-testo-tratto: 1px pomodoro)) h2 / * applica la proprietà reflection * / -webkit-text-stroke: 1px pomodoro; @supports not ((/ * condizione riflessioni * /) e (/ * condizione stroke * /)) h2 / * applica proprietà text-shadow * /
Ad esempio, i browser (al momento in cui scrivo solo Chrome 28+) che supportano le query sulle funzioni, i riflessi e gli effetti del tratto di testo visualizzeranno il h2 elemento come segue:
Di seguito è riportato l'esempio incorporato su Codepen:
Le query di caratteristiche possono anche essere definite tramite JavaScript. Per fare ciò, dobbiamo usare il CSS.supports metodo. Ecco i suoi possibili parametri:
CSS.supports (propertyName, propertyValue) CSS.supports (condizione di test)
Il risultato di questo metodo è a booleano valore che indica se il browser supporta le funzionalità o meno. Infine, dovremmo racchiudere i parametri in virgolette singole o doppie.
Utilizzando l'edizione JavaScript delle query sulle funzionalità, il nostro ultimo esempio può essere riprodotto come segue:
var result = CSS.supports ('(/ * condizione di riflessione * /) e (/ * condizione di ictus * /)'); var element = document.getElementById ('reflection'); if (result) element.className = 'reflection'; else element.className = 'no-reflection'; La demo corrispondente:
In termini generali, il supporto del browser per le query sulle funzionalità è buono. Al momento di scrivere Firefox (22+), Chrome (28+) e Opera (12.1+) supportano tutte queste funzionalità CSS. Speriamo che le prossime versioni di IE comprenderanno anche le regole delle condizioni (ci stanno lavorando!).
Se desideri utilizzare le query sulle funzionalità nei tuoi progetti, ma sei un po 'scettico riguardo ai browser che li comprendono, troverai qui sotto alcuni utili polilavorati:
In questo tutorial, ho utilizzato due metodi utili che è possibile utilizzare per offrire esperienze cross-browser affidabili. Sfruttare Modernizr e / o le query sulle funzionalità ti aiuterà a comprendere i vantaggi della progettazione Caratteristiche e non per i browser. Modernizr è l'attuale soluzione stabile, ma le query sulle funzionalità stanno arrivando, quindi la scelta è vostra!
