Vor kurzem haben wir uns angesehen, wie Sie LESS.js verwenden, um Ihr CSS zu verbessern und Tonnen von Entwicklungszeit zu sparen. Heute betrachten wir eCSStender, ein weiteres JavaScript-Tool, mit dem Sie komplizierte CSS3-Eigenschaften mit sehr wenig Code implementieren können.
eCSStender kann ein wenig verwirrend sein, wenn Sie es selbst herausfinden wollen, aber wenn Sie alles verstanden haben, dauert es weniger als eine Minute, um es zu installieren und zu verwenden. Im Folgenden erläutere ich Ihnen ein einfaches Beispiel, das eine Reihe von eCSStender-Erweiterungen verwendet.
Was ist eCSStender?
Der grundlegende Arbeitsablauf von eCSStender ist wie folgt: Suchen Sie eine Erweiterung, laden Sie sie herunter, legen Sie sie in Ihrem Website-Verzeichnis ab, verknüpfen Sie sie mit Ihrem HTML-Code, implementieren Sie das CSS.
Die wichtigsten Vorteile von eCSStender wurden im letzten Artikel von Aaron Gustafson, Stop Forking with CSS3 (Aaron Gustafson ist der Schöpfer von eCSStender) ausführlich erörtert. Eines der größten Probleme bei CSS3 ist natürlich der lange Code, der erforderlich ist, um es browserübergreifend zu implementieren.
Wenn wir beispielsweise eine einfache Box haben, die abgerundete Ecken und einen Schatten darstellen soll, ist der folgende Code erforderlich:
Wir fügen im Wesentlichen nur zwei Stile hinzu, aber es erfordert sechs Zeilen Code! eCSStender reduziert die Arbeit, die hier erforderlich ist, indem Sie eine einzige Codezeile eingeben, in der alle empfohlenen Stilversionen automatisch ausgeführt werden.
Um zu sehen, wie das funktioniert, bauen wir ein einfaches Beispiel.
Die Kiste
Um es lächerlich zu machen, erstellen wir einfach eine Webseite mit einem Quadrat und etwas Text.
Das Markup hier ist super einfach. Hier ist der HTML-Code:
Und hier ist das CSS an dieser Stelle:
ECSStender wird heruntergeladen
Um unsere langweilige Box spannender zu machen, müssen wir zuerst eCSStender herunterladen. Was Sie in diesem Download erhalten, ist ein großes Durcheinander von Dateien, das Sie verwirrt und eingeschüchtert machen wird.
Zum Glück müssen Sie sich hier nur um eine einzige Datei kümmern. Einfach greifen? ECSStender.js? von der? src? Ordner und werfen den Rest. Erfahrene Benutzer sollten sich durch alle Beispiele und die Dokumentation graben können, aber für die Zwecke dieses Tutorials reicht die JavaScript-Datei von selbst aus.
Erweiterungen herunterladen
eCSStender macht nicht sofort viel. Stattdessen erstellen und / oder laden Sie kostenlose Erweiterungen, um Ihre Anforderungen zu erfüllen. Besuchen Sie die Seite eCSStender-Erweiterungen, um zu erfahren, was verfügbar ist.
Wie Sie sehen, befindet sich der eCSStender noch in der Anfangsphase der Entwicklung, daher gibt es derzeit nur eine Handvoll Erweiterungen, von denen sich einige noch im Aufbau befinden.
Wenn Sie auf einen der oben angezeigten Links klicken, werden Sie zu einer Seite weitergeleitet, auf der Sie die Erweiterung herunterladen, eine Demo anzeigen und Informationen zur Implementierung erhalten können.
Unser erster Test: abgerundete Ecken
Laden Sie die Hintergründe und Rändererweiterung herunter, um zu sehen, wie dies alles funktioniert. Auch hier erhalten Sie einen recht kräftigen Download, um eine einzige Datei zu finden. Besorgen Sie sich die Datei "eCSStender.css3-backgrounds-and-limits.js". und werfen Sie es in Ihr Website-Verzeichnis.
Verknüpfen der Dateien
Da wir jetzt sowohl eCSStender als auch eine Erweiterung installiert haben, ist es an der Zeit, sie in Ihr HTML-Dokument zu laden. Dies geschieht genau wie jede andere .js-Datei. Fügen Sie einfach einen Link in den Kopfbereich Ihres Dokuments ein.
Wie Sie sehen, entschied ich, dass der Dateiname für die Hintergründe und die Rändererweiterung viel zu lang war, und benannte ihn in "eCSStenderBB.js" um. die Dinge einfach zu halten Wenn Sie möchten, können Sie diesen Schritt einfach ignorieren. Stellen Sie nur sicher, dass Ihre Dateinamen mit den in Ihrem HTML-Code angezeigten übereinstimmen.
Das CSS
Wie Sie sehen, gab es bisher noch nicht viel Arbeit. Der größte Teil des oben genannten Inhalts ist Erklärung, Hintergrund usw. Alles, was wir bisher wirklich getan haben, ist das Herunterladen einer Datei und das Verknüpfen dieser in unserem HTML-Code, ähnlich wie Sie es mit jQuery tun würden.
Wenn Sie eine bestimmte Erweiterung in das CSS Ihrer Website implementieren, lesen Sie auf der Downloadseite die korrekte Syntax. In unserem Fall wird der folgende Code erledigt:
Das ist alles dazu. eCSStender wird seine Magie zeigen und sicherstellen, dass dieser Code für die meisten modernen Browser geeignet umgewandelt wird.
Jetzt werden Sie feststellen, dass dies uns eine ziemlich funky Form gab. Das liegt daran, dass jede Ecke auf einen anderen Radius eingestellt ist. Ich mag die Grundidee hier jedoch, also werde ich das zurücksetzen, so dass eine Ecke ziemlich scharf ist und die anderen gleichmäßig stärker abgerundet sind.
Mehr hinzufügen
Um sicherzugehen, dass Sie das Wesentliche verstehen, fügen wir zwei weitere Eigenschaften hinzu. Laden Sie zuerst die Erweiterungs- und Umwandlungserweiterungen herunter.
Besorgen Sie sich die erforderlichen .js-Dateien wie im vorherigen Beispiel und legen Sie sie in Ihrem Site-Ordner ab. Auf der Download-Seite jeder Erweiterung sehen wir, dass die Syntax wie folgt lautet:
Wie Sie sehen, ist die Übergangssyntax ziemlich einfach: Wählen Sie aus, was Sie ändern möchten, legen Sie eine Dauer fest und legen Sie eine Erleichterung fest. Mit der transform -Eigenschaft müssen Sie zunächst einen Ursprung festlegen und dann die gewünschte Transformation zusammen mit einem numerischen Indikator auflisten. In diesem Fall haben wir das Objekt um 15 Grad gedreht.
Um dies auf unser Beispiel anzuwenden, machen wir einen lustigen Hover-Effekt.
Wenn Sie nun den Mauszeiger über das Feld bewegen, wird es mit einem schönen Übergang gedreht, die Farbe geändert und die Schriftgröße geändert.
Jede dieser CSS3-Eigenschaften hätte normalerweise vier Zeilen Code benötigt. Wie Sie sehen, haben wir uns definitiv einiges an Codierung erspart.
eCSStender vs. LESS: Wie lautet das Urteil?
Insgesamt hat eCSSstender auf jeden Fall Spaß gemacht. Da ich jedoch in letzter Zeit mit vielen dieser CSS-Tools herumgespielt habe, kann ich einfach nicht anders, als sie alle mit LESS zu vergleichen.
Werfen wir einen Blick auf einige Bereiche, in denen sich jedes System auszeichnet. Standardmäßig fühlt sich LESS leistungsfähiger an, da es CSS zu einer echten Programmiersprache mit Variablen, Operationen usw. macht. Dies gibt dem Coding und der Syntax, die Sie mit eCSStender nicht erhalten, eine gewisse Flexibilität. LESS erfordert auch nicht, dass Benutzer mehrere Erweiterungen suchen und herunterladen und mit einer Vielzahl von JS-Dokumenten verknüpfen. Schließlich kann LESS von jedermann ohne Bedenken hinsichtlich der Kompatibilität sofort verwendet werden, da letztendlich nur einfaches altes CSS hochgeladen wird.
eCSStender macht es Entwicklern leicht, benutzerdefinierte Plugins zu erstellen, sodass dies langfristig die leistungsfähigere und robustere Lösung sein kann (sofern Entwickler an Bord gehen). eCSStender ist auch nett, weil Sie den Kompilierungsschritt der LESS-Methode überspringen können (.LESS-Dateien werden in .CSS-Dateien kompiliert). Es gibt auch ein paar technische Gründe, warum Sie den eCSStender unter FAQs besser finden könnten. Zum Beispiel kann ein Pre-Prozessor [wie LESS] diese Nuance nicht zur Implementierung von JavaScript-basierten Animationen als Alternative zu CSS-basierten Animationen nutzen, wenn er nicht unterstützt wird, da Pre-Prozessoren (wie sie derzeit gebaut werden). nimm eine? one size fits all? Umgang mit CSS: Jeder bekommt das Gleiche.?
Trotz alledem gibt sogar die eCSStender-Website zu, dass es unter vielen Umständen nicht allzu praktisch ist. Ich selbst kann eCSStender nie für mehr als ein bisschen Spaß und Experimentieren nutzen (es sei denn, es werden große Änderungen vorgenommen).
Aus welchem Grund auch immer, eCSStender hat viel mehr "Fummeln" gebraucht. als WENIGER, damit alles richtig funktioniert. Zum Beispiel würde ich eCSStender auf Safari zum Laufen bringen, aber dann würde es in Chrome nicht funktionieren (bizarr, da sie beide Webkit sind) und Firefox häufig zum Absturz bringen würde.
Letztendlich sollen Werkzeuge wie diese Ihren Workflow verbessern und vereinfachen. Geben Sie ihnen einen Schuss, um zu sehen, ob diese Absicht tatsächlich zum Tragen kommt. Wenn SASS, LESS, eCSStender oder andere ähnliche Tools dazu führen, dass der Codierungsprozess tatsächlich um mehr Zeit erweitert wird, werfen Sie sie um und kehren Sie zu den alten HTML- und CSS-Elementen zurück, wie sie beabsichtigt waren.
Tritt dem Gespräch bei
Hinterlassen Sie einen Kommentar und teilen Sie uns mit, welche CSS-Werkzeuge Sie ausprobiert haben. Sagen Sie uns Ihre Meinung zu LESS und eCSStender. Magst du eine und hasst die andere, liebst sie beide oder kannst du keinen Grund dafür finden?
Als Entwickler in der realen Welt entscheiden Sie letztendlich, was angenommen wird und was nicht und wir möchten Ihre Meinungen hören!