O actualizare pe Nettuts + Prefixr

Mulți dintre dvs. ar putea fi conștienți că am lansat recent un serviciu web utile, numit Nettuts + Prefixr. Din fericire, instrumentul a parcurs un drum lung de la lansarea inițială, deoarece am răsturnat nenumărate bug-uri și am adăugat câteva caracteristici noi. Aș dori să vă dau o scurtă analiză a situației actuale a instrumentului, precum și cum să îl folosiți.


Așteptați - Ce este Prefixr?

Prefixr ia toate prefixele CSS3 plictisitoare pe care trebuie să le tipăm mereu și repede, și le îndepărtează de ele! Dacă creați foile de stil folosind sintaxa oficială, atunci, la implementare, puteți rula foaia de stil curată prin intermediul Prefixr și va actualiza instantaneu foaia de stil pentru a include fiecare prefix necesar.

În acest fel, nu este necesar să vă amintiți dacă o anumită proprietate CSS3 necesită o -Domnișoară prefix sau nu. Această cunoaștere este construită în Prefixr.

Să examinăm un exemplu rapid. Mai jos, am câteva CSS împrăștiate, care au nevoie de actualizare. Observați că, în anumite locuri, am declarat doar a -Moz prefix; în alte domenii, am folosit sintaxa oficială etc.

 .casetă opacity: .5;  .container box-shadow: 20px; -moz-tranziție: box-shadow 2s; -webkit-border-radius: 4px; animație: alternativă pentru slide 1s; fundal: gradient liniar (vârf, # e3e3e3 10%, alb);  @ -webkit-keyframes "slide" 0% stânga: 0;  100% left: 50px; 

Copiați codul de mai sus și lipiți-l în Prefixr. În schimb, veți primi:

 .caseta -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacitate = 50)"; filtru: alfa (opacitate = 50); opacitate: .5;  .container -webkit-box-shadow: 20px; -moz-box-shadow: 20px; box-shadow: 20 pixeli; -webkit-transition: box-shadow 2s; -moz-tranziție: box-shadow 2s; -o-tranziție: box-shadow 2s; -ms-tranziție: box-shadow 2s; tranziție: box-shadow 2s; -webkit-border-radius: 4px; -moz-border-radius: 4px; raza de graniță: 4px; -webkit-animație: slide 1s alternate; -moz-animație: alternativ 1s alunecare; -ms-animație: alternativ 1s alunecare; animație: alternativă pentru slide 1s; fundal-imagine: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (10%, # e3e3e3), la (alb)); fundal: -webkit-gradient linear (top, # e3e3e3 10%, alb); fundal: -moz-linear-gradient (top, # e3e3e3 10%, alb); fundal: -o-gradient linear (top, # e3e3e3 10%, alb); fundal: -ms-gradient linear (top, # e3e3e3 10%, alb); fundal: gradient liniar (vârf, # e3e3e3 10%, alb);  @ cadre cheie "slide" 0% left: 0;  100% left: 50px;  @ -moz-cheie-cheie "slide" 0% left: 0;  100% left: 50px;  @ -webkit-keyframes "slide" 0% left: 0;  100% left: 50px;  @ -ms-cadre cheie "slide" 0% left: 0;  100% left: 50px; 

Wow - este o mulțime de stil duplicat. Dar, din păcate, este necesar în acest moment. Dacă doriți ca aplicațiile dvs. web să fie cât mai coerente între browser și browser, trebuie să utilizați aceste prefixe diferite. Cu toate acestea, după cum vă puteți imagina, acest lucru vă poate umfla repede codul. De aceea, Prefixr este foarte util!

Creați foile de stil utilizând sintaxa oficială, apoi executați-o prin Prefixr când desfășurați sau când aveți nevoie de o conversie.


Nu vreau să copiez și să lipesc în Prefixr

Fără griji! Nici eu nu. Vizitarea Prefixr.com este doar o modalitate de a vă actualiza foile de stil. Prefer mult să îl folosesc în editorul meu de cod preferat. Datorită diverșilor utilizatori, există o mulțime de plugin-uri și scripturi disponibile pentru editorii cele mai populare. De exemplu, în calitate de utilizator Sublim Text, folosesc personal pluginul "Sublime Prefixr" al Will Bond, care funcționează minunat.

Acum, niciodată nu trebuie să vizitez manual Prefixr și să copiez și să-mi lipesc foaia de stil. Am selectat pur și simplu bitul de CSS pe care doresc să-l optimizez și să tip ctrl + alt + x pe Windows și Linux, sau cmd + ctrl + x pe OSX.

Lista editorilor

Consultați mai jos lista curentă de editori care au suportat.

Comenzi textMate

Există nenumărați utilizatori TextMate acolo; să creăm o comandă care va executa o selecție prin Prefixr și va plasa rezultatul în clipboard. În TextMate, parcurgeți editorul Bundle și creați o comandă nouă.

Inserați următoarele în textarea "Comandă". Aceasta va lua textul selectat, va rula prin Prefixr și va copia răspunsul în clipboard. Apoi, atribuiți o cheie de activare și sunteți pregătiți! Acest lucru este util dacă preferați să stocați rezultatele Prefixate într-o foaie de stil separată.

 curl -sSd "css = $ TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" | pbcopy

Sau, dacă preferați ca rezultatul să fie comprimat, modificați comanda, după cum urmează:

 curl -sSd "css = $ TM_SELECTED_TEXT & compress_option = true" "http://prefixr.com/api/index.php" | pbcopy

Acum, dacă afișează foaia de stil:

 .caseta border-radius: 5px; 

Selectați foaia de stil, tastați cheia de activare pe care ați atribuit-o și următoarele ar trebui acum stocate în clipboard (presupunând că utilizați opțiunea de compresie).

 .box -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

Pot folosi variabilele?

Prefixer nu este același tip de preprocesor ca Less, Stylus sau Sass. Îmi plac foarte mult - Sass și Stylus. Prefixr este în schimb pentru cei care nu le place ideea de a le folosi. Acestea fiind spuse, variabilele nu sunt la îndemână, deci dacă doriți să le utilizați în Prefixr, acestea vor actualiza automat foile de stil. De exemplu:

 @variables site_width: 960px;  .container width: var (site_width); 

Rulați-l prin Prefixr și obținem:

 .container lățime: 960px; 

Este important să rețineți că aceasta este în întregime o caracteristică opțională. Dacă simțiți că variabilele complică CSS, atunci nu utilizați această caracteristică!


Cereri?

Nettuts + Prefixr este în curs de dezvoltare activă, deci dacă observați un bug sau doriți ca o caracteristică nouă să fie implementată, fie lăsați un comentariu de mai jos, fie faceți clic pe butonul "Feedback" de la Prefixr.com.

Cod