Share
Cu mult timp în urmă, minunata lui Jeffrey Way a creat un instrument numit Prefixr, menit să ajute la sarcina oneroasă de a gestiona prefixele furnizorilor în foile de stil. A funcționat prin analizarea foii de stil și adăugarea automată a versiunii prefixate a furnizorilor de reguli diferite într-o ieșire pe care ați putea să o inserați în fișierul dvs. A fost un instrument destul de slick.
Din păcate, acum că site-ul a trecut de drumul de pasăre dodo și după ce ne-au ping mai mulți utilizatori despre asta, am vrut să oferim câteva alternative care pot ajuta la furnizarea unor capabilități similare.
Prima opțiune care este mai aproape de funcționalitatea Prefixr este un site numit Express Prefixr. Acest lucru a fost creat de TJ Holowaychuk minunat, care, în afară de a fi un expert pe dezvoltarea Node.js, a creat, de asemenea, cadrul de aplicații web Express pentru Node.js.
Cu Express Prefixr, vi se oferă două textarea câmpuri, unul pentru introducerea stilurilor și cel de-al doilea pentru a primi ieșirea prefixată din serviciu. Acest lucru este foarte asemănător cu modul în care a lucrat Prefixr:
Pentru a testa acest lucru, iau același eșantion de cod pe care la folosit Jeffrey în articolul său original:
.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;
Apoi apăsați pe butonul "Prefixați-l!", pot să-mi trimit imediat stilurile prefixate:
Iată rezultatul complet:
.caseta -webkit-opacitate: .5; -moz-opacitate: .5; -ms-opacitate: .5; -o-opacitate: .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-tranziție: box-shadow 2s; -ms-tranziție: box-shadow 2s; -o-tranziție: box-shadow 2s; -webkit - webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; -webkit-animație: slide 1s alternate; -moz-animație: alternativ 1s alunecare; -ms-animație: alternativ 1s alunecare; -o-animație: alternativ 1s alunecare; fundal: gradient liniar (vârf, # e3e3e3 10%, alb); fundal: -webkit-gradient linear (top, # e3e3e3 10%, alb); fundal: -moz-linear-gradient (top, # e3e3e3 10%, alb); fundal: -ms-gradient linear (top, # e3e3e3 10%, alb); fundal: -o-gradient linear (top, # e3e3e3 10%, alb); @ -webkit-keyframes "slide" 0% stânga: 0; 100% left: 50px;
Luând în continuare acest lucru, Express Prefixr oferă, de asemenea, un API pe care îl puteți utiliza pentru a vă integra în aplicațiile dvs. sau pentru a utiliza instrumente de la terțe părți răsuci. Prin urmare, luând următorul fragment:
curl http://expressprefixr.herokuapp.com/api/procesor -d css = "corp border-radius: 10px"
Și să-l lipesc în mine Terminal fereastra îmi dă următoarele rezultate:
reys-mbp: ~ rey $ curl http://expressprefix.herokuapp.com/api/procesor -d css = "corp border-radius: 10px" corp -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;
Un ultim lucru minunat despre Express Prefixr este faptul că codul este disponibil pe GitHub, permițându-vă să îl descurcați cu ușurință și să personalizați software-ul la nevoile dvs..
Următoarea opțiune este de fapt concepută să se integreze mai mult în fluxul de lucru, decât să fie un instrument vizual UI. Autoprefixer adaugă, de fapt, prefixe, dacă este cazul, prin utilizarea regulilor oferite de site-ul popular, Pot folosi. Sloganul Autoprefixer este:
"Scrieți regulile dvs. CSS fără prefixele furnizorilor (de fapt, uitați-le în totalitate)"
Și este adevărat. Ceea ce inseamna asta este faptul ca in foile de stil se poate concentra pe folosirea sintaxei bazate pe standarde si Autoprefixer se va ocupa de adaugarea in regulile prefixate daca este necesar.
Să ne uităm la un cod:
: ecran complet a tranziție: transformare 1s
Codul de mai sus va fi actualizat de Autoprefixer la următoarele:
: -webkit-full-screen-o -webkit-transition: -webkit-transform 1s; transformare 1s: - moz-full-screen a tranziție: transform 1s: - ms-fullscreen a tranziție: transform 1s: fullscreen a -webkit-transition: -webkit-transform 1s; tranziție: transformați 1s
Priviți cu atenție sintaxa. Observați că tranziție regula a fost destul de mult lăsată singură, cu excepția adăugării celor două intrări specifice Webkit. Acest lucru se datorează faptului că Autoprefixer aplică numai prefixele furnizorilor atunci când este cazul. În acest caz, tranziție este larg acceptată în browserele moderne și nu trebuie să fie prefixată.
Cu exceptia :ecran complet pseudo-clasa este încă în evoluție și nu trebuie să fie prefixate în mod corespunzător. Autoprefixer, utilizând datele de pe care pot să utilizez, este suficient de inteligent pentru a determina când să prefixeze ceva pe baza nivelului de suport al unei anumite caracteristici de către browser. Foarte tare!
Este de remarcat faptul că Autoprefixer este menit să fie încorporat în fluxul normal de lucru al implementării. Nu este o bibliotecă din partea clientului și o puteți utiliza prin intermediul oricărui număr de integrări ale terților. Aceasta include:
Accentsconagua
autoprefixer-șine bijuterieȘi multe alte opțiuni. Chiar și noul Atom Editor are acum pachetul atom-autoprefixer care arată că Autoprefixer este bine întreținut.
Dacă doriți să vedeți acțiunea Autoprefixer în acțiune, faceți salt la următorul demo și adăugați o grămadă de reguli CSS pe care ați avut în mod tradițional prefixul vânzătorului și vedeți cum funcționează pentru dvs..
Opțiunea finală este o mare bibliotecă de la Lea Verou, numită "prefix-free". Lea a fost un avocat de lungă durată în dezvoltarea browserului încrucișat și a construit această bibliotecă pentru a vă asigura că site-ul dvs. utilizează toate prefixele corecte ale furnizorilor. A construit-o într-un moment în care, din nefericire, mulți dezvoltatori de web pur și simplu uitaseră să adauge toate prefixele corespunzătoare, cauzând site-urile să nu redea corect toate browserele moderne.
Principala diferență dintre acest lucru și celelalte două pe care le-am menționat anterior este că -prefix-free este o bibliotecă JavaScript care vă privește foile de stil în timpul rulării și adaugă prefixele furnizorilor atunci când este necesar.
Utilizarea bibliotecii este la fel de simplă ca adăugarea următoarei linii la cap din pagina ta:
Nu, serios. Asta e. Biblioteca gestionează procesarea fiecărei foi de stil în legătură sau stil elemente și adaugă un prefix de furnizor acolo unde este necesar. Acest lucru este util în special pentru site-urile care sunt deja implementate și este posibil să nu fie posibilă revenirea și actualizarea acestora.
De asemenea, este compatibil cu IE9 +, Opera 10+, Firefox 3.5+, Safari 4+ și Chrome pe desktop și Mobile Safari, browserul Android, Chrome și Opera Mobile pe mobil.
Este minunat să aveți alternative la Prefixr și aceste soluții se potrivesc cu siguranță facturii. În cele din urmă, însă, prefixele furnizorilor au devenit mai complicate decât merită și cu mulți dezvoltatori care nu respectă intenția inițială a acestora (de exemplu, să desemneze experimental caracteristici) și leagandu-le în sistemele de producție, sperăm că vor pleca în viitorul apropiat.
Din fericire, Google a menționat atunci când și-a anunțat motorul de redare Blink, că ar trece la un model de pavilion de caracteristici care ar ascunde caracteristicile experimentale din spatele unor steaguri greu de setat care nu sunt accesibile prin cod. Slavă Domnului!
