Share
Un po 'di tempo fa, il fantastico Jeffrey Way ha creato uno strumento chiamato Prefixr che doveva aiutare con il compito oneroso di gestire i prefissi dei fornitori nei fogli di stile. Ha funzionato analizzando il foglio di stile e aggiungendo automaticamente la versione con prefisso del venditore di regole diverse in un output che è possibile quindi incollare nel file. Era uno strumento piuttosto ingegnoso.
Sfortunatamente, ora che il sito ha fatto la fine dell'uccello dodo e dopo che molti utenti ci hanno fatto il rumore, volevamo fornire alcune alternative che possono aiutare a fornire funzionalità simili.
La prima opzione più vicina alla funzionalità di Prefixr è un sito chiamato Express Prefixr. Questo è stato creato dal fantastico TJ Holowaychuk che oltre ad essere un esperto nello sviluppo di Node.js, ha anche creato il framework per applicazioni web Express per Node.js.
Con Express Prefixr, sei presentato con due textarea campi, uno per inserire gli stili e il secondo per ricevere l'output prefissato dal servizio. Questo è molto simile al modo in cui ha lavorato Prefixr:
Per verificarlo, sto prendendo lo stesso codice di esempio usato da Jeffrey nel suo articolo originale:
.box opacity: .5; .container box-shadow: 20px; -moz-transition: box-shadow 2s; -webkit-border-radius: 4px; animazione: slide 1s alternate; sfondo: gradiente lineare (in alto, # e3e3e3 10%, bianco); @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px;
Quindi premendo sul "Prefisso!", posso immediatamente ricevere i miei stili prefissati:
Ecco il risultato completo:
.box -webkit-opacity: .5; -moz-opacity: .5; -ms-opacity: .5; -o-opacità: .5; .container -webkit-box-shadow: 20px; -moz-box-shadow: 20px; -ms-box-shadow: 20px; -o-box-shadow: 20px; -moz - webkit-transition: box-shadow 2s; -moz-transition: box-shadow 2s; -ms-transition: box-shadow 2s; -o-transizione: box-shadow 2s; -webkit - webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; -webkit-animation: slide 1s alternate; -moz-animation: slide 1s alternate; -ms-animation: slide 1s alternate; -o-animazione: slide 1s alternate; sfondo: gradiente lineare (in alto, # e3e3e3 10%, bianco); background: -webkit-linear-gradient (in alto, # e3e3e3 10%, bianco); sfondo: -moz-linear-gradient (in alto, # e3e3e3 10%, bianco); sfondo: -ms-linear-gradient (in alto, # e3e3e3 10%, bianco); sfondo: -o-linear-gradient (in alto, # e3e3e3 10%, bianco); @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px;
Oltre a ciò, Express Prefixr fornisce anche un'API che puoi sfruttare per integrare nelle tue applicazioni o utilizzare strumenti di terze parti come arricciare. Quindi prendendo il seguente frammento:
curl http://expressprefixr.herokuapp.com/api/processor -d css = "body border-radius: 10px"
E incollandolo nel mio terminale finestra mi dà i seguenti risultati:
reys-mbp: ~ rey $ curl http://expressprefixr.herokuapp.com/api/processor -d css = "body border-radius: 10px" body -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;
Un ultimo aspetto importante di Express Prefixr è che il codice è disponibile su GitHub che ti consente di posizionarlo facilmente e personalizzare il software in base alle tue esigenze.
La prossima opzione è in realtà progettata per integrarsi maggiormente nel tuo flusso di lavoro, piuttosto che essere uno strumento di interfaccia grafica. Autoprefixer aggiunge infatti prefissi dove appropriato utilizzando le regole fornite dal popolare sito, Posso usare. Lo slogan di Autoprefixer è:
"Scrivi le tue regole CSS senza prefissi del venditore (in effetti, dimenticatene completamente)"
E è vero. Ciò significa che nei tuoi fogli di stile puoi concentrarti sull'uso della sintassi basata sugli standard e Autoprefixer gestirà l'aggiunta nelle regole prefissate, se necessario.
Diamo un'occhiata ad un codice:
: fullscreen a transition: transform 1s
Il codice sopra riportato verrà aggiornato da Autoprefixer al seguente:
: -webkit-full-screen a -webkit-transition: -webkit-transform 1s; transizione: transform 1s: - moz-full-screen a transition: transform 1s: - ms-fullscreen a transition: transform 1s: fullscreen a -webkit-transition: -webkit-transform 1s; transizione: trasforma 1s
Dai un'occhiata da vicino alla sintassi. Si noti che il transizione la regola era praticamente lasciata sola, tranne che per l'aggiunta delle due voci specifiche del Webkit. Questo perché Autoprefixer applica solo i prefissi dei fornitori quando è appropriato. In questo caso, transizione è ampiamente supportato nei browser moderni e non ha davvero bisogno di essere prefisso.
Ma il :a schermo intero la pseudo-classe è ancora in evoluzione e ha bisogno di essere correttamente prefissata. Autoprefixer, utilizzando i dati Can I Use, è abbastanza intelligente da determinare quando prefisso qualcosa in base al livello di supporto di un browser per una funzione. Molto bello!
La cosa da notare è che Autoprefixer deve essere incorporato nel normale flusso di lavoro di distribuzione. Non è una libreria lato client e la si sfrutta tramite un numero qualsiasi di integrazioni di terze parti. Ciò comprende:
Accentsconagua
autoprefixer-rails gemmaE tante altre opzioni. Anche il nuovo Atom Editor ha ora il pacchetto atom-autoprefixer che mostra che Autoprefixer è ben mantenuto.
Se vuoi vedere in azione Autoprefixer, vai alla demo seguente e aggiungi un po 'di regole CSS che hai tradizionalmente avuto per il prefisso del venditore e vedi come funziona per te.
L'ultima opzione è una grande libreria lato client di Lea Verou chiamata -prefix-free. Lea è stata una sostenitrice di lunga data dello sviluppo di più browser e ha costruito questa libreria per fare in modo che, come un piccolo shim, garantisca che il tuo sito utilizzi tutti i prefissi dei fornitori appropriati. Lo ha costruito in un momento in cui, sfortunatamente, molti sviluppatori web si sono semplicemente dimenticati di aggiungere tutti i prefissi appropriati, causando il mancato rendering dei siti in tutti i browser moderni..
La differenza fondamentale tra questa e le altre due che ho menzionato in precedenza è che -prefix-free è una libreria JavaScript che esamina i fogli di stile in fase di runtime e aggiunge i prefissi dei produttori quando necessario.
Usare la libreria è semplice come aggiungere la seguente riga al capo della tua pagina:
No sul serio. Questo è tutto. La libreria gestisce l'elaborazione di ogni foglio di stile in collegamento o stile elementi e aggiunge un prefisso del fornitore dove necessario. Ciò è particolarmente utile per i siti già distribuiti e potrebbe non essere possibile tornare indietro e aggiornarlo.
Ha anche un solido supporto per browser compatibile con IE9 +, Opera 10+, Firefox 3.5+, Safari 4+ e Chrome su desktop e Mobile Safari, browser Android, Chrome e Opera Mobile su dispositivo mobile.
È fantastico avere alternative a Prefixr e queste soluzioni sono sicuramente all'altezza della situazione. In definitiva, però, i prefissi dei venditori sono diventati più complicati di quanto valgano e con molti sviluppatori che non rispettano l'intento originale di essi (ad esempio, per designare sperimentale caratteristiche) e sfruttandole nei sistemi di produzione, speriamo che se ne andranno nel prossimo futuro.
Per fortuna, Google ha menzionato quando hanno annunciato il loro motore di rendering Blink, che sarebbero passati a un modello di bandiera funzionale che nascondeva le funzionalità sperimentali dietro bandiere difficili da impostare che non sono accessibili tramite codice. Grazie a Dio!
