Zeitsparende CSS3-Tools und Generatoren

Viele der CSS3-Spezifikationen wurden in früheren Beiträgen hier im Webentwickler-Blog überprüft und vorgestellt. Die Implementierung auf allen Geräten und Browsern kann eine Herausforderung sein, je nachdem, welche Stileigenschaften unterstützt werden. Zusätzliche Präfixcodes helfen, aber die Einhaltung der Spezifikationsraten bei Browsern kann zu großen Kopfschmerzen führen.

Eine der einfacheren Möglichkeiten, Ihren CSS3-Code mit Anpassungen auf den neuesten Stand zu bringen, besteht darin, Online-Tools und automatisch generierte Codeanwendungen zu verwenden, die das Rätselraten Ihres Entwicklungsprozesses erleichtern. In diesem Beitrag werde ich einige der Tools und Generatoren hervorheben und überprüfen, die große Vorteile und Unterstützung bieten, um Ihr CSS3 in den meisten modernen Browsern auf dem neuesten Stand und effektiv zu halten.

CSS-Auswahltest

CSS3 Selectors Test ist kein Codegenerator, aber ein großartiges Tool zum Ausführen einer großen Anzahl kleiner Tests, um festzustellen, ob Ihr Browser kompatibel ist, und unterstützt CSS-Selektoren, die nicht von Benutzerinteraktionen abhängig sind. Der Selektortest ist Teil von CSS3.Info, das sich selbst als "alles, was Sie über CSS3 wissen müssen" ankündigt. Der Selektortest ( Abbildung A) ist ein guter Ausgangspunkt, um Hinweise zu ermitteln, bei denen bestimmte Browser bestimmte CSS3-Selektoren möglicherweise nicht unterstützen.

Ein Test im IE 8.0.6-Browser ergab 20 nicht unterstützte Selektoren und 1 Buggy-Selektor von einundvierzig Selektoren. Von den insgesamt 574 Tests haben 345 bestanden, was einer Punktzahl von 60% entspricht. Ein Test in Firefox 7.0.1 berichtete von den 41 Selektoren, dass 41 bestanden wurden, 0 fehlerhaft waren und 0 nicht unterstützt wurden, und bestand 574 von 574 Tests für eine 100% bestandene Punktzahl. Ein letzter Test, den ich in Chrome 15.0 durchgeführt habe, ergab die gleichen Ergebnisse wie Firefox, was einer 100% igen Punktzahl entspricht.

Ultimativer CSS-Gradientengenerator

Ultimativer CSS-Verlaufsgenerator ( Abbildung B nutzt die Leistung von HTML5 und CSS3, um Farbverläufe mit reinem Stil und ohne benutzerdefinierte Bilder anzugeben. Diese CSS3-Farbverläufe können wiederholt für Hintergründe und Verlaufseffekte auf Ihren Websites verwendet werden.

Der CSS Gradient Generator funktioniert am besten mit den neuesten Versionen von Firefox, Chrome, Safari, Opera oder IE. Der Generator bietet einen Import aus vorhandenem CSS, mehr als 135 Verlaufsvoreinstellungen, Opazitätsunterstützung mit mehreren Stopps und einen Import aus einem Bild, der einen Bildverlauf in CSS konvertiert.

Ich habe die Voreinstellung mit dem Namen "Blau bis transparent scharf" ausgewählt und dann die vertikale Ausrichtung von links oben nach rechts unten in Diagonale geändert, den IE überprüft, die Kommentare überprüft und eine Überprüfung für die IE9-Unterstützung hinzugefügt, die eine Verlaufsklasse zusammen mit einem generiert IE 9-Überschreibung, die dem HTML-Code hinzugefügt werden soll, und Vervollständigung der IE9-Unterstützung. Die Gradientenstopps können zusammen mit Schiebereglern zum Einstellen von Farbton, Sättigung und Helligkeit ebenfalls angepasst werden. Für die Auswahl des Farbformats steht eine weitere Option zur Verfügung, die standardmäßig rgba ist. Es werden jedoch auch die Farbformate hex, rgb, hsl und hsla bereitgestellt. Sobald Sie fertig sind, können Sie über den eindeutigen Link einen Link zum aktuellen Verlauf erstellen, diesen speichern oder freigeben oder das generierte CSS kopieren und in Ihr CSS-Dokument einfügen. Ich habe den Code in meinen Texteditor kopiert und musste einige Anpassungen vornehmen, da der automatisch generierte Code jedes Styling als Hintergrund auflistete : Ich habe sie an das Hintergrundbild angepasst : und dann funktionierten alle Styling-Eigenschaften.

Ich habe auch ein Verlaufsbild importiert und das CSS3 aus dem Generator-Tool erstellt. Ich musste den Code genau wie in der zuvor automatisch generierten Aufgabe optimieren, damit er ordnungsgemäß funktioniert. Die Ausgabe für jeden der getesteten Farbverläufe wird in Chrome 15.0 in Abbildung C angezeigt:

CSS3 Bitte!

CSS3 Bitte! Der browserübergreifende CSS3-Regelgenerator ( Abbildung D ) ist ein großartiges Online-Tool zum Vornehmen von Inline-Änderungen zum Bearbeiten von CSS für viele Stileigenschaften. Einige der verfügbaren bearbeitbaren Stile umfassen Rahmenradius, Kastenschatten, linearer Farbverlauf, Drehen, Hintergrundfarbe, Übergang, Textschatten, Animation, @keyframes und mehr. Die Online-Bewerbung von Paul Irish und Jonathan Neal ist eine gemeinsame Anstrengung, um Webentwicklern dabei zu helfen, in kurzer Zeit nützlichen browserübergreifenden CSS3-Code zu erstellen.

Ich habe die Online-Anwendung mit dem ersten Snippet getestet, bei dem es sich um die Styling-Eigenschaft .round_box handelt, bei der der Randradius zum Festlegen der Ecken verwendet wird. Ich habe die Standardeinstellung 12px geändert, auf 24px erhöht und in meine Zwischenablage kopiert. Dann fügte ich einige Ergänzungen des Rahmenstils und der Farbe sowie eine definierte Höhe hinzu und hatte innerhalb weniger Minuten dieses einfache abgerundete Feld erstellt, wie es in Chrome 15.0 unten angezeigt wird.

Abbildung E.

CSS Gen.

CSS3Gen ( Abbildung F ) Mit dieser Funktion können Sie auf einfache Weise nützliche Ausschnitte aus CSS3-Code generieren und direkt in Ihre Webdokumentprojekte kopieren. Mit diesem Tool wird beispielsweise nicht mehr versucht, sich die Syntax für die Rahmenradiusregel in einem Webkit-Browser zu merken. Die drei von CSS3Gen bereitgestellten Tools kümmern sich um alle Herstellerpräfixe zum Erstellen von Rahmenradius, Kastenschatten und Textschatten. Wählen Sie einfach das CSS3-Element aus, das Sie verwenden möchten, formatieren Sie es in Ihrem Browser und fügen Sie es dann in Ihr Webdokument ein. Ich habe das Box Shadow-Tool getestet und mit der Live-Vorschau können Sie Winkel, Abstand, Unschärfe, RGB und Deckkraft des Schattens anpassen. Das resultierende CSS3 kann in nur wenigen Sekunden kopiert und eingefügt werden (siehe Abbildung) G.

Beim Kopieren in mein Dokumentprojekt ist dies das Beispielergebnis in Chrome 15.0:

Abbildung H.

CSS3-Spielplatz

CSS3 Playground ( Abbildung I ) von Mike Plate ist ein wunderbares Online-Tool zum Erstellen von CSS3-kompatiblen Stilen für CSS3-Spalten, Verlaufshintergründe, Transformationen, Textschatten, Radius- und Kastenschatten und mehrere andere. Das Tool bietet eine sofortige Aktualisierungsfunktion mit einer Live-Vorschau jeder Änderung sowie der in den HTML- und CSS-Dateien zu verwendenden Stile. Ich wollte das Spaltengenerator-Tool testen und fand es ziemlich einfach, alle Einstellungen mithilfe der Schieberegler und der manuellen Eingabe anzupassen. Innerhalb von Sekunden hatte ich einen Stil mit drei Spalten, 10 Pixel Lücke, 2 Pixel Regelstärke und einer warmen orange Farbe erstellt. Die resultierende Ausgabe wird in Firefox 7.0.1 in Abbildung J unten angezeigt.

Wenn das Styling auf meine Beispiel-CSS- und HTML-Webdokumente angewendet wird, wird Abbildung K angezeigt, wie in Chrome 15.0 angezeigt:

Wenn Sie in CSS3 von Grund auf neu programmieren und gestalten und es einfach zu lange dauert oder wenn Sie eine schnelle Änderung vornehmen müssen, sparen diese Online-CSS3-Tools und Codegeneratoren Zeit und sind nützlich, wenn Sie unter Druck stehen Mach es jetzt fertig.