Share
Velen van jullie zijn zich misschien bewust dat we onlangs een nuttige webservice hebben gelanceerd, genaamd Nettuts + Prefixr. Gelukkig is de tool een lange weg afgelegd sinds de eerste lancering, omdat ik talloze bugs heb verbrijzeld en wat nette nieuwe functies heb toegevoegd. Ik wil u graag een kort overzicht geven van de huidige status van de tool en van het gebruik ervan.
Prefixr neemt al die vervelende CSS3-voorvoegsels die we steeds opnieuw moeten typen en wegnemen! Als u uw stylesheets maakt met behulp van de officiële syntaxis, kunt u tijdens de implementatie uw schone stylesheet uitvoeren via Prefixr en wordt uw stylesheet onmiddellijk bijgewerkt met elk vereist voorvoegsel.
Op deze manier hoef je je niet bezig te houden met het onthouden of een bepaalde CSS3-eigenschap een a vereist -Mevrouw voorvoegsel of niet. Die kennis is ingebouwd in Prefixr.
Laten we een snel voorbeeld bekijken. Hieronder heb ik een aantal verspreide CSS die dringend moet worden bijgewerkt. Merk op dat we op sommige plaatsen alleen a hebben verklaard -moz voorvoegsel; in andere gebieden hebben we de officiële syntaxis gebruikt, enzovoort.
.vak ondoorzichtigheid: .5; .container vakschaduw: 20px; -moz-overgang: doosschaduw 2s; -webkit-border-radius: 4px; animatie: dia 1s alternatief; achtergrond: lineair verloop (bovenaan, # e3e3e3 10%, wit); @ -webkit-keyframes "dia" 0% links: 0; 100% left: 50px;
Kopieer de bovenstaande code en plak deze in Prefixr. In ruil daarvoor ontvang je:
.box -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Dekking = 50)"; filter: alpha (opacity = 50); dekking: .5; .container -webkit-box-shadow: 20px; -moz-box-shadow: 20px; box-shadow: 20px; -webkit-overgang: box-shadow 2s; -moz-overgang: doosschaduw 2s; -o-transition: box-shadow 2s; -ms-overgang: box-shadow 2s; overgang: vakschaduw 2s; -webkit-border-radius: 4px; -moz-border-radius: 4px; grensradius: 4px; -webkit-animatie: dia 1s alternatief; -moz-animatie: slide 1s alternatief; -ms-animatie: slide 1s alternatief; animatie: dia 1s alternatief; achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleurstop (10%, # e3e3e3), tot (wit)); achtergrond: -webkit-lineair verloop (bovenaan, # e3e3e3 10%, wit); achtergrond: -moz-linear-gradient (bovenaan, # e3e3e3 10%, wit); achtergrond: -o-lineaire gradiënt (boven, # e3e3e3 10%, wit); achtergrond: -ms-lineaire gradiënt (bovenkant, # e3e3e3 10%, wit); achtergrond: lineair verloop (bovenaan, # e3e3e3 10%, wit); @keyframes "slide" 0% left: 0; 100% left: 50px; @ -moz-keyframes "slide" 0% left: 0; 100% left: 50px; @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px; @ -ms-keyframes "slide" 0% left: 0; 100% left: 50px;
Wauw - dat is veel dubbele stijl. Maar helaas is dit op dit moment noodzakelijk. Als u wilt dat uw webtoepassingen zo consistent mogelijk zijn van browser naar browser, moet u deze verschillende voorvoegsels gebruiken. Zoals je je wel kunt voorstellen, kan dit je code snel doen zweten. Dat is waarom Prefixr zo nuttig is!
Maak uw stylesheets met behulp van de officiële syntaxis en voer het vervolgens voor Prefixr uit wanneer u het implementeert of wanneer u een conversie nodig hebt.
Maak je geen zorgen! Ik ook niet. Een bezoek aan Prefixr.com is maar één manier om uw stylesheets bij te werken. Ik gebruik het liefst in mijn favoriete codebewerker. Dankzij verschillende gebruikers zijn er een handvol plug-ins en scripts beschikbaar voor de meest populaire editors. Als gebruiker van Sublime Text bijvoorbeeld, gebruik ik de plug-in 'Sublime Prefixr' van Will Bond persoonlijk, die fantastisch werkt.
Nu hoef ik nooit meer Prefixr te bezoeken en mijn stylesheet te kopiëren en plakken. Ik selecteer gewoon het stukje CSS dat ik wil optimaliseren en typ ctrl + alt + x op Windows en Linux, of cmd + ctrl + x op OSX.
Zie hieronder voor de huidige lijst met ondersteunde editors.
Er zijn ontelbare TextMate-gebruikers; laten we een commando maken dat een selectie uitvoert via Prefixr, en plaats het resultaat op het klembord. Blader in TextMate naar de bundeleditor en maak een nieuwe opdracht.
Plak het volgende in het tekstveld "Opdracht". Hiermee wordt de geselecteerde tekst gemaakt, wordt Prefixr doorlopen en wordt het antwoord naar uw klembord gekopieerd. Wijs vervolgens een activeringssleutel toe en u bent helemaal klaar! Dit is handig als u de Vooraf gedefinieerde resultaten liever opslaat in een afzonderlijke stylesheet.
curl -sSd "css = $ TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" | pbcopy
Of, als u wilt dat het resultaat wordt gecomprimeerd, wijzigt u de opdracht, zoals:
curl -sSd "css = $ TM_SELECTED_TEXT & compress_option = true" "http://prefixr.com/api/index.php" | pbcopy
Nu, als uw stylesheet wordt weergegeven:
.vak border-radius: 5px;
Selecteer het stijlblad, typ de activeringssleutel die u hebt toegewezen en het volgende zou nu moeten worden opgeslagen op uw klembord (ervan uitgaande dat u de comprimeeroptie gebruikt).
.box -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Prefixr is niet hetzelfde type preprocessor als Less, Stylus of Sass. Ik ben dol op die - Sass en Stylus in het bijzonder. Prefixr is in plaats daarvan voor de mensen die het idee niet leuk vinden om ze te gebruiken. Dat gezegd hebbende, komen variabelen wel van pas, dus als u ze in Prefixr wilt gebruiken, worden uw stylesheets automatisch bijgewerkt. Bijvoorbeeld:
@variables site_width: 960px; .container width: var (site_width);
Voer het uit via Prefixr, en we krijgen:
.container breedte: 960px;
Het is belangrijk op te merken dat dit volledig een optionele functie is. Als u vindt dat variabelen CSS ingewikkeld maken, gebruik dan deze functie niet!
Nettuts + Prefixr wordt momenteel actief ontwikkeld, dus als u een bug opmerkt of een nieuwe functie wilt implementeren, laat dan een commentaar achter of klik op de knop "Feedback" op Prefixr.com.
Accentsconagua