Share
Mange av dere kan være oppmerksomme på at vi nylig lanserte en nyttig webtjeneste, kalt Nettuts + Prefixr. Heldigvis har verktøyet kommet langt siden starten, da jeg har slått ut utallige feil og lagt til noen nydelige nye funksjoner. Jeg vil gjerne gi deg en rask oversikt over verktøyets nåværende tilstand, samt hvordan du bruker det.
Prefixr tar alle de irriterende CSS3 prefiksene som vi må skrive om og om igjen, og gjør unna med dem! Hvis du oppretter stilarkene dine ved hjelp av den offisielle syntaksen, kan du da, ved distribusjon, kjøre det rene stilarket ditt via Prefixr, og det vil øyeblikkelig oppdatere stilarket ditt for å inkludere alle nødvendige prefiks.
På den måten trenger du ikke å håndtere å huske om en bestemt CSS3-egenskap krever en -ms prefiks eller ikke. Denne kunnskapen er bygd inn i Prefixr.
La oss se på et raskt eksempel. Nedenfor har jeg noen spredt CSS som har dårlig behov for oppdatering. Legg merke til at vi noen steder kun har erklært a -moz prefiks; På andre områder har vi brukt den offisielle syntaksen, osv.
.boks opacity: .5; .container box-shadow: 20px; -moz-overgang: box-shadow 2s; -webkit-grense-radius: 4px; animasjon: lysbilde 1s alternativ; bakgrunn: lineær gradient (topp, # e3e3e3 10%, hvit); @ -webkit-keyframes "slide" 0% left: 0; 100% venstre: 50px;
Kopier koden ovenfor, og lim den inn i Prefixr. Til gjengjeld vil du motta:
.boks -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)"; filter: alfa (opasitet = 50); opacity: .5; .container -webkit-box-shadow: 20px; -moz-boks-skygge: 20px; boks-skygge: 20px; -webkit-overgang: Box-Shadow 2s; -moz-overgang: box-shadow 2s; -Overgang: Box-Shadow 2s; -ms-overgang: Box-Shadow 2s; Overgang: Box-Shadow 2s; -webkit-grense-radius: 4px; -moz-grense-radius: 4px; grense-radius: 4px; -webkit-animasjon: lysbilde 1s alternativ; -moz-animasjon: lysbilde 1s alternativ; -ms-animasjon: slide 1s alternate; animasjon: lysbilde 1s alternativ; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (10%, # e3e3e3), til (hvit)); bakgrunn: -webkit-lineær-gradient (topp, # e3e3e3 10%, hvit); bakgrunn: -moz-lineær-gradient (topp, # e3e3e3 10%, hvit); Bakgrunn: -O-lineær-gradient (topp, # e3e3e3 10%, hvit); bakgrunn: -ms-lineær gradient (topp, # e3e3e3 10%, hvit); bakgrunn: lineær gradient (topp, # e3e3e3 10%, hvit); @keyframes "slide" 0% left: 0; 100% venstre: 50px; @ -moz-keyframes "slide" 0% left: 0; 100% venstre: 50px; @ -webkit-keyframes "slide" 0% left: 0; 100% venstre: 50px; @ -ms-keyframes "slide" 0% left: 0; 100% venstre: 50px;
Wow - det er mye duplikat styling. Men dessverre er det nødvendig på dette tidspunktet. Hvis du vil at webapplikasjonene skal være like konsekvente som mulig fra nettleseren til nettleseren, må du bruke disse ulike prefiksene. Men som du kan forestille deg, kan dette raskt oppheve koden din. Det er derfor Prefixr er så nyttig!
Opprett stilarkene dine ved hjelp av den offisielle syntaksen, og kjør den deretter gjennom Prefixr når du distribuerer, eller når du trenger en konvertering.
Ingen bekymringer! Jeg gjør heller ikke. Å besøke Prefixr.com er bare en måte å oppdatere stilarkene på. Jeg foretrekker å bruke den i min favoritt kodeditor. Takket være ulike brukere er det en håndfull plugins og skript tilgjengelig for de mest populære redaktørene. For eksempel, som en Sublime Text-bruker, bruker jeg personlig Will Bonds "Sublime Prefixr" plugin, som fungerer fantastisk.
Nå må jeg aldri manuelt besøke Prefixr og kopiere og lime inn stilarket mitt. Jeg velger bare litt CSS som jeg ønsker å optimalisere, og skriver inn Ctrl + Alt + x på Windows og Linux, eller cmd + ctrl + x på OSX.
Se nedenfor for den nåværende listen over støttede redaktører.
Det finnes utallige TextMate-brukere der ute; la oss lage en kommando som vil kjøre et valg gjennom Prefixr, og plassere resultatet i utklippstavlen. Innenfor TextMate, bla til Bundle Editor, og opprett en ny kommando.
Lim inn følgende i "Kommando" tekstområdet. Dette vil ta den valgte teksten, kjøre den gjennom Prefixr, og kopiere svaret til utklippstavlen. Deretter tilordner du en aktiveringsnøkkel, og du er klar! Dette er nyttig hvis du foretrekker å lagre de forhåndsdefinerte resultatene i et eget stilark.
curl -sSd "css = $ TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" | pbcopy
Eller, hvis du foretrekker at resultatet blir komprimert, endre kommandoen, slik som:
curl -sSd "css = $ TM_SELECTED_TEXT & compress_option = true" "http://prefixr.com/api/index.php" | pbcopy
Nå, hvis stilarket ditt viser:
.boks border-radius: 5px;
Velg stilarket, skriv inn aktiveringsnøkkelen du tildelte, og følgende skal nå lagres i utklippstavlen (forutsatt at du bruker komprimeringsalternativet).
.boks -webkit-border-radius: 5 px; -moz-border-radius: 5 px; border-radius: 5 px;
Prefix er ikke den samme typen forprosessor som Mindre, Stylus eller Sass. Jeg elsker de - Sass og Stylus spesielt. Prefixr er i stedet for folkene som misliker ideen om å bruke dem. Når det er sagt, vil variabler komme til nytte, så hvis du vil bruke dem i Prefixr, vil den automatisk oppdatere stilarkene dine. For eksempel:
@variables site_width: 960px; .container width: var (site_width);
Kjør det gjennom Prefixr, og vi får:
.beholder bredde: 960px;
Det er viktig å merke seg at dette er en valgfri funksjon. Hvis du føler at variablene kompliserer CSS, må du ikke bruke denne funksjonen!
Nettuts + Prefixr er under aktiv utvikling, så hvis du legger merke til en feil eller ønsker en ny funksjon som skal implementeres, legg igjen en kommentar nedenfor, eller klikk på "Feedback" -knappen på Prefixr.com.
Accentsconagua