Share
Viele von Ihnen wissen vielleicht, dass wir vor kurzem einen hilfreichen Webservice namens Nettuts + Prefixr gestartet haben. Glücklicherweise hat das Tool seit dem ersten Start einen großen Weg zurückgelegt, da ich unzählige Fehler beseitigt und einige neue Funktionen hinzugefügt habe. Ich möchte Ihnen einen kurzen Überblick über den aktuellen Stand des Tools sowie über die Verwendung geben.
Prefixr nimmt all diese lästigen CSS3-Präfixe, die wir immer wieder eingeben müssen, und macht sie weg! Wenn Sie Stylesheets mit der offiziellen Syntax erstellen, können Sie bei der Bereitstellung ein sauberes Stylesheet über Prefixr ausführen. Das Stylesheet wird sofort aktualisiert und enthält alle erforderlichen Präfixe.
Auf diese Weise müssen Sie sich nicht daran erinnern, ob eine bestimmte CSS3-Eigenschaft ein -Frau Präfix oder nicht. Dieses Wissen ist in Prefix integriert.
Sehen wir uns ein kurzes Beispiel an. Unten habe ich ein paar verstreute CSS, die dringend aktualisiert werden müssen. Beachten Sie, dass wir an einigen Stellen nur a angegeben haben -moz Präfix; In anderen Bereichen haben wir die offizielle Syntax verwendet.
.Box Deckkraft: .5; .container box-shadow: 20px; -Moz-Übergang: Box-Schatten 2s; -webkit-border-radius: 4px; Animation: Folie 1s wechseln sich ab; Hintergrund: linearer Gradient (oben, # e3e3e3 10%, weiß); @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px;
Kopieren Sie den obigen Code und fügen Sie ihn in Prefixr ein. Im Gegenzug erhalten Sie:
.Feld -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)"; Filter: Alpha (Deckkraft = 50); Deckkraft: .5; .container -webkit-box-shadow: 20px; -Moz-Box-Schatten: 20px; Box-Schatten: 20px; -webkit-Übergang: Box-Schatten 2s; -Moz-Übergang: Box-Schatten 2s; -o-Übergang: Box-Schatten 2s; -ms-Übergang: Box-Schatten 2s; Übergang: Box-Schatten 2s; -webkit-border-radius: 4px; -moz-border-radius: 4px; Grenzradius: 4px; -webkit-animation: Slide 1s alternate; -Moz-Animation: Folie 1s alternieren; -ms-animation: Slide 1s alternate; Animation: Folie 1s wechseln sich ab; Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (10%, # e3e3e3), bis (weiß)); Hintergrund: -webkit-linearer Gradient (oben, # e3e3e3 10%, weiß); Hintergrund: -moz-linearer Gradient (oben, # e3e3e3 10%, weiß); Hintergrund: -o-linearer Gradient (oben, # e3e3e3 10%, weiß); Hintergrund: -ms-linearer Gradient (oben, # e3e3e3 10%, weiß); Hintergrund: linearer Gradient (oben, # e3e3e3 10%, weiß); @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 "Folie" 0% left: 0; 100% left: 50px;
Wow - das ist viel doppelter Stil. Aber leider ist es zu diesem Zeitpunkt notwendig. Wenn Ihre Webanwendungen von Browser zu Browser so konsistent wie möglich sein sollen, müssen Sie diese verschiedenen Präfixe verwenden. Wie Sie sich jedoch vorstellen können, kann dies Ihren Code schnell aufblähen. Deshalb ist Prefixr so hilfreich!
Erstellen Sie Ihre Stylesheets mit der offiziellen Syntax und führen Sie sie dann durch Prefixr aus, wenn Sie sie bereitstellen oder wenn Sie eine Konvertierung benötigen.
Keine Bange! Ich auch nicht Der Besuch von Prefixr.com ist nur eine Möglichkeit, Ihre Stylesheets zu aktualisieren. Ich ziehe es vor, es in meinem bevorzugten Code-Editor zu verwenden. Dank verschiedener Benutzer gibt es eine Handvoll Plugins und Skripte für die beliebtesten Editoren. Als Benutzer von Sublime Text verwende ich zum Beispiel persönlich das "Sublime Prefixr" -Plugin von Will Bond, das wunderbar funktioniert.
Nun muss ich Prefixr nie manuell aufrufen und mein Stylesheet kopieren und einfügen. Ich wähle einfach das bisschen CSS aus, das ich optimieren möchte, und tippe Strg + Alt + x unter Windows und Linux oder cmd + ctrl + x unter OSX.
Unten finden Sie die aktuelle Liste der unterstützten Editoren.
Es gibt unzählige TextMate-Benutzer da draußen; Lassen Sie uns einen Befehl erstellen, der eine Auswahl über Prefixr ausführt und das Ergebnis in die Zwischenablage kopiert. Navigieren Sie in TextMate zum Bundle-Editor und erstellen Sie einen neuen Befehl.
Fügen Sie Folgendes in den Textbereich "Befehl" ein. Der ausgewählte Text wird durch Prefixr ausgeführt und die Antwort in die Zwischenablage kopiert. Als Nächstes weisen Sie einen Aktivierungsschlüssel zu und Sie sind fertig! Dies ist hilfreich, wenn Sie die Präfix-Ergebnisse lieber in einem separaten Stylesheet speichern möchten.
curl -sSd "css = $ TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" | pbcopy
Oder ändern Sie den Befehl, wenn Sie möchten, dass das Ergebnis komprimiert wird:
curl -sSd "css = $ TM_SELECTED_TEXT & compress_option = true" "http://prefixr.com/api/index.php" | pbcopy
Wenn nun Ihr Stylesheet angezeigt wird:
.Kästchen Randradius: 5px;
Wählen Sie das Stylesheet aus, geben Sie den Aktivierungsschlüssel ein, den Sie zugewiesen haben, und das Folgende sollte nun in Ihrer Zwischenablage gespeichert werden (vorausgesetzt, Sie verwenden die Komprimierungsoption)..
.Feld -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Präfix ist nicht der gleiche Präprozessor-Typ wie Less, Stylus oder Sass. Ich liebe diese - besonders Sass und Stylus. Prefixr ist stattdessen für die Leute, die die Idee ihrer Verwendung nicht mögen. Das heißt, Variablen sind praktisch. Wenn Sie sie in Prefixr verwenden möchten, werden Ihre Stylesheets automatisch aktualisiert. Zum Beispiel:
@variablen site_width: 960px; .container width: var (site_width);
Führen Sie es durch Prefixr aus und wir erhalten:
.Behälter Breite: 960px;
Es ist wichtig zu wissen, dass dies nur eine optionale Funktion ist. Wenn Sie der Meinung sind, dass Variablen CSS komplizieren, sollten Sie diese Funktion nicht verwenden!
Nettuts + Prefixr wird gerade weiterentwickelt. Wenn Sie einen Fehler bemerken oder eine neue Funktion implementieren möchten, geben Sie unten einen Kommentar ein oder klicken Sie auf "Feedback" auf Prefixr.com.
Accentsconagua